前端入门-html 列表

篇介绍了html 中文本格式及段落等标签，今天说下列表，什么是列表？它就是一种数据排列方式，以条列式的方式显示文本，使读者一目了然。列表主要有以下三种：

无序列表
有序列表
定义列表

无序列表 —— ul

无序列表在每行开始位置显示一个符号，语法如下：

<html>
<body>
<h4>一个无序列表：</h4>
<ul>
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ul>
</body>
</html>

显示效果：

无序列表的符号可以通过在ul 标签上设置 type 属性显示不同的符号，比如：

1、disc —— 实心圆点 (默认类型)
2、circle —— 空心圆圈
3、square —— 实心方块

实例代码：

<html>
<body>
<h4>一个无序列表：</h4>
<ul type="disc">
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ul>
<h4>一个无序列表：</h4>
<ul type="circle">
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ul>
<h4>一个无序列表：</h4>
<ul type="square">
  <li>咖啡</li>
  <li>茶</li>
  <li>牛奶</li>
</ul>
</body>

显示效果：

有序列表 —— ol

有序列表使用数字或字母符号排列，表示文本按一定顺序显示，语法如下：

<!DOCTYPE html>
<html>
<body>
<ol>
  <li>咖啡</li>
  <li>牛奶</li>
  <li>茶</li>
</ol>
</body>
</html>

效果如下：

同无序列表一样，在ol上通过type 属性设置使用那种符号表示顺序，有以下几种：

1、1，表示数字 1、2、3..... （默认数字）
2、a，表示小写字母 a、b、c....
3、A，表示大写字母 A、B、C ....
4、i，表示小写罗马字母 i、ii、iii、iv....
5、I，表示大写罗马字母 I、II、III、IV....

显示效果如下：

html代码：

<!DOCTYPE html>
<html>
<body>
数字
<ol type="1">
  <li>咖啡</li>
  <li>牛奶</li>
  <li>茶</li>
</ol>
小写字母
<ol type="a">
  <li>咖啡</li>
  <li>牛奶</li>
  <li>茶</li>
</ol>
大写字母
<ol type="A">
  <li>咖啡</li>
  <li>牛奶</li>
  <li>茶</li>
</ol>
小写罗马字母
<ol type="i">
  <li>咖啡</li>
  <li>牛奶</li>
  <li>茶</li>
</ol>
大写罗马字母
<ol type="I">
  <li>咖啡</li>
  <li>牛奶</li>
  <li>茶</li>
</ol>
</body>
</html>

有序列表还可以通过start 属性设置起始数组，如下：

<ol  start="3">
  <li>咖啡</li>
  <li>牛奶</li>
  <li>茶</li>
</ol>

显示效果：

定义列表——dl

不同以上2种列表，定义列表主要用来解释名词，由2种层次列表显示，第一层是被解释的名词，第二层是详细地解释文字，语法如下：

<html>
<body>
<h2>一个定义列表：</h2>
<dl>
   <dt>计算机</dt>
   <dd>用来计算的仪器 ... ...</dd>
   <dt>显示器</dt>
   <dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>
</body>
</html>

显示效果：

第一行<dt>是要解释的名词，第二行标签<dd>是解释文本，会自动缩进。

列表的嵌套

以上三种列表是可以嵌套使用的，看如下示例：

<html>
<body>
<h4>一个嵌套列表：</h4>
<ul>
  <li>咖啡</li>
  <li>茶
    <ul>
    <li>红茶</li>
    <li>绿茶</li>
    </ul>
  </li>
  <li>牛奶</li>
</ul>
</body>
</html>

效果：

每嵌套一层，它的符号是不一样的，你可以试试再嵌套一层看看效果。

当然，不同列表类型也可互相嵌套，根据显示效果可以自由使用，一般建议不要这样使用，不同类型列表显示在一块不是很美观。如下面无序列表中嵌套有序列表：

<html>
<body>
<h4>一个嵌套列表：</h4>
<ul>
  <li>咖啡</li>
  <li>茶
    <ul>
    <li>红茶</li>
    <li>绿茶
      <ol>
      <li>中国茶</li>
      <li>非洲茶</li>
      </ol>
    </li>
    </ul>
  </li>
  <li>牛奶</li>
</ul>
</body>
</html>

效果如下：

总结

列表是网页制作中经常会使用的标签，比如在制作网页导航栏菜单时会经常用到ul列表，以后会讲如何通过ul标签制作一个下拉菜单，感谢您阅读及关注，祝你学习愉快。

上篇：前端入门——html 文字格式、标题与段落

下篇：前端入门——html 超链接

章我们给大家讲解一下什么是css选择器？css3中5种常见的基本选择器。有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

一：什么是css选择器？

