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

序列表

經過之前關于表格、表單的學習后，再來學習列表，就顯得非常的簡單和容易理解了。

學習是構建知識體系的過程，沒有形成體系的知識學習再多也是碎片，是很難形成技能或深刻理解的，因此，如果您是零基礎的初學者，第一次看我的教程，如果時間允許的話，請務必從目錄中找尋第一篇，循序漸進的學習。

列表分為有序列表、無序列表和定義列表，同時列表之中還能嵌套列表，和表格非常相似。

首先介紹有序列表

要用<ol></ol>標簽告訴瀏覽器這里是列表。

然后在里面添加<li></li>標簽，在這個標簽中添加內容即可。

示例代碼如下

<p>我喜歡的水果</p>
<ol>
  <li>葡萄</li> 
  <li>西瓜</li> 
  <li>蘋果</li> 
  <li>桃子</li>
</ol>

大家可以把它放到一個新的html框架中看看效果。

完整代碼如下：

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>列表</title>
  </head> 
  <body>
  <h>有序列表</h>
  <p>我喜歡的水果</p>
  <ol> 
    <li>葡萄</li> 
    <li>西瓜</li> 
    <li>蘋果</li> 
    <li>桃子</li>
    </ol>
  </body> 
  </html>

頁面效果如下：

通過修改<ol>標簽中的type屬性我們可以改變序號顯示的樣式，默認的是數字，大家看一下不同的type值的不同效果吧！示例代碼如下：

<ol type="A">
  <li>葡萄</li> 
  <li>西瓜</li> 
  <li>蘋果</li> 
  <li>桃子</li>
</ol>
<ol type="a"> 
  <li>葡萄</li> 
  <li>西瓜</li> 
  <li>蘋果</li> 
  <li>桃子</li>
  、</ol><ol type="I"> <li>葡萄</li> <li>西瓜</li> <li>蘋果</li> <li>桃子</li></ol>

頁面效果如下：

下面給大家介紹一下搜狗輸入法中如何輸入羅馬數字。

step1.點擊"輸入方式"

step2.點擊"特殊符號"后選擇數字序號，找到羅馬數字即可

除此之外我們還可以使用CSS的方法為有序列表的序號提供更多樣式。在<ol>標簽中修改style屬性可以直接調用這些css中的屬性。寫法是style="list-style-type:屬性值；"

示例代碼如下：(使用日語中的片假名表示序號)

<ol style="list-style-type:hiragana;"> 
  <li>葡萄</li> 
  <li>西瓜</li> 
  <li>蘋果</li> 
  <li>桃子</li>
</ol>

頁面效果如圖所示：

是不是很有趣，這里的測試就不一一做了。為大家奉上list-style-type的值的列表與說明，大家自己課下去嘗試，這個列表中既有有序列表的值也有無序列表的值。

如圖：

資料來自w3school

無序列表

無序列表與有序列表的區別在于最外層的標簽，它的寫法是這樣的：<ul></ul>。

有一個記憶的小技巧，有序的英文是order，故有序列表為order list（列表），縮寫為ol。

無序為unorder，無序列表為unorder list，縮寫為ul。

無序列表<ul>標簽的type屬性用來控制列表前的標記顯示演示。

示例代碼如下：

<h>無序列表</h>
<p>我喜歡的水果</p>
<ul> 
  <li>葡萄</li> 
  <li>西瓜</li> 
  <li>蘋果</li> 
  <li>桃子</li>
</ul>
<ul type="disc"> 
  <li>葡萄</li> 
  <li>西瓜</li> 
  <li>蘋果</li> 
  <li>桃子</li>
</ul>
<ul type="circle"> 
  <li>葡萄</li> 
  <li>西瓜</li> 
  <li>蘋果</li> 
  <li>桃子</li>
</ul>
<ul type="square"> 
  <li>葡萄</li> 
  <li>西瓜</li> 
  <li>蘋果</li> 
  <li>桃子</li>
</ul>

頁面效果如下：

通過圖片我們可知，無序列表默認的列表標識就是type="disc"。

