首页 > 其他分享 >【测试全栈,先从前端开始--HTML之无序列表/有序列表】(十三)

【测试全栈,先从前端开始--HTML之无序列表/有序列表】(十三)

时间:2022-10-26 15:32:02浏览次数:50  
标签:序列表 -- 标签 无序 列表 全栈 HTML 定义

很久之前讲了HTML合并单元格,接下来我们说下列表,包含无序列表和有序列表。

  <ul>标签表示HTML页面中项目的无序列表,一般会以项目符号呈现列表项,而列表项使用<li>标签定义。无序列表的基本语法格式如下:

<ul>

    <li>列表项1</li>

    <li>列表项2</li>

    <li>列表项3</li>

    ...

</ul>

来实战下,看看代码怎么写:

【测试全栈,先从前端开始--HTML之无序列表/有序列表】(十三)_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>无序列表</title>

</head>

<body>

    <h4>您喜欢的事物</h4>

    <ul>

        <li>桃子</li>

        <li>苹果</li>

        <li>西瓜</li>

    </ul>

</body>

</html>

对于无序列表,还有几点是需要注意的:

  1. 无序列表的各个列表项之间没有顺序级别之分,是并列的
  2. <ul></ul>之间只能嵌套<li></li>,在<ul></ul>之间放置其他标签或者是文字等,是不被允许的。
  3. <li></li>之间相当于一个容器,可以放任意元素。比如
  4. 无序列表会带自己的样式属性,但在实际操作时,使用css来设置

先看效果:

【测试全栈,先从前端开始--HTML之无序列表/有序列表】(十三)_测试_02

然后看下代码:

<!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>无序列表</title>

</head>

<body>

    <h4>您喜欢的事物</h4>

    <ul>

        <li>桃子</li>

        <li>苹果</li>

        <li>西瓜</li>

        <li>

            <p>这是一个段落</p>

            <tr>

                <td>苦难</td>

            </tr>

        </li>

    </ul>

</body>

</html>

这里插入了一个<p>,还有<tr>和<td>,确实是什么都可以插进去的


无序列表说完后,我们来讲讲有序列表

<ol>标签用于定义有序列表,列表排序以数字来显示,并使用<li>标签来定义列表项。

<ol>

    <li>列表项1</li>

    <li>列表项2</li>

    <li>列表项3</li>

</ol>


好的,今天就先到这里,稍后再说

标签:序列表,--,标签,无序,列表,全栈,HTML,定义
From: https://blog.51cto.com/u_11894/5797988

相关文章

  • 一篇解决 —— 报税系统的分析与解决方案
    一篇解决——报税系统的分析与解决方案中国征税税种极为广泛,包括所得税(企业所得税和个人所得税)、间接税(增值税和消费税)、与房地产相关的税(土地增值税、房产税、耕地占用......
  • 软件性能测试的常见方法分享,上海好口碑软件测试公司有哪些?
    软件性能测试是衡量软件产品质量的重要指标之一,是一种非功能性,不关心系统是否可以完成特定功能,只关心软件系统在运行时的速度是否快、消耗资源多少,因此做好软件性能测试......
  • 华为云CDN,海量资源智能路由,让内容传输更快一步
    华为云CDN,海量资源智能路由,让内容传输更快一步​云服务对于我们生活的影响已经愈发深入,在数字化转型的大背景下,城市管理、公共交通、医疗健康等领域都需要云服务的支持。......
  • 华为云CDN,用技术实力助力企业创新,促进产业化转型
    华为云CDN,用技术实力助力企业创新,促进产业化转型​想必大家在日常上网或者玩游戏时都遇到过视频经常显示“加载中”、网页需要很长时间才能打开、玩游戏断网等情况,明明家......
  • envi图像裁剪镶嵌融合
    图像镶嵌:将没有地理坐标系或者有地理坐标系的多幅图像合并,生成一幅单一的合成图像。主要是镶嵌颜色不一致、接边以及重叠等问题。选择Map->Mosaicking->Georeferenced.......
  • jarvisoj_fm
    【格式化字符串漏洞】【Write-up】BUUCTFjarvisoj_fm原题链接【格式化字符串漏洞】【Write-up】BUUCTFjarvisoj_fmchecksec查看程序架构ida查看程序伪代码构建exp......
  • not_the_same_3dsctf_2016
    【Write-up】BUUCTFnot_the_same_3dsctf_2016原题链接【Write-up】BUUCTFnot_the_same_3dsctf_2016checksec查看程序架构ida查看程序伪代码构建exp完整exp......
  • Qt利用cpphttp开发http服务器和客户端
    说明:cpphttp一个基于c++11的只有头文件的跨平台 HTTP/HTTPS 库。简单易用,只需要包含头文件 httplib,h 即可。注意:这个库是一个多线程阻塞式 Http 库,如果您需要的是......
  • JS中全局变量作为函数实参传入的问题
    昨天面试时,被问到了以下的JS代码问题,对比两种情况的输出思考为什么会是这样的结果第一种情况vara=[1,2,3];functionfoo(a){a=[4,5,6];}foo(a);console.log(a)......
  • vue 利用父组件实现子组件一调用子组件二的方法
    在父组件import引入子组件<collapseOptionref="collapse"></collapseOption><tipsDialog:show="isShow":msg="msg"></tipsDialog>......