HTML5新增加的功能

浏览数：12 / 时间：2015年06月09日

1、部分代码代替了以前的代码

例如：

获取焦点

旧：document.getElementById("price");.focus;

新：<input type="text" autofocus name="price" />

2、使用

HTML5之前，要表达一个文档的结构，只能通过<div>来实现；

在HTMl5之后，提供了更明确语义的元素，例如：

<header>...</header>
<nav>...</nav>
<article>
 <section>
  ......
  ......
 </section>
</article>
<aside>...</aside>
<footer>...</footer>

3、基本结构的变化

以前的时候是： <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

现在只需要写： <meta charset=utf-8" /> 就OK了

注意：不要在<html><head>之间插入任何内容！不要在</head><body>之间插入任何内容！不要在</body></html>之间插入任何内容！

4、标签不再区分大小写

5、元素可以省略结束标签【空元素标签不允许开始标签和结束标签分开定义】

空元素语法的元素

  <area>    用于定义图片映射的内部区域
  <base>
  <br>
  <col>
  <command>
  <embed>
  <hr>
  <img>
  <input>
  <keygen>
  <link>
  <mata>
  <param>
  <source>
  <wbr>

可以省略结束标签的元素

 <colgroup></colgroup>
  <dt></dt>
  <dd></dd>
  <li></li>
  <optgroup></optgroup>
  <option></option>
  <p></p>
  <rt></rt>
  <rp></rp>
  <thead></thead>
  <tbody></tbody>
  <tfoot></tfoot>
  <tr></tr>
  <td></td>
  <th></th>

可以省略全部标签的元素

  <html></html>
  <head></head>
  <body></body>
  <tbody></tbody>

6、允许省略属性值的属性

7、允许属性值不使用引号

传统的XHTML按XML规范对属性值进行要求，要求所有的属性值都必须用引号引起来，但是HTML5允许直接给出属性值，即使不放在引号中也是正确的。

注：如果某个属性值中含有空格的话，由于空格容易引起浏览器混涿的属性值，那么就需要用引号将其括起来。

8、HTML5新增的通用属性

contentEditable属性

HTML5为大部分元素都增加了contentEditable属性，如果将该属性设为true，那么浏览器将会允许开发者直接编辑该html中的内容，此处的html元素并不是指那些原本就可以编辑输入的表单元素。

contentEditable属性有一个可继承的特点：如果一个HTML元素的父元素是“可编辑”的，那么它默认也是可以编辑的，除非显式指定 contentEditable="false"。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
 5         <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
 6         <title> contentEditable属性 </title>
 7     </head>
 8     <body>
 9         <!-- 直接指定contentEditable="true"表明该元素是可编辑的 -->
10         <div contentEditable="true" style="width:500px;border:1px solid black">
11         疯狂Java讲义
12             <!-- 该元素的父元素有contentEditable="true"，因此该表格也是可编辑的 -->
13             <table style="width:420px;border-collapse:collapse" border="1">
14                 <tr>
15                     <td>疯狂Java讲义</td>
16                     <td>疯狂Android讲义</td>
17                 </tr>
18                 <tr>
19                     <td>轻量级Java EE企业应用实战</td>
20                     <td>经典Java EE企业应用实战</td>
21                 </tr>
22             </table>
23         </div>
24         <hr/>
25         <!-- 这个表格默认是不可编辑的
26             双击之后该表格变为可编辑状态 -->
27         <table id="target" 
28             ondblclick="this.contentEditable=true;"
29             style="width:420px;border-collapse:collapse" border="1">
30             <tr>
31                 <td>Java</td>
32                 <td>Ruby</td>
33             </tr>
34             <tr>
35                 <td>C/C++</td>
36                 <td>Python</td>
37             </tr>
38         </table>
39     </body>
40 </html>

designMode属性

designMode属性相当于一个全局的contentEditable属性，如果把整个页面的designMode都设置成 on 时，该页面上所有支持contentEditable属性的元素都变成可编辑状态；designMode属性值默认为off。

document.designMode="on" ;

例如：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
 5         <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
 6         <title> designMode属性 </title>
 7     </head>
 8     <body ondblclick="document.designMode=‘on‘;">
 9         <div>aaaa</div>
10         <table style="width:420px;border-collapse:collapse" border="1">
11             <tr>
12                 <td>疯狂Java讲义</td>
13                 <td>疯狂Android讲义</td>
14             </tr>
15             <tr>
16                 <td>轻量级Java EE企业应用实战</td>
17                 <td>经典Java EE企业应用实战</td>
18             </tr>
19         </table>
20     </body>
21 </html>