HTML的无序列表、有序列表、自定义列表

2023-11-13

HTML的无序列表:

1.无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。

无序列表始于 <ul 标签。每个列表项始于 <li。

2.无序列表的type属性有三个值 disc:表示实心小圆点 circle:表示空心小圆点 square:表示实心小方块

 <title>无序列表</title>
    <!--无序列表的type属性有三个值  disc:表示实心小圆点  circle:表示空心小圆点  square:表示实心小方块-->
</head>
<body>
<ul type="disc">
    <li>HTML</li>
    <li>CSS</li>
    <li>JS</li>
    <li>JavaScript</li>
    <li>jQuery</li>
</ul>

<ul type="circle">
    <li>HTML</li>
    <li>CSS</li>
    <li>JS</li>
    <li>JavaScript</li>
    <li>jQuery</li>
</ul>

<ul type="square">
    <li>HTML</li>
    <li>CSS</li>
    <li>JS</li>
    <li>JavaScript</li>
    <li>jQuery</li>
</ul>
</body>

在这里插入图片描述

有序列表:

1.样,有序列表也是一列项目,列表项目使用数字进行标记。

有序列表始于 <ol 标签。每个列表项始于 <li 标签。

有序列表的type属性值: type=“1”(默认) 数字排序 type=“A” 字母排序 type="|" 罗马字符排序
有序列表的start属性:定义列表开始的序号 比如:从10开始 有序列表的value属性: 定义某个单个列表项的序列号

<ol type="1">
    <li>JAVA</li>
    <li>MYSQL</li>
    <li>C#</li>
    <li>PHP</li>
    <li>C++</li>
</ol>

<ol type="A">
    <li>JAVA</li>
    <li>MYSQL</li>
    <li>C#</li>
    <li>PHP</li>
    <li>C++</li>
</ol>

<ol type="I">
    <li>JAVA</li>
    <li>MYSQL</li>
    <li>C#</li>
    <li>PHP</li>
    <li>C++</li>
</ol>

<ol start="10">
    <li>JAVA</li>
    <li>MYSQL</li>
    <li>C#</li>
    <li>PHP</li>
    <li>C++</li>
</ol>

<ol>
    <li>JAVA</li>
    <li >MYSQL</li>
    <li>C#</li>
    <li value="11">PHP</li>
    <li>C++</li>
</

在这里插入图片描述

自定义列表:

1自定义列表不仅仅是一列项目,而是项目及其注释的组合。

自定义列表以 <dl标签开始。每个自定义列表项以 <dt 开始。每个自定义列表项的定义以 <dd 开始。

<head>
    <meta charset="UTF-8">
    <title>自定义列表</title>
</head>
<body>
<h2 align="center">三国演义简介</h2>
<dl>
    <td>时代背景</td>
    <dd>元末明初,社会矛盾尖锐,农民起义此起彼伏,群雄割据,多年战乱后朱元璋剿灭群雄,推翻元王朝,建立明王朝。期间人民流离失所,罗贯中作为一名杂剧和话本作者,生活在社会底层,了解和熟悉人民的疾苦,期望社会稳定,百姓安居乐业,作为底层的知识分子思考,并希望结束动荡造成的悲惨局面。由此就东汉末年的历史创作了《三国演义》这部历史小说。</dd>

    <td>题材来源</td>
    <dd>西晋陈寿所著《三国志》是三国故事的最早源头,但这是纪传体的史书,记事简略,粗陈梗概。南朝宋人裴松之为《三国志》作注,增加了许多奇闻轶事,传奇色彩与可读性都大大增强。中唐史学家刘知袭在《史通》中说,诸葛亮未死的故事已“得之于行路,传之于众口”,可见这个时期三国故事已广泛流传于民间。晚唐李商隐的《骄儿涛》中有“或谑张飞胡,或笑邓艾吃”的诗句,说明至迟在晚唐时三国故事已妇孺皆知,宋代通过艺人的表演说唱,三国故事更为流行,并且已经表现出“尊刘贬曹”的鲜明倾向。金元时代三国故事被大量地搬上舞台,院本和杂剧中有许多三国故事剧。据《录鬼簿》和《太和正音谱》记载,仅元杂剧中就有近三十种演述三国故事的作品。《辍耕录》中记载的金院本有《襄阳会》《大刘备》《骂吕布》和《赤壁鏖兵》等。元英宗至治年间(1321—1323)出现新安虞氏所刊的《全相三国志平话》,这是今存最早的,也是唯一一部以三国故事为题材的平话。该书是民间传说中
        三国故事的写定本,约八万字,分上中下三卷,每卷都分上下两栏,上栏图相,下栏正文。全书以司马仲相断狱故事为人话,正话从刘关张桃园结义开始,结束于诸葛亮病死。从平话的内容和结构看,已粗具《三国演义》的规模,但整体描写粗枝大叶,文词鄙陋不通,故事情节离奇,多不符合正史记载,人名地名也多谬误,似乎还是未经文人润色的民间艺人作品。从上述的记载和残留的作品看,从晚唐到元末,在民间流行的三国故事愈来愈丰富,这为《三国演义》的创作提供了充分的条件。</dd>

    <td>成书过程</td>
    <dd>元末明初,罗贯中在陈寿《三国志》和裴松之注的基础上,吸收民间传说和话本、戏曲故事,写成《三国演义》。现存最早刊本是嘉靖元年(1522年)刊刻的,称为嘉靖本,题“晋平阳侯陈寿史传,后学罗本贯中编次”。继嘉靖本之后,新刊本大量出现,它们都以嘉靖本为主,只做了些插图、考证、评点和文字的增删、卷数和回目的整理等工作。清康熙年间,毛纶、毛宗岗父子对嘉靖本《三国演义》作了一些修改,主要是整理回目,修正文辞。改换诗文等,内容没有大的改动。</dd>
