本篇文章給大家帶來的內容是關於html中常用標籤的分析(附代碼) ,有一定的參考價值,有需要的朋友可以參考一下,希望對你有所協助。
1.1 標籤的分類
1.1.1 按主體分類:
1.帶主體的標籤:如<font>資料 </font>
2.不帶主體的標籤:如<br/> 換列標籤
判斷一個表是否需要帶主體,你可以思考該標籤是否需要封裝資料,如果需要封裝資料,那麼該標籤必定帶主體,如果不需要封裝資料,那麼就不需要帶主體。
2.1.2 按行分類:
1.如果一個標籤的內容需要獨立佔一行,我們稱作為塊標籤。 比如:<h1>標題標籤
2.如果一個標籤不需要獨立佔一行,我們稱作為內聯標籤。比如:<font>字型標籤
2.2 文字標籤:
標籤名 |
標籤描述 |
常用屬性 |
h1~h6 |
標題標籤,所有標題都是加粗的,1表示1級標題,字最大,6級標題最小 |
屬性是在開始標籤裡面的 align:設定標題對齊 center:置中、right:靠右對齊、left:靠左對齊 |
hr |
畫一條水平線 |
width:線長度 size: 粗細 color:顏色 |
b |
對字型加粗,與strong標籤功能相同 |
|
i |
設定字型為斜體 |
|
br |
換行 |
|
font |
字型(在HTML5中已經淘汰了) |
color:顏色 size:大小 face:指定字型的名字 |
p |
分段,每個p標籤就是一個段落,沒有首行縮排。段落之間有間隔 |
如果要縮排,使用 ;半形空格也可全形空格 title:滑鼠移上去以後,顯示文字提示資訊 |
2.3 塊標籤與內聯標籤:
1.div:塊標籤,需要獨立佔一行。
2.span:內聯標籤,不需要獨立佔一行。
案例文字素材
World Wide Web Consortium</p>全球資訊網聯盟建立於1994年
代碼示範
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"></style> <script type="text/javascript"></script></head><body><div style="background-color: red">World Wide Web Consortium</div>全球資訊網聯盟建立於1994年<span style="background-color: aqua">World Wide Web Consortium</span>全球資訊網聯盟建立於1994年</body></html>
2.4 列表標籤:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"></style> <script type="text/javascript"></script></head><body>今天早上吃什麼?<ol style="color: black" type="A"> <li> 油條 </li> <li> 豆漿 </li> <li> 稀飯 </li></ol>明天早上吃什嗎?<ul style="color: black" type="disc"> <li>面</li> <li>糯米雞</li></ul></body></html>
2.5 實體字元
2.5.1 為什麼需要使用到實體字元:
在HTML頁面中,有些字元是有著特殊含義的字元,如果需要在網頁上顯示這種特殊的字元,那麼就需要使用到該特殊字元對應的實體字元。比如:< 小於符號 > 大於符號
2.5.2 實體字元列表:
注釋:實體名稱對大小寫敏感!
2.5.3 常用的實體字元:
特殊的字元 |
對應的實體字元 |
< |
< |
> |
> |
空格 |
|
¥ |
¥ |
版本所有 |
© |
|
® |
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"></style> <script type="text/javascript"></script></head><body><h1>標籤是標題標籤<br/> 百度(納斯達克:BIDU),全球最大的中文搜尋引擎、最大的中文網站。1999年底,身在美國矽谷的李彥宏看到了中國互連網及中文搜尋引擎服務的巨大發展潛力,抱著技術改變世界的夢想,他毅然辭掉矽谷的高薪工作,攜搜尋引擎專利技術,於 2000年1月1日在中關村建立了百度公司。<br/>青島啤酒:¥16元一瓶。<br/>《java從入門到放棄》:© XXX著作權<br/>本次活動解釋權歸XXX公司所有:®XXX有限公司</body></html>
2.6 映像標籤(img)
2.6.1 標籤的作用:
在網頁中顯示圖片。
2.6.2 常用的屬性:
屬性名稱 |
作用 |
src |
source圖片檔案地址,註:不能使用用戶端本地地址,如:c:/aaa.jpg |
width |
圖片寬度,如果只指定寬和高,另一個參數會等比例縮放 |
height |
圖片高度 |
alt |
如果圖片丟失,圖片顯示的文字 |
title |
如果滑鼠移到圖片上,顯示提示文字資訊 |
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"></style> <script type="text/javascript"></script></head><body><img src="img/11.jpg" height="500" width="200" title="這個是一輛豪車" /></body></html>