html5 新特性

html5 新特性

• 列表项

1、html5新标签

• article : 定义文章

• aside : 定义和页面关联度较低的内容

• datalist : 定义列表项

• details : 定义一小块区域，可以收起，可以展开 open属性代表默认展开
  -- 如果想要修改名称，使用summary标签

      
  
          
  点击展开
   
          
  我是隐藏的详细内容
      
  

• figure : 包裹一块图片等信息

• figcaption : 设置该区域的名称

   

       
图片区域标题
       
定义一块图片区域
   

• section : 定义文档中的某个区域 类似于 div

• header : 代表一块区域的头部

• footer : 代表一块区域的尾部

• main : 代表主要区域

• nav : 定义导航部分

• mark : 标记文本

• time : 定义时间

• progress : 进度条

• output : 输出内容的标签

• 分类 （行属性标签、快属性标签、内联块标签）
• 行属性标签(span)：mark / time / output /
• 块属性标签(div): nav / main / header / footer / section / figure / details / aside / article
• 内联块标签(img): progress

2、HTML5新表单元素

年月日


时分


周


月




    邮箱:
    
    网址:
    
    手机号：
    
    范围:
    
    颜色
    
    










    iPhone
    iPad
    Mac
    iPod
    Apple Watch

3、选择器

• 使用选择器为标签添加样式

给根元素添加样式 (html)
-- root {}
标签选择器
-- div {}
类选择器
-- .div {}
id选择器
-- #div {}
属性选择器
-- a[href=''] {}
-- input[type=''] {}
伪类选择器
-- a:hover {}
-- li:nth-child(even) {}
后代选择器
-- div h2 {}
直接子级选择器
-- div > h2 {}
群组选择器
-- h2 , h3 , h4 {}
通配符选择器
-- * {}

html5 *新增选择器*

属性选择器中直接写 '=' 代表全等
-- [class = 'div']
属性选择器中直接写 '*=' 代表包含
-- [class *= 'div']
属性选择器中直接写 '^=' 代表以什么开头
-- [class ^= 'div']

属性选择器中直接写 '$='代表以什么结尾
-- [class $= 'div']

• :not () 选择器
• 排除很多元素中的某一个
• :empty () 选择器
• 给所有的空标签添加样式