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

2021-12-12 23:35:08 阅读：119 来源： 互联网

一、列表标签(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)、该标签的作用:自定义列表不仅仅是一列项目，而是项目及其注释的组合。该标签可以实现图文的混排效果。

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

标签：ol,标签,li,语法,HTML5,列表,前端开发,属性
来源： https://blog.csdn.net/u013185175/article/details/121895501

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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