HTML列表制作講解-零基礎(chǔ)自學網(wǎng)頁制作

序列表

經(jīng)過之前關(guān)于表格、表單的學習后，再來學習列表，就顯得非常的簡單和容易理解了。

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

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

首先介紹有序列表

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

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

示例代碼如下

<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屬性我們可以改變序號顯示的樣式，默認的是數(shù)字，大家看一下不同的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>

頁面效果如下：

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

step1.點擊"輸入方式"

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

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

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

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

頁面效果如圖所示：

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

如圖：

資料來自w3school

無序列表

無序列表與有序列表的區(qū)別在于最外層的標簽，它的寫法是這樣的：<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>

頁面效果如下：

今天的內(nèi)容結(jié)束了！

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

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

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

HTML完整學習目錄

HTML序章（學習目的、對象、基本概念）——零基礎(chǔ)自學網(wǎng)頁制作

HTML是什么？——零基礎(chǔ)自學網(wǎng)頁制作

第一個HTML頁面如何寫？——零基礎(chǔ)自學網(wǎng)頁制作

HTML頁面中head標簽有啥用？——零基礎(chǔ)自學網(wǎng)頁制作

初識meta標簽與SEO——零基礎(chǔ)自學網(wǎng)頁制作

HTML中的元素使用方法1——零基礎(chǔ)自學網(wǎng)頁制作

HTML中的元素使用方法2——零基礎(chǔ)自學網(wǎng)頁制作

HTML元素中的屬性1——零基礎(chǔ)自學網(wǎng)頁制作

HTML元素中的屬性2（路徑詳解）——零基礎(chǔ)自學網(wǎng)頁制作

使用HTML添加表格1（基本元素）——零基礎(chǔ)自學網(wǎng)頁制作

使用HTML添加表格2（表格頭部與腳部）——零基礎(chǔ)自學網(wǎng)頁制作

使用HTML添加表格3（間距與顏色）——零基礎(chǔ)自學網(wǎng)頁制作

使用HTML添加表格4（行顏色與表格嵌套）——零基礎(chǔ)自學網(wǎng)頁制作

16進制顏色表示與RGB色彩模型——零基礎(chǔ)自學網(wǎng)頁制作

HTML中的塊級元素與內(nèi)聯(lián)元素——零基礎(chǔ)自學網(wǎng)頁制作

初識HTML中的<div>塊元素——零基礎(chǔ)自學網(wǎng)頁制作

在HTML頁面中嵌入其他頁面的方法——零基礎(chǔ)自學網(wǎng)頁制作

封閉在家學網(wǎng)頁制作！為頁面嵌入PDF文件——零基礎(chǔ)自學網(wǎng)頁制作

HTML表單元素初識1——零基礎(chǔ)自學網(wǎng)頁制作

HTML表單元素初識2——零基礎(chǔ)自學網(wǎng)頁制作

HTML表單3（下拉列表、多行文字輸入）——零基礎(chǔ)自學網(wǎng)頁制作

HTML表單4（form的action、method屬性）——零基礎(chǔ)自學網(wǎng)頁制作

HTML列表制作講解——零基礎(chǔ)自學網(wǎng)頁制作

為HTML頁面添加視頻、音頻的方法——零基礎(chǔ)自學網(wǎng)頁制作

音視頻格式轉(zhuǎn)換神器與html視頻元素加字幕——零基礎(chǔ)自學網(wǎng)頁制作

HTML中使用<a>標簽實現(xiàn)文本內(nèi)鏈接——零基礎(chǔ)自學網(wǎng)頁制作

面效果展示

頁面完整代碼

