HTML5語義化標籤總結

weixin_34321977發表於2017-01-16
HTML

1.語義化標籤總結

基礎佈局標籤

 <header></header>
    <nav></nav>
 <main></main>
    <aside></aside>
    <article></article>
 <footer></footer>

注意：IE8以後不相容H5標籤，如果需要相容IE8一下的瀏覽器，則需要如下操作：

如果在sublime,或者WebStrom使用 可是使用快捷點: cc:ie6+tab

生成內容：

<!--[if lt IE 9]>
    <script type="text/javascript" src='js/html5shiv.min.js'></script>
<![endif]-->

或者

<!--[if lte IE 6]>      
    <script type="text/javascript">
        alert("我執行了");
        window.onload = function(){
            var createHeader = document.createElement("header");
            document.body.appendChild(createHeader);
        }
    </script>
<![endif]-->

H5解決方案：可以引入上面的html5shiv.min.js，百度搜尋進行下載即可。

2.H5表單

input標籤新增屬性

<form action="#">
        <fieldset>
            <legend>新輸入型別</legend>
            <label>type=color
                <input type="color">
            </label>
            <label>type=date
                <input type="date">
            </label>
            <label>type=datetime
                <input type="datetime">
            </label>
            <label>type=datetime-local
                <input type="datetime-local">
            </label>
            <label>type=date
                <input type="date">
            </label>
            <label>type=email
                <input type="email">
            </label>
            <label>type=month
                <input type="month">
            </label>
            <label>type=week
                <input type="week">
            </label>
            <label>type=day
                <input type="week">
            </label>
            <label>type=number
                <input type="number">
            </label>
            <label>type=range
                <input type="range">
            </label>
            <label>type=search
                <input type="search">
            </label>
            <label>type=url
                <input type="url">
            </label>
        </fieldset>
    </form>

注意:有些效果顯示在瀏覽器顯示不明顯（沒有變化），在移動端會有變化。（移動端的支援 比桌面端要好）

新表單元素

<datalist></datalist>//定義下拉選單
<keygen></keygen>  //（生成祕鑰）
<output></output> //定義輸出的一些型別。

使用方法：

<input id="myCar" list="cars" />
    <datalist id="cars">
      <option value="BMW">
      <option value="Ford">
      <option value="Volvo">
    </datalist>

剩餘的兩個理解就好。

3.新表單屬性

操作物件:

<input type="text" name="">

在表單可新增屬性，如下：

  1. placeholder：佔位符提示
  2. autofocus：獲取焦點
  3. autocomplete: 規定是否使用輸入欄位的自動完成功能。
  4. multiple：支援多檔案選擇
  5. form：此屬性不推薦使用

演示程式碼:

<form action="#" id='form'>
<fieldset>
<legend>新表單屬性</legend>
<!--  input標籤 預設的 提醒資訊  -->
<input type="text" name="" placeholder="請輸入使用者名稱">
<input type="email" name="" placeholder="請輸入電子郵箱" autofocus>
<input type="file" multiple>
<!-- 必須 為 該標籤 新增name屬性  還需要改表單 曾經提交過-->
<input type="tel" name="telPhone" autocomplete placeholder="請輸入電話號碼">
<input type="submit" >
</fieldset>
</form>

<input type="text" name="userHabbit" placeholder="請輸入你的愛好" form='form'>

表單驗證:
新增屬性：

  1. required:必須填寫，不能為空
  2. pattern：可是使用正則來驗證
<form action="#">
        <fieldset>
            <legend>表單驗證</legend>
            <!-- email這個標籤 自帶了 表單的格式驗證 不能驗證 空的值 -->
            <input type="email" name="userEmail" required>
            <!-- 對 字串 格式的驗證 使用的是 正則 
                pattern 中可以寫正則 進行驗證
            -->
            <input type="tel" placeholder="請輸入電話號碼"  name='userTel' required pattern="\d{3}"
                   oninvalid="  this.setCustomValidity('親愛的使用者你輸入的格式不正確,請重新輸入')">
            <input type="submit">
        </fieldset>
    </form>