</dl>

在这里插入图片描述
.希望不足之处大家指正,谢谢!!

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

HTML的无序列表、有序列表、自定义列表 的相关文章

  • HTML5本地存储

    1 背景 在HTML4 01中 想要在浏览器中存储用户的数据时 我们一般只能用Cookie来实现 不过Cookie有很多限制 大小限制 最大4KB 数量限制 每个站点只允许存储20个Cookie 如果想要存储更多Cookie 则要把旧的Co
  • 基于SSM 和 layui 的增删查改

    开发工具 IDEA 2021 WebStorm 2021 Mysql 8 0 开发环境 JDK 8 TomCat 8 5 81 apache maven 3 6 1 技术点 Spring SpringMVC Mybatis Mysql Ht
  • 在react中如何结合antd实现分页功能

    在react中如何结合antd实现分页功能 步骤如下 1安装antd npm i antd s 2在 src App css中引入 antd dist antd css import antd dist antd css 3在需要用分页器的
  • css改变svg颜色_如何使用CSS混合模式和SVG动态更改产品图像的颜色

    css改变svg颜色 To better explain that title right off the bat here s what we re about to learn and it s easier than you thin
  • 看天气WeatherCan V1.0 ---气象数据分析系统web版

    版权声明 本文为CSDN博主 老郭1 的原创文章 遵循CC 4 0 BY SA版权协议 转载请附上原文出处链接及本声明 原文链接 https blog csdn net HZGJF article details 104772394 Wea
  • EduCoder_web实训作业--JavaScript学习手册七:JS循环语句

    第一关 Begin var sum 0 var i 2 while i lt a var j 2 while j lt i if i j 0 能被整除 不是质数 break 不需要再判断 j 除数加1 继续测试是不是质数 if j i 还是
  • 微信H5如何关闭浏览器(如何监听手机的物理返回键)

    一 背景 背景是这样的 该项目进入h5时会通过 location replace xxx 或 location href xxx 跳转到某个地址 该地址会请求获得微信 openId 获取成功后再重定向到h5首页 那么问题来了 重定向会在微信
  • 动态一键换肤实现思路和demo

    前言 浏览器切换样式无非是通过css 总共有以下三种方法 内联style 注入style 注入link 那么我们想要实现一键换肤 那么我们为了剥离干净dom和css 我们只能选择style和link这两种方法 核心思路 在html的head
  • vue+element-ui el-tabs切换面板el-tab-pane切换

    在vue项目中 el tabs在页面的右侧显示 切换面板 下面的内容是正常显示的 效果如下 代码如下 父组件
  • 网页引用Font Awesome图标

    方法一 demo html
  • JavaScript基础Day02:流程控制

    文章目录 1 顺序结构 2 分支结构 1 if语句 2 switch语句 3 循环结构 1 while语句 2 do while语句 3 for循环 1 顺序结构 2 分支结构 1 if语句 if 条件表达式 执行语句 if 条件表达式 成
  • Saas-Export项目之部门数据回显(下拉框和单选框回显)

    Saas Export项目之部门数据回显 之前的经验 做数据回显一般就是在数据修改时需要查询出这条信息 然后再将数据拆分每一项逐一赋值在表单上 通常赋值就行 而且都是input type text这种类型的 所有只要在input里增加val
  • Vue中鼠标悬停更换图片/文字内容,动态展示/修改某些属性

    Vue中鼠标悬停更换图片 文字内容 动态展示 修改某些属性 鼠标悬停时 mouseenter 鼠标离开时 mouseleave 利用以上来绑定相应方法 例如 div 分别为鼠标悬停时和离开时绑定方法changeImageSrc 并传递参数
  • H5监听移动端物理/浏览器返回键

    JavaScript没有监听物理返回键的API 所以只能使用 popstate 事件监听 工具类如下 export function handleBrowserGoBack back console log back pushHistory
  • html文本元素

    文章目录 h p span pre code 实体字符 strong i em del s h h head 标题 一共有六级标题 hKaTeX parse error Expected got EOF at end of input 6
  • 通过点击按钮在页面添加图片

    点击添加按钮 在盒子中加入图片 点击图片实现删除图片效果 代码如下
  • WEB交互界面易用性设计和验收的指导性原则

    随着企业intranet和国际internet的迅速发展 越来越多的工作流程 商务交易 教育 培训 会议和讲座 以及个人消费娱乐都被转移到所谓的万维网 World Wide Web 以下简称WEB 上来了 与此相对应的是交互操作的复杂性越来
  • 三维实时重建BundleFusion

    转自 计算机视觉方向简介 深度相机室内实时稠密三维重建 知乎 室内场景的稠密三维重建目前是一个非常热的研究领域 其目的是使用消费级相机 本文特指深度相机 对室内场景进行扫描 自动生成一个精确完整的三维模型 这里所说的室内可以是一个区域 一个
  • 测试基础知识

    常见测试分类 按测试阶段划分 单元测试 针对程序源码进行测试 国内是开发自测 集成测试 又称接口测试 针对模块间的访问地址进行测试 系统测试 对整个系统进行测试 包括功能 兼容性 文档等 验收测试 分为内测和公测 按代码可见度划分 黑盒测试
  • 使用企业订货软件的担忧与考虑|网上APP订货系统

    使用企业订货软件的担忧与考虑 网上APP订货系统 网上订货系统担心出现的问题 1 如果在订货系统中定错 多 货物了该怎么办 其实这也是很多人在网购或者是现实中经常会犯的一个错误 但是网上订货平台为大家提供了很多的解决方案 其中对于订单的修改