style屬性的話大家自己試試吧，這里就不啰嗦了。

定義列表

這個列表比較特殊，也比較不常見，主要就是顯示名詞定義的。

首先要寫入<dl></dl>標簽。這是告訴瀏覽器這里是個定義列表，和<ol>或<ul>一樣。

定義的英文是definition，定義列表就是definition list，縮寫是dl。

下面在<dl></dl>標簽中間寫入定義的名稱<dt></dt>,即definition title（標題）。

與定義名稱標簽并列的是定義描述<dd></dd>,即definition describe（描述）。

示例代碼如下：

<dl> 
  <dt>計算機</dt> 
  <dd>用來計算的儀器 ... ...</dd> 
  <dt>顯示器</dt> 
  <dd>以視覺方式顯示信息的裝置 ... ...</dd>
</dl>

頁面效果如下：

今天的內容結束了！

列表嵌套列表的測試大家自己試試吧，學到現在，相信你們都可以完成了！

如果您喜歡我的教程請關注我，點贊也能讓我充滿動力！

如果您有任何疑問請給我留言，如有問題或錯誤請予以斧正！

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>標簽實現文本內鏈接——零基礎自學網頁制作

可百度搜索分形科技訪問官網查看更多精彩內容

每個在瀏覽網站時的習慣都是不同的，使用的瀏覽器也是各不相同，如果一個網站在用戶習慣的瀏覽器中無法打開，或者打開后顯示不清楚，那么用戶很可能就會放棄繼續瀏覽這個網站。所以網站制作時如果沒有考慮到網頁兼容性和網頁分辨率的設置問題。

網站制作時需要對網頁在瀏覽器中的兼容性和網頁的分辨率進行合理的設置，確保網站頁面可以在不同的瀏覽器中打開，打開后的顯示清晰美觀。那么要如何調整網頁在瀏覽器中的兼容性和網頁在顯示屏幕中的分辨率密呢？需要了解的朋友請繼續往下看，接下來分形科技小編就為大家詳細的介紹一下。

一、網站制作中網頁在瀏覽器中的兼容性如何調整？

網頁在瀏覽器的兼容性指的是做出的網頁在不同的瀏覽器中瀏覽時，顯出來的效果是否正常，瀏覽器兼容性的調整就是對網頁在瀏覽器中顯示效果進行的測試和調整，對于網頁制作者來產，網頁兼容性的調適一直是一個很頭疼的問題。

1、產生瀏覽器兼容性問題的原因

不同的瀏覽器在開發時對于html或css的解釋都稍有不同，所以就會導致網頁在這個瀏覽器中打開是正常，而在另一個瀏覽器中打開卻出現了亂版。因為瀏覽器的數據非常的多，網頁制作者也無法預知訪客使用的是哪種瀏覽器，此時為了提升網站的用戶體驗度，我們就會需要對網頁的瀏覽器兼容性做測試。

2、需要不選擇哪些瀏覽器進行測試

因為目前全球可用的瀏覽器有上百種之多，但是我們在進行瀏覽器兼容性測試時不可以將所有的瀏覽器都測試一遍，那樣工作量是非常大的。我們只需選擇幾款主流的瀏覽器進行兼容測試即可。如IE瀏覽器、火狐瀏覽器、谷歌、蘋果Safari、等幾款全球應用范圍最廣的瀏覽器進行測試。

注：360瀏覽器、搜狗瀏覽器、騰訊瀏覽器等采用的是與IE或谷歌瀏覽器相同的內核，其兼容標準與IE或谷歌瀏覽器是完全一樣的，所以我們只需測試其中的一個就可以的。

3、瀏覽器兼容性測試的方法

對CSS兼容性的測試、對javascript的測試，如果企業網站開發時采用的是jquery技術，那么可以無需考慮瀏覽器兼容性問題，因為該框架底層已經做好了各瀏覽器兼容的技術了。

二、網站制作中網頁的在分辨率如何設置？

