一.段落標(biāo)簽
1.<p> </p>
align對齊屬性值：

• 值 描述
  left 左對齊內(nèi)容
  right 右對齊內(nèi)容
  center 居中對齊內(nèi)容
  justify 對行進(jìn)行伸展，這樣每行都可以有相等長度

2.<pre> </pre>
<pre> 標(biāo)簽可定義預(yù)格式化的文本。
被包圍在 <pre> 標(biāo)簽 元素中的文本通常會保留空格和換行符。而文本也會呈現(xiàn)為等寬字體。
提示: <pre> 標(biāo)簽的一個(gè)常見應(yīng)用就是用來表示計(jì)算機(jī)的源代碼。
3.文字斜體 <i> </i> 、 <em> </em>
加粗 <b> </b> 、<strong>關(guān)鍵詞 </strong>
下標(biāo)

上標(biāo)

下劃線 <ins>
刪除線 <del>
4.html常用特殊符號
屬性 顯示結(jié)果 描述
&lt；
&gt；
&reg；
&copy；
&trade；
&nbsp；

image.png

二.列表標(biāo)簽
1.無序列表：
<ul>
<li>列表項(xiàng)</li>
<li> 列表項(xiàng)</li>
</ul>
type屬性值：
值 描述
disc 圓點(diǎn)
square 正方形
circle 空心圓
2.有序列表
<ol>
<li> 列表項(xiàng) </li>
<li> 列表項(xiàng) </li>
</ol>
type屬性值
值 描述
1 數(shù)字1 2....
a 小寫字母a b...
A 大寫字母A B...
i 小寫羅馬數(shù)字i
Ⅰ 大寫羅馬數(shù)字Ⅰ
3.定義列表
<dl></dl>
<dt>定義列表項(xiàng)</dt>
<dd>列表項(xiàng)描述</dd>
定義標(biāo)簽內(nèi)可以有多個(gè)<dt>,對于每一個(gè)<dt>可以有多個(gè)<dd>
<dl><dt><dd>要組合使用
三1.<span>標(biāo)簽是沒有語義的，它的作用就是為了設(shè)置單獨(dú)的樣式用的。
語法：

<span>文本</span>

image.png

<q>引用文本</q>
語法:

<blockquote>引用文本</blockquote>
4.<address>標(biāo)簽，為網(wǎng)頁加入地址信息
語法：

<address>聯(lián)系地址信息</address>

如：

<address>文檔編寫：lilian 北京市西城區(qū)德外大街10號</address>

<address>
本文的作者：<a href="mailto:lilian@imooc.com">lilian</a>
</address>
5.<code>標(biāo)簽，添加一行代碼
語法：

<code>代碼語言</code>

注：如果是多行代碼，可以使用<pre>標(biāo)簽。
6.在網(wǎng)頁制作過程過中，可以把一些獨(dú)立的邏輯部分劃分出來，放在一個(gè)<div>標(biāo)簽中，這個(gè)<div>標(biāo)簽的作用就相當(dāng)于一個(gè)容器。

語法：

<div>…</div>

語法：

<div id="版塊名稱">…</div>
7.創(chuàng)建表格的四個(gè)元素：

table、tbody、tr、th、td

1、<table>…</table>：整個(gè)表格以<table>標(biāo)記開始、</table>標(biāo)記結(jié)束。

2、<tbody>…</tbody>：如果不加<thead><tbody><tfooter> , table表格加載完后才顯示。加上這些表格結(jié)構(gòu)， tbody包含行的內(nèi)容下載完優(yōu)先顯示，不必等待表格結(jié)束后在顯示，同時(shí)如果表格很長，用tbody分段，可以一部分一部分地顯示。（通俗理解table 可以按結(jié)構(gòu)一塊塊的顯示，不在等整個(gè)表格加載完后顯示。）

3、<tr>…</tr>：表格的一行，所以有幾對tr 表格就有幾行。

4、<td>…</td>：表格的一個(gè)單元格，一行中包含幾對<td>...</td>，說明一行中就有幾列。

5、<th>…</th>：表格的頭部的一個(gè)單元格，表格表頭。

6、表格中列的個(gè)數(shù)，取決于一行中數(shù)據(jù)單元格的個(gè)數(shù)。
總結(jié)：

1、table表格在沒有添加css樣式之前，在瀏覽器中顯示是沒有表格線的

