web前端培訓：什么是語義HTML標記以及如何使用它們？

義HTML標記允許您向標記添加含義，以便搜索引擎、屏幕閱讀器和web瀏覽器能夠理解它。默認情況下，當用戶代理讀取您的內容時，它不理解上下文和含義。語義HTML標記允許您向用戶提供結構化內容，這對于頁面搜索引擎優化和可訪問性尤其重要。想要對語義HTML標記了解更多，建議參加web前端培訓，可以在短時間內獲得快速提升。

盡管語義標記存在于早期的HTML版本中，但HTML5規范在塊級和內聯級的語法中都添加了一些新的語義元素。

最常用的語義標記

最常用的語義元素是HTML5出現之前就已經存在的，這也許并不奇怪。實際上，沒有三個語義標記，您甚至無法創建HTML文檔：

<html>這封信包含了整頁，

<head>包含呈現頁面所需的所有信息，

<body>包含頁面內容的。

這三個語義元素構成了每個HTML文檔的主干。在web前端培訓，你可以學習使用語義元素來創建HTML文檔。除此之外，以下是最流行的語義元素，所有這些元素都由早期的HTML規范定義：

<ul>、<ol>和<li>用于定義有序和無序列表，

<p>對于段落，

<table>對于表，

<form>對于表單，

<img>對于圖像，

<h1>，<h2>，<h3>，<h4>，<h5>，<h6>，用于不同級別的標題。

上面的一些元素也有補充標記，它們也是語義標記。例如，<table>具有<thead>、<tbody>和<tfoot>，可用于標記表格的頁眉、正文和頁腳。想要學習更多關于html語言標記的知識，不妨報個web前端培訓班，有專業講師指導教學，可以讓你更全面掌握這部分的技能。

HTML 5中的塊級語義元素

塊級語義標記有兩種主要類型：分段元素、語義流元素

1.分段元素在HTML文檔中創建一個不同的分段。它們的內容在文檔大綱中被視為單獨的塊，因此它們可以有自己的標題和頁腳標記。其中有四項：

<article>對于博客帖子和文章等自包含塊，

<aside>用于側邊欄，

<nav>對于導航塊，

主題內容塊的<section>。

2.語義流元素具有語義，但不會在文檔中創建不同的塊，因此它們不能有自己的標題和頁腳元素。它們有很多，以下是使用最廣泛的：

<main>用于文檔的主內容塊（一頁只能使用一次），

<header>用于頁面或分段元素的頁眉部分，

<footer>用于頁面或分區元素的頁腳部分，

<audio>用于音頻嵌入，

<video>用于視頻嵌入，

<figure>用于塊級圖像塊。

想要了解這兩種元素是如何使用的，可以參加web前端培訓學習一下，理論課程+項目課程，雙管齊下，提高學習效率，在最短的時間內學到最多最有效的知識。

HTML5中的內聯級語義標記

可以在塊級元素中使用內聯標記，例如段落或列表中的強調文本字符串。除了塊級語義元素外，HTML5還引入了兩個語義內聯標記，盡管之前的規范也包括語義內聯標記，例如超鏈接的<a>或縮寫的<abbr>。

HTML5的語義內聯元素的創建目標是替換以前經常使用的非語義內聯標記，分別是粗體文本的<b>標記和斜體文本的<i>。但是，根據經驗，HTML應該只用于定義含義和結構。所有的樣式都應該用CSS來完成。

HTML語義的最終目標是創建用戶代理（如web瀏覽器、屏幕閱讀器和搜索引擎機器人）可以輕松瀏覽和理解的文檔大綱。為此，您需要明智地使用語義和非語義標記。對HTML感興趣的同學，建議報名參加web前端培訓，這里有清晰的學習路線，課程緊跟市場和企業需求，讓你學有所成，快速找到滿意的工作。

了解更多

TML（英文Hyper Text Markup Language的縮寫）中文譯為“超文本標簽語言”，主要是通過HTML標簽對網頁中的文本、圖片、聲音等內容進行描述。

1 HTML骨架格式

日常生活的書信，我們要遵循共同的約定。

