HTML的列表标签
HTML的列表标签
HTML中的列表标签主要是分为三大类,分别为:有序列表,无序列表和自定义列表;
此次内容对而言比较简单,
源代码如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>列表</title>
<meta name="keywords" content="无序,有序,自定义">
<meta name="descrption" content="今天讲的是列表">
<!-- 样式, 让页面变美的地方 -->
<style type="text/css">
li{
/* list-style:none; */ /* 这个是设置后边列表中的序号为空 */
}
</style>
</head>
<body>
<!--列表
无序列表
ul>li ul的子集一定是li 其他的可以嵌套在li中
li代表列表项
ul 自带外边距,内边距
有序列表
自定义列表
-->
这是一<br/> <!-- br是换行标签,其中斜杠可以在前可以在后,也可以不写 -->
这是一<br/>
这是一<br/>
<!-- 标签特性:ul外边距,内边距
属性:
type:列表样式
disc“实心圆(默认)
cricle:空心圆
square:方块
使用场景:通常用于导航,菜单,列表等布局 -->
<ul type="circle" style="font-size:20px;"> <!-- type和style都是属性,属性之间用空格隔开,font(是)size(大小) -->
<li type="disc">这是一</li>
<li>这是二</li>
<li>
<b>这是三</b>
</li>
</ul>
<!-- 属性:
type:列表样式
a:字母
1:数字
i:罗马数字
使用场景:使用较少,可用于目录等 -->
<ol type="a">
<li><b>我是一</b></li>
<li>我是二</li>
<li>我是三</li>
<li>这是四</li>
</ol>
<!--
自定义列表
标签特性:dl默认边距,dd默认外边距
属性:
type:列表样式
disc:实心圆(默认)
cricle:空心圆
square:方块
使用场景:常用与上下(左右)的图文区域布局,标题-内容区块 -->
<dl>
<dt>谷某人</dt> <!-- 会向右靠齐 类似标题-->
<dd>谷某人毕业于天津中德应用技术大学</dd><!-- 首行缩进两个字符 -->
</dl>
</body>
</html>
制成网页如下:
总而言之,在今后的运用中,根据事实情况而言来选择不同的列表方式。