2、表頭，也就是th標(biāo)簽中的文本默認(rèn)為粗體并且居中顯示
8.## 用mailto在網(wǎng)頁中鏈接Email地址

<a>標(biāo)簽還有一個(gè)作用是可以鏈接Email地址，使用mailto能讓訪問者便捷向網(wǎng)站管理者發(fā)送電子郵件。我們還可以利用mailto做許多其它事情。下面一一進(jìn)行講解，請看詳細(xì)圖示：

image

注意：如果mailto后面同時(shí)有多個(gè)參數(shù)的話，第一個(gè)參數(shù)必須以“?”開頭，后面的參數(shù)每一個(gè)都以“&”分隔。

下面是一個(gè)完整的實(shí)例:

image

語法：

<textarea rows="行數(shù)" cols="列數(shù)">文本</textarea>
1、<textarea>標(biāo)簽是成對出現(xiàn)的，以<textarea>開始，以</textarea>結(jié)束。

2、cols ：多行輸入域的列數(shù)。

3、rows ：多行輸入域的行數(shù)。

4、在<textarea></textarea>標(biāo)簽之間可以輸入默認(rèn)值。

舉例：

<form method="post" action="save.php">
<label>聯(lián)系我們</label>
<textarea cols="50" rows="10" >在這里輸入內(nèi)容...</textarea>
</form>
10.使用單選框、復(fù)選框，讓用戶選擇
語法：

<input type="radio/checkbox" value="值" name="名稱" checked="checked"/>
1、type:

當(dāng) type="radio" 時(shí)，控件為單選框

當(dāng) type="checkbox" 時(shí)，控件為復(fù)選框

2、value：提交數(shù)據(jù)到服務(wù)器的值（后臺程序PHP使用）

3、name：為控件命名，以備后臺程序 ASP、PHP 使用

4、checked：當(dāng)設(shè)置 checked="checked" 時(shí)，該選項(xiàng)被默認(rèn)選中
11.使用下拉列表框，節(jié)省空間
<select>
<option value="看書">看書</option>
<option value="旅游" selected="selected">旅游</option>
<option value="運(yùn)動">運(yùn)動</option>
<option value="購物">購物</option>
</select>
1、value：

image

2、selected="selected"：

設(shè)置selected="selected"屬性，則該選項(xiàng)就被默認(rèn)選中。

使用下拉列表框進(jìn)行多選

下拉列表也可以進(jìn)行多選操作，在<select>標(biāo)簽中設(shè)置multiple="multiple"屬性，就可以實(shí)現(xiàn)多選功能，在 windows 操作系統(tǒng)下，進(jìn)行多選時(shí)按下Ctrl鍵同時(shí)進(jìn)行單擊（在 Mac下使用 Command +單擊），可以選擇多個(gè)選項(xiàng)。
12.使用提交按鈕，提交數(shù)據(jù)
語法：

<input type="submit" value="提交">
type：只有當(dāng)type值設(shè)置為submit時(shí)，按鈕才有提交作用

value：按鈕上顯示的文字
13.使用重置按鈕，重置表單信息
語法：

<input type="reset" value="重置">

type：只有當(dāng)type值設(shè)置為reset時(shí)，按鈕才有重置作用

value：按鈕上顯示的文字

四、認(rèn)識CSS樣式

1.<style type="text/css">
p{
font-size:20px;/設(shè)置文字字號/
color:red;/設(shè)置文字顏色/
font-weight:bold;/設(shè)置字體加粗/
}
</style>
14.三種方法的優(yōu)先級
總結(jié)來說，就是--就近原則（離被設(shè)置元素越近優(yōu)先級別越高）。
15.偽類選擇符
更有趣的是偽類選擇符，為什么叫做偽類選擇符，它允許給html不存在的標(biāo)簽（標(biāo)簽的某種狀態(tài)）設(shè)置樣式，比如說我們給html中一個(gè)標(biāo)簽元素的鼠標(biāo)滑過的狀態(tài)來設(shè)置字體顏色：

a:hover{color:red;}
上面一行代碼就是為 a 標(biāo)簽鼠標(biāo)滑過的狀態(tài)設(shè)置字體顏色變紅。這樣就會使第一段文字內(nèi)容中的“膽小如鼠”文字加入鼠標(biāo)滑過字體顏色變?yōu)榧t色特效。