（一）HTML5标签与属性

一、Ｈ５的优化

2.Ｈ５中一些新的属性代替了Ｈ４中复杂的Javascript代码；

2.H5中新出现的结构标签代替了H4中的div划分页面结构的功能。

二、H5与H4的区别

1.ContentType【text/html】和扩展名不变；

2.DOCTYPE声明刻意不使用版本声明;

3.指定字符编码时直接对<meta  charset="utf-8">;

三、H5确保兼容性

1.元素的标记可以省略；【不允许写结束标记、可以省略结束标记、开始和结束标记都可以省略】

2.具有Boolean值的属性；【只写属性而不写值，默认为true；若想将属性值设为false，可以不写该属性；想把属性值为true，可以将属性值设为属性名，也可让其为空字符串】

3.省略引号。【当属性值不包括“<”,">","=",单引号，双引号时，可以省略引号】

四、新增元素

（1）新增的结构元素

1.section：

   表示页面中的一个内容区块，可与h1~h6结合使用，表示文档结构；

2.article：

   表示页面中的一块与上下文不相干的独立内容，比如博客中的一篇文章；

3.aside：

   表示article元素内容之外的，与article元素内容相关的辅助信息；

4.header：

   表示整个页面的标题的一个内容区块；

5.footer：

   表示创作者的姓名、创作日期、联系信息的一个内容区块

6.nav：

   表示页面中导航链接的部分；

7.figure：

   表示一段独立的流内容，一般表示文档主体流内容中的一个独立单元，使用figcaption元素为figure元素组添加标题；

8.main：

   表示网页中的主要内容。即与网页标题或应用程序中本页面主要功能直接相关的内容。

（2）新增的其他元素

1.video：

   定义视频；

2.audio：

   定义音频；

3.embed：

   插入各种多媒体；

4.mark：

   突出或高亮显示文字，如在搜索结果中向用户高亮显示搜索关键词；

5.progress：

   表示运行中的进程，如显示JavaScript中耗费时间的函数的进程；

6.meter：

    表示度量衡，必须已知最大和最小值；

7.time：

   用于表示日期或时间；

8.ruby：

   表示ruby注释；

9.rt：

   表示ruby注释中字符的解释或发音；

10.rp：

   当ruby元素不被浏览器支持时，要显示的内容；

11.wbr：

   表示软换行，浏览器窗口或父级元素不够宽是才进行换行；

12.canvas：

   该元素仅仅提供一块画布，把一个绘图API呈献给客户端的JavaScript，用脚本进行绘制；

13.command：

   表示命令按钮，如单选按钮，复选框或按钮；

14.details：

   用户要求得到并且可以得到的细节信息，与summary元素配合使用，summary提供标题或图例，点击标题才会显示细节信息；

15.datalist：

   可选数据列表，与input元素配合使用，制作可输入值的下拉列表；

16.datagrid：

   可选数据的列表，以树形列表的形式展示；

17.keygen：

   表示生成密钥；

18.output：

  表示不同类型的输出，如脚本的输出；

19.source：

  为媒介元素（audio或video）定义媒介资源；

20.menu：

  表示菜单列表，当需要列出表单控件时使用该标签；

21.dialog：

  表示对话框。

（3）新增的Input元素的类型

1.email：

2.url：

3.number：

4.range：输入一定范围内数字值的文本框；

5.date：日、月、年

  month：月、年

  week：周、年

  time：小时、分钟

 datetime：时间、日、月、年【utc时间】

 datetime-local：时间、日、月、年【本地时间】

五、废除元素

1.废除能使用CSS代替的元素，h5提倡把画面展示性功能统一放在CSS样式表编辑；

2.不在使用frame框架，只支持iframe内联框架；

3.废除只有部分浏览器支持的元素；

4.其他被废除的元素是可以被h5中元素代替的元素。

六、新增属性

（1）表单相关属性

1.对input（type=text）、select、textarea、button指定的属性：

   autofocus：让元素在画面打开时自动获得焦点；

2.对input（type=text）、textarea指定的属性：

   placeholder：进行输入提示；

   required：提交时进行检查，内容不为空；

   SelectionDirection：当用户在input与textarea元素中用鼠标选取部分文字时，可通过该属性获取文字的选取方向；

3.对input、output、select、textarea、button、fieldset指定的属性：

   form：声明它属于哪个表单，然后把它放在页面上的任何位置，而不是表单内；

4.对input元素新增的几个属性：

   autocomplete：规定是否使用输入字段的自动完成功能；

   min，max：规定输入的数据或日期的范围；

   multiple：允许一次上传多个文件；

   pattern：规定输入字段的值的模式或格式；

   step：输入数据的合法数据间隔。

