列表相关元素及其属性

HTML5保留了如下几个列表相关元素:无序列表<ul>、有序列表<ol>、自定义列表<dl>

  1、<ul>:定义无序列表,可以指定id、style、class等属性,还可以指定onclick等事件属性。

  2、<ol>:定义有序列表,可以指定id、style、class等属性,还可以指定onclick等事件属性。除此之外,在HTML5规范中,该元素还可以指定如下三个属性

  • start:指定列表项的起始数字
  • type:指定使用哪种类型的编号,例如1代表使用数字,A或a分别代表用大写或小写字母,I或i代表使用大写或小写罗马数字。但该属性在HTML规范中已经不推荐使用了,推荐使用CSS来定义。
  • reversed:该属性指定是否将排序反转。该属性是HTML 5新增的属性。

例如如下代码:

<body><h2>定义反序的有序列表</h2><ol reversed="true"><li>薯片</li><li>牛奶</li><li>巧克力</li></ol><h2>定义从3开始的有序列表</h2><ol start="3"><li>薯片</li><li>牛奶</li><li>巧克力</li></ol><h2>定义使用小写字母编号的有序列表</h2><ol type="a"><li>薯片</li><li>牛奶</li><li>巧克力</li></ol><h2>定义使用小写罗马数字、从4开始的有序列表</h2><ol type="i" start="4"><li>薯片</li><li>牛奶</li><li>巧克力</li></ol>
</body>

其运行结果如下:

  3、<dl>:用于定义术语列表。自定义列表不仅仅是一列项目,而是项目及其注释的组合。自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始

  • <dt>:定义标题列表项。可以指定id、style、class等属性,还可以指定onclick等事件属性。该元素只能包含文本、图像、超链接、文本格式化元素和表单控件元素等
  • <dd>:定义普通列表项。该元素可以包含与<div../>完全类似的内容。

例如如下代码:

<body><h2>dt定义标题、dd定义解释</h2><dl><dt style="color:red;">Java</dt><dd>Java是一门广泛使用的、跨平台的开发语言</dd><dt style="color:red;">Java简介</dt><dd>Java是一门面向对象编程语言,不仅吸收了C  语言的各种优点,还摒弃了C  里难以理解的多继承、指针等概念,因此Java语言具有功能强大和简单易用两个特征。</dd><dd>Java语言作为静态面向对象编程语言的代表,极好地实现了面向对象理论,允许程序员以优雅的思维方式进行复杂的编程</dd></dl>
</body>

运行结果如下:


更多专业前端知识,请上 【猿2048】www.mk2048.com

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

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

相关文章

DB 数据同步到数据仓库的架构与实践

背景 在数据仓库建模中&#xff0c;未经任何加工处理的原始业务层数据&#xff0c;我们称之为ODS&#xff08;Operational Data Store&#xff09;数据。在互联网企业中&#xff0c;常见的ODS数据有业务日志数据&#xff08;Log&#xff09;和业务DB数据&#xff08;DB&#xf…

java log.error_Logger.error打印错误异常的详细堆栈信息

一、问题场景使用Logger.error方法时只能打印出异常类型&#xff0c;无法打印出详细的堆栈信息&#xff0c;使得定位问题变得困难和不方便。二、先放出结论Logger类下有多个不同的error方法&#xff0c;根据传入参数的个数及类型的不同&#xff0c;自动选择不同的重载方法。当e…

笔记本电脑怎么清理灰尘_手机声音越用越小怎么办?一段黑科技音波就能清理扬声器灰尘...

大家好&#xff0c;欢迎收看科技狐&#xff0c;我是小狐。我们都知道&#xff0c;随着手机的使用时间越来越长&#xff0c;手机扬声器里面会积赞一些灰尘。因此手机的声音就会变得越来越小。有时候连电话铃声都听不清楚&#xff0c;说实话我就是这个样子&#xff0c;为此我困扰…

Java方法中的参数太多,第8部分:工具

在我的系列文章的前七篇文章中&#xff0c;有关处理Java方法中期望的参数过多的内容集中在减少方法或构造函数期望的参数数量的替代方法上。 在本系列的第八篇文章中&#xff0c;我将介绍一些工具&#xff0c;这些工具可帮助您确定可能存在过多参数的情况&#xff0c;并在出现这…

predict函数 R_学习|R语言做机器学习的常用函数总结

预测函数&#xff1a;predict() type"prob"判别该量度的昆虫归类为A、B和C的概率&#xff1b;type"response"&#xff1a;判别该量度的昆虫的类别&#xff1b;预测分类的概率的函数predict(…, type)参数type&#xff1a;R语音里面不同模型&#xff0c;参数…

微信小程序:动画(Animation)

简单总结一下微信动画的实现及执行步骤。 一、实现方式 官方文档是这样说的&#xff1a;①创建一个动画实例 animation。②调用实例的方法来描述动画。③最后通过动画实例的 export 方法导出动画数据传递给组件的 animation 属性。 因为小程序是数据驱动的&#xff0c;给这句话…

SSM+solr 通过商品搜索学习solr的简单使用

