003+limou+HTML——(3)HTML列表

news2025/1/23 14:48:36

000、前言

列表是网页常见的一种数据排列方式,在HTMl中列表一共有三种:有序列表、无序列表、定义列表(另外“目录列表dir”和“菜单列表menu”已经在HTML5中被废除了,现在都是使用无序列表ul来替代)

001、有序列表:ol、li

(1)一般使用

  • 有序列表有先后之分
  • 用ol、li标签配合使用就可以显示有序列表,而且ol标签内部子标签也只能是li,另外也不要直接把文本放在ol里面
  • ol即ordered list(有序列表),li即list(列表项)
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>网页标题</title>
    </head>

    <body>
        <h1>文本标题1</h1>
        <ol>
            <li>列表01</li>
            <li>列表02</li>
            <li>列表03</li>
        </ol>
       
        <h1>文本标题2</h1>
        <h1>文本标题3</h1>
    </body>
</html>

在这里插入图片描述

(2)利用type属性

  • 利用type属性可以改变列表项符号
    在这里插入图片描述
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>网页标题</title>
    </head>

    <body>
        <h1>文本标题1</h1>
        <ol type="A">
            <li>列表01</li>
            <li>列表02</li>
            <li>列表03</li>
        </ol>
       
        <h1>文本标题2</h1>
       
        <h1>文本标题3</h1>
    </body>
</html>

在这里插入图片描述

002、无序列表:ul、li

(1)一般使用

  • 无序列表无先后之分
  • 用ul、li标签配合使用就可以显示无序列表,而且ul标签内部子标签也只能是li,另外也不要直接把文本放在ul里面
  • ul即unordered list(有序列表),li即list(列表项)
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>网页标题</title>
    </head>

    <body>
        <h1>文本标题1</h1>
        <ol type="A">
            <li>列表01</li>
            <li>列表02</li>
            <li>列表03</li>
        </ol>
       
        <h1>文本标题2</h1>
        <ul>
            <li>列表01</li>
            <li>列表02</li>
            <li>列表03</li>
        </ul>

        <h1>文本标题3</h1>
    </body>
</html>

在这里插入图片描述

(2)利用type属性

  • 利用type属性可以改变列表项符号
    在这里插入图片描述

(3)深入了解无序列表

实际上的开发工作中无序列表是用的最多的,只要涉及到数据表示,无序列表就几乎无处不在003、定义列表:dl、dt

  • 定义列表是一组带有特殊含义的列表,一个列表项中含有“条件”和“列表”两部分
  • dl,即definition(定义列表)
  • dt,即definition term(定义名词)
  • dd,即definition description(定义描述)
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>网页标题</title>
    </head>

    <body>
        <h1>文本标题1</h1>
        <ol type="A">
            <li>列表01</li>
            <li>列表02</li>
            <li>列表03</li>
        </ol>
       
        <h1>文本标题2</h1>
        <ul>
            <li>列表01</li>
            <li>列表02</li>
            <li>列表03</li>
        </ul>

        <h1>文本标题3</h1>
        <dl>
            <dt>HTML</dt>
            <dd>制作网页的标准语言,控制网页的结构</dd>
            <dt>CSS</dt>
            <dd>层叠样式表,控制网页的样式</dd>
            <dt>Javascript</dt>
            <dd>脚本语言,控制网页的行为</dd>
        </dl>
    </body>
</html>

在这里插入图片描述

004、HTNL语义化

(1)误区

学习HTML的时候,认为一些标签可以被其他的标签轻易实现而认为这个标签没有用。这是一个很大的误区。HTML不同的标签从显示的角度来看确实可以达到互换的效果,比如使用下面的标签代码代替有序列表:

<div>1、HTML</div>
<div>2、CSS</div>
<div>3、Javascript</div>

(2)语义

但是这违背了HTML的初衷,在HTML中,标签都有自己的语义,一般都是优先使用有语义的标签。比如h1标签,表示的是header1,标记的是一个最高级标题,而div和span是无语义的标签。(span标签是一个行内标签,也叫内嵌标签)

