---恢復內容開始---
代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>無序列表</title> </head> <body> 這是一個無序列表； <p> <ul> <li>繪制切片並導出 <li>編輯首頁 <li>插入圖像內容 <li>設置自由延申表格 <li>編輯二級頁面並把它另存為模板 </ul> </p> </body> </html>
顯示：
建立有序列表（<ol>)
有序列表和項目列表的使用方法基本相同，它使用標記<ol></ol>,每一個列表項前使用<li>。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>有序列表</title>
</head>
<body>這是一個有序列表：
<p>
<ol>
<li>繪制切片並導出</li>
<li>編輯首頁</li>
<li>插入圖像內容</li>
<li>設置自由延申表格</li>
<li>編輯二級頁面並把它另存為模板</li>
</ol>
</p>
</body>
</html>
如圖所示
3.3HTML標記與HTML屬性
通過使用HTML的align屬性，如下代碼所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本排版</title>
</head>
<body>
<h1 align="center">互聯網發展的起源</h1>
<h2 align="right">第1階段</h2>
<p>1969年……的新紀元。</p>
<h2 align="right">第2階段</h2>
<p>20世紀……的誕生。</p>
</body>
</html>
注：從上述例子中可以清楚地看出屬性的作用。在標記內加入了屬性的控制，如"align=center"、"align=left"、"align=right"。"align"就是一個屬性，它的作用是控制該標記所包含的文字的顯示位置；而“center”、“left”、“right”就是該屬性的屬性值，用於指明該屬性應以什么樣的方式來進行控制。align屬性不僅可以用於標題標記，也可以用<p>標記。
---恢復內容結束---
代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>無序列表</title> </head> <body> 這是一個無序列表； <p> <ul> <li>繪制切片並導出 <li>編輯首頁 <li>插入圖像內容 <li>設置自由延申表格 <li>編輯二級頁面並把它另存為模板 </ul> </p> </body> </html>
顯示：
建立有序列表（<ol>)
有序列表和項目列表的使用方法基本相同，它使用標記<ol></ol>,每一個列表項前使用<li>。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>有序列表</title>
</head>
<body>這是一個有序列表：
<p>
<ol>
<li>繪制切片並導出</li>
<li>編輯首頁</li>
<li>插入圖像內容</li>
<li>設置自由延申表格</li>
<li>編輯二級頁面並把它另存為模板</li>
</ol>
</p>
</body>
</html>
如圖所示
3.3HTML標記與HTML屬性
通過使用HTML的align屬性，如下代碼所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本排版</title>
</head>
<body>
<h1 align="center">互聯網發展的起源</h1>
<h2 align="right">第1階段</h2>
<p>1969年……的新紀元。</p>
<h2 align="right">第2階段</h2>
<p>20世紀……的誕生。</p>
</body>
</html>
注：從上述例子中可以清楚地看出屬性的作用。在標記內加入了屬性的控制，如"align=center"、"align=left"、"align=right"。"align"就是一個屬性，它的作用是控制該標記所包含的文字的顯示位置；而“center”、“left”、“right”就是該屬性的屬性值，用於指明該屬性應以什么樣的方式來進行控制。align屬性不僅可以用於標題標記，也可以用<p>標記。
3.3.2 用bgcolor屬性設置背景顏色
HTML中，不同的標記會有各自不同的屬性，例如在前面曾介紹過的<body>標記，使用它的屬性，就可以控制網頁的背景以及文字字體的顏色。
例如將<body>一行改為：<body text="blue" bgcolor="#CCCCFF">頁面效果如圖3.10所示，整個網頁的背景和文字顏色發生了變化。
注：其中文字的顏色通過<body>標記的text屬性設置，在HTML中已經定義了若干種顏色的名稱，比如紅色“red”，綠色“green”等，都可直接作為顏色屬性的屬性值。
3.3.3 設置文字的特殊樣式
使用HTML標記和屬性，還可以設置文字的樣式。
| 標記 | 顯示效果 |
| <b></b> | 文字以粗體方式顯示 |
| <i></i> | 文字以斜體方式顯示 |
| <u></u> | 文字以加下划線方式顯示 |
| <s></s> | 文字以加下刪除線方式顯示 |
| <big></big> | 文字以放大方式顯示 |
| <small></small> | 文字以縮小方式顯示 |
| <strong></strong> | 文字以加強強調方式顯示 |
| <em></em> | 文字以強調方式顯示 |
| <address></address> | 用來顯示電子郵件地址或網址 |
| <code></code> | 用來說明代碼與指令 |
例如將上面的代碼修改之后：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文本排版</title> </head> <body> <h1 align="center">互聯網發展的<i>起源</i></h1> <h2 align="right">第1階段</h2> <p>1969年，為了<b>保障通信</b>聯絡，美國國防……的新紀元。</p> <h2 align="right">第2階段</h2> <p>20世紀……的誕生</p> </body> </html>
3.3.4 設置文字的大小和顏色（<font>)
1.除了可以設置文字的樣式，還可以使用<font>標記設置字體相關的屬性，<font>標記有3個主要屬性，分別用於設置文字的字體，大小和顏色。
2.face屬性用於設置文字的字體，例如宋體、楷體等；size屬性控制文字的大小，可以取1到7之間的整數值，color屬性設置文字的顏色。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文本排版</title> </head> <body> <h1 align="center"> <font color="green" face="宋體" size="7">互聯網發展的</font><i>起源</i></h1> <h2 align="right">第1階段</h2> <p>1969年，為了<b>保障通信</b>聯絡，美國國防……的新紀元。</p> <h2 align="right">第2階段</h2> <p>20世紀……的誕生</p> </body> </html>
注：如果顯示這個頁面的瀏覽器所在的計算機中沒有安裝相應的字體，瀏覽器就仍然按照默認的字體顯示。
3.4 特殊文字符號
- 如果要顯示“x>y"這樣一個數學公式，需要用”<“代表符號"<",特殊字符">”代表符號">"；
- 如果超過一個空格，那么從第二個空格開始，都會被忽略掉。如果需要在某處使用空格，就需要使用特殊符號來代替，空格的符號是“ ”；
- 一些符號是無法直接用鍵盤輸入的，也需要這種方式來顯示。例如版權符號“©”，需要使用“©”來輸入。
例如
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>專業符號</title> </head> <body> <p>x > y</p>m < n ©</body> </html>
在一些公式中，有時需要以上標或者下標的方式顯示了一些文字，這時可以使用如下標記。
- <sup></sup>標記，為上標標記，用於將數字縮小后顯示於上方；
- <sub></sub>標記，為下標標記，用於將數字縮小后顯示於下方。
注：此外，還有幾個特殊字符，字符“÷；”，代表符號“÷”；字符“±”，代表“±”；字符“&permil”，代表“‰”字符；字符“&harr，”代表雙向箭頭（↔）；字符“&hArr”，代表雙向箭頭（⇔）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>運算式</title> </head> <body>[(6<sup>3</sup>+3<sup>6</sup>) ÷2] ± 1=? <br>結果以 ‰表示。 <p>H <sub>2</sub>+O<sub>2</sub> ⇔ H<sub>2</sub> O</body> </html>
3.5在網頁中使用圖像（<img>)
3.5.1 網頁中的圖片格式
如果是和照片類似的圖像，通常適合保存為JPG格式；而主要由線條構成的、顏色種類比較少的圖像，通常適合保存為GIF格式。
3.5.2 一個簡單的圖片網頁
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>圖片</title> </head> <body> <img src="cat.jpg"> </body> </html>
注：插入的圖片與HTML文件是出於同一目錄下的，如果不處於同一目錄下，就必須采用路徑的方式來指定圖片文件的位置。
3.5.3 使用路徑
網站中的路徑通常可以分為兩種情況。
（1）如果圖像文件就在本網站內部，通常以要顯示該圖像的網頁文件為起點，通過層級關系描述圖像的位置；
（2）如果圖像不在本網站內部，那么通常以“http：//”開頭的URL作為圖像文件的路徑。
注：
- 如果在f-01文件夾中的a.htm需要顯示同一個文件夾中的cup.gif文件，直接寫文件名即可；
- 如果在f-04文件夾中的02文件夾中的b.htm需要顯示同一個文件夾中的cap.gif文件，直接寫文件名即可；
- 如果在f-04文件夾中c.htm需要顯示02文件夾中的cap.gif文件，應該寫作“02/cap.gif”。這里的斜線就表示了層級的關系，即下一級的意思；
- 如果在f-04文件夾中的02文件夾中的b.htm需要顯示01文件夾中的hat.gif文件，應該寫作”··/01/hat.gif"，這里的兩個點號表示的是上一級文件夾的意思；
- 如果在f-04文件夾中的02文件夾中的b.htm需要顯示f-01文件夾中的cup.gif文件應該寫作“··/··/f-01/cup.gif”；
- 如果在f-01文件夾中的a.htm需要顯示f-01文件夾中的a.html需要顯示f-04文件夾中的02文件夾中的cap.gif文件，應該寫作“··/f-04/02/cap.gif”。
3.6 用width和height屬性設置圖片的尺寸
“尺寸：128*128”就表示該圖像的寬度和高度都是128像素。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>圖片</title> </head> <body> <img src="cat.jpg"> <img src="cat.jpg" width="400"> <img src="cat.jpg" width="400" height="220" </body> </html>
注：（1）當圖片只設置了其中一個屬性（如只設置了 width 屬性）的時候，圖片的高度以圖片原始的長度比例來顯示。比如有張圖片原始大小為80*60，當只設置了該圖片的顯示寬度為160時，高度將自 動以120來顯示；
（2）屬性值可以使用整數或者百分比。如果使用整數，就表示絕對的像素數；如果使用百分比設置寬度或者高度，圖片就以相對於當前窗口大小的百分比來顯示；
（3）即使圖像按照原來的尺寸顯示，也應在HTML中指明圖像的高度和寬度，這樣會使網頁的顯示速度更快。
3.7 用alt屬性為圖像設置文本
由於一些原因，圖像無法正常顯示，因此應該為圖像設置一個替換文本，用於圖像無法顯示的時候告訴瀏覽者該圖片的內容。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>圖片</title> </head> <body> <img src="no-image.jpg"width="128" height="128" alt="貓圖像" </body> </html>
注：Google和百度等搜索引擎在收錄頁面的時候，會通過alt屬性的內容來分析網頁的內容。因此，如果在制作網頁的時候，能夠為圖像都配有清晰明確的替換文本，就可以幫助搜索引擎更好地理解網頁內容，從而更有利於搜索引擎的優化，可能會使更多人通過搜索引擎找到這個網頁。