當(dāng)前位置：首頁 > 前端技术 > HTML >内容正文

HTML

HTML的语义化，你需要深入了解

發(fā)布時間：2024/6/21 HTML 41 豆豆

生活随笔收集整理的這篇文章主要介紹了 HTML的语义化，你需要深入了解小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

有關(guān)HTML的一些基礎(chǔ)課程，很多網(wǎng)站都有講，于我而言，真正實踐起來，我只要求我能夠讓它表現(xiàn)出我所想要的結(jié)果即可。然而，這種要求，對于后期的維護(hù)與測試，真的是。。。。。。想起日前我們所做的這個項目，那里面的jsp代碼，感覺有些看不下去，各種標(biāo)簽混雜一起，而且經(jīng)常使用的是無實義的比如div，看起來真是頭疼！所以，此番我做一個總結(jié)，方便日后做項目時，知道該如何規(guī)范好自己的代碼，做到嚴(yán)謹(jǐn)。

HTML，XHTML的區(qū)別：

HTML，HyperText Mark-up Language，是構(gòu)成網(wǎng)頁文檔的主要語言。指的是html4，不過html5已經(jīng)很火了。

XHTML，EXtensible?HyperText Mark-up Language，較于html，它更加嚴(yán)格。

XHTML標(biāo)簽必須閉合；
XHTML標(biāo)簽及屬性必須小寫；
XHTML標(biāo)簽屬性必須用引號；
XHTML id屬性代替name屬性；

div和span

div是塊元素，包含行內(nèi)元素，不與其他的元素同行；span是行內(nèi)元素，可與其他元素同行；

div大結(jié)構(gòu)的劃分；span應(yīng)用樣式；

語義化

所謂語義化，就是將標(biāo)簽的語義理解，放在它應(yīng)該在的位置。

圖片語義化：

figure和figcaption：figure元素用于圖片和圖注，figcaption用于圖注的文字；

表格語義化：

標(biāo)簽	說明
table	表格
caption	標(biāo)題
thead	表頭
tbody	表身
tfoot	表尾
tr	行
th	表頭單元格
td	表格單元格

表單語義化：

label標(biāo)簽，它的for屬性為所關(guān)聯(lián)表單元素的id。for有兩個作用：綁定label和表單；增強(qiáng)鼠標(biāo)可用性，即點擊文本，表單元素也可獲得焦點。
fieldset和legend，fieldset給表單進(jìn)行分組，legend用于某一組表單的標(biāo)題；

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>html</title> 6 </head> 7 <body> 8 <form action="" method="post"> 9 <fieldset> 10 <legend>登陸系統(tǒng)</legend> 11 <p> 12 <label for="name">賬號：</label><input type="text" id="name" name="name" /> 13 </p> 14 <p> 15 <label for="pwd">密碼：</label><input type="password" id="name" name="name" /> 16 </p> 17 <input type="checkbox" id="remenber" name="remenber" /><label for="remenber">記住我</label> 18 <input type="submit" value="登陸" /> 19 </fieldset> 20 </form> 21 </body> 22 </html>

其效果顯示：

相對也是比較好看的。

用多了自然也就熟悉了~

轉(zhuǎn)載于:https://www.cnblogs.com/zxcjj/p/6654455.html

總結(jié)

以上是生活随笔為你收集整理的HTML的语义化，你需要深入了解的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

html
语义

上一篇： angular的自定义指令---详解
下一篇： livecd制作 centos