整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
文來自《HTML自學視頻教程》
軟件開發技術聯盟 編著
清華大學出版社
課本第21頁
網頁可以通過在meta中設置來限制搜索引擎對頁面的搜索方式
如下content值與其對應的含義
All 表示能搜索當前網頁及其鏈接的網頁
Index 表示能搜索當前網頁
Nofollow 表示不能搜索與當前網頁鏈接的網頁
Noindex 表示不能搜索當前網頁
None 表示不能搜索當前網頁及與其鏈接的網頁
實例代碼：
添加搜素框或網站搜索功能是為了方便用戶能夠輕松、快捷地找到自己需要的信息。因此，在網站中添加一個搜索框已經成為網頁設計的主流元素之一。添加一個搜索框到網站會使得用戶界面更加友好，也能幫助用戶輕松愉快地瀏覽。
下面，小編收集了13個有用的CSS3,HTML5和jQuery搜索表單腳本來幫助大家從頭開始創建一個搜索框。希望能夠幫助到大家，讓我們一起來看看吧！
輸入搜索框帶有邊框和類似脈沖的陰影跳動。
這是一個使用純CSS構建擴展建議搜索框的簡單教程。
擴大搜索框是一個點擊或輸入東西時會變寬的一個簡單搜索框。
我們將利用CSS轉換擴展了的搜索欄。搜索欄最初在視圖中隱藏的，當點擊搜索標簽時它能順利地擴展到視圖。
使用指數化數據屬性、動態樣式和CSS3選擇器的搜索功能，可以直接實現在CSS的全文檢索，而不是JavaScript客戶端。
在本教程中，我們將創建一個平面式的導航和Square UI的搜索下拉菜單。
在本教程中我們使用兩種不同的方法來構建一個擴大搜索字段。
這是一個奇特的搜索框，非常有意思！
一種提示選擇搜索，像商店類別的搜索框。
一個靈活的搜索輸入和內部固定寬度的提交按鈕來固定邊界的寬度。
本站文章除注明轉載外，均為本站原創或翻譯
者 | 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 翻譯，轉載請注明來源出處。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
