HTML5 代碼要怎樣憑“魅力”吸引搜索引擎的注意？

者 | Thaís V

譯者 | 彎月，責編 | 屠敏

以下為譯文：

為了讓你的 HTML5 代碼引起Google等搜索引擎的注意，你需要在HTML語言規(guī)則上下一番功夫，并在編寫代碼時應(yīng)用一些策略。編寫這樣的代碼其實并不難，而且還有很多好處。

在本文中，我們將介紹：

HTML5 結(jié)構(gòu)化語義的作用是什么？
為什么這種語義如此重要？
如何才能引起Google等搜索引擎的注意？我會舉例說明！
如何善加利用驗證工具？

下面，讓我們開始吧！

HTML5 結(jié)構(gòu)化語義的作用

HTML5結(jié)構(gòu)化語義的作用是通過語義標簽來組織文檔的內(nèi)容，它用到了設(shè)計目的各異的若干標簽。

語義化的HTML標簽旨在描述HTML文檔內(nèi)容的含義，還可以幫助程序員、瀏覽器和搜索引擎更加清楚地了解這些含義。

因此，語義化的代碼可以讓用戶導(dǎo)航更易于訪問、模式化且易于維護。HTML的作用不是構(gòu)造文檔本身，而是通過語義標簽賦予內(nèi)容含義。

正確使用語義元素對于構(gòu)建現(xiàn)代化、組織化、標準化的網(wǎng)頁至關(guān)重要，而且還能方便閱讀和維護代碼。

語義真的很重要嗎？

語義是Web平臺特有的主要優(yōu)勢之一，因此語義很有必要性。編寫具有恰當結(jié)構(gòu)的代碼有助于搜索引擎（比如Google）評估網(wǎng)站的內(nèi)容。除此之外，還有一些有價值的原因值得注意：

正確的標簽可以增加網(wǎng)站的競爭力；
正確的標簽可以方便有特殊需求的用戶訪問網(wǎng)站的內(nèi)容，例如視力障礙者；
正確的標簽可以減輕其他開發(fā)人員維護網(wǎng)站的壓力；
正確的標簽可以讓你的工作更加專業(yè)；
正確的標簽甚至可以影響到你的網(wǎng)站是否會出現(xiàn)在Google的搜索結(jié)果中。

猜猜看，誰將閱讀網(wǎng)站的語義，并決定網(wǎng)站的內(nèi)容是否與搜索關(guān)鍵字相關(guān)？沒錯，正是Google等搜索引擎！網(wǎng)站在搜索結(jié)果中的排名也是由搜索引擎決定。

你是不是應(yīng)該重視起來了？

而引起等搜索引擎注意的正是主要的語義標簽！

下面，我列出了一些主要的語義標簽：

<!DOCTYPE html>：<!DOCTYPE>不是HTML的標簽。這個標簽為瀏覽器提供了有關(guān)HTML版本的信息，在創(chuàng)建HTML時我們首先應(yīng)該寫明的就是這個標簽。

<head>：<head>是<title>、<link>、<script>等元素的容器，這些元素不會在瀏覽器中顯示。

<html>：<html>標簽是HTML元素的容器，包括那些不會顯示在瀏覽器中的元素。

<nav>：<nav>由一組鏈接列表組成。

<main>：一個HTML文件應(yīng)該只有一個<main>，它的作用是組織主要內(nèi)容，它不應(yīng)該出現(xiàn)在頁腳或文章等其他標簽中。

<section>：每個<section>都可以包含一系列有序的文章標題和其他標簽。它代表文檔的一個部分，例如文檔的章節(jié)、頁腳、旁邊或其他信息。

<article>：<article>應(yīng)該用于標記出一段獨立的內(nèi)容，不需要依賴其他內(nèi)容。

<aside>：<aside>的內(nèi)容應(yīng)該作為對主題的補充。你還可以用它添加與文檔主要內(nèi)容不相關(guān)的內(nèi)容，比如廣告。

<figure>：<figure>的出現(xiàn)表明文檔中包含圖像。

<figcaption>：<figcaption>包含了對圖像的說明。

<footer>：<footer>定義了站點的頁腳，或某一部分的頁腳。這個標簽的內(nèi)容多種多樣，例如導(dǎo)航菜單、社交媒體鏈接、服務(wù)條款、隱私政策、商標等等。

