HTML網頁清單標記學習教學.
在html頁面中，清單可以起到提綱寫領的作用。列表分為兩種類型，一是有序列表，一是無序列表。前者用項目符號來標記無序的項目，而後者則使用編號來記錄項目的順序。
所謂有序，指的是依照數字或字母等順序排列列表項目。
所謂
HTML網頁清單標記學習教學.
在html頁面中，清單可以起到提綱寫領的作用。列表分為兩種類型，一是有序列表，一是無序列表。前者用項目符號來標記無序的項目，而後者則使用編號來記錄項目的順序。
所謂有序，指的是依照數字或字母等順序排列列表項目。
所謂無序，是指以●、○、□等開頭的，沒有順序的清單項目。
關於列表的主要標記，如下表所示
-
無序列表
-
有序列表
- 、
-
定義清單的標記
- 清單項目的標記 有序列表標記
- 兩個標記以及type和兩個start屬性。
- 基本文法
- 項目一
- 項目二
- 項目三…
語法解釋
在有序列表中，使用- 作為有序的聲明，使用
- 作為每一個項目的起始。
檔案範例：7-1.htm
透過- 和
- 標記建立有序清單。
01 <!-- ------------------------------ --> 02 <!-- 文件范例：7-1.htm --> 03 <!-- 文件说明：建立有序列表 --> 04 <!-- ------------------------------ --> 05 <html> 06 <head> 07 <title>建立有序列表</title> 08 </head> 09 <body> 10 <h2 id="图像设计软件">图像设计软件</h2> 11 <ol> 12 <li>Photoshop 13 <li>Illustrator 14 <li>Freehand 15 <li>CorelDraw 16 </ol> 17 </body> 18 </html> 文件说明
第11行定義了清單的類型為有序，第12行到第15行使用了
- 標記作為清單項目的開始。
#p# 有序列表的類型屬性TYPE
在有序列表的預設情況下，使用數字序號作為列表的開始，我們可以透過type屬性將有序列表的類型設為英文或羅馬字母。- 基本文法
語法解釋
其中value的值如下表所示1 數字1，2，3… a 小寫字母a，b，c A 大寫字母A，B，C i 小寫羅馬數字i，ii，iii… I 大寫羅馬數字Ⅰ，Ⅲ，Ⅲ… 檔案範例：7-2.htm
透過type屬性設定有序清單編號的類型。01 <!-- ------------------------------ --> 02 <!-- 文件范例：7-2.htm --> 03 <!-- 文件说明：设定有序列表编号类型--> 04 <!-- ------------------------------ --> 05 <html> 06 <head> 07 <title>设定有序列表编号类型</title> 08 </head> 09 <body> 10 <h2 id="图像设计软件">图像设计软件</h2> 11 <ol type=a> 12 <li>Photoshop 13 <li>Illustrator 14 <li>Freehand 15 <li>CorelDraw 16 </ol> 17 <hr> 18 <h2 id="图像设计软件">图像设计软件</h2> 19 <ol type=I> 20 <li>Photoshop 21 <li>Illustrator 22 <li>Freehand 23 <li>CorelDraw 24 </ol> 25 <hr> 26 <h2 id="网页动画软件">网页动画软件</h2> 27 <ol type=i> 28 <li>Flash 29 <li>LiveMotion 30 </OL> 31</body> 32 </html> 文件说明
第11行定义了列表的编号类型为小写字母，第19行定义了列表的编号类型为大写的罗马字母，第27行定义了列表的编号类型为小写的罗马字母。
#p# 有序列表的起始属性START
在默认的情况下，有序列表从数字1开始记数，这个起始值通过start属性可以调整，并且英文字母和罗马字母的起始值也可以调整。- 基本语法
语法解释
其中不论列表编号的类型是数字、英文字母还是罗马字母，value的值都是其始的数字。 文件范例：7-3.htm
通过start属性设定有序列表的起始编号。01 <!-- ------------------------------ --> 02 <!-- 文件范例：7-3.htm --> 03 <!-- 文件说明：设定有序列表起始编号--> 04 <!-- ------------------------------ --> 05 <html> 06 <head> 07 <title>设定有序列表起始编号</title> 08 </head> 09 <body> 10 <h2 id="图像设计软件">图像设计软件</h2> 11 <ol start=5> 12 <li>Photoshop 13 <li>Illustrator 14 <li>Freehand 15 <li>CorelDraw 16 </ol> 17 <hr> 18 <h2 id="图像设计软件">图像设计软件</h2> 19 <ol type=I start=3> 20 <li>Photoshop 21 <li>Illustrator 22 <li>Freehand 23 <li>CorelDraw 24 </ol> 25 </body> 26 </html> 文件说明
第11行定义了数字有序列表从5开始，第19行定义了罗马数字的有序列表从Ⅲ开始。
#p# 无序列表标记- 作为每一个项目的起始。
文件范例：7-4.htm
通过- 和
- 标记建立无序列表。
01 <!-- ------------------------------ --> 02 <!-- 文件范例：7-4.htm --> 03 <!-- 文件说明：建立无序列表 --> 04 <!-- ------------------------------ --> 05 <html> 06 <head> 07 <title>建立无序列表</title> 08 </head> 09 <body> 10 <h2 id="图像设计软件">图像设计软件</h2> 11 <ul> 12 <li>Photoshop 13 <li>Illustrator 14 <li>Freehand 15 <li>CorelDraw 16 </ul> 17 </body> 18 </html> 文件说明
第11行定义了列表的类型为无序，第12行至15行使用了
- 标记作为列表项目的开始。
#p# 无序列表标记- 作为每一个项目的起始。
文件范例：7-4.htm
通过- 和
- 标记建立无序列表。
01 <!-- ------------------------------ --> 02 <!-- 文件范例：7-4.htm --> 03 <!-- 文件说明：建立无序列表 --> 04 <!-- ------------------------------ --> 05 <html> 06 <head> 07 <title>建立无序列表</title> 08 </head> 09 <body> 10 <h2 id="图像设计软件">图像设计软件</h2> 11 <ul> 12 <li>Photoshop 13 <li>Illustrator 14 <li>Freehand 15 <li>CorelDraw 16 </ul> 17 </body> 18 </html> 文件说明
第11行定义了列表的类型为无序，第12行至15行使用了
- 标记作为列表项目的开始。
#p# 目录列表标记
目录列表用于显示文件内容的目录大纲，通常用于设计一个压缩窄列的列表，用于显示一系列的列表内容，例如字典中的索引或单词表中的单词等。列表中每项至多只能有20个字符。
- 基本语法
- 项目一
- 项目二
- 项目三 ……
语法解释
在目录列表中，使用作为目录列表的声明，使用 - 作为每一个项目的起始。 文件范例：7-5.htm
通过和 - 标记建立目录列表。
01 <!-- ------------------------------ --> 02 <!-- 文件范例：7-5.htm --> 03 <!-- 文件说明：建立目录列表 --> 04 <!-- ------------------------------ --> 05 <html> 06 <head> 07 <title>建立目录列表</title> 08 </head> 09 <body> 10 <h2 id="图像设计软件">图像设计软件</h2> 11 <dir> 12 <li>Photoshop 13 <li>Illustrator 14 <li>Freehand 15 <li>CorelDraw 16 </dir> 17 </body> 18 </html> 文件说明
第11行定义了列表的类型为目录，第12行至第15行使用了
- 标记作为列表项目的开始。
#p# 定义列表标记- 基本语法
- 名词一
- 解释一
- 名词二
- 解释二
- 名词三
- 解释三 ……
- 作为名词的标题，
- 用来解释名词。
文件范例：7-6.htm
通过- 、
- 、
- 标记建立定义列表。
01 <!-- ------------------------------ --> 02 <!-- 文件范例：7-6.htm --> 03 <!-- 文件说明：建立定义列表 --> 04 <!-- ------------------------------ --> 05 <html> 06 <head> 07<title>建立定义列表</title> 08 </head> 09 <body> 10 <h2 id="图像设计软件">图像设计软件</h2> 11 <dl> 12 <dt>Photoshop<dd>Adobe公司的图像处理软件 13 <dt>Illustrator<dd>Adobe公司的矢量绘图软件 14 <dt>Freehand<dd>Macromedia公司的矢量绘图软件 15 <dt>CorelDraw<dd>Corel公司的图形图像软件 16 </dl> 17 </body> 18 </html> 文件说明
第11行定义了列表的类型为定义列表，第12行至15行使用了
- 显示软件名称，
- 显示软件的说明。
#p# 菜单列表标记- 基本语法
- 项目一
- 项目二
- 项目三
- ……
语法解释
在菜单列表中，使用
定义列表是一种两个层次的列表，用于解释名词的定义，名词为第一层次，解释为第二层次，并且不包含项目符号。定义列表也称为字典列表，因为它与字典具有相同的格式。在定义列表中，每个列表项带有一个缩进的定义字段，就好象字典对文字进行解释一样。语法解释
在定义列表中，使用- 作为定义列表的声明，使用
- 基本语法
- 标记建立无序列表。
在无序列表中，各个列表项之间没有顺序级别之分，它通常使用一个项目符号作为每个列表项的前缀。无序列表主要使用- 、
、 - 、
语法解释
在无序列表中，使用- 作为无序的声明，使用
- 作为每一个项目的起始。
文件范例：7-4.htm
- 标记建立无序列表。
在无序列表中，各个列表项之间没有顺序级别之分，它通常使用一个项目符号作为每个列表项的前缀。无序列表主要使用- 、
、 - 、
语法解释
在无序列表中，使用- 作为无序的声明，使用
- 基本文法
- 標記建立有序清單。
- 基本文法
有序列表使用編號，而不是項目符號來編排項目。清單中的項目採用數字或英文字母開頭，通常各項目間有先後的順序性。在有序列表中，主要使用- 和
- 清單項目的標記 有序列表標記
-
定義列表
HTML：是編程語言還是其他？Apr 15, 2025 am 12:13 AMHTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1）htmlStructures andFormatSwebContentusingtags.2）itworkswithcsssforstylingandjavascript for Interactivity，增強WebevebDevelopment。
HTML：建立網頁的結構Apr 14, 2025 am 12:14 AMHTML是構建網頁結構的基石。 1.HTML定義內容結構和語義，使用、、等標籤。 2.提供語義化標記，如、、等，提升SEO效果。 3.通過標籤實現用戶交互，需注意表單驗證。 4.使用、等高級元素結合JavaScript實現動態效果。 5.常見錯誤包括標籤未閉合和屬性值未加引號，需使用驗證工具。 6.優化策略包括減少HTTP請求、壓縮HTML、使用語義化標籤等。
從文本到網站：HTML的力量Apr 13, 2025 am 12:07 AMHTML是一種用於構建網頁的語言，通過標籤和屬性定義網頁結構和內容。 1）HTML通過標籤組織文檔結構，如、。 2）瀏覽器解析HTML構建DOM並渲染網頁。 3）HTML5的新特性如、、增強了多媒體功能。 4）常見錯誤包括標籤未閉合和屬性值未加引號。 5）優化建議包括使用語義化標籤和減少文件大小。
了解HTML，CSS和JavaScript：初學者指南Apr 12, 2025 am 12:02 AMWebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。
HTML的角色：構建Web內容Apr 11, 2025 am 12:12 AMHTML的作用是通過標籤和屬性定義網頁的結構和內容。 1.HTML通過到、等標籤組織內容，使其易於閱讀和理解。 2.使用語義化標籤如、等增強可訪問性和SEO。 3.優化HTML代碼可以提高網頁加載速度和用戶體驗。
HTML和代碼：仔細觀察術語Apr 10, 2025 am 09:28 AMhtmlisaspecifictypefodyfocusedonstructuringwebcontent，而“代碼” badlyLyCludEslanguagesLikeLikejavascriptandPytyPythonForFunctionality.1）htmldefineswebpagertuctureduseTags.2）“代碼”代碼“ code” code code code codeSpassSesseseseseseseseAwiderRangeLangeLangeforLageforLogageforLogicIctInterract
HTML，CSS和JavaScript：Web開發人員的基本工具Apr 09, 2025 am 12:12 AMHTML、CSS和JavaScript是Web開發的三大支柱。 1.HTML定義網頁結構，使用標籤如、等。 2.CSS控製網頁樣式，使用選擇器和屬性如color、font-size等。 3.JavaScript實現動態效果和交互，通過事件監聽和DOM操作。
HTML，CSS和JavaScript的角色：核心職責Apr 08, 2025 pm 07:05 PMHTML定義網頁結構，CSS負責樣式和佈局，JavaScript賦予動態交互。三者在網頁開發中各司其職，共同構建豐富多彩的網站。
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
MinGW - Minimalist GNU for Windows
這個專案正在遷移到osdn.net/projects/mingw的過程中，你可以繼續在那裡關注我們。 MinGW：GNU編譯器集合（GCC）的本機Windows移植版本，可自由分發的導入函式庫和用於建置本機Windows應用程式的頭檔；包括對MSVC執行時間的擴展，以支援C99功能。 MinGW的所有軟體都可以在64位元Windows平台上運作。
mPDF
mPDF是一個PHP庫，可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件，並處理不同的語言。與原始腳本如HTML2FPDF相比，它的速度較慢，並且在使用Unicode字體時產生的檔案較大，但支援CSS樣式等，並進行了大量增強。支援幾乎所有語言，包括RTL（阿拉伯語和希伯來語）和CJK（中日韓）。支援嵌套的區塊級元素（如P、DIV），
Safe Exam Browser
Safe Exam Browser是一個安全的瀏覽器環境，安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問，並防止學生使用未經授權的資源。
SublimeText3 英文版
推薦：為Win版本，支援程式碼提示！
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
