HTML標簽語義化含義及實用技巧

来源:https://www.cnblogs.com/webaction/archive/2020/07/28/13388843.html
-Advertisement-
Play Games

標簽語義化一含義 合適標簽做合適的事情,例如文章段落用p標簽,標題用h1-h6標簽 標簽語義化為瀏覽器和搜索引擎服務 標簽語乂化一為什麼要遵循標簽語義化 利於SE0優化(也就是搜索引擎的抓取,搜索引擎的爬蟲也依賴於標記來確定上下文和各個關鍵字的權重) 在樣式丟失的時候,還是可以比較好的呈現結構 更好 ...


標簽語義化一含義

  • 合適標簽做合適的事情,例如文章段落用p標簽,標題用h1-h6標簽
  • 標簽語義化為瀏覽器和搜索引擎服務

標簽語乂化一為什麼要遵循標簽語義化

  • 利於SE0優化(也就是搜索引擎的抓取,搜索引擎的爬蟲也依賴於標記來確定上下文和各個關鍵字的權重)
  • 在樣式丟失的時候,還是可以比較好的呈現結構
  • 更好的支持各種終端,例如無障礙閱讀和有聲小說等
  • 利於團隊開發和維護,W3C給我們定了一個標準,那麼團隊中都遵循這個標準,那麼代碼的差異就會縮小,在開發和維護的時候就可以提高效率

