html新增結構元素解析

jzen發表於2018-01-17
HTML

本文主要幫助理解HTML5新增結構元素article、section、aside、nav、time微格式。

新增非結構元素header、footer、address、figure。

新增表單元素的屬性form、formaction、formmethod、formenctype、formtarget、required、autofocus、placeholder、list、autocomplete、pattern、indeterminate。

  • section表示頁面上的區域，主要的目的是給文章分段等，section裡必須包含標題。
<section>
    <h1>標題</h1>
    <article>內容</article>
</section>
複製程式碼
  • article表示頁面上獨立的區域，和section相比，article更注重自身的獨立性。
<article>
    <section>
        <h1>標題</h1>
        <p>內容</p>
    </section>
</article>
複製程式碼
  • aside表示頁面的附加內容，可以是文章的含義，連結等
<article>
    <section>
        <h1>標題</h1>
         <p>內容</p>
    </section>
</article> 

<aside>
    <h1>評論</h1>
    <section>
        <h2>張</h2>
        <p>好聽</p>
    </section>
</aside>    
複製程式碼
  • nav表示頁面的導航，主要包括頁面的主導航，側邊欄導航，頁內導航和分頁導航。
<nav>
    <ul>
        <li><a href="#">111</a></li>
        <li><a href="#">222</a></li>
        <li><a href="#">333</a></li>
    </ul>
</nav>
複製程式碼
  • time用datatime屬性表示一個時間戳。T代表分隔符，Z代表格林威治標準時間，**+**代表時區，pubdata表示釋出時間。
<time datatime="2017-01-09T13:02" pubdate>2017-01-09</time>
<time datatime="2017-01-10Z">2017-01-10</time>
<time datatime="2017-01-11+9:00">2017-01-11</time>
複製程式碼
  • header標籤用於頁面的頭部、文章的頁首等。頁面中可以出現多個header標籤。
<header>
  <h1>這是標題</h1>
</header>
<article>
  <header>
    <h2>這是文章標題</h2>
  </header>
</article>
複製程式碼
  • footer標籤用於頁面的註腳、文章的頁尾等。頁面中可以出現多個footer標籤。
<article>
  <footer>
    <h2>這是文章頁尾</h2>
  </footer>
</article>
<footer>
  <h1>這是註腳</h1>
</footer>
複製程式碼
  • address標籤用於表示文件的作者，聯絡地址，用在body裡表示文件的作者，用在article裡表示文章的作者，通常和footer搭配使用。
<address>
  <ul>
    <li>姓名</li>
    <li>地址</li>
  </ul>
</address>
複製程式碼
  • figure標籤表示獨立的內容，figcaption表示figure的標題。figcaption標籤贏始終置於figure的第一位或最後一位
<figure>
  <figcaption>這是內容</figcaption>
  <p>這裡是文字</p>
</figure>
複製程式碼
  • 新增屬性form表示輸入域所屬的一個或多個表單。
<form id="userInfo">
地址：<input  type="text" />
<input type="submit" />
</form>
姓名： <input from="userInfo" type="text" />
複製程式碼
  • formaction可以重寫表單action屬性
<form id="userInfo" action="index.jsp">
姓名： <input name="name" type="text" />
地址：<input name="address" type="text" />
<input type="submit" formaction="userInfo.jsp" />
</form>
複製程式碼
  • formenctype可以重寫表單enctype屬性
<form id="userInfo" enctype="text/plain">
姓名： <input name="name" type="text" />
地址：<input name="address" type="text" />
<input type="submit" formenctype="multipart/form-data" />
</form>
複製程式碼
  • formmethod可以重寫表單method屬性。name屬性為key，value屬性為value
<form id="userInfo" method="post">
姓名： <input name="name" type="text" />
地址：<input name="address" type="text" />
<input type="submit" formmethod="get" />
</form>
複製程式碼
  • formtarget可以重寫表單target屬性。
<form id="userInfo" target="_self">
姓名： <input name="name" type="text" />
地址：<input name="address" type="text" />
<input type="submit" formtarget="_block" />
</form>
複製程式碼

以上屬性只適用於type="submit"

  • required屬性規定是必填欄位。不符合規則的會彈出提示。
<form id="userInfo">
姓名： <input name="name" type="text" required />
地址：<input name="address" type="text" />
<input type="submit" />
</form>
複製程式碼
  • autofocus規定當頁面載入完成時自動獲得焦點。
<form id="userInfo">
姓名： <input name="name" type="text" required autofocus/>
地址：<input name="address" type="text" />
<input type="submit" />
</form>
複製程式碼
  • placeholder規定文字框未獲取焦點時的文字內容。
<form id="userInfo">
姓名： <input name="name" type="text" placeholder="請輸入使用者名稱"/>
地址：<input name="address" type="text" />
<input type="submit" />
</form>
複製程式碼
  • list屬性可以使單行文字框獲得焦點時顯示一個選單可供選擇，允許自行輸入內容。
<form id="userInfo">
姓名： <input name="name" type="text" />
地址：<input name="address" type="text" list="citys" />
            <datalist id="citys">
                <option value="北京">北京</option>
                <option value="上海">上海</option>
            </datalist>
<input type="submit" />
</form>
複製程式碼
  • autocomplete屬性可使瀏覽器根據使用者已輸入的內容顯示使用者過去輸入過的內容。
<form id="userInfo">
姓名： <input name="name" type="text" autocomplete="on" />
地址：<input name="address" type="text" />
<input type="submit" />
</form>
複製程式碼
  • pattern屬性規定本欄位的驗證模式。不符合規則的會彈出提示。
<form id="userInfo">
姓名： <input name="name" pattern="[a-z]{1,5}" type="text" />
地址：<input name="address" type="text" />
<input type="submit" />
</form>
複製程式碼
  • indeterminate屬性是checked核取方塊的第三種狀態：模糊狀態。單獨用在html裡不會起作用。
<body>
  <form id="userInfo">
    <input type="checkbox" id="check" name="vehicle" value="Bike" /> I have a bike
  </form>
</body>
<script>
  var check = document.getElementById("check");
  check.indeterminate = true;
</script>
複製程式碼

相關文章