HTML指派文檔内容的結構和含義, 内容呈現由css樣式控制
少亦可為多
标記隻應該應内容對語義的需要使用. 有條經驗法則是: 問問自己打算如何發揮一個元素的語義作用, 如果不能馬上答出就不用這個元素
别誤用元素
對内容進行标記時, 隻宜将元素用于他們原定的用途, 不要創造自有的語義. 如果找不到适合自己所要含義的元素, 可以考慮使用通用元素( 如span或div ), 并且用全局屬性class表明其含義. css樣式不是類屬性的唯一用途.
具體為佳
用來标記内容的元素應該選擇最為具體的那個. 如果已有元素能恰當表明内容的類型, 就不要使用通用元素. html4中存在依賴div建構頁面結構的傾向, 不好維護.
對使用者不要想當然
呈現與語義分離原則的目的完全是為了讓HTML文檔更易于程式化處理, 是以随着HTML5的采用和實作愈加廣泛, HTML内容的這種使用會日益增多. 如果不關心标記的準确性和一緻性, 這樣的HTML文檔處理起來更為困難, 使用者能為其找到的使用者也很有限.
用途: 建立HTML文檔的上層建築, 向浏覽器說明文檔的情況, 定義腳本程式和css樣式, 提供浏覽器禁用腳本時要顯示的内容
元素
說明
類型
h5新增或變化
base
設定相對URL的基礎
中繼資料
無變化
body
表示HTML文檔的内容
無
有變化
DOCTYPE
表示HTML文檔的開始
head
包含文檔的中繼資料
html
表示文檔中HTML部分的開始
link
定義與外部資源(通常是樣式表或網站圖示)的關系
meta
提供關于文檔的資訊
noscript
包含浏覽器禁用腳本或不支援腳本時顯示的内容
中繼資料, 短語
script
定義腳本語言, 可以是文檔内嵌的也可以是外部檔案中的
style
定義css樣式
title
設定文檔标題
用途: 為内容提供基本的結構和含義
a
生成超連結
短語, 流
abbr
縮略語
短語
b
不帶強調或着重意味地标記一段文字
br
表示換行
cite
表示其他作品的标題
code
表示計算機代碼片段
del
表示從文檔中删除的文字
新增
dfn
表示術語定義
em
表示着重強調的一段文字
i
表示與周邊内容秉性不同的一段文字, 比如來自另一種語言的詞語
ins
表示加入文檔的文字
kbd
表示使用者輸入内容
mark
表示一段因為與上下文中另一詞語相關而被突出顯示的内容
q
表示引自他處的内容
rp
與ruby元素結合使用, 标記括号
rt
與ruby元素結合使用, 标記注音符号
ruby
表示位于表意檔案上方或右方的注音符号
s
表示文字已不再準确
samp
表示計算機程式的輸出内容
small
表示小号字型内容
span
一個沒有自己語義的通用元素
strong
表示重要内容
sub
表示下标文字
sup
表示上标文字
time
表示時間或者日期
u
var
表示程式或計算機系統中的變量
wbr
表示可安全換行的地方
用途: 将相關内容分組
blockquote
表示引自他處的大段内容
流
dd
用在dl元素之中, 表示定義
div
一個沒有任何既定語義的通用元素, 與span類似
dl
表示包含一系列術語和定義的說明清單
dt
用在dl元素之中, 表示術語
figcaption
發送figure元素的标題
figure
表示圖檔
hr
表示段落級别的主題轉換
li
用在ul, ol和menu元素中, 表示清單項
ol
表示有序清單
p
表示段落
pre
表示其格式應被保留的内容, 如code
ul
表示無序清單
用途: 劃分内容, 讓每個概念, 觀點或主題彼此分隔開. 它們中有許多是新增的. 這些元素為分離元素的含義和外觀做了大量基礎性工作
address
表示文檔或article的聯系資訊
article
表示一段獨立的内容
aside
表示與周邊内容稍有牽涉的内容
details
生成一個區域, 使用者将其展開可以獲得更多細節知識
footer
表示尾部
h1-h6
表示标題
header
表示首部
hgroup
将一組标題組織在一起, 以便文檔大綱隻顯示其中第一個标題
nav
表示有意集中在一起的導航元素
section
表示一個重要的概念或主題
summary
用在details元素中, 表示該元素内容的标題或說明
用途: 制作顯示資料的表格. 表格在html5中的主要變化時不能再用來控制頁面布局, 這項工作轉交給了css
caption
表示表格标題
col
表示一列
colgroup
表示一組列
table
表示表格
tbody
表示表格主體
td
表示單元格
tfoot
表示表腳
th
表示标題行單元格
thead
表示标題行
tr
表示一行單元格
用途: 建立html表單, 以便擷取使用者的輸入資料
button
表示可用來送出或重置表單的按鈕(或一般按鈕)
datalist
定義一組提供給使用者的建議值
fieldset
表示一組表單元素
form
表示html表單
input
表示用來收集使用者輸入資料的控件
keygen
生成一對公鑰和私鑰
label
表示表單元素的說明标簽
legend
表示fieldset元素的說明性标簽
optgroup
表示一組相關的option元素
option
表示供使用者選擇的一個選項
output
表示計算結果
select
給使用者提供一組固定的選項
textarea
使用者可以用它輸入多行文字
用途: 在html文檔中嵌入内容
area
表示一個用于用戶端分區響應圖的區域
audio
表示一個音頻資源
canvas
生成一個動态的圖形畫布
embed
用插件在html文檔中嵌入内容
iframe
通過建立一個浏覽上下文在一個文檔中嵌入另一個文檔
img
嵌入圖像
map
定義用戶端分區響應圖
meter
嵌入數值在許可值範圍内的圖形表示
object
在html文檔中嵌入内容. 也可用于生成浏覽器上下文
和生成用戶端分區響應圖
param
表示将通過object元素傳遞給插件的參數
progress
嵌入目标進展或任務完成情況的圖形表示
source
表示媒體資源
svg
表示結構化矢量内容
track
表示媒體的附加軌道
video
表示視訊資源
全局屬性( global attribute ), 用來配置所有元素共有的行為
設定選擇元素的快捷鍵
按下 alt+t, 焦點便轉移到name輸入框上
這個是html5中新增的屬性, 設定後使用者能修改内容
效果如下
規定元素中文字的方向, 有效值有 ltr(從左到右), rtl(從右到左)
spellcheck屬性用來表明浏覽器是否應該對元素的内容進行拼寫檢查, 用于使用者編輯文字時有幫助
屬性cite: 指定原因文檔的url, datetime: 設定修改時間
rt: 用來标記注音符号, rp: 用來标記供不支援注音符号特性的浏覽器顯示在注音符号前後的括号
屬性 datetime: 以RFC3339指明日期
屬性 pudate: 如果是true, 表明time表示整個html或離該元素最近的article的釋出日期
表示超過目前浏覽器視窗的内容适合再此換行, 換不換行還是由浏覽器決定
基本都是h5新增元素, 除了 summary 都是塊元素, 按實際用途使用标簽
這個特性還未得到很好的支援, 暫不建議使用
type指定内容的mime類型
這個涉及的知識點較多, 就不在這示範
希望讀者在看完後能提出意見, 點個贊, 鼓勵一下, 我們一起進步. 加油 !!