1、语义化
语义化就是用合理正确的标签来展示内容
语义化优点：
①易于用户阅读，样式丢失的时候能让页面呈现清晰的结构
②有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重
③方便其他设备解析，如盲人阅读器根据语义渲染网页
④有利于开发和维护，语义化更具可读性，代码更好维护，与CSS3关系更和谐
主体结构标签：
1.<header> 定义文档或者文档的部分区域的页眉，应作为介绍内容或者导航链接栏的容器。
2. <nav>描述一个含有多个超链接的区域，该区域包含跳转到其他页面或页面内部其他部分的链接列表。
3. <main>定义文档的主要内容，该内容在文档中应当是独一无二的，不包含任何在文档中重复的内容，比如侧边栏，导航栏链接，版权信息，网站logo，搜索框（除非搜索框作为文档的主要功能）。
4. <aside> 元素表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分且可以被单独的拆分出来而不会影响整体。通常表现为侧边栏或嵌入内容。
5. <footer>定义最近一个章节内容或者根节点元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。
6.<section>表示文档中的一个区域（或节），比如，内容中的一个专题组。
<article>和<action>就是<article>比<section>更具有独立性、完整性。可通过该段内容脱离了所在的语境，是否完整、独立来判断。
2、新标签新特性
新block标签：header,footer,main,aside,article,section,nav,hgroup （主要8个）。
新表单标签：calendar、date、time、email、url、search
媒介标签： video 和 audio
绘画标签： canvas 、svg绘图
视频video标签
定义视频，比如电影片段或其他视频流。
支持MP4,WebM,Ogg三种格式
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持 HTML5 video 标签。
</video>
controls：设置或返回音频/视频是否显示控件（比如播放/暂停等）
autoplay：视频在就绪后马上播放
muted：设置值后，音频会初始化为静音
poster：规定视频正在下载时显示的图像，直到用户点击播放按钮。
preload：如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
src：要播放的视频的 URL。
width：设置视频播放器的宽度。
音频audio标签
定义声音，比如音乐或其他音频流。
支持Mp3,Wav,Ogg三种格式
autoplay：如果出现该属性，则音频在就绪后马上播放。
controls：如果出现该属性，则向用户显示音频控件（比如播放/暂停按钮）。
loop：如果出现该属性，则每当音频结束时重新开始播放。
muted：如果出现该属性，则音频输出为静音。
preload：规定当网页加载时，音频是否默认被加载以及如何被加载。
src：规定音频文件的 URL。
新的表单元素：datalist /progress/meter/output
1.datalist---建议列表
<datalistid="lunchList">
<option>京酱肉丝</option>
<option>锅包肉</option>
<option>鱼香肉丝</option>
<option>青椒肉丝</option>
<option>地三鲜</option>
</datalist>
请输入您需要的午餐：<input type="text" name="lunch" list="lunchList"/>
2. progress--- 进度条
3.meter:度量衡/刻度尺/，用于标示一个所处的范围：不可接受（红色）/可以接受（黄色）/非常优秀（绿色）
<meter min="可取的最小值" max="可取的最大值" low="合理的下限值" high="合理的上限值" optimum="最佳值" value="当前值" ></meter>
input的新属性： id/class/title/type/value/name/style/readonly/disabled/checked/
表单元素的新属性：
1）placeholder：占位字符 作为提示不可提交
<input value=“tom” placeholder=“请输入用户名”/>
2）autofocus：自动获取输入焦点 (不用点一下就可以输入只第一个input设置的才有效)
<input autofocus>
3） multiple : 允许输入框中出现多个输入值用逗号分隔 a@dn.com，b@dn.com
<input type="email" name="emails" multiple>
4)form :用于把输入域放置到FORM外部
<form id="f5"></from>
<input form="f5">
5)required :必填项，内容不能为空
6）maxlength：指定字符串的最大长度
7）minlength：指定字符串的最小长度
8）max：指定数字的最大值
9）min：指定数字的最小值
10）pattern：指定输入必须符合的正则表达式
3、input和textarea的区别
1.<taxtarea>标签是成对的，必须要有结束标签；<input>是单个标签，没有结束标签
2.设置初始内容时，input放在value属性中：<input type="text" value="这是内容">， textarea放在起止标签内：<textarea>这是内容</textarea>
3.textarea使用 rows、cols控制多行结构，input 只是单行
4.<textarea>没有type属性；<input>有多种type来满足表单与用户的数据交互
5.<textarea>的值是纯文本；<input>的值根据类型不同而不同
4、用一个div模拟textarea的实现
<textarea> 标签定义多行的文本输入控件。
1.给div添加（内容可编辑）contenteditable=true
2.给元素设置user-modify: read-write-plaintext-only （既可编辑，也只能输入纯文本）
5、移动设备忽略将页面中的数字识别为电话号码的方法
在<head></head>里面加上：<meta name = "format-detection" content = "telephone=no">
format-detection的中文意思是“格式检测”，有以下几种设置：
<meta name = "format-detection" content = "telephone=no"> //禁止把数字转换为拨号链接
<meta name = "format-detection" content = "address=no"> //禁止把地址跳转至地图
<meta name = "format-detection" content = "email=no"> //禁止识别邮箱自动发送邮件
<meta name = "format-detection" content = "telephone=no,adress=no,email=no"> //合并写法
