首頁 web前端 H5教程 html5新增的屬性和廢除的屬性簡要概述_html5教程技巧

html5新增的屬性和廢除的屬性簡要概述_html5教程技巧

May 16, 2016 pm 03:49 PM

HTML5中,在新增加和廢除許多元素的同時,也增加和廢除了許多屬性。

新增的屬性

1、表單相關的屬性

對input(type=text)、select、textarea與button指定autofocus屬性。它以指定屬性的方式讓元素在畫面開啟時自動獲得焦點。 對input(type=text)、textarea指定placeholder屬性,它會對使用者的輸入進行提示,提示使用者可以輸入的內容。 對input、output、select、textarea、button與fieldset指定form屬性。它聲明屬於哪個表單,然後將其放置在頁面的任何位置,而不失表單之內。 對input(type=text)、textarea指定required屬性。此屬性表示使用者提交時進行檢查,檢查該元素內必定要有輸入內容。 為input標籤增加幾個新的屬性:autocomplete、min、max、multiple、pattern與step。還有list屬性與datalist元素配合使用;datalist元素與autocomplete屬性搭配使用。 multiple屬性允許上傳時一次上傳多個檔案; pattern屬性用於驗證輸入欄位的模式,其實就是正規表示式。 step 屬性規定輸入欄位的合法數字間隔(假如step="3",則合法數字應該是-3、0、3、6,以此類推),step 屬性可以與max 以及min 屬性配合使用,以創建合法值的範圍。 為input、button元素增加formaction、formenctype、formmethod、formnovalidate與formtarget屬性。使用者重載form元素的action、enctype、method、novalidate與target屬性。為fieldset元素增加disabled屬性,可以把它的子元素設為disabled狀態。 為input、button、form增加novalidate屬性,可以取消提交時進行的相關檢查,表單可以無條件地提交。

2、連結相關屬性

為a、area增加media屬性。規定目標 URL 是為什麼類型的媒介/裝置進行最佳化的。此屬性用於規定目標 URL 是為特殊裝置(例如 iPhone)、語音或列印媒介設計的。該屬性可接受多個值。只能在 href 屬性存在時使用。 為area增加herflang和rel屬性。 hreflang 屬性規定在被連結文件中的文字的語言。只有當設定了 href 屬性時,才能使用該屬性。註:此屬性是純諮詢性的。 rel 屬性規定目前文件與被連結文件/資源之間的關係。只有當使用 href 屬性時,才能使用 rel 屬性。 為link增加size屬性。 sizes 屬性規定被連結資源的尺寸。只有當被連結資源是圖示時 (rel="icon"),才能使用該屬性。該屬性可接受多個值。值以空格分隔。 為base元素增加target屬性,主要是保持與a元素的一致性。

3、其他屬性

為ol增加reversed屬性,它指定清單倒序顯示。 為meta增加charset屬性 為menu增加type和label屬性。 label為選單定義一個課件的標註,type屬性讓才當可以以上下文選單、工具列與列表cande但三種形式出現。 為style增加scoped屬性。它允許我們為文件的指定部分定義樣式,而不是整個文件。如果使用 "scoped" 屬性,那麼所規定的樣式只能套用到 style 元素的父元素及其子元素。 為script增減屬性,它定義腳本是否非同步執行。 async 屬性僅適用於外部腳本(只有在使用src 屬性時)有多種執行外部腳本的方法: 如果async="async":腳本相對於頁面的其餘部分異步地執行(當頁面繼續進行解析時,腳本將被執行) 如果不使用async 且defer="defer":腳本將在頁面完成解析時執行如果既不使用async 也不使用defer:在瀏覽器繼續解析頁面之前,立即讀取並執行腳本為html元素增加manifest,開發離線web應用程式時他與API結合使用,定義一個URL,在這個URL上描述文件的快取資訊。 為iframe增加撒個屬性,sandbox、seamless、srcdoc。用來提高頁面安全性,防止不信任的web頁面執行某些操作。

廢除的屬性

HTML4中某些屬性在HTML5中不再被使用,而是採用其他屬性或其他方式來取代。

