「測試開發全棧化-HTML前端知識」（12）有序列表

一節我們說了，使用<ol>標簽來定義有序列表，并使用<li>標簽來定義列表項。和無序列表一樣，也是使用<li>標簽來定義列表項。

先看效果:

可以看到，列表項前面有序號標出，1、2、3等，無序的時候前面是 .

接下來看看代碼樣式:

<!DOCTYPE html>

<head>

</head>

<body>

<ol>

<li>有序列表項1</li>

<li>有序列表項2</li>

<li>有序列表項3</li>

</ol>

</body>

</html>

可以看到<ol>和<li>的使用，有序列表在實際工作中用的不是很多。

接著說下自定義列表，自定義列表常用于對術語名詞進行解釋和描述，定義列表的列表項前沒有任何項目符號(沒有點和數字)。說下自定義列表的語法

<dl>標簽用于定義描述列表(或定義列表)，該標簽會與<dt> 定義項目和名字，還有<dd> 描述每一個項目和名字，一起使用。

<dl>

</dl>

先看看效果圖:

關注我們，dt中，剩下的三個都在<dd>中

<!DOCTYPE html>

<head>

<title>自定義列表</title>

</head>

<body>

<dl>

<dt>

關注我們

</dt>

<dd>

新浪微博

<dd>

官方微信

</dd>

<dd>

聯系我們

</dd>

</dl>

</body>

</html>

<dl></dl>中只能包含<dt>和<dd>

<dt>和<dd>包含個數沒有限制，通常是一個<dt>包含很多<dd> 可以再來一組數據

<body>

<dl>

<dt>

關注我們

</dt>

<dd>

新浪微博

<dd>

官方微信

</dd>

<dd>

聯系我們

</dd>

<dt>

關注我們

</dt>

<dd>

新浪微博

<dd>

官方微信

</dd>

<dd>

聯系我們

</dd>

</dl>

</body>

我們來看下效果:

<dt>和<dd>是兄弟關系，并列的，不是包含關系

接著做下列表的總結:

<ul> 無序標簽，里面只能包含<li>, 沒有順序，li里面可以包含任何標簽

<ol> 有序標簽，里面只能包含<li>，有順序，li里面可以包含任何標簽

<dl> 自定義標簽，里面只能包含<dt>和<dd>,dt和dd里可以放任何標簽

后兩者了解就可以了

好的，今天就先到這里了

對路徑與絕對路徑的使用方法

在《HTML元素中的屬性1——零基礎自學網頁制作》這一篇教程最后內容中，我們詳細展示了"絕對路徑"與"相對路徑"在寫法上的區別。示例代碼如下：

<img src="file:///D:/零基礎自學網頁制作/image1.jpg"/><!--絕對路徑-->
<img src="image1.jpg"/><!--相對路徑-->

那什么時候使用"相對路徑"什么時候使用"絕對路徑"呢？

搞清楚這個問題就要介紹一下網頁制作的最后一步，上傳服務器的過程與要求。

我們所有的可以通過網絡在瀏覽器上顯示的頁面都是存儲在網絡服務器中的文件。

網絡服務器是什么？大家可以理解為一臺電腦，和我們使用的個人計算機在構造上差不多，但是功能更加強大、穩定。因此服務器的價格相比個人電腦更加昂貴，可靠性也要更高。

服務器圖片

如果我們的網頁或網站的制作完成后，需要去找一個網絡服務器或是網絡服務器中的部分內存（也可以自己搭建簡單服務器用來測試），之后會給我們相關的賬號，我們自己設置密碼后，使用ftp工具上傳到網絡服務器中，然后給我們分配一個臨時的域名用來測試網站。這樣我們就可以使用手機或電腦通過瀏覽器在線打開自己的頁面了。這是筆者做過的一個全景展館頁面----在線齊越教育館（http://qiyueehibitionhall.gz01.bdysite.com/indexWeiXin.html）。

那頁面或網站如何上傳呢？

還記得最開始我們建立的那個"零基礎自學網頁制作"文件夾嗎？簡單來說通過把這個文件夾上傳就可以了，把里面"第一個頁面.html"改成"index.html"這個頁面就變成了我們的主頁。

如果，這個頁面中的所有路徑都是使用絕對路徑寫的，這時問題就來了，

<img src="file:///D:/零基礎自學網頁制作/image1.jpg"/><!--絕對路徑-->

頁面及其所在文件夾在我的電腦上是在D盤，我上傳服務器之后，文件就不一定還在服務器的D盤上，也許是在服務器的F盤呢？或者把文件發給同事，同事接收后在C盤上打開，絕對路徑是不是就不能指示正確的位置了？因此頁面就不能正確的找到相應信息了。

