HTML基础【3】:列表标签

无序列表

  • 作用:给一堆内容添加无序列表语义(一个没有先后顺序整体),列表中的条目不分先后
  • 格式:
    • li 英文是 list item,翻译为列表项

      <h4>选择居住城市(CN)</h4>
          <ul>
              <li>北京</li>
              <li>上海</li>
              <li>广州</li>
              <li>铁岭</li>
          </ul>
  • ul应用场景:
    • 导航条
    • 商品列表等
    • 新闻列表
  • 注意事项
    • 这里指的无序是指对于主体来说内容没有先后之分,例如主题是 "选择居住城市(CN)",北京上海都是中国的城市,无论谁放在前面它都还是中国的城市的。如果标题改为 "中国雾霾排行" ,那么就必须有严格的排名,北京必须写在前面
    • 浏览器会给无需列表自动添加先导符号但是一定要记住,ul的作用并不是给文字添加小圆点,而是增加无序列表的语义
      • 其实 ul 还有一个 type 属性,可以修改先导符号的样式,取值有 disc、square、circle 几种
      • 但是由于样式将来都是通过css来完成,所以在这里不做介绍
    • 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>

有序列表

  • 作用:给一堆内容添加有序列表语义(一个有顺序整体),列表中的条目有先后之分
  • 格式:
    <h4>中国房价排行</h4>
        <ol>
            <li>北京</li>
            <li>上海</li>
            <li>广州</li>
            <li>铁岭</li>
        </ol>
  • ol 应用场景
    • xxx排行榜
    • 其实 ol 应用场景并不多,因为能用 ol 做的用 ul 都能做
  • 注意事项:ol 和 ul 就是语义不一样,如何使用以及注意点都一样

定义列表

  • 作用:给一堆内容添加列表语义,通过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

原文地址:https://www.cnblogs.com/qiuxirufeng/p/10133970.html

时间: 2024-11-03 13:57:55

HTML基础【3】:列表标签的相关文章

HTML基础及一般标签

HTML        内容 Hyper Text Markup Language  超文本标记语言(包含文本.表格.图片.声音.视频等,同时也是文档) HTML 元素指的是从开始标签(start tag)到结束标签(end tag)的所有代码 CSS          页面美化 JavaScript  脚本语言(针对前台显示进行控制) DreamWeaver 构成 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&

&lt;ul&gt;-&lt;li&gt;无序列表标签

概念:多个并列的列表项之间没有先后顺序 源码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http

HTML的列表标签

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

&lt;ol&gt;-&lt;li&gt;有序列表标签

概念:多个并列的列表项,它们之间有明显的先后顺序 源码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta

html中有序列表标签ol,li的高级应用

本文主要介绍html中有序列表标签ol,li的高级应用, 在网页设计时我们设计有序列表内容时,经常会在每个ITEM前手工加上一个数值,或是由程序加上这个数值. 而如果使用有序列表标签ol和li,则不需要这么麻烦,根本不用自行去填写序数,当单层列表的时候这种特性似乎并不明显,而当使用多层的时候其特性就很明显了. 一般的标签ol和li有序列表应用代码如下: <ol> <li>列表内容一</li> <li>列表内容二</li> <li>列表

iOS系列 基础篇 06 标签和按钮 (Label &amp; Button)

iOS系列 基础篇 06 标签和按钮 (Label & Button) 目录: 标签控件 按钮控件 小结 标签和按钮是两个常用的控件,下面咱们逐一学习. 1. 标签控件 使用Single View Application模板创建一个名为“LabelAndButtonSimple”的工程 (PS:具体创建过程和各设置项介绍等可参见前面的文章,这里就截图简单带过了:) (1) 打开Xcode,选择Create a new Xcode Project: (2) 选择Single View Applic

初学HTML 常见的标签(二) 列表标签

上次介绍了一些简单的文本标签设计, 这篇介绍列表类标签, 通过列表能写出很好看的, 多元化的网络页面. ul-li 列表标签 <ul> <li>列表1</li> <li>列表2</li> </ul> ul-li在网页中显示的默认样式一般为:每项li前都带一个圆点, 所以ul-li是没有序号的信息列表, 不存在前面的1, 2, 3等等的序号为其排序. ol-li 列表标签 <ol> <li>有序列表1</l

python 全栈 web基础 (二) html标签

一.html是什么? 超文本标记语言(Hypertext Markup Language,HTML)通过标签语言来标记要显示的网页中的各个部分.一套规则,浏览器认识的规则 浏览器按顺序渲染网页文件,然后根据标记符解释和显示内容.但需要注意的是,对于不同的浏览器,对同一标签可能会有不完全相同的解释(兼容性) 静态网页文件扩展名:.html 或 .htm html:是超文本标记(标签)语言-----------其他类型的标签语言  浏览器渲染顺序:从上到下,从左到右.html是一个文档树,从根发布往

(三)HTML中的列表标签、框架集及表单标签

一.HTML的列表标签 在网页中,经常可以看到,有的内容排列如同word里面的项目编号,这就是HTML的无序排列和有序排列起到的作用.. HTML之无序排列:<ul></ul> 例子:<ul type="??"> // type的属性值可以为:disc---->实心黑色圆:circle---->空心圆:square---->实心正方形. <li>河南理工大学</li> <li>河南工业大学<

Bootstrap&lt;基础二十&gt; 标签

Bootstrap 标签.标签可用于计数.提示或页面上其他的标记显示.使用 class .label 来显示标签,如下面的实例所示: <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 标签</title> <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <s