html5 新特性

• 列表項(xiàng)

1、html5新標(biāo)簽

• article : 定義文章

• aside : 定義和頁(yè)面關(guān)聯(lián)度較低的內(nèi)容

• datalist : 定義列表項(xiàng)

      <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 : 定義一小塊區(qū)域，可以收起，可以展開(kāi) open屬性代表默認(rèn)展開(kāi)
  -- 如果想要修改名稱(chēng)，使用summary標(biāo)簽

      <details open>
          <summary>點(diǎn)擊展開(kāi)</summary> 
          <p>我是隱藏的詳細(xì)內(nèi)容</p>
      </details>
  

• figure : 包裹一塊圖片等信息

• figcaption : 設(shè)置該區(qū)域的名稱(chēng)

   <figure>
       <figcaption>圖片區(qū)域標(biāo)題</figcaption>
       <p>定義一塊圖片區(qū)域</p>
   </figure>

• section : 定義文檔中的某個(gè)區(qū)域 類(lèi)似于 div

• header : 代表一塊區(qū)域的頭部

• footer : 代表一塊區(qū)域的尾部

• main : 代表主要區(qū)域

• nav : 定義導(dǎo)航部分

• mark : 標(biāo)記文本

• time : 定義時(shí)間

• progress : 進(jìn)度條

• output : 輸出內(nèi)容的標(biāo)簽

• 分類(lèi) （行屬性標(biāo)簽、快屬性標(biāo)簽、內(nèi)聯(lián)塊標(biāo)簽）
• 行屬性標(biāo)簽(span)：mark / time / output /
• 塊屬性標(biāo)簽(div): nav / main / header / footer / section / figure / details / aside / article
• 內(nèi)聯(lián)塊標(biāo)簽(img): progress

2、HTML5新表單元素

<!-- HTML5新增了一些表單元素，讓用戶(hù)輸入內(nèi)容更加方便快速 -->
<span>年月日</span>
<input type="date" name="name" value="">

<span>時(shí)分</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="">網(wǎng)址:</label>
    <input type="url">
    <label for="">手機(jī)號(hào)：</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表單元素只驗(yàn)證是否在字符串中間包含'@'符號(hào)-->
<!-- email和url表單元素需要借助form才可以起作用 -->
<!-- url表單元素需要添加協(xié)議名稱(chēng) -->
<!-- range表單元素屬性：max / min / step / value -->

<input type="text" placeholder="請(qǐng)輸入文字" 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: 讓表單中的元素成為必選項(xiàng) -->
<!-- multiple: 可以變?yōu)槎噙x（select / file） -->

3、選擇器

• 使用選擇器為標(biāo)簽添加樣式

給根元素添加樣式 (html)
-- root {}
標(biāo)簽選擇器
-- div {}
類(lèi)選擇器
-- .div {}
id選擇器
-- #div {}
屬性選擇器
-- a[href=''] {}
-- input[type=''] {}
偽類(lèi)選擇器
-- a:hover {}
-- li:nth-child(even) {}
后代選擇器
-- div h2 {}
直接子級(jí)選擇器
-- div > h2 {}
群組選擇器
-- h2 , h3 , h4 {}
通配符選擇器
-- * {}

html5 *新增選擇器*

屬性選擇器中直接寫(xiě) '=' 代表全等
-- [class = 'div']
屬性選擇器中直接寫(xiě) '*=' 代表包含
-- [class *= 'div']
屬性選擇器中直接寫(xiě) '^=' 代表以什么開(kāi)頭
-- [class ^= 'div']

屬性選擇器中直接寫(xiě) '$='代表以什么結(jié)尾
-- [class $= 'div']

• :not () 選擇器
• 排除很多元素中的某一個(gè)
• :empty () 選擇器
• 給所有的空標(biāo)簽添加樣式