html5 新特性

• 列表项

1、html5新标签

• article : 定义文章

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

• datalist : 定义列表项

      <input list="browser">
      <datalist id="browser">
          <option value="IE">IE</option>
          <option value="Chrome">Chrome</option>
          <option value="Safari">Safari</option>
          <option value="Opera">Opera</option>
          <option value="FirFox">FirFox</option>
      </datalist>
  

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

      <details open>
          <summary>点击展开</summary> 
          <p>我是隐藏的详细内容</p>
      </details>
  

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

• figcaption : 设置该区域的名称

   <figure>
       <figcaption>图片区域标题</figcaption>
       <p>定义一块图片区域</p>
   </figure>

• 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新表单元素

<!-- HTML5新增了一些表单元素，让用户输入内容更加方便快速 -->
<span>年月日</span>
<input type="date" name="name" value="">

<span>时分</span>
<input type="time" name="name" value="">

<span>周</span>
<input type="week" name="name" value="">

<span>月</span>
<input type="month" name="name" value="">


<form action="">
    <label for="">邮箱:</label>
    <input type="email" name="name" value="">
    <label for="">网址:</label>
    <input type="url">
    <label for="">手机号：</label>
    <input type="number" name="name" value="" required>
    <label for="">范围:</label>
    <input type="range" max=10 min=1 name="name" value="10" step="5">
    <label for="">颜色</label>
    <input type="color" name="name" value="">
    <input type="submit" name="name" value="提交">
</form>

<!-- email表单元素只验证是否在字符串中间包含'@'符号-->
<!-- email和url表单元素需要借助form才可以起作用 -->
<!-- url表单元素需要添加协议名称 -->
<!-- range表单元素属性：max / min / step / value -->

<input type="text" placeholder="请输入文字" name="name" value="a">

<select multiple class="" name="">
    <option value="">iPhone</option>
    <option value="">iPad</option>
    <option value="">Mac</option>
    <option value="">iPod</option>
    <option value="">Apple Watch</option>
</select>

<input type="file" name="name" value="" multiple>

<!-- required: 让表单中的元素成为必选项 -->
<!-- multiple: 可以变为多选（select / file） -->

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 () 选择器
• 给所有的空标签添加样式