HTML5中新元素、新屬性匯總;HTML5中已經不支持元素(或改為css實現)等


一、新元素

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來實現連接

  • 還有image型的input元素中新增的屬性:如formaction、formencytpe、 formmethod、formtarget、formnovalidate
等價於button元素的同名屬性

三、其他

1. data自定義屬性

2. 全局屬性:
屬性 描述
accesskey 規定激活元素的快捷鍵。Windows下是Alt+一個字母按鍵
class 規定元素的一個或多個類名(引用樣式表中的類)。
contenteditable 規定元素內容是否可編輯。                                             (新增)
contextmenu 上下文菜單在用戶點擊元素時顯示。尚未被瀏覽器支持    (新增)
data-* 用於存儲頁面或應用程序的私有定制數據。                     (新增)
dir 規定元素中內容的文本方向。
draggable 規定元素是否可拖動。                                                   (新增)
dropzone 規定在拖動被拖動數據時是否進行復制、移動或鏈接。    (新增)
hidden 規定元素仍未或不再相關。                                             (新增)
id 規定元素的唯一 id。
lang 規定元素內容的語言。
spellcheck 規定是否對元素進行拼寫和語法檢查。                            (新增)
style 規定元素的行內 CSS 樣式。
tabindex 規定元素的 tab 鍵次序。
title 規定有關元素的額外信息。
translate 規定是否應該翻譯元素內容。                                          (新增)
3. 樣式繼承:
  • 與元素外觀相關的默認繼承
  • 與布局相關的默認不被繼承
  • 不被繼承的可用inherit強制繼承

4. http://lesscss.org(less改進css)
www.blueprint.org(css框架)

5. css中,人們默認1px約等於1in(英寸)的1/96(不是官方標准)
絕對單位:cm in mm pt pc(磅)
相對單位:em(與元素字號掛鈎) rem(與HTML元素掛鈎) ex(與元素高度掛鈎)

6. 盡量使用符合要求的專用元素,避開使用有一點語義的呈現性元素(或者說有一點呈現的語義元素)

7. 使用什么元素要根據它們的含義而不是習慣樣式來選擇

8. <q>標簽定義短的引用,內容會被“”修飾;
<blockquote> 標簽定義塊引用:瀏覽器在 blockquote 元素前后添加了換行,並增加了外邊距。

9. form標簽中的method元素中的get和post方法(配置http方法屬性)

10. form標簽中的name屬性,不會提交給服務器,所以該屬性作用僅限於DOM中;而input中如果不寫name屬性,那么用戶在其中輸入的信息就不會被傳到服務器

11. 可以在form標簽中定義id,這樣別的地方的表格可以與其關聯

12. SSL/HTTPS對瀏覽器和服務器之間的通信內容加密

13. input元素中的image生成圖像按鈕,服務器可以接受到用戶點擊的橫縱坐標

14. 表單的三種編碼方式:(未選擇multipart/form-data,但是仍然可以發送文件?)

四、不再支持的元素

(1)能使用CSS替代的元素
  1. 對於basefont、big、center、font、s、strike、tt、u這些元素;
由於他們的功能都是純粹為畫面展示服務的,而HTML5中提倡把畫面展示性功能放在CSS樣式表中統一編輯,所以將這些元素廢除了,並使用編輯CSS、添加CSS樣式表的方式進行替代。其中font元素允許由“所見即所得”的編輯器來插入,s元素、strike元素可以由del元素替代,tt元素可以由CSS的font-family屬性替代。
2. 表格元素
  • 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

(2)框架標記
<frameset> 框架集  
<frame> 框架  
<iframe> 內聯框架 僅僅支持 src 屬性
<noframe> 無框架  

(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)
<isindex> 表明該文檔是一個可用於檢索的網關腳本  

12)文字修飾標記
<big> 大字號  
<small> 小字號  
<u> 下划線  
<s> 刪除線  
<strike> 刪除線  
<dir> 目錄列表  
<tt> 打字機文字  
<blink> 閃爍文字(只適用Netscape瀏覽器)  

13)圖片標記<img>屬性
border 邊框  
vspace 垂直間距  
hspace 水平間距  
align 排列  

注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



HTML5中已經不支持元素匯總,持續更新 HTML5中新的語義元素 HTML5中的新元素 HTML5是不是已經不支持