一、HTML的基本标签
1.html基本结构
< html>
<head>
......
</head>
<body>
......
<body>
</html>
2.HTML
整个网页是从<html>这里开始的，然后到</html>结束。
3.head
head标签代表页面的“头”，定义一些特殊内容，这些内容往往都是“不可见内容”
| <head>内部标签 | 说明 |
|---|---|
| <title> | 定义网页的标题 |
| <meta> | 定义网页的基本信息（供搜索引擎） |
| <style> | 定义CSS样式 |
| <link> | 链接外部CSS文件或脚本文件 |
| <script> | 定义脚本语言 |
| <base> | 定义页面所有链接的基础定位（用得很少） |
4.body
body标签代表页面的“身”，定义网页展示内容，这些内容往往都是“可见内容”。
二、段落与文字
1.段落标签
(1)、段落与文字标签
| 标签 | 语义 | 说明 |
|---|---|---|
| <h1>~<h6> | header | 标题 |
| <p> | paragraph | 段落 |
| <br> | break | 换行 |
| <hr> | horizontal rule | 水平线 |
| <div> | division | 分割（块元素） |
| <span> | span | 区域（行内元素） |
(2)、文本格式化标签
| 标签 | 语义 | 说明 |
|---|---|---|
| <strong> | strong（加强） | 加粗 |
| <em> | emphasized（强调） | 斜体 |
| <cite> | cite（引用） | 斜体 |
2.块元素和行内元素
(1)、HTML元素根据浏览器表现形式分为两类：①块元素；②行内元素；
(2)、块元素特点：
（1）独占一行，排斥其他元素跟其位于同一行，包括块元素和行内元素；
（2）块元素内部可以容纳其他块元素或行元素；
常见块元素有：h1~h6、p、hr、div等。
(3)、行内元素特点：
（1）可以与其他行内元素位于同一行；
（2）行内内部可以容纳其他行内元素，但不可以容纳块元素；常见行内元素有：strong、em、span等。
三、列表
3种列表的语义记忆：
| 标签 | 语义 | 说明 |
|---|---|---|
| ol | ordered list | 有序列表 |
| ul | unordered list | 无序列表 |
| dl | definition list | 定义列表 |
1.有序列表
<ol>
<li>有序列表项</li>
<li>有序列表项</li>
<li>有序列表项</li>
</ol>
2.无序列表（用处最广泛）
<ul type="列表项符号">
<li>无序列表项</li>
<li>无序列表项</li>（可嵌套使用）
<li>无序列表项</li>
</ul>
注意：嵌套使用时结构完整：ul里嵌套ul
3.定义列表
<dl>
<dt>定义名词</dt>
<dd>定义描述</dd>
<dl>
四、图像
1.图像标签
图像标签为<img>。<img>是一个自闭合标签。（3个属性：src、alt、title。）
语法：
<img src="图片地址" alt="图片描述（给搜索引擎看）" title="图片描述（给用户看）">
| 属性 | 说明 |
|---|---|
| src | 图像的文件地址 |
| alt | 图片显示不出来时的提示文字 |
| title | 鼠标移到图片上的提示文字 |
2.相对路径和绝对路径
绝对路径，指的是图片在你的电脑中的完整路径。
相对路径，指的是图片相对当前页面的位置
3.图片格式
1、jpg格式
概述：拓展名为点.jpg或.jpeg，它是一种有损的压缩格式，他将肉眼不容易观察出来的细节丢弃了
主要特点:支持的颜色丰富，占用空间小，但不支持透明背景，不支持动态图
使用场景：对细节没有极高要求的场景，比如说产品的宣传图等等
2、png格式
概述：是一种无损压缩格式，能更高质量的保存图片
主要特点：支持的颜色丰富，占用空间大，支持透明背景，不支持动态图
使用场景：需要使用透明背景的图片、想要呈现更高质量的图片
3、bmp格式
概述：不进行压缩的格式，最大程度上保留细节。
主要特点：支持颜色丰富，保留细节，占用空间极大，不支持透明背景和动态图
使用场景：对图片细节要求极高，如大型游戏
4、gif 格式
概述：支持256中颜色，色彩呈现不是很完整
主要特点：支持的颜色较少，支持简单透明背景、支持动态图
使用场景：动态图
5、webp格式
概述：谷歌退出的一种格式，专门用来在网页中呈现图片
主要特点：具备以上几种格式的优点，但兼容性不太好，一旦使用务必要解决兼容问题
使用场景：网页中的各种图片
六、base64 格式
本质：一串特殊的文本，要通过浏览器打开，传统看图应用通常无法打开
原理：把图片进行base64编码，形成一串文本，直接作为img的src即可。
使用场景：一些较小的图片，或者需要和网页一起加载的图片。
五、链接
超链接根据链接对象的不同分为：跳转页面，跳转文件，跳转锚点
1.跳转页面
语法：
<a href="链接地址" target="目标窗口的打开方式">（打个a就出来了）
| target属性值 | 说明 |
|---|---|
| _self | 默认方式，即在当前窗口打开链接 |
| _blank | 在一个全新的空白窗口中打开链接 |
| _top | 在顶层框架中打开链接 |
| _parent | 在当前框架的上一层里打开链接 |
2.跳转文件
<a href='./xxx.png'></a> 能直接打开的文件
<a href='./xxx.zip'></a> 浏览器无法打开的文件，会自动触发下载
<a href='./xxx.map4' download='xxx.map4'></a> 可以通过download强制触发下载
3.跳转锚点
第一种方式:a标签配合name属性 ：
例：<a href="#qsl">跳转到qsl（给用户看）</a>
<a name="qsl"></a>
第二种方式:其他标签配合id属性 ：
例：<a href="#xmx">跳转到xmx(给用户看）</a>
<p id="xmx"></p>
注意点:
1.具有 href 属性的a标签是超链接，具有name 属性的a标签是锚点。
2. name 和 id 都是区分大小写的，且id最好别是数字开头。
六、表格
1.表格基本结构
<table>
<caption>表格标题</caption>
<thead>(表头）
<tr>
<th>表头单元格1</th>（表头单元格用th）
<th>表头单元格2</th> ...
</tr>
</thead>
<tbody>（表身）
<tr>
<td>标准单元格1</td>(表身，表脚单元格用td）
<td>标准单元格2</td>...
</tr>
<tr>
<td>标准单元格1</td>
<td>标准单元格2</td>...
</tr>
</tbody>
<tfoot>（表脚）
<tr>
<td>标准单元格1</td>
<td>标准单元格2</td>...
</tr>
</tfoot>
</table>
2.表格标签名语义及常用属性
七、表单
1.表单基本结构
<form >
......
</form>
常用属性：
1.action:用于指定表单的提交地址(需要与后端人员沟通后确定)。
2.target:用于控制表单提交后，如何打开页面
常用值如下:
_blank : 在新窗口打开。 _self :在本窗口打开。
2.input标签表单
大部分表单都是用input标签完成的。
语法：
<input type="表单类型"/>
| type属性值 | 说明 |
| password | 密码文本框 |
| radio | 单选框 |
| checkbox | 复选框 |
| hidden | 隐藏域 |
| reset | 重置按钮 |
| button | 按钮 |
| text | 单行文本框 |
| image | 图像形式提交按钮 |
例1：
性别<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female"女
例2：
<input type='reset’ value='点我重置'>
例3：
<input type='hidden' name='tag' value：‘99’>
3.textarea标签表单
多行文本框：
语法：
<textarea rows="行数" cols="列数">多行文本框内容</textarea>
4.下拉列表（select，option）
例子：
<select name="area" id="">
<option value="010">一区</option>
<option value="011">二区</option>
<option value="012" selected>三区</option> ( selected默认选中 )
<option value="013">四区</option>
</select><br>
八、浮动框架iframe
例子：
1.<iframe src="链接" frameborder="0" ></iframe>
1.与超链接target属性配合使用
<a href="链接" target="tb">点我看淘宝</a>
<iframe name="tb" frameborder="0"></iframe>
2. 与表单targrt属性配合使用
<form action="链接" target="container">
<input type="text" name="keyword">
<button>搜索</button>
</form>
<iframe name="container" frameborder="0"></iframe>
九、常用字符实体
| 常用字符实体 | 实体名称 |
| 空格 |   |
| 小于号< | < |
| 大于号> | > |
| & | & |
十、HTML全局属性
十一、Meta 元信息
HTML5
一、新增语义化标签
1. 新增布局标签
| 标签名 | 语义 |
| header | 整个页面，或部分区域的头部 |
| footer | 整个页面，或部分区域的底部 |
| article | 文章、帖子、杂志、新闻、博客、评论等 |
| nav | 导航 |
| section | 页面中的某段文字，或文章中的某段文字（里面文字通常里面会包含 标题）。 |
| aside | 侧边栏 |
| main | 文档的主要内容 ( WHATWG 没有语义， IE 不支持 ) ，几乎不用。 |
2.新增状态标签
（1）meter标签
语义：定义已知范围内的标量测量。
（2）rogress标签
语义：显示某个任务完成的进度的指示器，一般用于表示进度条。
（3）新增列表标签
例1：
例2
<details> <summary> 如何上王者？ </summary> <p> 慢慢打呗 </p> </details>二、新增表单功能
1.表单控件新增属性
例：
2. input 新增属性值
3. form 标签新增属性
三、新增多媒体标签
1. 视频标签
<video> 标签用来定义视频，它是双标签。
