php中的ol标签,html5中ol标签的用法详解

这篇文章主要介绍了详解HTML5中ol标签的用法,是HTML5入门学习中的基础知识,需要的朋友可以参考下

定义和用法

  1. 标签定义有序列表。

HTML 4.01 与 HTML 5 之间的差异

在 HTML 4.01 中,不赞成使用 "start" 属性,在 HTML 5 中是允许的。

在 HTML 4.01 中,不赞成使用 "compact" 和 "type" 属性,在 HTML 5 中,不再支持这两个属性。

提示和注释

提示:请使用 CSS 来定义列表的类型。

例子

  1. Coffee
  2. Tea
  1. Coffee
  2. Tea

9758ccde548d49927f99af90d629c7b5.png

HTML5提供的OL标签序号控制OL这标签是以有序列表的形式来显示数据的,它会自动为数据加上编号。但是有时候数据并不是从1开始编号的,或者编号是倒序排列的,又或者编号是完全杂乱的,这时就需要用到HTML5中对OL标签提供的一些参数来设置。不过遗憾的是,目前它还不兼容IE。

现在,我们有一个这样的HTML文档

  1. 土豆
  2. 洋葱
  3. 胡萝卜
  4. 里脊肉

它会显示成这样

7eff4c60eb80bbb0b4879efdc0e6a1ee.png

这些序号默认是从1开始递增的。如果需要让OL标签中的序号倒序排列呢?这只要对OL加个reserved属性即可。

这个是继承自XHTML的写法,其实可以直接写

这就已经符合HTML5的标准了,加上这个后就可以得到这样的结果

3a00a1c87b6d9c38a11a3985fac2b13e.png

Chrome和Firefox中都是没问题的,但是IE不兼容它(至少我测试了IE10是不兼容的)。嘛,咱现在只是了解一下这个功能,至于IE实不实现暂时就不再讨论了。

接着,如果不想让它从1开始呢?比如要让它从3开始,我们就可以给OL标签添加start属性,并设置为3。

e0537bba91b6f4eb7e6f6a866cc70543.png

最后,对于完全无规律却又是有序的东西怎么做呢?比如我要2、1、3、4,这样的排列怎么办?其实,只要给LI加上value属性就可以控制这个序号。

  1. 土豆
  2. 洋葱
  3. 胡萝卜
  4. 里脊肉

278bdeb78636d4e13e450f0106d6ded3.png

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

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

相关文章

portlet_平台策略:从Portlet到OpenSocial小工具再到渐进式Web应用程序:最新技术