<!DOCTYPE HTML>
<html>
<head> 
<title>文內(nèi)鏈接</title>
<style>
a:hover
{
background-color:yellow;
}
</style>
</head> 
<body >
<div style="width:50%;margin:auto;"><!--使頁面居中顯示，并展視窗50%寬度-->
<div style="position:fixed; top:0px;"><!--使導航菜單懸停在頂端-->
<a style="margin: 0px 30px 0px 10px;" href="#chapter1">試飛進程</a>
<a style="margin: 0px 30px 0px 0px;" href="#chapter2">研制情況</a>
<a style="margin: 0px 30px 0px 0px;" href="#chapter3">服役動態(tài)</a>
<a style="margin: 0px 30px 0px 0px;"href="#chapter4">總體評價</a>
</div><!--使導航菜單懸停在頂端（結(jié)尾）-->
<div style="margin:30px 0px 0px 0px;width:600px;overflow:hidden;"><!--小div套大div隱藏滾動條-->
<div style="margin:0px 0px 0px 8px;width:610px; height:530px; overflow-y:scroll;overflow-x:hidden;" >
<p><!--小div-->
<h2><a id="chapter1" >試飛進程</a></h2>
殲-20隱形戰(zhàn)斗機首架技術(shù)驗證機于2011年1月11日中午12時50分左右進行首次升空飛行測試，13時08分成功著陸，歷時18分鐘。<br>
整個首飛過程在殲-10S戰(zhàn)斗教練機陪伴下完成 。
2016年10月28日，首次發(fā)布“空軍試飛員將駕殲-20飛機亮相中國航展”后，還陸續(xù)發(fā)布了“殲-20戰(zhàn)機列裝空軍作戰(zhàn)部隊”“空軍殲-20戰(zhàn)機首次開展海上方向?qū)崙?zhàn)化訓練”等。
<h2><a id="chapter2">研制情況</a></h2>
在2016年11月1日，第十一屆珠海航展，殲-20首次進行空中飛行展示。兩架殲-20做了公開飛行，不僅在現(xiàn)場引起轟動，也立刻被西方媒體大量報道。殲-20是中國現(xiàn)代空中力量的代表作，也進入了世界最先進的第五代戰(zhàn)斗機行列，它是中國國防能力高速發(fā)展的一個象征。<br>
2018年11月11日，第十二屆中國航展在珠海迎來“高光時刻”：殲-20戰(zhàn)機在公開飛行展示中掛彈開倉，震撼獻禮人民空軍成立69周年紀念日。 <br>
2019年10月13日，慶祝人民空軍成立70周年航空開放活動新聞發(fā)布上，空軍新聞發(fā)言人申進科大校介紹殲-20戰(zhàn)機列陣人民空軍“王牌部隊”
<h2><a id="chapter3" >服役動態(tài)</a></h2>
2017年3月9日，中央電視臺報道殲-20戰(zhàn)斗機正式進入空軍序列。<br>
2017年3月13日，《中國日報》發(fā)布消息稱，中國自主研制的殲-20近期將裝配國產(chǎn)發(fā)動機。<br>
2017年7月30日，殲-20三機編隊參加在朱日和舉行的慶祝中國人民解放軍成立90周年閱兵。殲擊機梯隊飛來，3架殲-20隱形戰(zhàn)斗機以楔形編隊的形式在天空中飛過。<br>
2017年9月28日，在中國國防部行記者會上，國防部新聞發(fā)言人吳謙大校介紹殲-20飛機已經(jīng)列裝部隊。<br>
2017年11月10日上午，中國空軍發(fā)言人申進科大校表示，殲-20 列裝部隊后，已經(jīng)開展編隊訓練。<br>
2018年2月9日，中國空軍新聞發(fā)言人申進科大校發(fā)布消息，殲-20開始列裝空軍作戰(zhàn)部隊。<br>
2018年10月30日，中國空軍4架殲-20隱形戰(zhàn)斗機現(xiàn)身珠海金灣機場上空。<br>
2019年10月1日，殲-20現(xiàn)身慶祝中華人民共和國成立70周年閱兵式；閱兵中，殲-20與殲-16、殲-10C三型飛機分別以5機楔隊組成戰(zhàn)斗隊形接受檢閱；該三款殲擊機被譽為中國空軍殲擊機家族的“三劍客”，是未來聯(lián)合作戰(zhàn)的骨干力量
<h2><a id="chapter4" >總體評價</a></h2>
殲-20是眼下亞洲區(qū)域最先進的戰(zhàn)機，這讓中國空軍在面對日本、韓國與印度等國家的空軍時占有顯著優(yōu)勢。外媒將殲-20與其他國家戰(zhàn)機進行了對比。俄羅斯蘇霍伊蘇-57戰(zhàn)斗機由于研制進度幾度推遲，尚未正式交付入役；美國F-35戰(zhàn)斗機也多次出現(xiàn)飛機供氧不足的問題，大面積停飛，出口受阻；韓國KF-X隱形戰(zhàn)機先是被爆出因掌握不了關(guān)鍵技術(shù)而被迫降成四代半戰(zhàn)機的情況，后又傳出了合作方印尼打算撤資并已告知韓國的消息。因此，中國殲-20戰(zhàn)機成為亞太區(qū)域領(lǐng)跑的優(yōu)勢戰(zhàn)機。<br>
中國空軍正向全疆域作戰(zhàn)的現(xiàn)代化戰(zhàn)略性軍種邁進，成為有效塑造態(tài)勢、管控危機、遏制戰(zhàn)爭、打贏戰(zhàn)爭的重要力量。殲-20戰(zhàn)機列裝空軍作戰(zhàn)部隊，將進一步提升空軍綜合作戰(zhàn)能力，有助于空軍更好的肩負起維護國家主權(quán)、安全和領(lǐng)土完整的神圣使命。<br>
殲20是我國自主研制的第五代戰(zhàn)斗機，它的研制實現(xiàn)了既定的四大目標——打造跨代新機、引領(lǐng)技術(shù)發(fā)展、創(chuàng)新研發(fā)體系、建設(shè)卓越團隊。打造跨代新機，是按照性能、技術(shù)和進度要求，研制開發(fā)我國自己的新一代隱身戰(zhàn)斗機。引領(lǐng)技術(shù)發(fā)展，指通過自主創(chuàng)新實現(xiàn)強軍興軍的目標。殲20在態(tài)勢感知、信息對抗、協(xié)同作戰(zhàn)等多方面取得了突破，這是中國航空工業(yè)從跟跑到并跑，再到領(lǐng)跑的必由之路。創(chuàng)新研發(fā)體系，是指建設(shè)最先進的飛機研制條件和研制流程。通過一大批大國重器的研制，我們建立了具有我國特色的數(shù)字化研發(fā)體系。建設(shè)卓越團隊，是指通過型號研制，錘煉一支愛黨愛國的研制隊伍，這些擁有報國情懷、創(chuàng)新精神的優(yōu)秀青年是航空事業(yè)未來發(fā)展的生力軍。未來，我們將在戰(zhàn)斗機的機械化、信息化、智能化發(fā)展征程上不斷前行。
</p>
<img border="0" src="img/image1.jpg" usemap="#map" / >
<map name="map" id="map">
<area shape="poly"  coords="142,62,186,175,246,236,243,298,263,323,396,338,478,313,516,246,496,224,320,158,348,142,336,129,232,108" href="https://www.zhihu.com/question/284642168" / title="殲20氣動外形分析"><!--必須保證畫面尺寸與頁面顯示尺寸一致！-->
</map>
</div><!--小div(結(jié)尾)-->
</div><!--小div套大div隱藏滾動條（結(jié)尾）-->
</div><!--使頁面居中顯示，并展視窗50%寬度（結(jié)尾）-->
</body> 
</html>

