HTML5学习01-基础讲解、新特性

一、基础讲解

二、新特性

三、兼容性

• HTML5为了保证兼容前面各个版本，语法达到了最大程度的兼容设计。
  （1）、不允许写结束标记的元素： area、base、br、col、command、embed、hr、img、input、keygen、link、meta、param、source、trach和wbr。

  （2）、可以省略结束标记的元素：li、dt、dd、p、rt、optgroup、option、colgroup、thead、tbody、tfoot、tr、dt和th

  （3）、可以省略全部标记的元素： html、head、body、colgroup和tbody

注意1：不允许写结束标记的元素，它是不允许使用开始标记和结束标记包括起来的形式，只允许<元素/>的形式来进行书写，例如<**br>…..<**br/>就是错误的写法。

注意2：可以省略全部标记的元素，是指即使标记被省略，该元素还是以隐式的方式存在。例如（body可以省略不谢，但是在文档结构中还是存在的。可以使用decument.body来访问）。

---

四、新增的元素

一、新增的结构

1、内嵌：在文档中添加其他类型的内容，例如audio、video、canvas、和iframe等

2、流  ：在文档和应用的body中使用的元素，如from、h1和small等

3、标题：段落标题，例如h1、h2和hgroup

4、交互：与用户交互的内容，如音频和视频控件、button和textarea等

5、元素据：同城出现在web中的head中，设置页面其他部分的表现形式，例如script、style、和title等

6、短语： 文本和文本标记元素，如mark、kdb、sub和sup等。



注意:所有类型的元素都可以通过CSS样式来设定，虽然canvas、audio、video元素在使用时往往需要其他api来配合，但是他们同样也可以直接使用。

二、新增的功能元素

1、《hgroup》:用于对整个页面或者页面一个内容区块的标题进行组合。不过现在还是很多用div元素

<hgroup>等同于<div>
<hgroup>...</hgroup>


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

//H5中写法：
<figure>
    <figcaption>标题</figcaption>
    <p>内容...</p>
</figure>

//H4中写法：
<dl>
    <h1>标题</h1>
    <p>内容...</p>
</dl>




3、video元素：定义视频、比如电影片段或者其他视频流


//H5中的写法：
<video src="movie.ogg" content="controls">viedio元素</video>

//H4中的写法：
<object type="video" data="movie.ogv">
    <param name="src" value="movie.orv">
</object>


4、audio元素 ：定义音频，比如音乐

//H5中的写法：
<audio src="someadio.wav" >audio元素</audio>

H4中的写法：
<object type="application/ogg" data="someaudio.wav">
    <param name="src" value="someaudio.wav">
</object>


5、embed元素：用于插入各种多媒体，格式可以是MIDI、WAV、ALFF、AU、MP3等。

//H5中的写法：
<embed src="horse.wav" />

//H4中的写法：
<object data="flash.swf" type="application/x-shockwave-flash"> </object>


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

//H5中的写法：
<mark></mark>

//H4中的写法：
<span></span>




7、time元素：表示日期或者时间，可以同时表示两者

//H5中的写法：
<time></time>

//H4中的写法：
<span></span>




8、canvas元素：绘制图形，它仅提供一块画布，但它把一个绘图API展现给客户端js。使用脚本能够吧想绘制的东西绘制到这块画布上。



//H5中的写法：
<canvas id="myCanvas" width="200" height="200"></canvas>

//H4中的写法：
<object data="inc/hdr.svg" type="image/sva=xml" width="200" height="200"></object>




9、output元素：表示不通类型的输出，比如脚本的输出。

//H5中的写法：
<output></output>

//H4中的写法：
<span></span>



10、source元素：为媒介元素（比如video）


//H5中的写法：
<source>

//H4中的写法：
<param>



11、menu元素：表示菜单列表。当希望列出表单控件时使用该标签。


//H5中的写法：
<menu>
    <li> <input type="checkbox"/> 选择1</li>
    <li> <input type="checkbox"/> 选择2</li>
</menu>

//H4中的写法：
在h4中不推荐使用menu



12、ruby元素:表示ruby注释（中文注音或字符）；

13、rt元素：表示字符的解释或者发音

14、rp元素:在ruby中使用，以定义不支持ruby元素的浏览器所显示的内容。

15、wbr元素：表示软换行，wbr元素与br元素的区别是，


注意：
br元素：表示此处必须换行；
wbr元素：的意思是浏览器窗口或父级元素足够宽时（也就是没必要换行时）不进行换行，而当宽度不够时，主动在此处进行换行



16、command元素：表示命令按钮，如单选、复选或者按钮。

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

18、datagrid元素：表示可选是护具列表，它以树形的形式来显示。

19、keygen元素：生产秘钥

20、progress元素：表示运行中的进程，进度条。

21、email：表示必须输入E-emil地址的文本输入狂

22、url：表示必须输入URL的文本输入框

23、number：表示必须输入number的文本输入框

24、range：表示必须输入一定范围数字值的文本框

25、Date Pickers：H5拥有多个可供选取日期和时间的新型输入文本狂。


data ：选取日、年、月

mouth：选取月和年。

week：选取周和年

time：选取时间（小时和分钟）

datetime：选取时间、日、月、年（UTC时间）。

datetime-local-选取时间、日、月、你那（本地时间）。

三、废除的元素

能使用css替代的元素

对于applet、bgsound、blink和marquee等元素，由于只有部分浏览器支持，特别是bgsound和marquee，只能被IE支持，所以在H5中废除

其中applet元素可由embed元素或者objec元素替代，

其中bgsound元素由audio元素替代。

其中marque元素由js编码方式替代。



其他被废除的元素

使用ruby替代rb

使用abbr替代acronym

使用ul元素替代dir元素

使用form与input元素组合方式替代isindex元素


使用pre元素替代listing元素


使用code元素替代xmp元素


使用GUIDS替代nextid元素。