網站制作時對于網頁分辨率的設置通常需要與屏幕分辨率相適應，一般情況下在網頁制作時，網頁分辨率的寬度不能超過屏幕分辨率，對高度沒有限制。需要注意的是：隨著科技的發展和人們對于視覺效果的提高，屏幕的種類已發展成為以寬屏為主。

在網頁制作中，網頁分辨率通常也被稱為“網頁寬度”，實際上分辨率也是表示長度和寬度的另一種方式，只不過它的單位為“像素”。下面介紹五款常用的屏幕分辨率相對應的網頁分辨率設置情況：

在不確定訪客到底用什么樣的屏幕瀏覽網頁的情況下，網頁制作時可以采用以下兩種方法：

1、直接以1024×768屏幕為準進行網頁制作

據相關數據顯示，現在機幾乎沒有人在使用15寸大腦袋顯示器了，可能部分人還在用17寸液晶屏，但現在市場的主流的是19寸屏幕，所以我們可以選擇以17寸屏幕為準，將網頁寬度設置為1002像素，這樣就可以適用于所有比17寸大的屏幕。

2、設置網頁寬度相對屏幕寬度的百分比，然后選擇自適應屏幕

這種方法是在制作網頁時，將頁面寬度直接設置成一個百分數，如98%，這樣設置的網頁在任意屏幕中，都是以屏幕寬度*98%的計算方式來顯示的，這種情況下不會出現瀏覽器左右留白的現象。缺點在于網頁內部的版塊、圖片等寬度也都需要自動適應網頁寬度，操作起來有一定難度。

，Doctype作用？標準模式與兼容模式各有什么區別?

（1）、<!DOCTYPE>聲明位于位于HTML文檔中的第一行，處于 <html> 標簽之前。告知瀏覽器的解析器用什么文檔標準解析這個文檔。DOCTYPE不存在或格式不正確會導致文檔以兼容模式呈現。
（2）、標準模式的排版和JS運作模式都是以該瀏覽器支持的最高標準運行。在兼容模式中，頁面以寬松的向后兼容的方式顯示,模擬老式瀏覽器的行為以防止站點無法工作。

2，HTML5 為什么只需要寫 <!DOCTYPE HTML>？

HTML5 不基于 SGML，因此不需要對DTD進行引用，但是需要doctype來規范瀏覽器的行為（讓瀏覽器按照它們應該的方式來運行）；
而HTML4.01基于SGML,所以需要對DTD進行引用，才能告知瀏覽器文檔所使用的文檔類型。

3，行內元素有哪些？塊級元素有哪些？空(void)元素有那些？

首先：CSS規范規定，每個元素都有display屬性，確定該元素的類型，每個元素都有默認的display值，如div的display默認值為“block”，則為“塊級”元素；span默認display屬性值為“inline”，是“行內”元素。
（1）行內元素有：a b span img input select strong（強調的語氣）
（2）塊級元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
（3）常見的空元素：
<br> <hr> <img> <input> <link> <meta>
鮮為人知的是：
<area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>

4，頁面導入樣式時，使用link和@import有什么區別？

（1）link屬于XHTML標簽，除了加載CSS外，還能用于定義RSS, 定義rel連接屬性等作用；而@import是CSS提供的，只能用于加載CSS;
（2）頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載;
（3）import是CSS2.1 提出的，只在IE5以上才能被識別，而link是XHTML標簽，無兼容問題;

5，介紹一下你對瀏覽器內核的理解？

主要分成兩部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。
（1）渲染引擎：負責取得網頁的內容（HTML、XML、圖像等等）、整理訊息（例如加入CSS等），以及計算網頁的顯示方式，然后會輸出至顯示器或打印機。瀏覽器的內核的不同對于網頁的語法解釋會有不同，所以渲染的效果也不相同。所有網頁瀏覽器、電子郵件客戶端以及其它需要編輯、顯示網絡內容的應用程序都需要內核。
（2）JS引擎則：解析和執行javascript來實現網頁的動態效果。
最開始渲染引擎和JS引擎并沒有區分的很明確，后來JS引擎越來越獨立，內核就傾向于只指渲染引擎。

6，常見的瀏覽器內核有哪些？