頁面制作技術(shù)解析

1.頁面內(nèi)容居中顯示方法

2.導航欄懸停頂端方法

3.鼠標滑過導航標題或鏈接時改變背景色提示

3.隱藏滾動條方法

4.圖片區(qū)域鏈接

大家結(jié)合代碼和技術(shù)解析，先自行分析一下每段代碼的作用，以及它們之間的前后關(guān)系。這一步練習對培養(yǎng)代碼閱讀能力很有好處，希望大家可以先自行閱讀分析。

下一次，我會逐步演示“頁面制作技術(shù)解析”中的五個步驟以及一些注意事項。

使用碎片時間，學習完整知識！關(guān)注大魚師兄，一起精研技藝。

.HTML基本標簽

HTML（HyperTextMark-upLanguage）即超文本標記語言或超文本鏈接標示語言，是WWW的描述語言。

HTML文檔的結(jié)構(gòu)

HTML標簽由標簽、屬性、內(nèi)容組成，屬性與內(nèi)容可選。
包含內(nèi)容的標簽以<…>開始，</…>結(jié)束，不包含內(nèi)容的標簽可以是如下格式：<…/>
屬性的值盡量用雙引號或單引號修飾
標簽中的內(nèi)容可以是其他的標簽，稱為原標簽的子標簽，子標簽必須在父標簽結(jié)束之前結(jié)束

2.頁面背景色或背景圖像

<body background="back_image.GIF" >

Hello World！

</body>

（網(wǎng)頁背景圖像）

<body bgcolor="#FFCCFF">

Hello World!

</body>

（網(wǎng)頁背景色彩）

3.文本相關(guān)標簽

標題標簽<h1>－<h6>，<font>標簽。

行的控制

