生活随笔
收集整理的這篇文章主要介紹了
Web前端开发笔记——第二章 HTML语言 第六节 区域标签、列表标签
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
目錄
- 一、區域標簽
- 二、列表標簽
- （一）列表標簽的定義
- （二）列表標簽的類型
- （三）列表標簽的嵌套
- 結語
一、區域標簽
（一）div標簽的定義
div標簽是成對使用的，可將元素即將一些內容組合在一起形成一個區域，例如下列導航欄、分欄、廣告都是一個個區域。可以這樣說，div標簽常用于組合塊級元素，方便在后續通過 CSS 語言來對其格式化，且區域可以疊加。
<div></div>
在解析html文件時，瀏覽器會默認在 div 標簽的前后進行一個換行處理。
（二）div標簽的屬性
這里主要介紹兩個屬性，即id屬性和style屬性，其中id屬性代表該div標簽區域的名稱，它表示為id=""，而style屬性代表區域的樣式，如區域的大小、顏色等等，表示為style=""。
例如，下列html代碼中，設定id屬性，兩個區域名稱為container1和container2；設定style屬性中背景顏色為灰色（#808080）和藍色（#0000FF）、區域高寬度：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>my page
</title></head><body><div id="container1" style="background-color:#808080;width:350px;height:180px"><h1>導航欄
</h1><p>Web前端開發
</p><p>計算機網絡
</p><p>數據庫原理與應用
</p><div id="container2" style="background-color:#0000FF;width:350px;height:180px"><h1>最新文章
</h1><p>數據庫原理與應用第一章
</p><p>數據庫原理與應用第二章
</p></div></body>
</html>
運行結果如下：
二、列表標簽
（一）列表標簽的定義
列表標簽分為有序列表、無序列表和自定義列表標簽。列表中不僅僅能是文本，也可以是圖片、鏈接等等或者嵌套新的列表。
（二）列表標簽的類型
1、有序列表
（1）有序列表的定義
有序列表由<ol></ol>標簽包圍，其中各列用<li></li>表示，經瀏覽器解析后其每列帶有數字標記列數。
例如，在vscode中下列html代碼，如下：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document
</title>
</head><body><ol><li>星期一
</li><li>星期二
</li><li>星期三
</li></ol>
</body></html>
運行結果如下，我們可以看到“星期一”、“星期二”、“星期三”前面都帶有數字標記：
（2）有序列表的屬性
若不想使用阿拉伯數字進行標記，可以通過添加<ol></ol>標簽的type屬性，對有序列表中各列前面的標記進行更改。默認情況下type屬性可以不用添加，因為默認的屬性是type=“1”，它表示的是阿拉伯數字。
比如設置大寫或者小寫羅馬數字，表示為<ol type="I"></ol>或<ol type="i"></ol>；設置大寫或者小寫英文，表示為<ol type="A"></ol>或<ol type="a"></ol>。
例如，在vscode中下列html代碼，如下：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document
</title>
</head><body><ol type="1"><li>星期一
</li><li>星期二
</li><li>星期三
</li></ol><ol type="I"><li>星期一
</li><li>星期二
</li><li>星期三
</li></ol><ol type="i"><li>星期一
</li><li>星期二
</li><li>星期三
</li></ol><ol type="A"><li>星期一
</li><li>星期二
</li><li>星期三
</li></ol><ol type="a"><li>星期一
</li><li>星期二
</li><li>星期三
</li></ol>
</body></html>
運行結果如下：
2、無序列表
（1）無序列表的定義
無序列表與有序列表差不多，只不過其所有列是由<ul></ul>標簽包圍的，各列仍然是<li></li>標簽表示的，但經瀏覽器解析后其每列前帶有小圓點標記。
例如，在vscode中下列html代碼，如下：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document
</title>
</head><body><ul><li>星期一
</li><li>星期二
</li><li>星期三
</li></ul>
</body></html>
運行結果如下：
（2）無序列表的屬性
無序列表也有屬性，不過在HTML5中不支持，可以通過使用 CSS 語言來定義不同類型的無序列表標記，這里不進行展開。
3、自定義列表
自定義列表中所有列是由<dl></dl>標簽包圍的，其中每列用 <dt></dt>標簽表示，且每列的描述用 <dd></dd> 標簽表示，可以使用該標簽直接對項目和注釋進行組合，其實自定義列表也是Web語義化中的一種標簽。
例如，在vscode中下列html代碼，如下：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document
</title>
</head><body><dl><dt>星期一：
</dt><dd>每周的第一天
</dd><dt>星期二：
</dt><dd>每周的第二天
</dd><dt>星期三：
</dt><dd>每周的第三天
</dd></dl>
</body></html>
運行結果如下：
（三）列表標簽的嵌套
列表標簽可以進行嵌套。
例如，在vscode中下列html代碼，如下：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document
</title>
</head><body><ol><li><ul><li>星期一
</li></ul></li><li><ul><li>星期二
</li></ul></li><li><ul><li>星期三
</li></ul></li></ol></body></html>
運行結果如下：
結語
以上就是全部內容，篇幅較長，感謝您的閱讀和支持，若有表述或代碼中有不當之處，望指出！您的指出和建議能給作者帶來很大的動力！！！
總結
以上是生活随笔為你收集整理的Web前端开发笔记——第二章 HTML语言 第六节 区域标签、列表标签的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
