淺談HTML的語(yǔ)義化和一些簡(jiǎn)單優(yōu)化

2016/12/29 13:55:28來(lái)源：互聯(lián)網(wǎng)

1、什么是語(yǔ)義化？

必應(yīng)網(wǎng)典的詮釋

語(yǔ)義化是指用合理HTML標(biāo)記以及其特有的屬性去格式化文檔內(nèi)容。普通地講,語(yǔ)義化就是對(duì)數(shù)據(jù)和信息進(jìn)行處理,使得機(jī)器可以理解. 語(yǔ)義化的(X)HTML文檔有助于提拔你的網(wǎng)站對(duì)訪客的易用性，比如使用PDA、筆墨欣賞器以及殘障人士將從中受益。對(duì)于搜索引擎或者爬蟲(chóng)軟件來(lái)說(shuō)，則有助于它們建立索引，并可能給予一個(gè)較高的權(quán)值。事實(shí)上SEO最有用的一種辦法，就是對(duì)網(wǎng)頁(yè)的HTML結(jié)構(gòu)進(jìn)行重構(gòu)，實(shí)質(zhì)上就是語(yǔ)義化。

簡(jiǎn)單來(lái)說(shuō)，就是根據(jù)內(nèi)容的結(jié)構(gòu)化（內(nèi)容語(yǔ)義化），選擇合適的標(biāo)簽（代碼語(yǔ)義化）便于開(kāi)發(fā)者閱讀和寫(xiě)出更優(yōu)雅的代碼的同時(shí)讓欣賞器的爬蟲(chóng)和機(jī)器很好地解析，什么樣的內(nèi)容就用什么樣的標(biāo)簽。

2、語(yǔ)義化的益處？

在css文件沒(méi)有成功加載的時(shí)候頁(yè)面也能呈現(xiàn)好的內(nèi)容結(jié)構(gòu)；利于SEO，讓搜索引擎和爬蟲(chóng)軟件抓取更多有效的信息，建立索引，獲取較高的權(quán)值；方便其他設(shè)備解析（如屏幕閱讀器、瞽者閱讀器、移動(dòng)設(shè)備）以意義的體例來(lái)渲染網(wǎng)頁(yè)；

3、HTML5的語(yǔ)義化

最新的HTML5就網(wǎng)頁(yè)結(jié)構(gòu)化增長(zhǎng)了一體系的結(jié)構(gòu)化標(biāo)簽

結(jié)構(gòu)：

XML/HTML Code復(fù)制內(nèi)容到剪貼板

<header>頭部</header>
<nav>導(dǎo)航</nav>
<article>
<section>內(nèi)容1</section>
<section>內(nèi)容2</section>
<section>內(nèi)容3</section>
</article>
<aside>側(cè)邊欄</aside>
<footer>底部</footer>

4、寫(xiě)HTML必要細(xì)致的點(diǎn)

標(biāo)簽閉合</>，/>;

精確使用標(biāo)簽嵌套，避免行內(nèi)元素圍困塊元素；

合理使用標(biāo)簽，盡量少使用無(wú)語(yǔ)義的標(biāo)簽div，span，在css文件沒(méi)有成功加載的時(shí)候頁(yè)面也能呈現(xiàn)好的內(nèi)容結(jié)構(gòu)；

使用<h1>、<h2>、<h3>、<h4>、<h5>、<h6>,作為題目使用，并且依據(jù)緊張性遞減，<h1>是最高的等級(jí)；

使用<p>區(qū)分段落，避免使用<br />換行；

不要使用純樣式的標(biāo)簽，b，font，u等，改為css設(shè)置；

使用表格時(shí)，使用<thead>，<tbody>，<tfoot>圍困頭部，主體內(nèi)容，表格；

5、關(guān)于SEO優(yōu)化，HTML必要做些什么？

文檔類型同一使用HTML5 doctype <!DOCTYPE HTML>；

meta標(biāo)簽優(yōu)化，重要有title、description、keywords三個(gè)地方，結(jié)束不要使用“ />”，應(yīng)該直接寫(xiě)“>”；

css文件最好使用一個(gè)，放在頭部<head>標(biāo)簽里面；

js文件最好放在底部，避免因加載js文件壅塞HTML的渲染；

使用外聯(lián)文件，避免在HTML直接寫(xiě)css和js的代碼；

引入文件時(shí)使用絕對(duì)地址，絕對(duì)地址包括了網(wǎng)站的域名；

img標(biāo)簽加上alt關(guān)鍵字，利于SEO優(yōu)化，盡量不要使用“的”、“上”、“好”、“等等”等，搜索引擎數(shù)據(jù)庫(kù)默認(rèn)不收錄的字；

logo處加h1標(biāo)簽，搜索引擎默認(rèn)h1標(biāo)簽這個(gè)題目是網(wǎng)頁(yè)中最緊張的信息，所以我們把最緊張信息入在<H1>標(biāo)簽內(nèi)；

關(guān)于html網(wǎng)頁(yè)是否吻合標(biāo)準(zhǔn)，可以在這個(gè)網(wǎng)頁(yè)檢查，直接輸入鏈接即可查看檢查效果

https://validator.w3.org/nu/

以上就是小編為大家?guī)?lái)的淺談HTML的語(yǔ)義化和一些簡(jiǎn)單優(yōu)化悉數(shù)內(nèi)容了，盼望大家多多支持圖趣網(wǎng)~

[教程作者：佚名]

關(guān)鍵詞：淺談語(yǔ)義一些簡(jiǎn)單優(yōu)化

免責(zé)聲明：本站文章系圖趣網(wǎng)整理發(fā)布，如需轉(zhuǎn)載，請(qǐng)注明出處，素材資料僅供個(gè)人學(xué)習(xí)與參考，請(qǐng)勿用于商業(yè)用途！
本文地址：http://m.pkvc.cn/tutorial/wd3339.html

上一篇:Html中使用自定義圖片來(lái)實(shí)現(xiàn)checkbox表現(xiàn)的方法

下一篇:border-radius是向元素添加圓角邊框的方法

您可能還喜歡

這些是最新的

最熱門(mén)的教程

淺談HTML的語(yǔ)義化和一些簡(jiǎn)單優(yōu)化

您可能還喜歡

網(wǎng)頁(yè)教程分類