HTML5 簡(jiǎn)介

html的第五個(gè)版本

• 新增特性 api 多媒體 語(yǔ)義化 過(guò)渡 動(dòng)畫
• 廢棄 一些標(biāo)簽
• 支持程度 ie8以下不支持 ie9 以上選擇性支持

常用的語(yǔ)義化標(biāo)簽 ★

• 頭部 header
• 導(dǎo)航nav
• 主體 main ie瀏覽器不識(shí)別
• 文章 article
• 側(cè)邊 (主體之外) aside
• 底部footer

語(yǔ)義化標(biāo)簽兼容ie瀏覽器 ★

• 方式一:
  • 手動(dòng)創(chuàng)建語(yǔ)義化標(biāo)簽,將其轉(zhuǎn)換成塊級(jí)元素
• 方式二:
  • 引入第三方文件 html5shiv.min.js
    ie注釋 優(yōu)化 快捷方式cc:ie + tab

h5針對(duì)type屬性新增表單元素 ★

• 郵箱 type="email" 提供郵箱驗(yàn)證
• 電話 type="tel" 會(huì)在移動(dòng)端調(diào)取數(shù)字鍵盤
• 搜索 type="search"
• 數(shù)字 type="number"
  • 最大值 max
  • 最小值min
  • 默認(rèn)值value
• 范圍 type="range"
  • 最大值 max
  • 最小值 min
  • 默認(rèn)值 value
• 拾色器 type="color"
• 網(wǎng)絡(luò)地址 type="url" 必須加協(xié)議 http:// https://
• 日期
  • 時(shí)間 type="time"
  • 日期 type="date"
  • 時(shí)間+日期 type="datetime-local" datetime
  • 周 type="week"
  • 月份 type="month"

表單新增的其他屬性 ★

• 自動(dòng)獲取焦點(diǎn)autofocus
• 提示占位 placeholder ="提示信息"
• 自動(dòng)完成 autocomplete ="on / off"
  • 必須設(shè)置name屬性
  • 必須成功提交過(guò)一次
• 必須填寫required
• 驗(yàn)證正則表達(dá)式 pattern="正則表達(dá)式 "
• 多選multiple填寫多個(gè)郵箱用逗號(hào)隔開(kāi)
• 關(guān)聯(lián)當(dāng)前表單之外的表單
  • 被關(guān)聯(lián)的表單元素 設(shè)置form = "關(guān)聯(lián)的表單id值"
  • 關(guān)聯(lián)的表單設(shè)置id屬性

可輸入的下拉列表

• 先寫一個(gè)< input type="text" list="a">
• 寫

        <datalist  id="a" >
        <option  value ="實(shí)際值"  label="提示值"> </option>
       </datalist> 
  
  

注意:

• option可以寫成單標(biāo)簽
• 如果 type="url " value值加上http:// 協(xié)議

      網(wǎng)址：<input type="url" list="urls">
          <datalist id="urls">
              <!--如果input輸入框的type類型是url,那么value值必須添加http://-->
              <option value="http://www.baidu.com" label="百度"></option>
              <option value="http://www.sohu.com"></option>
              <option value="http://www.163.com"></option>
          </datalist>

H5新增的表單事件 ★

• oninput 只要值修改 就實(shí)時(shí)觸發(fā)
• oninvalid 驗(yàn)證不通過(guò)觸發(fā) 修改提示信息 當(dāng)前表單元素.setCustomValidtity('修改的提示信息');

進(jìn)度條

progress

• 當(dāng)前 值 value ="10"
• 最大值 max ="100"

度量器

meter

• 當(dāng)前 值 value ="10"
• 最大值 max ="100"
• 最小值 min = "0"
• 較高的 high="90"
• 較低的 low = "60"

• fieldset
• legend
• box-sizing: border-box; 盒子內(nèi)減模型 寬度 = 內(nèi)容 + padding + border

多媒體標(biāo)簽 ★

音頻 audio

• src 文件路徑
• controls 面板控制器
• autoplay 自動(dòng)播放
• loop 循環(huán)播放

視頻 video

• src 文件路徑

• controls 面板控制器

• autoplay 自動(dòng)播放

• loop 循環(huán)播放

• width 寬度

• height 高度

• poster 修改視頻的默認(rèn)第一幀畫面

• muted 靜音

• 由于各個(gè)瀏覽器支持的視頻格式不同, 單獨(dú)將視頻的src抽離 用source 單標(biāo)簽引入不同格式的視頻文件

       <video >
           <source src=".mp4" type="video/mp4">
           <source src=".flv" type="video/flv">
           <source src=".rmvb" type="video/rmvb">
      </video>
  
  

谷歌瀏覽器在18年提出不再支持視頻的自動(dòng) --- 避免廣告 解決了用戶流量

解決方式一 視頻加muted

方式二 chrome://flags/#autoplay-policy

DOM拓展

獲取元素★

• 獲取單個(gè)元素document.querySelector('選擇器');
• 獲取多個(gè)元素 document.querySelectorAll('選擇器');

類樣式操作 classList ★

• 添加 元素.classList.add('red','pink') 添加多個(gè)用逗號(hào)隔開(kāi)
• 移除 元素.classList.remove('red','pink')移除多個(gè)用逗號(hào)隔開(kāi)
• 切換 元素.classList.toggle('red')
• 檢測(cè)是否包含 元素.classList.contains('red') 返回值是一個(gè)布爾值有 true 無(wú)false
• 獲取指定項(xiàng) 元素.classList.item(數(shù)值)

自定義屬性 ★

• 設(shè)置
  • 以data-開(kāi)頭
  • 建議 不要使用純數(shù)字 不要使用特殊字符 不要使用大寫字符 不要使用漢字 使用多個(gè)單詞用橫線鏈接
  • <p data-w-c-g="王光" ></p>
• 獲取
  • 元素.dataset[wCG] 獲取的時(shí)候使用駝峰命名法

網(wǎng)絡(luò)監(jiān)聽(tīng)

• 在線ononline

     window.addEventListener('online',function(){
             處理的程序
       })
  
  

• 斷線 onoffline

    window.addEventListener('offline',function(){
      處理的程序
    })