2.26小白前端学习日记

**

2.26学习小结

**1. 绝对路径和相对路径
路径:当前的文件(html文件)与其他的文件的位置关系
绝对路径:从头开始计算文件出现的路径。
比如:http://www.baidu.com或C:\xampp\htdocs
相对路径中.代表当前目录。

  • 相对路径中..代表当前目录的上级目录。

  • a标签:链接到指定的文档。

  • href属性:要跳转的页面地址,值可以是绝对路径也可以是相对路径。

  • 注意:

  1. 目录大小写问题:如果要写路径,服务器端口如果是在window下那么不区分大小写,如果是在Linux中是严格区分大小写。(你的目录是大写你就大写,你的目录是小写你就小写。)../Path/1.txt
  2. href属性的值不要写本地的绝对路径。本地的绝对路径走的是File协议,file协议是本地协议不经过网络。
  3. 如果值为网站的绝对路径时要加上http://https://(也就是说要加上协议),否则它查找的是本HTML文件的某个文件夹下的内容。
  4. 链接可以链接到HTML文件上也可以链接到其他的地方(比如:图片)。
  • target属性:点击链接之后在哪里打开。

    • _blank,在新窗口打开。
    • _self,在本窗口打开(默认。)。
    • 自定义名字

锚点:URL片段标识符,请求指定资源的子资源,点击指定链接的时候跳转到指定的位置。
标记分块

<a href="#标记名">标记链接</a>

注意:

  1. 第二步标记链接的时候,需要加上#号。
  2. 第二步标记链接的时候需要和分块所起的名字一样。
  3. 有时候我们写页面的时候有可能不知道具体要链接到哪里去,那么这个时候我们可以直接使用一个#号来表示这是一个空链接。<a href="#">空链接</a>
  4. 无序列表(序:顺序)
  • 无序列表用ul标签 表示,其中包含列表中的具体项。

  • 每一项使用<li>来表示。

  • 每一项<li>中可以包含其他的标签。

  • 有序列表

    • ol表示有序列表。
    • 每个ol中使用li表示每一项。
  • 定义列表:由项目描述和项目解释组成。

    • <dl>定义一个定义列表
    • <dt>,定义列表中的项目(主题)
    • <dd>,描述列表中的项目。

    dl只能包含dt和dd,dt和dd中可以包含其他标签。
    表格
    表格和excel一样,都是用来展示数据的。
    <table>标签:告诉浏览器<table></table>之间的内容属于表格。

    • border属性:边框。
    • cellspacing属性:控制单元格与单元格之间的距离。
  • <caption>标签:给表格添加标题(可选)。

  • <thead>标签:给表格添加表头(可选)。

  • <tbody>标签:表格的主体部分(必选)。

    注意: 很多程序员写代码的时候不写theadtbodytfoot这样写也可以,但是即使你不写tbody因为他是必选的浏览器在解释的时候也会自动加上。

  • <tfoot>标签:表格的脚注部分(可选)。

注意:

  1. 在thead、tbody、tfoot中每一行数据使用<tr>标签。
  2. thead中的tr中的单元格使用<th>标签。
  3. tbody、tfoot中的tr中的单元格使用<td>标签。
html标签
<em>-----字体倾斜-----<i>
<strong>-------字体加粗-----<b>
<small>-----使标签内的内容更小
<big>-----使标签内的内容更大
<cite>----加书名号的内容,表示参考内容
<q>------表示短引用。可以默认给文字加引号
<blockquote>----表示长引用,是块元素,独占一行。
<sup>-----上标
<sub>-----下标
<ins>----插入内容,插入的内容底下会有个下划线----<u>
<del>----删除线-------<s>
<pre>----预格式标签,他会让我们的代码格式保存,不会忽略多个空格。格式保存
<code>----专门表示代码的,但他不会保留格式。一般和pre一起使用
<ul>---无序列表----<il>代表项
--type属性可以修改无序列表的项目符号,可选值:disc(默认值-圆点),square(方块),circle(空心圆圈)
<ol>---有序列表----<li>代表项
<dl>----自定义列表----<dt>代表标题----<dl>代表解释标题----<dl>处只能有dt和dl,dt和dl可以有其他标签

在这里插入图片描述
表格的一些有用属性
clospan----使单元格跨列
rowspan----跨行
border:1px solid;边框实线
border-collapse: collapse;----边框合并
margin: 0 auto;—块元素自适应水平居中
text-align: center;—文字居中

猜你喜欢

转载自blog.csdn.net/ydqstudent/article/details/114141167