?

*http://html5doctor.com/nav
*http://html5doctor.com/article
*http://html5doctor.com/section
*http://html5doctor.com/aside
http://html5doctor.com/div
http://html5doctor.com/figure
http://html5doctor.com/outline
http://html5doctor.com/semantics

---

?

p 和 span 的理解

p標簽是指一個段落，而且默認是一個塊級元素，
span是一個行內元素的代表，沒有什么意思，一般可以放文字等行內元素 <p>這是一段簡介內容這是一段 <span class="red">簡介</span> 內容這是一段簡介內容這是一</p>

?

---

?列表

1、無序列表（列表標簽中使用最多的一種，非常重要）：unordered list

制作導航條、商品列表、新聞列表等
有序列表能做的，無序列表都能完成 #1、作用： 制作導航條、商品列表、新聞列表等 #2、組合使用ul>li<ul><li>秒殺</li><li>優惠券</li><li>PLUS會員</li><li>閃購</li><li>拍賣</li><li>京東服飾</li><li>京東超市</li><li>生鮮</li><li>全球購</li><li>京東金融</li></ul>#3、ul標簽的屬性type（這屬于列表的樣式，所以了解即可） type：列表標識的類型disc：實心圓(默認值)circle：空心圓square：實心矩形none：不顯示標識 可以通過css直接去掉小圓點 <style type="text/css">ul {list-style: none;} </style>#4、注意 ul與li是組合標簽應該一起出現，并且ul的子標簽只應該是li，而li的子標簽則可以是任意其他標簽 無序列表（列表標簽中使用最多的一種，非常重要）：unordered list

2、有序列表（極少使用）

<h1>智商排名</h1><ol><li>Egon</li><li>劉清正</li><li>武佩奇</li><li>alex</li><li>元昊</li></ol><!--有序列表能干的事，完全可以用無序列表取代--><h1>智商排名</h1><ul style="list-style: none"><li>1. Egon</li><li>2. 劉清正</li><li>3. 武佩奇</li><li>4. alex</li><li>5. 元昊</li></ul> 有序列表（極少使用）

3、自定義列表（也會經常使用）

#1、作用分析 選擇用什么標簽的唯一標準，是看文本的實際語義，而不是看長什么樣子 無序列表：內容是并列的,沒有先后順序 有序列表：內容是有先后順序的 自定義列表：對一個題目進行解釋說明的時候，用自定義列表,可以做網站尾部相關信息，網易注冊界面的輸入框#2、自定義列表也是一個組合標簽：dl>dt dd dl:defination list，自定義列表 dt：defination title，自定義標題 dd：defination description，自定義描述 <dl><dt>自定義標題1<dt><dd>描述1<dd><dd>描述2<dd><dd>描述3<dd><dt>自定義標題2<dt><dd>描述1<dd><dd>描述2<dd><dd>描述3<dd><dt>自定義標題3<dt><dd>描述1<dd><dd>描述2<dd><dd>描述3<dd> </dl>#3、注意: 3.1 dl>dt dd應該組合出現，dl中只應該存放dt和dd，而可以在dt和dd中添加任意其他標簽 3.2 一個dt可以可以沒有對應的dd，也可以有多個，但建議一個dt對應一個dd 3、自定義列表（也會經常使用）

?

---

?

?table標簽

語義：標記一段數據為表格

#1、作用 表格標簽是一種數據的展現形式，當數據量非常大的時候，使用表格的形式來展示被認為是最清晰的#2、格式 <table><tr><td></td></tr> </table>tr代表表格的一行數據 td表一行中的一個單元格#3、注意點： 表格標簽有一個邊框屬性，這個屬性決定了邊框的寬度。默認情況下這個屬性的值為0，所以看不到邊框 #1、寬度和高度可以給table和td設置width和height屬性1.1 默認情況下表格的寬高是按照內容的尺寸來調整的，也可以通過給table標簽設置widht和height來手動指定表格的寬高1.2 如果給td標簽設置width和height屬性，會修改當前單元格的寬度和高度，只要不超過table的寬高，則不會影響整個表格的寬度和高度#2、水平對齊和垂直對齊水平對齊align可以給table、tr、td標簽設置垂直對齊valign只能給tr、td標簽設置========水平對齊===========取值align=“left”align=“center”align=“right”2.1 給table標簽設置水平對齊，可以讓表格在水平方向上對齊強調：table只能設置水平方向2.2 給tr設置水平對齊，可以控制當前行所有單元格內容都水平對齊2.3 給td設置水平對齊，可以控制當前單元格內容水平對齊，tr與td沖突的情況下，以td為準========垂直對齊===========取值valign=“top”valign=“center”valign=“bottom”2.4 給tr設置垂直對齊可以讓當前行所有單元格內容都垂直對齊2.5 給td設置垂直對齊可以讓當前單元格內容垂直對齊#3、外邊距和內邊距只能給table設置3.1 外邊距：單元格與單元格之間的間隔，cellspacing="3px"，默認值為2px3.2 內邊距：單元格邊框與文字之間的距離:cellpadding="200px" 表格屬性 #1、方式一在標簽中，想通過指定外邊距為0來實現細線表格是不靠譜的，其實他是將2條線合成了一條線.所以看上去很不舒服,如下實現 <table width="200px" height="200px" bgcolor="black" border="1" cellspacing="0px"><tr bgcolor="white"><td>姓名</td><td>性別</td><td>年齡</td></tr><tr bgcolor="white" ><td>Egon</td><td>male</td><td>18</td></tr><tr bgcolor="white"><td>ALex</td><td>male</td><td>73</td></tr><tr bgcolor="white"><td>Wxx</td><td>female</td><td>84</td></tr> </table> #2、方式二（推薦使用）細線表格的制作方式：1、給table標簽設置bgcolor2、給tr標簽設置bgcolor3、給table標簽設置cellspacing="1px"注意：table、tr、td標簽都支持bgcolor屬性<table width="200px" height="200px" bgcolor="black" cellspacing="1px"><tr bgcolor="white"><td>姓名</td><td>性別</td><td>年齡</td></tr><tr bgcolor="white" ><td>Egon</td><td>male</td><td>18</td></tr><tr bgcolor="white"><td>ALex</td><td>male</td><td>73</td></tr><tr bgcolor="white"><td>Wxx</td><td>female</td><td>84</td></tr> </table> 兩種方式實現細線表格 #1、水平向上的單元格colspan可以給td標簽添加一個colspan屬性，來把水平方向的單元格當做多個單元格來看待<td colspan="2"></td>#2、垂直向上的單元格rowspan可以給td標簽設置一個rowspan屬性，來把垂直方向的的單元格當成多個去看待#注意注意注意: 1、由于把某一個單元格當作了多個單元格來看待，所以就會多出一些單元格，所以需要刪掉一些單元格 2、一定要記住，單元格合并永遠是向后或者向下合并，而不能向前或向上合并 單元格合并

