講講對HTML5的一大特性之語意化的理解

WBOY
發布: 2022-01-29 07:00:32
轉載
1814 人瀏覽過

這篇文章帶給大家了html中語意化的相關知識,所謂語意化,就是憑著HTML本身,也能體驗出人性化的結構,希望對大家有幫助。

講講對HTML5的一大特性之語意化的理解

在講什麼是語意化之前,先看看語意化的背景。

在先前的文章中提到HTML最重要的特性,那就是標籤。但是項目一大,標籤多的看不懂,一堆疊一堆。有些命名奇奇怪怪,想維護被勸退,團隊協作導致團戰開始!

因此語意化迫在眉睫!

什麼是語意化

在我們寫HTML時其實無所謂,因為你裡面長啥樣,使用者看不到,也不用看到。

因為你有CSS的漂亮衣服,即使你的HTML一塌糊塗,CSS也可以讓它光鮮亮麗。

但是使用者看不到,開發者看得到呀!因此,這個語意化的友善者就是開發者本身。

所謂語意化,就是憑著HTML本身,也能體驗出人性化的結構!

語意化的好處

  • 在沒有CSS的情況下,頁面也能呈現出很好地內容結構、程式碼結構。這樣開發者一眼就明了你的意圖,一秒破冰!

  • 對SEO友善。對開發者友好,那麼對開發者的小蟲子們也是當然!

    當標籤應用得當,體現出上下文中你想要關鍵字的權重,那麼搜尋引擎爬蟲就到了你的頭上了。那麼網站的訪問量不就來了嗎。

  • 可以支援一些特殊的裝置(盲人閱讀、行動裝置),網頁翻譯等。

  • 最直觀的一點,便是你的隊友都希望和你合作!你的程式碼的語意化,隊友都愛啊!

    語意化更具可讀性,遵循W3C標準的團隊都遵循這個標準,可以減少差異化。 (跳槽快速融入?)

工作中語義化的思考

  • 不要使用一些純樣式標籤,這些CSS會幫我們做到。如:b、font、u等一些標籤。

  • 需要強調的文本,可以包含在strong或em標籤中(,strong預設樣式是加粗(不要用b),em是斜體(不用i)。使用mark標籤來表示標註的/突出顯示的文字。

    但是還是可以考慮使用CSS來完成。

  • 每個input標籤對應的說明文字都需要使用label標籤,並且透過為input設定id屬性,在lable標籤中設定for=someld來讓說明文字和相對應的input關聯起來。

  • 表單域要用fieldset標籤包起來,並用legend標籤說明表單的用途。

  • 應該使用<h1> - <h6></h6> </h1>#來表示標題。

#當用CSS寫樣式的時候命名也需要遵循HTML的結構,體現出語義化的本質。

語義化的標籤

1、

標籤定義文件的頁首

通常包含頁面的正副標題。

<header>
<h1>他真的是美男子吗?</h1>
<p>据现场勘查,他真的是美男子!</p>
</header>
登入後複製
2、

標籤定義文檔或節的頁腳

頁腳通常包含文件的作者、版權資訊、使用條款連結、聯絡資訊等等。

可以在一個文件中使用多個
元素。<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;footer&gt;   &lt;p&gt;Posted by: 美男子&lt;/p&gt;&lt;/footer&gt;</pre><div class="contentsignin">登入後複製</div></div>3、<main></main>標籤規定文件的主要內容。##
元素中的內容對於文件來說應是唯一的。它不應包含在文件中重複出現的內容,例如側邊欄、導覽列、版權資訊、網站標誌或搜尋表單。在一個文件中,不能出現多個<main></main> 元素。<main></main>
元素不能是下列元素的後代:

<main>
  <h1>我的介绍</h1>
  <p>我是一个聪明的孩子</p></main>
登入後複製

4、<section></section> 標籤定義文件中的片段。

例如章節、頁首、頁尾或文件中的其他部分。

<section>
  <h1>PRC</h1>
  <p>The People's Republic of China was born in 1949...</p></section>
登入後複製

5、<article></article> 標籤規定獨立的自包含內容

例如文章下的評論之類的

<article>
   <h1>我为什么聪明呢</h1>
   <p>我聪明的秘诀是我爱思考</p></article>
登入後複製

6、

以上是講講對HTML5的一大特性之語意化的理解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:csdn.net
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板