基本标签,中的三种列表
分类:web前端

  • (X)HTML 中的三种列表-介绍
  • (X)HTML 中的三种列表-UL、OL
  • (X)HTML 中的三种列表-DL
  • (X)HTML 中的三种列表-介绍
  • (X)HTML 中的三种列表-UL、OL
  • (X)HTML 中的三种列表-DL
  • (X)HTML 中的三种列表-介绍
  • (X)HTML 中的三种列表-UL、OL
  • (X)HTML 中的三种列表-DL

HTML

HTML 是用来描述网页的一种语言。

  • HTML 指的是超文本标记语言 (Hyper Text Markup Language)
  • HTML 不是一种编程语言,而是一种标记语言 (markup language)
  • 标记语言是一套标记标签 (markup tag)
  • HTML 使用标记标签来描述网页

我们看到的一切网页均是由HTML构成的。




HTML常见标签

HTML的基本元素就是标签

  • 标题:<h1><h2>...<h6>
  • 段落:<p>
  • 链接:<a>
  • 图片:<img>
  • 格式:<b><i><u><em>
  • 换行:<br />
  • 水平线:<hr />
  • 列表:<ul><ol><li><dl><dt><dd>
  • 表格:<table><caption><th><tr><td><thead><tbody><tfoot>
  • 表单:<form><input>
  • 分组:<div>
  • 注释:``
  • ... ...

还有很多标签(包括其属性、样式等),详情参见W3School。

这里有三种列表:

用法

用法

区分UL和OL

<ul>:无序列表
<ol>:有序列表

看下面一张图:

图片 1

List

可以看出:
最外层是无序列表
|-- 无序列表内部是有序列表
|---- 有序列表内部又是无序列表

要实现上述的列表组合,我们可以这样做:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>List</title>
</head>

<body>
    <ul>
        <li>JavaScript
            <ol>
                <li>第一章
                    <ul>
                        <li>const
                        </li>
                        <li>let
                        </li>
                    </ul>
                </li>
... ...
</body>
</html>

详细的代码请参看我的代码。

  • 无序列表,UL,Unordered Lists。
  • 有序列表,OL,Ordered Lists。
  • 定义列表,DL,Definition Lists。

DL 是定义列表,它也是很有用的列表,要比 UL、OL 稍复杂些,它有两个子标签 dt 和 dd。

UL 和 OL 的用法很像,它们均有子标签 li:

一个列表应该包含一个或多个的列表项。列表之间可以嵌套。

<dl>
  <dt>标题一</dt>
  <dd>对标题一的描述</dd>
  <dt>标题二</dt>
  <dd>对标题二的描述(1)</dd>
  <dd>对标题二的描述(2)</dd>
  <dd>对标题二的描述(3)</dd>
</dl>

<ul>
  <li>千一产品</li>
  <li>技术文档</li>
</ul>

他们均是符合 XHTML 1.0 Transitional 的。

预览为:

<ol>
  <li>千一产品</li>
  <li>技术文档</li>
</ol>

  • (X)HTML 中的三种列表-介绍
  • (X)HTML 中的三种列表-UL、OL
  • (X)HTML 中的三种列表-DL

图片 2

一般用法上来说,只是 u 和 o 的区别。默认情况下,ul 项目(li)前面是实心圆点引导,而 ol 是数字(1、2……)引导。但 ul 设置样式 list-style-type:decimal; 也可实现数字引导,所以大多数情况下使用 ul。


一个 dt 下可以有多个 dd,但一般是一一对应,因为 dd 还可以嵌套其他内容,不必用多个 dd。

li 下可以继续嵌套 ul 或 ol。

  • dt 中只能放 inline 元素,比如 span、a 等。
  • dd 中可以放 block 元素,比如 dd 中还可以嵌套 ul、ol、p、div、span、a 等。

属性

相关阅读

ul 和 ol 以及它们的 li 还有几个属性,这几个属性虽然也是符合 XHTML 1.0 Transitional,但 W3C 已经标明并不推荐使用,但了解一下也是没有坏处的。

  • 详解 display:block| inline |inline-block 的区别

  • (X)HTML 中的三种列表-介绍

  • (X)HTML 中的三种列表-UL、OL
  • (X)HTML 中的三种列表-DL

type 现已经被 CSS 的 list-style-type 取代。


start 只用于 ol,用于项目(li)引导数字从哪个值开始。

value 只用于 li,用于强制设置当前项目(li)引导数字,而不是从上一个项目(li)的引导数字 +1。

compact 设置该属性为 true 后,浏览器使用更紧凑的样式来显示列表。浏览器不一定支持。

  • (X)HTML 中的三种列表-介绍
  • (X)HTML 中的三种列表-UL、OL
  • (X)HTML 中的三种列表-DL

本文由10bet手机官网发布于web前端,转载请注明出处:基本标签,中的三种列表

上一篇:javascript的预编译和执行顺序,四种动态加载 下一篇:微软将成OpenID提供商,行业组织称苹果ID登陆第三方有漏洞
猜你喜欢
热门排行
精彩图文