HTML標簽的設計都是有語義考慮的,下表是部分標簽的全稱和中文翻譯。
標簽名 |
英文全拼 |
中文翻譯 |
div |
division |
分隔 |
span |
span |
范圍 |
ol |
ordered list |
排序列表 |
ul |
unordered list |
不排序列表 |
li |
list item |
列表項目 |
dl |
definition list |
定義列表 |
dt |
definition term |
定義術語 |
dd |
definitiion description |
定義描述 |
del |
deleted |
刪除 |
ins |
inserted |
插入 |
h1~h6 |
header 1 to header 6 |
標題1到標題6 |
p |
paragraph |
段落 |
hr |
horizontal rule |
水平尺 |
a |
anchor |
錨 |
abbr |
abbreviation |
縮寫詞 |
acronym |
acronym |
取首字母的縮寫詞 |
address |
address |
地址 |
var |
variable |
變量 |
pre |
preformatted |
預定義格式 |
blockquote |
block quotation |
區塊引用語 |
strong |
strong |
加重 |
em |
emphasized |
加重 |
b |
bold |
粗體 |
i |
italic |
斜體 |
big |
big |
變大 |
small |
small |
變小 |
sup |
superscripted |
上標 |
sub |
subscripted |
下標 |
br |
break |
換行 |
center |
center |
居中 |
font |
font |
字體 |
u |
underlined |
下劃線 |
s |
strikethrough |
刪除線 |
fieldset |
fieldset |
城集 |
legend |
legend |
圖標 |
caption |
caption |
標題 |
其中,div和soan其實是沒有語義的,它們只是分別用作塊級元素和行內元素的區域分隔符。
如何確定你的標簽是否語義良好
判斷網頁標簽語義是否良好的一個簡單方法就是:
去掉樣式,看網頁結構是否組織良好有序,是否仍然有很好的可讀性。 語義良好的網頁去掉樣式后結構依然很清晰。
同樣的設計圖,不同的HTML標簽可以通過不同的CSS實現同樣的頁面,但語義不好的CSS布局和語義良好的CSS布局在去樣式后的表現卻可能截然不同。
如果選用的標簽幾乎全是不帶語義的,那么在去樣式后網頁中幾乎看不到任何結構信息,可讀性非常差;如果選用的都是語義適合的標簽,去樣式后網頁依然具有非常好的可讀性。
所以我們的開發過程中,不要拿到一個任務后就馬上開始寫代碼,在拿到設計稿后不要急于馬上進行開發,而是先根據頁面結構進行分析,先考慮好框架,適用的標簽等,會讓整個開發過程更有規劃、更順暢,是一個先慢后快的過程。反之就可能出現先快后慢的局面,越到后期開發速度越慢,反復修改bug、打補丁。