整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
者 | Thaís V
譯者 | 彎月，責編 | 屠敏
以下為譯文：
為了讓你的 HTML5 代碼引起Google等搜索引擎的注意，你需要在HTML語言規則上下一番功夫，并在編寫代碼時應用一些策略。編寫這樣的代碼其實并不難，而且還有很多好處。
在本文中，我們將介紹：
HTML5 結構化語義的作用是什么？
為什么這種語義如此重要？
如何才能引起Google等搜索引擎的注意？我會舉例說明！
如何善加利用驗證工具？
下面，讓我們開始吧！
HTML5 結構化語義的作用
HTML5結構化語義的作用是通過語義標簽來組織文檔的內容，它用到了設計目的各異的若干標簽。
語義化的HTML標簽旨在描述HTML文檔內容的含義，還可以幫助程序員、瀏覽器和搜索引擎更加清楚地了解這些含義。
因此，語義化的代碼可以讓用戶導航更易于訪問、模式化且易于維護。HTML的作用不是構造文檔本身，而是通過語義標簽賦予內容含義。
正確使用語義元素對于構建現代化、組織化、標準化的網頁至關重要，而且還能方便閱讀和維護代碼。
語義真的很重要嗎？
語義是Web平臺特有的主要優勢之一，因此語義很有必要性。編寫具有恰當結構的代碼有助于搜索引擎（比如Google）評估網站的內容。除此之外，還有一些有價值的原因值得注意：
正確的標簽可以增加網站的競爭力；
正確的標簽可以方便有特殊需求的用戶訪問網站的內容，例如視力障礙者；
正確的標簽可以減輕其他開發人員維護網站的壓力；
正確的標簽可以讓你的工作更加專業；
正確的標簽甚至可以影響到你的網站是否會出現在Google的搜索結果中。
猜猜看，誰將閱讀網站的語義，并決定網站的內容是否與搜索關鍵字相關？沒錯，正是Google等搜索引擎！網站在搜索結果中的排名也是由搜索引擎決定。
你是不是應該重視起來了？
而引起等搜索引擎注意的正是主要的語義標簽！
下面，我列出了一些主要的語義標簽：
<!DOCTYPE html>：<!DOCTYPE>不是HTML的標簽。這個標簽為瀏覽器提供了有關HTML版本的信息，在創建HTML時我們首先應該寫明的就是這個標簽。
<head>：<head>是<title>、<link>、<script>等元素的容器，這些元素不會在瀏覽器中顯示。
<html>：<html>標簽是HTML元素的容器，包括那些不會顯示在瀏覽器中的元素。
<nav>：<nav>由一組鏈接列表組成。
<main>：一個HTML文件應該只有一個<main>，它的作用是組織主要內容，它不應該出現在頁腳或文章等其他標簽中。
<section>：每個<section>都可以包含一系列有序的文章標題和其他標簽。它代表文檔的一個部分，例如文檔的章節、頁腳、旁邊或其他信息。
<article>：<article>應該用于標記出一段獨立的內容，不需要依賴其他內容。
<aside>：<aside>的內容應該作為對主題的補充。你還可以用它添加與文檔主要內容不相關的內容，比如廣告。
<figure>：<figure>的出現表明文檔中包含圖像。
<figcaption>：<figcaption>包含了對圖像的說明。
<footer>：<footer>定義了站點的頁腳，或某一部分的頁腳。這個標簽的內容多種多樣，例如導航菜單、社交媒體鏈接、服務條款、隱私政策、商標等等。
如果你有興趣查看更多標簽，那么請訪問w3school 在線教程。
驗證工具
驗證工具可以檢查你的代碼是否符合結構化語義的規則，還會說明需要修改的地方。
在這里介紹一個工具：Validator W3（https://validator.w3.org/），這個工具使用起來非常簡單。首先你需要上傳HTML文件，或將代碼復制粘貼到網站上。你可以在網站上練習正確的語義結構，并找到最佳實踐。
總結
本文提及的實踐非常重要。因為這種實踐可以提高網站的訪問量，提高你的網站在搜索引擎中的排名，而且也可以方便理解和維護你的代碼。
我們需要花點心思鉆研代碼，并讓我們的努力更加有價值。讓我們一起努力吸引Google等搜索引擎的注意！
原文：https://hackernoon.com/you-and-html5-can-impress-googles-robots-and-be-on-the-first-pages-s5122b8a
本文為 CSDN 翻譯，轉載請注明來源出處。
、XHTML與HTML的區別
文檔結構
XHTML DOCTYPE 是強制性的
<html>中的 XML namespace 屬性是強制性的
<html>、<head>、<title>以及 <body>也是強制性的
元素語法
XHTML 元素必須正確嵌套
XHTML 元素必須始終關閉
XHTML 元素必須小寫
XHTML 文檔必須有一個根元素
屬性語法
XHTML 屬性必須使用小寫
XHTML 屬性值必須用引號包圍
XHTML 屬性最小化也是禁止的
二、HTML5中一些新特性
用于繪畫的 canvas 元素
用于媒介回放的 video 和 audio 元素
對本地離線存儲的更好的支持
新的特殊內容元素，比如 article、footer、header、nav、section
新的表單控件，比如 calendar、date、time、email、url、search
注意：最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 將支持某些 HTML5 特性。
IE9 以下版本瀏覽器兼容HTML5的方法，使用本站的靜態資源的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}我自己是一名從事了多年開發的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年年初我花了一個月整理了一份最適合2019年學習的web前端學習干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關注我的頭條號并在后臺私信我：前端，即可免費獲取。
三、HTML5web存儲
使用HTML5可以在本地存儲用戶的瀏覽數據。
早些時候,本地存儲使用的是 cookie。但是Web 存儲需要更加的安全與快速. 這些數據不會被保存在服務器上，但是這些數據只用于用戶請求網站數據上.它也可以存儲大量的數據，而不影響網站的性能.
數據以 鍵/值 對存在, web網頁的數據只允許該網頁訪問使用。
瀏覽器支持：
Internet Explorer 8+, Firefox, Opera, Chrome, 和 Safari支持Web 存儲。
注意: Internet Explorer 7 及更早IE版本不支持web 存儲.
localStorage 和 sessionStorage
客戶端存儲數據的兩個對象為：
localStorage - 用于長久保存整個網站的數據，保存的數據沒有過期時間，直到手動去除。
sessionStorage - 用于臨時保存同一窗口(或標簽頁)的數據，在關閉窗口或標簽頁之后將會刪除這些數據。
在使用 web 存儲前,應檢查瀏覽器是否支持 localStorage 和sessionStorage:
if(typeof(Storage)!=="undefined")
{
// 是的! 支持 localStorage sessionStorage 對象!
// 一些代碼.....
} else {
// 抱歉! 不支持 web 存儲。
}不管是 localStorage，還是 sessionStorage，可使用的API都相同，常用的有如下幾個（以localStorage為例）：
保存數據：localStorage.setItem(key,value);
讀取數據：localStorage.getItem(key);
刪除單個數據：localStorage.removeItem(key);
刪除所有數據：localStorage.clear();
得到某個索引的key：localStorage.key(index);
四、HTML5 應用程序緩存
HTML5 -應用程序緩存=>使用文章鏈接跳轉點這里
五、HTML5 服務器發送事件（Server-Sent Events）
Server-Sent 事件指的是網頁自動獲取來自服務器的更新。
以前也可能做到這一點，前提是網頁不得不詢問是否有可用的更新。通過服務器發送事件，更新能夠自動到達。
例子：Facebook/Twitter 更新、股價更新、新的博文、賽事結果等。
所有主流瀏覽器均支持服務器發送事件，除了 Internet Explorer。
<h1>獲取服務端更新數據</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 連接上進行全雙工通訊的協議。
WebSocket 使得客戶端和服務器之間的數據交換變得更加簡單，允許服務端主動向客戶端推送數據。在 WebSocket API 中，瀏覽器和服務器只需要完成一次握手，兩者之間就直接可以創建持久性的連接，并進行雙向數據傳輸。
在 WebSocket API 中，瀏覽器和服務器只需要做一個握手的動作，然后，瀏覽器和服務器之間就形成了一條快速通道。兩者之間就直接可以數據互相傳送。
現在，很多網站為了實現推送技術，所用的技術都是 Ajax 輪詢。輪詢是在特定的的時間間隔（如每1秒），由瀏覽器對服務器發出HTTP請求，然后由服務器返回最新的數據給客戶端的瀏覽器。這種傳統的模式帶來很明顯的缺點，即瀏覽器需要不斷的向服務器發出請求，然而HTTP請求可能包含較長的頭部，其中真正有效的數據可能只是很小的一部分，顯然這樣會浪費很多的帶寬等資源。
HTML5 定義的 WebSocket 協議，能更好的節省服務器資源和帶寬，并且能夠更實時地進行通訊。
詳情和代碼示例：.
七、HTTP狀態消息
1xx: 信息
2xx: 成功
3xx: 重定向
4xx: 客戶端錯誤
5xx: 服務器錯誤
詳情
八、HTTP 方法：GET 對比 POST
兩種最常用的 HTTP 方法是：GET 和 POST。
什么是 HTTP ？
超文本傳輸協議（HTTP）的設計目的是保證客戶端與服務器之間的通信。
HTTP 的工作方式是客戶端與服務器之間的請求-應答協議。
web 瀏覽器可能是客戶端，而計算機上的網絡應用程序也可能作為服務器端。
舉例：客戶端（瀏覽器）向服務器提交 HTTP 請求；服務器向客戶端返回響應。響應包含關于請求的狀態信息以及可能被請求的內容。
GET - 從指定的資源請求數據。
POST - 向指定的資源提交要被處理的數據。
GET 方法
請注意，查詢字符串（名稱/值對）是在 GET 請求的 URL 中發送的：
/test/demo_form.php?name1=value1&name2=value2有關 GET 請求的其他一些注釋：
GET 請求可被緩存
GET 請求保留在瀏覽器歷史記錄中
GET 請求可被收藏為書簽
GET 請求不應在處理敏感數據時使用
GET 請求有長度限制
GET 請求只應當用于取回數據
POST 方法
請注意，查詢字符串（名稱/值對）是在 POST 請求的 HTTP 消息主體中發送的：
有關 POST 請求的其他一些注釋：
POST 請求不會被緩存
POST 請求不會保留在瀏覽器歷史記錄中
POST 不能被收藏為書簽
POST 請求對數據長度沒有要求
下面的表格列出了其他一些 HTTP 請求方法：
原文鏈接：https://blog.csdn.net/weixin_39834961/article/details/103765680
作者：yhlyeah
程序員web前端教程分享初學HTML5的幾點建議，最近幾年，移動互聯網發展正處在飛速增長的態勢，Web前端開發工程師的崗位吸引了不少人，很多人通過學習來轉行從事這個行業，作為Web前端開發中熱門的語言HTML5的熱度也一直居高不下，那么零基礎的時候應該怎么學習呢？
前端初始的知識點，都不算很難，但是內容比較多，此時在學習的時候需要戒驕戒躁，一定要沉下心來，HTML為結構，CSS是樣式，JS是功能等等，梳理好清晰的知識點思維導圖，這部分內容其實并沒有想象中的那么難。
在學習時還需要注意以下幾個方面：
1、制定一個系統的學習計劃。HTML5雖然難度不大，但是內容卻比較多，在學習的過程中要循序漸進，一個比較常見的計劃就是依次學習HTML5、CSS和JavaScript，JavaScript是學習的一個重點。一個好的學習計劃，能夠讓自己在學習的時候更加專注，每完成一天的任務，都會有一種成就感，久而久之，對于編程語言的學習就會更有興趣和動力。而且一個良好的學習計劃，會讓自己的效率提高不少。
2、實戰編寫能力是重中之重。實踐是學習HTML5的重要環節，由于HTML5的細節比較多，要想詳細的掌握這些內容一定是通過自己不斷寫代碼來加深印象和查缺補漏的。切記編程語言是一門技術，如果沒有大量的實踐練習，是很難將HTML5中的知識點掌握的，如果了解了各個知識點的內容而不去練習，不用多久就會將這些知識點給忘記，到時候再去返工復習，平白會浪費不少自己的寶貴時間和精力。
3、技術想要進步，交流是很關鍵的一種途徑。交流的方式也有很多種，不一定是要和同行們通過聊天工具才算是交流。現在因為互聯網的發展和進步，我們能夠在各個搜索引擎上找到我們想要的知識點，這些知識點就是這個行業的前輩們，將他們的學習思維或是工作時編寫程序的技巧等分享給我們。現在前端開發的技術更新速度還是比較快的，幾乎每隔一段時間就會有新的框架，我們如果不去和其他人交流，只是閉門造車的話，進步只會越來越慢，甚至還會退步。
4、前期就要養成清晰、整潔的代碼編寫習慣。有一個良好的代碼規范習慣，不僅方便我們自己檢測自己的代碼，在以后的工作中也能為同項目的同事們節省出大量的時間和精力。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
