内存是一个暂时性的存储（但是内存的读写速度快），一旦断电，保存在内存里的东西会瞬间消失。
计算机能安装多少东西，取决于硬盘有多大。
计算机分为硬件(中央处理器、存储器（内存、硬盘）输入设备、输出设备）和软件（系统软件、应用软件）
计算机的两位先驱：图灵（人工智能之父）让二战提前几年结束
冯诺伊曼：现代计算机之父
C：Client客户端 需要下载安装的软件
B:Brower 浏览器（可以在网页上打开）
S:server 服务器
应用软件分为C/S架构和B/S架构
前端工程师主要开发B/S架构的应用——写网页
C/S架构 需要安装 偶尔更新（很多CS架构的安装的时候不能使用得安装完才用）不跨平台（不同的平台需要安装不同的软件包，对于用户和开发工程师来讲都很麻烦）
B/S架构 无需安装 无需更新 可跨平台（因为是只需要写一个网页）
AE是专门做影视特效的
大型的（英雄联盟）专业应用（After Effects)，对安全性要求比较高（航天性，军事性的，细化到只有某些人的某些电脑才可以安装）的的还需要用C/S架构开发。因为浏览器无法支持它们巨大的运算量。
chrome的渲染性和稳定性是做的最好的。(2008年问世）
IE浏览器（1995年问世）
内核是浏览器的核心，用于处理浏览器所得到的各种资源。
Chrome 早期使用 webkit 内核，现在使用 Blink 内核
Safari 使用 webkit 内核
IE浏览器 使用 Trident 内核
Firefox 使用Gecko 内核
Opera 早期使用 Presto 内核 (已放弃维护)，现在使用 Blink 内核
一个或多个网页就构成了一个网站
网页的组成：结构（HTML） 行为（javaScript) 表现（CSS）
HTML是超文本标记语言，超就是超链接的超。
将Chrome浏览器设置为默认浏览器的方式。
开始菜单-设置-默认应用/选择默认Web浏览器。
将网页用记事本打开
方式一：右键选择打开方式（用记事本打开）
方式二：打开记事本，鼠标左键点住文件不要松手，将它拖动到记事本里面
HTML文档声明 <!DOCTYPE html>声明是按照HTML5的标准写的
W3C的出现为了制定网页开发的标准，以使同一个网页在不同的浏览器中有相同的效果。
所以，我们需要制定我们编写的网页都需要遵循w3c的规范
HTML为超文本标记语言，它负责网页的三个要素之中的结构
HTML使用标签的形式来标识网页中的不同组成部分
所谓超文本指的是超链接，使用超链接可以让我们从一个页面跳转到另一个页面
纯文本只能存储文本数据，记事本是文本，word是富文本
文件的扩展名决定了文件是什么格式可以由哪个程序打开。网页文件的扩展名为.html.
标签有另外一个名字叫做元素。
标签不区分大小写，但一般都是小写（因为小写更规范）
（1）有的标签是成对出现的，有开始有结束，有的标签是自结束标签。
自结束标签的数量很少。
- 自结束标签<input/> 自结束标签的/可以省略
- 标签也可以嵌套，如果发生嵌套，一般不会写在一行，要写成多行，还要缩进。
<标签名>标签体</标签名>标签都是成对出现的，只有标签名里面的标签体会被对应标签渲染。
标签的作用就是标出网页中不同的内容
网页中所有的内容都要写到根标签里面
<标签名>标签体</标签名>
<!--文档声明，声明当前网页的版本为html5.-->
<!DOCTYPE html>
<!--html的根标签（元素），网页中所有内容都要写根元素的里面-->
<html>
<!--head是网页的头部，head中的内容不会在网页中出现，主要用来帮助浏览器或者搜索引擎来解析网页-->
<head> <!--meta标签用来设置网页的元数据，这里meta用来设置网页的字符集，用来避免乱码--> <meta charset="utf-8"> <!--meta为一个自结束标签--> <!--title中的内容会显示在浏览器的标题栏，搜索引擎会主要根据title 中的内容来判断网页的主要内容-->
<title>网页的标题<title>
</head>
<body> <!--body是html的子元素，表示网页的主体，网页中所有可见的内容都应该写在body里--> <!--h1网页的一级标题-->
<h1>网页的大标题</h1>
</body>
</html>
想呈现在页面上的东西就写在body里面。
<head>标签里面写的内容不会呈现在网页中
浏览器在运行的时候会检查代码，把不对的地方进行纠正修改。
<title>里面写的是网页的名字。
[查看网页源代码] 看到的是: 程序员编写的源代码
[检查]看到的是: 经过浏览器“处理”后的源代码。
日常开发中，(检查]用的最多
注释可以隐藏一些不想显示的内容，和删除是不一样的
注释是不能嵌套的。
HTML中的语言不区分大小写。
在一开始就声明当前网页的版本是html<!doctype html>
计算机无法直接对bit进行操作，计算机的底层进制是二进制
所以的数据在计算机中的存储都是以二进制的形式存储的。
所以一段文字在存储到内存中时，都需要转换为二进制编码。
编码：将字符转为二进制的过程为编码
解码：将二进制转换为字符的过程为解码
字符集：编码和解码所采用的规则
编码和解码所用的字符集需要一样。
GB2312 GBK是中国的，后者是对前者的扩展。
UTF-8是万国码，包含是世界上所有的编码。
在开发时，我们使用的字符集都是UTF-8.
常见的字符集编码:ASCII ISO88591 GB2312 GBK UTF-8
可以通过<meta>标签来设置网页的字符集，避免乱码问题。
<meta charset="utf-8">
实体（专门用来表示一些特殊符号，用的不是很多。）
无论实体之间有多少个空格，浏览器都解析为一个空格。
空格
> 大于号
< 少于号
© 版权符号
meta标签
用来设置网页的一个元数据。 就是让搜索引擎对网页分类。
keywords不区分大小写，表示网页的关键字，可以写多个关键字，关键字之间使用,隔开。
用来设置网页的一个元数据。 就是让搜索引擎对网页分类。
keywords不区分大小写，表示网页的关键字，可以写多个关键字，关键字之间使用,隔开。
<meta>
name 指定的数据的名（属性名）
属性值：keywords 表示网站的关键字，可以同时指定多个关键字，关键字间使用，隔开
description 用于指定网站的描述
<meta name="keywords" content="HTML5,前端，CSS3">
<meta name=”description” content=”京东是一个购物网站”>
charset 指定的网页的字符集
content 指定的数据的内容
将页面重定向到另一个网页，3表示三秒后跳转
将页面重定向到另一个网站
<meta http-equiv="refresh" content="3;url=https://www.mozilla.org">
列表（列表之间可以互相嵌套）
1.<ol> 有序列表
<li></li>
</ol>
2.<ul>无序列表 （用的最多）
<li></li>
</ul>
3.定义列表
<dl>(用的比较少）
<dt>结构</dt>
<dd>结构表示网页的结构，结构用来规定网页中哪里是标题，哪里是段落</dd>
</dl>
1.可以从一个地方跳转到网页的其他地方或者其他网页。
2.是一个行内标签，可以嵌套除它自身以外的所有的标签。
<a href="https://www.baidu.com">超链接</a> （跳转到外部网站的地址）（绝对路径）
<a href="07.liebiao.html">超链接</a> (跳转到内部页面） 需要这两个页面在同一个目录之下）（相对路径）
./表示当前文件所在的目录
../表示当前文件所在的上一级目录
所有路径都是相对于当前目录。有再多的层级关系都用/隔开
语义化标签
<hgroup>用来为标题分组，将一组有关系的标题放在一起，都放在hgroup里面。
<em></em>表示语音语调的加重，需要重读。表现在网页上面就是字体会变斜体。在页面中不会独占一行，称为行内元素。
<strong></strong>表示语义的加重，表现在网页上就是字体的加粗。
<blockquote></blockquote>表示引用别人的话，是一个长引用，是块元素，独占一行。
<q></q>是一个短引用，表示引用名人名言，没有换行，是一个行内元素。
<br>表示换行
在网页中HTML专门用来负责网页的结构所以在使用htm1标签时，应该关注的是标签的语义，而不是它的样式
标题标签，
h1 ~ h6 一共有六级标题
从h1~h6重要性递减，h1最重要，h6最不重要
h1在网页中的重要性仅次于title标签，一般情况下一个页面中只会有一个h1一般情况下标题标签只会使用到h1~h3，h4~h6很少用
在页面中独占一行的元素称为块元素（block)
浏览器在解析网页的时候，会自动修正不正确的东西。块元素中基本什么都能放，p元素中不能放任何的块元素。
html5新增的内容
<header>网页的头部
<footer>网页的底部
<main>网页的中间
一个网页只能有一个<main>
<nav>导航
<aside>侧边栏
<section>分区，分块
<article>一个独立的文章
<marquee>这个标签已经被废除了。
行内元素不会独占一行
行内元素可以写行内元素，但是不能写块级元素
常用的文本标签
文本标签通常都是行内元素（em,strong,span)
em表示语气的加重，表现出现的效果是斜体。
strong表示意思的强调，表现出现的效果是字体的加粗。strong的语气要比em要强。
em语气的加重表现出现的效果是斜体strong意思的强调字体的加粗
h1是网页中最重要的内容，只能写一个。
q为短引用，blockquote为长引用。
这些不常用的文本标签里面只有<blockquote>和<address>为块元素。
IE浏览器无法呈现webp格式的图片，一定要使用的话务必解决兼容性的问题。
京东网站的处理，存了两套图。图片后缀为.jpg.webp.
如果不支持的话，通过js把后面的.webp干掉，剩下的就是.jpg了.用这种方式解决兼容性问题。
base64还有一个特点，就是不挑文件的路径。
cite 作品标题 (书籍绘画、雕塑)电视节
dfn 特殊术语，或专属名词
del与ins 删除的文本[与] 插入的文本
sub与sup 下标文字[与] 上标文字
code 一段代码
Samp 从正常的上下文中，将某些内容提取出来，例如: 标识设备
Kbd 输出键盘文本，表示文本是通过键盘输入的，经常用在与计算机相关的手册中
Abbr 缩写，最好配合上 title 属性
bdo 更改文本方向，要配合 dir 属性，可选值: tr (默认值) 、 rt1
var 标记变量，可以与 code 标签一起使用
small 附属细则，例如: 包括版权、法律文本。-- 很少使用
B 摘要中的关键字、评论中的产品名称。
用一行代码来告诉浏览器自己选择的编码方式
<meta charset="utf-8">,一般默认的编码解码方式就是utf-8
计算机可以识别的语言只有二进制
（就是一堆0和1）
对计算机来说字符集不止一种，编码和解码的方式也不止一种。
原则1: 存储时，务必采用合适的字符编码否则: 无法存储，数据会丢失!
原则2: 存储时采用哪种方式编码，读取时就采用哪种方式解码否则: 数据错乱 (乱码) !
存储时，要采用合适的字符编码。否则:无法存储，数据会丢失。因为UTF-8是万国码，所以我们使用UTF-8.
美国ASCI => 大写字母、小写字母、数字、一些符号，共计128个
欢洲ISO8859-1 =>在 ASCII 基础上，扩充了一些希腊字符等，共计是256个。
中国GB国标GB2312 =>继续扩充，收录了 6763 个常用汉字、682个字符.
中国 k扩展GBK =>收录了的汉字和符号达到 20000+，支持繁体中文
万国码UTF-8=>万国码，包含世界上所有语言的: 所有文字与符号。很常用。
HTML设置语言<html lang="zh-CN">
<marquee></marquee>可以让里面的内容滚动播放 不过现在已经禁用了
lang属性的编写规则
前面是语言，后面是国家地区
1.第一种写法 (语言-国家/地区 ) ，例如:
zh-CN : 中文-中国大陆 (简体中文)
zh-Tw : 中文-中国台湾 (繁体中文)
zh :中文
en-US : 英语-美国
en-GB : 英语-英国
2.第二种写法(语言一具体种类) 已不推荐使用，例如:
zh-Hans : 中文-简体
zh-Hant : 中文-繁体
- W3School 上的说明:《语言代码参考手册》《国家/地区代码参考手册》4. W3C官网上的说明:《Language tags in HTML》
中国的是W3School是非盈利的组织。
html的标准结构
<!DOCTYPE htm1>
<html lang="en">
<head>
<meta charset="UTF-8">
<!如果是为移动端写的页面，需要写下面的两行>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0".
<title>Document</title>
</head>
<body>
</body>
在VScode里面输入!，随后回车即可快速生成标准结构
html的标准是W3C制定的。
W3school
MDN (reference html)推荐使用，很多开发者都在用。
HTML超文本标记语言
超文本 : 是一种组织信息的方式，通过超链接将不同空间的文字、图片等各种信息组织在一起，能从当前阅读的内容，跳转到超链接所指向的内容
ol有序列表
ul无序列表
dl定义列表(dt为标题，dd为描述）
<dl>
<dt></dt>
<dd></dd>
</dl>
列表注意事项
1.列表是可以嵌套的<ol><ul><dl>这些可以互相嵌套。
2.写了ol或者ul，最好让它的子元素是li,如果写了别的，最好用li来包裹一下。
li不能单独写，显示出来的效果是无序列表的效果，但是它是一个孤零零的li
- 自定义列表里面一个术语名称可以有多个术语描述。
- 4.有序列表是侧重于顺序的。<ol>
- 无序列表用的更多，不侧重于顺序。
- shift+tab一起按就是往左动。
超链接<a> 可以跳转到内部页面，也可以跳转到外部页面
<a target=”_blank” href=” ”> 在新的空白页面打开
<a target=”_self” href=” ”> 在原来的页面打开
<a>标签是行内元素，但是可以包裹任何东西，除了它自身以外。<a>标签不可以嵌套。
跳转文件
zip浏览器不可以直接打开，需要解压。
下面这些格式的文件浏览器可以直接打开(mp4,pdf,jpg,gif)
浏览器不可以打开的文件，会触发一个下载框，在<a>标签里面写download属性可以触发下载。
如果download不写属性值，下载的文件名字就是文件本身的名字。
如果downlaod写属性值，比如download="好看",效果如下。
超链接-跳转锚点
<a href="#htl"> 如果不写#的话会当成普通路径，执行跳转页面的操作。
<a name="htl">一起搭配使用
" "里面的东西区分大小写，并且是唯一的，不能有重复的锚点，否则会发生混乱。
name属性写在a标签上才算锚点。
跳转到任意位置需要用id.id是唯一不重复的，不能以数字开头
也可以用id写锚点，任何标签都可以写id属性。id是唯一的，区分大小写的，最好不要以数字开头。
推荐用id写锚点。
回到顶部<a href="#">回到顶部</a> #只能去顶部，不会发生任何跳转
刷新页面<a href="">刷新页面</a>
超链接也可以链接到其他页面
<a href="javascript:alert(666);">点我弹窗</a>
可以在：；之间写任意的js代码
<a href="javascript:;"></a>没有任何跳转功能
<a href="#bottom">去底部</a>
<a id="bottom" href="#">去顶部</a>
想往哪里跳都可以，前提就是制定好id属性，id属性不能重复
在开发中可以将#作为超链接的就的占位符使用。在还没有确定要跳转到哪里的时候。
<a href="#">超链接的占位符的用法</a>
超链接-唤起指定应用
<!-- 唤起设备拨号 -->
<a href="tel:10010">电话联系</a>
<!-- 唤起设备发送邮件 -->
<a href="mailto:10010@qq.com">邮件联系</a>
<!-- 唤起设备发送短信 -->
<a href="sms:10086">短信联系</a>
音视频播放
- 使用<audio>标签来向网页引入音频。
controls出现播放控制器 loop循环播放 autoplay 自动播放
(1)<audio src=" " controls loop autoplay></audio>
(2)<audio controls>
<source src=" ">
<source src=" ">
这里可以引入多个音频文件，来解决浏览器的兼容问题。
</audio>
这里有两个兼容问题和它们的解决方法：
（1）浏览器对<audio>标签的兼容问题
(2）浏览器对音频格式的兼容问题
在网页中引入音频和视频，
在文件目录中新建source目录。
现在mp3的兼容性比较好
在网页中引入Mp3音频。
<audio>标签就是向页面中引入一：个音频文件的，它和<img>标签一样也是一个替换标签，会被替换掉。
1.src用来指定音频的路径，可以是外部链接，也可以是本地文件的相对路径。
音视频文件在引入时，默认情况下不允许用户自己控制播发停止
属性:
这几个属性没有值，需要就写，不需要就不写。
(1）controls 没有属性值。 不加controls的时候 ，音视频的图标不会显示出来，加了之后才会在页面中看到。
<audio src=" " controls autoplay loop></audio>
(2) autoplay 设置音频自动播放
如果设置了autoplay，音频咋打开页面的时候会自动播放，但是目前来讲大部分浏览器不会对音频自动播放。IE浏览器会自动播放
(3) loop 让音频循环播放
播放器的外观设置需要使用java script.
2.除了可以使用src来指定外部音频的路径以外，还可以通过source来指定文件的路径。
这两种写法的效果一样。
<audio controls>
对不起，您的浏览器不支持播放音频，请升级浏览器。<!--可以写一行字来处理IE8不支持播放音频的情况-->
<source src=" ">
<source src=" ">
</audio>
引入多个音频链接可以解决浏览器对音频的兼容问题。
这两个格式的文件不会同时使用，如果第一个能用就用第一个，第一个不能用就用第二个。
原理：在支持<audio>标签的浏览器中，也会支持<source>标签，就会自动去找音乐播放。在不支持<audio>的标签的时候，也不会支持<source>,只会显示那一行文字。
对于支持<audio>的浏览器会播放音频，对于不支持的浏览器会显示文字。
解决IE8对音频文件的兼容问题。<embed>会自动播放，必须指定width和height，才能正常显示。这个标签非常的不好用。type用来指定播放的格式。
/前面的audio用来指定文件的大的类型，比如音频<audio>还是视频<vedio>，/后面用来指定具体的细分的类型mp3音频或者MP4视频。
<embed>标签的视觉效果也很丑，一般不使用。
<embed src=" " type=" " width=" " height=" ">
如果想在正常的浏览器里面使用<source>在IE8浏览器里面使用<embed>有下面的写法。
原理一样，如果前面的支持了，就不会继续运行后面的代码了，后面的就不会执行了。
<audio controls>
<!--对不起，您的浏览器不支持播放音频！请升级浏览器-->
<source src=" .mp3">
<source src=" .ogg">
<embed src=" " type="audio/mp3" width=" " height=" ">
</audio>
<audio>没有兼容问题，基本所有浏览器都支持。
二、使用<video>标签来向网页引入视频。
controls autoplay loop的用法都是一样的。
（1）写法一：
<vedio src=" "></vedio>
(2)写法二：
<vedio controls>
<source src=" .webm">
<source src=" .mp4">
<embed src=" " type="vedio/mp4" width=" " height=" ">
</vedio>
使用方式和audio基本是一样的，MP4的兼容性比较好，一般使用mp4.
IE8不支持，解决办法和<audio>的解决方法一样。
正常的浏览器就用<vedio>+<source> ，不正常的浏览器就用<embed>
像音频视频这些东西，我们不会直接放到服务器里面，会购买一些第三方的托管服务。本地服务器就没有什么压力了，成本也小了很多。使用的时候就引入一些外部链接。
标签属性：
属性名和属性值写在标签里面
loop="1"叫做属性，loop叫做属性名，1叫做属性值
属性名和属性值必须按照W3C的规则写，要是写的不符合要求，比如写错单词，是不会起作用的。
标签里面可以写很多个属性，中间用空格隔开。 但是不能写的重复，如果发生冲突，就以前面写的为主，后面写的会失效。属性名和属性值不区分大小写，以小写为主。属性值不用双引号，写单引号，或者不写也可以，但是要以W3C的要求来。
<input type=”text” type=”pasword”>
不同的标签能写的属性也不同
有的属性是一些标签独有的，有的属性是所有标签都可以用的，被称为全局标签，比如id(标签又被叫做元素）
有几个属性，只有属性名，没有属性值。
比如<input disabled>
<h1>-<h6>的一些排版标签
标题标签质检不能互相嵌套
标题标签<h1>-<h6>，<h1>-<h6>之间不能互相嵌套。默认效果字体会加粗，和其他的之间会有一些间距。
段落标签<p></p>,文字没有加粗效果。独占一行<p>标签里面不能再有标题标签<h1>-<h6>，也不能有<p>,<div>.
<p>里面不能嵌套任何块元素
<a>里面可以放除了它以外的任何元素。
<div>没有任何含义，相当于我们去超市购物使用的塑料袋。起一个封装的效果。可以对一些元素便于管理。
<div>相当于大塑料袋。<span>相当于小塑料袋
基本结构
<caption></caption>表格标题
<thead><tr><th></th></tr></thead>表格头部 <th></th>会加粗 h:heads
<tbody><tr><td></td></tr></tbody>表格主体 <td></td> d:data
<tfoot></tfoot>表格脚注
默认样式就是头部整体加粗
caption只能通过CSS设置.table的height是最少为那个值，只能大于等于它，
<tbody>表格主题，属性和<thead>相同
1. rowspan:指定跨的行数。
2. colspan : 指定要跨的列数。
图片标签
图片的引用有两种格式，一种是外部引用（超链接），一种是内部引用，可以引入外部图片也可以引入内部图片
<img src=””>
<img>自结束标签，用于向当前页面中引入一个外部图片
img这种元素属于替换元素（位于块元素和行内元素之间），具有两种元素的特点。
alt对图片的描述，默认情况下不会显示出来，当图片无法显示的时候会显示出来。
搜索引擎会根据alt中的内容来识别图片，主要是给浏览器使用的。
如果不写alt属性就不会被搜索引擎搜到。
width:图片的宽度
height:图片的高度
如果只修改了一个，则另一个会等比例缩放，为了保持比例的不变（一般这么使用），会把另一等比例缩放。
一般情况在PC端，都不建议修改图片的大小。把大图缩小会浪费内存，把小图放大会导致失真。建议需要多大裁多大。
图片的格式
图片的格式（jpeg(jpg）、gif、png、webp)和它们各自的图片。
jpeg(jpg)支持的颜色比较丰富，不支持透明效果，也不能展示动图。一般用来显示照片。
gif(支持的颜色较少，支持简单透明，支持动图，颜色单一的图片）
png 支持的颜色丰富，支持发复杂透明，不支持动图，颜色丰富，复杂透明图片（专为网页而生）
webp这种格式是谷歌新推出的专门用来表示网页中的图片的一种格式，它具备其他图片格式的所有优点，而且文件还特别小。缺点，兼容性不好。
base64 将图片使用base64编码，这样可以将图片转换为字符，通过字符的形式来引用图片，一般都是一些需要和网页一起加载的图片才会使用base64.
设置base64的图片会和网页一起加载出来，不会有延迟。
没有设置base64的图片会在网页加载出来之后，再加载图片，会有时间上的延迟。
网上有很多图片在线转换的。
效果一样，用小的，效果不一样，用好的。
内联框架<iframe src=”” width=”” height=””>向当前网页中引入一个其他页面
frameborder指定内联框架的边框宽度，一般设置为0.
表单基本结构
<form action="https://www.baidu.com/s target=”_blank” method=” ”>
<input type="text" name=”wd”> 百度是wd,京东是keyword是固定的
<button>搜索</button>
</form>
<form action="https://www.baidu.com/s>会直接返回搜索结果
<form action="https://www.baidu.com/>会打开搜索主页，让你自己搜索
method有post和get，默认为get
<a>的方法写死了要查找的东西
什么是HTML5?
。HTML5 是新一代的 HTML 标准，2014年10月由万维网联盟( W3C)完成标准制定
。官网地址:
W3C 提供: https://www.w3.org/TR/html/index.html
WHATW提供: https://whatwg-cn.github.io/html/multipage
HTML5在狭义上是指新一代的 HTML 标准，在广义上是指: 整个前端
2.HTML5 优势
1针对 JavaScript，新增了很多可操作的接口。
2.新增了一些语义化标签、全局属性
3.新增了多媒体标签，可以很好的替代 flash。
4.更加侧重语义化，对于 SEO 更友好
5、可移植性好，可以大量应用在移动设备上
3.HTML5兼容性
支持: Chrome 、 Safari、 Opera 、 Firefox 等主流浏览器。
html5新增的内容
<header>网页的头部
<footer>网页的底部
<main>网页的中间
一个网页只能有一个<main>
<nav>导航
<aside>侧边栏（和主体相关的其他内容）
<section>分区，分块 其他的标签都不能使用的使用使用section
<article>一个独立的文章
关于article和section :
l. artical 里面可以包含多个 section 。
2 section 强调的是分段或分块，如果你想将一块内容分成几段的时候，可使用 section 元素。3.article比 sect1on 更强调独立性，一块内容如果比较独立、比较完整，应该使用article 元素
新增状态标签<meter><progress>
<meter>
| 属性 | 值 | 描述 |
| high | 数值 | 规定高值 |
| low | 数值 | 规定低值 |
| max | 数值 | 规定最大值 |
| min | 数值 | 规定最小值 |
| optimum | 数值 | 规定最优值 |
| value | 数值 | 规定当前值 |
<progress>
| 属性 | 值 | 描述 |
| max | 数值 | 规定目标值 |
| value | 数值 | 规定当前值 |
<body>
<meter high="50" low="30" value="" max="80" min="0"></meter>
</body>
<progress max="100" value="80"></progress>
新增列表标签
| 标签名 | 语义 | 单/双标签 |
| datalist | 用于搜索框的关键字提示 | 双 |
| details | 用于展示问题和答案，或对专用名词进行解释 | 双 |
| summary | 写在details的里面，用于指定问题或专有名词 | 双 |
<input type="text" list="mydata">
<datalist id="mydata">
<option value="周冬雨”>周冬雨</option>
<option value="周杰伦">周杰伦</option>
<option value="温兆伦”>温兆伦</option>
<option value="马冬梅">马冬梅</option>
</datalist>
<details>
<summary>如何走上人生巅峰? </summary>
<p>一步一步走呗</p>
</details>
新增文本标签
文本注音
| 标签名 | 语义 | 单/双标签 |
| ruby | 包含需要注音的文字 | 双 |
| rt | 写注音,rt标签写在ruby的里面 | 双 |
<ruby>
<span>你好</span>
<rt>ni hao</rt>
</ruby>
文本标记
| 标签名 | 语义 | 单/双标签 |
| mark | 标记（建议用mark用于标记搜索结果中的关键字 | 双 |
W3C建议mark用于标记搜索结果中的关键词
新增表单控件
<body>
<audio id="music”src="./小曲.mp3"controls></audio>
<div class="mask” id="mask">
<div class="dialog">
<span>点我登录</span>
<span οnclick="go()">随便听听</span>
</div>
</div>
<script>
function go (){
music.play()
mask.style.display = 'none}
</script>
</body>
<draggable>需要和JS配合使用
<spellcheck>需打开浏览器的拼写检查