如果你有興趣查看更多標簽，那么請訪問w3school 在線教程。

驗證工具

驗證工具可以檢查你的代碼是否符合結(jié)構(gòu)化語義的規(guī)則，還會說明需要修改的地方。

在這里介紹一個工具：Validator W3（https://validator.w3.org/），這個工具使用起來非常簡單。首先你需要上傳HTML文件，或?qū)⒋a復(fù)制粘貼到網(wǎng)站上。你可以在網(wǎng)站上練習正確的語義結(jié)構(gòu)，并找到最佳實踐。

總結(jié)

本文提及的實踐非常重要。因為這種實踐可以提高網(wǎng)站的訪問量，提高你的網(wǎng)站在搜索引擎中的排名，而且也可以方便理解和維護你的代碼。

我們需要花點心思鉆研代碼，并讓我們的努力更加有價值。讓我們一起努力吸引Google等搜索引擎的注意！

原文：https://hackernoon.com/you-and-html5-can-impress-googles-robots-and-be-on-the-first-pages-s5122b8a

本文為 CSDN 翻譯，轉(zhuǎn)載請注明來源出處。

、XHTML與HTML的區(qū)別

文檔結(jié)構(gòu)

XHTML DOCTYPE 是強制性的

<html>中的 XML namespace 屬性是強制性的

<html>、<head>、<title>以及 <body>也是強制性的

元素語法

XHTML 元素必須正確嵌套

XHTML 元素必須始終關(guān)閉

XHTML 元素必須小寫

XHTML 文檔必須有一個根元素

屬性語法

XHTML 屬性必須使用小寫

XHTML 屬性值必須用引號包圍

XHTML 屬性最小化也是禁止的

二、HTML5中一些新特性

用于繪畫的 canvas 元素

用于媒介回放的 video 和 audio 元素

對本地離線存儲的更好的支持

新的特殊內(nèi)容元素，比如 article、footer、header、nav、section

新的表單控件，比如 calendar、date、time、email、url、search

注意：最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 將支持某些 HTML5 特性。

IE9 以下版本瀏覽器兼容HTML5的方法，使用本站的靜態(tài)資源的html5shiv包：

<!--[if lt IE 9]>
    <script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->

? ?/*html5*/
article,aside,dialog,footer,header,section,nav,figure,menu{display:block}

我自己是一名從事了多年開發(fā)的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年年初我花了一個月整理了一份最適合2019年學習的web前端學習干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關(guān)注我的頭條號并在后臺私信我：前端，即可免費獲取。

三、HTML5web存儲

使用HTML5可以在本地存儲用戶的瀏覽數(shù)據(jù)。

早些時候,本地存儲使用的是 cookie。但是Web 存儲需要更加的安全與快速. 這些數(shù)據(jù)不會被保存在服務(wù)器上，但是這些數(shù)據(jù)只用于用戶請求網(wǎng)站數(shù)據(jù)上.它也可以存儲大量的數(shù)據(jù)，而不影響網(wǎng)站的性能.

數(shù)據(jù)以鍵/值對存在, web網(wǎng)頁的數(shù)據(jù)只允許該網(wǎng)頁訪問使用。

瀏覽器支持：

Internet Explorer 8+, Firefox, Opera, Chrome, 和 Safari支持Web 存儲。

注意: Internet Explorer 7 及更早IE版本不支持web 存儲.

localStorage 和 sessionStorage

客戶端存儲數(shù)據(jù)的兩個對象為：

localStorage - 用于長久保存整個網(wǎng)站的數(shù)據(jù)，保存的數(shù)據(jù)沒有過期時間，直到手動去除。

sessionStorage - 用于臨時保存同一窗口(或標簽頁)的數(shù)據(jù)，在關(guān)閉窗口或標簽頁之后將會刪除這些數(shù)據(jù)。

在使用 web 存儲前,應(yīng)檢查瀏覽器是否支持 localStorage 和sessionStorage:

if(typeof(Storage)!=="undefined")
{
    // 是的! 支持 localStorage  sessionStorage 對象!
    // 一些代碼.....
} else {
    // 抱歉! 不支持 web 存儲。
}

不管是 localStorage，還是 sessionStorage，可使用的API都相同，常用的有如下幾個（以localStorage為例）：

