HTML项目符号(无序列表)
网页中的列表随处可见,比如新闻页面随处可见这样的列表
这些列表就可以使用ul-li标签来完成。ul-li是没有前后顺序的信息列表。
下面,我们来实现这样的效果
语法:
<ul >
<li>内容1</li>
<li>内容2</li>
<li>内容3</li>
</ul>
<ul>或<li>的常用属性
type:项目符号的类型,取值:disc(小黑点)、circle(空心圆)、square(实心方块)
实例:
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <ul type="square"> <li>三星在大陆召回19万台Note7手机 可全额退款</li> <li>国土部等5部委:进城落户人口人均用地不超1百平米</li> <li>13位科学家实名呼吁对韩春雨启动调查:为学界名声</li> </ul> </body> </html>
注:在HTML标记中,内容应该放在最底层标记中。
HTML编号列表(有序列表)
网站之中还有这样的列表
这类信息展示就可以使用<ol>标签来制作有序列表来展示。
语法:
<ol>
<li>……</li>
<li>……</li>
<li>……</li>
</ol>
<ol>或<li>的常用属性
type:编号类型,取值:1、a、A、i、I
start:从第几个开始编号(数字)。
改造上面一个例子:
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <ol type="1" start="1"> <li>三星在大陆召回19万台Note7手机 可全额退款</li> <li>国土部等5部委:进城落户人口人均用地不超1百平米</li> <li>13位科学家实名呼吁对韩春雨启动调查:为学界名声</li> </ol> </body> </html>
注:大家可以尝试改变属性的值,看看输出有什么变化
下一节