同理：HTML 有自己的語言語法骨架格式：

<HTML>   
    <head>     
        <title></title>
    </head>
    <body>
    </body>
</HTML>

html結構：包括head body
html標簽是以尖括號包圍的關鍵字
html標簽通常是成對出現的，有開始就有結束，包含成對標簽、獨立標簽
html通常都有屬性，格式：屬性名＝“屬性值”(多個屬性之間空格隔開)
html標簽不區分大小寫,建議小寫

2 html基本標簽

HTML標簽

作用：所有HTML中標簽的一個根節點。

head標簽

作用：用于存放：title,meta,base,style,script,link

注意：在head標簽中我們必須要設置的標簽是title

title標簽

作用：讓頁面擁有一個屬于自己的標題。

body標簽

作用：頁面在的主體部分，用于存放所有的HTML標簽：p,h,a,b,u,i,s,em,del,ins,strong,img

3 顏色的表示方式

color:文本的顏色
bgcolor:背景色
background:背景圖片

第一種方式：使用顏色名稱: 僅僅有16種顏色名可用英文字母，其余的要用16進制值。

aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow

第二種方式：RGB模式

第三種：十六進制

#000000 #ffffff #325687 #377405

4 文檔類型<!DOCTYPE>（重點）

<!DOCTYPE html>這句話就是告訴我們使用哪個html版本，我們使用的是 html 5 的版本。 html有很多版本，那我們應該告訴用戶和瀏覽器我們使用的版本號。

標簽位于文檔的最前面，用于向瀏覽器說明當前文檔使用哪種 HTML 或 XHTML 標準規范，必需在開頭處使用標簽為所有的XHTML文檔指定XHTML版本和類型，只有這樣瀏覽器才能按指定的文檔類型進行解析。

5 HTML標簽的語義化（重點）

所謂標簽語義化，就是指標簽的含義。

為什么要有語義化標簽：方便代碼的閱讀和維護，同時讓瀏覽器或是網絡爬蟲可以很好地解析，從而更好分析其中的內容，使用語義化標簽會具有更好地搜索引擎優化

核心：合適的地方給一個最為合理的標簽。

語義是否良好： 當我們去掉CSS之后，網頁結構依然組織有序，并且有良好的可讀性，不管是誰都能看懂這塊內容是什么。

遵循的原則：先確定語義的HTML ，再選合適的CSS。

6 總結：（重要知識點）

雙標簽

<html></html>
<head></head>
<title></title>
<body></body>
<table></table>
<tr></tr>
<td></td>
<span></span>
<p></p>
<form></form>
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
<object></object>
<style></style>
<b></b>
<u></u>
<strong></strong>
<i></i>
<div></div>
<a></a>
<script></script>
<center><center>

單標簽

<br>
<hr>
<img>
<input>
<param>
<meta>
<link>

排版標簽

1.注釋標簽：<!–注釋–>
-------------------------------------
2.換行標簽：<br/>
-------------------------------------
3.段落標簽：<p>文本文字
   特點：段與段之間有行高
   屬性：align對齊方式
           (left：左對齊 center：居中 right：右對齊)
-------------------------------------
4.水平線標簽:<hr/>
   屬性:
        width：水平線的長度(兩種:第一種:像素表示；第二種，百分比表示)
        size: 水平線的粗細 (像素表示，例如：10px)
        color: 水平線的顏色
        align:水平線的對齊方式(left：左對齊 center：居中 right：右對齊)
-------------------------------------
5.容器標簽（重點）
     <div>:塊級標簽，獨占一行，換行
     <span>:行級標簽，所有內容都在同一行作用
     <div>:主要是結合css頁面分塊布局
     <span>:進行友好提示信息

標題標簽 (熟記)

為了使網頁更具有語義化，我們經常會在頁面中用到標題標簽，HTML提供了6個等級的標題，隨著數字增大文字逐漸變小，字體是加粗的，內置字號，默認占據一行；

<h1>、<h2>、<h3>、<h4>、<h5>和<h6>

列表標簽