為了解決因為上傳服務器或者換電腦而不能正確找到資源路徑的問題，相對路徑的概念就產生了，相對路徑是不管你在哪個磁盤上，它只是遵循資源與頁面文件的相對位置，只要文件夾中的相對位置沒變，無論你把文件夾搬運到天涯海角，頁面依然可以循著路徑找到相關信息。

<img src="image1.jpg"/><!--相對路徑-->

下面為家具體展示一下相對路徑的寫法以及頁面文件與路徑指定文件的位置關系。

<img src="image1.jpg"/><!--相對路徑-->

這句代碼指的是頁面文件"第一個頁面.html"與圖片"image1.jpg"在一個文件夾中。如圖所示：

如果，圖片比較多，我們建立一個叫做"img"的文件夾來專門存放圖片，那代碼該怎么寫呢？

如圖所示：

打開文件夾，里面有一張圖片"image2.jpg"。如圖：

下面我們把這個文件召喚出來！

代碼示例：

<img src="image1.jpg"/><!--相對路徑--><img src="img/image2.jpg"/><!--相對路徑-->

效果如下：兩張圖片都進來了。

那如果我們圖片種類比較多，在img文件夾內部也要分文件夾，導入不同文件夾中的方法相信大家已經猜到了。圖片分類如下：

代碼如下：

<img src="image1.jpg"/><!--相對路徑-->
<img src="img/辦公室/image2.jpg"/><!--相對路徑-->
<img src="img/戰斗機/image3.jpg"/><!--相對路徑-->

效果如圖：

大家發現書寫規律沒有？

相對于絕對路徑來說，相對路徑只需要寫工程文件夾（將要上傳服務器并且包含頁面或網站所有內容的文件夾）內部的路徑就可以了。這里"零基礎自學網頁制作"文件夾可以看做是工程文件夾。因此，包括"零基礎自學網頁制作"文件夾，以及以前的路徑信息在"相對路徑中"都不需要寫出。如圖：紅框以內的都不用寫了。

那什么時候使用絕對路徑呢？一般情況下，在需要引入其他網站的圖片或頁面或其他信息時使用絕對路徑！

示例代碼如下：

<img src="https://bkimg.cdn.bcebos.com/pic/38dbb6fd5266d01694f698369a2bd40734fa35c4?x-bce-process=image/watermark,g_7,image_d2F0ZXIvYmFpa2UyNzI=,xp_5,yp_5"/>

這樣我們就通過訪問百度百科的地址在自己的頁面中打開了殲20的圖片，如圖：

這樣做的好處是可以節省自己服務器的空間，減小工程文件夾的體積。

總結一下：

在頁面中顯示工程文件夾內的資源或信息使用"相對路徑"，不使用"絕對路徑"。

在頁面中顯示其他網站的資源或信息使用"絕對路徑"，不使用"相對路徑"。

今天的內容結束了。

最后請大家思考一個問題，為什么多個<p></p>標簽中的內容會自動換行，而多個<img>標簽卻并排顯示而不會換行呢？這個問題我們會在后面的講解中給出答案！

喜歡的小伙伴請關注我，閱讀中遇到任何問題請給我留言，如有疏漏或錯誤歡迎大家斧正，不勝感激！

下一篇繼續為大家介紹常用元素的使用方法。

HTML完整學習目錄

HTML序章（學習目的、對象、基本概念）——零基礎自學網頁制作

HTML是什么？——零基礎自學網頁制作

第一個HTML頁面如何寫？——零基礎自學網頁制作

HTML頁面中head標簽有啥用？——零基礎自學網頁制作

初識meta標簽與SEO——零基礎自學網頁制作

HTML中的元素使用方法1——零基礎自學網頁制作

HTML中的元素使用方法2——零基礎自學網頁制作

HTML元素中的屬性1——零基礎自學網頁制作

HTML元素中的屬性2（路徑詳解）——零基礎自學網頁制作

使用HTML添加表格1（基本元素）——零基礎自學網頁制作

使用HTML添加表格2（表格頭部與腳部）——零基礎自學網頁制作

使用HTML添加表格3（間距與顏色）——零基礎自學網頁制作

使用HTML添加表格4（行顏色與表格嵌套）——零基礎自學網頁制作

16進制顏色表示與RGB色彩模型——零基礎自學網頁制作

HTML中的塊級元素與內聯元素——零基礎自學網頁制作

初識HTML中的<div>塊元素——零基礎自學網頁制作

在HTML頁面中嵌入其他頁面的方法——零基礎自學網頁制作

封閉在家學網頁制作！為頁面嵌入PDF文件——零基礎自學網頁制作

