整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          HTML基礎篇-19HTML之語義標簽

          HTML基礎篇-19HTML之語義標簽
          正確的標簽做正確的事情。html語義化讓頁面的內容結構化,結構更清晰。便于開發者閱讀和寫出更優雅的代碼,使閱讀源代碼的人對網站更容易將網站分塊,便于閱讀維護理解。同時讓瀏覽器的爬蟲和機器更好的理解和分析,利于SEO。

          目標

          語義化標簽有什么用?

          有哪些結構語義標簽?

          什么是HTML語義化

          就是用正確的標簽做正確的事。如h1標簽,把適當的標簽用在合適的地方,使頁面結構更加的清晰。

          標題標簽 h1~h6

          加重標簽 strong

          高亮標簽 mark

          引用標簽 blockquoto

          標題標簽

          html語義化有什么作用

          1. 使用html語義化,能使頁面結構更清晰,便于解析。

          html語義化結構

          2. 有利于SEO。搜索引擎爬蟲依賴于html標簽來確定上下文和關鍵字權重。

          搜索引擎

          3. 使用html語義化,在沒有css樣式的時候頁面也能正確清晰的呈現

          4. 有利于各種設備的解析,如盲人閱讀器,屏幕閱讀器,以特殊的方式來渲染網頁

          5. 有利于團隊合作開發與維護,語義化更具有可讀性。

          頭部--header元素

          <header>元素描述了文檔的頭部區域,通常是一個網站的頭部

          在頁面中你可以使用多個<header> 元素,常用在嵌套結構里

          網站的頭部

          尾部--footer元素

          <footer>元素描述了文檔的底部區域,通常是一個網站的底部

          一個頁腳通常包含文檔的作者,著作權信息,鏈接的使用條款,聯系信息等

          網站的底部

          導航鏈接--nav元素

          <nav> 標簽定義導航鏈接的部分。

          導航鏈接

          整體--article元素

          <article> 標簽定義獨立的內容,通常是指一個獨立的整體,例如文章的內容作為一個整體,右邊的側邊欄作為一個整體。

          獨立的內容

          章節--section元素

          <section> 標簽定義文檔中的節、區段,整體中的某個模塊。

          根據W3C HTML5文檔: section 包含了一組內容及其標題。

          整體中的某個模塊

          副區域--aside元素

          <aside> 標簽定義頁面主區域內容之外的內容(比如側邊欄)

          側邊欄

          獨立的流內容--figure元素

          <figure>標簽規定獨立的流內容(圖像、圖表、照片、代碼等等)。

          <figure> 元素的內容應該與主內容相關,但如果被刪除,則不應對文檔流產生影響。

          <figcaption> 標簽定義 <figure> 元素的標題,應該被置于 "figure" 元素的第一個或最后一個子元素的位置。

          代碼

          常見于文章中的圖片

          總結

          .標簽語義化

          提到標簽,很多剛入門前端開發的人,肯定都會很納悶,這么多HTML標簽我如何記住呢?我又應該根據什么依據去正確使用它呢?其實這樣的問題,我剛開始和大家一樣苦悶,但是在我學習Web頁面開發的過程中,然后不斷的積累,不斷的總結,發現要想記住HTML標簽以及怎樣更好的去使用這些標簽,需要做到以下三點:

          第一點:不要死記硬背,沒意義,只需要記住常用的哪幾個足矣。

          第二點:根據內容選擇使用HTML標簽,什么意思呢?見下文分解。

          第三點:遵循W3C的規范。

          首先,第一點咱們就不用說,不讓死記硬背,就是要多寫頁面,多敲代碼,久而久之孰能生巧,巧能生花,慢慢的你就能記住這些標簽了,而且在開發頁面的過程中,你們會發現,咱們最常用的也就是那么幾個而已。

          其次,第二點根據內容選擇使用HTML標簽,這一點非常關鍵,因為你掌握了這一點,你能很好地去使用HTML標簽,并且能讓頁面變得很優質,這也會提高你網頁被搜索引擎收錄。

          最后,也就是第三點,這一點自然不用懷疑,如果要想讓頁面更好的在不同的瀏覽器中呈現出一致的效果,那么必須遵循W3C的規范。

          說了這么多,只是一些學習需要注意的問題,下面才是真正解開怎樣去使用和記住標簽這個謎團的方法。

          我們在使用標簽的過程中,大家會發現類似的標簽,比如標題標簽(h1-h6)、p(段落標簽)、a(超鏈接標簽)以及圖片標簽(img)等,通過這些標簽的名稱,咱們是不是不難理解吧,很直觀的就知道這些標簽該怎么,用于何處。而這些名稱的含義就是我們所說的標簽語義化。隨著智能手機的出來,移動Web都是通過H5去開發頁面,而H5中的HTML標簽就比之前版本的HTML標簽更加具有語義化。

          那么什么是標簽語義化呢?所謂的標簽語義化,指的就是標簽所代表的含義。咱們可以通過標簽的含義,正確地去使用它。

          標簽語義化的作用:

          • 通過使用語義化標簽,更能精準地將其把內容呈現出來。
          • 通過使用語義化標簽,讓頁面結構更加的清晰,方便代碼的閱讀和維護。
          • 能讓瀏覽器或網絡爬蟲更好地解析,從而更好地分析和抓取網頁中的內容。
          • 使用語義化標簽還能讓搜索引擎得到更好的優化。

          如下圖所示,通過使用語義化標簽和沒使用任何標簽,就能直觀感受到語義化標簽的好處。

          普通的文本和使用語義化標簽后的效果對比圖

          那么如何去判斷一個頁面中,語義化是否良好呢?很簡單,直接扒掉CSS這層漂亮的衣服,當我們把CSS去掉后,如果頁面中的結構依然組織有序,并且有良好的可讀性,那么它就是非常良好的。

          如何去使用這些標簽呢?首先根據內容確定語義化的標簽,其次再根據呈現需求,使用CSS樣式。因此HTML標簽并非通過死記硬背,而是通過在使用的過程中,利用HTML標簽的語義化去記憶。如下圖所示,通過使用語義化標簽,瞬間就能把普通的文本,以更清晰的結構呈現出來。

          使用語義化的普通文本,變得更為結構清晰

          2.常用標簽分類匯總

          通常我們常見的標簽有標題標簽、段落標簽、水平線標簽、換行標簽以及div和span標簽,這些標簽又被統稱為排版標簽。

          在開發中,排版標簽主要是和CSS搭配使用,主要是用于顯示網頁的整體結構,也是網頁布局中常用的標簽。下面我一一了解一下。

          排版標簽:

          【1】標題標簽(h1-h6)

          • 縮寫來源:標題標簽的英文單詞是head,因此它使用它的縮寫h來表示。
          • 語義:標題標簽主要是用于突顯標題內容,它是h1-h6(分為1級標題、2級標題、3級標題......6級標題),級別依次遞減。級別越小,標題就會越小。
          • 語法格式如下:


          標題標簽的使用

          呈現的效果如下:

          呈現的效果


          一句話總結:使用了標題標簽的文字會加粗,會根據級別顯示文字的大小,并且一行只能放一個標題。

          【2】段落標簽(p)

          • 縮寫來源:p標簽的英文單詞是paragraph,表示段落的意思。
          • 語義:p標簽可以把html文檔分割為若干段落。在網頁中要想把文字以段落的形式呈現,并且有條不紊的,那么段落就是必備的標簽。
          • 語法格式如下:

          p標簽語法格式


          【3】水平線標簽(hr)

          • 縮寫來源:hr的英文單詞是horizontal,表示橫線的意思。
          • 語義:它表示分隔線,用于將文字內容分隔開,讓文檔結構看起來更加清晰,層次分明。當然在網頁中除了使用分隔線(hr)標簽來實現,還可以通過圖片插入以及CSS樣式來實現,只不過使用hr標簽是最簡單的方式。提示:CSS樣式是頁面中的重點,此處主要是介紹HTML,因此暫不做詳細說明。
          • 語法格式:<hr />。
          • 標簽特點:它是一個單標簽,hr標簽默認是以水平線的樣式進行顯示。

          【4】換行標簽(br)

          • 縮寫來源:br的英文單詞是break,打斷、換行的意思。
          • 語義:表示換行的意思。在html中,一個段落的文字會從左到右依次排列顯示,直到瀏覽器窗口的最右端,才會自動換行。如果我們在實際開發中碰到需要將文本內容強制換行顯示的,此時就可以使用換行標簽實現。
          • 語法格式:<br />。
          • 標簽特點:它也是一個單標簽。
          • 示例:將以下內容通過br標簽強制換行

          文本

          呈現效果:

          使用br標簽后的效果

          【5】div和span標簽

          • 縮寫來源:div的英文是division,表示分割、分區的意思。span沒有縮寫,表示跨度、跨距和范圍的意思。
          • 語義:div和span標簽,沒有任何語言,主要是用于網頁布局使用。
          • 語法格式:<div>這是一個div盒子</div> <span>這是一個span盒子</span>
          • div和span的區別:div標簽,主要是用于布局,在沒有使用其它干預的情況下,一行只能放一個div。而span標簽,也是用來布局,在沒有任何其它的干預的情況下,一行上可以放很多span標簽。此處的效果,大家可以根據語法,自行在實現查看一下對比效果。

          最后給大家來一個完美的總結:

          排版標簽的匯總

          難道這就完了嗎?咱們的標簽就只有這些常用的嗎?那當然不是,咱們接下來再看我們的文本格式化標簽。

          文本格式化標簽

          文本格式化標簽的作用:通常文本格式化標簽主要用于網頁中文字樣式的設置,比如字體加粗、斜體或下劃線等效果,當然后期也會通過CSS樣式來實現,會更加完美。

          常見的文本格式化標簽如下:

          文本格式化標簽

          它們分別的區別:

          • b和strong:b標簽只是加粗,strong除了加粗,還具有強調的意思,更具語義化。
          • i和em:i只是讓文本顯示斜體的效果,而em在斜體的效果上加強了語義。
          • s和del:s只是讓文本顯示刪除線,而得了不僅顯示刪除線,還加強了語義。
          • u和ins:u只是添加了下劃線,而ins不僅顯示了下劃線,還加強了語義。

          我么網頁中除了排版標簽、文本格式化標簽,當然還少不了圖片標簽(img),通過圖片的展示,會讓整個頁面更加的生動形象。那么下面再來看一下這個標簽吧。

          圖片標簽(img)

          • 縮寫來源:img的英文單詞是image,表示圖像、影像的意思。
          • 語義:用于顯示圖片內容。
          • 語法格式:<img src='圖像url' />,在這個的語法中,我們發現img標簽使用了src屬性,這個屬性主要是用于指定圖像的文件路徑,也是img的必須屬性。
          • img標簽常見屬性如下所示:

          img標簽屬性

          • 標簽特點:img標簽主要是用于在網頁中插入圖像,它是一個單標簽。
          • 知識點擴展:通過img標簽,我們會發現,html標簽除了自身外,它們還具有一些屬性,這些屬性,我們稱為標簽屬性,通過標簽屬性可以設置標簽的一些外在特性。標簽屬性的基本語法格式:<標簽名 屬性1="值1" 屬性2="值2" ...>內容 </標簽名>。

          標簽屬性的特點:

          • 一個標簽可以擁有多個屬性,必須寫在開始標簽中,位于標簽名后面。
          • 屬性之間不分先后順序,標簽名與屬性、屬性與屬性之間均以空格分開。
          • 任何標簽的屬性都有默認值,省略該屬性則使用默認值。
          • 標簽的屬性采用的是鍵值對的格式key="value"的形式。

          圖片標簽屬性使用

          鏈接標簽

          • 縮寫來源:a標簽的英文單詞是anchor,表示錨、鐵錨的意思。
          • 語義:表示超文本鏈接。
          • 語法格式:<a href="跳轉目標" target="目標窗口的彈出方式">文本或圖像</a>。
          • 常見的屬性:

          a標簽的常見屬性

          提示:

          • 比如添加作為外部鏈接,需要添加外部地址。
          • 內部鏈接,就是頁面直接內部相互鏈接,因此只需要使用名稱即可,比如

          內部鏈接地址

          • 如果沒有確定鏈接目標,通常使用"#"表示暫時空鏈接。
          • 除了可以創建文本鏈接,還可以給網頁中的元素,如圖像、表格、音頻、視頻都可以添加超鏈接。

          注釋標簽

          • 注釋標簽:用于在HTML文檔中添加一些便于閱讀和理解,但又不需要顯示在頁面中的文字說明,此時就需要使用注釋標簽。它是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前端培訓,這里有清晰的學習路線,課程緊跟市場和企業需求,讓你學有所成,快速找到滿意的工作。

          了解更多


          主站蜘蛛池模板: 国产婷婷色一区二区三区| 亚洲国产精品一区二区九九| 国产乱码伦精品一区二区三区麻豆| 精品一区二区三区3d动漫| 亚洲一区二区三区免费在线观看 | 久久久久久人妻一区二区三区| 国产精品视频一区二区三区无码| 日韩精品一区二区三区四区| 国产裸体歌舞一区二区| 中文字幕日韩欧美一区二区三区| 丰满岳乱妇一区二区三区| 97精品国产一区二区三区| 鲁丝丝国产一区二区| 无码国产亚洲日韩国精品视频一区二区三区 | 精品国产一区二区二三区在线观看| 国产一区视频在线免费观看| 国产色情一区二区三区在线播放 | 国产一区二区精品尤物| 国产伦精品一区二区三区精品| 国产精品视频一区二区三区经| 精品久久一区二区三区| 中文字幕无码一区二区三区本日| 精品视频一区在线观看| 多人伦精品一区二区三区视频| 亚洲午夜一区二区三区| 中文字幕精品一区二区日本| 国产午夜精品一区二区三区| 中文字幕久久亚洲一区| 精品一区二区三区色花堂| 无码精品人妻一区二区三区免费 | 免费看AV毛片一区二区三区| 少妇一夜三次一区二区| 在线精品亚洲一区二区| 精品国产一区二区三区色欲 | 国产精品久久久久久一区二区三区| 97se色综合一区二区二区| 国产精品一区二区久久精品涩爱| 亚洲一区二区三区91| 影音先锋中文无码一区| 亚洲乱色熟女一区二区三区蜜臀| 中文字幕人妻第一区|