4.音訊（audio ）

音訊屬性： controls autoplay loop

  • controls:控制器
  • autoplay：是否自動播放
  • loop:是否迴圈播放
  • muted：是否靜音

演示原始碼：

<audio  controls autoplay loop>
    <source src="music/music.ogg" >
    <source src="music/郝雲 - 活著.mp3" >
    親愛的使用者,你的瀏覽器版本太低,無法享受這個頁面的所有功能,建議進行更新 ^_^ <a href="#">戳我下載</a>
</audio>

5.視訊(video):

視屏播放器：

  • autoplay autoplay 如果出現該屬性，則視訊在就緒後馬上播放。
  • controls controls 如果出現該屬性，則向使用者顯示控制元件，比如播放按鈕。
  • height pixels 設定視訊播放器的高度。
  • loop loop 如果出現該屬性，則當媒介檔案完成播放後再次開始播放。
  • muted muted 規定視訊的音訊輸出應該被靜音。
  • poster URL 規定視訊下載時顯示的影象，或者在使用者點選播放按鈕前顯示的影象。
  • preload preload 如果出現該屬性，則視訊在頁面載入時進行載入，並預備播放。
  • 如果使用 "autoplay"，則忽略該屬性。
  • src url 要播放的視訊的 URL。
  • width pixels 設定視訊播放器的寬度。

演示程式碼：

<!--<video src="movie/[報告老闆][第二季]第11集_bd.mp4" controls  loop height="100px" width="300px"
    poster="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png"></video>-->
<!--瀏覽器會從上往下 找到可以播放的 進行播放-->
<video  controls>
    <source src="movie/movie04.ogg">
    <source src="movie/[報告老闆][第二季]第11集_bd.mp4">
    親愛的使用者,你的瀏覽器版本太久了,建議升級 <a href="#"> 點我下載 最新的瀏覽器(⊙o⊙)</a>
</video>

6.獲取元素新方法

document.querySelector('li')

document.querySelectorAll('')

注意：這個選著器的使用方式和jQuery選著器使用方式是一樣的。

7.類名操作（classList）

這是一個物件，物件有如下方法：

add() (新增一個類名)

remove() （刪除一個類）

contains() （是否包含類）

toggle() （切換類）

示例程式碼：

// 獲取 要操縱的div 方便後續的操作
var div = document.querySelector('.showBox');
// querySelector
// 新增class
document.querySelector('input[value=add]').onclick = function(){
// alert('ADD');
div.classList.add('orange');
}

    // 移除class
    document.querySelector('input[value=remove]').onclick = function () {
        div.classList.remove('orange');
    }
    // 判斷是否存在class
    document.querySelector('input[value=contains]').onclick = function () {
        alert(div.classList.contains('orange'));
    }
    // 切換class
    document.querySelector('input[value=toggle]').onclick = function () {
        div.classList.toggle('skyBlue');
    }

8.自定義屬性（dataset）

程式碼演示：

<body>
<!-- html5為了規範自定義屬性的寫法,新增了一個 data-的屬性 -->
    <div data-age='18' data-skill='eatFood' data-habbit = 'tableTannis'
         data-food-vegetable='西蘭花' data-foodMeat='牛肉'></div>
</body>
</html>
<script type="text/javascript">
    window.onload = function(){
        // 所有 通過 data-的方式 新增的屬性 都會儲存在dom元素的 dataset屬性中 他是一個物件
        // 設定屬性時 能夠使用大寫字母 但是會自動幫我們轉化為 小寫的字母
        // 作用是 為了規範 自定義屬性的寫法
        console.log(document.querySelector('div').dataset);
        console.log(document.querySelector('div').dataset.age);
        console.log(document.querySelector('div').dataset.foodVegetable);
        console.log(document.querySelector('div').dataset.foodmeat);
    }
</script>

相關文章