前端学习学了忘，忘了学，知识点学的一地稀碎。最近准备对现在掌握的知识点进行梳理并整理，用于帮助自己记忆。如果有什么地方写的有错误或者有遗漏的地方，欢迎大家指正。
HTML文档基本结构主要包含以下几个标签:
<!DOCTYPE html>:用于声明为 HTML5 文档。<html>:是页面的根元素标识HTML文档，通常使用全局属性“lang”声明语言类型。<head>:标识头部区域,内部通常包含<meta>,<title>和一些外联样式。<meta>标签提供HTML文档的元数据,常用属性为”charset”，用于设置页面编码格式。<body>:标签标识主体区域。<!DOCTYPE html>//html5网页声明
<html lang="en">lang属性：声明当前页面的语言类型，“en"英文，”zh“中文
<head>
<meta charset="utf-8"/> //设置网页编码格式位utf-8
<title>文档标题</title> //设置文档标题
</head>
<body>
页面内容
……
</body>
</html>
标签：比如<p>，由一对尖括号和表示标签含义的“关键字”构成。
元素：比如<p>输入的内容</p>，由开始标签、结束标签以及标签中包含的内容构成。
HTML标签根据特性分为2种，一种是"一般标签”和“自闭合标签”：
一般标签：有开始符号和结束符号，可以在中间插入内容。例：<p>一段文字</p>
自闭合标签：只有开始符号没有结束符号，不能插入其他标签或文字，只能定义自身的属性。例：<br/>,<hr/>
HTML 元素主要分为:block（块元素、块级元素），inline（行内元素、内联元素），inline-block（行内块元素）
主要都是块元素
| 标签 | 作用 |
|---|---|
<h1>~<h6> |
标题 |
<p> |
段落 |
<br/> |
换行 |
<hr/> |
水平线 |
<pre> |
内容原格式标签 |
主要都是行内元素
| 标签 | 说明 |
|---|---|
<em> |
斜体 |
<strong> |
加粗 |
<ins> |
插入文本 |
<del> |
删除 |
<sub> |
下标 |
<sup> |
上标 |
<div>和<span>标签单独拎出来主要是因为这两个比较特殊，且是比较常用的标签。它们没有特别的语义，相当于一个分隔区块或者一个区域部分，用来布局网页内容。
<div></div>是块元素，<span></span>是行内元素，其特点参照 “（二）元素”。
图片元素为行内块元素
<img src="" alt="" title=""/>
用于添加网页图片，主要有三个属性(“*”号为必要属性）
| 属性 | 说明 |
|---|---|
| src* | 图片路径 |
| alt* | 图片失效显示的图片名称 |
| title | 鼠标悬停显示的图片名称 |
绝对路径：是指地址的完全路径。
相对路径：是指相引用该文件的文档地址相对于文件的路径地址。
链接元素为行内元素
<a href=""></a>
链接标签主要用于超链接跳转，主要有两个属性：
| 属性 | 属性 | 说明 |
|---|---|---|
| href* | URL | 被链接的URL |
| target | _self | 默认，当前窗口打开 |
| _blank | 在新窗口打开 | |
| _top | 在顶层框架中打开 | |
| _parent | 在当前框架中打开 |
列表元素属于块元素
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
<dl>
<dt>1</dt>
<dt>2</dt>
<dd>描述</dd>
</dl>
| 标签 | 说明 |
|---|---|
| ul | 无序列表 |
| ol | 有序列表 |
| dl | 定义列表 |
| 属性 | 属性值 | 说明 |
|---|---|---|
| type | disc | 默认值，实心圆“●” |
| circle | 空心圆“○” | |
| square | 实心正方形“■” |
| 属性 | 属性值 | 说明 |
|---|---|---|
| start | "数字" | 修改起始数字 |
| type | 1 | 1，2,3…… |
| a | a,b,c…… | |
| A | A,B,C…… | |
| i | i、ii、iii…… | |
| I | I、II、III…… |
定义列表主要由<dl></dl>包裹，<dt></dt>为定义名词，<dd></dd>为定义描述。
<table border="1">border是表格边框宽度
<!-- 第一行 -->
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
<td>第一行第三列</td>
</tr>
<!-- 第二行 -->
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
<td>第二行第三列</td>
</tr>
</table>
一个基本的table表格，只需要三个部分：最外层<table></table>标签，行标签<tr></tr>，行标签内包裹列标签<td></td>。
<table border="1">border是表格边框宽度
<caption>表格标题</caption>
<!-- 表头 -->
<thead>
<tr>
<th>为第一行第一列表头</th>
<th>为第二行第一列表头</th>
<th>为第三行第一列表头</th>
</tr>
</thead>
<!-- 表身 -->
<tbody>
<tr>
<td>td为第二行第一列内容</td>
<td>td为第二行第二列内容</td>
<td>td为第二行第三列内容</td>
</tr>
</tbody>
<!-- 表脚 -->
<tfoot>
<tr>
<td>td为第三行第一列内容</td>
<td>td为第三行第二列内容</td>
<td>td为第三行第三列内容</td>
</tr>
</tfoot>
</table>
table表格完整结构由：<table></table>标签、<caption></caption>标题标签、<thead></thead>表头标签、<tbody></tbody>表身标签、<tfoot></tfoot>表脚标签、行标签<tr></tr>，列标签<td></td>、表头列标签<th></th>几个部分组成。
合并行使用td标签的rowspan属性，而合并列则用到td标签的colspan属性。
使用语法<td colspan="需要合并的行数">，确定好需要合并的行数，并删除被合并行的<td>标签。
<table border="1">
<!-- 第一行 -->
<tr>
<td colspan="3">第一行第一列</td>
<!-- <td>第一行第二列</td> -->删除该单元
<!-- <td>第一行第三列</td> -->删除该单元
</tr>
<!-- 第二行 -->
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
<td>第二行第三列</td>
</tr>
</table>
使用语法<td rowspan="需要合并的列数">，确定好需要合并的列数，并删除被合并列的<td>标签。
<table border="1">
<!-- 第一行 -->
<tr>
<td rowspan="2">第一行第一列</td>
<td>第一行第二列</td>
<td>第一行第三列</td>
</tr>
<!-- 第二行 -->
<tr>
<!-- <td>第二行第一列</td> -->删除该单元
<td>第二行第二列</td>
<td>第二行第三列</td>
</tr>
</table>
表单元素是块元素。是HTML中一个用于收集用户的输入信息，表示文档中的一个区域，此区域包含交互控件，将收集到的信息发送到服务器。
表单语法：<form action="" method=""></form>
| 属性 | 属性值 | 说明 |
|---|---|---|
| action | URL | 信息提交到的web服务器的URL |
| method | get、post、put | 表单信息提交方式 |
一个表单元素中包含各种控件元素：输入元素<input>、多行文本<textarea>、下拉列表（<select>&<option>）等。
语法：<input type="">
表单中多数情况下被用到的表单标签是输入标签 。
输入类型是由 type 属性定义。
| type值 | 说明 |
|---|---|
| text | 文本输入 |
| password | 密码输入 |
| button | 按钮 |
| reset | 重置按钮 |
| submit | 提交按钮 |
| radio | 单选框 |
| checkbox | 复选框 |
| file | 文件上传 |
显示效果如下：
每个input元素都有相应的value值，是提交到web服务器的主要信息。
name是自定义的的input元素名称，特别是单选框和复选框，一组选项必须设置同一个name才能生效。
用于设置单选框和复选框默认选中项，在需要默认选中的input上加上checked="checked"，在HTML5中也可直接简写为checked。
<textarea> 标签定义一个多行的文本输入控件。
语法<textarea rows="行数" cols="列数"></textarea>
下拉列表需要<select></select>和<option></option>配合使用，select元素内内至少包含一个option选项。
<select name="fruit">
<option value="apple">苹果</option>
<option value="lemon" selected>柠檬</option>
<option value="orange" disable>橘子</option>
</select>
| 元素 | 属性 | 属性值 | 说明 |
|---|---|---|---|
| select | disable | disable&true | 禁用下拉菜单 |
| multiple | multiple&true | 可进行多选 | |
| size | number,大于1 | 下拉菜单可见选型数目 | |
| option | disable | disable&true | 禁用选项 |
| selected | selected&true | 默认选中项 |
<lable>标签用于显示在输入控件旁边的说明性文字，即将控件与文字关联。
abel标签的for属性有两个作用：
<input type="radio" id="bb" name="hobby" value="baskatball">
<label for="bb"> 篮球 </label>
<input type="radio" id="fb" name="hobby" value="football">
<label for="fb"> 足球</label>
使用fieldset和legend标签有两个作用：
不使用fieldset和legend和使用的区别
通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。
frame语法：<iframe src="URL"></iframe>
| 属性 | 属性值 | 说明 |
|---|---|---|
| src | URL | 源文件URL |
| widrh | number | 宽度 |
| height | number | 高度 |
| frameborder | 0/1 | 是否显示边框 |
| scrolling | auto/yes/no | 默认auto，yes总是显示滚轮，no总是不显示 |
meta标签主要标识HTML文档的元数据（Metadata），是数据的数据信息。元数据不会显示在客户端，但是会被浏览器解析。
meta元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者及其他元数据。
元数据可以被使用浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 Web 服务调用。
常用meta元素属性：
| 属性 | 属性值 | 说明 |
|---|---|---|
| charset | UTF-8 | 定义文档的字符编码（html5） |
| http-equiv | content-type/default-stylerefresh/…… | 把content属性关联到HTTP头部 |
| name | author/keywords/description/…… | 把 content 属性关联到一个名称 |
| content | description/keywords/…… | meta 信息的内容 |
属性是HTML元素提供的附加信息，一般面熟于开始标签，以键值对出现例如：class=“value”
| 属性 | 说明 |
|---|---|
| title | 设置元素提示文字 |
| lang | 设置语言（cn，en，ja） |
| style | 设置css样式 |
| id | 指定元素ID |
| class | 设置元素类名 |
HTML5是HTML 4.01的升级版，删除或重新定义了一些元素，以及增加了很多新元素以及功能，比如canvas、SVG、WebSocket.本地存储等。
HTML5 拓展了哪些内容：
对于语义化的理解：
新增常见语义化标签：
| 标签 | 说明 |
|---|---|
| header | 定义头部区域 |
| nav | 定义导航区域 |
| article | 定义内容区域 |
| section | 定义文档的区块 |
| aside | 定义侧边栏内容 |
| footer | 定义页脚区域 |
| figure | 标记文档中的一个图像 |
| figcaption | 用来为
|
| type值 | 说明 |
|---|---|
| time | 限制用户输入类型必须为时间 |
| date | 限制用户输入类型必须为日期 |
| week | 限制用户输入类型必须为周 |
| month | 限制用户输入类型必须为月份 |
| number | 限制用户输入类型必须为数字 |
| url | 限制用户输入类型必须为URL类型 |
| 限制用户输入类型必须为邮箱 | |
| color | 生成一个颜色选择列表 |
| range | 数值选择滑块 |
| search | 搜索框 |
| tel | 电话号码 |
<form>标签属性：
| 属性 | 属性值 | 说明 |
|---|---|---|
| autocomplete | Boolean | 规定 form 或 input 域应该拥有自动完成功能 |
| novalidate | Boolean | 规定在提交表单时不应该验证 form 或 input 域 |
以上两个属性均可用于form标签，或者单个input标签
<input>标签属性：
| 属性 | 属性值 | 说明 |
|---|---|---|
| autofocus | boolean | 自动获取焦点 |
| autocomplete | boolean | 自动完成 |
| novalidate | boolean | 是否进行input域验证 |
| placeholder | 文本 | 表单提示输入 |
| required | boolean | 规定必须在提交之前填写输入域（不能为空） |
| multiple | boolean | 规定 元素中可选择多个值，通常用于文件提交 |
HTML5新增了音频标签，顾名思义，主要用于音频播放。
例：
<audio>
<source src="url" type="audio/ogg">用于添加音频源，type为音频格式
<source src="url" type="audio/mpeg">
</audio>
音频支持的格式，和对应type：
| 格式 | type |
|---|---|
| MP3 | audio/mpeg |
| Ogg | audio/ogg |
| Wav | audio/wav |
音频标签参数：
| 属性 | 属性值 | 说明 |
|---|---|---|
| autoplay | autoplay | 音频在就绪后马上播放 |
| controls | controls | 如向用户显示音频控件 |
| loop | loop | 每当音频结束时重新开始播放 |
| muted | muted | 音频输出为静音 |
| src | URL | 规定音频文件的 URL |
| preload | auto none | 预加载，如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性 |
HTML5新增了视频标签，顾名思义，主要用于视频播放。
例：
···html
视频标签参数：
| 属性 | 属性值 | 说明 |
|---|---|---|
| autoplay | autoplay | 视频在就绪后马上播放 |
| controls | controls | 向用户显示控件 |
| height | pixels | 设置视频播放器的高度 |
| width | pixels | 设置视频播放器的宽度 |
| loop | loop | 当文件完成播放后再次开始播放 |
| muted | muted | 视频的音频输出为静音 |
| poster | URL | 加载等待画面图片 |
| src | URL | 要播放的视频的 URL |
| preload | auto none | 预加载，如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性 |