学习了一下https://github.com/TyCoding/ssm-redis-solr这个github上的solr搜索功能&#xff0c;现在来记录一下。 我的理解就是solr有点类似于数据库&#xff0c;但它是有索引的数据库&#xff0c;按很多字段建立索引&#xff0c;可能是b树或者散列索引&#xff0c;然后就能够…

可以使用中文作为变量名_次氯酸可以作为伤口消毒使用吗?

次氯酸可以作为伤口消毒使用吗&#xff1f;次氯酸在经过2020年的洗礼&#xff0c;已然成为常态化&#xff0c;它对于人体是否有害&#xff0c;也是人们关注的焦点。对于那些还不太了解次氯酸的群体做一下简短科普。什么是次氯酸&#xff1f;次氯酸&#xff08;HCIO&#xff09;…

tomcat启动java项目_Java web项目启动Tomcat报错解决方案

点击运行项目时显示 A Java Exception has occurred.Starting Tomcat v9.0 Server at localhost has oncountered a problem.Server Tomcat v9.0 Server at localhost failed tostart.并显示以下两个弹框同时控制台报错org.apache.catalina.startup.Bootstraporg.apache.catali…

matlab 从 excel读取 日期_MATLAB批量修改文件名和选择性复制/剪切文件

今天解决的问题&#xff1a;1、如何利用MATLAB批量修改文件名&#xff1f;(前面写过一次bat命令法&#xff0c;这个应该也算一次改进&#xff0c;程序的初衷是想将Smartsolo导出的文件名批量修改为以炮点桩号为文件名)2、如何利用MATLAB选择性批量复制/剪切文件&#xff1f;(程…

CODE[VS] 1860 最大数 1998年NOIP全国联赛提高组

题目描述 Description设有n个正整数&#xff08;n≤20&#xff09;&#xff0c;将它们联接成一排&#xff0c;组成一个最大的多位整数。 输入描述 Input Description第一行一个正整数n。 第二行n个正整数&#xff0c;空格隔开。 输出描述 Output Description连接成的多位数。…

您基于JEE的Web项目的结构是什么?

在本文中&#xff0c;我将主要与JSF讨论基于Web的项目的各种组织结构。 开始新项目时&#xff0c;首先想到的是如何组织Java包&#xff1f; 想象一下&#xff0c;您开发了一个基于Web的用户和组管理系统。 很长时间以来&#xff0c;我使用以下Java包结构来将Bean类与模型类分开…

自定义scoll样式

使用伪类自定义scroll样式 效果&#xff1a; 代码&#xff1a; <!DOCTYPE html> <html><head><meta charset"utf-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0,maximum-scale1.0,minimum1.0,…

关于常用的编码工具如何引入jar包

myeclipse和eclipse&#xff08;差不多&#xff09;引入jar包&#xff1a; 普通项目&#xff1a; 1.对准你的项目创建一个文件夹名字尽量命名成lib&#xff08;注意要和src平级&#xff0c;不要在src下创建文件夹&#xff09;。 2.将下载好的依赖放到lib文件夹下&#xff0c; 3…

win10商店打不开_win10自带的照片查看器打不开的修复方法

我们知道win10或win7等系统都自带有默认的照片查看器&#xff0c;安装好系统后&#xff0c;我们再不用安装第三方看图软件来查看照片了&#xff0c;给我们玩电脑带来了极大的方便。但有些朋友近来向我求教照片查看器打不开&#xff0c;或打开很慢不正常的问题。下面我来跟大家介…

休眠事实:访存策略的重要性

在使用ORM工具时&#xff0c;每个人都承认数据库设计和实体到表映射的重要性。 这些方面引起了很多关注&#xff0c;而诸如获取策略之类的事情可能只是推迟了。 我认为&#xff0c;不应将实体获取策略与实体映射设计分开&#xff0c;因为除非经过适当设计&#xff0c;否则它可…

自定义checkbox样式

通过选中时添加背景图片自定义CheckBox样式 效果&#xff1a; CSS样式&#xff1a; <style type"text/css>label {width: 10%;display: flex;display: -webkit-flex;display: -moz-flex;flex-direction: row;justify-content: center;align-items: center;}label i…

安装步骤

1、安装node&#xff0c;安装全局webpack&#xff0c;npm init 生成package.json文件全局打包命令webpack b.js -o bundle.js旧版本的是webpack b.js bundle.js2、npm install webpack --save-dev 引入本项目webpack&#xff0c;package.json文件中会生成对应的webpack版本号…

fpu测试_I510400性能及温度测试详解

5月20号&#xff0c;INTEL将正式销售十代民用桌面级处理器&#xff0c;此次上市的型号相对9代与8代来说要多了很多型号&#xff0c;仅I9系列就有4个型号&#xff0c;下图有此次INTEL更新所有型号的参数&#xff1a;从上图参数可知&#xff0c;Intel有史以来I3~I9全部支持超线程…

ADFLogger的SLF4J绑定–缺少的部分

由于最好的原因&#xff0c;在我的日常工作中&#xff0c;我希望为ADF Logger Oracle ADF提供一个SLF4J适配器。 毫不奇怪&#xff0c;slf4j没有用于ADFLogger的适配器&#xff0c;但是由于ADFLogger只是Java Util Logging的轻巧包装&#xff0c;因此花了一个多小时来填补这一空…