(3)调试

①HTML的标签具有语义的标签,可以方便调试,快速找到有错误的代码,具有可读性
②另外语义还对搜索引擎优化(SEO)有极其重要的作用

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/397036.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

C/C++指针与数组(一)

预备知识 1、数据的存储 2、基本内建类型 1&#xff09;类型的大小 C offers a flexible standard with some guaranteed minimum sizes, which it takes from C: A short integer is at least 16 bits wide.An int integer is at least as big as short.A long integer is a…

Spring Cloud学习笔记:基础知识

这是本人学习的总结&#xff0c;主要学习资料如下 马士兵教育 目录1、Spring Cloud 简介2、Eureka3、建立Spring Cloud项目3.1、启动Server3.1.1、dependency3.1.2、配置文件3.1.3、Server端启动代码3.2、启动Client3.2.1、dependency3.2.2、配置文件3.3.3、Client端启动代码3…

Go之入门(特性、变量、常量、数据类型)

一、Go语言特性 语法简单并发性。Go语言引入了协程goroutine&#xff0c;实现了并发编程内存分配。Go语言为了解决高并发下内存的分配和管理&#xff0c;选择了tcmalloc进行内存分配&#xff08;为了并发设计的高性能内存分配组件&#xff0c;使用cache为当前线程提供无锁分配…

电脑自动重启是什么原因?详细解说

案例&#xff1a;电脑自动重启是什么原因&#xff1f; “一台用了一年的电脑&#xff0c;最近使用&#xff0c;每天都会一两次莫名其妙自动重启&#xff0c;看了电脑错误日志&#xff0c;看不懂什么意思&#xff0c;一直找不到答案。有没有高手知道怎么解决这个问题的。” 当…

仿写简单IOC

目录 TestController类: UserService类: 核心代码SpringIOC&#xff1a; Autowired和Component注解 SpringIOCTest 类 ​编辑 总结&#xff1a; TestController类: Component public class TestController {Autowiredprivate UserService userService;public void test…

RocketMQ如何测试

RocketMQ如何测试MQ简介RocketMQRocketMQ测试点MQ简介 MQ&#xff1a;Message Queue&#xff0c;即消息队列&#xff0c;是一种应用程序之间的消息通信&#xff0c;简单理解就是A服务不断的往队列里发布信息&#xff0c;另一服务B从队列中读取消息并执行处理&#xff0c;消息发…

同步、异步ETL架构的比较

背景介绍&#xff1a; 数据的抽取&#xff0c;转换和加载 (ETL, Extract, Transform, Load) 是构建数据仓库过程中最复杂也是至 关重要的一个步骤&#xff0c;我们通常用两种办法来处理 ETL 流程: 一种是异步(Asynchronous) ETL 方式, 也称为文本文件(Flat file)方式。 另外…

华为云平台架构名词解释

名词解释 网络设备 ISW&#xff08;外网接入交换机&#xff09;&#xff1a;出口交换机&#xff0c;常用于和外网建立静态/BGP路由互联 CSW &#xff08;内网接入交换机&#xff09;&#xff1a;专线接入&#xff08;用户内网骨干&#xff09;交换机&#xff0c;用户自有网络…

一场以数字技术深度影响和改造传统实业的新风口,正在开启

当数字经济的浪潮开始上演&#xff0c;一场以数字技术深度影响和改造传统实业的新风口&#xff0c;正在开启。对于诸多在互联网时代看似业已走入死胡同的物种来讲&#xff0c;可以说是打开了新的天窗。对于金融科技来讲&#xff0c;同样如此。以往&#xff0c;谈及金融科技&…

蓝桥杯-左移右移(2022国赛)

蓝桥杯-左移右移1、问题描述2、解题思路与代码实现2.1 方法一&#xff1a;使用LinkedList双向链表实现(50%)2.2 方法二&#xff1a;使用HashMap左右临界值实现(100%)1、问题描述 小蓝有一个长度为 N 的数组, 初始时从左到右依次是 1,2,3,…N 。 之后小蓝对这个数组进行了 M 次操…

