HTML5语法

版本兼容性

可以省略标记的元素

1. 不允许写结束标记的元素有：area,base,br,col,command,embed,hr,img,input,keygen,link,meta,param,source,track,wbr。
2. 可以省略结束标记的元素有：li,dt,dd,p,rt,rp,optgroup,option,colgroup,thead,tbody,tfoot,tr,td,th。
3. 可以省略全部标记的元素有：html,head,body,colgroup,tbody。

具有布尔值的属性

对于具有boolean值的属性，如disabled与readonly等，当只写属性而不指定属性值时，表示属性值为true；如果想要奖属性值设为false，可以不使用该属性。另外，要想奖属性值设定为true，也可以将属性名设定为属性值，或将空字符串设定为属性值。例如：

<!--只写属性，不写属性值，代表属性为true-->
<input type="checkbox" checked>
<!--不写属性，代表属性为false-->
<input type="checkbox">
<!--属性值=属性名，代表属性为true-->
<input type="checkbox" checked="checked">
<!--属性值=空字符串，代表属性为true-->
<input type="checkbox" checked>

省略引号

属性值两边既可以用双引号，也可以用单引号。HTML5在此基础上做了一些改进，当属性值不包括空字符串，<，>，=，单引号，双引号邓自负是，属性值两边的引号可以省略。例如：

<input type="text">
<input type='text'>
<input type=text>

HTML5元素

新增的结构元素

元素名称	说明
header	标记头部区域的内容(用于整个页面或页面中的一块区域)
footer	标记脚部区域的内容(用于整个页面或页面中的一块区域)
setion	Web页面中的一块区域
article	独立的文章内容
aside	相关内容或者引文
nav	导航类辅助内容

新增功能元素

• hgroup元素：
  用于对整个页面或页面中一个内容区块的标题进行组合。例如：

<hgroup>...</hgroup>

在HTML4中表示为：

<div>...</div>

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

<figure>
       <figcaption>标题</figcaption>
       <p>内容...</p>
</figure>

在HTML4中表示为：

<dl>
        <h1>标题</h1>
        <p>内容....</p>
</dl>

• video元素：
  定义视频，比如电影片段或其他视频流。例如：

<video src="movie.ogg" controls="controls">video元素</video>

在HTML4中表示为：

<object type="video/ogg" data="movie.ogv">
      <param name="src" value="movie.ogv">
</object>

• audio元素：
  定义音频，比如音乐或其他音频流。例如：

<audio type="someaudio.wav">audio元素</audio>

在HTML4中表示为：

<object type="application/ogg" data="someaudio.wav">
        <param name="src" value="someaudio.wav">
</object>

• embed元素：
  用来插入各种多媒体，格式可以是MIDI,WAV,AIFF,AU,MP3等。例如：

<embed src="horse.wav"/>

在HTML4中表示为：

<object data="flash.swf" type="application/x-shockwave-flash></object>

• mark元素：
  主要用来在视觉上向用户呈现那些需要突出显示或高亮显示的文字。mark元素的一个比较典型的应用就是在搜索结果中向用户高亮显示搜索关键词。例如：

<mark></mark>

在HTML4中表示为：

<span></span>

• time元素：
  表示日期或时间，也可以同时表示两者。例如：

<time></time>

在HTML4中表示为：

<span></span>

• canvas元素：
  表示图形，如图表和其他图像。这个元素本身没有行为，仅提供一块画布，但它把一个绘图API展现给客户端JavaScript,以使脚本能够把想绘制的东西绘制到这块画布上。例如：

<canvas id="myCanvas" width="200" height="200"></canvas>

在HTML4中表示为：

<object data="inc/hdr.svg" type="image/svg+xml" width="200" height="200"></object>

• output元素：
  表示不同类型的输出，比如脚本的输出。例如：

<output></output>

在HTML4中表示为：

<span></span>

• source元素：
  为媒介元素(比如<video>和<audio>)定义媒介资源。例如：

<scource>

在HTML4中表示为：

<param>

• menu元素：
  表示彩蛋列表。当希望列出表单控件时使用该标签。例如：

<menu>
        <li><input type="checkbox"/>Red</li>
        <li><input type="checkbox"/>blue</li>
</menu>

在HTML4中，menu元素不被推荐使用。

• ruby元素：
  表示ruby注释（中文注音或字符）。例如：

<ruby>汉<rt><rp>(</rp>han'<rp>)</rp></rt></ruby>

• rt元素：
  表示字符（中文注音活字符）的解释或发音。例如：

<ruby>汉<rt> han'</rt></ruby>

• rp元素：
  在ruby注释中使用，以定义不支持ruby元素的浏览器所显示的内容。例如：

<ruby>汉<rt><rp>(</rp>han'<rp>)</rp></rt></ruby>

• wbr元素：
  表示软换行。wbr元素与br元素的区别是br元素表示此处必须换行；而wbr元素的意思是浏览器窗口活父级元素的宽度足够宽时(没必要换行时)不进行换行，而当宽度不够时，主动在此处进行换行。
• command元素：
  表示命令按钮，如单选按钮，复选框或按钮。例如：

<command onclick="ucut()" label="cut">

• details元素：
  表示用户要求得到并且可以得到的细节信息，可以与summary元素配合使用。summary元素提供标题或图例。标题是可见的，用户单机标题时，会显示出细节信息。summary元素应该会死details元素的第一个子元素。例如：

<details>
        <summary>HTML5</summary>
        For the latest updates form the HTML WG.
</details>

• datalist元素：
  datalist元素表示可选数据的列表，与input元素配合使用，可以制作出输入值的下拉列表。例如：

<datalist></datalist>

• datagird元素：
  表示可选数据的列表，它以树形列表的形式来显示。例如：

<datagird></datagird>

• keygen元素：
  表示生成密钥。例如：

<keygen>

• progress元素：
  表示运行中的进程，可以使用progress元素来显示JavaScript中耗费时间的函数的进程。例如：

<meter></meter>

• email：表示必须输入E-mail地址的文本输入框。
• url：表示必须输入URL地址的文本输入框。
• number：表示必须输入数值的文本输入框。
• range：表示必须输入一定范围内数字值的文本输入框。
• Date Pickers：
  HTML5拥有多个可供选取日期和时间爱你的新型输入文本框：