前端开发_HTML5_标签部分(三)

一、列表标签(ul-li/ol-li/dl-dt-dd)

      1.无序列表:ul-li
      (1)、该标签的作用:无序列表的作用是使得每一个项没有顺序之分进行排列,而在每个项目文字之前,使用符号作为对应的分项标记。
      (2)、标签语法以及相关的属性

标签语法以及相关的属性

<ul type="符号显示设置">
	<li>列内容1</li>
	<li>列内容2</li>
	...
</ul>

相关的属性:
type:该属性用于指定列表项的开始的符号,取值为disc(默认值,实心圆点)、circle(空心圆)、square(实心正方形)

 (3)、ul/li标签的代码使用以及效果

        学生姓名:
		<ul>
			<li>张三</li>
			<li>李四</li>
			<li>王五</li>
			<li>王麻子</li>
		</ul>
		喜欢吃的水果:
		<ul type="circle">
			<li>苹果</li>
			<li>石榴</li>
			<li>葡萄</li>
			<li>火龙果</li>
		</ul>
		最喜欢的图书:
		<ul type="square">
			<li>百年孤独</li>
			<li>了不起的盖茨比</li>
			<li>呼啸山庄</li>
			<li>傲慢与偏见</li>
		</ul>

2.有序列表:ol-li

(1)、该标签的作用:有序列表使用编号编排项目,而不是项目符号。列表的项目采用数字或者是英文字母开头,按照大小对列表项进行排版。 

(2)、标签语法以及相关的属性

标签语法 
<ol type="符号显示设置" start="设置开始项值">
	<li>列内容1</li>
	<li>列内容2</li>
			...
</ol>
		
常用属性 
type:用于设置序列类型,一般取值有1(数字1)、a(小写字母a)、A(大写字母A)、i(小写罗马数字)和I(大写的罗马数字)。
start:用于设置序列的开始值,这一个参数只对数字有效。

(3)、ol/li标签的代码使用以及效果

       学生成绩排名
		<ol>
			<li>张三</li>
			<li>李四</li>
			<li>王五</li>
			<li>王麻子</li>
		</ol>
		想吃的水果顺序:
		<ol type="A">
			<li>苹果</li>
			<li>石榴</li>
			<li>葡萄</li>
			<li>火龙果</li>
		</ol>
		想欢的图书:
		<ol type="1" start="10">
			<li>百年孤独</li>
			<li>了不起的盖茨比</li>
			<li>呼啸山庄</li>
			<li>傲慢与偏见</li>
		</ol>

 3.自定义列表:dl-dt-dd

  (1)、该标签的作用:自定义列表不仅仅是一列项目,而是项目及其注释的组合。该标签可以实现图文的混排效果。

扫描二维码关注公众号,回复: 13544191 查看本文章

(2)、标签语法以及相关的属性

猜你喜欢

转载自blog.csdn.net/u013185175/article/details/121895501
今日推荐