在瀏覽網(wǎng)頁時，你會發(fā)現(xiàn)網(wǎng)頁上有很多信息的列表，如新聞列表、圖片列表，如下圖所示。

新聞列表

圖片列表

這些列表就可以使用ul-li標簽來完成。ul-li是沒有前后順序的信息列表。

語法：

 ul  li 信息 /li  li 信息 /li  ...... /ul 

舉例：

 ul  li 精彩少年 /li  li 美麗突然出現(xiàn) /li  li 觸動心靈的旋律 /li  /ul 

ul-li在網(wǎng)頁中顯示的默認樣式一般為：每項li前都自帶一個圓點，如下圖所示：

來試試，在編輯器中的第8行輸入 ul li 我的第一個列表信息 /li /ul

li 在英文里代表 List(列表),ol 在英文里代表 ordered list（有序列表）,ul 在英文里代表 unordered list（無序列表）

 1 !DOCTYPE HTML  2 html  3 head  4 meta http-equiv= Content-Type content= text/html; charset=utf-8  5 title p標簽 /title  6 /head  7 body 10 /body 11 /html 

如果想在網(wǎng)頁中展示有前后順序的信息列表，怎么辦呢？如，當當網(wǎng)上的書籍熱賣排行榜，

如下圖所示。這類信息展示就可以使用 ol 標簽來制作有序列表來展示。

語法：

 ol  li 信息 /li  li 信息 /li  ...... /ol 

舉例：

下面是一個熱點課程下載排行榜：

 ol  li 前端開發(fā)面試心法 /li  li 零基礎(chǔ)學(xué)習(xí)html /li  li JavaScript全攻略 /li  /ol 

ol 在網(wǎng)頁中顯示的默認樣式一般為：每項 li 前都自帶一個序號，序號默認從1開始，如下圖所示：

來試試，在編輯器中的第 8 行輸入

 ol  li 我的第一個列表信息。 /li  li 我的第一個列表信息。 /li  /ol 

別忘了 ol 標簽的語法

 ol  li 信息 /li  li 信息 /li  ...... /ol  三、認識p在排版中的作用

 1 !DOCTYPE HTML  2 html  3 head  4 meta http-equiv= Content-Type content= text/html; charset=utf-8  5 title p標簽 /title  6 /head  7 body  8 h2 熱門課程排行榜 /h2  9 ol 10 li 前端開發(fā)面試心法 /li 11 li 零基礎(chǔ)學(xué)習(xí)html /li 12 li javascript全攻略 /li 13 /ol 14 h2 最新課程排行 /h2 15 ol 16 li 版本管理工具介紹—Git篇 /li 17 li Canvas繪圖詳解 /li 18 li QQ5.0側(cè)滑菜單 /li 19 /ol 20 /body 21 /html 

在網(wǎng)頁制作過程過中，可以把一些獨立的邏輯部分劃分出來，放在一個 p 標簽中，這個 p 標簽的作用就相當于一個容器。

語法：

p … /p

確定邏輯部分：

什么是邏輯部分？它是頁面上相互關(guān)聯(lián)的一組元素。如網(wǎng)頁中的獨立的欄目版塊，就是一個典型的邏輯部分。

如下圖所示：圖中用紅色邊框標出的部分就是一個邏輯部分，就可以使用 p 標簽作為容器。

來試試：用p標簽為網(wǎng)頁劃分獨立的版塊

在編輯器中使用p標簽劃分出獨立的邏輯部分。（答案有很多種噢，看看誰的最簡煉）

別忘了 p 標簽的語法： p … /p

參考代碼：（只是其中的一種）

 p  h2 熱門課程排行榜 /h2  li 前端開發(fā)面試心法 /li  li 零基礎(chǔ)學(xué)習(xí)html /li  li javascript全攻略 /li  /ol  h2 最新課程排行 /h2  li 版本管理工具介紹—Git篇 /li  li Canvas繪圖詳解 /li  li QQ5.0側(cè)滑菜單 /li  /ol 一個html頁面可以看成一個家，而一個p你們可以看成家的每個小房間，房間有了當然沒什么效果，但是一個家必須分成一個個小房間才能多姿多彩，但每個房間里怎么裝飾就得你們自己放東西，當然裝飾就得交給css了，后面講到 p class 大家就懂了。p標簽就是一個框，將里面的東西框起來，然后通過css來使這個框按照所需要的樣式顯示出來。 p 就是分類，把一類東西放在一塊，另一類東西放另一塊。這樣一目了然，就是 p 實現(xiàn)的。

