HTML5常用標簽及特殊字符表

 

*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的子標簽則可以是任意其他標簽

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

 

---

 

 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"，默認值為2px
    3.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標簽設置bgcolor
        2、給tr標簽設置bgcolor
        3、給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>

 

 

---

 

特殊字符

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