html新增结构元素解析

本文主要帮助理解HTML5新增结构元素article、section、aside、nav、time微格式。

新增非结构元素header、footer、address、figure。

新增表单元素的属性form、formaction、formmethod、formenctype、formtarget、required、autofocus、placeholder、list、autocomplete、pattern、indeterminate。

• section表示页面上的区域，主要的目的是给文章分段等，section里必须包含标题。

    
标题
    
内容

• article表示页面上独立的区域，和section相比，article更注重自身的独立性。

    

        
标题
        
内容
    

• aside表示页面的附加内容，可以是文章的含义，链接等

    

        
标题
         
内容
    
 


    
评论
    

        
张
        
好听
    
    

• nav表示页面的导航，主要包括页面的主导航，侧边栏导航，页内导航和分页导航。

    

        
111
        
222
        
333
    

• time用datatime属性表示一个时间戳。T代表分隔符，Z代表格林威治标准时间，+代表时区，pubdata表示发布时间。

2017-01-09
2017-01-10
2017-01-11

• header标签用于页面的头部、文章的页眉等。页面中可以出现多个header标签。

  
这是标题


  

    
这是文章标题
  

• footer标签用于页面的注脚、文章的页脚等。页面中可以出现多个footer标签。

  

    
这是文章页脚
  


  
这是注脚

• address标签用于表示文档的作者，联系地址，用在body里表示文档的作者，用在article里表示文章的作者，通常和footer搭配使用。

  

    
姓名
    
地址
  

• figure标签表示独立的内容，figcaption表示figure的标题。figcaption标签赢始终置于figure的第一位或最后一位

  
这是内容
  
这里是文字

• 新增属性form表示输入域所属的一个或多个表单。

地址：


姓名： 

• formaction可以重写表单action属性

姓名： 
地址：

• formenctype可以重写表单enctype属性

姓名： 
地址：

• formmethod可以重写表单method属性。name属性为key，value属性为value

姓名： 
地址：

• formtarget可以重写表单target属性。

姓名： 
地址：

以上属性只适用于type="submit"

• required属性规定是必填字段。不符合规则的会弹出提示。

姓名： 
地址：

• autofocus规定当页面加载完成时自动获得焦点。

姓名： 
地址：

• placeholder规定文本框未获取焦点时的文本内容。

姓名： 
地址：

• list属性可以使单行文本框获得焦点时显示一个菜单可供选择，允许自行输入内容。

姓名： 
地址：
            

• autocomplete属性可使浏览器根据用户已输入的内容显示用户过去输入过的内容。

姓名： 
地址：

• pattern属性规定本字段的验证模式。不符合规则的会弹出提示。

姓名： 
地址：

• indeterminate属性是checked复选框的第三种状态：模糊状态。单独用在html里不会起作用。

  

     I have a bike