文章目录
学习HTML就是学习各种标签，然后针对你想要的内容来使用相应的标签。
HTML标签即“HTML元素”。
一.html标签
整个网页从<html>开始，到<html>结束。
二.head标签
此标签内定义的内容在浏览器中不可见。
表1 <head>内部标签
| <head>内部标签 | 说明 |
|---|---|
| <title> | 定义网页标题 |
| <meta> | 定义网页的基本信息（供搜索引擎） |
| <style> | 定义CSS样式 |
| <link> | 链接外部CSS文件或脚本文件 |
| <script> | 定义脚本语言 |
三.body标签
用于定义网页展示内容
1.段落标签
| 标签 | 语义 | 说明 |
|---|---|---|
| <h1>~<h6> | header | 标题 |
| <p> | paragraph | 段落 |
| <br> | break | 换行 |
| <hr> | horizontal rule | 水平线 |
| <div> | division | 分割（块元素） |
| <span> | span | 区域（行内元素） |
2.文本标签
| 标签 语义 | 说明 |
|---|---|
| <strong> | strong |
| <em> | emphasized |
| <cite> | cite（引用） |
| <sup> | superscripted |
| <sub> | subscripted |
3.小知识点
（1）空格
空格的代码： 
（2）标签的分类
①一般标签：开始符号和结束符号均有。这之间可以插入其他标签或者文字
②自闭合标签：只有开始符号，不插入其他标签或者文字，只能定义自身的属性。
如：<br/>、<hr/>
（3）HTML元素分类
HTML元素根据浏览器表现形式分为两类：①块元素；②行内元素
①块元素：独占一行、其内部可以容纳其他块元素或行内元素。
如：<div>、<p>、<h1>~<h6>、<br>、<ol>、<ul>
②行内元素（内联元素）：在浏览器中可以与其它行内元素共占一行，只有当多个元素的总宽度大于浏览器的宽度时，才会换行显示。
如：<a>、<span>、<strong>、<b>、<em>、<i>、<img>、<input>、<select>
4.列表标签
| 标签 | 语义 | 说明 |
|---|---|---|
| <ul> | unordered list | 无序列表 |
| <ol> | ordered list | 有序列表 |
| <dl> | definition list | 定义列表 |
（1）无序列表
①指没有顺序的列表项目
②始于<ul>标签，每个列表项始于<li>
③type属性有三个选项:disc实心圆、circle空心圆、square小方块。 默认属性是disc实心园。
④实例
<!DOCTYPE html>
<htmml>
<head>
<meta charst = "UTF-8">
<title>html--无序列表</title>
</head>
<body>
<ul>
<li>默认的无序列表</li>
<li>默认的无序列表</li>
<li>默认的无序列表</li>
</ul>
<ul>
<li type = "circle">添加circle属性</li>
<li type = "circle">添加circle属性</li>
<li type = "circle">添加circle属性</li>
</ul>
<ul>
<li type = "square">添加square属性</li>
<li type = "square">添加square属性</li>
<li type = "squaare">添加square属性</li>
</ul>
</body>
</html>
（2）有序列表
①指按照字母或数字等顺序排列的列表项目
②其结果是带有前后顺序之分的编号,如果插入和删除一个列表项，编号会自动调整。
③始于<ol>标签，每个列表项始于<li>
| type属性值 | 说明 |
|---|---|
| 1 | 数字1、2、3…… |
| a | 小写英文字母a、b、c…… |
| A | 大写英文字母A、B、C…… |
| i | 小写罗马数字i、ii、iii…… |
| I | 大写罗马数字I、II、III…… |
⑤实例
<ol>
<li>默认的有序列表</li>
<li>默认的有序列表</li>
<li>默认的有序列表</li>
</ol>
<ol type = "a" start = "2">
<li>第1项</li>
<li>第2项</li>
<li>第3项</li>
<li value ="20">第四项</li>
</ol>
<ol type = "Ⅰ" start = "2">
<li>第1项</li>
<li>第2项</li>
<li>第3项</li>
</ol>
（3）自定义列表
①自定义列表不仅仅是一列项目，而是项目及其注释的组合。
②以<dl>标签开始。每个自定义列表项以<dt>开始。每个自定义列表项的定义以<dd>开始。
③用于对术语或名词进行解释和描述，自定义列表的列表项前没有任何项目符号。
④基本语法：
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
<dt>名词2</dt>
<dd>名词2解释1</dd>
<dd>名词2解释2</dd>
</dl>
<dl>即“definition list（定义列表）”，
<dt>即“definition term（定义名词）”，
而<dd>即“definition description（定义描述）”。
⑤实例
<dl>
<dt>计算机</dt>
<dd>用来计算的仪器</dd>
<dt>显示器</dt>
<dd>以视觉方式显示信息的装置</dd>
</dl>
5.表格标签
（1）表格基本标签
| 标签 | 语义 | 说明 |
|---|---|---|
| table | table | 表格 |
| tr | table row | 行 |
| td | table data cell | 单元格 |
①表格基本标签必须存在。
②基本说明：
<table>和</table>标记着表格的开始和结束，
<tr>和</tr>标记着行的开始和结束，几组表示该表格有几行。
<td>和</td>标记着单元格的开始和结束，表示这一行中有几列。
③举例
<table>
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
</tr>
</table>
（2）表格结构标签
| 标签 | 语义 | 说明 |
|---|---|---|
| thead | table head | 表头 |
| tbody | table body | 表身 |
| tfoot | table foot | 表脚 |
| th | table header | 表头单元格 |
（3）小知识点
①合并行
使用td标签的rowspan属性。
②合并列
使用td标签的colspan属性。
6.图像标签
（1）图像标签及其属性
图像标签为<img>，是自闭合标签。
<img src="…" alt="…" title="…">
表6 <head>标签的属性
| <img>标签的属性 | 说明 |
|---|---|
| src | 图片的文件地址（必须有此标签） |
| alt | 图片显示不出来时的提示文字（必须有此标签） |
| title | 鼠标移到图片上的提示文字 |
（2）图片格式
①“JPEG”格式
JPEG格式，也叫做JPG或JPE格式，是最常用的一种文件格式。
大部分手机相机拍照的照片也是JPE格式。
JPEG格式的压缩技术可将图像有损压缩，会降低图片的质量。
适合应用于互联网，可减少图像的传输和加载时间。
能很好处理大面积色调的图像，如相片、网页一般的图片。
②“PNG”格式
PNG格式图片体积小，无损压缩，能保证网页的打开速度。
支持透明信息。
可以称为“网页设计专用格式”。
③“GIF”格式
分为动态GIF和静态GIF两种。
图片图像效果很差。
支持动态图片，支持透明背景。
7.链接标签
（1）链接标签的默认样式
①鼠标样式
当鼠标移入网页上的某个超链接时，其样式会变为一只小手；当鼠标移出超链接区域时，样式会再次回到箭头形状。
②颜色及下划线
在浏览器下，超链接被点击之前是蓝色的，点击之后会变成紫色。
超链接默认是带下划线的，下划线颜色和文本颜色保持一致。
清空浏览器的历史记录会让超链接的颜色再次变回蓝色。
（2）链接属性
<a href=“链接地址（要跳转到到的url）” target=“新页面的打开方式”>链接文本</a>
①href属性
href的本质是指向一个文件，这个文件几乎可以是任意格式的。如果浏览器支持这种格式，那么它就可以在浏览器上显示，比如常见的图片、音频、视频等，如果浏览器不支持这种格式，那么就提示用户下载。
href 使用的路径可以是绝对路径，也可以是相对路径。
绝对路径往往以域名为起点，
相对路径往往以当前文件或者当前域名为起点，例如 ./…/uploads/data_package/Foundation.zip。
②target属性
表6 <a>标签的target属性
| <img>标签的属性 | 说明 |
|---|---|
| _self | 默认方式，即在当前窗口打开链接 |
| _blank | 在一个全新的空白窗口中打开链接 |
（3）链接分类
超链接根据链接对象的不同分为：外部链接和内部链接，其中内部链接又分为内部页面链接 、锚点链接。
①外部链接
②内部页面链接
③锚点链接
指点击这个超链接，会跳到当前页面的某一部分。
