1. 程式人生 > >HTML5中常用標籤總結

HTML5中常用標籤總結

1、HTML5的文件頭是預設嚴格模式的而HTML4的文件頭有過渡型和嚴格型之分:

<!doctype html>

2、HTML5中的標籤語義化(使用最恰當的HTML元素標記的內容)更強,而語義化強的好處則是:體現專業性,有利於seo優化,提升可訪問性,結構清晰有利於日後的維護

3、SEO優化:Search Engine Optimization  中文:搜尋引擎優化

站內優化(網站結構調整,網站內容建設,網站程式碼優化)和站外優化

4、HTML5中的標籤:

<header>網站頭部</header>

                <section>網站主體

</section>

               <footer>網站尾部</footer>

<aside>側邊欄</aside>

<nav>導航</nav>    一個網站中只能用一次

<article>文章</article>

<hgrounp>標題組合</hgrounp>

<figure>資源組合描述

                  <img src="img/1.jpg"  title="文字描述"  alt="資源描述"/>

                  <figcaption>資源描述</figcaption>

              </figure>

 <time>2016-11-8時間標籤</time>

<input type="text"list="id" />聯想顯示列表

         <datalist id="id">

               <option>apple</option>

              <option>pen</option>

              <option>banana</option>

              <option>orange</option>

          </datalist>

<details>收縮選單

<summary>這是一個標題</summary>

                  <p>這是它的內容</p>

</details>

<dialog open>對話方塊</dialog>

           顯示對話方塊 :open

<address>地址</address>

<mark>文字高亮</mark>

<progress max="100" value="50"></progress>動態載入過程:進度條:不能修改樣式

<meter max="100" value="90" style="width:300px;height:50px;"></meter>

               max="100"  最大顯示值

               value="50"當前所佔值

               進度條:不支援背景色修改

<video src="mp4/1.mp4"controls>視訊標籤</video>

                            src="mp4/1.mp4" 資源路徑

                            controls 顯示控制器

                            autoplay 自動播放

                            loop  迴圈播放

<audiosrc="mp3/a.mp3" controls>音訊標籤</audio>

<main>頁面主要內容,一個頁面只能使用一次</main>

<embed src='...'/> 可以用來插入各種多媒體,格式可以是Midi、Wav、AIFF、AU、MP3等等

5、表單類:

數字輸入框:<input type="number"min="0" max="1" step="2" />

☆  step                                 增減基數

☆  autofocus                       自動獲取焦點

☆  autocomplete=“off” 自動提示文字

☆  placehoder                    預設文字

☆  required                         必填

☆  title                                     提示錯誤 和正則相配合

☆  pattern                            正則

      顏色選擇器:<input type="color" /> 

      日期選擇器:<input type="date" />

      日期輸入框:<input type="datetime" />

        email輸入框:<input type="email" />

        拖拽條:<input type="range"value="1" max="100" />

        搜尋框:<input type="search" />

        撥號鍵盤:<input type="tel" />

        選擇周時間選擇器:<input type="week" />

        選擇月時間選擇器:<input type="month" />

        提交網址:<inputtype="url" />