目录
前言
前端三件套：HTML5+CSS3+Javascript；今日简单总结一下HTML5。
一、HTML5是什么？
HTML指的是超文本标记语言，它是用来描述网页的一种语言。
二、结构中每个标签的含义
1.DOCTYPE:文档类型声明标签
这句代码的意思是：当前代码采用的是HTML5版本来显示网页。
注意：1、<!DOCTYPE>声明位于文档中的最前面，处于<html>标签之前。
2、<!DOCTYPE>不是一个HTML标签，它是文档类型声明标签。
2.lang语言种类
用来定义当前文档显示的语言。
1、en定义语言为英语
2、zh-CN定义为中文
3.meta标签
<meta>标签的charset属性规定HTML文档应该使用哪种字符编码。
charset常用的值有：GB2312、 BIG5 、GBK和UTF-8,其中UTF-8也被称为万国码。
4.其他标签
- <html>最大标签，根标签
- <head>文档的头部
- <title>网页标题
- <body>文档的主体
三、HTML常用标签
1.标题标签
HTML提供了6个等级的网页标题，<h1>-<h6>。
特点：1、加了标题的文字会变的加粗，字号也会依次变大。
2、一个标题独占一行。
2.段落标签和换行标签
<p>标签用于定义段落，它可以将网页分成若干个段落。
<p>一个段落<p>换行标签<br/>能使某段文字强制换行。
3.文本格式化标签
| 语义 | 标题 | 说明 |
| 加粗 | <strong></strong>或<b></b> | 推荐使用<strong> |
| 倾斜 | <em></em>或<i></i> | 推荐使用<em> |
| 删除线 | <del></del>或<s></s> | 推荐使用<del> |
| 下划线 | <ins></ins>或<u></u> | 推荐使用<ins> |
4.<div>和<span>标签
<div>和<span>是没有语义的，它们是一个盒子，用来装内容。
区别：1、<div>是用来布局，但是一行只能放一个<div>
2、<span>是用来布局，一行可以放多个<span>
5.图像标签和路径
1.图像标签
在HTML标签中，<img>标签用于定义HTML页面中的图像。
<img src="图像URL"/>
图像的属性：
| 属性 | 属性值 | 说明 |
| src | 图片路径 | 必须属性 |
| alt | 文本 | 替换文本，图像不能显示的文字 |
| title | 文本 | 提示文本，鼠标放到图像处，显示文字 |
| width | 像素 | 设置图像宽度 |
| height | 像素 | 设置图像高度 |
| border | 像素 | 设置图像边框粗细 |
注意点：1、图像标签可以有多个属性，必须写在标签的后面。
2、属性之间不分先后顺序，标签名与属性、属性与属性之间均已空格分开。
3、属性采取键值对的格式，即key="value"的格式。
2.路径
目录文件夹：就是普通文件夹
根目录：打开目录文件的第一层就是根目录
1.相对路径
相对路径：以引用文件所在位置为参考基础，而建立出的目录路径。
| 相对路径的分类 | 符号 | 说明 |
| 同一级路径 | 图像文件位于HTML文件的同一级 如<img src="baidu.gif"/> | |
| 下一级路径 | / | 图像文件位于HTML文件的下一级 如<img src="images/baidu.gif"/> |
| 上一级路径 | ../ | 图像文件位于HTML文件的上一级 如<img src="../baidu.gif"/> |
2.绝对路径
绝对路径：是指目录下的绝对位置，直接到达目标位置，通常从盘符开始的路径。
例如，"D:\web\logo.gif"或完整的网络地址"http://www.baidu.cn/images
6.超链接标签
在HTML标签中，<a>标签用于定义超链接。
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
属性：
| 属性 | 作用 |
| href | 用于指定链接目标的ul地址，当标签应用href属性时，它具有了超链接的功能 |
| target | 用于指定链接页面的打开方式，其中_self为默认值，_blank为在新窗口中打开方式。 |
链接的分类：外部链接、内部链接、空链接、下载链接、网页元素链接
锚点链接：点我们链接，可以快速定位到页面中的某个位置。
- 在链接文本的href属性中，设置属性值为#名字的形式
- 找到目标位置标签，里面添加一个id属性=刚才的名字
7.HTML中的注释和特殊字符
HTML中的注释"<!--"开头，以"-->"结束
快捷键：CTRL+/
| 特殊字符 | 描述 | 字符代码 |
| 空格符 |   | |
| < | 小于号 | < |
| > | 大于号 | > |
| & | 和号 | & |
8.表格标签
1.单元格标签
<table>
<tr>
<th>xx</th>
...
</tr>
<tr>
<td>xx</td>
...
</tr>
...
</table>表格标签如图所示，其中，<th>与<td>的区别在于<th>中的字体更深一些。
2.表格结构标签
<thead>标签：表格的头部区域
<tbody>标签：表格的主题区域
3.合并单元格
- 跨行合并：rowspan="合并单元格的个数"
- 跨列合并：colspan="合并单元格的个数"
遵循左上原则，最后删除多余的单元格
8.列表标签
1.无序列表
<ul>标签表示HTML页面中项目的无序列表，列表项使用<li>标签定义。
<ul>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
...
</ul>
注意：1.<ul></ul>中只能嵌套<li></li>
2.<li>与</li>之间可以容纳所有元素
2.有序列表
<ol>标签表示HTML页面中项目的无序列表，列表项使用<li>标签定义。
<ol>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
...
</ol>
注意：1.<ol></ol>中只能嵌套<li></li>
2.<li>与</li>之间可以容纳所有元素
3.自定义列表
自定义列表用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。
基本语法如下：
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
</dl>
注意：1、<dl></dl>里面只能包含<dt>和<dd>
2、<dt>和<dd>个数没有限制
9.表单标签
1.表单域
表单域是一个包含表单元素的区域。
在HTML标签中，<form>标签用于定义表单域，以实现用户的收集和传递。
2.input表单元素
2.1<input>标签用来收集用户信息
<input type="属性值"/>2.2 type的属性值
| 属性值 | 描述 |
| button | 定义可点击按钮 |
| checkbox | 定义复选框 |
| file | 定义输入字段和“浏览”按钮，供文件上传 |
| hidden | 定义隐藏的输入字段 |
| image | 定义图像形式的提交按钮 |
| password | 定义密码字段，该字段中的字符被掩码 |
| radio | 定义单选按钮 |
| reset | 定义重置按钮 |
| submit | 定义提交按钮，提交按钮会把内容提交到服务器 |
| text | 定义单行的输入字段，用户可在其中输入文本。默认宽度为20个字节 |
2.3name和value属性值
| 属性 | 属性值 | 描述 |
| name | 由用户定义 | 定义input元素的名称 |
| value | 由用户定义 | 规定input元素的值 |
| checked | checked | 规定此input元素首次加载时应当被选中 |
| maxlength | 正整数 | 输入字段字符的做大长度 |
注意：1.name和value是每个表单元素都有的属性值，主要给后台人员使用。
2.name表单元素的名字，要求单选框和复选框要有相同的name值。
3.checked属性主要争对单选按钮和复选框，主要作用一打开页面，就可以默认选中某个表单元素。
3.label标签
<label>标签用于绑定一个表单元素，当点击<label>标签内的文本时，浏览器会自动将焦点转到或选择对应的表单元素上。
<label for="sex">男</label>
<input type="radio" name="sex" id="sex"/>核心：<label>标签的for属性应当与相关元素的id属性相同。
4.select下拉表单
语法：
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>1.<select>中至少含有一对<option>
2.<option>中定义select="select"时，当前项为默认选中项
5.<textarea>表单元素
<textarea>用于定义多行文本输入的控件
语法：
<textarea rows="3" cols="20">
文本内容
</textarea>总结
无
