1. 程式人生 > >HTML5中新元素、新屬性彙總;HTML5中已經不支援元素(或改為css實現)等

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. 全域性屬性:
屬性 描述
規定啟用元素的快捷鍵。Windows下是Alt+一個字母按鍵
class 規定元素的一個或多個類名(引用樣式表中的類)。
上下文選單在使用者點選元素時顯示。尚未被瀏覽器支援    (新增)
用於儲存頁面或應用程式的私有定製資料。                     (新增)
dir 規定元素中內容的文字方向。
規定元素是否可拖動。                                                   (新增)
規定在拖動被拖動資料時是否進行復制、移動或連結。    (新增)
規定元素仍未或不再相關。                                             (新增)
id 規定元素的唯一 id。
lang 規定元素內容的語言。
規定是否對元素進行拼寫和語法檢查。                            (新增)
style 規定元素的行內 CSS 樣式。
規定元素的 tab 鍵次序。
title 規定有關元素的額外資訊。
規定是否應該翻譯元素內容。                                          (新增)
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 排列