html中的盒子标签div标签,有序列表,无序列表

div标签

div标签对于分析数据很重要,因为数据在页面中展示是以区域的形式展示的,而查找数据需要先找到盒子名称在继续向下找。前端页面布局中有两种布局方式,一种是通过表格布局,一种是通过div+css来布局。

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>

执行结果

案例练习《蜀道难》

代码示例如下:

css 复制代码
<!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>

执行结果如下

无序列表和有序列表

无序列表代码

css 复制代码
<!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>

无序列表执行

有序列表代码

css 复制代码
<!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>

有序列表执行

其他格式

css 复制代码
<!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>

执行结果

相关推荐
敲敲敲-敲代码6 分钟前
web系统(asp.net和C#)
前端·c#·asp.net
IT_陈寒12 分钟前
Python开发者必坑指南:3个看似聪明实则致命的‘优化’让我损失了50%性能
前端·人工智能·后端
初圣魔门首席弟子28 分钟前
c++中this指针使用bug
前端·c++·bug
AI视觉网奇6 小时前
rknn yolo11 推理
前端·人工智能·python
gplitems1236 小时前
Gunslinger – Gun Store & Hunting WordPress Theme: A Responsible
开发语言·前端·javascript
wyzqhhhh9 小时前
less和sass
前端·less·sass
Nan_Shu_61410 小时前
学习:uniapp全栈微信小程序vue3后台-额外/精彩报错篇
前端·学习·微信小程序·小程序·uni-app·notepad++
excel11 小时前
Vue3 中的双向链表依赖管理详解与示例
前端
前端小白从0开始12 小时前
Chrome DevTools高级用法:性能面板内存泄漏排查
前端·chrome·chrome devtools
EveryPossible12 小时前
带有渐变光晕
前端·javascript·css