视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
html列表快速预览
2020-11-27 15:24:56 责编:小采
文档


列表是一种非常有用的数据展现方式,可以扩展出非常多的有意思的功能,例如导航,布局等。

列表主要有三种:

1. 无序列表: <ul>标签,必须与<li>子标签配对使用

2. 有序列表: <ol>标签,与<ul>使用规则一样,可以看作是无序列表的一个特例,实际开发中使用不多

3. 自定义列表: <dl><dt><dd>非常像名词解释,用途非常广泛,例如底部导航,内容详情页,联系信息,商品描述等.

ul有一个属性type,可以设置列表项前面的标记

type="disc" 实心小黑点,这是默认一级列表的标记

type="circle" 空心小圆点,这是二级列表默认标记

type="square" 实心方块

<html>
<head>
<meta charset="UTF-8">
<title>1-1.列表快速预览</title>
</head>
<body>
<ul type="square">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>Bootstrap</li>
</ul>
<hr>
<h4>单身狗的周未</h4>
<ol>
<li>自己请自己看场电影希望有艳遇</li>
<li>购买娃2个</li>
<!-- 列表是可以嵌套的 -->
<ul>
<li>冰冰款2个</li>
<li>凤姐款1个</li>
</ul>
<li>玩"吃鸡"</li>
<li>为心目中的女主播打Call</li>
</ol>
<hr>
<h4>后端编程语言:</h4>
<dl>
<dt>PHP</dt>
<dd>超文本预处理编程语言</dd>
<dt>MySQL</dt>
<dd>全球最流行的关系型数据库管理工具</dd>
<dt>ThinkPHP5.1</dt>
<dd>国内最流行的中文轻量级PHP开发框架</dd>
</dl>
</body>
</html>

下载本文
显示全文
专题