HTML 列表 olullidldtdd
<ol>标签-有序列表
定义和用法:
<ol>标签定义有序列表。
HTML 与 XHTML 之间的差异
在 HTML 4.01 中,ol 元素的 "compact"、"start" 以及 "type" 属性是不被赞成使用的。
在 XHTML 1.0 Strict DTD 中,ol 元素的 "compact"、"start" 以及 "type" 属性是不被支持的。
属性:
reversed -- HTML5中的新属性。
值:reversed
reversed 属性是逻辑属性。
当使用该属性时,它规定列表属性为降序 (9, 8, 7...),而不是升序 (1, 2, 3...)。
目前只有 Chrome 和 Safari 6 支持 reversed 属性。
<ul>标签 -无序列表
定义和用法:
<ul> 标签定义无序列表。
HTML 与 XHTML 之间的差异
在 HTML 4.01 中,ul 元素的 "compact" 和 "type" 属性是不被赞成使用的。
在 XHTML 1.0 Strict DTD 中,ul 元素的 "compact" 和 "type" 属性是不被支持的。
提示和注释:
提示:请使用样式来定义列表的类型。
<li>标签 --列表项目
定义和用法:
<li> 标签定义列表项目。
<li> 标签可用在有序列表 (<ol>) 和无序列表 (<ul>) 中。
HTML 与 XHTML 之间的差异
在 HTML 4.01 中,li 元素的 "type" 和 "value" 属性是不被赞成使用的。
在 XHTML 1.0 Strict DTD 中,li 元素的 "type" 和 "value" 属性是不被支持的。
css样式:
1. list-style-type 属性设置列表项标记的类型。
值:
none | 无标记 |
disc | 默认。标记是实心圆。 (无序列表) |
circle | 标记是空心圆。 (无序列表) |
square | 标记是实心方块。 (无序列表) |
decimal | 标记是数字。 (有序列表) |
decimal-leading-zero | 0开头的数字标记。(01,02,03等。) (有序列表) |
lower-roman | 小写罗马数字(i,ii,iii,iv,v,等。) (有序列表) |
upper-roman | 大写罗马数字(I,II,III,IV,V,等。) (有序列表) |
lower-alpha | 小写英文字母(a,b,c,d,等。) (有序列表) |
upper-alpha | 大写英文字母(A,B,C,D,等。) (有序列表) |
lower-greek | 小写希腊字母(alpha,beta,gamma,等。) (有序列表) |
lower-latin | 小写拉丁字母(a,b,c,d,e,等。) (有序列表) |
upper-latin | 大写拉丁字母(A,B,C,D,E,等。) (有序列表) |
hebrew | 传统的希伯来编号方式。 (有序列表) |
armenian | 传统的亚美尼亚编号方式。 (有序列表) |
georgian | 传统的乔治亚编号方式(an,ban,gan,等。) (有序列表) |
cjk-ideoguaphic | 简单的表意数字。 (有序列表) |
hiragana | 标记是: a, i, u, e, o, ka, ki, 等。(日文片假名) (有序列表) |
katakana | 标记是:A, I, U, E, O, KA, KI, 等。(日文片假名) (有序列表) |
hiragana-iroha | 标记是:i, ro, ha, ni, ho, he, to, 等。(日文片假名) (有序列表) |
katakana-iroha | 标记是:I, RO, HA, NI, HO, HE, TO, 等。(日文片假名)(有序列表) |
ul.circle {list-style-type:circle;} ul.square {list-style-type:square;} ol.upper-roman {list-style-type:upper-roman;} ol.lower-alpha {list-style-type:lower-alpha;}
2. list-style-position 设置在何处放置列表项标记。
可能的值:
inside |
列表项目标记放置在文本以内,且环绕文本根据标记对齐。 |
outside |
默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外,且环绕文本不根据标记对齐。 |
inherit |
规定应该从父元素继承 list-style-position 属性的值。 注释:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。 |
说明
该属性用于声明列表标志相对于列表项内容的位置。外部 (outside) 标志会放在离列表项边框边界一定距离处,不过这距离在 CSS 中未定义。内部 (inside) 标志处理为好像它们是插入在列表项内容最前面的行内元素一样。
3. list-style-image 使用图像来替换列表项的标记。
可能的值:
URL |
图像的路径。 |
none |
默认。无图形被显示。 |
inherit |
规定应该从父元素继承 list-style-image 属性的值。 注释:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。 |
说明
这个属性指定作为一个有序或无序列表项标志的图像。图像相对于列表项内容的放置位置通常使用 list-style-position 属性控制。
注释:请始终规定一个 "list-style-type" 属性以防图像不可用。
ol{list-style-image:url("/i/arrow.gif");list-style-type:square;}
<dl>标签--定义列表
定义和用法:
<dl> 标签定义了定义列表(definition list)。
<dl> 标签用于结合 <dt> (定义列表中的项目)和 <dd> (描述列表中的项目)。
<dt>标签
定义和用法:
<dt> 标签定义了定义列表中的项目(即术语部分)。
<dt>标签表示内容块的标题。
<dd>标签
定义和用法:
<dd> 在定义列表中定义条目的定义部分。
<dd>标签表示内容块。
例子:效果图:
- 计算机
- 用来计算的仪器 ... ...
- 显示器
- 以视觉方式显示信息的装置 ... ...
<dl><dt>计算机</dt><dd>用来计算的仪器 ... ...</dd><dt>显示器</dt><dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>
dl dt dd 标签的用法
使用了dt dd最外层就必须使用dl包裹,此组合标签我们也又叫表格标签,与table表格类似组合标签,故名我们也叫dl表格。
为常用标题+列表型标签。如没有对dl dt dd标签初始CSS样式,默认dd列表内容会一定缩进。
首先dt和dd是放于dl标签内,标签dt与dd处于dl下相同级。也就是dt不能放入dd内,dd不能放入dt内。在dl下,dt与dd处于同级标签。DD标签可以若干。同时不能不加dl地单独使用dt标签或dd标签。
< dl></dl >用来创建一个普通的列表
< dt>< /dt>用来创建列表中的上层项目
<dd>< /dd>用来创建列表中最下层项目
< dt>< /dt>和< dd>< /dd>都必须放在< dl></dl >标志对之间。
解释下这里为什么说dt和dd分别创建上层和下层的项目。dt和dd如果不加浮动的话,是自己在一行的,也就是块元素。所以这里写的是上层和下层。
例子:
效果图:
body{font-size:12px; line-height:1.8; width:900px; marigin:auto;} *{margin:0; padding:0;} dl{width:350px; height:170px; padding:20px; marigin-left:20px; background:white; background-color:green;} dt{float:left; width:60px;} dd{float:left; width:290px;}
<dl> <dt>商品名称:</dt> <dd><strong>【好大的一只啊】</strong>优惠:<span>8.5折</span></dd> <dt>商品简介:</dt> <dd>商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称</dd> <dt>店铺地址:</dt> <dd>商品名称</dd> <dt>联系电话</dt> <dd>99999999999</dd>
浏览器兼容问题:
列表样式
IE默认为40px,通过ul、ol的margin属性设置
FF默认为40px,通过ul、ol的padding属性设置
dl无缩进,但起内部的说明元素dd默认缩进40px,而名称元素dt没有缩进。
要清除列表样式,一般可以设置
ul, ol, dd {
list-style:none; 这一句是取消列表样式。
margin:0;
padding:0;
}
转载于:https://www.cnblogs.com/zuihongyan/p/5651153.html
HTML 列表 olullidldtdd相关推荐
- 常用开源协议介绍以及开源软件规范列表
1. 开源协议介绍 GPL: General Public License,开源项目最常用的许可证,衍生代码的分发需开源并且也要遵守此协议.该协议也有很多变种,不同变种要求会略微不同. MPL: MP ...
- Go 中切片索引与 Python 中列表索引的差异
1. 索引编号超过对象的实际长度 1.1 Python 列表索引 Python 2.7.12 (default, Nov 12 2018, 14:36:49) [GCC 5.4.0 20160609] ...
- Redis 笔记(04)— list类型(作为消息队列使用、在列表头部添加元素、尾部删除元素、查看列表长度、遍历指定列表区间元素、获取指定区间列表元素、阻塞式获取列表元素)
Redis 的列表是链表而不是数组.这意味着 list 的插入和删除操作非常快,时间复杂度为 O(1),但是索引定位很慢,时间复杂度为 O(n). 当列表弹出了最后一个元素之后,该数据结构自动被删除, ...
- 路由器:访问控制列表
前言: 配置路由器全网互通后,更高级一点希望网络中的资源不被非法使用和访问. 出现了访问控制,访问控制是网络安全防范和保护的主要策略, 主要任务是保证网络资源不被非法使用和访问 它是保证网络安全最重要 ...
- 派生类参数初始化列表和基类构造函数顺序
今天被问到了一个问题,随便回了一句,父类还没有构建,怎么能初始化父类的成员. 派生类构造函数的参数初始化列表,为什么不能初始化基类的成员? 例如下面的是不可以的 class Rectangle : p ...
- 对列表去重并保持原来的顺序
首先,定义一个列表,即原列表: list1 = [0, 3, 2, 3, 1, 0, 9, 8, 9, 7]: 然后,使用set()对原列表去重list2 = list(set(list1)),得到[ ...
- 逗号分隔的字符串转换为Python中的列表 split
将逗号分隔的字符串转换为Python中的列表 给定一个字符串: 它是由逗号分隔的几个值的序列: mStr = '192.168.1.1,192.168.1.2,192.168.1.3' 如何将字符串转 ...
- python 列表生成式、lower()和upper()的使用
参考: http://www.liaoxuefeng.com/wiki/001374738125095c955c1e6d8bb493182103fac9270762a000/0013868196389 ...
- LeetCode简单题之两个列表的最小索引总和
题目 假设 Andy 和 Doris 想在晚餐时选择一家餐厅,并且他们都有一个表示最喜爱餐厅的列表,每个餐厅的名字用字符串表示. 你需要帮助他们用最少的索引和找出他们共同喜爱的餐厅. 如果答案不止一个 ...
- 2021年大数据常用语言Scala(十六):基础语法学习 列表 List 重点掌握
目录 列表 List 重点掌握 不可变列表定义 可变列表 列表常用操作 列表 List 重点掌握 列表是scala中最重要的.也是最常用的数据结构.List具备以下性质: 可以保存重复的值 有先后顺序 ...
最新文章
- 数据分析师必看:5大概率分布,你了解多少?
- 基于JavaSpringboot+Vue实现前后端分离房屋租赁系统
- Python实现机房管理软件的文件分发功能
- python 事务操作_Python实现连接mysql数据库及事务处理【冰斌棒】
- Say“No”,你学会了吗?
- c++ 创建txt,写log
- Atitit View事件分发机制
- cad快速看图能合并图纸吗_【CAD快速看图电脑版】合并图纸、2张图之间复制
- 一款基于 Python 语言的 Linux 资源监视器!
- 二维码扫码登录原理详解
- STM32串口3 映射和完全重映射 PB10 PB11 PD8 PD9 PC10 PC11
- 在MacOS系统下DMG文件显示压缩包无法双击安装解决办法
- Odroid XU4学习笔记
- 通过cv2.resize()来改变图片大小
- 第五章:用Python分析商品退单数据并找出异常商品
- 异或、或、与(且)的运算
- linux下usb充电问题,如何解决在Ubuntu上iPad不能充电的问题
- Java练习题12.1
- 准静态、静态、动态(动力学分析)
- 升鲜宝V2.0_生鲜配送行业,对生鲜配送行业的思考及对系统流程开发的反思_升鲜宝生鲜配送系统_15382353715_余东升...
热门文章
- LINUX下载及编译libtool
- SHELL下把一个文件附加到另外一个文件,注意编码问题
- 南宁公交有两个应用付费通道,互不通用
- C# XML加载屏蔽注释 忽略注释的加载
- 斜度符号标注_机械图纸尺寸标注规则
- 常用的html语言,常用的HTML语言标记
- python开发app1001无标题_Python代写:CSSE1001 Dots Co帮做Python编程作业
- 人眼分辨 PPI_1080P=2K,分辨率≠清晰度?关于显示器大多数人都错了
- java invokevirtual_Java | 深入理解方法调用的本质(含重载与重写区别)
- HTML中标签的ref属性,itemref(属性) | itemref (attribute)