p(pISION)顧名思義是對網(wǎng)頁劃分區(qū)塊，p、span可以看作為一個容器，或者說一個盒子（盒模型）。

相當于瀏覽器屏幕上放了許多容器，為了看著舒服每個容器當然要整齊有序排列——p定位問題用CSS的position、還有浮動問題用CSS的float、以及盒模型布局的使用；

另外，把容器擺好了之后，就要放內(nèi)容啦，比如列表、文本、圖像等等，就好比盤子容器里要放菜一樣，當然菜色多了就好看了，這就是CSS的作用。

學(xué)習(xí)當中要融匯貫通，為了做好偉大的Web大前端而學(xué)習(xí)。

 1 !DOCTYPE HTML  2 html  3 head  4 meta http-equiv= Content-Type content= text/html; charset=utf-8  5 title p標簽 /title  6 /head  7 body  8 p  9 h2 熱門課程排行榜 /h2 10 ol 11 li 前端開發(fā)面試心法 /li 12 li 零基礎(chǔ)學(xué)習(xí)html /li 13 li javascript全攻略 /li 14 /ol 15 /p 16 p 17 h2 web前端開發(fā)導(dǎo)學(xué)課程 /h2 18 ul 19 li 網(wǎng)頁專業(yè)名詞大掃盲 /li 20 li 網(wǎng)站職位定位指南 /li 21 li 為您解密Yahoo網(wǎng)站制作流程 /li 22 /ul 23 /p 24 /body 25 /html 

我們把一些標簽放進 p 里，劃分出一個獨立的邏輯部分。為了使邏輯更加清晰，我們可以為這一個獨立的邏輯部分設(shè)置一個名稱，

用id屬性來為 p 提供唯一的名稱，這個就像我們每個人都有一個身份證號，這個身份證號是唯一標識我們的身份的，也是必須唯一的。

如下兩圖進行比較，如果設(shè)計師把兩個圖給你，哪個圖你看上去能更快的理解呢？是不是右邊的那幅圖呢。

語法：

p id= 版塊名稱 … /p

來試試給網(wǎng)頁的獨立的版塊添加“標記”

1、在編輯器中的第8行修改 p 代碼為 p id= hotList 。

2、在編輯器中的第16行修改 p 代碼為 p id= learningInstructed 。

別忘了標記版塊名稱的語法：

p id= 版塊名稱 … /p

p相當于劃分成一個個房間，id就是房間號了

p的ID號是為了使用CSS的ID選擇器，應(yīng)用CSS樣式，否則毫無意義。

有時候我們需要在網(wǎng)頁上展示一些數(shù)據(jù)，如某公司想在網(wǎng)頁上展示公司的庫存清單。如下表：

想在網(wǎng)頁上展示上述表格效果可以使用以下代碼：

創(chuàng)建表格的四個元素：

table、tbody、tr、th、td

1、 table … /table ：整個表格以 table 標記開始、 /table 標記結(jié)束。

2、 tbody … /tbody ：當表格內(nèi)容非常多時，表格會下載一點顯示一點，但如果加上 tbody 標簽后，這個表格就要等表格內(nèi)容全部下載完才會顯示。

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

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

5、 th … /th ：表格的頭部的一個單元格，表格表頭。

6、表格中列的個數(shù)，取決于一行中數(shù)據(jù)單元格的個數(shù)。

上述代碼在瀏覽器中顯示的默認的樣式為：

總結(jié)：

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

2、表頭，也就是th標簽中的文本默認為粗體并且居中顯示

來試試為數(shù)學(xué)成績表添加一行內(nèi)容

在右部編輯器中的第25-29行輸入下列代碼：

25. tr

26. td 三班 /td

27. td 32 /td

28. td 80 /td

29. /tr

結(jié)果圖：

1、表格的行標簽的語法：

tr … /tr

2、一行中的單元格語法：

 tr  td … /td  td … /td  /tr 

tbody 防止那種因網(wǎng)速慢加載一點顯示一點的情況，
如果把網(wǎng)頁比作一個女士
加載樣式的過程是化妝過程
那么tbody就相當于屏蔽了化妝的過程直到
女士化好妝在真正出來見人

tr是“table row（表格行）”的縮寫，用于表示一行的開始和結(jié)束。這也容易理解。
td是“table data（表格數(shù)據(jù)）”的縮寫，用于表示行中各個單元格（cell）的開始和結(jié)束。