随机推荐

  • JUC 十二. ReentrantReadWriteLock 与 StampedLock

    目录 一 基础 二 ReentrantReadWriteLock 的锁降级 三 StampedLock 邮戳票据锁 一 基础 ReentrantReadWriteLock 可以看为读读共享 读写 写写依然互斥 总结一句话 读写互斥 读读共享
  • 数字化时代-26:不要做数字空间的难民

    网络是人们新的生存空间 年轻人出生后就存在的空间 与人类社会原先的现实空间并存的人与人交流的空间 在这个空间中 没有自己位置的人 将成为未来社会的难民 年轻人 特别是毕业后的年轻人 需要思考 个人在数字空间中的落脚点和位置 数字原住民 在数
  • Ubuntu 20.04-NVIDIA显卡驱动-安装和卸载-解决黑屏问题

    这一步很重要 202300704更新 黑屏问题主要由linux内核更新导致 一定要保持当前的内核 也就是安装 NVIDIA 驱动时用的内核 sudo apt mark hold linux image generic linux heade
  • Cuda矩阵运算库cuBLAS介绍

    文章目录 简介 cuBLAS库新特性 cuBLAS代码热身 cublasSetMatrix cudaMalloc cublasSscal 源代码 cuBLAS 辅助函数 上下文管理 复制矩阵 数据类型标示 cuBLAS 运算函数 矩阵相乘
  • 有趣的 Async hooks 模块

    在 Node js 中 Async hooks 是一个非常有意思且强大的模块 虽然性能上存在一些问题 在 APM 中 我们可以借助这个模块做很多事情 本文介绍两个有趣的用法 AsyncLocalStorage 在 Node js 中 上下文
  • PaddlePaddle Hackathon 飞桨黑客马拉松热身赛上线!

    挑战自我 拓展技能 激发创新 挑战极限 再次相遇黑客松 我们期待你的加入 第五期 PaddlePaddle Hackathon 飞桨黑客马拉松热身赛上线 本次活动是面向全球开发者的深度学习领域编程活动 鼓励开发者了解和参与飞桨深度学习开源项
  • 如何制作一个简单的网页

    先创建一个文本文档 将后缀名改为 html 然后右击这个 选择打开方式 用记事本打开 开头与结尾要用来写 后一个要加 头部用head 中间部分用body 背景颜色用bgcolor 填一种颜色 字体颜色用text 填一种颜色 切记用英文 你如
  • ubuntu16.04 安装交叉编译工具aarch64-linux-gnu-gcc/g++

    前言 最近需要把人脸识别代码放到RK3399Pro的嵌入式板子上 所以编写好的c 代码要放到板子上编译 或者在ubuntu系统上使用交叉编译工具 编译好可执行文件在放到板子里运行 为了在能在ubuntu系统上能交叉编译 安装aarch64
  • 复杂场景下智能汽车目标检测心得体会

    提示 文章写完后 目录可以自动生成 如何生成可参考右边的帮助文档 文章目录 引言 一 复杂背景目标检测的复杂是什么 二 目标检测环境的复杂性包含哪些 三 复杂场景目标检测的目标复杂性包含哪些 四 复杂场景目标检测的算法复杂性包含什么 五 总
  • 微信小程序使用face++实现人脸识别登录注册

    Face 是一个 人工智能开放平台 要使用它我们得先注册并进入控制台创建API Key 这是前提 平台网址 https www faceplusplus com cn 整个项目代码我已经上传到网盘 链接 https pan baidu co
  • 高频面试题:服务器CPU占用过高怎么办?搞定只需简单7步

    一 前言 在Java开发岗位的面试中 时不时会出现一些运维类的题目 其实这也反映了后端面试的一种趋势 现在企业对后端开发的要求越来越全面 不仅要求我们会写代码 还要我们能够进行部署和运维 今天九哥就结合一个真实的项目案例 来给大家讲解一道关
  • C语言中局部变量和全局变量在内存中的存放位置

    C语言中局部变量和全局变量变量的存储类别 static extern auto register 1 局部变量和全局变量 在讨论函数的形参变量时曾经提到 形参变量只在被调用期间才分配内存单元 调用结束立即释放 这一点表明形参变量只有在函数内
  • 信号是如何传输的

    一 信号 信息 人对现实世界事物存在方式或运动状态的某种认识 数据 用于描述事物的某些属性的具体量值 信号 信息传递的媒介 一 信号的分类 1 模拟信号 模拟信号是信号参数 幅度 频率等 大小连续变化的电磁波 可以以不同的频率在媒体上传输
  • springboot + vue 前端时间字符串,后台LocalDateTime 参数接收方法

    前端格式以 2020 05 09 10 55 22 这样的格式传值 后台实体类LocalDateTime 添加注解 即可接收到值 DateTimeFormat pattern yyyy MM dd HH mm ss JsonFormat p
  • day4:最长回文子串

    文章目录 问题描述 思路 实现代码 问题描述 给定一个字符串 s 找到 s 中最长的回文子串 你可以假设 s 的最大长度为 1000 示例 1 输入 babad 输出 bab 注意 aba 也是一个有效答案 示例 2 输入 cbbd 输出
  • [医疗相关任务]

    药物研发 GLAM
  • 【Linux】IO多路复用--poll函数基本处理流程

    poll 函数在服务端流程图 当我们的已连接套接字时间就绪 也就是connfd已连接套接字读事件就绪时候 那么我们就要读取接受缓冲区的数据 但是我们不能保证我们一次读取就能够读完 所以我们需要循环读取 那么就需要在应用层设置一个该connf
  • c:Bubble Sort

    file SortAlgorithm h brief 业务操作方法 VSCODE c11 author geovindu Geovin Du date 2023 09 19 ifndef SORTALGORITHM H define SOR
  • Opencv dft & idft

    Load an image cv Mat inputImage cv imread argv argc 1 0 Go float cv Mat fImage inputImage convertTo fImage CV 32F FFT st
  • HTML的无序列表、有序列表、自定义列表

    HTML的无序列表 1 无序列表是一个项目的列表 此列项目使用粗体圆点 典型的小黑圆圈 进行标记 无序列表始于 ul 无序列表 ul type disc li HTML li li CSS li li li ul ul