容器里面裝載著文字或圖表的一種形式，叫列表。列表最大的特點就是整齊、整潔、有序

無序列表 ul （重點）

無序列表標簽： <ul></ul>
    屬性：type :三個值，分別為：
           circle(空心圓) ,disc(默認,實心圓),square(黑色方塊)
    列表項：<li></li>
注意：
<ul></ul>中只能嵌套<li></li>，直接在<ul></ul>標簽中輸入其他標簽或者文字的做法是不被允許的。
<li>與</li>之間相當于一個容器，可以容納所有元素。

無序列表會帶有自己樣式屬性，放下那個樣式，一會讓CSS來！

有序列表 ol

有序列表標簽：<ol>
      屬性：type：1、A、a、I、i（數字、字母、羅馬數字）
      列表項： <li></li>

定義列表dl

\dl>
<dt>名詞1
<dd>名詞1解釋1
<dd>名詞1解釋2
…
<dt>名詞2
<dd>名詞2解釋1
<dd>名詞2解釋2
…
</dl>

dl>
名詞1
名詞1解釋1
名詞1解釋2
... 名詞2
名詞2解釋1
名詞2解釋2
...

圖片標簽

獨立標簽

屬性:
src：圖片地址： 相對路徑 （同一個網站） 絕對路徑 （不同網站）
width:寬度height:高度border:邊框align:對齊方式，代表圖片與相鄰的文本的相當位置（有三個屬性值：top middle bottom）
alt:圖片的文字說明hspace 和 vspace 設定圖片邊沿上下左右空白，以免文字或其它圖片過于貼近

鏈接標簽

超鏈接可以是文本，也可以是一幅圖像，您可以點擊這些內容來跳轉到新的文檔或者當前文檔中的某個部分。（不僅可以創建文本超鏈接，在網頁中各種網頁元素，如圖像、表格、音頻、視頻等都可以添加超鏈接）

屬性：
href:跳轉頁面的地址(跳轉到外網需要添加協議)；
name:名稱，錨點(回到錨點: 頂部，底部，中間)，在訪問錨點的書寫格式:#name的值
target:_self(自己) _blank(新頁面，之前頁面存在) _
__parent top 默認
self_search相等于給頁面起一個名字，如果再次打開時，如果頁面存在，則不再打開新的頁面。可以是任意名字。

如果當時沒有確定鏈接目標時，通常將鏈接標簽的href屬性值定義為“#”(即href="#")，表示該鏈接暫時為一個空鏈接。

TML(超文本標記語言)的歷史可以追溯到互聯網的早期。以下是HTML的主要歷史事件和版本：

·HTML2.0于1993年發布，引入了一些新元素和屬性如表格表單和圖像。

·HTML3.0于1995年發布，增加了更多的標記和樣式選項，以支持更復雜的頁面布局和樣式。

·HTML4.0于1997年發布，引入了框架樣式表和腳本等新特性，使得網頁設計更加靈活和豐富。在HTML 4.0之后HTML標準進一步發展為XHTML(可擴展超文本標記語言)1.0。XHTML1.0更加嚴格，強調語法和文檔結構的一致性，使其更適合XML應用。

·HTML5于2010年正式發布標志著HTML的重大轉變。HTML5引入了許多新的元素和API，如<video><audio><canvas><local storage>等，使網頁開發更加豐富和交互。此外HTML5還引入了語義元素，如：NY NEOL以提高文檔結構的語義化。

自HTML5發布以來，HTML已經成為一個不斷發展的標準，被維護為"HTML Living Standard"，這意味著HTML不再按照傳統的版本號發布，而是持續演進新特性和改進不斷加入。

HTML的歷史反映了互聯網的不斷發展和網頁技術的演進，從最初的簡單文本鏈接到，現代的富媒體和互動性網頁一直是構建網頁的基礎，為全球互聯網的發展做出了重要貢獻。

在線咨詢

上一篇：「前端小技巧」用CSS隱藏元素的幾種方法
下一篇：Excel圖表+Html網頁制作動態看板

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

web前端培訓：什么是語義HTML標記以及如何使用它們？

您的項目需求