5.对input、button新增的几个新属性：【适用于type=submit,type=image】

   formaction：覆盖表单的action属性；

   formenctype：覆盖表单的enctype属性；

   formmethod：覆盖表单的method属性；

   formnovalidate：覆盖表单的novalidate属性，使用该属性，提交时不进行验证；

   formtarget：覆盖表单的target属性。

12.对fieldset指定的属性

   disabled：把它的子元素设为无效状态。

13.对input、button、form指定的属性：

   novalidate：该表单被无条件提交；

14.为所有可以使用标签的表单元素指定了属性：

   labels：属性值是一个NodeList对象，代表该元素所绑定的标签元素所构成的集合；

15.control：可以在标签内部放一个表单元素，通过control属性进行访问；

16.对复选框指定了该属性：

   indeterminate：说明复选框处于尚未明确是否选取状态；

17.对image类型的input元素指定了属性：

   height、width

18.对于textarea指定了属性：

   maxlength：输入文字的最大个数；

   wrap：当表单提交时，是否在文字换行处添加换行符。

（2）链接相关属性

1.为a和area指定了属性：【下列属性只能在href属性存在时使用】

    media：规定目标URL是为什么类型的媒介、设备进行优化的；

   download：让用户下载目标连接所指向的资源，而不是直接打开目标连接；

   ping：

2.为area指定了属性：

   hreflang：规定被连接文档的语言；

   rel：规定当前文档与被连接文档之间的关系；

3.为link元素指定了属性：

   sizes：指定关联图标的大小；【与icon元素结合使用】

4.为base增加了target属性：

（3）其他属性

1.为ol元素增加了start、reversed属性；

2.为meta增加了charset属性；

3.为menu增加了属性：

  type：可以让菜单以上下文菜单、工具条、列表菜单三种形式展现；

  label：为菜单定义一个可见的标注；

4.为style元素增加了属性：

   scoped：规定样式的作用范围；

5.为script元素增加了属性：

   async：定义脚本是否异步执行；

6.为html元素增加了属性：

   manifest：开发离线web应用程序时与API结合使用，定义一个URL，在这个URL上描述文档的缓存信息；

  7.为iframe增加了属性：

   sandbox：对iframe元素内容是否允许显示、表单是否允许被提交、脚本是否允许被执行做了一些限制；

   seamless：规定iframe看上去像是包含文档的一部分；

   srcdoc：规定iframe中显示的页面的html内容。

七、废除属性

1.可以使用CSS样式代替的属性；

2.多与属性；

3.用rel代替了link，a元素的rev属性；

4.在被连接资源中使用HTTP Content-Type头元素代替link，a元素的charset【td元素的scope属性】；

5.使用a元素连接到较长的描述代替了img,iframe的longdesc属性；

6.使用id代替了img的name属性；

7.使用data与type属性类调用插件，使用param属性设置参数；

8.只为某个表单域使用scheme；

9.使用name与value属性，不需要声明值的MIME类型；

八、全局属性

1.contentEditable：

  允许用户编辑元素中的内容；

2.designMode：

  指定整个页面是否可编辑；当页面可编辑是，所有支持contentEditable的元素都会变成可编辑状态；该元素的属性只能在JavaScript中进行修改；

3.hidden：

  通知浏览器不渲染该元素，使该元素处于不可见状态；

4.spellcheck：

  对用户输入的文本内容进行拼写和语法检查；

5.tabindex：

  对页面的每一个控件进行遍历时，每一个控件的tabindex属性代表它是第几个访问到的；

  默认情况下，只有连接元素与表单元素可以按键获得焦点，如果对其他元素使用tabindex属性，也能让该元素获得焦点；

  可以把元素的tabindex值设为-1，可以通过编程让元素获得焦点，但是按tab键就不能获得焦点，这个应用很重要；

九、新增事件

1.window对象body元素：

   beforeprint：即将开始打印时触发；

   afterprint：打印完毕时触发；

   resize：浏览器窗口大小发生改变时触发；

   error：页面加载出错是触发；

   offline：页面变为离线状态时触发；

   online：页面变为在线状态时触发；

   pageshow：页面加载时触发；

   beforeunload：当前页面被关闭时触发；

   hashchange：当页面URL地址字符串中的哈希部分发生改变时触发；

2.任何元素：

   mousewheel：当用鼠标指针悬停在元素上并滚动鼠标滚轮时触发；

3.任何容器元素：

   scroll：当元素滚动条被滚动时触发；

 4.input、area元素：

   input：当用户修改文本框中内容时触发；

5.form元素：

   reset：当用户按下表单中type为submit的元素时触发。