當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

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

發布時間：2024/6/21 HTML 43 豆豆

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

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

HTML，XHTML的區別：

HTML，HyperText Mark-up Language，是構成網頁文檔的主要語言。指的是html4，不過html5已經很火了。

XHTML，EXtensible?HyperText Mark-up Language，較于html，它更加嚴格。

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

div和span

div是塊元素，包含行內元素，不與其他的元素同行；span是行內元素，可與其他元素同行；

div大結構的劃分；span應用樣式；

語義化

所謂語義化，就是將標簽的語義理解，放在它應該在的位置。

圖片語義化：

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

表格語義化：

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

表單語義化：

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

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>登陸系統</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>

其效果顯示：

相對也是比較好看的。

用多了自然也就熟悉了~

轉載于:https://www.cnblogs.com/zxcjj/p/6654455.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

html
语义

上一篇： angular的自定义指令---详解
下一篇：前端常用相关缩写