色图激情另类图区|A片好大好紧好爽视频免费|国产女同在线免费观看|交换朋友快乐的情侣|huangsewangzhang|综合在线视频自拍|风韵丰满啪啪区老熟

新聞

html的語義化

發布時間

2017-07-01

來源

來自互聯網

移動

手機閱覽

1、什么是HTML語義化?


基本上都是圍繞著幾個主要的標簽,像標題(H1~H6)、列表(li)、強調(strong em)等等


根據內容的結構化(內容語義化),選擇合適的標簽(代碼語義化)便于開發者閱讀和寫出更優雅的代碼的同時讓瀏覽器的爬蟲和機器很好地解析。


2、為什么要語義化?


<1>為了在沒有CSS的情況下,頁面也能呈現出很好地內容結構、代碼結構:為了裸奔時好看;

<2>用戶體驗:例如title、alt用于解釋名詞或解釋圖片信息、label標簽的活用;

<3>有利于SEO:和搜索引擎建立良好溝通,有助于爬蟲抓取更多的有效信息:爬蟲依賴于標簽來確定上下文和各個關鍵字的權重;

<4>方便其他設備解析(如屏幕閱讀器、盲人閱讀器、移動設備)以意義的方式來渲染網頁;

<5>便于團隊開發和維護,語義化更具可讀性,是下一步吧網頁的重要動向,遵循W3C標準的團隊都遵循這個標準,可以減少差異化。


3、寫HTML代碼時應注意什么?


盡可能少的使用無語義的標簽div和span;

在語義不明顯時,既可以使用div或者p時,盡量用p, 因為p在默認情況下有上下間距,對兼容特殊終端有利;

不要使用純樣式標簽,如:b、font、u等,改用css設置。

需要強調的文本,可以包含在strong或者em標簽中(瀏覽器預設樣式,能用CSS指定就不用他們),strong默認樣式是加粗(不要用b),em是斜體(不用i);

使用表格時,標題要用caption,表頭用thead,主體部分用tbody包圍,尾部用tfoot包圍。表頭和一般單元格要區分開,表頭用th,單元格用td;

表單域要用fieldset標簽包起來,并用legend標簽說明表單的用途;

每個input標簽對應的說明文本都需要使用label標簽,并且通過為input設置id屬性,在lable標簽中設置for=someld來讓說明文本和相對應的input關聯起來。


4、語義化HTML改怎么做呢?

在做前端開發的時候要記住:HTML 告訴我們一塊內容是什么(或其意義),而不是它長的什么樣子,它的樣子應該由CSS來決定。


寫語義化的 HTML 結構其實很簡單,首先掌握 HTML 中各個標簽的語義,在看到內容的時候想想用什么標簽能更好的描述它,是什么就用什么標簽。


<h1>~<h6> ,作為標題使用,并且依據重要性遞減,<h1> 是最高的等級。


<p>段落標記,知道了 <p> 作為段落,你就不會再使用 <br /> 來換行了,而且不需要 <br /> 來區分段落與段落。<p> 中的文字會自動換行,而且換行的效果優于 <br />。段落與段落之間的空隙也可以利用 CSS 來控制,很容易而且清晰的區分出段落與段落。


<ul>、<ol>、<li>,<ul> 無序列表,這個被大家廣泛的使用,<ol> 有序列表也挺常用。在 web 標準化過程中,<ul> 還被更多的用于導航條,本來導航條就是個列表,這樣做是完全正確的,而且當你的瀏覽器不支持 CSS 的時候,導航鏈接仍然很好使,只是美觀方面差了一點而已。


<dl>、<dt>、<dd>,<dl> 就是“定義列表”。比如說詞典里面的詞的解釋、定義就可以用這種列表。


<em>、<strong>,<em> 是用作強調,<strong> 是用作重點強調。


<table>、<td>、<th>、<caption>, (X)HTML中的表格不再是用來布局。


資訊列表

其他的資訊
OTHER