WEB入門一 網頁設計基礎
本章簡介
視頻課：https://edu.csdn.net/course/play/7621
在當今社會，網頁是網絡信息共享和發布的主要形式。而HTML (Hyper Text Mark-up Language)，即超文本標記語言，是創建網頁基礎。本章將學習HTML文檔的基本結構、組成HTML文檔的各類常見標簽。HTML 標簽可以說明文字、圖形、動畫、聲音、表格和鏈接等。本章重點是各種標簽的基本語法和用法。
核心技能部分
1.1???????HTML文檔基本結構
首先我們來了解下什么是HTML以及它和瀏覽器之間的關系。
1.????????什么是HTML
HTML稱為超文本標簽語言，它包括很多標簽 (例如：
段落、
~標題標簽)，這些標簽用來告訴瀏覽器(例如微軟公司的InternetExplorer，簡稱IE) 如何顯示頁面，它是網頁制作的基礎。
它有如下特點：
?????????簡單性：各類HTML標簽簡單易學，方便開發者學習、使用。
?????????平臺無關性：這是HTML語言的最大優點，也是Internet網絡盛行的原因之一。它包括“硬件”平臺無關性和“軟件”平臺無關性，不管你的計算機是普通的個人電腦，還是服務器或其它計算機（比如：蘋果機），也不管你的操作系統是常見的Windows，還是高端Unix或Linux，HTML都可以得到良好的支持
2.????????HTML和瀏覽器的關系
和Java需要JRE運行時環境一樣，有了HTML文檔，還需要一個“解釋和執行”的工具，而瀏覽器就是用來解釋并執行HTML文檔的工具。想運行HTML文檔就要有一個瀏覽器：比如微軟公司的IE、Mozilla公司的Firefox（火狐）。
1.1.1?????????????HTML文檔結構
一個完整的HTML文檔至少包含 html、head、title、body 4個標簽，它們成對出現，即以<標簽名>開始，以結束，例如：
1.???????標簽
標簽是HTML文檔的根標簽，頁面中的所有內容都必須包含在與之間。
2.???????
標簽一個網頁文檔從總體上可分為頭和主體兩部分。
和定義了 HTML文檔的頭部分，它包含頁面的標題、文件MIME類型、樣式表、腳本等。就像平時寫的書信，書信一般由稱謂、問候語、正文、結尾、署名、日期所構成；書信的頭部就是稱謂和問候語。譬如：尊敬的老師：您好，現在工作忙嗎？下面就是書信的主體部分了。其中，標題在下面的介紹，文件MIME類型就是設定某種擴展名的文件用一種應用程序來打開的方式類型，當該擴展名文件被訪問的時候，瀏覽器會自動使用指定應用程序來打開。多用于指定一些客戶端自定義的文件名，以及一些媒體文件打開方式。例如，假設你要傳送一個MicrosoftExcel文件到客戶端。那么這時的MIME類型就應該設置為下面的格式“application/vnd.ms-excel”。樣式表是用來美化HTML標簽的，具體的用法在第三章會介紹；而腳本就是javascript腳本程序，主要功能是用來做頁面的輸入驗證的，以及一些頁面特效；javascript會在二期課程中重點學習。
3.???????
這是網頁的主體部分
示例1.3在瀏覽器的運行效果如圖1.1.2所示，可見注釋里面的內容“這里是HTML注釋，將不會顯示在瀏覽器的窗口中”并不會顯示。
圖1.1.2 HTML注釋
2.?特殊字符
當需要在網頁上顯示用作HTML標簽的特殊字符 (如“<”、“>”等)以及被瀏覽器忽略的空格字符時，如果直接使用字符，瀏覽器將以標簽的形式進行解釋或忽略。例如在頁面中顯示，若直接在HTML文檔中輸入時將被瀏覽器忽略，即頁面中不顯示任何內容。此時，需要使用HTML編碼來顯示特殊字符。
HTML文檔中的特殊字符通常用字符序列來表示，此序列以字符“&”開頭，以分號 (;)結束。如在頁面中顯示大于 (>)號時，可用連續字符序列“>”表示，HTML 中常用的特殊字符編碼見表1-1-1所示。
表1-1-1 常用特殊字符 HTML編碼
特殊字符
HTML編碼
<
<
>
>
?
©
?
®
空格
1.2???????編輯HTML文檔
了解了HTML文檔的基本結構，下面學習如何編輯HTML文檔。
1.???記事本
記事本是Windows自帶的文本編輯工具，使用簡單方便，實際項目開發中常用來編輯代碼較少的文檔，使用記事本編輯HTML文檔的步驟如下：
(1) 在Windows操作系統中打開記事本程序。
(2) 在記事本中輸入HTML代碼，如圖1.1.3所示。
圖1.1.3 記事本編輯HTML文檔
(3) 點擊菜單“文件”-->“保存”，彈出“另存為”對話框，如圖1.1.4所示，將文件保存為*.htm或*.html文件，如first.html。
圖1.1.4 文件“另存為”對話框
(4)????? 雙擊保存的HTML文檔，系統將自動調用瀏覽器（如：IE）打開HTML文檔。結果如圖1.1.5所示。
圖1.1.5 我的第一個網頁
2.????????使用 EditPlus創建第一個 HTML文檔
使用任意一款文本編輯器都可以編寫HTML文檔，本書將介紹使用小巧但功能強大的EditPlus文本編輯器。當然，也可以使用記事本、UltraEdit等其他文本編輯工具來編寫HTML文檔。
(1)?????首先，打開 EditPlus編輯器，單擊“文件”-“新建”+“其他”菜單，在彈出的“選擇文件類型”對話框中選擇“HTML”，如圖1.1.6所示。
圖1.1.6 EditPlus選擇文件類型
(2)?????文件創建完畢后，在編輯器中輸入如下代碼，如圖1.1.7所示：
圖1.1.7 使用EditPlus編寫網頁
(3)???單擊“文件”-“保存”，在彈出的對話框中選擇要存盤的路徑以及文件名。需要注意的是，HTML文檔的擴展名是“.html”或“.htm”。使用瀏覽器中查看該文件的輸出效果，如圖 1.1.8所示
圖1.1.8 使用EditPlus編輯的HTML文檔
1.3???????HTML常用標簽
HTML標簽是HTML語言中最基本的單位，也是HTML語言最重要的組成部分，HTML標簽具有以下 3個特點：
1.????????標簽通常使用“<”和“>”兩個尖括號括起來。
2.????????標簽都是閉合的。閉合是指標簽的結尾必須以“/”標識結束，例如在和標簽中，是開始標簽，是結束標簽，但并不是所有的標簽都必須成對出現，例如
標簽就是單獨出現的標簽。
3.????????標簽名不區分大小寫，但是推薦都使用小寫，因為在新的HTML標準中全部使用小寫標簽名。例如，
與表示完全相同的意思。HTML基本標簽有很多，本章主要列舉一些常用的 HTML標簽，如格式標簽、文本、圖像和超鏈接等。1.3.1?????????????最常用的幾個標簽
1.????????
~標題標簽
標簽用于設置網頁中的標題文字，被設置的文字將以黑體或粗體的方式顯示在網頁中。標題標簽是成對出現的，標題標簽共分為 6級。在
和
之間的文字是最后一級標題，即最小最細的標題。示例1.4
衛生部部長陳竺回應鉻含量超標膠囊事件
2012年04月18日20:02? 來源：中國廣播網
...........
本文相關推薦
在瀏覽器中運行，結果如圖1.1.9所示
圖1.1.9 標題標簽的運行效果
2.????????
段落標簽
標簽是HTML的段落標簽，表示以段落的形式組織內容。
與
之間可以加入文字表、表格等。一個段落可以包含多行文字，文字將隨瀏覽器的大小自動換行。示例1.5
Android 系統發展狀況
IDC：2015年Android市場份額將達到45%。
IDC：2011年智能手機出貨量將超過4.5億部。
2010年移動開發人才需求20萬，未來人才需求缺口將達百萬。
51job：有1年開發經驗的Android工程師月薪在8000元左右。
示例1.5在瀏覽器中的運行結果如圖1.1.10所示。
圖1.1.10 段落標簽的使用
3.????????
換行標簽
標簽表示強制換行顯示，這個標簽沒有結束標簽。在HTML源碼中的換行并不能讓網頁運行顯示時換行，如果要想在制定的地方換行就要使用
標簽。
示例1.6
什么是 HTML 文件？
HTML 指超文本標簽語言。
HTML 文件是包含一些標簽的文本文件。
這些標簽告訴 WEB 瀏覽器如何顯示頁面。
HTML 文件必須使用 htm 或者 html 作為文件擴展名。
HTML 文件可以通過簡單的文本編輯器來創建。
示例1.6在瀏覽器中的運行結果如圖1.1.11所示。
圖1.1.11 換行標簽的使用
1.3.2?????????????格式化標簽
1.????????
2.????????有序列表標簽
- 表示列表項。
3.????????無序列表標簽
- 表示列表項。無序列表主要用來做頁面導航菜單或新聞列表等等。
示例1.7
列表的用法 什么是 HTML 文件？(有序列表)
- HTML 指超文本標簽語言。
- HTML 文件是包含一些標簽的文本文件。
- 這些標簽告訴 WEB 瀏覽器如何顯示頁面。
什么是 HTML 文件？(無序列表)
- HTML 指超文本標簽語言。
- HTML 文件是包含一些標簽的文本文件。
- 這些標簽告訴 WEB 瀏覽器如何顯示頁面。
示例1.7在瀏覽器中的運行結果如圖1.1.12所示。
圖1.1.12 列表標簽的使用
4.????????自定義列表標簽
- (自定義標題)標簽和
- (自定義描述)標簽能夠分別容納數據中的標題和內容。
示例1.8
自定義列表的用法 - 產品名稱：
- 空調
- 產品價格：
- 1800元
- 產品簡介：
- 綠色環保，安全省電
示例1.8在瀏覽器中的運行結果如圖1.1.13所示。
圖1.1.13 自定義列表的使用
5.????????預定義格式標簽
編寫HTML文檔代碼時，有時我們想在代碼里編寫的什么格式在瀏覽器里查看的時候也是什么格式；但是瀏覽器在解析代碼的時候會忽略多余的空格和換行。這時可以使用
標簽設置某種自定義格式，例如使用回車將內容換行顯示、使用空格將兩句話隔開等。
示例1.9
pre標簽的用法 春曉
春眠不覺曉，處處聞啼鳥。
夜來風雨聲，花落知多少。
示例1.9在瀏覽器中的運行結果如圖1.1.14所示。
圖1.1.14
標簽的使用
1.3.3?????????????文本標簽
1.????????字體形狀標簽
字體形狀包括字體加粗、傾斜、下劃線、下標、上標等。和用于將文本加粗；和用于設置斜體；和用于為文本添加下劃線；用于將文字作為下標顯示，用于將文字作為上標顯示。
示例1.10
字體格式標簽的用法 春曉 孟浩然
"春眠不覺曉"，春日酣夢不知不覺到了早晨。這首詩之所以深受人們喜愛，除了語言
明白曉暢、音調瑯瑯上口之外，還在于它貼近生活，情景交融，意味雋永。[2]
示例1.10在瀏覽器中的運行結果如圖1.1.15所示。
圖1.1.15 字體形狀標簽的使用
2.????????字體標簽
和用于設置文本的字體、字號、顏色等。
語法：
其中，size用于設置字體的大小，取值為l~7，默認為 3。face用于設置文本需要使用的字體，使用某種特定的字體完全取決于用戶機器上該字體是否可用，該屬性不指示任何字體下載。因此，強烈推薦使用一個通用字體名作為補充，如字體Arial。color用于設置文本的顏色，可以使用顏色名稱，如 red表示紅色、green表示綠色、blue表示藍色等，還可以使用十六進制的 RGB顏色值，如 #FFOOOO表示紅色、#OOFFOO表示綠色、#OOOOFF表示藍色。
RGB色彩模式（也翻譯為“紅綠藍”，比較少用）是工業界的一種顏色標準，是通過對紅(R)、綠(G)、藍(B)三個顏色通道的變化以及它們相互之間的疊加來得到各式各樣的顏色的，RGB即是代表紅、綠、藍三個通道的顏色，這個標準幾乎包括了人類視力所能感知的所有顏色，是目前運用最廣的顏色系統之一。
示例1.11
font標簽的用法 HTML
是一種規范,一種標準
示例1.11在瀏覽器中的運行結果如圖1.1.16所示。
圖1.1.16 標簽的使用
1.3.4?????????????圖像標簽
如果一個網頁中只有文字沒有圖像，就會顯得過于簡單、呆板，不能達到生動活潑的效果。HTML語言提供了
標簽用于顯示網頁中的圖像。使用
標簽能夠顯示多種格式的圖片，如下所述。
1.????????圖片格式
(1)????? BMP格式
BMP 是（Windows 位圖） Windows 位圖，可以用任何顏色深度（從黑白到 24 位顏色）存儲單個光柵圖像。Windows 位圖文件格式與其他 Microsoft Windows 程序兼容。它不支持文件壓縮，也不適用于 Web 頁。從總體上看，Windows 位圖文件格式的缺點超過了它的優點。為了保證照片圖像的質量，請使用 PNG、JPEG、TIFF 文件。BMP 文件適用于 Windows 中的墻紙。
(2)????? GIF格式
GIF(GraphicsInterchange Format)的原義是"圖像互換格式"，是CompuServe公司在 1987年開發的圖像文件格式。GIF文件的數據，是一種基于LZW算法的連續色調的無損壓縮格式。其壓縮率一般在50%左右，它不屬于任何應用程序。目前幾乎所有相關軟件都支持它，公共領域有大量的軟件在使用GIF圖像文件。GIF格式的另一個特點是其在一個GIF文件中可以存多幅彩色圖像，如果把存于一個文件中的多幅圖像數據逐幅讀出并顯示到屏幕上，就可構成一種最簡單的動畫。
(3)????? JPEG格式
JPEG是Joint Photographic Experts Group(聯合圖像專家組)的縮寫，文件后輟名為"．jpg"或"．jpeg"，是最常用的圖像文件格式，由一個軟件開發聯合會組織制定，是一種有損壓縮格式，能夠將圖像壓縮在很小的儲存空間，圖像中重復或不重要的資料會被丟失，因此容易造成圖像數據的損傷。
JPEG格式的應用非常廣泛，特別是在網絡和光盤讀物上，都能找到它的身影。目前各類瀏覽器均支持JPEG這種圖像格式，因為JPEG格式的文件尺寸較小，下載速度快。
(4)????? PNG格式
PNG(PortableNetwork Graphics)的原名稱為"可移植性網絡圖像"，是網上接受的最新圖像文件格式。PNG能夠提供長度比GIF小30%的無損壓縮圖像文件。它同時提供 24位和48位真彩色圖像支持以及其他諸多技術性支持。由于PNG非常新，所以目前并不是所有的程序都可以用它來存儲圖像文件，但Photoshop可以處理PNG圖像文件，也可以用PNG圖像文件格式存儲。
2.????????
標簽
標簽用于在頁面中插入圖像，它使用 src屬性指定插入圖像源文件所在的路徑。
語法：
示例1.12
img標簽用法 
中文名：劉翔
別名：翔飛人
運動項目：田徑110米欄運動員
劉翔(Liu Xiang)是中國田徑(110米跨欄)一級運動員。
2004年雅典奧運會上以12.91秒的成績平了保持11年之久的世界紀錄；
東亞運動會田徑男子110米欄決賽中，成就“三冠王”。
2011年劉翔成為中國人民政治協商會議第十一屆全國委員會委員。
2011年4月初，教練孫海平表示劉翔的起跑技術已經從原先的八步改為七步上欄，
劉翔首試七步上欄技術，以13秒07的成績力壓美國名將大衛?¤奧利弗獲得冠軍
示例1.12在瀏覽器中的運行結果如圖1.1.17示：
圖1.1.17 img標簽的使用
超鏈接是網頁中相對醒目的一段文本或一個圖標，只要用鼠標單擊超鏈接，瀏覽器就會打開超鏈接所指向的網頁，從一個網頁跳轉到另一個網頁。如圖1.1.18
圖1.1.18 超鏈接頁面
1.????????超鏈接
標簽用于創建超鏈接，超鏈接標簽提供 href屬性來設置頁面鏈接的地址。
示例1.13
超鏈接標簽用法 百度||
谷歌||
新浪||
示例1.13 在瀏覽器中的運行結果如圖1.1.19所示：
圖1.1.19 超鏈接的使用
2.????????文件路徑
怎樣在一個HTML頁面中引用另一個HTML頁面作為超鏈接？怎樣在一個網頁中插入一張圖片？在下面將一一解決這些問題。如果在引用文件時 (如添加超鏈接或插入圖片等)，使用了錯誤的文件路徑，將會導致引用失效，無法瀏覽鏈接文件或無法顯示插入的圖片等。
HTML有兩種路徑寫法：絕對路徑和相對路徑。
(1)????? 絕對路徑
絕對路徑是指帶域名或盤符的完整路徑。如需要訪問百度網站的logo，徑為http://www.baidu.com/img/baidu_sylogo1.gif，http：//www.baidu.com是Web應用程序的根目錄，在根目錄下擁有一個img目錄，baidu_sylogo1.gif文件就存放在img目錄下。
(2)????? 相對路徑
相對路徑就是指由這個文件所在的路徑引起的跟其它文件(或文件夾)的路徑關系。使用相對路徑可以為我們帶來非常多的便利。
如果源文件和引用文件在同一個目錄里，直接寫引用文件名即可。例如：我們現在建一個源文件info.html，在info.html里要引用index.html文件作為超鏈接。
如果info.html和index.html在同一個目錄下，則可以如下方式鏈接
如果index.html在info.html文件的上級路徑，則可以使用../代表一級上級目錄(間隔一個目錄)，../../代表二級上級目錄(間隔兩個目錄)。則可以使用如下方式鏈接
3.????????錨點
使用錨點可以在文檔中設置標簽，這些標簽通常放在文檔的特定主題處或頂部。然后創建指向錨點的鏈接，通過鏈接可以快速定位到指定位置。
(1)????? 創建錨點
(2)????? 鏈接到命名錨點
鏈接到錨點需要使用標簽分為兩種情況：鏈接到當前文檔中的錨點、鏈接到其他文檔中的錨點。
鏈接到當前文檔中的錨點：鏈接文本
鏈接到其他文檔中的錨點：鏈接文本
示例1.13
錨點超鏈接標簽用法 Chapter 1
本章內容
Chapter 2
本章內容
Chapter 3
本章內容
Chapter 4
本章內容
Chapter 5
本章內容
示例1.13在瀏覽器中運行結果如圖1.1.20所示。因為在超鏈接“查看 Chapter 4。”處設置了鏈接到錨點C4，所以當點擊該超鏈接時，頁面自動滾動到錨點C4處。
圖1.1.20 錨點超鏈接用法
錨點連接用的比較多的是一些電子商務網站，由于商品比較多，用戶拉滾動條一直向下瀏覽商品；到網頁的最底部的時候怎么直接跳轉到頁面頂端呢？這時用錨點是一個省時省力的方法。
本章總結
?????????HTML文檔基本結構
n??????標簽
n??????
標簽n??????
標簽</p><p>n??????<body>標簽</p><p>?????????HTML常用標簽</p><p>n??????<h1>~<h6>標題標簽</p><p>n??????<p>段落標簽</p><p>n??????格式化標簽</p><p>u??????<center>居中標簽</p><p>u??????<ol>有序列表</p><p>u??????<ul>無序列表</p><p>u??????<dl> 自定義列表</p><p>u??????<pre>與格式化標簽</p><p>n??????文本標簽</p><p>u??????<b>文本加粗</p><p>u??????<i>設置斜體</p><p>u??????<u>文本下劃線</p><p>u??????<sub>下標</p><p>u??????<sup>上標</p><p>n??????圖像標簽<img></p><p>n??????超鏈接標簽<a></p><p>任務實訓部分</p><p>實訓任務1：制作唐詩三百首介紹頁面</p><p>訓練技能點</p><p>?????????HTML文檔的基本結構</p><p>?????????<h1>~<h6>標題標簽的用法</p><p>?????????換行標簽<br/>、水平線標簽<hr/></p><p>需求說明</p><p>使用EditPlus工具編寫代碼，實現如圖1.2.1所示的頁面效果</p><p>實現思路</p><p>使用<h1>標簽顯示大標題，<h2>標簽顯示小標題。使用<hr/>做分割線,<p/>標簽組織段文字，<br/>標簽進行換行顯示</p><p>實現步驟</p><p>(1)?????使用EditPlus創建HTML文件，命名為exercise1.html</p><p><html></p><p><head></p><p><title>唐詩三百首 (2)????使用
標簽插入“唐詩三百首”，使用
標簽插入水平分割線，使用標簽插入“目錄”，使用
標簽插入目錄列表，使用
標簽插入“夜靜思”，關鍵代碼如下所示。
唐詩三百首 唐詩三百首
目錄
第一首：靜夜思
第二首：憶江南
第三首：長恨歌
靜夜思
床前明月光,疑是地上霜。舉頭望明月，低頭思故鄉。
【李白簡介】
圖1.2.1 唐山三百首
實訓任務2：制作購物網站商品分類頁面
訓練技能點
無序列表
- -
- 標簽
需求說明
制作購物網站商品分類列表，如圖1.2.2所示。
圖1.2.2 商品分類
實現思路
使用EditPlus創建HTML文件，使用
標簽插入標題，使用
- -
- 無序列表實現商品分類。
實現步驟
(1)?????使用EditPlus創建HTML文件
(2)?????使用
- -
- 無序列表顯示商品分類，關鍵代碼如下。
商品分類 產品類別
- 電腦
- 手機
- 家電
- 美容
- 服裝
- 圖書
- 美護
- 食品
- 手表
實訓任務3：制作購物流程頁面
訓練技能點
- -
- 有序列表的使用
需求說明
制作購物流程頁面，效果如圖1.2.3所示。
圖1.2.3 購物流程頁面
實訓任務4：制作商品介紹頁面
訓練技能點
?????????使用
- -
- -
- 自定義列表
?????????使用
標簽插入圖片
?????????使用標簽設置字體顏色
需求說明
制作商品介紹頁面，效果如圖1.2.4所示。
圖1.2.4 商品顯示頁面
實現思路
使用
- -
- -
- 自定義列表，在
- 標簽中使用
標簽插入圖片，使用
- 標簽插入產品介紹文字。代碼如下所示。
商品顯示 商品信息
- 拍賣上網本
- 奔騰雙核，1G內存，200G硬盤
- 跳樓瘋搶價1元起
實訓任務5：制作網站超鏈接
訓練技能點
超鏈接標簽的使用
需求說明
制作網站超鏈接，效果如圖1.2.5所示
圖1.2.5 網站超鏈接
鞏固練習
一、選擇題
1.????????在下列的 HTML 中，哪個是最大的標題？(????? )
A.???????
B.???????
C.???????
D.??????
2.????????在下列的 HTML 中，哪個可以插入換行？(????? )
A.???????
B.???????
C.???????
D.??????
3.????????在下列的 HTML 中，哪個可以添加背景顏色？(????? )
A.???????
B.???????
yellow C.???????
4.????????請選擇產生粗體字的 HTML 標簽?????? (????? )
A.???????
B.???????
C.???????
D.??????
5.????????請選擇產生斜體字的 HTML 標簽?????? (????? )
A.???????
B.???????
C.???????
6.????????在下列的 HTML 中，哪個可以產生超鏈接？?? (????? )
A.???????
B.???????
C.???????http://www.w3school.com.cn
D.??????
二、上機練習
1.????????使用
和
標簽實現如圖1.3.1所示效果。圖1.3.1圖文混排效果
2.????????使用自定義列表實現圖1.3.1所示效果。
3.????????制作如圖1.3.2所示的圖片滾動效果。提示：使用標簽可以實現圖片的滾動
HTML web前端
版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。
版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。
- 無序列表顯示商品分類，關鍵代碼如下。
- 無序列表實現商品分類。
自定義列表標簽可用來描述某個術語或產品的定義或解釋。可以替代表格的功能。
- (自定義列表)標簽可以容納整個數據結構，
無序列表和有序列表類似，但多個列表項之間沒有先后順序。
- 表示無序列表，也是使用
- 表示列表項。無序列表主要用來做頁面導航菜單或新聞列表等等。
有序列表標簽表示多個并列的列表項，它們之間有明顯的先后順序，
- 表示有序列表，
相關文章