---

from標簽

在form內還可以添加一種標簽

<fieldset>添加邊框<legend>注冊頁面</legend>表單控件...... </fieldset>

補充?:

點擊radio后的文字選中

<p>性別<input type="radio" name="gender" id="ml"><label for="ml">男</label><input type="radio" name="gender" id="fl"><label for="fl">女</label><input type="radio" name="gender" id="bm" checked="checked"><label for="bm">保密</label> </p>

?

?

---

?

特殊字符

特殊符號	命名實體	十進制編碼	特殊符號	命名實體	十進制編碼	特殊符號	命名實體	十進制編碼
Α	Α	Α	Β	Β	Β	Γ	Γ	Γ
Δ	Δ	Δ	Ε	Ε	Ε	Ζ	Ζ	Ζ
Η	Η	Η	Θ	Θ	Θ	Ι	Ι	Ι
Κ	Κ	Κ	Λ	Λ	Λ	Μ	Μ	Μ
Ν	Ν	Ν	Ξ	Ξ	Ξ	Ο	Ο	Ο
Π	Π	Π	Ρ	Ρ	Ρ	Σ	Σ	Σ
Τ	Τ	Τ	Υ	Υ	Υ	Φ	Φ	Φ
Χ	Χ	Χ	Ψ	Ψ	Ψ	Ω	Ω	Ω
α	α	α	β	β	β	γ	γ	γ
δ	δ	δ	ε	ε	ε	ζ	ζ	ζ
η	η	η	θ	θ	θ	ι	ι	ι
κ	κ	κ	λ	λ	λ	μ	μ	μ
ν	ν	ν	ξ	ξ	ξ	ο	ο	ο
π	π	π	ρ	ρ	ρ	?	ς	ς
σ	σ	σ	τ	τ	τ	υ	υ	υ
φ	φ	φ	χ	χ	χ	ψ	ψ	ψ
ω	ω	ω	?	ϑ	ϑ	?	ϒ	ϒ
?	ϖ	ϖ	?	•	•	…	…	…
′	′	′	″	″	″	￣	‾	‾
?	⁄	⁄	?	℘	℘	?	ℑ	ℑ
?	ℜ	ℜ	?	™	™	?	ℵ	ℵ
←	←	←	↑	↑	↑	→	→	→
↓	↓	↓	?	↔	↔	?	↵	↵
?	⇐	⇐	?	⇑	⇑	?	⇒	⇒
?	⇓	⇓	?	⇔	⇔	?	∀	∀
?	∂	∂	?	∃	∃	?	∅	∅
?	∇	∇	∈	∈	∈	?	∉	∉
?	∋	∋	∏	∏	∏	∑	∑	−
?	−	−	?	∗	∗	√	√	√
∝	∝	∝	∞	∞	∞	∠	∠	∠
∧	∧	⊥	∨	∨	⊦	∩	∩	∩
∪	∪	∪	∫	∫	∫	∴	∴	∴
～	∼	∼	?	≅	≅	≈	≈	≅
≠	≠	≠	≡	≡	≡	≤	≤	≤
≥	≥	≥	?	⊂	⊂	?	⊃	⊃
?	⊄	⊄	?	⊆	⊆	?	⊇	⊇
⊕	⊕	⊕	?	⊗	⊗	⊥	⊥	⊥
?	⋅	⋅	?	⌈	⌈	?	⌉	⌉
?	⌊	⌊	?	⌋	⌋	?	◊	◊
?	♠	♠	?	♣	♣	?	♥	♥
?	♦	♦	?	 	 	?	¡	¡
￠	¢	¢	￡	£	£	¤	¤	¤
￥	¥	¥	|	¦	¦	§	§	§
¨	¨	¨	?	©	©	a	ª	ª
?	«	«	?	¬	¬	?	­	­
?	®	®	ˉ	¯	¯	°	°	°
±	±	±	2	²	²	3	³	³
′	´	´	μ	µ	&#181	"	"	"
<	&lt;	&#60;	>	&gt;	&#62;	'	?	&#39;

更多專業前端知識，請上 【猿2048】www.mk2048.com 創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的HTML5常用标签及特殊字符表的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。