HTML的語義化標簽和無語義化標簽怎么使用

這篇文章主要介紹“HTML的語義化標簽和無語義化標簽怎么使用”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“HTML的語義化標簽和無語義化標簽怎么使用”文章能幫助大家解決問題。

什么是HTML語義化標簽

語義化的標簽，旨在讓標簽有自己的含義，讓瀏覽器認識這個標簽所傳達的信息，是干什么的有什么作用。 比如：h2標題標簽的語義是用它來標識網頁或其他部分最重要的標題。 然而span 標簽責沒有獨特的含義。

常用的語義化標簽

header元素

是HTML5中新增的語義化標簽，用于定義文檔的頁眉（介紹信息）。

nav元素 定義頁面的導航鏈接部分區域.

  <header>
        <h2>這是標題</h2>
        <nav>
            <a>Home</a>
            <a>Other</a>
            <a>About</a>
         </nav>
    </header>

標題標簽

雙標簽獨占一行，從h2-h7字體大小逐漸減小，重要性依次降低，H1在一個頁面只出現一次字體加粗、字體加大。外帶介紹快捷創建的方式.

<!-- 
        快捷創建標簽：
            h4*6  快速創建六個是h4的標題標簽
            h$*6   快速創建h2到h7標題標簽無內容
            h${我愛你中國}*6  快速創建h2到h7標題標簽內容是：我愛你中國
            h${我愛你中國$}*6  快速創建h2到h7標題標簽內容是：我愛你中國+數字（1-6）
      -->
      
      <h2>我愛你中國1</h2>
      <h3>我愛你中國2</h3>
      <h4>我愛你中國3</h4>
      <h5>我愛你中國4</h5>
      <h6>我愛你中國5</h6>
      <h7>我愛你中國6</h7>

footer元素 定義文檔的底部區域，著作權信息，使用條款，聯系信息等

<footer>
   定義文檔的底部區域
 </footer>

段落標簽 p

<p>lorem</p>

lorem: 快速創建一段無意義文字 段落標簽 p是獨占一行雙標簽

<p>Lorem ipsum dolor consectetur voluptatem magni numquam aperiam.</p>

hr: 橫線 單標簽，獨占一行 br：換行 單標簽，不獨占一行

<hr> <hr> <br><br> <hr>

以下的都是雙標簽、在一行展示

加粗 b、strong（強調語義）

傾斜 i 、em（強調語義）

下劃線 u、ins（強調語義）

刪除線 s、del（強調語義）

 Lorem ipsum dolor sit<b>amet</b><strong>sit</strong>
    <i>dolor</i>aaa<em>dolor</em> <u>ipsum</u><ins>ipsum</ins>
    <s>Lorem</s><del>Lorem</del>

無語義化標簽

div: 分區 結合css頁面布局 雙標簽、獨占一行

 <div>
  我是div標簽
 </div>

span: 文本標簽 雙標簽、在一行展示

<span>我是span標簽</span>

a 標簽 用于控制頁面之間跳轉 a標簽并不算是語義標簽：他沒有意義，只是一個鏈接。

<nav>
     <a>Home</a>
     <a>Other</a>
     <a>About</a>
 </nav>

關于“HTML的語義化標簽和無語義化標簽怎么使用”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。