關于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ū) 結(jié)合css頁面布局 雙標簽、獨占一行
<div> 我是div標簽 </div>
span: 文本標簽 雙標簽、在一行展示
<span>我是span標簽</span>
a 標簽 用于控制頁面之間跳轉(zhuǎn) a標簽并不算是語義標簽:他沒有意義,只是一個鏈接。
<nav> <a>Home</a> <a>Other</a> <a>About</a> </nav>
到此這篇關于關于HTML的語義化標簽和無語義化標簽的文章就介紹到這了,更多相關HTML語義化無語義化標簽內(nèi)容請搜索以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持!
相關文章:
1. 關于html嵌入xml數(shù)據(jù)島如何穿過樹形結(jié)構(gòu)關系的問題2. 詳解如何使用Net將HTML簡歷導出為PDF格式3. Html5播放器實現(xiàn)倍速播放的方法示例4. 移動端HTML5實現(xiàn)拍照功能的兩種方法5. python中HTMLParser模塊知識點總結(jié)6. HTML <!DOCTYPE> 標簽7. JavaScript實現(xiàn)HTML導航欄下拉菜單8. HTML5 Canvas繪制圖形從入門到精通9. Vue 使用iframe引用html頁面實現(xiàn)vue和html頁面方法的調(diào)用操作10. Python HTMLTestRunner可視化報告實現(xiàn)過程解析