HTML表單元素初識1——零基礎自學網頁制作

HTML表單元素初識2——零基礎自學網頁制作

HTML表單3（下拉列表、多行文字輸入）——零基礎自學網頁制作

HTML表單4（form的action、method屬性）——零基礎自學網頁制作

HTML列表制作講解——零基礎自學網頁制作

為HTML頁面添加視頻、音頻的方法——零基礎自學網頁制作

音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作

HTML中使用<a>標簽實現文本內鏈接——零基礎自學網頁制作

簽

標簽：又稱元素，是HTML的基本組成單位雙標簽（絕大多數都是雙標簽）：<標簽名>標簽體</標簽名>第一個標簽叫起始標簽，第二個標簽叫結束標簽例：<marquee>尚硅谷，讓天下沒有難學的技術！</marquee>單標簽：<標簽名/>/可以省略例：<input>
標簽名不區分大小寫，但推薦小寫，因為小寫更規范
標簽之間的關系：并列關系、嵌套關系，可以使用 tab 鍵進行縮進
1
2
3
4
5
<marquee>
尚硅谷，讓天下沒有難學的技術！
<input>
</marquee>
<input>

標簽屬性

用于給標簽提供附加信息
可以寫在起始標簽或單標簽中，形式如下：<標簽名屬性名="屬性值" 屬性名="屬性值">
1
2
<marquee loop="1" bgcolor="orange">尚硅谷，讓天下沒有難學的技術！</marquee>
<input type="password">
有些特殊的屬性，沒有屬性名，只有屬性值，如：<input disabled>

不同的標簽，有不同的屬性；也有一些通用屬性（在任何標簽內都能寫）屬性名、屬性值不能亂寫，都是W3C規定好的屬性名、屬性值，都不區分大小寫，但推薦小寫雙引號，也可以寫成單引號，甚至不寫，但推薦寫雙引號標簽中不要出現同名屬性，否則后寫的會失效，例如：<input type="text" type="password">

基本結構

想要呈現在網頁中的內容寫在body標簽中
head標簽中的內容不會出現在網頁中
head標簽中的title標簽可以指定網頁的標題
1
2
3
4
5
6
7
8
<html>
<head>
<title>網頁標題</title>
</head>
<body>
......
</body>
</html>

注釋

特點：注釋的內容會被瀏覽器所忽略，不會呈現到頁面中，但源代碼中依然可見
作用：對代碼進行解釋和說明
寫法
1
2
3
4

<marquee loop="1">尚硅谷</marquee>

<marquee>尚硅谷123</marquee>
注釋不可以嵌套

文檔聲明

作用：告訴瀏覽器當前網頁的版本
寫法

舊寫法：要依網頁所用的HTML版本而定，寫法有很多參考：W3C QA - 可在 Web 文檔中使用的 Doctype 聲明的推薦列表
新寫法：W3C 推薦使用 HTML 5 的寫法
1
2
3
4
5
<!DOCTYPE html>
或
<!DOCTYPE HTML>
或
<!doctype html>

文檔聲明必須在網頁的第一行，且在html標簽的外側

字符編碼

計算機對數據的操作存儲時，對數據進行：編碼讀取時，對數據進行：解碼
編碼、解碼，會遵循一定的規范 —— 字符集
常見的字符集ASCII：大寫字母、小寫字母、數字、一些符號，共計128個ISO 8859-1：在 ASCII 基礎上，擴充了一些希臘字符等，共計是256個GB2312：繼續擴充，收錄了 6763 個常用漢字、682個字符GBK：收錄了的漢字和符號達到 20000+ ，支持繁體中文UTF-8 ：包含世界上所有文字與符號
為了讓瀏覽器在渲染html文件時，不犯錯誤，可以通過meta標簽配合charset屬性指定字符編碼
1
2
3
<head>
<meta charset="UTF-8"/>
</head>

設置語言

主要作用讓瀏覽器顯示對應的翻譯提示有利于搜索引擎優化
具體寫法：<html lang="zh-CN">
lang屬性的編寫規則語言-國家/地區zh-CN ：中文-中國大陸（簡體中文）zh-TW ：中文-中國臺灣（繁體中文）zh ：中文en-US ：英語-美國en-GB ：英語-英國語言—具體種類（已不推薦使用）zh-Hans ：中文—簡體zh-Hant ：中文—繁體W3School 上的說明：《語言代碼參考手冊》、《國家/地區代碼參考手冊》 W3C官網上的說明：《Language tags in HTML》

標準結構

HTML標準結構如下
1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html lang="zh-CN">

<head>
<meta charset="UTF-8">
<title>Document</title>
</head>

<body>

</body>

</html>