CSS是一种用于屏幕上渲染html，xml等一种语言，CSS主要是在相应的元素中应用样式，来渲染相对应用的元素，那么这样我们选择相应的元素就很重要了，如何选择对应的元素，此时就需要我们所说的选择器。在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。选择器主要是用来确定html的树形结构中的DOM元素节点。

二：css3中5种常见的基本选择器

css3中的选择器种类有很多，下面介绍的是5种常见的基本选择器：通配选择器，类选择器，元素选择器， ID选择器和群组选择器。

1.通配符选择器（所有浏览器支持）
通用选择器用*来表示，用来选择所有元素，，也可以选择某个元素下的所有元素；

*{marigin: 0;
 padding: 0;
 font-size: 14px;
}

上面代码大家在reset样式文件中看到的肯定不少，他所表示的是，所有元素的margin和padding都设置为0，字体大小都设置为14px,另外一种就是选择某个元素下的所有元素：

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>通配符选择器</title>
 <style>
 .demo * {
 width: 50px;
 height: 50px;
 border:1px solid blue;
 margin: 10px;
 }
 </style>
 </head>
 <body>
 <div class="demo">
 <div>1</div>
 <p>2</p>
 <span>3</span>
 </div>
 </body>
</html>

效果图：

我们可以看到在demo元素里的三个子元素div，p，span都是分别没有设置css样式的，但只要我们设置了demo元素下的所有元素的统一样式，那么demo元素里的三个子元素div，p，span就会出现样式。

对了，在这里说一下，我目前是在职web前端开发，如果你现在正在学习前端，了解前端，渴望成为一名合格的web前端开发工程师，在入门学习前端的过程当中有遇见任何关于学习方法，学习路线，学习效率等方面的问题，都可以随时关注并私信我：前端，我都会根据大家的问题给出针对性的建议，缺乏基础入门的视频教程也可以直接来找我，我这边有最新的web前端基础精讲视频教程，还有我做web前端技术这段时间整理的一些学习手册，面试题，开发工具，PDF文档书籍教程，都可以直接分享给大家。

2.类选择器（所有浏览器都支持类选择器，但多类选择器（.className1.className2）不被ie6支持。）

类选择器根据类名来选择，前面以”.”来标志，是以一独立于文档元素的方式来指定样式，使用类选择器之前需要在html元素上定义类名，换句话说需要保证类名在html标记中存在。

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>类选择器</title>
 <style>
 .demo {
 width: 200px;
 height: 200px;
 margin: 50px auto;
 background: #2DC4CB;
 }
 
 </style>
 </head>
 <body>
 <div class="demo">类选择器</div>
 </body>
</html>

效果图：

3.元素选择器（所有浏览器支持）
元素选择器（标签名选择器），是css3选择器中最常见而且最基本的选择器。元素选择器其实就是文档的元素，如html,body,p,div等等下下面例子中选择了span元素，并设置了字体颜色为红色。

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>元素选择器</title>
 <style>
 .demo {
 width: 200px;
 height: 200px;
 margin: 50px auto;
 }
 span{
 color: red;
 }
 </style>
 </head>
 <body>
 <div class="demo">
 <p>这里使用<span>元素选择器</span>改变了样式</p>
 </div>
 </body>
</html>

效果图：

4.ID选择器（所有浏览器都支持）

ID选择器和上面说的类选择器是很相似的，在使用ID选择器之前也需要先在html文档中加注ID名称，这样在样式选择器中才能找到相对应的元素，不同的是ID选择器是一个页面中唯一的值，我们在类使用时是在相对应的类名前加上一个“.”号（.className）而id选择器是在名称前使用"#"如(#demo)。

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>ID选择器</title>
 <style>
 #demo {
 width: 200px;
 height: 200px;
 margin: 50px auto;
 background: #FF0000;
 }
 
 </style>
 </head>
 <body>
 <div id="demo">ID选择器</div>
 </body>
</html>

效果图：

ID选择器有几个地方需要特别注意：

第一：一个文档中一个id选择器只充许使用一次，因为id在页面中是唯一的；

第二，id选择器不能像类选择器一样多个合并使用，一个元素只能命名一个id名；

第三，可以在不同的文档中使用相同的id名，比如说在“test.html”中给h1定了“＃important”,也可给“test1.html”中定义p的id为"#important"，但前提是不管在test.html还是test1.html中只充许有一个id叫"#important"的存在。

5.群组选择器（所有浏览器都支持）

当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔。群组选择器是将具有相同样式的元素分组在一起，每个选择器之间使用逗号“，”隔开，这个逗号告诉浏览器，规则中包含多个不同的选择器，如果不有这个逗号，那么所表达的意就完全不同了，省去逗号就成了我们前面所说的后代选择器，这一点大家在使用中千万要小心加小心。

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>群组选择器</title>
 <style>
 .demo {
 width: 200px;
 height: 200px;
 margin: 50px auto;
 background: #FF0000;
 }
 p,li{
 color: blue;
 }
 .demo1,.demo2{
 color: #fff;
 }
 </style>
 </head>
 <body>
 <div class="demo">
 <p>这里是一个段落!</p>
 <ul><li>列表</li></ul>
 <a href="#" class="demo1">链接一</a><br>
 <span class="demo2">文字文字！</span>
 </div>
 </body>
