HTML5新增的標籤與屬性

時間 2019-11-19 標籤 html5 html 新增標籤屬性

1、關於DTD

HTML5 不基於 SGML，因此不須要引用 DTD（HTML 4.01 基於 SGML）html

2、HTML5結構標籤

<header> 標記定義一個頁面或一個區域的頭部
<nav> 標記定義導航連接

<section> 標記定義一個區域
<aside> 標記定義頁面內容部分的側邊欄

<article> 標記定義一篇文章
<hgroup> 標記定義文件中一個區塊的相關信息
<figure> 標記定義一組媒體內容以及它們的標題
<figcaption>標記定義 figure 元素的標題。
<dialog> 標記定義一個對話框(會話框)相似微信

<footer> 標記定義一個頁面或一個區域的底部

3、HTML5多媒體標籤

video（視頻）web

兼容性：

safari支持mp四、不支持webm和ogv
ie8（包含）如下都不支持 video 標籤
ie9 支持 video 標籤（但只支持 mp4 ）

<video src="..."
       autoplay="autoplay"
       controls="controls"
       loop="loop"
       width="500"
       height="500"
       poster="..."
       muted>

<!-- 其中loop設置循環 poster設置封面 muted靜音 -->

audio（音頻）chrome

兼容性：

safari支持mp3和wav、不支持ogg
JS中new Audia() 等同於 html 上加一個 <audio></audio>標籤
chrome和opera不能自動播放，須要一個頁面元素上的交互才能夠
width / height 屬性沒有做用，必須使用 style 標籤裏面的樣式去控制它
爲了提高客戶的體驗度，能夠在audio的開始和結束標籤之間添加文字
<source> 標是爲媒介元素定義媒介資源，不能夠在<source>開始標籤裏添加，並且<source> 標籤是單標籤，沒有結束標籤。

<audio src="..."
       autoplay="autoplay"
       controls="controls"
       loop="loop"
       width="500"
       height="500">

source：媒介元素（音視頻）

<video autoplay="autoplay"
       controls="controls"
       loop="loop"
       width="500"
       height="500">
    <source src="..." type="video/mp4"
</video>

embed：嵌入插件（音視頻）瀏覽器

<embed src="..."
       type="audio/mp3"
       width="300" 
       height="300" />

4、HTML5的Web應用標籤

Menu
<menu> 命令列表（目前全部主流瀏覽器都不支持）
<menuitem> menu命令列表標籤（只有FireFox8.0+支持）
<command> menu標記定義一個命令按鈕（只有IE9支持）ruby
狀態標籤
<meter> 狀態標籤(實時狀態顯示：氣壓、氣溫)C、O
<progress> 狀態標籤 (任務過程：安裝、加載) C、F、Obash
列表標籤
<datalist> 爲input標記定義一個下拉列表,配合option F、O
<details> 標記定義一個元素的詳細內容，配合summary C微信

5、HTML5其餘標籤

<ruby> 標記定義註釋或音標
<rp> 告訴那些不支持 ruby元素的瀏覽器如何去顯示
<rt> 標記定義對ruby的註釋內容文本
<mark> 標記定義有標記的文本 (黃色選中狀態)
<output> 標記定義一些輸出類型，計算表單結果配合oninput事件
<keygen> 標記定義表單裏一個生成的鍵值(加密信息傳送)
<time> 標記定義一個日期/時間，目前全部主流瀏覽器都不支持

6、HTML5重定義標籤

（顯示不變，只是表達的含義進行了從新定義的標籤）異步

<b> 表明內聯文本，一般是粗體，沒有傳遞表示重要的意思
<i> 表明內聯文本，一般是斜體，沒有傳遞表示重要的意思
<dd> 能夠同details與figure一同使用，定義包含文本，dialog也可用
<dt> 能夠同details與figure一同使用，彙總細節，dialog也可用
表示主題結束，而不是水平線，雖然顯示相同
<menu> 從新定義用戶界面的菜單，配合command或者menuitem使用
<small> 表示小字體，例如打印註釋或者法律條款
<strong>表示重要性而不是強調符號

7、HTML5中Input新增的type

email
url
number
range
Date picker：

Date —— 選取日、月、年

Month —— 選取月、年

Week —— 選取周和年

Time —— 選取時間（小時和分鐘）

Datetime —— 選取時間、日、月、年（UTC 時間）

Datetime-local —— 選取時間、日、月、年（本地時間）
search
color
tel

8、HTML5表單屬性

autocomplete：自動完成，適用於 <form> 標籤，以及如下類型的 <input> 標籤：
text, search, url, telephone, email, password, datepickers, range, color。
用法：<form autocomplete="on「></form>或者單獨在input中用offasync
autofocus：自動地得到焦點，適用於全部 <input> 標籤的類型
用法：<input autofocus="autofocus" />ide
multiple：可選擇多個值，適用於<input>中type爲email和file
用法：<input type="file" multiple="multiple" />
placeholder：適用於<input>中type爲：text, search, url, telephone, email, password
required：規定不能爲空，適用於如下類型的 <input> 標籤：
text, search, url, telephone, email, password, date pickers, number, checkbox, radio, file
用法：<input type="text" required="required" />

9、HTML5連接屬性

size
<link rel=「icon」 href=「icon.gif」 type=「image/gif」 size=「16x16」>
target
<base href=「http://localhost/」 target=「_blank」>
超連接
a：media=""（表示對設備進行優化，handhelp對「手持「設備進行支持，tv對」電視）；
a：hreflang="zh"（設置語言，這裏設置語言是中文）；
a：ref=「external」（設置超連接的引用，這裏超連接爲外部連接）

10、HTML5其餘屬性

defer：加載完腳本後並不執行，而是等整個頁面加載完以後再執行
<script defer src=「URL」></script>
async：加載完腳本後馬上執行，不用等整個頁面都加載完，屬於異步執行。
<script async src=「URL」></script>
Start —— 起始值

Reversed —— 倒敘排列

<ol start=「10」 reversed>
    <li>Html</li>
    <li>Css</li>
    <li>JavaScript</li>
</ol>

manifest=「cache.manifest」（定義頁面離線應用文件）<html manifest=「cache.manifest」>