Trident內核：IE,MaxThon,TT,The World,360,搜狗瀏覽器等。[又稱MSHTML]
Gecko內核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等
Presto內核：Opera7及以上。 [Opera內核原為：Presto，現為：Blink;]
Webkit內核：Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）]

7，html5有哪些新特性、移除了那些元素？如何處理HTML5新標簽的瀏覽器兼容問題？如何區分 HTML 和 HTML5？

* HTML5 現在已經不是 SGML 的子集，主要是關于圖像，位置，存儲，多任務等功能的增加。
繪畫 canvas;
用于媒介回放的 video 和 audio 元素;
本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉后數據不丟失;
sessionStorage 的數據在瀏覽器關閉后自動刪除;
語意化更好的內容元素，比如 article、footer、header、nav、section;
表單控件，calendar、date、time、email、url、search;
新的技術webworker, websocket, Geolocation;
移除的元素：
純表現的元素：basefont，big，center，font, s，strike，tt，u;
對可用性產生負面影響的元素：frame，frameset，noframes；
* 支持HTML5新標簽：
IE8/IE7/IE6支持通過document.createElement方法產生的標簽，
可以利用這一特性讓這些瀏覽器支持HTML5新標簽，
瀏覽器支持新標簽后，還需要添加標簽默認的樣式。
當然也可以直接使用成熟的框架、比如html5shim;

* 如何區分HTML5： DOCTYPE聲明\新增的結構元素\功能元素

8，簡述一下你對HTML語義化的理解？

用正確的標簽做正確的事情。
html語義化讓頁面的內容結構化，結構更清晰，便于對瀏覽器、搜索引擎解析;
即使在沒有樣式CSS情況下也以一種文檔格式顯示，并且是容易閱讀的;
搜索引擎的爬蟲也依賴于HTML標記來確定上下文和各個關鍵字的權重，利于SEO;
使閱讀源代碼的人對網站更容易將網站分塊，便于閱讀維護理解。

9，HTML5的離線儲存怎么使用，工作原理能不能解釋一下？

在用戶沒有與因特網連接時，可以正常訪問站點或應用，在用戶與因特網連接時，更新用戶機器上的緩存文件。
原理：HTML5的離線存儲是基于一個新建的.appcache文件的緩存機制(不是存儲技術)，通過這個文件上的解析清單離線存儲資源，這些資源就會像cookie一樣被存儲了下來。之后當網絡在處于離線狀態下時，瀏覽器會通過被離線存儲的數據進行頁面展示。
如何使用：
1、頁面頭部像下面一樣加入一個manifest的屬性；
2、在cache.manifest文件的編寫離線存儲的資源；
CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
/ /offline.html
3、在離線狀態時，操作window.applicationCache進行需求實現。

10，瀏覽器是怎么對HTML5的離線儲存資源進行管理和加載的呢？

在線的情況下，瀏覽器發現html頭部有manifest屬性，它會請求manifest文件，如果是第一次訪問app，那么瀏覽器就會根據manifest文件的內容下載相應的資源并且進行離線存儲。如果已經訪問過app并且資源已經離線存儲了，那么瀏覽器就會使用離線的資源加載頁面，然后瀏覽器會對比新的manifest文件與舊的manifest文件，如果文件沒有發生改變，就不做任何操作，如果文件改變了，那么就會重新下載文件中的資源并進行離線存儲。
離線的情況下，瀏覽器就直接使用離線存儲的資源。

11，請描述一下 cookies，sessionStorage 和 localStorage 的區別？

cookie是網站為了標示用戶身份而儲存在用戶本地終端（Client Side）上的數據（通常經過加密）。
cookie數據始終在同源的http請求中攜帶（即使不需要），記會在瀏覽器和服務器間來回傳遞。
sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存。
存儲大小：
cookie數據大小不能超過4k。
sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，可以達到5M或更大。
有期時間：
localStorage 存儲持久數據，瀏覽器關閉后數據不丟失除非主動刪除數據；
sessionStorage 數據在當前瀏覽器窗口關閉后自動刪除。
cookie 設置的cookie過期時間之前一直有效，即使窗口或瀏覽器關閉