在HTML 4中使用的屬性 使用該屬性的元素 在HTML 5中的替代方案
rev link、a rel
charset link、a 在被連結的資源的中使用HTTP Content-type頭元素
shape、coords a 使用area元素代替a元素
longdesc img、iframe 使用a元素連結到校長描述
target link 多餘屬性,被省略
nohref area 多餘屬性,被省略
profile head 多餘屬性,被省略
version html 多餘屬性,被省略
name img id
scheme meta 只為某個表單域使用scheme
archive、chlassid、codebose、codetype、declare、standby object 使用data與typc屬性類別呼叫插件。需要使用這些屬性來設定參數時,使用param屬性
valuetype、type param 使用name與value屬性,不宣告之的MIME型別
axis、abbr td、th 使用以明確簡潔的文字開頭、後跟詳述文字的形式。可以對更詳細內容使用title屬性,來讓儲存格的內容變得簡短
scope td 在被連結的資源的中使用HTTP Content-type頭元素
align caption、input、legend、div、h1、h2、h3、h4、h5、h6、p 使用CSS樣式表替代
alink、link、text、vlink、background、bgcolor body 使用CSS樣式表替代
align、bgcolor、border、cellpadding、cellspacing、frame、rules、width table 使用CSS樣式表替代
align、char、charoff、height、nowrap、valign tbody、thead、tfoot 使用CSS樣式表替代
align、bgcolor、char、charoff、height、nowrap、valign、width td、th 使用CSS樣式表替代
align、bgcolor、char、charoff、valign tr 使用CSS樣式表替代
align、char、charoff、valign、width col、colgroup 使用CSS樣式表替代
align、border、hspace、vspace object 使用CSS樣式表替代
clear br 使用CSS樣式表替代
compace、type ol、ul、li 使用CSS樣式表替代
compace dl 使用CSS樣式表替代
compace menu 使用CSS樣式表替代
width pre 使用CSS樣式表替代
align、hspace、vspace img 使用CSS樣式表替代
align、noshade、size、width hr 使用CSS樣式表替代
align、frameborder、scrolling、marginheight、marginwidth iframe 使用CSS樣式表替代
autosubmit menu  
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1664
14
CakePHP 教程
1423
52
Laravel 教程
1317
25
PHP教程
1268
29
C# 教程
1244
24
H5指的是什麼?探索上下文 H5指的是什麼?探索上下文 Apr 12, 2025 am 12:03 AM

H5referstoHTML5,apivotaltechnologyinwebdevelopment.1)HTML5introducesnewelementsandAPIsforrich,dynamicwebapplications.2)Itsupportsmultimediawithoutplugins,enhancinguserexperienceacrossdevices.3)SemanticelementsimprovecontentstructureandSEO.4)H5'srespo

H5:網絡標準和技術的發展 H5:網絡標準和技術的發展 Apr 15, 2025 am 12:12 AM

Web标准和技术从HTML4、CSS2和简单的JavaScript演变至今,经历了显著的发展。1)HTML5引入了Canvas、WebStorage等API,增强了Web应用的复杂性和互动性。2)CSS3增加了动画和过渡功能,使页面效果更加丰富。3)JavaScript通过Node.js和ES6的现代化语法,如箭头函数和类,提升了开发效率和代码可读性,这些变化推动了Web应用的性能优化和最佳实践的发展。

H5代碼:Web開發人員的最佳實踐 H5代碼:Web開發人員的最佳實踐 Apr 16, 2025 am 12:14 AM

H5代碼的最佳實踐包括:1.使用正確的DOCTYPE聲明和字符編碼;2.採用語義化標籤;3.減少HTTP請求;4.使用異步加載;5.優化圖像。這些實踐能提升網頁的效率、可維護性和用戶體驗。

H5是HTML5的速記嗎?探索細節 H5是HTML5的速記嗎?探索細節 Apr 14, 2025 am 12:05 AM

H5不僅僅是HTML5的簡稱,它代表了一個更廣泛的現代網頁開發技術生態:1.H5包括HTML5、CSS3、JavaScript及相關API和技術;2.它提供更豐富、互動、流暢的用戶體驗,能在多設備上無縫運行;3.使用H5技術棧可以創建響應式網頁和復雜交互功能。

H5:工具,框架和最佳實踐 H5:工具,框架和最佳實踐 Apr 11, 2025 am 12:11 AM

H5開發需要掌握的工具和框架包括Vue.js、React和Webpack。 1.Vue.js適用於構建用戶界面,支持組件化開發。 2.React通過虛擬DOM優化頁面渲染,適合複雜應用。 3.Webpack用於模塊打包,優化資源加載。

H5和HTML5:網絡開發中常用的術語 H5和HTML5:網絡開發中常用的術語 Apr 13, 2025 am 12:01 AM

H5與HTML5指的是同一個東西,即HTML5。 HTML5是HTML的第五個版本,帶來了語義化標籤、多媒體支持、畫布與圖形、離線存儲與本地存儲等新功能,提升了網頁的表現力和交互性。

HTML5的遺產:當前了解H5 HTML5的遺產:當前了解H5 Apr 10, 2025 am 09:28 AM

HTML5hassignificantlytransformedwebdevelopmentbyintroducingsemanticelements,enhancingmultimediasupport,andimprovingperformance.1)ItmadewebsitesmoreaccessibleandSEO-friendlywithsemanticelementslike,,and.2)HTML5introducednativeandtags,eliminatingthenee

了解H5代碼:HTML5的基本原理 了解H5代碼:HTML5的基本原理 Apr 17, 2025 am 12:08 AM

HTML5是構建現代網頁的關鍵技術,提供了許多新元素和功能。 1.HTML5引入了語義化元素如、、等,增強了網頁結構和SEO。 2.支持多媒體元素和,無需插件即可嵌入媒體。 3.表單增強了新輸入類型和驗證屬性,簡化了驗證過程。 4.提供了離線和本地存儲功能,提升了網頁性能和用戶體驗。

See all articles