HTML5总结——标签变化

新增标签

1. 结构标签

结构标签（块状元素）——有意义的div

 
    标记定义一篇文章

  
    定义一个页面 或 一个区域的头部
 
 
     标记定于一个页面或一个区域的底部

  
       标记定义导航链接

 
    标记定义一个区域

 
      标记定义页面内容部分的侧边栏
 
 
     标记定义文件中一个区块的相关信息，用它来包裹h1、h2... 
                     
 
     标记定义一组媒体内容以及它们的标题

  标记定义figure元素的标题

 
     标记定义一个对话框（会话框）类似微信 

实例：

2. 多媒体标签

（IE9+）

属性：

    loop  循环播放
   
autoplay  自动播放

controls  控制器

  muted   静音

preload   预加载（如设置了autoplay，则忽略）

补充：

在audio标签后部，可以写一段文字，提醒浏览器不支持HTML5的用户更换浏览器。
如果是支持HTML5的浏览器，将不会出现这段文字。


实例：

（IE9+）

支持MP4、WebM、Ogg。

属性：

     src   地址	
  
   width   宽度     数值

  height   高度     数值

    loop   循环播放
    
autoplay   自动播放

controls   控制器

  muted    静音

preload    预加载（如设置了autoplay，则忽略）

   type    转码     如：type="video/mp4"

实例：

（IE9+）

source一般嵌套在video、audio里面使用。

属性：

type 转码

src  地址

外部的可交互的内容或插件，比如flash

属性：

 type  转码

  src  地址

 width 宽度   数值

height 高度   数值

3. Web应用标签

状态标签

【电量条】 （IE不支持）

属性 ：

   value  当前值      
   
     min  最小值   
     
     max  最大值
     
     low  警戒低值   
       
    high  警戒高值  
    
 optimum  最合适的值

补充：

如果只设置value的值，这个值只能取0~1之间，并且以百分比的形式呈现在页面。

实例：

【加载条】（IE10+）

属性：

value 当前值        

 max  最大值

如果只设置max值，它会变成动态加载中的形式。

实例：

列表标签

类下拉列表（IE10+，不支持Safari）

配合input标记，定义一个类下拉列表，选项用option标签

实例：

优点：

1. 可以通过输入关键字，检索选项

2. 可以输入自定义的值，不一定要选中选项

隐藏内容（Safari6 和 Chrome）

配合summary使用，利用自身的open属性显示隐藏内容

实例：

        
有一次。。。
        

           有一次，在我参加的一个晚会上，主持人问一个小男孩：你长大以后要做什么样的人？孩子看看我们这些企业家，然后说：做企业家。在场的人忽地笑着鼓起了掌。我也拍了拍手，但听着并不舒服。我想，这孩子对于企业究竟知道多少呢？他是不是因为当着我们的面才说要当企业家的呢？他是不是受了大人的影响，以为企业家风光，都是有钱的人，才要当企业家的呢？

        

4. 其他标签

注释标签

& 组合使用 （IE7+）

W3C上说，IE9+才支持，但实测IE7、IE8也支持。

实例：

他很屌diao

实现效果：

他很屌diao

& 、 组合使用 （IE7+）

实例：

他很屌(diao)

实现效果：

他很屌(diao)

其他标签

黄色标记 （IE9+）

计算结果输出（非IE）

1. 需要一组from，from里面设置oninput值，也就是计算逻辑。

2. 两个或多个input作为输入参数。

3. output作为输出显示区域

        
         *
        =

        

实验结果：

被删除标签

• 纯表现的元素

Basefont（标准字体） 、 big（放大以后的字体） 、 center（居中对齐）、font（定义字体） 、 s 、 strike 、 tt 、 u

• 对可用性产生负面影响的元素
  frame、frameset、noframes

如果要在网页中显示别的网页，可以使用iframe。

• 产生混淆的元素

acronym、applet、isindex、dir

重定义标签

显示不变，只是表达的含义进行了重新定义的标签

	  内联文本，通常是粗体，没有了传递表示重要的意思

	  内联文本，通常是斜体，没有了传递表示重要的意思

	
 标题，可以和details、figure一同使用，定义包含文本；dialog也可用

	
 描述，可以和details、figure一同使用，汇总细节；dialog也可用

    
 主题结束，而不是水平线，虽然显示是一样的

  小字体，例如打印注释或者法律条款

 重要性，而不是突出