portlet介绍 由于世界仍在Java的掌控之中,因此我们经常定义所谓的基于组件的平台 。 我在2000年拥有OpenUSS(开放大学支持系统)的经验。 当时我有一个想法,就是开发一个可以使用组件体系结构和J2EE技术​​( OpenUSS C…

MySQL JDBC URL各参数详解

通常MySQL连接URL可以设置为: jdbc:mysql://localhost:3306/test?userroot&password123456&useUnicodetrue&characterEncodinggbk &autoReconnecttrue&failOverReadOnlyfalse&serverTimezoneUTC&drivercom.mysql.cj.jdbc.Driver注&am…

keil5函数 默认返回值_C++ 函数的定义

“ C对于函数的基本用法”01—函数的定义//函数声明:[返回值类型] [函数名称] (参数列表)int Function(int a, int b);//函数定义int Function(int a, int b){ //函数体 return a b;}02—函数的默认参数定义函数时可以在参数列表中为形参指定默认值int Function2…

apc php7,深入解析php之apc

apc定义:apc是一个开放自由的php opcode缓存。它的目标是提供一个自由、开放和健全的框架,用于缓存和优化php中间代码。apc常用函数:1.apc_clear_cache() 清楚apc缓存内容2.apc_define_constants(string key,array constants,[,bool case_sen…

Apache NetBeans?

在JavaOne之前的几天和几周内发布有关Java世界的重要公告是很常见的。 考虑到这一点,不足为奇的是,我们在下周开始的JavaOne 2016之前看到了一些与Java有关的重要公告。 马克莱因霍尔德 ( Mark Reinhold )的JDK 9计划变更提案是一…

已经创建了AWS EC2实例,Linux系统默认没有root用户,那么如何创建root用户并更改为root用户登录呢?

文章目录1. 如何创建ROOT及设置密码2.更改登陆方式,采用ROOT用户登陆a. 编辑EC2实例的ssh登录方式b. 再编辑authorized_keys文件,将ssh-rsa 前面的文字全部删除,确保ssh-rsa没有任何文字,包括空格。3. 重新登陆对于刚创建AWS EC2实…

输入一个正整数求所有素数因子_一起来聊聊素数的两个性质

素数(prime number),又称质数,有无限个。定义:在大于1的自然数中,除了1和它本身以外不再有其他因数。来介绍两个简单的性质:质数的个数是无穷的。欧几里得的《几何原本》曾有一经典证明,用的是反证法。当然…

基于docker微服务架构_使用基于微服务的流架构更好地进行大规模的复杂事件处理(第1部分)...

基于docker微服务架构基于微服务的流架构与开源规则引擎相结合,使实时业务规则变得容易 这篇文章旨在详细介绍我将OSS业务规则引擎与Kafka风格的现代流消息传递系统集成在一起的项目。 该项目的目标(即众所周知的复杂事件处理(CEP&#xff0…

php怎样下载网上的文件,php怎样实现文件下载

用head() 和 fread()函数把文件直接输出到浏览器。具体代码&#xff1a;<?php $file_name "down";$file_name "down.zip"; //下载文件名$file_dir "./down/"; //下载文件存放目录//检查文件是否存在if (! file_exists ( $file_dir . $fil…

Windows 系统下,移动硬盘无法识别怎么修复?

方案1&#xff1a;移动硬盘没有驱动器号 有时移动硬盘插入计算机&#xff0c;但无法在我的计算机上显示。此时&#xff0c;可能只是因为移动硬盘没有驱动器号。 右键单击此计算机&#xff08;计算机&#xff09;&#xff0c;然后单击[管理]将其打开。 点击左边的[磁盘管理]&a…

欢乐鼠标自动点击器_使用ESP32 DIY蓝牙自动点击器,滑屏器

前言因为爱薅羊毛&#xff0c;然后正好最近免费车一趟接一趟&#xff0c;咪咕开完&#xff0c;京东开&#xff0c;京东开完掌阅开&#xff0c;下一个不知道是谁&#xff0c;&#xff0c;&#xff0c;&#xff0c;可我又不是什么很有耐心的人&#xff0c;虽然我喜欢看书&#xf…

java单词按字典排序_最终Java日志字典:开发人员最常记录的单词是什么?

java单词按字典排序最终的记录字典&#xff0c;或者&#xff1a;我们记录的最常见单词是什么&#xff1f; 日志文件是调试应用程序的最常用方法&#xff0c;当解决错误时&#xff0c;它们肯定可以引导我们朝正确的方向发展。 但是&#xff0c;大多数日志文件每天都会增加一百万…

winscp使用密钥登录远程linux系统

说明&#xff1a; WinSCP是一个Windows环境下使用SSH的开源图形化SFTP客户端。同时putty也是一个开源连接ssh的windows客户端&#xff0c;本文介绍puttyWinSCP密钥对登录linux服务器。 1. 创建密钥对 安装openssl yum –y install openssl #openssl一般服务器都会预装 创建密…

php api 实例maccms,苹果cmsV10API接口说明

api接口仅供提供数据&#xff0c;可以直接在苹果CMS后台联盟采集中加入-并提供给他人采集。联盟资源分配唯一标识ID&#xff0c;用来区别绑定分类&#xff0c;这个ID一般由苹果CMS官方提供&#xff0c;不可随意修改设置&#xff0c;否则造成入库分类错乱。视频接口同时支持老板…

dml语句包括哪些_聊聊MySQL基本操作DDL,DML,DQL,DCL

本篇文章来回顾一下MySQL的基本操作之DDL&#xff0c;DML&#xff0c;DQL&#xff0c;DCL&#xff0c;每种操作都有各自不同的语法&#xff0c;常用的操作汇总如下。一、DDL-数据定义语言作用&#xff1a;数据定义语言主要用来定义数据库中的各类对象&#xff0c;包括用户、库、…

Windows 系统下使用 putty 客户端通过 SSH 远程连接 AWS 服务器

找到在购买亚马逊的AWS服务器时保存的密钥文件&#xff08;假设为abc.pem&#xff09;。 打开PuTTYgen&#xff0c;如下图&#xff0c;点击图中1处的“load”,找到abc.pem文件所在的位置&#xff0c;并选择abc.pem&#xff0c;确定&#xff1b; 然后&#xff0c;选择图中2处…

ip integrator_使用Oracle Data Integrator(和Kafka / MapR流)完善Lambda体系结构

ip integrator“ Lambda体系结构是一种数据处理体系结构&#xff0c;旨在通过利用批处理和流处理方法来处理大量数据。 这种体系结构方法尝试通过使用批处理提供批处理数据的全面而准确的视图&#xff0c;同时使用实时流处理提供在线数据的视图来平衡延迟 &#xff0c; 吞吐量和…

php 如何获取函数类型,PHP如何使用gettype()函数判断变量的类型?

gettype()函数是PHP中的一个内置函数&#xff0c;用于获取变量的类型&#xff1b;它可用于检查现有变量的类型。下面本篇文章就来给大家介绍一下gettype()函数&#xff0c;希望对大家有所帮助。【视频教程推荐&#xff1a;PHP教程】基本语法string gettype ( $var )参数&#x…

qfile 创建文件_Qt之二进制文件读写

点击上方“Qt学视觉”&#xff0c;选择“星标”公众号重磅干货&#xff0c;第一时间送达想要学习的同学们还请认真阅读每篇文章&#xff0c;相信你一定会有所收获除了文本文件之外&#xff0c;其他需要按照一定的格式定义读写的文件都称为二进制文件&#xff0c;每种格式的二进…

cloud foundry_实际的Reactor操作–检索Cloud Foundry应用程序的详细信息

cloud foundryCF-Java-Client是一个库&#xff0c;可通过程序访问Cloud Foundry Cloud Controller API 。 它建立在Project Reactor之上&#xff0c;它是Reactive Streams规范的实现&#xff0c;并且使用此库在Cloud Foundry环境中做一些实际的事情是一个有趣的练习。 考虑一个…