</html>

效果图：

以上就是什么是css选择器？css3中5种常见的基本选择器（代码实例）的详细内容，更多请关注我！！！

作者：程序猿的生活
链接：https://zhuanlan.zhihu.com/p/152153067

lt;h2 id="title1">列表标签</h2>

<h3 id="title2">无序列表(unordered list)</h3>

作用: 给一堆内容添加无序列表语义(一个没有先后顺序整体), 列表中的条目是不分先后
格式:

li 英文是 list item, 翻译为列表项

 <h4>选择居住城市(CN)</h4>
 <ul>
 <li>北京</li>
 <li>上海</li>
 <li>广州</li>
 <li>铁岭</li>
 </ul>

ul应用场景:

导航条
商品列表等
新闻列表

注意事项:

其实ul还有一个type属性, 可以修改先导符号的样式, 取值有disc、square、circle几种
但是由于样式将来都是通过css来完成, 所以这里就不给大家介绍了
这里指的无序是指对于主体来说内容没有先后之分, 例如主题是"选择居住城市(CN)"北京上海都是中国的城市, 无论谁放在前面它都还是中国的城市的. 如果标题改为"中国雾霾排行", 那么就必须有严格的排名,北京必须写在前面
浏览器会给无需列表自动添加先导符号但是一定一定千万千万要记住, ul的作用并不是给文字添加小圆点, 而是增加无序列表的语义
ul是一个组标签, 一定是一坨一坨的出现, 也就是说li标签不能单独存在, 必须包裹在ul里面
由于ul和li是一个整体, 所以ul里面不推荐包裹其它标签, 永远记住ul里面最好只写li标签
虽然ul中推荐只能写li标签, 但是li标签是一个容器标签, li标签中可以添加任意标签, 甚至可以添加ul标签
关注微信订阅号：网页设计轻松学

<ul>
 <li>
 好吃的 <ul>
 <li>牛奶</li>
 <li>面包</li>
 </ul>
 </li>
 <li>
 日用的 <ul>
 <li>毛巾</li>
 <li>牙膏</li>
 </ul>
 </li>
 </ul>

<h3 id="title3">有序列表(ordered list)</h3>

作用: 给一堆内容添加有序列表语义(一个有顺序整体), 列表中的条目有先后之分
格式:

 <h4>中国房价排行</h4>
 <ol>
 <li>北京</li>
 <li>上海</li>
 <li>广州</li>
 <li>铁岭</li>
 </ol>

ol应用场景:

xxx排行榜
其实ol应用场景并不多, 因为能用ol做的用ul都能做

注意事项:

ol和ul就是语义不一样，怎么使用都是一样的以及注意点都一样
其实ul还有两个常见属性start、type属性, 可以修改先导符号的样式和序号
但是由于样式将来都是通过css来完成, 所以这里就不给大家介绍了

<h3 id="title4">定义列表(definition list)</h3>

作用: 给一堆内容添加列表语义, 通过dt罗列出列表的条目, 然后再通过dd给每个条目进行相应的描述
格式:

dt英文definition title, 翻译为定义标题
dd英文definition description, 翻译为定义描述信息

 <dl>
 <dt>北京</dt>
 <dd>国家的首都, 看升国旗的地方</dd>
 <dt>上海</dt>
 <dd>魔都, 遍地是黄金的地方</dd>
 </dl>

关注微信订阅号：网页设计轻松学

dl应用场景:

网站底部相关信息
但凡看到一堆内容都是用于描述某一个内容的时候就要想到dl

注意事项:
- dl是一个组标签, 一定是一坨一坨的出现, 也就是说dt和dd标签不能单独存在, 必须包裹在dl里面

由于dl和dt、dd是一个整体, 所以dl里面不推荐包裹其它标签
dd和dt和li标签一样是容器标签, 里面可以添加任意标签
定义列表非常灵活, 可以给一个dt配置多个dd, 但是最好不要出现多个dt对应一个dd, dd的语义是描述离它最近的一个dt, 所以其它dt相当于没有描述, 而定义列表存在的意义就是既可以列出每一个条目又可以对每一个条目进行描述
定义列表非常灵活, 可以将多个dt+dd组合拆分为多个dl

在线咨询

上一篇：面对收费文章，如何免费复制，一招教你
下一篇：在HTML页面中嵌入其他页面的方法-零基础自学网页制作

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

前端入门-html 列表

无序列表 —— ul

有序列表 —— ol

定义列表——dl

列表的嵌套

总结

您的项目需求