四、常用html标签

4.1 常用的 html 标签

<!-- 1、成对出现的标签：-->

<h1>h1标题</h1>
<div>这是一个div标签</div>
<p>这个一个段落标签</p>


<!-- 2、单个出现的标签：-->
<br>
<img src="images/pic.jpg" alt="图片">
<hr>

<!-- 3、带属性的标签，如src、alt 和 href等都是属性 -->
<img src="images/pic.jpg" alt="图片">
<a href="http://www.baidu.com">百度网</a>

<!-- 4、标签的嵌套 -->
<div>
   <img src="images/pic.jpg" alt="图片">
   <a href="http://www.baidu.com">百度网</a>
</div>

提示:

0. 标签不区分大小写，但是推荐使用小写。
1. 根据标签的书写形式，标签分为双标签(闭合标签)和单标签(空标签)2.1 双标签是指由开始标签和结束标签组成的一对标签，这种标签允许嵌套和承载内容，比如: div标签2.2 单标签是一个标签组成，没有标签内容， 比如: img标签

4.2 小结

• 学习 html 语言就是学习标签的用法，常用的标签有20多个。
• 编写 html 标签建议使用小写
• 根据书写形式，html 标签分为双标签和单标签
• 单标签没有标签内容，双标签可以嵌套其它标签和承载文本内容

五、资源路径

当我们使用img标签显示图片的时候，需要指定图片的资源路径，比如:

<img src="images/logo.png">

这里的src属性就是设置图片的资源路径的，资源路径可以分为相对路径和绝对路径。

5.1 相对路径

从当前操作 html 的文档所在目录算起的路径叫做相对路径

示例代码:

<!-- 相对路径方式1 -->
<img src="./images/logo.png">
<!-- 相对路径方式2 -->
<img src="images/logo.png">

5.2 绝对路径

从根目录算起的路径叫做绝对路径，Windows 的根目录是指定的盘符，mac OS 和Linux 是/

示例代码:

<!-- 绝对路径 -->
<img src="/Users/apple/Desktop/demo/hello/images/logo.png">
<img src="C:\demo\images\001.jpg">

提示:

一般都会使用相对路径，绝对路径的操作在其它电脑上打开会有可能出现资源文件找不到的问题

5.3 小结

• 相对路径和绝对路径是 html 标签使用资源文件的两种方式，一般使用相对路径。
• 相对路径是从当前操作的 html 文档所在目录算起的路径
• 绝对 路径是从根目录算起的路径

六、列表标签

6.1 列表标签的种类

• 无序列表标签(ul标签)
• 有序列表标签(ol标签)

6.2 无序列表

<!-- ul标签定义无序列表 -->
<ul>
   <!-- li标签定义列表项目 -->
   <li>列表标题一</li>
   <li>列表标题二</li>
   <li>列表标题三</li>
</ul>

6.3 有序列表

<!-- ol标签定义有序列表 -->
<ol>
   <!-- li标签定义列表项目 -->
   <li><a href="#">列表标题一</a></li>
   <li><a href="#">列表标题二</a></li>
   <li><a href="#">列表标题三</a></li>
</ol>

6.4 小结

• 列表标签有无序列表标签(ul标签)和有序列表标签(ol标签)
• 列表项目对顺序有要求的时候使用ol标签
• 列表项目对顺序无要求的时候使用ul标签

七、表格标签

7.1 表格的结构

表格是由行和列组成，好比一个excel文件

7.2 表格标签

<table>标签：表示一个表格
     <tr>标签：表示表格中的一行
         <td>标签：表示表格中的列
         <th>标签：表示表格中的表头

示例代码:

<table>
   <tr>
       <th>姓名</th>
       <th>年龄</th>
   </tr>
   <tr>
       <td>张三</td>
       <td>18</td>
   </tr>
</table>

表格边线合并:

border-collapse 设置表格的边线合并，如：border-collapse:collapse;