『前端学习笔记』 HTML5 新特性

参考视频：【极客学院】Web前端开发教学 - 第一部分：H5+CSS+JS

参考文档：HTML 教程 W3school

XHTML规范

• 文档方面：

必须定义文档类型（DTD）和你的名字空间

• 标签方面：

所有标签均要小写，合理嵌套，关闭，ID不能重复
标签属性要有值，属性值要加双引号且不能为空
图片一定要加alt属性
表格标签不准使用height属性，可以使用width属性（但单元格可以使用）
禁止使用<embed><iframe>标签
链接不准使用target属性

• 内容模型：

body form blockquote仅能包含块状元素
文本 图像 链接等内联元素不允许直接裸露在body中，必须被p或者div等块状元素包含
内链元素不能包含块状元素

• 其他方面：

注释中禁止使用"-----"
所用特殊符号用编码表示（在DW代码里"&" 会自动引用）

HTML5语法变化

1、标签不再区分大小写
2、元素可以省略结束标签
（1）空元素语法的元素：area、base、br、col、command、embed、hr、img、input、keygen、link、mata、param、source、wbr
（2）可以省略结束标签的元素：colgroup、dt、dd、li、optgroup、p、rt、rp、thread、tbody、tfoot、tr、td、th
（3）可以全部省略标签的元素：html、head、body、tbody
3、允许省略属性值的属性
4、允许属性值不使用引号
5、添加了布尔值，类似checked，selected

HTML5元素与属性变化

参考文档：HTML5新增的标签和废除的标签

参考文档：html5新增及废除属性

新增的元素

• 新增的结构元素：

section、article、aside、header、hgroup、footer、nav、figure

• 新增的其他元素：

video、audio、embed、mark、progress、meter、time、ruby、rt、rp、wbr、convas、command、details、datagrid、keygen、output、source、menu

• 新增的input元素的类型：

email、url、number、range、Date Pickers

废除的元素

能使用CSS替代的元素：basefont、big、center、font、s、tt、u等
不再使用frame框架
只有部分浏览器支持的元素
其他被废除的元素

新增的属性

表单相关的属性
链接相关的属性
其他属性

废除的属性

删除了一些可以用css代替的属性，多余属性和其他属性。

HTML5新特性详解

全局属性

contentEditable

布尔类型，有true和false两种状态。
用来表示是否允许编辑内容。

继承：如未指定状态，则由父级/继承决定。

• 普通写法：

  <ul contenteditable="true">
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>

• 利用HTML5布尔特性写法：

  <ul contenteditable>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>

同样，也可以是空字符串contenteditable=""。

• 代码结果：
  
  均为可编辑状态。
  
  

designMode

布尔类型，有on和off两种状态。
只允许在js脚本中使用。
用来表示整个页面是否可编辑。

hidden

布尔类型。
使浏览器不渲染（内容不可见）。

  <ul hidden>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>

spellcheck

布尔类型，有true和false两种状态。
用于输入框的拼写检查。

<input type="text" spellcheck="true">

tabindex

int值，一般取正数。
使用tab建遍历，用于指定遍历过程中第几个被访问到。
主要用于链接和表单类型。
也可以给原本不能获取tab定位的元素添加tabindex，来使用tab访问。比如列表。

 <a href="index.html" tabindex="2">1</a><br/>
 <a href="index.html" tabindex="3">2</a><br/>
 <a href="index.html" tabindex="1">3</a><br/>

• 代码结果：
  
  
  

• 使用三次tab结果：