常见的标签使用
标题和段落
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- HTML中的标签是HTML语法提供的，所以每一个标签都是固定标签名 -->
<h1>h1标题:常用于网站的logo，网站标题</h1>
<h2>h2标题:常用于网站的板块标题、栏目标题</h2>
<h3>h3标题:常用于网站的板块标题、栏目标题</h3>
<h4>h4标题:常用于网站的附加板块标题，或者文章的标题</h4>
<h5>h5标题:更小级别的标题，基本用不到</h5>
<h6>h6标题:更小级别的标题，基本用不到</h6>
<p>p->段落：Hyper Text Markup Language</p>
</body>
</html>
换行、分割与超链接
<!DOCTYPE html>
<html lang="en"> <!-- lang 就是HTML标签的属性，代表当前网页的默认语言language：en表示 english -->
<head>
<meta charset="UTF-8"> <!-- charset，是meta元信息标签的属性，表示当前网页的编码是utf-8 -->
<title>Title_python学习网页</title>
</head>
<body>
<h1>将进酒</h1>
<a href="https://baike.baidu.com/item/将进酒">李白</a>
<p>君不见黄河之水天上来，奔流到海不复回。<br>
君不见高堂明镜悲白发，朝如青丝暮成雪。<br><br>
人生得意须尽欢，莫使金樽空对月。<br>
天生我材必有用，千金散尽还复来。<br>
烹羊宰牛且为乐，会须一饮三百杯。<br>
岑夫子，丹丘生，将进酒，杯莫停。<br>
与君歌一曲，请君为我倾耳听。<br><br>
钟鼓馔玉不足贵，但愿长醉不愿醒。<br>
古来圣贤皆寂寞，惟有饮者留其名。<br>
陈王昔时宴平乐，斗酒十千恣欢谑。<br>
主人何为言少钱，径须沽取对君酌。<br><br>
五花马、千金裘，呼儿将出换美酒，与尔同销万古愁。</p>
<hr>
<h2>译文</h2>
<p>你难道没有看见吗？那黄河之水犹如从天上倾泻而来，波涛翻滚直奔大海从来不会再往回流。<br>
你难道没有看见，在高堂上面对明镜，深沉悲叹那一头白发？早晨还是黑发到了傍晚却变得如雪一般。<br>
人生得意之时就要尽情的享受欢乐，不要让金杯无酒空对皎洁的明月。<br>
上天造就了我的才干就必然是有用处的，千两黄金花完了也能够再次获得。<br>
且把烹煮羔羊和宰牛当成一件快乐的事情，如果需要也应当痛快地喝三百杯。<br>
岑勋，元丹丘，快点喝酒，不要停下来。<br>
我给你们唱一首歌，请你们为我倾耳细听。<br>
山珍海味的豪华生活算不上什么珍贵，只希望能醉生梦死而不愿清醒。<br>
自古以来圣贤都是被世人冷落的，只有会喝酒的人才能够留传美名。<br>
陈王曹植当年设宴平乐观，喝着名贵的酒纵情地欢乐。<br>
你为何说我的钱不多？只管把这些钱用来买酒一起喝。<br>
名贵的五花良马，昂贵的千金皮衣，叫侍儿拿去统统换美酒，让我们一起来消除这无尽的长愁！
</p>
</body>
</html>
超链接有两种常见的用法：页面跳转下载文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--页面跳转: 如果href的值是网络地址，可以跳转到跳转到指定的网页-->
<a href="http://www.baidu.com">跳转到百度</a>
<!--页面跳转: 如果href的值是本地地址，则可以跳转到本地的内部网页 -->
<a href="2-换行、分割与超链接.html">跳转到本地页面</a>
<!-- 下载资源：当href的值是一个浏览器无法直接展示的内容格式时，浏览器会自动下载当前路径对应的内容 -->
<a href="./素材/http协议.drawio">点击下载手册</a>
<!-- 下载资源：当href的值是一个浏览器可以直接识别并展示的内容格式时，用户可以鼠标右键，对当前href的数值的内容进行另存为下载 -->
<a href="./cat.webp">点击下载图片[鼠标右键,另存为]</a>
<!-- 新建窗口，打开网页
target="_blank" 在新窗口中打开网页
-->
<a href="./yourimg" target="_blank">在新窗口中打开网页</a>
</body>
</html>
说明
实际上页面跳转也是属于下载文件。因为用户能在浏览器里面看到的所有内容，实际上都是经过浏览器下载到本地，用户才能看到的。我们可以通过 F12 -> 打开开发者工具 -> network（网络）
列表标签
列表是一种结构标签，可以让网页的内容形成列表的格式
或
列表标签在html中提供了四种
- 无序列表（Unorderlist，ul）
就是没有顺序，内容不分先后 - 有序列表（OrderList，ol）
就是有序号的，内容分先后顺序 - 定义列表（Definelist，dl）
一般用于对概念描述文本和定义概念的列表 - 菜单列表（Menu）
本质就是无序列表，只是用来表示菜单
除了定义列表结构特殊意外，其他的三种列表都有列表项目（list item ， li）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
无序列表, unordered list，简写: ul
列表的单项 list item 简写：li
-->
<ul type="circle">
<li>列表的第一项</li>
<li>列表的第二项</li>
<li>列表的第三项</li>
</ul>
<!--
有序列表, ordered list，简写：ol
列表的单项 list item li
-->
<ol>
<li>列表的第一项</li>
<li>列表的第二项</li>
<li>列表的第三项</li>
</ol>
<!--
和任何一个双标签一样，标签内部可以嵌套的标签来使用。
-->
<ul>
<li>
<p>第一章：开端</p>
<ul>
<li>第一节：下山</li>
<li>第二节：命案</li>
<li>第三节：奇遇</li>
<li></li>
<li></li>
</ul>
</li>
</ul>
<dl>
<dt>赵本山</dt>
<dd>春晚常驻选手，国内一线大品牌</dd>
<dd>乡村爱情故事，二人转，小品</dd>
<dt>小明</dt>
<dd>国内所有小朋友的同学，每次都从教室里面滚出去的哪一个。</dd>
</dl>
<!-- 菜单列表是HTML版本中新增的列表标签，实际上就是ul标签（无序列表） -->
<menu>
<li>首页</li>
<li>商品分类</li>
<li>购物狂欢节</li>
<li>会员中心</li>
</menu>
</body>
</html>
几种列表标签中最常用的只有ul，当然也有menu菜单标签。其他的2种标签（ol与dl），基本不使用。
表单标签
是HTML中最重要的标签之一，主要是提供了输入框或者按钮等标签提供给用户进行交互输入数据。将来表单可以提交到指定的服务端程序中进行数据处理。
form标签
| 属性 | 描述 |
|---|---|
action |
设置当前表单的表单数据处理应用程序的url地址，默认值是当前url地址 |
method |
设置当前表单的HTTP提供方式，默认是get。 get，是以查询字符串的格式，把表单数据附加在url地址栏中提交数据。 post，以数据包的格式，把表单数据附加在url地址栏上提交数据。 |
enctype |
设置当前表单提交的数据格式，默认值是application/x-www-form-urlencoded。 application/x-www-form-urlencoded：以普通表单数据格式提交【文本输入数据】 multipart/form-data：以多种数据格式提交【文本输入数据与文件数据】text/plain：以纯文本数据格式提交 |
表单项标签
| 输入框类型 | 用法 | 描述 |
|---|---|---|
单行文本框 |
<input type="text" name="" value="" placeholder=""> |
name：设置输入框的值的变量名称，用于服务端接受数据。 value：设置输入框的默认值。 placeholder：设置输入框的提示内容。 |
密码框 |
<input type="password" name="" value="" placeholder=""> |
只允许输入单行密码，属性描述同上 |
| 单行文本框（数值框） | <input type="number" name="" value="" placeholder=""> |
只允许输入数值内容，属性描述同上。 就版本浏览器中不支持时会被默认为text单行文本框。 |
| 单行文本框（日期输入框） | <input type="date" name=""> |
只允许输入日期格式内容，属性描述同上。 低版本浏览器中不支持时会被默认为text单行文本框。 |
| 单行文本框（时间输入框） | <input type="time" name=""> |
只允许输入时间格式内容，属性描述同上。 低版本浏览器中不支持时会被默认为text单行文本框。 |
| 单行文本框（日期时间输入框） | <input type="datetime-local" name=""> |
只允许输入日期时间格式内容，属性描述同上。 低版本浏览器中不支持时，会被默认为text单行文本框。 |
文件上传框 |
<input type="file" multiple name=""> |
multiple：布尔属性，允许一次性上传多个文件。 其他属性描述同上。 |
单选框 |
<input type="radio" name="" value=""> |
用于提供一组多个选择让用户选一个选项的按钮组。 多个单选框必须name值相同才能为一组。 同一组单选框中的value值必填，而且值要唯一。 |
多选框 |
<input type="checkbox" name="" value=""> |
用于提供一组多个选择让用户选多个选项的按钮组。 多个多选框必须name值相同才能为一组。 同一组多选框中的value值必填，而且值要唯一。 |
下拉列表框 |
<select name=""><option value="选项1值">选项提示1</option><option value="选项2值">选项提示2</option><option value="...">...</option><option value="选项n值">选项提示n</option></select> |
属性描述同上。 |
多行文本框/文本域 |
<textarea name="" cols="" rows=""></textarea> |
cols：设置多行文本框默认列数[宽度] rows：设置多行文本框默认行数[高度] 注意：多行文本框标签中的任意内容都会被原样记录。 |
提交按钮 |
<input type="submit" value="提交"> |
value：表示当前按钮的提示文本。 用于提交表单数据到action属性对应的地址中。 |
| 普通按钮 | <input type="button" value=""> |
属性描述同上，主要用于配合js完成网页特效。 |
普通按钮 |
<button>文本提示</button> |
普通按钮，中间可以显示图片或文本。 主要用于配合js完成网页特效。 |
| 重置按钮 | <input type="reset" value="重置"> |
点击以后，会把当前表单中用户输入的所有内容进行还原到页面刚刷新状态。 |
| 隐藏域输入框 | <input type="hidden" name="" value=""> |
隐藏域输入框的作用是附带一些默认数据提交给服务端，但是不希望用户看到。 |
| 表单项的常用属性 | ||
| 属性名 | 描述 | |
| ---- | ---- | |
name |
表示当前表单项的值的变量名，用于提供服务端获取本次提交的数据项。 | |
value |
表示当前表单项的值，如果值在代码中提前设置了，则为默认值 | |
type |
表示input框的类型 | |
disabled |
布尔属性，设置当前输入框是否被禁用 | |
| maxlength | 设置当前输入框的[textatea，input]中最大输入内容长度。 | |
multiple |
设置允许文件上传多个文件 | |
| 代码 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="http://httpbin.org/post" method="post" enctype="multipart/form-data">
<input type="hidden" name="hide" value="1.0">
<label>账号：
<input type="text" name="username" value="root" disabled placeholder="请输入账号">
</label><br>
<label>密码：
<input type="password" name="password" value="" maxlength="16" placeholder="请输入密码">
</label><br>
<label>年龄：
<input type="number" name="age" value="" placeholder="请输入年龄">
</label><br>
<label>出生年月
<input type="date" name="born">
</label>
<br>
<label>时间：
<input type="time" name="time">
</label>
<br>
<label>本地日期时间：
<input type="datetime-local" name="datetime">
</label>
<br>
头像[单文件]：<input type="file" name="avatar"><br>
头像[多文件]：<input type="file" multiple name="imgs[]">
<br>
性别：
<label><input type="radio" name="sex" value="1"> 男</label>
<label><input type="radio" name="sex" value="2"> 女</label>
<br>
爱好：
<label><input type="checkbox" name="fav" value="1">篮球</label>
<label><input type="checkbox" name="fav" value="2">足球</label>
<label><input type="checkbox" name="fav" value="3">排球</label>
<label><input type="checkbox" name="fav" value="4">水球</label>
<label><input type="checkbox" name="fav" value="5">气球</label>
<br>
城市：
<select name="city">
<option value="1">北京</option>
<option value="2">天津</option>
<option value="3">唐山</option>
<option value="4">廊坊</option>
<option value="5">上海</option>
<option value="6">其他</option>
</select>
<br>
个性签名：<br>
<textarea name="description" cols="30" rows="10"></textarea>
<br>
<input type="submit" value="提交表单">
<input type="button" value="普通按钮">
<button><img src="goods.png" width="30" height="30" alt=""></button>
<input type="reset" value="重置表单数据">
</form>
</body>
</html>
表格标签
表格系列标签主要是可以让数据以表格的格式展示出来。但是现在table表格已经很少使用了，而是改成div+css实现更漂亮的表格。
| 标签 | 描述 |
|---|---|
<table></table> |
表示网页的一个表格，内部一般直接嵌套的是tr标签。 |
<tr></tr> |
表示表格的一行，内部直接嵌套的只能是td或者th标签。 |
<td></td> |
表示表格的一个单元格，也可以是一列，可以包含其他标签或内容。 |
<th></th> |
表示表格的表头的一个单元格，可以包含其他标签或内容。 |
基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--1行1列的表格-->
<table border="1"> <!-- border 表示设置表格边框的宽度，不推荐使用bother，以后会学到css，可以设置更好看的边框 -->
<tr>
<td>1行1列</td>
</tr>
</table>
<hr>
<!--1行2列的表格-->
<table border="1">
<tr>
<td>1行1列</td>
<td>1行2列</td>
</tr>
</table>
<hr>
<!--2行1列的表格-->
<table border="1">
<tr>
<td>1行1列</td>
</tr>
<tr>
<td>2行1列</td>
</tr>
</table>
<hr>
<!--2行2列的表格-->
<table border="1">
<tr>
<td>1行1列</td>
<td>1行2列</td>
</tr>
<tr>
<td>2行1列</td>
<td>2行2列</td>
</tr>
</table>
<hr>
<!-- 有表头的表格 -->
<table border="1" width="600">
<tr>
<th>ID</th>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>3</td>
<td>小明</td>
<td>17</td>
</tr>
<tr>
<td>5</td>
<td>小黑</td>
<td>16</td>
</tr>
</table>
</body>
</html>
合并单元格
| 属性名 | 描述 |
|---|---|
| colspan | 横向合并多个同一行的单元格，也叫列合并，值为整数，表示当前单元格的合并数量 |
| rowspan | 纵向合并多个同一列的单元格，也叫行合并，值为整数，数值表示当前单元格的合并数量 |
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table width="800" border="1">
<tr>
<!-- colspan 表示当前单元格[td,th]占据2列 -->
<th colspan="2">form标签属性说明</th>
</tr>
<!-- tr>th*2 -->
<tr>
<th>属性</th>
<th>描述</th>
</tr>
<tr>
<td>action</td>
<td>设置当前表单的表单数据处理应用程序的url地址，默认值是当前url地址。</td>
</tr>
<!-- tr>td*2 -->
<tr>
<!--设置当前单元格，占据3行的空间 -->
<td rowspan="3">method</td>
<td>设置当前表单的HTTP提供方式，默认是get。</td>
</tr>
<tr>
<td>get，以<b>查询字符串</b>的格式，把表单数据附加在url地址栏上提交数据</td>
</tr>
<tr>
<td>post，以<b>数据包</b>格式，把表单数据附在HTTP网络请求体中提交数据</td>
</tr>
<tr>
<td rowspan="4">enctype</td>
<td>设置当前表单提交的数据格式</td>
</tr>
<tr>
<td>application/x-www-form-urlencoded：默认值，以普通表达数据格式提交</td>
</tr>
<tr>
<td><b>multipart/form-data</b>：以多种数据格式提交</td>
</tr>
<tr>
<td>text/plain：以纯文本数据格式提交</td>
</tr>
</table>
</body>
</html>
表格嵌套
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table width="1680" align="center">
<tr>
<td>
<table align="center" width="1024">
<tr>
<td><a href="">奥运首页</a></td>
<td><a href="">中国军团</a></td>
<td><a href="">赛程赛果</a></td>
<td><a href="">奖牌榜</a></td>
<td><a href="">诸强</a></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" border="1">
<tr>
<td width="300">
<table>
<tr>
<td>全部赛程</td>
<td width="20%">更多 > </td>
</tr>
<tr>
<td colspan="2">
<ul>
<li>中国对日本</li>
<li>韩国对日本</li>
<li>朝鲜对日本</li>
<li>俄罗斯对日本</li>
</ul>
</td>
</tr>
</table>
</td>
<td>
<img src="goods.png" width="100%" height="250" alt="">
</td>
<td width="450">右</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
早期的很多网页为了排版方便都是采用table布局（table标签来控制页面内容的排版），但是这种方式现在已经没有人使用了。而是改城了div标签+css样式来进行排版，这种方式更加容易入门，更加容易维护代码，更加美观好看。
媒体标签
之前说过所谓的超文本，就是超出文本范畴的文档，所以我们在网页编写过程中，经常也需要在网页中展示或播放一些媒体资源，例如：图片，音频，视频。
| 标签 | 常见格式 | 描述 |
|---|---|---|
<img src="" alt=""> |
png，jpg/jpeg，gif(动态图片格式)，svg，webp，tiff |
图片 |
<audio controls autoplay><source src=""></audio> |
mp3，mpeg，ogg，wma，aac，ogv |
音频 |
<video width="" controls autoplay src=""></video> |
mp4，mpeg，ogg，ogv，mov，flv， |
视频 |
图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- src: source的简写，表示当前图片的资源路径，HTML中可以展示网络连接中的图片资源，也可以本地资源。
alt：补充说明，当图片的路径不正确或者图片无法正确显示的时候，浏览器就会展示alt中的文本信息
-->
本地图片 <br>
<img src="goods.png" alt="商品"><br>
网络图片 <br>
<img src="https://img14.360buyimg.com/n1/jfs/t1/126034/24/12171/120473/5f5ae8b5E171d2de2/703cd3a089a64373.jpg.avif" alt="网络图片">
<br>
图片的格式或者文件名本身不重要，最重要的路径指向的内容是不是真正的图片 <br>
<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAA0JCgsKCA0LCgsODg0PEyAVExISEyccHhcgLikxMC4pLSwzOko+MzZGNywtQFdBRkxOUlNSMj5aYVpQYEpRUk//2wBDAQ4ODhMREyYVFSZPNS01T09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT0//wAARCAEsASwDASIAAhEBAxEB/8QAGwAAAQUBAQAAAAAAAAAAAAAABAABAgMFBgf/xAA4EAEAAQMDAwIEBAUEAgIDAAABAgADEQQhMRJBUQVhE3GBkQYUIqEyscHR4RVCUvAjkkOCFoPx/8QAGQEAAwEBAQAAAAAAAAAAAAAAAAECAwQF/8QAIREBAQEBAAIDAQEBAQEAAAAAAAERAiExAxJBE1EiFGH/2gAMAwEAAhEDEQA/AOV2pLjiq+rFLqEqrGsppqZ3oe7ckDirbjtQ8zO9Y9Tyr2jG5LP+KujcWhsYal1Ac7VnYcElxqZc480E3A70i8Zxml9aqNKN3HGKsjerLL5nK1Yag80vrTakb1Wxv4+dZRqDzUjUnkoyhsGpxUzVb1jGpPNSNSeSjyGyao9qmao9qxTUHmpmoMc70DGwao9qmao23KxTUHk+9SNQeSjRjaNUe1TNUVil88/vUi+eaNDaNSe1SNSeaxS/71Iv+9GnjbNSeSnNSeSsUv8AvtTl98/vRpNs1BnkpzUnkrE+O45/enNQ+aNDa/MHml+ZPJWL+YfNJ1D5p6G1+ZPJS/NHtWJ+Zc80vzKd6NDbdQPeoTvGOSsf80vel+afNAaTeHvVU7pigHU1F1GaQGt4GnL5nkrNlfB5qp1Qd6JQ2PzAdyl+aPNYktYBzVTrd+aqUkHYqPVUnc96gmN67KwhMjfNVyYZpTFNmqJqd6y6i4U5G+KqZbbZqMlc71DPvUSK1Jc8U8N5fRf2poAuHl4aNsaKd23K5EQiI484otk9nJaCHbelnFKUWLhN6WKB5PndaQ0wZaWE+dGHqRJ80/U+ahSoyDU+t8u3vT/El2Wq3OKRnFGQat+JL/k/enLsjiTVQ0qWQ15fmf7qkaifmqBpzOKVkOCTU3DvmpGqmGc0KPzp84pfWKwV+bmU5rZ+M0JlxTLt3z2pfWEN/PPj96f/AFB8P3rPWlmn9Ynw0D1DfGGpGvKy8+9LNP6wa1DXRe+Kf89HHNZOaXVR9C1rmsg9/wB6f83DPNY/V9qXV4aPoexr/mo+aX5mD3rI6ny0up8tH0LY1m/F7lVTuD3/AHrOJJ3fvS63y0fQbBM5iO9VMjNVdT5pZ96c5Gxrhkpk2qcTHenSuqueB5mCh7p3M0ZI5oe6b8VnVwImFqCVdI5qpMVnVntHVcDy4rpfw5auF6Qw67aYRNkrn9HFnqYByteieiWLOl0Nv4xhd6w+brPDTiawvVvw9uz0wttzhDc8Vy92zOzcYTiiOMV6/ppaeR0wBHbCiNA+s/hnSep2W5pwt3sODHLS47s8U+pNeVRMyKXejdb6ff0GslZ1EGMjOMntQWPvW8sqMJ/bNLJmlj33pe9AKlmnxmnIrjmjQanpyKU/Qm9LYqGMeacwcU/SlIi0tOEY5zSfanxtSRxRqsRztTLTo0yfegrDGFx96iuV7HipYxFe7tUHxVRNLNMtKmpotLNIyuCpxtzlFkD0nLiibXp9+dskRQTKuwHlo2QstBvNN3qc4sZJnYcZqFMqVKlSoGlSpZpqC0+aWaZd6VBa3IVPG3FQg1b2WuhnFUzGaFuhRc+Ghru+azrSBZmM1U5Grpm+KqRzkPpWVq41fQNKajViRRgivauzncZz6Q/SbGO1Yn4YtkNLcvMcSdita3F6lM5rg+bvesdXx8+NaNiEIBMMSHdDFalm5Jj1QOp7g/vWPYuMDfeLyeKOs3GLmDke5zU8dH1yj+IPSLfrOh2gGoiLCWN32a8p1Omuaa8wuxYophPDivabF8QJnO4+9cz+OPQPzViPqGlBbf8AHEORea6eO2HUx5s804bD2aunYlG5KKYR4q+GmXBjg3rW9yROBY21xtRMNOpnFG2NIobftWhY0SmMVj18n+KnLINKrxVhpXHFbkNCpxxVxodjaovdXOXMz0qGxVJYR45rqbvp6nH7UOenK8OPlRO7BjA+A77U0rCYMV0P+nOOP2pPpqv8NH9KeOcbKHHNQlZTtXRT9OR449qpdCjlNjfinPlsLGFctpgxwb/OqJRStu7pXdxvUdJ6Nf12oLdmCmd3GxWnPyT9KxjWrU70yNuKr4rpPSvwlqtQF3UQYW+QeWur9J9B0XpdsWJcvd1M4a07uoIQxueAN6XXy76E4c5L8P27VuI2cxNwxtnzQPrmnlZ0QIg7kQ2x5fPsV0l3UylMVXxHNUfiXTx1HoZcwCchWUu32qzI8uuLKbu+1Qqy8/rQABwBVdds9Oa+ypUuaVMjUzT5pqCKlSpUybltKtOKotuCrhErW0pEZtD3DNEPPNVTDCVl1caSBugko9+Hw1KxGMrnw7ojnAnJ/enRjuOKJ0VxlegTiSROTdPn5rC3wuR1ensws6C1CGExlasht3xVcpQIQAQwYw1Iug7jXn93a7OfEFQuMUR4oi1KLhi4R2M7UESEGpRkjkcntSmw/bYs33GLhk8n860dNcjIbU8MUxh4SsXTXkPfx3rRtShcBEJHc2rfisu45n8Sfh0sX2/Yh/45udjhrLt6BJ8V6R0w1GnbV0EfNY9/0wt3XBtV9bmxnJPVc/Y0Ptz7UfZ0QYcftWpb0gHFFQ04HFZ5avxGZDRnjmrDSHitMsgcU5a9qr60bGY6Me1R/Ix8Favw8dqZiG+KMLWb+SiHFRdHHHFaSHimQ8UYesieiHO1CXtEA4K32JjKVW2hyyACpw9c7D0id+ZtiGcL2K17FrT6SyW7IBEwptn5tPf1Bj4doCJy+aGZ5xlwHtStk9HJohvrLpgLtzwVUxmqymB86gXFyRKeMJLly/Spt1UmITg52MFX6i3DU+j6myi/pzt58UwGNz7tX2Isrd2KfpYJgafFul3PDyvWaeNq7IIuz5oGXOxit/1TSJfuAb5ds8Vi3bTF359q7+Otjl6ilpqdKatGdKmzSpdqaaTSpUqCbERO1WjtTkKkRccUr2uRHGaZj/KrcJSY5Gs+rrSQOxJbYq7TWwuxTPJs05D2ojSgXAlxmsrfCp7bswYR6uQN/wC/96UJ9CElHwmRqVwG3EHG3OapgSiozMeHc/xXFfddU9DoXYoAD9KIhmX8AZ9kz9qCtfAVesXHEnOPtzV8NVZtxz8QPHRHFVIL/wDBZYk467aPkMVdAlCQqJ5Nn/NAmsty4u3VfMypmoFwrvwtV4ifNbumu7dK7nD5KNlEuWs7KcVztq7ImI99nPJW1p7mwLvgzWnHX5WXXOeYdhjtU4mTiosjMorvUhxgGnLNL8SxvUiJj3qpkilSHbdxVSwsSIcnYqE4ZNqmqFVsjYzStgkqpjgfNQwtXDnJUJyjAf3pWRW1VIIxzNwFZ2r1bcGMEjHsHNR1+rWaeHYHtWe3Fdg37tZddfkacz9q1ZOcceaWNt0D51X1Y2UX57VCVxdkyVmsQMTh2q6CyTK/IoKMVRjk912q+GTmWE+dEAplE26MPvV2ikNyQjuNBF6Q4ZD86N0KSvDn7VfHsuvTlvV9Ol+5iOBWuZ1dhFyYr0b1TREiTjC+1cf6jpyMnMVfeumXK5q5aZhSoUVqodMnbBQztXTzdjLqZTZpqdpqpJUqXmlQl0xAe1IjubUT0VBjjiua1vIrYYOKiR3ogiMaixxKhUVkMpRmltxZgm2arhAcY58NH6S1mRkefFL8H6IvgQj7d6CZMZbu3zrR1Ns6QHG1Z1+ICLvXF1M6rq59JCII5fd3KuhH4o/riTxkXG/s/wB6y5TuQeqC7c4on83O30ylpvixTKjhqpLStEli8SBjiWcp2flWroNK3DCYTCm/FU6WVu/YLtlcBlin6oe1a2huGQUZHCcI9z69qvMvlNq21o+i4x2YuU+TR9qHSiu4B86ondIonarIXeoMO9VMiLtWNsLjNeXOKfOFfaqpXOqD3Sq/iqA7Lhc0Wz8KQTy5zzUtslVWnMjfark2flVQr4QuS2xnGWqWWcA96V0erLx4qmEhj1L3clRb5VJ4XxkgvihtTJZSN8OMbURBBPFK7bjcFezseafuDcrn9XDM0BwG7QM7iSTg7Fb92wSznZUV9isDWwkalDPTztWVjSU5cCJvlfFW27hk2B8JQpGEgFlkOTgqcG3bwRvK55TNEh60rPw1PiQTPc4aIbFuUUhPJ2F4rNsXEf0zivgyP2dmii7BySJwljubf4qpILqu5anbl5K0vS7b8QU2xloS3cJOC4yDs8lavpwKtPmTZie74EamwTgmO1cp6voTKkf2rs5YRKyfUbRKLkrasZ5eaa/SAr0tYt2HSpiu19UsBmuT1sCM3DWnx9ecR1AVL6UnmlW7KmpUqVMncTtsXiqpRK079gxxQdy24a443DG2zUU3p55i5phzhpymutRym1aejiiYdqA0wKVr2IhDNLq5FSbUdQ5EcccpWHqpMbqSg4zyKVt3kkJQUrPU4UPDmuXfOt/wLZ0ty7FxCbFNnGT9t/2oiPpt6FuM4mcPAiJ8ner7ENTp5E7NzOORaPseqTXov2wQxkMVpMTdD2Izi5jHouhth5+Y1bK62bhegIL+uAcPkptTdtycpmPaRslCN1I56ycMYXufM/rStgka0tXmAiImRO5V+l1HVgJZUcb1haeb1Stq9DuP/F80boicZkHkn58cn9amXyGv8Zymco4+nOat6eoiucm+Kqhbh1Ljdw4O/wD0om2jIV+9XImrrQAJ9KvFyjVdqOQ3zhxVpEcvfmtZPDO3ypuGYPt3oKY247Gy5xR9wQccYqiURRe+dqjqKlUF3Nsffeq56hNhflTziBIDA9is3UzY3Mb5Df2qLbFSSjy5GWy8Zy0NO3ZN8KuxtutByvsc857HmqW/OUpA52wq8e1TKrFHqriTG3MMcRJBt55rGdRO1cws15xgStu/ajcRQZYyGxmhZaGRluThGSbGTirmBC1q2VvNyBjsJRdi+ri3NAx+mW4UI2FxC1iWOUqUY/BkDM6vA5xU3VRv6SxK65dsdzCfetrTWi1HBzWP6PJXGcjW/gYmK1+OSzWXdu4S0Jq49UGiXaqrwMWqqY4/1a1zXG+oxxJrv/VbWRa4r1W1hWnxcpdRhtNTy2ai11xz0mlSpfWmT1C9jGCgbsc581oXzNCMc5ri10Yy70XLUIW3O3ejr9vZ81C1bcDRL5GJ6aGErUgdMNjtQtiBko4Ag0u74acwJeXKUDdWLsZ8UddFWqJWsm5tXL+tQ1rUXCQOOdnJRXU3I7hn5n96Hu2o/Koxnj9KZTvT0YtWcVHOHu8VVBlG4op3pyQIxmxfJ/irAhc56eo7hh+3FLdAmzCFxkx2Qch/M/tRUJdNuM1/VFBXv4fttQWmJ2rhMeoDk7fPxV8kCSfwvPt/3k+VVEtGGtx0qmP4U9xz/KrdNcXXNpcx5N9uf/7XP3b8rZMyo4lt5HD+yNa1i4tsuG8jO/fHiqlv6VdDplY4cbtX8PPNZmhuvQ5zkdtvFHxmSeM1vzdjKzKV2axkHjFBymd02cb/AH/rVt2ZGTF8UJqbjEUM4c8VPV1Ui9IsV23OfHis7UwHqXbff+1W2dR8SZHsAp7tR1ASUdwc1nbsXIy520ypgdjy/wBqHjFXKYDOCjrpKa5OOfFDziZwIexUKDRtrcZzVku2O3ir4aeCGSc/m7Uo245Fy/tmj9PjO3NVKVA39KytsISnBeyOFoe36RcjluTJSXLh3x8q3rmtt2o4uA+dtqEdRauS64gPjGKqyYJaN9MtFmEYhh75rbiBE+VY+ikyTfetbD0lafHmM+/aE+dqquv6Kskb1GZmKe1OlHP+prhxXGeqoLvXcep2sxXHauI9Xt4ZeaXHsdOcn/E4qFTly/OoNds9OelSpUsU0vU7pmqujZohjlpuivP114CuW8nFQjbwYxRsoVEt78UtGI2oYq92jShHBxSuGIu1Lq7FSKEFVqubjPapSUPehrk1cFYVoquudxqh3cPPmrZwZOOKUIGd8DSwFbtkgFB80VZ07gXGTnLyVCECPKhnZSjbduaGEXtk/wCtXIFNq0xuLCZvwGcjzj+dFulJHxIuFEQNk/7vVctLcjcFk78bbfftV0FiozReSWz/AJ+f3zVzxPKaytVaLZ+rOznfxhH9k+1HaGb/AKeuEXO6+DmgPUSXxJJMRNx70bp7kXSRE3YJ9ylpY0dNcbcE5xkyNaNm4g78bjnjDWXpg6Jj7n7VdCU/hoO++flVy5Cs0ZcuMrr0Yef8fyqrW2+rTI5y4xh7ZoTQTkTxOWcqHyztR+uUjbRwI5+hRLs0ZlAaS1MuKnv83/G1ETEkxRynZojREZx6gd3OXmpXY4mrsdsUZ40b5wDO0McY2O3mg7tlMqIeDvWyW+ox04PeoXbDJ3TB2Kmy1WsUinbDV1uGTGcntRFzTo7efFPatYd1+1KSjUrehhccpl93aoX9FKLlYh4CjrQxDmiYRjcEkDmtZJZibcoL0y1iY9q2enaqbFiFuT0mKIeMVrxzkZdXaonHfioJtV06gm1FnkSsn1CJ0O1cV6zaFdq7r1AOlPauP9St5k4qfVP3HG3dOklCofl3PFbc9Nl4qP5YXitJ8tnhP0jF+A+Kf8u+K2fy2/FL8r7Uf2o+kdybtOhipBikFcmujEGOe1IgeKs2pwoGKyOCq7o44onG1UXTZKdGALjgdqDZHXiir5haCmA52zWN9qEEohuU0pQIrgoU+JLGPsNT+DOZu9uKPI1XPVkHGJuPCVTqfXL1q0/DGBxjOVouGiAlckcGQd65z1OS6pAyRjkP610fFzLcrPu2TTXPWfUFZt5jlyCtW6T8RaiEwvybkfdrDnNlJVaSmDDv324rtvxc2Zjl/tZXeaXUW9dZJwc45Gi4rFA4NjNcj+HdW2tZG2v6Z7Ya6yTnCc9s1wfLx9Ljr46+01q2EbZn71O2oi8q5KF0c824nn+9EyMRkeN/3qZfB2KSRauOcmER7Jtmi9RqbdyxGKuQ3DvQF6K3g7BQnqGo/KaSVybwbZeWibuQXGj/AKvZ0cElOMANsuMFC/8A5Z6cTScpKPIDl+9ee6/XXtTeZyk4XY9qhpNR+XuFxtwuCJiZk3K6+fgueaw6+aS5HrXp3rWi1bi3dc+HFaF27bHB34ryXTXYkiemmxmbocPs12ugvat0kbpNuW8D7n3rLufXwvmzry6JiSNhp4WwMoUHpNfG4AmHvR0JkvnUTKqo3JETAb+AqOnuvUkkPap3UIrkD22oGM4l0x57VXqlPMbdvfDV3JQmmnmJs0UO21b83wx68VBMtMm1TajLYp4NZmuMxa5rW2cydq6nVgjWFqrYrWPdyteZ4YbY34qPwDxWk2t+Kb4Rnio1WM74B4pfAPFaHwtuKf4RRoxqhSxUsUqhZqfFLFPigGeKqud6vxtVdw2aAzb8cuaBuxzsmfatK8YzQkwzuVNgUWoACP0aKjDLnpfnUAB22q6A43/nShrQGGN8Nch67p5WdSzD9KMV8Hauujg74obX6OGrtohnGNzmtPj7+t1PU2Y86uQYyw1EFcBmug1fod+EkgZj2Ez9sVRD0XVSdokffFd0+bmz2478N0FolhrLOOSRmu6HMDHOM5rmrfpRpJkrj1SEd+M10lg6rMcOTBlrl+fudWY6Pi5snkXo1A3ef2rVt2y7DGN0wtZenFkB5y10Wk03RDpRcZX/AL3rPjm1p1cgB0+6puqI/PH9K5H8a3G3C3ZHGXKV6FO0klAROK4X8V6G5rL/AMS2ZIjFHmteZOepazttlxw1+OJDjAhiqsvG+CteGhZwbV8+HMdl2H69qpl6fG1cI3L0HPEYPUv2zXXPknpy347um9MinVccgce7XqX4ZsdHpxG4ZGIJjviuO9C9Fuam5blO2wtRRIvK9l/tXfW2Gk08LQuAxv3a5++pa6OObJiu56cFxlbHC52KXwrltyvyE4oyzdjPw+cVDUuygFZ/We4rb6oGd1jtMz86a0wZZ6aovTWfZav0VuVy4ZNqnduK9RraSKxFNqLziq4R6Yh7U+a6JMmMLdp12qE3apLVVyW1O0SeQmpcjWVfBXzWjqJc1nXXK1z93y35ngMx3pdJ4qxKjioWgxHtS6TxUsUsHtQQulTeKf6UjPT96iU9APUZmzUs+1RXZ2oAK+c7tBScNaF82azruy0qRZPrTkg4d6pVHb+dIZ8kX6DU2HomFx22D3xV8ZEs5xvQJJHfJ9KItXN+aDEfCzuce9RlaccfapxkPc+rmpNzbA5pyjGZqtL1RXCyBcHaifStFNhD4mcY3DkKuEV3TPKUVptRGNyMBydjNXJKTRhpP/GFuJIzvjvWpatSMdWyBw+1V2GEYIP6fFHQRMLubV1ccyMO+qE1MV06xcJuOOKy4aGOqsjMznPJ781t3EBDfyVTprULEWEADKh7vNLriWlOrI5XU+inxGDbHfxzUbHoNu1LrdPPJvjG1dmyggsBx2xVU7ttEVi+EqL8cn6c+S38YEbfTEj0loMYDmkweozLG/K81frZRynRGYmMq0BAtkj9OH2VrO+Gk8xraZMHD5cVfOUSKuMYrMtXoQ2EHxxRLdhKDl7VUszE2eVN25blNCB86L0MMHVjmgbdrruZzkzWraCMAKfM26OvWLmWDeokheahKXvTDWms8WrVV12qTLaqZuaLTk8hL6tBTHO1H3DPah5R3axvmtZ4CMXNRTFEsM9qj8OpxWh0abD/ANKIYB2qPTRg1PNOYqA04j3pBOnphPNLJ5oBykmSlk81Ffeg1F2IjWdfAVRfrWpPc52+VAagAXP1xSsAJknAh5Nv3qDI73HPs011wvDVSuf4T6lTSXFwNm4vzqyFyIn6jP1oTc/2wxUoyB3LX2pDWjC4Yyo/JqDfmSxgx4zzVNq4bAwfYjUphJzgi45CgxRdJRyD752oR10beoAMo75qy0JtnrO7nloL1LTSH41nk5qp7OZ+uj03rK2wl0uDu4rV03q0EBTG24159pdVKVpZgSHDjhot11y0RLceuUnbLsVc76lxpfj5s16DHVWrib4y4DPeiWX6ROQ8ZrnfSNLdvRhqNVIjLH6YHB71ttzDggKHGcZrfnq2bXJ3zJchXbsJOESX86AvXbcJKkv/AGa0J9EzeQPOEzisrWy+GvQE/OB/vU96OcUXb7Jfhi+3TmhpF1P4H7YqFzWTio2wPCYqBrs//HD6Z/vWVutJ4XwhcN2ODsrRNsyYZxDuNC29XNdrcD7v9aMtXpu6nywU5hWirMYRMkirmeO5Q5eTlM/IpN1eQfpVyyJsXdavNTGh4yy8FWksBvTlTYmy96hJyVCU8VBu0WnIeW9VyCoyulVN0zUVUWdOaZjVfxTzSbx5pGdjS6SofFM80/xTzTwA25jvUS/h5oG5q4nKlVfmiRkclLBrVNQeaf8AMHmsd1HvTOp96WHrYdQeai6g81kOpwc1B1Xhowa156gw5cULdvDn+tZ7qs96rlqsjj70qNX3bgdwqnrHjL7tC3NQLyq+KVq6yefoVNl9jRKo7v0pEk7beVxTG5tt71BMOV/vSlC+FzfnPyP6tEkxBX6NZrcRwbVbbvEe+9GCUaXInt7FNK+YxhQ5zVJIQfsVCbPGx3oVKG1RGKzgdI9veitD0RmTuOU4OcUJes3JmZbg7FXWIXLeDkNqvxivtcx0+m9SmARnHHubNaH54nAjKfS+29cta6jJue1G2poxVwnDnmnOqzsldBb1EOjOJL2V2oLVau6TVthHyRyfXGEoR1YnTkHGEf8AHP8AM96gXZ5UnLbkH9QefEj96q21PpcapkL8Ikd23NcfTn9qlFs3e+HxKBL+WEqkuQkjchGWeJwelfpw/KpSciwS4HZ2kfWlh6JhaiGY24TPNuTn7NWErYYzOL4d/wC1Z5fiuFYSO0tn796tjqbhguBI9/6NMhfUrsj8mpwXjf60NDpuOYKPh/vRdqMgBPvRDWw23qTICoux3KpnJ3qvUT7Tnc5qmVxzVcptVqtTaqROVxqpk0lWoI1OjDs2mZe9RR8UyO+1GjD9TT9dQw0sPijRjmNTc1rEJaK5bXbLDBTaUuRAnz3M10F/1bSaiHRO3JPGaHL3psgzbmOOzXRcrGbGTduooNUTvpjCZ+dbsJelxzguGfJTTj6XcmKyMO36SlkPax+rMM5M/Oq43WTjL963W16ZIwXMZ8xKpNHoDPRfjv5KV5glZVyXSC96l0koDxR93Q2bgEdRb++KjLQTY4hdtL2/UDUWf4qVmfDFQz96ssxBx4+1XXNFf04zmEjuxkP7FCF/M9ooHkqbLTlaI7VXKmJ/pN6jOe2zWOXVmmgZKGlNHI1Kc3OM0POWXBW3PP8AqLRdvVog+d2jLN+NxcptWMy6dzn+tIvyiGHvTvx76E7x0UmCJk23acYRirisCetlHKuyVTP1WQBl+dE+Lq+hfkk9ujdVCJkcmag60lFB2d/lXNR9RkrFXCc+Kg66ccxX5YrSfDUX5Y6aGq+Ih1fqOHNFWtQTCKpI3A2fme/t3rkNNrZEzK81rxv9USWd3fmp64vN8nO9bZqMrF6epM44jP5eH/vNQnqViyiqHO+JQrMNSXIpccmd05H/AJH8kqUbspTIScXo/wAMs7S9n59mpzD3WkavqAvBcg8SNk+dFWpIDB64PI9qx7blZBhNpRa0dGsUYLjuPaptONnS2yWEyHhrWsWtg/as/RMZAhh744rYsG1XxB1cD37WIu1Zt3ItbeoAi5rF1OCT3qu5g58qFzzSx9qZTzmnHFY60JiUukp802dqNBIVFiU6lNnNLQZiU3SeKlSxRocB/pKcatPp/mmfS7hxrD7P96GdXMMi4qP5qS4y12/9ubORT6dfONYfvS/Iao41kf8A2aFdRIU6nb3pOpkYOpz33p/9FkFfk9ccaqL/APdpvy3qJxqIv/7KG/MzwpJ27ZpGrnj+J+9H/X+Fk/0T8L1Q/wDlP/cpH+rR4kv/ANhof83P/k0vzk/NHn/Dyf6JbvqwZYqHsNVy1Oukhd/SLvkCqZaub3qiV6Undac533C3P1uQunwzc4pSumOaw+qWNlPrTZudlx86z/hN9tP6X/GtO4K7lVMwVyVnLcfNRSbgw1U+KT9Te7/g+dwwGT33quV+A5zn5UH0y96f4b4qpxIn7W/iy/qOrY4odVqbbTLioI1pJJ6ZdW32Q4an1CA9uGq8VIjJdhfpT8JmnHpchWjptUfD6V4oSOnvzCJBTO1Hab0m9IyiZKy7vOea14l3wnDUBcJG/k8ncowkSig5YmYvmPj6VXD0a8GRc0Tb9LvxYpLeL3rC3n8raSrbFz4mJj+s2l7nmtbTYAkOB/as/T+nTt3M9X6Xt7NHWdNcjgZOGsri5re0MjAHOK2rEgib1zOkJWneS1p2tUxAzV82QWWtHVTCDhrEvqyaLu6jqMZoST1LU93VczFSNLfxU8ZOKWMVmpD50qklJKMCKbvtTU/JTI+aMBlpZpJ5aWDxRgY5+GNDcts8SIx2el2qJ+GdA2y4EwMY75rbMgBgfapm0k33535zV/06/wBL6c/4wr/4c016XWAHSCRMBjv86Cn+FYdf6bknffLv866qGYiBs8mdn5lNagxJAoSNw70T5ep+i8c38cdd/CeoEbctny0Pf/C2stgxRXneu5lH9BAXBuGeKZywLeViOw45qp83UTfi5rgZfhvXxMsTDxjvUH8Pa4MyhjPHfNehTiqCAm21NdPiozBTBkPFP/0dD+PLz6XoGtObae+OSo/6NqIoMJZfavRLqXOkTMQwbG1QlAlYIdJk4U3+vmj/ANHRfx5eeOguRlhi/WrdToXTSjBcrEkhyKZx9q7t0ennZGcBuZXONvtVF30zSSC50Jec5y7PvR/a/p/zk9OF+BLlE7lJtGdq7Z9H01yBOUp9Q7x7J86jP0m3eIwnjpHbAGM8m3bYo/sPo4wsuM470vgcicV2Fr0K2txZ4IDkcGceKUvRbdwSL0xBVDFH9i+jkCyJjFOaWL2rqo/h+1OUiM55DO2MvyKsj6Hp7duNwZTFwi7Uf1v4Po5GOkiOQzV8NInEX7V18vR7NuYQhkTIvNSfT7ZaZBhHCPapvy2ifHHKQGKAOTtij7Fy5gCLj5VtHp0DEmAvO5ye1Wmkh1BCAOOKi21U5wBYlNMo/aiiPA1YWpk2AYTtipRt3DAihy0e1YbBtgc1IFUDcqyNqXTkFT6UpRnLDEx5DbFAxGKoKcc0/VI3HZ4M0pW5xxMMjs57VEhP4axMg5zzSC3rc7745pm5gU3zxVZCTLA4HbOakWp9bbw9T7lG08OXJCih4qTcMbvFR6GVtBMw7HOXtS6SUeoRTk4aAkyHGHdpLnzUFIhMMi4y9qeQweo3i7CcfamDkjikyMviozERMI7ZDikxRBXKc84+dBJKb5WmE8tMmMdSme7/ADquUo52mUAUxE7UgA9ynKb/AHUlEmy0hQDFP/anxtQDY23pgxvjNSKZaWAzv5+VLBimkuCn7UA2Nu1Pjbbmk0vNGAxs4xUyMWDlc9tqjHmnXdphEi7lJE7fWpK4aXelgQDnzSyqD32qX+6maASsZZEUMCUy5imNvc71IMlN3aYIyoimOKTnKBgeacpHagEyyEXLE4McUkGIYcnd7fKk8UxQDzkqLjJwY2qBKZcJqGODHPzqyXJ86i8tMHZHV1GwvAbU85MpZ2xzgqPemHeloSLk2w25AucjShJtyzAQTcXPzqJy0w7tMjuIomcrvl2f7UmSzZnbOMO+ffzTv8L86i7UjKMm3cEx04MnmlCbbv8AXgRzk4qLz9qd4+tMYdYkpdMTpeBch71GFyUYMEEd3Lj5VB5pS2NvFIjxnKMhw5iuAdvanuSZLKJiTnqc7P0qE+D6UjemEyX6AI7gZXGz7e1Vtoy9EXHyqR3+dNmlgf/Z" alt="">
即便文件没有扩展名后缀，一点也不影响网页展示图片，只要内容是图片就可以了。<br>
<img src="703cd3a089a64373" alt="">
</body>
</html>
图片的类型
图片一般分2种类型：
矢量图：一种以线、面作为基本画面组织单位的图片。矢量图在放大缩小的时候，不会失真。常见的矢量图格式：cdr，svg格式。
位图：一种以像素(pixel)作为基本画面组织单位的图片。位图在放大缩小的时候，会失真，出现锯齿状边沿或出现马赛克。常见的位图格式：png，jpg/jpeg，gif(动态图片格式)，webp，tiff
浏览器默认支持部分矢量和所有的位图的。像素，就是组成位图的最小画面组织单位，一个像素只能存储一种颜色。
位图按是否支持图层分2种。
支持图层：psd（photoshop designer），png，cdr，gif。 除了gif以外，其他几种常用于UI工作人员进行设计原稿的制作。
不支持图层：jpg/jpeg，webp，tiff。一般用于在浏览器中展示的。
位图按是否支持动画效果也分2种：
动画图片：gif
其他图片都是不支持动画
位图按是否支持透明效果（alpha颜色通道），也分2种：
支持透明效果：png、gif、tiff，网页的背景一般经常会使用透明图片作为背景，特别是背景是非矩形。
不支持透明效果：jpeg/jpg，webp
音频
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<audio controls>
<source src="assets/bg3.mp3">
</audio>
<hr>
<audio controls>
<source src="assets/horse.ogv">
</audio>
</body>
</html>
视频
默认提供的视频标签仅仅是基于浏览器提供的视频内容的播放效果以及画中画效果，但是如果要实现视频播放过程中的多倍播放，封面图片，广告图片，弹幕，实际上都要通过js特效来实现的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<video width="600px" controls autoplay src="assets/movie.ogv"></video>
<hr>
<video width="600px" controls autoplay src="assets/1.mp4"></video>
</body>
</html>
实体字符
在HTML网页中，因为标签本身占用了一些特殊符号，而且HTML代码中是不识别的空格的，所以如果我们要在网页中展示一些特殊符号或者空格，就需要使用实体字符（Character entities）。
| 实体符号 | 实体编码 |
|---|---|
| < | < |
| > | > |
| 空格 | |
| & | & |
| " | " |
| × | × |
| ÷ | ÷ |
| © | © |
| ® | ® |
更多的实体字符：https://www.w3school.com.cn/charsets/ref_html_8859.asp
标签：web,Title,标签,前端,基础,文本框,表单,输入框,列表 From： https://www.cnblogs.com/sunsir17737107299/p/18050158