HTML基礎知識之列表和表格的使用

、HTML與XHTML的區別

（1）在XHTML 中標簽名稱必須小寫，在HTML 中標簽名稱既可以小寫也可以大寫；

（2）在XHTML 中標簽必須封閉，在HTML中標簽可以不成對出現；

（3）在XHTML 中標簽必須嚴格嵌套，HTML對標簽嵌套沒有嚴格規定；

（4）在XHTML 中屬性名稱必須小寫，在HTML 中也一樣；

（5）在XHTML 中標簽必須用雙引號引起來，HTML中可以不用；

二、特殊符號

表示空格；
"表示雙引號；
&表示&符號；
>表示大于號>；
<表示小于號<；
&copy?表示版權符號?；

三、列表的使用

（1）無序列表

無序列表是一個項目列表，使用項目符號標記無序列表的項目，無序列表也就是沒有順序的列表；
無序列表的type屬性取值有三種，分別是circle（圓圈）、disc（實心圓點）、square（方塊）；

# 打印實心圓點的無序列表

<body>
 <ul type="disc">
 <li>第一</li>
 <li>第二</li>
 <li>第三</li>
 </ul>
</body>

（2）有序列表

有序列表也是由一個個列表項組成，列表想既可以使用數字標記，也可以使用字母標記；
有序列表的type屬性取值有5中，分別是1（數字）、i（小寫羅馬字母）、I（大寫羅馬字母）、a（小寫字母）、A（大寫字母）；

# 打印數字排序的有序列表

<body>
 <ol type="1">
 <li>我最愛椰奶</li>
 <li>第二愛可樂</li>
 <li>第三愛橙汁</li>
 </ol>
</body>

（3）定義列表

定義列表是當無序列表和有序列表都不適合時，通過自定義列表來完成自定義展示，所以定義列表不僅僅是一個項目列表，而是項目和注釋的組合；

<body>
 <dl>
 <dt>春曉</dt>
 <dd>春眠不覺曉，處處聞啼鳥</dd>
 <dd>夜來風雨聲，花落知多少</dd>
 </dl>
</body>

四、表格的使用

（1）表格的基本結構

單元格：表格的最小單位，一個或多個單元格縱橫排列組成了表格；
行：一個或多個單元格橫向堆疊形成了行；
列：一個或多個單元格縱向堆疊形成了列；

<table>
 <tr>
 <td>第一行第一列</td> 
 <td>第一行第二列</td> 
 <td>第一行第三列</td> 
 </tr>
 <tr>
 <td>第二行第一列</td> 
 <td>第二行第二列</td> 
 <td>第二行第三列</td> 
 </tr>
</table>

（2）表格的對齊方式

align屬性：left表示水平居左、center表示水平居中、right表示水平居右；
valign屬性：top表示垂直置頂、middle表示垂直居中、bottom表示垂直靠底；

（3）表格的其他屬性

th：一種特殊的單元格，加粗并居中；
caption：表格標題；
cellspacing：規定單元格之間的空間；
cellpadding：規定單元邊沿與其內容之間的空白；
colspan：表格跨列；
rowspan：表格跨行；

欄縱向個人博客模板Html(提供多頁面下載)

模板提供多個頁面，博客頁面布局格式簡單，沒有復雜的背景、動態幻燈片展示、欄目、標簽、搜索應有盡有，簡潔又不失大氣，模板來自整理，可適應手機端頁面

* 下載本站模板以及作品僅供學習研究使用 *

編今天的分享主題是顯示屬性、列表屬性、定位屬性；

首先，我們先來了解一下關于顯示屬性

顯示屬性，它表示了一個框或者盒的表現，具有2層含義，分別是顯示方式和顯示效果；

1.顯示方式，即display屬性，具體是指一個框的表示形式，它自己固定的取值候選：

a)none：表示讓這個元素不顯示，隱藏起來，同時這個元素是不占據這個文檔的空間的。

b)block：表示讓這個元素以塊級元素的形式顯示，在它后面的元素是會另外起一行，這個時候的元素是可以自己定義它的高度和寬度的。如果你想設置一個行內元素的高和寬，或者想讓一個隱藏了的元素顯示的話，這個方式就是非常好的。

