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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！