TX2配置RealSense D455相机SDK和ros驱动

TX2配置RealSense D455相机SDK和ros驱动1 SDK安装2 RealSense-ros安装3 bug及解决3.1 realsense-viewer显示usb2.13.2 Could not found ddynamic_reconfigure折腾了两天终于把realsense的驱动装好了&#xff0c;尝试了命令安装&#xff0c;源码安装&#xff0c;前前后后搞了三遍…

12.并发编程

1.并发并发&#xff1a;逻辑流在时间时重叠构造并发程序&#xff1a;进程&#xff1a;每个逻辑控制流是一个进程&#xff0c;由内核调度和维护进程有独立的虚拟地址空间&#xff0c;想要通信&#xff0c;控制流必须使用某种显式的进程间通信机制(IPC)I/O多路复用&#xff1a;程…

Linux - 第6节 - 动态库和静态库

1.静态库与动态库概念 静态库&#xff08;.a&#xff09;&#xff1a;程序在编译链接的时候把库的代码拷贝到可执行文件中。程序运行的时候将不再需要静态库。动态库&#xff08;.so&#xff09;&#xff1a;程序在运行的时候才去链接动态库的代码&#xff0c;多个程序共享使用…

【javaEE初阶】第三节.多线程 (进阶篇 ) 死锁

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、"死锁"出现的典型场景二、产生 "死锁" 的必要条件 三、解决 "死锁" 问题的办法 总结前言 今天对于多线程进阶的学习&#…

【MapGIS精品教程】007:MapGIS投影变换案例教程

MapGIS投影变换,包括创建坐标系、定义投影、单点投影、类投影、批量投影。 文章目录 一、创建坐标系1. 创建高斯平面坐标系2. 创建阿尔伯斯投影二、定义投影三、投影变换1. 单点投影2. 类投影3. 批量投影一、创建坐标系 在MagGIS数据库中,有个空间参考系的文件夹,内置了常见…

【tensorflow onnx】TensorFlow2导出ONNX及模型可视化教程

文章目录1 背景介绍2 实验环境3 tf2onnx工具介绍4 代码实操4.1 TensorFlow2与ONNX模型导出4.2 ONNX正确性验证4.3 TensorFlow2与ONNX的一致性检查4.4 多输入的情况4.5 设定输入/输出节点5 ONNX模型可视化6 ir_version和opset_version修改7 ONNX输入输出维度修改8 致谢原文来自于…

【教学典型案例】18.开门小例子理解面向对象

目录一&#xff1a;背景介绍业务场景&#xff1a;业务分析&#xff1a;二&#xff1a;实现思路1、面向过程&#xff1a;2、面向对象&#xff08;抽象、封装、继承、多态&#xff09;3、面向对象&#xff08;抽象、封装、继承、多态、反射&#xff09;三&#xff1a;实现过程1、…

如何在 Istio 中使用 SkyWalking 进行分布式追踪

在云原生应用中&#xff0c;一次请求往往需要经过一系列的 API 或后台服务处理才能完成&#xff0c;这些服务有些是并行的&#xff0c;有些是串行的&#xff0c;而且位于不同的平台或节点。那么如何确定一次调用的经过的服务路径和节点以帮助我们进行问题排查&#xff1f;这时候…

二极管损坏的原因有哪些?

大家好,我是记得诚。 最近项目上肖特基二极管出问题了,概率性损坏,二极管本来是一个很简单的器件,这次重新整理一下,供大家参考。 二极管损坏,个人总结有如下几种情况。 1、过压 在Ta=25℃下,超过二极管的最大反向电压VR,二极管可能会被击穿,导致损坏。 2、过流 …

SpringBoot的基本概念和使用

文章目录一、什么是SpringBoot二、Spring Boot优点三、Spring Boot项目创建四、Spring Boot 配置文件1. yml语法2.properties与yml关系3.多系统的配置五、Spring Boot日志文件1.日志对象2.日志级别日志级别的设置System.out.println VS 日志的两个致命缺点3.日志持久化4.更简单…