保存數(shù)據(jù)：localStorage.setItem(key,value);

讀取數(shù)據(jù)：localStorage.getItem(key);

刪除單個數(shù)據(jù)：localStorage.removeItem(key);

刪除所有數(shù)據(jù)：localStorage.clear();

得到某個索引的key：localStorage.key(index);

四、HTML5 應(yīng)用程序緩存

HTML5 -應(yīng)用程序緩存=>使用文章鏈接跳轉(zhuǎn)點這里

五、HTML5 服務(wù)器發(fā)送事件（Server-Sent Events）

Server-Sent 事件指的是網(wǎng)頁自動獲取來自服務(wù)器的更新。

以前也可能做到這一點，前提是網(wǎng)頁不得不詢問是否有可用的更新。通過服務(wù)器發(fā)送事件，更新能夠自動到達。

例子：Facebook/Twitter 更新、股價更新、新的博文、賽事結(jié)果等。

所有主流瀏覽器均支持服務(wù)器發(fā)送事件，除了 Internet Explorer。

<h1>獲取服務(wù)端更新數(shù)據(jù)</h1>
<div id="result"></div>

if(typeof(EventSource)!=="undefined")
{
	var source=new EventSource("demo_sse.php");
	source.onmessage=function(event)
	{
		document.getElementById("result").innerHTML+=event.data + "<br>";
	};
}
else
{
	document.getElementById("result").innerHTML="抱歉，你的瀏覽器不支持 server-sent 事件...";
}

六、HTML5 WebSocket

WebSocket 是 HTML5 開始提供的一種在單個 TCP 連接上進行全雙工通訊的協(xié)議。

WebSocket 使得客戶端和服務(wù)器之間的數(shù)據(jù)交換變得更加簡單，允許服務(wù)端主動向客戶端推送數(shù)據(jù)。在 WebSocket API 中，瀏覽器和服務(wù)器只需要完成一次握手，兩者之間就直接可以創(chuàng)建持久性的連接，并進行雙向數(shù)據(jù)傳輸。

在 WebSocket API 中，瀏覽器和服務(wù)器只需要做一個握手的動作，然后，瀏覽器和服務(wù)器之間就形成了一條快速通道。兩者之間就直接可以數(shù)據(jù)互相傳送。

現(xiàn)在，很多網(wǎng)站為了實現(xiàn)推送技術(shù)，所用的技術(shù)都是 Ajax 輪詢。輪詢是在特定的的時間間隔（如每1秒），由瀏覽器對服務(wù)器發(fā)出HTTP請求，然后由服務(wù)器返回最新的數(shù)據(jù)給客戶端的瀏覽器。這種傳統(tǒng)的模式帶來很明顯的缺點，即瀏覽器需要不斷的向服務(wù)器發(fā)出請求，然而HTTP請求可能包含較長的頭部，其中真正有效的數(shù)據(jù)可能只是很小的一部分，顯然這樣會浪費很多的帶寬等資源。

HTML5 定義的 WebSocket 協(xié)議，能更好的節(jié)省服務(wù)器資源和帶寬，并且能夠更實時地進行通訊。

詳情和代碼示例：.

七、HTTP狀態(tài)消息

1xx: 信息

2xx: 成功

3xx: 重定向

4xx: 客戶端錯誤

5xx: 服務(wù)器錯誤

詳情

八、HTTP 方法：GET 對比 POST

兩種最常用的 HTTP 方法是：GET 和 POST。

什么是 HTTP ？

超文本傳輸協(xié)議（HTTP）的設(shè)計目的是保證客戶端與服務(wù)器之間的通信。

HTTP 的工作方式是客戶端與服務(wù)器之間的請求-應(yīng)答協(xié)議。

web 瀏覽器可能是客戶端，而計算機上的網(wǎng)絡(luò)應(yīng)用程序也可能作為服務(wù)器端。

舉例：客戶端（瀏覽器）向服務(wù)器提交 HTTP 請求；服務(wù)器向客戶端返回響應(yīng)。響應(yīng)包含關(guān)于請求的狀態(tài)信息以及可能被請求的內(nèi)容。

GET - 從指定的資源請求數(shù)據(jù)。

POST - 向指定的資源提交要被處理的數(shù)據(jù)。

GET 方法