段落標簽<p>，換行標簽<br>。

標題標簽

<h#> ... </h#>，#=1, 2, 3, 4, 5, 6 （說明：<h1>到<h6>字體大小依次遞減）

<sub>下標文字，<sup>上標文字，<del>刪除線。

段落標簽<p>，換行標簽<br>。

內(nèi)容分隔<HR>標簽

<HR> 標簽用于在頁面上繪制水平線。

圖像標簽

圖像的基本語法：<img src=“images/adv_2.jpg” width=“300” height=“150” alt=“在線報名” >

頁面鏈接<A>標簽

要鏈接到同一目錄 (C:\HTML) 下的頁面，可編寫 <A HREF = “Doc1.htm”> 或 <A HREF = “C:\html\Doc2.htm”>

鏈接到本頁面：

圖像鏈接

</a>

滾動<marquee>標簽

滾動文字或圖像

</marquee>

說明：scrolldelay：表示滾動延遲時間，默認值為90；direction：表示滾動的方向，默認為從右向左。

2.HTML/CSS基礎(chǔ)

目標：掌握列表的用法
使用表格的基本結(jié)構(gòu)實現(xiàn)簡單表格
使用表格相關(guān)標簽實現(xiàn)跨行、跨列的復(fù)雜表格
會使用表單的基本結(jié)構(gòu)制作表單頁面
會使用各種表單元素實現(xiàn)注冊頁面
能理解post和get兩種提交方式的區(qū)別

無序列表標簽<ul>用于頁面中沒有順序的列舉項。

格式： <ul type=“”>

type屬性設(shè)置標號的類型，值可以取：

1 disc ：實心圓點

2 circle ：空心圓點

3 square ：實心方塊

無序列表

有序列表<ol>用于說明頁面中的某些成分，需要按特定的順序排列。有序列表的每項都有連續(xù)的編號。

格式：<ol type=“” start=“”>

type設(shè)置標號的類型，值可以取：

1 1：顯示數(shù)字

2 A：顯示大寫字母

3 a：顯示小寫字母

4 I：顯示大寫羅馬數(shù)字

5 i：顯示小寫羅馬數(shù)字

有序列表

嵌套列表：一個列表作為另一個列表的一部分，即多層列表。

嵌套列表

表格<table>應(yīng)用場合

門戶網(wǎng)站應(yīng)用表格

表格的基本語法

<table>...</ table >定義表格

如何創(chuàng)建表格

創(chuàng)建表格

表格表現(xiàn)

表頭與標題

域名數(shù)量報表的創(chuàng)建

域名數(shù)量報表

什么是跨行跨列的表格

1.跨多列的表格

2.跨多行的表格

3.如何創(chuàng)建跨行跨列的表格

表格的尺寸和邊框

品牌商城表的創(chuàng)建

width用來設(shè)置表格的寬度；height用來設(shè)置表格的高度；border用來設(shè)置表格邊框尺寸大小；bordercolor用來設(shè)置表格邊框顏色。

品牌商城表

背景：background屬性用來設(shè)置表格的背景圖片；bgcolor屬性用來設(shè)置表格、行、列的背景色。

對其方式：align屬性用來設(shè)置表格、行、列的對齊方式。

文本框基本語法

文本框的建設(shè)

文本框

密碼框基本語法

密碼框的建設(shè)

密碼框，22個字符寬度

單選按鈕基本語法

單選按鈕的建設(shè)

單選按鈕框

復(fù)選框基本語法

列表框基本語法

多行文本框基本語法

按鈕基本語法

其他表單元素：<input type=“hidden”/>表單隱藏域
<input type=“image”/>表單圖片按鈕
<input type=“file”/>文件瀏覽

<label>標簽

<label>標簽可以綁定某個表單元素，用于擴展可以相應(yīng)點擊等事件的區(qū)域

如：當點擊復(fù)選框右邊的提示文字時，該復(fù)選框也可被選中。

內(nèi)容有限，關(guān)于css，div和網(wǎng)頁布局的部分就下次在和大家分享吧！

在線咨詢

上一篇：HTML 之簡介
下一篇：http協(xié)議詳解

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

HTML列表制作講解-零基礎(chǔ)自學網(wǎng)頁制作

HTML完整學習目錄

面效果展示

頁面完整代碼

頁面制作技術(shù)解析

目錄

.HTML基本標簽

2.HTML/CSS基礎(chǔ)

您的項目需求