1.什么是HTML5?

     HTML5是一个新的网络标准，目前仍处于发展阶段。他的诞生目的是为了取代现有的HTML4.01和XHTML1.0标准。它希望能够减少互联网富应用（RIA）对flash、Silverlight、JavaFX等的依赖，并且提供能够有效增强网络应用的API。

HTML5的新特性：

（1）canvas绘图；

（2）新增的api包括：canvas，geolocation,websocket , webstorage；

（3）新增的若干标签，如video，audio标签。

2.HTML5和HTML的区别：

　　（1）、在文档类型声明上

　　HTML声明：(!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd")

　　(htmlxmlns="//www.w3.org/1999/xhtml")

　　HTML5声明：(!doctypehtml)

　　（2）、在结构语义上

　　HTML:没有体现结构语义化的标签，通常都是这样来命名的，这样表示网站的头部。

　　HTML5:在语义上却有很大的优势，提供了一些新的HTML5标签比如:article、footer、header、nav、section，这些通俗易懂。

 3.HTML5新的结构标签：

（1）section标签

标签，定义文档中的节。比如章节、页眉、页脚或文档中的其它部分。一般用于成节的内容，会在文档流中开始一个新的节。它用来表现普通的文档内容或应用区块，通常由内容及其标题组成。但section元素标签并非一个普通的容器元素，它表示一段专题性的内容，一般会带有标题。
当我们描述一件具体的事物的时候，通常鼓励使用article来代替section；当我们使用section时，仍然可以使用h1来作为标题，而不用担心它所处的位置，以及其它地方是否用到；当一个容器需要被直接定义样式或通过脚本定义行为时，推荐使用div元素而非section。

（2）article标签

是一个特殊的section标签，它比section具有更明确的语义，它代表一个独立的、完整的相关内容块，可独立于页面其它内容使用。例如一篇完整的论坛帖子，一篇博客文章，一个用户评论等等。一般来说，article会有标题部分（通常包含在header内），有时也会包含footer。article可以嵌套，内层的article对外层的article标签有隶属关系。例如，一篇博客的文章，可以用article显示，然后一些评论可以以article的形式嵌入其中。

（3）nav标签

 

nav标签代表页面的一个部分，是一个可以作为页面导航的链接组，其中的导航元素链接到其它页面或者当前页面的其它部分，使html代码在语义化方面更加精确，同时对于屏幕阅读器等设备的支持也更好。

（4）aside标签

 

aside标签用来装载非正文的内容，被视为页面里面一个单独的部分。它包含的内容与页面的主要内容是分开的，可以被删除，而不会影响到网页的内容、章节或是页面所要传达的信息。例如广告，成组的链接，侧边栏等等。

（5）header标签

标签定义文档的页眉，通常是一些引导和导航信息。它不局限于写在网页头部，也可以写在网页内容里面。

 

通常标签至少包含（但不局限于）一个标题标记（

-

），还可以包括标签，还可以包括表格内容、标识、搜索表单、导航等。

（6）footer标签

 

footer标签定义section或document的页脚，包含了与页面、文章或是部分内容有关的信息，比如说文章的作者或者日期。作为页面的页脚时，一般包含了版权、相关文件和链接。它和标签使用基本一样，可以在一个页面中多次使用，如果在一个区段的后面加入footer，那么它就相当于该区段的页脚了。

（7）hgroup标签

 

hgroup标签是对网页或区段section的标题元素（h1-h6）进行组合。例如，在一区段中你有连续的h系列的标签元素，则可以用hgroup将他们括起来。

例：

 

<</span>hgroup><</span>h1>这是一篇介绍HTML 5结构标签的文章</</span>h1><</span>h2>HTML 5的革新</</span>h2></</span>hgroup>

（8）figure 标签

用于对元素进行组合。多用于图片与图片描述组合。

例：

 

<</span>figure><</span>img src="img.gif" alt="figure标签"title="figure标签" /><</span>figcaption>这儿是图片的描述信息</</span>figcaption></</span>figure>

3.HTML5的语义化标签：

（HTML5与HTML4的区别）例：

HTML4写法：

(body)

(div id="header")头部
    (divid="nav")        //导航
       (ul)

           (li)  (/li)

           (li)  (/li)
           (li)  (/li)
       (/ul)
   (/div)

   (div id="banner")banner
       (img src="" alt=""/)
   (/div)

(/div)
(div  id="content")内容
    (div  id="main")
       (div)  (/div)

       (div)  (/div)

    (/div)
    (div)
       (img src="" alt=""/)
       (span)图片说明(/span)
    (/div)
(/div)

 (div id="footer") 尾部  (/div)

(/body)

 

HTML5写法：

(body)

(header)                                               //头部
   (nav)                                                 //导航
       (ul) 

           (li) html5导航(/li) 
       (/ul) 
   (/nav) 
(/header) 

(sectionid="content2")               //文档中的区段，分区，分块；可以当做div用
   (nav) (/nav) 

   (section) 
       (header) 
           (hgroup) 
               (h2) 主标题(/h2) 
               (h3) 主标题下的副标题1(/h3) 

               (h5) 主标题下的副标题2(/h5) 
           (/hgroup) 
       (/header) 

       (article)                                                              //文章
           (address) 成都市高新区云华路(/address)   //地址

           (time) 2015-08-26(/time)                         //时间
       (/article) 

   (/section) 
   (aside) 侧边栏(/aside)                                        //侧边栏
   (section) 

       (figure)                                                            //媒体对象：图片，视频，音频
           (img src="1r-1130.jpg" alt="img"/) 
           (figcaption) 图片说明(/figcaption)          //用于秒速和定义figure用的        

       (/figure) 

   (/section) 
(/section) 
(footer)                                                                  //尾部

   页尾
(/footer) 

(/body)

 

3.HTML5其他的动能：

（关于form表单）

(body) 

(form action="#"method="get")              //action(表单提交地址)
    //调色盘
    (inputtype="color" id="color"/)(br/)
    (buttontype="button" onclick="getValue( )")getValue(/button)

    //词汇联想：输入提示

   (input type="text" list="myData"/) (br/)     //list="myData"指向datalist 的id
    (datalistid="myData")                                   //datalist 菜单
       (option value="手机")  (/option)
       (option value="iPhone手机")  (/option)
       (option value="小米手机")  (/option)
       (option value="华为手机")  (/option)
       (option value="htc手机")  (/option)
   (/datalist)

    //placeholder，输入框提示
    (inputtype="text" placeholder="请输入用户名"/)(br/)

                                         //改变placeholder内容颜色的方法： 在css中设置    

                                           ::-webkit-input-placeholder{
                                                                                             color:green ;
                                                                                           }

 

   //表单验证
    (inputtype="text" required="required"placeholder="验证不为空"/)

                                          //触发提交按钮时自动验证不能为空

   (inputtype="text" pattern="[1-9]"required="required"placeholder="正则表达式"/)                              //触发提交按钮，自动验证，内容为1-9，且不能为空

  (input type="email"required="required" placeholder="email"/)

                                        //触发提交按钮，自动验证email格式是否正确，且不能为空

   (input type="number"placeholder="数字" max="100"min="50"/)

                                //触发提交按钮，自动验证是否为设定范围内的数字，且不能为空

   (input type="submit"value="Submit"/)     //提交按钮
(/form)

 

(关于多媒体标签):
(audiosrc="sound.mp3" loop="loop"autoplay="autoplay" controls="controls")(/audio)          

              //loop="loop"(表示循环)；autoplay(页面加载时自动播放);controls(控制台)

(video src="movie.webm" loop="loop"autoplay="autoplay" controls="controls"width="200")(/video)      //可设置宽高

总结：相较于HTML4，在对HTML5的使用中对很多效果的实现提供的很大的方便，省

          掉了一些js代码。尤其是对表单提交的验证很实用，而且语义化的标签让代码变

          得简洁。