国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

【芝士整理】HTML的標簽們

stonezhu / 2942人閱讀

摘要:讀一遍文檔后的個人總結,重點在于整理語義化標簽的定義規范,記錄各種部件容易被忽略的特性。結構化,通過標簽先后順序和嵌套語法給樹提供基礎。標簽列表基于個人理解即非官方描述,給標簽劃分為結構化標簽語義化標簽功能化標簽,文檔標簽。

讀一遍MDN文檔后的個人總結,重點在于整理語義化標簽的定義規范,記錄各種部件容易被忽略的特性。
關于HTML

HTML的作用可以簡單總結為結構化、語義化和提供基礎API支持(HTML5)。

結構化,通過標簽先后順序和嵌套語法給DOM樹提供基礎。

語義化,語義化標簽給內容正確的意思、作用和外形。合理使用語義化標簽的意義在于貼合規則,這樣信息更加容易被檢索和利用,比如說可以輔助瀏覽器自動生成大綱、更容易讓屏幕閱讀器讀出網頁內容。

功能支持,基礎的比如超鏈接、圖片顯示功能,HTML5中的音視頻功能、矢量圖、3D圖像等等。

標簽列表

基于個人理解(即非官方描述),給標簽劃分為結構化標簽、語義化標簽、功能化標簽,文檔標簽。

結構化標簽

不包含特定語義及功能

div - 塊級內容容器

span - 內聯內容容器

br - 換行

hr - 分隔線

語義化標簽

包含特定語義,用戶代理一般會給特殊樣式表示,但無既定功能

header - 頁面的頁眉或者一個節段的頭部

nav - 主要鏈接集合,footer里的附加鏈接集可以不用nav

main - 文檔的主體部分,一般是包含中心主題或主要功能的內容放置區

article - 獨立結構,可獨立分配或可復用的內容結構,比如論壇帖子、評論

section - 一個節段,一個專題組

aside - 獨立于主體內容的部分,比如說廣告區,側邊欄

footer - 頁面的頁腳,或一個階段的尾部

figure - 獨立引用單元,比如引用圖片,常和figcaption配合使用

h1-h6 - 標題

p - 文本段落

ul+li - 無序列表

ol+li - 有序列表

dl+dt+dd - 描述列表,一個術語可有多條描述,多個術語也可共享同條描述。dl - description list, dt - description terms, dd - description description

Apple Inc.
is an American multinational technology company

em - 強調語氣,默認樣式為斜體

strong - 著重強調,默認樣式為粗體

i - 應用在傳統上用斜體表達的內容,比如說技術術語、外國文字之類的

b - 應用在傳統上用粗體表達的內容,比如說關鍵字、產品名稱等

u - 應用在傳統上用下劃線表達的內容,比如說拼寫錯誤

blockquote - 塊引用,cite屬性可表示引用源

q - 行內引用,同有cite屬性

cite - 引文,如果引用源需要具體的文字顯示,則需要這么使用

HTML5 是定義 HTML 標準的最新的版本

abbr - 縮略語

PRC

address - 聯系信息

You can contact author at www.somedomain.com.
If you see any bugs, please contact webmaster.
You may also want to visit us:
Mozilla Foundation
1981 Landings Drive
Building K
Mountain View, CA 94043-0801
USA

功能化標簽

a - 超鏈接

HTML5

相對URL和絕對URL的優劣:絕對URL需要查詢DNS找到服務器再請求,相對URL則會根據當前服務器地址直接請求

URL可使用mailto鏈接直接出發郵件應用,mailto鏈接可加入一些郵件信息

使用download屬性可指定保存文件名

img - 圖片


添加字幕文件

audio - 音頻

沒有poster, width, height屬性,其他與video類似

picture - 兼容多格式圖片(比如webP的應用)的容器,支持自適應加載,edge13以上支持


 
 

// 標簽內容跨越小部件時,可以用label包裹

input - 單行輸入框

readonly屬性規定無法輸入,disabled屬性禁止一切行為form表單數據中會剔除該部件數據。

type屬性,email/password/search/tel/url/number/range/color/date/hidden/radio/checkbox/file

select + option - 下拉選擇器



// optgroup增加選框標題

datalist - 自動補全選擇器

兼容性:IE10以下不受支持,Safari不支持



    Mac OS
    Windows
    Linux

文檔標簽

- 聲明文檔類型,規定頁面需要遵循的規則

- 描述文檔的數據

- 文檔字符編碼,描述在這個文檔中允許被使用的字符集

- name部分規定描述的信息類型,content部分規定描述的信息內容

一些站點設定有專用的元數據協議會在其站點內顯示特定信息,比如說Facebook的Open Graph Data

- 指定外部資源,并規定外部資源與當前文檔的關系



附錄

HTML5 標簽列表 - From MDN

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/54682.html

相關文章

  • 【前端芝士樹】詳解CSS盒模型、BFC、OffsetWidth&ClientWidth&am

    摘要:提供了糟糕的支持,而雖然接近標準,但依舊未能完全正確的支持標準。盡管修復了許多的問題,但是依然延續實現中的其它故障主要是盒模型問題。因此大部分的聲明將觸發嚴格模式即依據標準的規則渲染網頁。 深入理解CSS盒模型、BFC、OffsetWidth&ClientWidth&ScrollWidth 本文將從盒模型開始,一步步涉及一些常見的前端筆試和面試點 主要參考自第一篇文章,然而筆者在讀的時...

    binta 評論0 收藏0
  • 芝士整理】CSS基礎圖譜

    摘要:為了實現文字環繞效果,規范規定的措施是使父容器塌陷,元素脫離文檔流浮動產生,元素周圍的內容轉換為圍繞元素排列。 選擇器注意點 屬性選擇器 [attr^=value] - 開頭或全等 [attr$=value] - 結尾或全等 [attr*=value] - 包含值 [attr~=value] - 字符串包含 選擇器組 A > B - 直接子節點 A + B - 下一個兄弟節點 A...

    iOS122 評論0 收藏0
  • 【前端芝士樹】Javascript原型與原型鏈

    摘要:在創建對象不論是普通對象還是函數對象的時候,都有一個叫做的內置屬性,用于指向創建它的構造函數的原型對象,也就是。因為一個普通對象的構造函數所以原型鏈原型鏈的形成是真正是靠而非。參考文章最詳盡的原型與原型鏈終極詳解,沒有可能是。 【前端芝士樹】Javascript的原型、原型鏈以及繼承機制 前端的面試中經常會遇到這個問題,自己也是一直似懂非懂,趁這個機會整理一下 0. 為什么會出現原型和...

    yy736044583 評論0 收藏0
  • 芝士整理】瀏覽器存儲

    摘要:維護瀏覽器和服務器端會話狀態的一種方式,一般用于保存用戶身份信息。服務器端生成推送到瀏覽器端,瀏覽器負責保存和維護數據。 Cookie 維護瀏覽器和服務器端會話狀態的一種方式,一般用于保存用戶身份信息。 服務器端生成Cookie推送到瀏覽器端,瀏覽器負責保存和維護數據。 特點 域名下的所用請求都會帶上Cookie 每條Cookie限制在4KB左右 Cookie在過期時間之前一直有效,若...

    whlong 評論0 收藏0

發表評論

0條評論

stonezhu

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<