HTML圖片標籤和列表標籤
1.img標籤
img標籤用於在網頁中插入圖片，基本語法如下：
<img src="圖片路徑">常用屬性如下：
| 屬性 | 描述 |
|---|---|
| alt | 指定圖片的替換資訊 |
| height | 定義圖片的高度 |
| width | 定義圖片的寬度 |
| title | 定義圖片的提示資訊 |
注意：預設情況下圖片和父級元素的下邊框會存在一個小空隙，解決辦法：一種是設定父元素的的高度等於圖片的高度，第二種方法是給img標籤新增vertical-align垂直對齊屬性，屬性值可以取top(向上對齊)、middle(垂直居中對齊)、bottom(向下對齊)。另外設定height和width的時候，如果在img標籤裡只設置一個另一個屬性會同比縮放，也可以同時設定兩個屬性。
2.使用CSS設定圖片樣式
使用CSS可以設定圖片的大小、邊框、邊距、對齊方式等樣式，其中大小、邊框、邊距的樣式使用盒子模型的相關屬性設定，而圖片的對齊方式又分為水平對齊和垂直對齊，其中，水平對齊相對於包含的容器視窗來說的，主要是使用text-align屬性(當視窗中只有圖片時)或浮動和定位來實現(當圖片周圍有其他兄弟物件時)，而垂直對齊屬性則主要使用CSS屬性vertical-align來設定，元素的vertical-align屬性定義了行內元素的基線對齊相對於該元素所在行的基線的垂直對齊，需要注意的是vertical-align屬性設定的對齊方式只對顯示方式為inline(行內)、inline-block(行內塊)和table-cell(表格單元的元素有效)，對block(塊)型別元素沒有效。vertical-align屬性的設定語法如下：
vertical-align:align_value;引數如下表所示：
| 引數值 | 描述 |
|---|---|
| length | 以px、em等為單位的數值，可取正、負值。正值表示元素相對於基線升高指定值的距離，負值則降低指定值的距離。0px等效於basline |
| % | 相對於繼承的line-height的百分數。 |
| baseline | 預設對齊方式。元素的基線於父元素的基線對齊 |
| bottom | 元素的底部與line-box(行框)的底端對齊(每一行稱為一個line-box) |
| middle | 元素放在父元素的中部(當元素不是單元格時，只有父元素為table-cell且父元素也設定為垂直居中時這個屬性值才能體現元素垂直居中效果) |
| text-top | 元素的頂部與父元素的文字的頂部對齊 |
3.列表標籤
3.1建立有序列表
建立有序列表需要使用 ol 和 li 標籤，具體語法如下：
<ol>
<li>列表項一</li>
<li>列表項二</li>
……
</ol>
- type屬性
type屬性用來設定專案符號，設定語法如下：
<ol type="專案符號">| 屬性值 | 描述 |
|---|---|
| 1 | 專案符號為數字1、2、3…(預設符號) |
| a | 專案符號為小寫字母a、b、c… |
| A | 專案符號為大寫字母A、B、C… |
| i | 專案符號為小寫羅馬數字i、ii、iii… |
| I | 專案符號為大寫羅馬數字I… |
3.2無序列表
以無次序含義的符號等為專案符號來排列列表項的列表，稱為無序列表，建立語法如下：
<ul>
<li>列表項一</li>
<li>列表項二</li>
……
</ul>- type屬性
type屬性用來設定專案符號，設定語法如下：
<ul type="專案符號">| 屬性值 | 描述 |
|---|---|
| disc | 專案符號為實心圓點 |
| circle | 專案符號為空心圓點 |
| square | 專案符號為實心小方塊 |
3.3建立定義列表
定義列表用於對名詞進行描述說明，是一種具有兩個層次的列表，其中名詞為第一層次，解釋為第二層次，建立定義列表需要使用dl、dt和dd3種標籤，基本語法如下：
<dl>
<dt>名詞一</dt>
<dd>解釋1</dd>
<dd>解釋2</dd>
…
<dt>名詞二</dt>
<dd>解釋1</dd>
<dd>解釋2</dd>
…
…
</dl>3.4使用CSS列表屬性
CSS列表屬性主要用於設定列表專案型別，常用的列表屬性如下表所示：
| 屬性 | 屬性值 | 描述 |
|---|---|---|
| list-style | 其他任意的列表屬性值 | 簡寫屬性。用於把所有用於淚飆的屬性設置於一個宣告中 |
| list-style-type | disc | 預設值，實心圓點 |
| list-style-type | circle | 列表專案符號是空心圓點 |
| list-style-type | square | 列表專案符號是實心方塊 |
| list-style-type | decimal | 列表專案符號是普通的阿拉伯數字 |
| list-style-type | lower-roman | 列表專案符號是小寫的羅馬數字 |
| list-style-type | upper-roman | 列表專案符號是大寫的羅馬數字 |
| list-style-type | lower-alpha | 列表專案符號是小寫的英文字母 |
| list-style-type | upper-alpha | 列表專案符號是大寫的英文字母 |
注：上述列表中的兩個屬性在實際應用中，主要用來取消列表的預設樣式，列表專案符號因為存在瀏覽器相容問題，所以一般不需要使用屬性設定，而是通過設定背景作為列表專案符號。