学习随笔——HTML列表——2020.11.11

学习随笔——HTML列表——2020.11.11

（一）无序列表ul（unordered list）
1.定义：无序列表就是列表项没有先后顺序的列表形式
li————list item 列表项
2.语法：

<ul 属性1="属性值" 属性2="属性值">
	<li>无序列表项</li>
</ul>

3.属性：type（类型）

• 空心圆：circle
• 黑色方块：square
• 实心圆：disc（默认）
  li不能单独存在，必须包裹在ul里面
  反过来说，ul的子元素不能是别的元素，只能是li，但li里边是不限的

（二）有序列表ol（ordered list）
1.定义：有序列表就是列表有先后顺序的列表形式
2.语法：

<ol 属性1="属性值" 属性2="属性值">
	<li>有序列表项</li>
</ol>

3.属性：

1. type（类型）
   type=“1”（默认）,“a”,“A”,“i”,“罗马数字”

2. reversed属性：有序列表反向（H5新属性）
   用于指定列表倒序显示
   ==reversed = “reversed”

3. start = “10”
   从第10个序列开始排序

（三）自定义列表dl（definition list,defined list）
1.定义：自定义列表不仅仅是一列选项，而是项目的目标项及其注释的组合（defined title,defined description）
2.语法：

<dl>
	<dt>标题</dt>
	<dd>描述</dd>
	....
	<dt>标题</dt>
	<dd>描述</dd>
</dl>

（四）列表样式
1.list-style-type（列表项标记样式）

• none：无
• disc：空心圆
• circle：实心圆
• square：实心方块
• decimal：数字
• decimal-leading-zero01开头数字
• lower-roman小写罗马数字开头
• upper-roman大写罗马数字开头
• lower-alpha小写英文字母开头
• upper-alpha大写英文字母开头

2.list-style-position（列表项标记的位置）

• inside：列表项目标记放置在文本以内，且环绕文本根据标记对齐
• outside：默认值，保持标记位于文本的左侧，列表项目标记放置在文本以外，且环绕文本不根据标记对齐

3.list-style-image（用图像替代列表项标记）

• url() 列表图像地址
• none 默认

以上三个属性都会在不同浏览器下产生不完全一致的效果，因此都不常使用

4.list-style 简写形式（用list-style属性在同一个声明中设置所有的列表属性）

• 可以设置的属性（按顺序）：list-style-type,list-style-position,list-style-image
• 默认值是 list-style：disc outside node
• 如果是list-style：none 则表示无列表标记