c）inline：表示讓這個元素以行內元素的形式顯示，這個時候后面的元素會緊跟著前面的元素，并列顯示，同事也不能設置高度和寬度。

d）inline-block：表示讓這個元素以行內塊的形式顯示，其實就是一個行內元素，不過這個行內元素可以設置高度和寬度了。如果你不想讓這個元素的后面元素另外起一行又想改變這個元素的高度和寬度，那這個方法是極好的。

以上4個候選取值，就是display的取值詳解，語法規范就是display：none/block/inline/inline-block，具體的按照實實際開發需求。練習的時候，可以每個都試一試，看看它們分別是什么效果。

2.顯示效果，就是元素顯示了之后，再設置它的一些效果，先簡單的介紹4個效果：

a）visibility屬性，即表示這個元素的顯示與否，取值有visible（顯示的，也是默認值）、hidden（不顯示），這個屬性看似和上訴的顯示方式挺像的，它們有一個非常明顯的區別就是，display為none時，它是不占據空間的；而visibility為hidden時，它雖然是看不見的，但是它會占據頁面空間，可能會影響文檔的排版問題，這需要特別的注意。

b）opacity屬性，即表示這個元素的透明度，取值范圍就是0至1，其中0表示完全透明，1表示完全不透明，記住取值越大，越不透明。

c）vertical-align屬性，即表示這個元素的垂直對齊，取值可以有：top/middle/bottom baseline；基線對齊

d）cursor屬性即光標，表示當你的鼠標在經過這個元素時候，鼠標顯示的樣式；取值有：pointer(手的形狀)、default(默認)、crosshair(顯示為“+”)、text(顯示為“I”)、wait(顯示為等待)、help（顯示為“？”）

其次，我們了解一下列表屬性

列表，就是講這部分的內容按照一定的順序排列，可以是橫向的也可以是縱向的，她有列表樣式屬性、列表項圖像屬性、列表項位置、列表綜合屬性。

1.列表樣式即list-style-type，分為有序列表、無序列表，有序的列表是按照數值排序、羅馬數字排序，無序列表就是列表項為實心圓、空心圓、實心矩形。

無序列表的取值為：none（無標記）、disc(實心圓)、circle（空心圓）、square（實心矩形）

有序列表的取值為：none（無標記）、decimal（數字）、lower-roman(小寫的羅馬數字)、upper-roman(大寫的羅馬數字)

2.列表項圖像即list-style-image，表示列表項圖像不想取值為數字或者實心圓等時，可以自定義一個圖像；語法規范：list-style-image:url(文件路徑)

3.列表項位置即list-style-position，就是li前面標識的位置，取值有：outside（標識在li外）、inside（標識在li內）

4.列表的總和屬性即list-style，語法規范：list-style:type url position 實例list-style:circle url(xxxx.jpg) inside

以上就是列表的一些樣式了，可以自己打打代碼，看看具體的效果

最后，我們了解一下定位屬性

定位 position，就是元素在文檔的位置，當需要對元素的位置進行修改時，就需要用到定位啦！

定位分為：普通流定位、浮動定位、相對定位、絕對定位、固定定位

定位的屬性就是：position，取值有：static(靜態定位即普通流定位)、relative(相對定位)、absolute（絕對定位）、fixed(固定定位)

display屬性在使用的時候，需要配合top\bottom\left\right屬性使用，表示偏移量。

z-index屬性，表示當多個元素重疊的時候，誰在前面誰在后面，值越大越靠近用戶

接下來詳解各個定位：

1.相對定位：就是這個元素相對于自己本身的位置偏移指定的量數；具體的實現方式(二步曲)就是先定義定位方式，再定義指定偏移量：即display：relative；left\top\right：xxpx；常常用于彈出菜單的實現

2.絕對定位：就是這個元素相對了已經定義為相對定位的最近的父級；實現的方式同上，display為absolute，常用的場景非常多。

3.固定定位：就是將元素固定在網頁的某個位置處，不跟隨滾動條發生滾動；實現方式同上，display為fixed，常用于網頁固定的小廣告，多數情況下是相對與body實現固定定位的。

在線咨詢

上一篇：程序員都必掌握的前端教程之HTML基礎教程（下）
下一篇：HTML有2種路徑的寫法：絕對路徑和相對路徑

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。