標簽語義化-日常工作中怎樣遵循標簽語義化

  • 儘量減少使用無意義標簽,例如span和div
  • 儘量不使用標簽本身的css屬性,例如b、fonηt、s等標簽,如果需要這些樣式,那麼使用css樣式來進行添加
  • 在需要強調的部分,使用 strong、em,但是樣式儘量使用css樣式來描述
  • 表格搭建時,使用<thead>表格頭部</thead><tbody>表格身體</tbody><tfoot>表格尾部</tfoot>
  • 列表搭建時,使用<ul>無序列表</ul><o|>有序列表</ol><dl>定義列表</dl>

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 為了更方便的操作elasticsearch,我們需要安裝kibana kibana提供了一個開發工具,可以很方便的操作elasticsearch 打開kibana官網下載頁面 https://www.elastic.co/cn/downloads/kibana 安裝kibana 修改kibana相關 ...
  • 最近登錄到Elasticsearch官網發現Elasticsearch已經更新到7.8的版本了,但是自己公司使用的還是6.4版本,查了下,發現7.X的版本與6.X的版本差別還挺大的,所以準備在自己的個人伺服器上搭建一個7.6的版本,提前瞭解一下新特性,為以後公司遷移到ES7.X提前做好準備,這裡把自 ...
  • 該系列上一篇文章《Elasticsearch必知必會的乾貨知識一:ES索引文檔的CRUD》 講瞭如何進行index的增刪改查,本篇則側重講解說明如何對index進行創建、更改、遷移、查詢配置信息等。 僅創建索引:PUT index PUT /index 添加欄位設置(mappings):PUT in ...
  • 一.PostgreSQL簡介 PostgreSQL資料庫一種關係型資料庫。是當前世界上最先進的開源關係型資料庫。 PostgreSQL使用的是一種客戶端/伺服器的模式。一次PostgreSQL會話由以下相關進程組成: 1.postgres:一個伺服器進程(該進程管理著資料庫文件,接收來自客戶端的連接 ...
  • 從一開始接觸Flutter,相信讀者都會銘記一句話,那就是——一切皆組件。今天我們就來體會一下這句話的神奇魔力,我們先從實際的產品需求說起。 我們先來看一個簡化的運行圖: 我們要實現如上圖所示的日期選擇器,App是iOS風格。 Flutter SDK自身有類似上圖的日期選擇器,但是Material ...
  • 新聞 高管透露Android 11版本號仍有甜點名稱 只是不再公開 Android 11 Beta 2.5發佈:修複Pixel 4系列閃屏問題 Android 11的甜點代號是什麼?紅絲絨蛋糕 教程 劃重點 | Android Jetpack 三大重要更新! 開源庫 UltimateBarX Mak ...
  • 先上圖: 1.首頁 2.第二頁 3.第三頁 項目目錄: 代碼不多,本人太懶,就不貼了 項目地址:https://download.csdn.net/download/qq_41861266/12664737 ...
  • DOM:Document/Object/Model DOM是一棵樹,樹上有Node,分為Document(html)、Element(元素)、Text(文本)、Comment(註釋)及其他 DOM最主要的功能是:通過 構造函數 把 節點 變成 對象,通過調用對象的 API 來操作對象 Node的介面 ...
一周排行
    -Advertisement-
    Play Games
  • 前言 在我們開發過程中基本上不可或缺的用到一些敏感機密數據,比如SQL伺服器的連接串或者是OAuth2的Secret等,這些敏感數據在代碼中是不太安全的,我們不應該在源代碼中存儲密碼和其他的敏感數據,一種推薦的方式是通過Asp.Net Core的機密管理器。 機密管理器 在 ASP.NET Core ...
  • 新改進提供的Taurus Rpc 功能,可以簡化微服務間的調用,同時可以不用再手動輸出模塊名稱,或調用路徑,包括負載均衡,這一切,由框架實現並提供了。新的Taurus Rpc 功能,將使得服務間的調用,更加輕鬆、簡約、高效。 ...
  • 順序棧的介面程式 目錄順序棧的介面程式頭文件創建順序棧入棧出棧利用棧將10進位轉16進位數驗證 頭文件 #include <stdio.h> #include <stdbool.h> #include <stdlib.h> 創建順序棧 // 指的是順序棧中的元素的數據類型,用戶可以根據需要進行修改 ...
  • 前言 整理這個官方翻譯的系列,原因是網上大部分的 tomcat 版本比較舊,此版本為 v11 最新的版本。 開源項目 從零手寫實現 tomcat minicat 別稱【嗅虎】心有猛虎,輕嗅薔薇。 系列文章 web server apache tomcat11-01-官方文檔入門介紹 web serv ...
  • C總結與剖析:關鍵字篇 -- <<C語言深度解剖>> 目錄C總結與剖析:關鍵字篇 -- <<C語言深度解剖>>程式的本質:二進位文件變數1.變數:記憶體上的某個位置開闢的空間2.變數的初始化3.為什麼要有變數4.局部變數與全局變數5.變數的大小由類型決定6.任何一個變數,記憶體賦值都是從低地址開始往高地 ...
  • 如果讓你來做一個有狀態流式應用的故障恢復,你會如何來做呢? 單機和多機會遇到什麼不同的問題? Flink Checkpoint 是做什麼用的?原理是什麼? ...
  • C++ 多級繼承 多級繼承是一種面向對象編程(OOP)特性,允許一個類從多個基類繼承屬性和方法。它使代碼更易於組織和維護,並促進代碼重用。 多級繼承的語法 在 C++ 中,使用 : 符號來指定繼承關係。多級繼承的語法如下: class DerivedClass : public BaseClass1 ...
  • 前言 什麼是SpringCloud? Spring Cloud 是一系列框架的有序集合,它利用 Spring Boot 的開發便利性簡化了分散式系統的開發,比如服務註冊、服務發現、網關、路由、鏈路追蹤等。Spring Cloud 並不是重覆造輪子,而是將市面上開發得比較好的模塊集成進去,進行封裝,從 ...
  • class_template 類模板和函數模板的定義和使用類似,我們已經進行了介紹。有時,有兩個或多個類,其功能是相同的,僅僅是數據類型不同。類模板用於實現類所需數據的類型參數化 template<class NameType, class AgeType> class Person { publi ...
  • 目錄system v IPC簡介共用記憶體需要用到的函數介面shmget函數--獲取對象IDshmat函數--獲得映射空間shmctl函數--釋放資源共用記憶體實現思路註意 system v IPC簡介 消息隊列、共用記憶體和信號量統稱為system v IPC(進程間通信機制),V是羅馬數字5,是UNI ...