学习目标
- 1、HTML5发展史
- 2、HTML5语法
- 3、HTML5新增语义化标签及应用场景
- 4、智能表单的使用和规范
一、HTML5发展史
HTML5是Hypertext Markup Language超文本标记语言（HTML）第5次重大修改。
是一个新的网络标准。
HTML5 是 W3C 与 WHATWG 合作的结果。
目标是取代现有的HTML 4.01和XHTML 1.0 标准。
1、HTML5新特性
新增meta属性，实现响应式布局
<meta name="viewport" content="width=device-width, initial-scale=1 ,minimum-scale=1,maximum-scale=1,user-scalable=no“ >
1）、用于绘画的 canvas 元素（用于动画，游戏，以及动态地图）
2）、 多媒体应用如： video 和 audio （减少对外部插件的需求（比如 Flash）
3）、 对本地存储、离线存储的更好的支持（如kindle，记住用户名、密码等）
4）、新增元素，比如 article、footer、header、nav、section等
5）、 新增表单控件，比如 color、date、time、email、url、search等
2.DOCTYPE 声明的改变
<!DOCTYPE html>
写法上更加的简单化(DOCTYPE/charset)
相关面试题(DOCTYPE)
HTML DOCTYPE 的重要性
a)DOCTYPE声明必须是 HTML 文档的第一行，位于 标签之前。
b)DOCTYPE声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令
c)DOCTYPE 3种类型:HTML 4.01 Strict、HTML 4.01 Transitional、HTML 4.01 Frameset
d)如果html中没有加上DOCTYPE可能在不同浏览器出现bug. 所以html加上DOCTYPE是至关重要的.
3、 HTML5语法的改变
1）、可以省略结束标记的元素有
li dt dd p thead tbody tr td th 等
但建议不要省略
2）、可以省略标签属性的引号。但建议不要省略
4、 HTML5标签语义化，
语义化标签就是尽量使用有相对应的结构的含义的Html的标签
结构更好，更利于搜索引擎的抓取（SEO的优化）和开发人员的维护(可维护性更高，因为结构清晰,seo易于阅读)
更有利于特殊终端的阅读(手机，个人助理等）
尽量用有结构含义的,少用无语义的，如,无意义，看不出是什么东西
一看就知道这里面 的是地址,em标签一看就知道这个是强调的内容,区分于不同内容。
怎么判断你的页面是否符合Web标准之一：语义化标签呢？你可以把你的页面暂时去掉样式后看可读性怎么样， 如果这个时候感觉你的页面很乱，那就说明的的页面的语义化标签不怎么样，而如果你的页面去掉样式了感觉依 然不是杂乱无章的，那么，就说明你的页面结构清晰，语义化标签使用比较规范了。
5、 HTML5新增语义化标签
1. header：头标签 定义一个页面或一个区域的头部
2. footer:页脚 定义一个页面或一个区域的底部
3. nav：导航标签
4. menu 菜单
5. main主体
6. section：独立的内容区块 定义一个区域
7. aside:侧边栏 标记定义页面内容部分的侧边栏
8. article:文章标签 定义一篇文章
9. hgroup 标记定义文件中标题的相关信息
10. address:地址标签
11. mark:标记，内容显示背景颜色，可以修改
12. time 表示日期或时间，也可以同时表示两者，相当于span
13. canvas标记定义画布
14. figure+figcaption定义一组媒体内容以及它们的标题
表示一段独立的流内容，一般表示文档主体流内容中的一个独立单元。
figcaption 表示 figure 的标题。从属于 figure ,并且,figure 中只能放置一个figcaption
6、 HTML5新增 多媒体 标签
a) video/audio
b) source 标记定义媒体资源
允许您规定两个视频/音频文件共 浏览器根据它对媒体类型或者编解码器的支持进行选择。
c) embed 标记定义外部的可交互的内容或插件 比如flash
注：HTML5的多媒体标签的出现意味着多媒体的发展以及支持不使用插件的情况下即可操作媒体文件，极大地提升了用户体验
HTML5能在完全脱离插件的情况下播放音视频
但是不是所有格式都支持。
mpeg4 / webm / ogg
7、 废除的元素
1）可以用css替代的元素
big center font u del 等
2）不再使用frame框架，由于框架对网页可用性存在负面影响。所以废除。只可以用iFrame 或， 用服务器方，在同一个页面加载不同页面。
<iFrame scrolling=“yes” frameborder=“0” ></iFrame>
二、智能表单的使用和规范
1、 新增的type类型
Search/tel/url/email/number/range/color/Datetime/date/month/week/time/datetime-local/hidden
2、新增的表单属性的语法及应用
required:表示该项是必填项，如果表单未填写，会弹出相应的提示信息‘’；
placeholder:占位符，当获取焦点或者输入框中的值输入为空时显示，否则显示自己填写的内容
autofocus：进入该页面自动获取焦点，原则上只允许设置一个，如果设置多个，则只有第一个有效果
autocomplete：是否在双击输入框的时候自动补全，默认值为on，另一个值为off
multiple:支持用户输入多个此类型的文本，以逗号隔开，每个文本均会进行验证,适用于类型type为email属性值和file属性值
pattern：正则表达式,一般和title属性配合说明该项填写的内容
min:最小值，适用于属性type为number和range
max:最大值，适用于属性type为number和range
step:间隔
list属性：结合datalist元素使用
取消验证：可以对form表单添加novalidate属性，即使form表单中的input添加了required，也将不进行验证
3、新增的表单元素
1）、Datalist ：选项列表
input中输入list属性，属性值为该标签的id值，标签中子标签使用option，设置value和label
例：
<input type=“text” list=“id名" />
<datalist id=“id名">
<option label=“提示信息” value=“值“ >
<option label="提示信息" Value="值“ >
</datalist>
提示：option 元素永远都要设置 value 属性。
2）output:表示不同类型的输出，比如脚本的输出
注：必须从属于某个表单。即，必须将它书写在表单内部，或对它添加form属性。
<form οninput="x.value=parseInt(a.value)+parseInt(b.value)" >
<input type="range" id="a" value="50" min="0" max="100"/> +
<input type="number" id="b" value="50"/>=
<output name="x" for="a b"></output>
</form>
