HTML5中新元素、新屬性彙總;HTML5中已經不支援元素(或改為css實現)等
阿新 • • 發佈:2019-02-07
一、新元素
1、新增的結構元素
figure元素 表示一段獨立的流內容,一般表示文件主題流內容中的一個獨立的單元。使用figcaption元素為figure元素組新增標題; (figcaption也是新增的元素) html5與html4程式碼比較: <figure> <figcaption>共產黨</figcaption> <p>共產黨是中華人民共和國的第一大政黨</p> </figure> <dl> <h1>共產黨</h1> <p>共產黨是中華人民共和國的第一大政黨</p>
</dl>
2、新增的input元素的型別
大多都有,value、min、max、step屬性 下面是示例: 輸入您的email地址:<input type="email" name="user_email"><input type="submit" value="提交"><br/> Password: <input type="password" name="pwd" maxlength="8"><br> 這是網頁地址:<input type="url" name="user_url"><input type="submit"
value="提交"><br/>
有限制的數字範圍(1—9):<input
type="number"
name="user_number"
min="1"
max="9"
step="3"><br/>
滑動塊:<input
type="range"
name="user_range"
min="0"
max="10"
step="2"><br/>
<!--date相關的一些屬性,部分瀏覽器不支援-->
輸入您的生日:<input
type="date"
name="user_date"
required= "required"><input
type="submit"
value="提交"><br/>
3、新增的其他元素
(1)video元素
定義視訊,比如電影片段或其他視訊流;等同於html4的object元素
(2)audio元素
定義音訊,比如音樂或其他音訊流;等同於html4的object元素
(3)embed元素
用外掛在HTML中嵌入內容,用來插入各種多媒體,格式可以是Midi、Wav、AIFF、AU、MP3 ; 等同於html4的object元素
(4)mark元素
主要用來在視覺上向用戶那些需要突出顯示或者高亮顯示的文字;mark元素的一個比較典型的應用就是在搜尋結果中向用戶高亮顯示搜尋關鍵詞;等同於html4的span元素
(5)progress元素
表示執行中的程序,可以使用progress來顯示JavaScript中消耗時間的函式的程序(圖形表示);html4中無法實現;
(6)meter元素
表示度量衡。僅用於已知最大值和最小值的度量。必須定義度量的範圍,可以在元素的文字中。也可以在min/max屬性中定義 html4無法實現;
(7)time元素
表示日期或者時間,也可以同時表示兩者;等同於html4的span元素
(8)ruby元素
為使用非西方語言提供支援,表示註釋。一般與rt、rp元素搭配使用;
(9)rt元素
表示字元的解釋或發音;
(10)rp元素
在ruby註釋中使用,以定義不支援ruby元素的瀏覽器所顯示的內容;
(11)wbr元素
表示軟換行。他與br元素的區別:br元素表示此處必須換行,而wbr元素的意思是瀏覽器視窗或父級元素的寬度夠寬時。不進行換行,而當寬度不夠時,主動在此處進行換行;
(12)canvas元素
表示圖形,比如圖表和其他影象。這個元素本身沒有行為,進提供一塊畫布,但它把一個繪圖API展現給客戶端javascript,以使指令碼能夠把想繪製的東西繪製到這塊畫布上;
(13)command元素
表示命令按鈕,比如單選按鈕,複選按鈕或按鈕;
(14)details元素
表示使用者要求得到並且可以得到的細節資訊。它可以與summary元素配合使用。summary元素提供標題或圖例。標題是可見的,使用者點選標題時,會顯示出細節資訊,summary元素應該details元素的第一個元素
(15)detalist元素
表示可選資料的列表,與input元素配合使用,可以製作出輸入值的下拉列表;html5新增功能。
(16)datagrid元素
表示可選資料的列表,他以樹形列表的形式來顯示。
(17)keygen元素
表示生成密匙。
(18)output元素
表示不同型別的輸出,比如指令碼的輸出
(19)source元素
為媒介元素定義媒介資源;對應html4的<param>
(20)menu元素
表示選單列表。當希望列出表單空間時使用;
(21)del元素
表示從文件中的刪除字
(22)Keygen元素
生成一對公鑰和私鑰
(23)source元素
表示媒體資源
(24)track元素
表示媒體的附加軌道(如字幕)
(25)hgroup元素
解決子標題排版的問題
(26)adress元素
與文章有關的聯絡資訊
(27)details元素
展開以瞭解更多詳情(預設沒有展開,可以使用open屬性改變預設設定)
(28)article元素
標籤規定獨立的自包含內容。
一篇文章應有其自身的意義,應該有可能獨立於站點的其餘部分對其進行分發
(29)placeholder元素
瀏覽器文字框中的提示資訊
二、新屬性
autocomplete :下次填入時自動填充使用者上次輸入的內容 form:表單可以放在form外面,用id來實現連線
3. 樣式繼承:
(3)只有部分瀏覽器支援的元素
對於applet。bgsound、blink、marquee等元素,由於只有部分瀏覽器支援這些元素,特別是bgsound元素以及marquee元素,只被Internet Explorer所支援,所以在HTML5中被廢除;其中applet元素可由embed元素或者object元素替代,bgsound元素可由audio元素替代,marquee可以由javascript程式設計的方式所替代。
(4)其他被廢除的元素
1)超連結中的name,用id代替
2)h1 - h6 元素的 "align" 屬性不被支援
3)廢除dir元素,使用ul元素替代;
4)廢除isindex元素,使用form元素與input元素相結合的方式替代;
5)廢除listing元素,使用pre元素替代;
6)廢除xmp元素,使用code元素替代;
7)廢除nextid元素,使用GUIDS元素替代;
8)廢除plaintext元素,使用"text/plian"MIME型別替代;
9)廢除rb元素,使用ruby元素替代;
10)廢除acronym元素,使用abbr元素替代;
11)
12)文字修飾標記
13)圖片標記<img>屬性
figure元素 表示一段獨立的流內容,一般表示文件主題流內容中的一個獨立的單元。使用figcaption元素為figure元素組新增標題; (figcaption也是新增的元素) html5與html4程式碼比較: <figure> <figcaption>共產黨</figcaption> <p>共產黨是中華人民共和國的第一大政黨</p> </figure> <dl> <h1>共產黨</h1> <p>共產黨是中華人民共和國的第一大政黨</p>
大多都有,value、min、max、step屬性 下面是示例: 輸入您的email地址:<input type="email" name="user_email"><input type="submit" value="提交"><br/> Password: <input type="password" name="pwd" maxlength="8"><br> 這是網頁地址:<input type="url" name="user_url"><input
autocomplete :下次填入時自動填充使用者上次輸入的內容 form:表單可以放在form外面,用id來實現連線
- 還有image型的input元素中新增的屬性:如formaction、formencytpe、 formmethod、formtarget、formnovalidate
屬性 | 描述 |
規定啟用元素的快捷鍵。Windows下是Alt+一個字母按鍵 | |
class | 規定元素的一個或多個類名(引用樣式表中的類)。 |
上下文選單在使用者點選元素時顯示。尚未被瀏覽器支援 (新增) | |
用於儲存頁面或應用程式的私有定製資料。 (新增) | |
dir | 規定元素中內容的文字方向。 |
規定元素是否可拖動。 (新增) | |
規定在拖動被拖動資料時是否進行復制、移動或連結。 (新增) | |
規定元素仍未或不再相關。 (新增) | |
id | 規定元素的唯一 id。 |
lang | 規定元素內容的語言。 |
規定是否對元素進行拼寫和語法檢查。 (新增) | |
style | 規定元素的行內 CSS 樣式。 |
規定元素的 tab 鍵次序。 | |
title | 規定有關元素的額外資訊。 |
規定是否應該翻譯元素內容。 (新增) |
- 與元素外觀相關的預設繼承
- 與佈局相關的預設不被繼承
- 不被繼承的可用inherit強制繼承
- 對於basefont、big、center、font、s、strike、tt、u這些元素;
- table元素中:sumary、align、width、bgcolor、cellpadding、cellspacing、frame、rules屬性
- tr(行)元素中:align、char、charoff、valign、bgcolor
- td(列)元素中:scope屬性已不再使用。abbr、axis、align、width、heigth、char、charoff、valign、bgcolor、nowrap
<frameset> | 框架集 | |
<frame> | 框架 | |
<iframe> | 內聯框架 | 僅僅支援 src 屬性 |
<noframe> | 無框架 |
<isindex> | 表明該文件是一個可用於檢索的閘道器指令碼 |
<big> | 大字號 |
<small> | 小字號 |
<u> | 下劃線 |
<s> | 刪除線 |
<strike> | 刪除線 |
<dir> | 目錄列表 |
<tt> | 打字機文字 |
<blink> | 閃爍文字(只適用Netscape瀏覽器) |
border | 邊框 |
vspace | 垂直間距 |
hspace | 水平間距 |
align | 排列 |