關于HTML的語義化標簽和無語義化標簽
更新時間：2023年04月13日 09:19:21 作者：貴小蟀
這篇文章主要介紹了關于HTML的語義化標簽和無語義化標簽,語義化的標簽，旨在讓標簽有自己的含義，讓瀏覽器認識這個標簽所傳達的信息，是干什么的有什么作用,需要的朋友可以參考下
什么是HTML語義化標簽
語義化的標簽，旨在讓標簽有自己的含義，讓瀏覽器認識這個標簽所傳達的信息，是干什么的有什么作用。 比如：h1標題標簽的語義是用它來標識網(wǎng)頁或其他部分最重要的標題。 然而span 標簽責沒有獨特的含義。
常用的語義化標簽
header元素
是HTML5中新增的語義化標簽，用于定義文檔的頁眉（介紹信息）。
nav元素 定義頁面的導航鏈接部分區(qū)域.
<header>
<h1>這是標題</h1>
<nav>
<a>Home</a>
<a>Other</a>
<a>About</a>
</nav>
</header>
標題標簽
雙標簽獨占一行，從h1-h6字體大小逐漸減小，重要性依次降低，H1在一個頁面只出現(xiàn)一次字體加粗、字體加大。外帶介紹快捷創(chuàng)建的方式.
<!--
快捷創(chuàng)建標簽：
h3*6 快速創(chuàng)建六個是h3的標題標簽
h$*6 快速創(chuàng)建h1到h6標題標簽無內(nèi)容
h${我愛你中國}*6 快速創(chuàng)建h1到h6標題標簽內(nèi)容是：我愛你中國
h${我愛你中國$}*6 快速創(chuàng)建h1到h6標題標簽內(nèi)容是：我愛你中國+數(shù)字（1-6）
-->
<h1>我愛你中國1</h1>
<h2>我愛你中國2</h2>
<h3>我愛你中國3</h3>
<h4>我愛你中國4</h4>
<h5>我愛你中國5</h5>
<h6>我愛你中國6</h6>
footer元素 定義文檔的底部區(qū)域，著作權信息，使用條款，聯(lián)系信息等
<footer> 定義文檔的底部區(qū)域 </footer>
段落標簽 p
<p>lorem</p>
lorem: 快速創(chuàng)建一段無意義文字 段落標簽 p是獨占一行雙標簽
<p>Lorem ipsum dolor consectetur voluptatem magni numquam aperiam.</p>
hr: 橫線 單標簽，獨占一行 br：換行 單標簽，不獨占一行
<hr> <hr> <br><br> <hr>
以下的都是雙標簽、在一行展示
加粗 b、strong（強調(diào)語義）
傾斜 i 、em（強調(diào)語義）
下劃線 u、ins（強調(diào)語義）
刪除線 s、del（強調(diào)語義）
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: 分區(qū) 結合css頁面布局 雙標簽、獨占一行
<div> 我是div標簽 </div>
span: 文本標簽 雙標簽、在一行展示
<span>我是span標簽</span>
a 標簽 用于控制頁面之間跳轉 a標簽并不算是語義標簽：他沒有意義，只是一個鏈接。
<nav>
<a>Home</a>
<a>Other</a>
<a>About</a>
</nav>
到此這篇關于關于HTML的語義化標簽和無語義化標簽的文章就介紹到這了,更多相關HTML語義化無語義化標簽內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
大家都知道，position:fixed在日常的頁面布局中非常常用，在許多布局中起到了關鍵的作用。但是，在許多特定的場合，指定了position:fixed的元素卻無法相對于屏幕視口進行定位。這是為何呢？2021-05-05
用!important解決IE和Mozilla的布局差別...2006-09-09
CSS代碼縮寫技巧...2006-09-09
在HTML中，link標簽是一個自閉合元素，通常位于文檔的head部分。它用于建立與外部資源的關聯(lián)，如樣式表、圖標等。link標簽具有多個屬性，其中rel和href是最常用的，文中有詳細的代碼示例，感興趣的同學可以參考閱讀2023-05-05
FCKeditor 實戰(zhàn)技巧...2006-10-10
認識CSS中absolute與relative...2006-09-09
130個漂亮CSS布局站點參考...2006-09-09
在日常布局當中，會遇到文本內(nèi)容超過容器的情況。非常常見的一種解決方案是超出省略。但是有的時候，由于場景的限制，可能會出現(xiàn)在一些無法使用超出打點省略的方法的場景，譬如在導航欄中：在容器定寬但是文本又溢出且不能換行的情況下，我們就需要尋求另外的解決方案。2021-05-05
這篇文章主要介紹了推薦一個好看Table表格的css樣式代碼詳解,本篇文章通過簡要的案例,講解了該項技術的了解與使用,以下就是詳細內(nèi)容,需要的朋友可以參考下2021-08-08
無邊框表格...2006-07-07