html--列表

html列表

有序列表

在网页上定义一个有编号的内容列表可以用<ol>、<li>配合使用来实现，代码如下：

<ol>
    <li>列表文字一</li>
    <li>列表文字二</li>
    <li>列表文字三</li>
</ol>

在网页上生成的列表，每条项目上会按1、2、3编号，有序列表在实际开发中较少使用。

无序列表

在网页上定义一个无编号的内容列表可以用<ul>、<li>配合使用来实现，代码如下：

<ul>
    <li>列表文字一</li>
    <li>列表文字二</li>
    <li>列表文字三</li>
</ul>

在网页上生成的列表，每条项目上会有一个小图标，这个小图标在不同浏览器上显示效果不同，所以一般会用样式去掉默认的小图标，如果需要图标，可以用样式自定义图标，从而达到在不同浏览器上显示的效果相同,实际开发中一般用这种列表。

定义列表

定义列表通常用于术语的定义。<dl>标签表示列表的整体。<dt>标签定义术语的题目。<dd>标签是术语的解释。一个<dl>中可以有多个题目和解释，代码如下：

<h3>前端三大块</h3>
<dl>
    <dt>html</dt>
    <dd>负责页面的结构</dd>

    <dt>css</dt>
    <dd>负责页面的表现</dd>

    <dt>javascript</dt>
    <dd>负责页面的行为</dd>

</dl>
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>列表</title>
</head>
<body>
<h1>有序列表</h1>
<!-- 有序列表快捷键：ol>li*3  +TAB键-->
<ol>
    <li>学习html</li>
    <li>学习css</li>
    <li>学习javascript</li>
</ol>

<h1>无序列表</h1>
<!-- 有序列表快捷键：ul>(li>a)*4  +TAB键-->
<ul>
    <li><a href="https://www.baidu.com/">新闻素材一</a></li>
    <li><a href="https://www.baidu.com/">新闻素材一</a></li>
    <li><a href="https://www.baidu.com/">新闻素材一</a></li>
    <li><a href="https://www.baidu.com/">新闻素材一</a></li>
</ul>

<h1>定义列表</h1>
<!-- 有序列表快捷键：dl>(dt+dd)*3  +TAB键-->
<dl>
    <dt>html</dt>
    <dd>负责页面的结构</dd>

    <dt>css</dt>
    <dd>负责页面的表现</dd>

    <dt>javascript</dt>
    <dd>负责页面的行为</dd>
</dl>

</body>
</html>

 

posted on 2019-10-29 21:56  cherry_ning  阅读(142)  评论(0)    收藏  举报

导航