12，iframe有那些缺點？

*iframe會阻塞主頁面的Onload事件；
*搜索引擎的檢索程序無法解讀這種頁面，不利于SEO;
*iframe和主頁面共享連接池，而瀏覽器對相同域的連接有限制，所以會影響頁面的并行加載。
使用iframe之前需要考慮這兩個缺點。如果需要使用iframe，最好是通過javascript
動態給iframe添加src屬性值，這樣可以繞開以上兩個問題。

13，Label的作用是什么？是怎么用的？

label標簽來定義表單控制間的關系,當用戶選擇該標簽時，瀏覽器會自動將焦點轉到和標簽相關的表單控件上。
<label for="Name">Number:</label>
<input type=“text“name="Name" id="Name"/>
<label>Date:<input type="text" name="B"/></label>

14，如何實現瀏覽器內多個標簽頁之間的通信?

WebSocket、SharedWorker；
也可以調用localstorge、cookies等本地存儲方式；
localstorge另一個瀏覽上下文里被添加、修改或刪除時，它都會觸發一個事件，
我們通過監聽事件，控制它的值來進行頁面信息通信；
注意quirks：Safari 在無痕模式下設置localstorge值時會拋出 QuotaExceededError 的異常；

15，如何在頁面上實現一個圓形的可點擊區域？

1、map+area或者svg
2、border-radius
3、純js實現需要求一個點在不在圓上簡單算法、獲取鼠標坐標等等

16，title與h1的區別、b與strong的區別、i與em的區別？

title屬性沒有明確意義只表示是個標題，H1則表示層次明確的標題，對頁面信息的抓取也有很大的影響；

strong是標明重點內容，有語氣加強的含義，使用閱讀設備閱讀網絡時：<strong>會重讀，而<B>是展示強調內容。

i內容展示為斜體，em表示強調的文本；

Physical Style Elements -- 自然樣式標簽

b, i, u, s, pre

Semantic Style Elements -- 語義樣式標簽

strong, em, ins, del, code

應該準確使用語義樣式標簽, 但不能濫用, 如果不能確定時首選使用自然樣式標簽。

17，你知道多少種Doctype文檔類型？

該標簽可聲明三種 DTD 類型，分別表示嚴格版本、過渡版本以及基于框架的 HTML 文檔。

HTML 4.01 規定了三種文檔類型：Strict、Transitional 以及 Frameset。

XHTML 1.0 規定了三種 XML 文檔類型：Strict、Transitional 以及 Frameset。

Standards （標準）模式（也就是嚴格呈現模式）用于呈現遵循最新標準的網頁，而 Quirks（包容）模式（也就是松散呈現模式或者兼容模式）用于呈現為傳統瀏覽器而設計的網頁。

18， HTML與XHTML——二者有什么區別？

區別：

1.所有的標記都必須要有一個相應的結束標記

2.所有標簽的元素和屬性的名字都必須使用小寫

3.所有的XML標記都必須合理嵌套

4.所有的屬性必須用引號""括起來

5.把所有<和&特殊符號用編碼表示

6.給所有屬性賦一個值

7.不要在注釋內容中使“--”

8.圖片必須有說明文字

19，<img>的title和alt有什么區別？

title是global attributes之一，用于為元素提供附加的advisory information。通常當鼠標滑動到元素上的時候顯示。

alt是<img>的特有屬性，是圖片內容的等價描述，用于圖片無法加載時顯示、讀屏器閱讀圖片。可提圖片高可訪問性，除了純裝飾圖片外都必須設置有意義的值，搜索引擎會重點分析。

在線咨詢

上一篇：Dreamweaver cs6 網頁設計教程
下一篇：HTML5特效之3D旋轉圖，雪花飄落

您的項目需求

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

整合營銷服務商

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

HTML完整學習目錄

可百度搜索 分形科技 訪問官網查看更多精彩內容

您的項目需求

可百度搜索分形科技訪問官網查看更多精彩內容