谈谈html5新增的元素及其他功能

    相信大家一开始学习web时看到html5就自然想到html,就算也没学过html,就好像听闻过小米2s就自然也熟悉小米3红米。不管是技术还是产品都是站在前辈的肩膀上发展起来的,正因此若是熟悉html,对于html5的学习就相当于在html这个容器里继续扔新的东西进去,哈哈哈,好像废话多了。

     目前,web已经悄然引来html5的时代了,下面揭晓html5成功背后的面纱。

 1.首先,html5语法发生了什么变化?!

   1.1内容类型(祖宗不变)

       扩展名:.html或htm

        文件类型:text/html

   1.2DOCTYPE声明的简化

    从繁琐的声明:<!DOCTYPE html PUBLIC "-//W3C/DTD XHTML 1.0 Transitional//EN" "HTTP://www.w3.org/TR/xhtmll/DTD/xhtnll-transitional.dtd"> 

敲完之后我自己都晕了,别怕以后html5不会让你晕了,现在声明只需要这样:

 <!DOCTYPE html>

更重要的是html5在使用工具时还可以加入SYSTEM识别符

<!DOCTYPE html SYSTEM"">

  1.3指定编码字符

  不仅可以使用原来的指定方式<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>

  还可以使用简化版<meta charset="UTF-8"/>

2.兼容html的处理

  2.1可省略的标记

     ---不允许写结束标记,</>形式不可以写成<></>(br还可以<br>)

         这样的元素有 area base br col command embed hr img input keygen  link meta param source track                 wbr 

   ---可以省略结束标记:li dt dd p tr optgroup option colgroup thead tbody tfoot tr td th-----建议不要省略,语法没错,但会影响文本的效果。

   ---都省略的有:html head body colgroup tbody

   (colgroup在上面的两项都出现,本人也费解)

 2.2具有布尔值属性---真假问题这里就不码了,可以参考贺春雷《html+css+JavaScript》

 3.新增的元素

   网页设计的分层,之前都是用<div>,设置ID属性指定功能,现在直接用属性值当做一个元素,设置它的功能,道理很简单,既然都可以到达目的地,那何必要选择弯路。

 例如<header>代替<div id="header">

header--显示头部信息

article---定义独立内容,常用于用户评语或博客条目

<div>
<p>当时间在你的回忆里流逝时...</p>

</div>
<article style="border:1px solid blue;">
    <p>我们慢慢苏醒</p>
    </article>

section---节,例如文章的章节、页眉、页脚等,该标记中还新增一个cite属性,引用资源的URL

nav---导航链接,在一个html中可以有多个nav

<nav>
        <a href="#">首页 </a>
        <a href="#">图片 </a>
        <a href="#">视频 </a>
        </nav>

 hgroup---适用于多标题文档,对标题进行组合,可以理解hgroup相当一个容器,里面包含有正副标题

footer---眉脚,页面底部,footer元素内使用address元素

4.新增的块级语义元素

   aside定义所处的内容之外的内容,但与附近内容有关(注释、引用、提示)

  figure 定义媒介内容

 dialog定义对话框或窗口,带有open属性,跟用户互动

5.行内语义元素

  mark元素标记,相当于荧光笔在纸上标记文字

  time元素定义时间(24小时制)、日期

 meter元素定义度量衡

 process元素定义运行中的进度

6.其他新增元素

 video、audio、source、embed、canvas、bdi、command、datalist、details、keygen、output、rp、rt、ruby、track、summary

暂时写到这里,首次发博不足之处欢迎强烈砸砖~

原文地址:https://www.cnblogs.com/yflbk-2016/p/5339519.html