請注意，查詢字符串（名稱/值對）是在 GET 請求的 URL 中發(fā)送的：

/test/demo_form.php?name1=value1&name2=value2

有關(guān) GET 請求的其他一些注釋：

GET 請求可被緩存

GET 請求保留在瀏覽器歷史記錄中

GET 請求可被收藏為書簽

GET 請求不應(yīng)在處理敏感數(shù)據(jù)時使用

GET 請求有長度限制

GET 請求只應(yīng)當用于取回數(shù)據(jù)

POST 方法

請注意，查詢字符串（名稱/值對）是在 POST 請求的 HTTP 消息主體中發(fā)送的：

有關(guān) POST 請求的其他一些注釋：

POST 請求不會被緩存

POST 請求不會保留在瀏覽器歷史記錄中

POST 不能被收藏為書簽

POST 請求對數(shù)據(jù)長度沒有要求

其他 HTTP 請求方法

下面的表格列出了其他一些 HTTP 請求方法：

原文鏈接：https://blog.csdn.net/weixin_39834961/article/details/103765680
作者：yhlyeah

程序員web前端教程分享初學HTML5的幾點建議，最近幾年，移動互聯(lián)網(wǎng)發(fā)展正處在飛速增長的態(tài)勢，Web前端開發(fā)工程師的崗位吸引了不少人，很多人通過學習來轉(zhuǎn)行從事這個行業(yè)，作為Web前端開發(fā)中熱門的語言HTML5的熱度也一直居高不下，那么零基礎(chǔ)的時候應(yīng)該怎么學習呢？

前端初始的知識點，都不算很難，但是內(nèi)容比較多，此時在學習的時候需要戒驕戒躁，一定要沉下心來，HTML為結(jié)構(gòu)，CSS是樣式，JS是功能等等，梳理好清晰的知識點思維導(dǎo)圖，這部分內(nèi)容其實并沒有想象中的那么難。

在學習時還需要注意以下幾個方面：

1、制定一個系統(tǒng)的學習計劃。HTML5雖然難度不大，但是內(nèi)容卻比較多，在學習的過程中要循序漸進，一個比較常見的計劃就是依次學習HTML5、CSS和JavaScript，JavaScript是學習的一個重點。一個好的學習計劃，能夠讓自己在學習的時候更加專注，每完成一天的任務(wù)，都會有一種成就感，久而久之，對于編程語言的學習就會更有興趣和動力。而且一個良好的學習計劃，會讓自己的效率提高不少。

2、實戰(zhàn)編寫能力是重中之重。實踐是學習HTML5的重要環(huán)節(jié)，由于HTML5的細節(jié)比較多，要想詳細的掌握這些內(nèi)容一定是通過自己不斷寫代碼來加深印象和查缺補漏的。切記編程語言是一門技術(shù)，如果沒有大量的實踐練習，是很難將HTML5中的知識點掌握的，如果了解了各個知識點的內(nèi)容而不去練習，不用多久就會將這些知識點給忘記，到時候再去返工復(fù)習，平白會浪費不少自己的寶貴時間和精力。

3、技術(shù)想要進步，交流是很關(guān)鍵的一種途徑。交流的方式也有很多種，不一定是要和同行們通過聊天工具才算是交流。現(xiàn)在因為互聯(lián)網(wǎng)的發(fā)展和進步，我們能夠在各個搜索引擎上找到我們想要的知識點，這些知識點就是這個行業(yè)的前輩們，將他們的學習思維或是工作時編寫程序的技巧等分享給我們。現(xiàn)在前端開發(fā)的技術(shù)更新速度還是比較快的，幾乎每隔一段時間就會有新的框架，我們?nèi)绻蝗ズ推渌私涣鳎皇情]門造車的話，進步只會越來越慢，甚至還會退步。

4、前期就要養(yǎng)成清晰、整潔的代碼編寫習慣。有一個良好的代碼規(guī)范習慣，不僅方便我們自己檢測自己的代碼，在以后的工作中也能為同項目的同事們節(jié)省出大量的時間和精力。

在線咨詢

上一篇：java中Filter的用法
下一篇：產(chǎn)品經(jīng)理的技術(shù)腦：html是什么意思？

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

HTML5 代碼要怎樣憑“魅力”吸引搜索引擎的注意？

您的項目需求