1 基本标签
1.1 head标签
在HTML中，一般来说，只有6个标签能放在head标签内。
- title标签
- meta标签
- link标签
- style标签
- script标签
- base标签
1.1.1 title标签
定义网页的标题
1.1.2 meta标签
在HTML中，meta标签一般用于定义页面的特殊信息，例如页面关键字、页面描述等。这些信息不是提供给人看的，而是提供给搜索引擎蜘蛛（如百度蜘蛛、谷歌蜘蛛）看的。简单来说，meta标签就是用来告诉“搜索蜘蛛”这个页面是干嘛的。有两个重要的属性：name和http-equiv
<!DOCTYPE html>
<html>
<head>
<!--网页关键字-->
<meta name="keywords" content=""/>
<!--网页描述-->
<meta name="description" content=""/>
<!--本页作者-->
<meta name="author" content="">
<!--版权声明-->
<meta name="copyright" content=""/>
<!--网页编码，h5可简化为<meta charset="utf-8"/>-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<!--当前页面在6秒后会自动跳转到http://www.baidu.com-->
<meta http-equiv="refresh" content="6;url=http://www.baidu.com"/>
</head>
<body>
</body>
</html>
1.1.3 style标签
定义元素的CSS样式。
1.1.4 script标签
用于定义页面的JavaScript代码，也可以引入外部JavaScript文件。
1.1.5 link标签
用于引入外部样式文件（CSS文件）。
1.1.6 base标签
用于配置所有相对路径的基准路径。
2 body标签
用于定于网页的标签布局，具体如下文标签介绍。
3 注释
HTML注释： <!–注释内容 -->
CSS注释： /* 注释内容 */
JavaScript单行注释：// 注释内容
JavaScript多行注释：/* 注释内容 */
2 文本
2.1 标题标签
在HTML中，共有六个级别的标题标签：h1、h2、h3、h4、h5、h6。
2.2 段落标签
在HTML中，我们可以使用p标签来显示一段文字。p标签包裹的段落会自动换行，并且段落与段落之间有一定的间距。
2.3 换行标签
在HTML中，我们可以使用br标签来给文字进行换行。其中<br/>是自闭合标签，br是“break（换行）”的缩写。
2.4 文本标签
常用的文本标签有以下八种：
- 粗体标签：strong、b
- 斜体标签：i、em、cite
- 上标标签：sup
- 下标标签：sub
- 中划线标签：s、del
- 下划线标签：u、ins
- 大字号标签：big
- 小字号标签：small
如果想要对文本实现加粗效果，尽量使用strong标签，而不要使用b标签。这是因为strong标签比b标签更具有语义性。
2.5 水平线标签
在HTML中，我们可以使用hr标签来实现一条水平线。hr，是“horizon（水平线）”的缩写。
2.6 div标签
在HTML中，我们可以使用div标签来划分HTML结构，从而配合CSS来“整体”控制某一块的样式。div，全称“division（分区）”，用来划分一个区域。div标签内部可以放入所有其他标签，例如p标签、strong标签、hr标签等。
2.7 标签类型总结
2.7.1 自闭和标签
2.7.2 块级元素
2.7.3 行内元素
2.7.4 特殊符号
3 列表
3.1 有序列表
有序列表从<ol>开始，到</ol>结束。有序列表一般采用数字或字母作为顺序，默认是采用数字顺序。
<ol>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ol>
在HTML中，我们可以使用type属性来改变列表项符号。默认情况下，有序列表使用数字作为列表项符号。
<ol type="a">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>Vue.js</li>
</ol>
3.2 无序列表
无序列表从<ul>开始，到</ul>结束。同样地，无序列表可以使用type属性修改列表项符号。
<ul type="属性值">
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ul>
3.3 定义列表
在HTML中，定义列表由两部分组成：名词和描述。<dl>标记和</dl>标记分别定义了定义列表的开始和结束；dt标签用于添加要解释的名词；而dd标签用于添加该名词的具体解释。
<dl>
<dt>HTML</dt>
<dd>制作网页的标准语言，控制网页的结构</dd>
<dt>CSS</dt>
<dd>层叠样式表，控制网页的样式</dd>
<dt>JavaScript</dt>
<dd>脚本语言，控制网页的行为</dd>
</dl>
4 表格
4.1 基本标签
在HTML中，一个表格一般会由以下三个部分组成。
- 表格：table标签
- 行：tr标签
- 单元格：td标签
<table>
<tr>
<td>单元格 1</td>
<td>单元格 2</td>
</tr>
<tr>
<td>单元格 3</td>
<td>单元格 4</td>
</tr>
</table>
4.2 标题标签
在HTML中，表格一般都会有一个标题，我们可以使用caption标签来实现。表格一般还会有表头，可以使用th标签来实现。
<table>
<caption>表格标题</caption>
<tr>
<th>表头单元格 1</th>
<th>表头单元格 2</th>
</tr>
<tr>
<td>表行单元格 1</td>
<td>表行单元格 2</td>
</tr>
<tr>
<td>表行单元格 3</td>
<td>表行单元格 4</td>
</tr>
</table>
4.3 语义标签
一个完整的表格包含：table、caption、tr、th、td。为了更深入地对表格进行语义化，HTML引入了thead、tbody和tfoot这三个标签。thead、tbody和tfoot把表格划分为三部分：表头、表身、表脚。有了这三个标签，表格语义更加良好，结构更清晰，也更具有可读性和可维护性。
<table>
<caption>考试成绩表</caption>
<thead>
<tr>
<th>姓名</th>
<th>语文</th>
<th>英语</th>
<th>数学</th>
<tr>
</thead>
<tbody>
<tr>
<td>小明</td>
<td>80</td>
<td>80</td>
<td>80</td>
</tr>
<tr>
<td>小红</td>
<td>90</td>
<td>90</td>
<td>90</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>平均</td>
<td>85</td>
<td>85</td>
<td>85</td>
</tr>
</tfoot>
</table>
4.4 单元格合并
<td rowspan = "跨越的行数"></td>
<td colspan = "跨越的列数"></td>
例如下面这段代码
<table width="500" height="249" border="1" cellspacing="0">
<tr>
<td></td>
<td colspan="2"></td>
</tr>
<tr>
<td rowspan="2"></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
其效果为：
5 图片
在HTML中，我们可以使用img标签来显示一张图片。对于img标签，我们只需要掌握它的三个属性：src、alt和title。
<img src="" alt="" title="" />
6 超链接
在HTML中，我们可以使用a标签来实现超链接。
<a href="链接地址">文本或图片</a>
a标签的target属性取值有四种：
7 表单
在HTML中，表单相关的标签有五种：form、input、textarea、select和option。在外观上可以划分为：
- 单行文本框
- 密码文本框
- 单选框
- 复选框
- 按钮
- 文件上传
- 多行文本框
- 下拉列表
7.1 form标签
- name属性：在一个页面中，表单可能不止一个，每一个form标签就是一个表单。为了区分这些表单，我们可以使用name属性来给表单进行命名。
- method属性：用于指定表单数据使用哪一种http提交方法。method属性取值有两个，一个是get，另外一个是post。
- action属性：用于指定表单数据提交到哪一个地址进行处理。
- target属性：与a标签的target属性是一样的，都是用来指定窗口的打开方式。一般情况下，我们只会用到_blank这一个属性值。
- enctype属性：用于指定表单数据提交的编码方式。一般情况下，我们不需要设置，除非你用到上传文件功能。
7.2 input标签
<form action="#" method="get">
用户名: <input type="text" name="username" value="请输入用户名" maxlength="6"> <br/>
密码: <input type="password" name="pwd"> <br>
性别:
男 <input type="radio" name="sex" value="男">
女 <input type="radio" name="sex" value="女" checked="checked"> <br>
爱好:
吃饭 <input type="checkbox" name="hobby" value="吃饭"/>
睡觉 <input type="checkbox" name="hobby" value="睡觉">
打豆豆 <input type="checkbox" name="hobby" checked="checked" value="打豆豆"> <br>
<input type="submit" value="免费注册">
<input type="reset" value="重新填写">
<input type="button" value="获取短信验证码"> <br>
上传头像: <input type="file">
</form>
7.3 textarea标签
<form>
留言板:
<textarea cols="50" rows="5"> </textarea>
</form>
7.4 select标签
select标签的属性：
option标签的属性：
<form>
籍贯:
<select>
<option>山东</option>
<option>北京</option>
<option>天津</option>
<option selected="selected">广东</option>
</select>
</form>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