table 創(chuàng)建表格
tbody全顯示出來
th表頭
tr每一行
td每一個單元格

table 表格標簽 tbody /tbody 表格完全下載完后才顯示 tr 表格的一行標簽 td 表格的一個單元格，有幾個 td 就有幾列。 th /th 表格表頭標簽。

tr是行，td是表頭，td是單元格內(nèi)容；
有幾對tr就表示有幾行，有幾個td表示有幾列。

 1 !DOCTYPE HTML  2 html  3 head  4 meta http-equiv= Content-Type content= text/html; charset=utf-8 /  5 title 為表格添加邊框 /title  6 style type= text/css  7 table tr td,th{border:1px solid #000;} 8 /style  9 /head 11 body 12 table summary= 13 tr 14 th 班級 /th 15 th 學(xué)生數(shù) /th 16 th 平均成績 /th 17 /tr 18 tr 19 td 一班 /td 20 td 30 /td 21 td 89 /td 22 /tr 23 tr 24 td 二班 /td 25 td 35 /td 26 td 85 /td 27 /tr 28 tr 29 td 三班 /td 30 td 32 /td 31 td 80 /td 32 /tr 33 /table 35 /body 36 /html 

Table 表格在沒有添加 css 樣式之前，是沒有邊框的。我們?yōu)楸砀裉砑右恍邮剑瑸樗砑舆吙颉?/p>

在代碼編輯器中添加如下代碼：

 style type= text/css table tr td,th{border:1px solid #000;} /style 

上述代碼是用 css 樣式代碼，為th，td單元格添加粗細為一個像素的黑色邊框。

結(jié)果窗口顯示出結(jié)果樣式：

表格風(fēng)格改變代碼頭尾： style type= text/css ... /style
表格四元素：table tr td,th
邊框大小與顏色：{border:1px solid #000;}

 1 !DOCTYPE HTML  2 html  3 head  4 meta http-equiv= Content-Type content= text/html; charset=utf-8 /  5 title 認識table表標簽 /title  6 style type= text/css  7 table tr td,th{ 8 border:1px solid #000;10 /style 11 /head 12 body 13 table 15 tr 16 th 產(chǎn)品名稱 /th 17 th 品牌 /th 18 th 庫存量（個） /th 19 th 入庫時間 /th 20 /tr 21 tr 22 td 耳機 /td 23 td 聯(lián)想 /td 24 td 500 /td 25 td 2013-1-2 /td 26 /tr 27 tr 28 td U盤 /td 29 td 金士頓 /td 30 td 120 /td 31 td 2013-8-10 /td 32 /tr 33 tr 34 td U盤 /td 35 td 愛國者 /td 36 td 133 /td 37 td 2013-3-25 /td 38 /tr 39 /table 40 /body 41 /html 

表格還是需要添加一些標簽進行優(yōu)化，可以添加標題和摘要。代碼如下：

摘要

摘要的內(nèi)容是不會在瀏覽器中顯示出來的。它的作用是增加表格的可讀性(語義化)，使搜索引擎更好的讀懂表格內(nèi)容，還可以使屏幕閱讀器更好的幫助特殊用戶讀取表格內(nèi)容。

語法： table summary= 表格簡介文本

標題

用以描述表格內(nèi)容，標題的顯示位置：表格上方。

語法：

 table  caption 標題文本 /caption  td … /td  td … /td  /tr  /table 

來試試，為文章添加標題

1. 在編輯器中為表格添加摘要，摘要的內(nèi)容為“本表格記錄2012年到2013年庫存記錄，記錄包括U盤和耳機庫存量”。

2. 在編輯器中為表格添加標題，標題的內(nèi)容為“2012年到2013年庫存記錄”。

別忘了caption標簽的語法

 caption ... /caption 

標題，肯定在最上面，也不能跑到表外面吧。所以在 table 下一行的位置寫就行。
備注，是這個表的備注，所以，緊跟著table吧。 table summary= 本表是2012年的庫存表

table的summary屬性目的是語義化標簽，是為了SEO，和 !--注釋-- 完全是兩回事，

因為瀏覽器(除了ie)，百度，谷歌的引擎是不會讀你的注釋文字的。

【相關(guān)推薦】

1. 免費html在線視頻教程

2. html開發(fā)手冊

3. VeVb.com原創(chuàng)html5視頻教程

以上就是html基礎(chǔ)教程之認識標簽（三）的詳細內(nèi)容，html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。