html中的盒子標簽div標簽，有序列表，無序列表

div標簽

div標簽對于分析數據很重要，因為數據在頁面中展示是以區域的形式展示的，而查找數據需要先找到盒子名稱在繼續向下找。前端頁面布局中有兩種布局方式，一種是通過表格布局，一種是通過div+css來布局。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>區域標簽</title>
</head>
<body><!-- 頁面布局 div + css --><div style="text-align: center"><h1>web前端開發</h1><p>HTML</p><p>CSS</p><p>JavaScript</p></div></body>
</html>

執行結果
在這里插入圖片描述

案例練習《蜀道難》

代碼示例如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>李白詩詞</title>
</head>
<body><div id="container" style="text-align: center"><div id="nav"><p>蜀道難</p></div><div id="content"><img src="images/蜀道難.png" width="80"/><hr style="width: 20%"/><h1>蜀道難</h1><p>噫吁嚱，危乎高哉！蜀道之難，難于上青天！</p><p>蠶叢及魚鳧，開國何茫然！</p><p>爾來四萬八千歲，不與秦塞通人煙。</p><p>西當太白有鳥道，可以橫絕峨眉巔。</p><p>地崩山摧壯士死，然后天梯石棧相鉤連。</p><p>上有六龍回日之高標，下有沖波逆折之回川。</p><p>黃鶴之飛尚不得過，猿猱欲度愁攀援。</p><p>青泥何盤盤，百步九折縈巖巒。</p><p>捫參歷井仰脅息，以手撫膺坐長嘆。</p><p>問君西游何時還？畏途巉巖不可攀。</p><p>但見悲鳥號古木，雄飛雌從繞林間。</p><p>又聞子規啼夜月，愁空山。</p><p>蜀道之難，難于上青天，使人聽此凋朱顏！</p><p>連峰去天不盈尺，枯松倒掛倚絕壁。</p><p>飛湍瀑流爭喧豗，砯崖轉石萬壑雷。</p><p>其險也如此，嗟爾遠道之人胡為乎來哉！</p><p>劍閣崢嶸而崔嵬，一夫當關，萬夫莫開。</p><p>所守或匪親，化為狼與豺。</p><p>朝避猛虎，夕避長蛇；磨牙吮血，殺人如麻。</p><p>錦城雖云樂，不如早還家。</p><p>蜀道之難，難于上青天，側身西望長咨嗟！</p></div><hr style="width: 20%"/><div><p> 1.子規:杜鵑鳥 </p><p> 2.魚鳧:捕魚的水鳥</p></div></div>
</body>
</html>

執行結果如下在這里插入圖片描述

無序列表和有序列表

無序列表代碼

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>測試無序列表</title><style>ul {list-style-type: square;}</style></head>
<body><h1>web前端開發</h1><!-- unOrderList 無序列表--><ul><li>HTML</li><li>CSS</li><li>JavaScript</li></ul></body>
</html>

無序列表執行
在這里插入圖片描述

有序列表代碼

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>測試有序列表</title><style></style></head>
<body><h1>web前端開發</h1><!-- OrderList 無序列表--><ol><li>HTML</li><li>CSS</li><li>JavaScript</li></ol></body>
</html>

有序列表執行
在這里插入圖片描述
其他格式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>測試有序列表</title><style>ol {list-style-type: upper-roman;}</style></head>
<body><h1>web前端開發</h1><!-- OrderList 無序列表--><ol><li>HTML</li><li>CSS</li><li>JavaScript</li></ol></body>
</html>

執行結果
在這里插入圖片描述

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/bicheng/85891.shtml
繁體地址，請注明出處：http://hk.pswp.cn/bicheng/85891.shtml
英文地址，請注明出處：http://en.pswp.cn/bicheng/85891.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！