关于HTML5
时间:2018/4/13 9:35:53    浏览次数:1816 来源:本站作者:胖子大卫

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代码。尤其是对表单提交的验证很实用,而且语义化的标签让代码变

          得简洁。

Contact联系我们
告诉我们您想要的吧!我们为当地客户提供专业、及时的服务。

地址:云南省昆明市白云路368号

电话:400-871-8716     (工作时间:09:00-18:00(周一至周五))

何总:23592693

李总:53815112