无序列表

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

  • 格式:

    • 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

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

  1. 前端基础-html 列表标签,表格标签,表单标签

    一.列表标签 1.ul(无序列表)标签 ul(unordered list)无序列表,ul下的子元素只能是li(list item),如下示例: <ul> <li>第一项< ...

  2. Bootstrap<基础二十> 标签

    Bootstrap 标签.标签可用于计数.提示或页面上其他的标记显示.使用 class .label 来显示标签,如下面的实例所示: <!DOCTYPE html> <html> ...

  3. HTML基础及一般标签

    HTML        内容 Hyper Text Markup Language  超文本标记语言(包含文本.表格.图片.声音.视频等,同时也是文档) HTML 元素指的是从开始标签(start t ...

  4. HTML第二耍 列表标签

    先复习下上一节 <!doctype html> <html> <head> <meta charset="utf-8"> <t ...

  5. 前端基础:HTML标签(上)

    前端基础:THML HTML初始 1.web服务本质 import socket sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM) so ...

  6. HTML的表格标签,列表标签,表单标签,HTML5有哪些新特性

    欢迎大家去博客冰山一树Sankey,浏览效果更好.直接右上角搜索该标题即可 博客园主页:博客园主页-冰山一树Sankey CSDN主页:CSDN主页-冰山一树Sankey 前端学习:学习地址:黑马程序 ...

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

    iOS系列 基础篇 06 标签和按钮 (Label & Button) 目录: 标签控件 按钮控件 小结 标签和按钮是两个常用的控件,下面咱们逐一学习. 1. 标签控件 使用Single Vi ...

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

    上次介绍了一些简单的文本标签设计, 这篇介绍列表类标签, 通过列表能写出很好看的, 多元化的网络页面. ul-li 列表标签 <ul> <li>列表1</li> & ...

  9. HTML的列表标签

    一.上下层列表标签:<dl>..</dl>: 上层dt 下层dd:封装的内容会被自动缩进的效果 <dl> <dt>运动户外</dt> < ...

  10. 1.进入debug模式(基础知识列表)

    1.进入debug模式(基础知识列表)1.设置断点 2.启动servers端的debug模式 3.运行程序,在后台遇到断点时,进入debug调试状态 ========================= ...

随机推荐

  1. Spring Security的核心拦截器

    1. HttpSessionContextIntegrationFilter 位于过滤器顶端,第一个起作用的过滤器. 用途一,在执行其他过滤器之前,率先判断用户的session中是否已经存在一个Sec ...

  2. java应用,直接请求没问题,通过nginx跳转状态吗400

    今天配置金融的测试环境,直接调用java应用返回状态200,通通过nginx跳转,会返回400,真是一头雾水..... 参考文档: https://www.cnblogs.com/yanghj010/ ...

  3. [redis] hiredis-vip 简单使用

    redis的C语言client,有几个:https://redis.io/clients#c 支持cluster的只有一个唯品会的版本:https://github.com/vipshop/hired ...

  4. java学习笔记-输入输出流

    ================File类 =====================InputStream ==================OutputStream ============== ...

  5. office 2016密钥

    Office 2016 Pro Plus Retail 版激活密钥:[Key]:3XJTG-YNBMY-TBH9M-CWB2Y-YWRHH[Key]:6TCQ3-NBBJ2-RTJCM-HFRKV-G ...

  6. ajax中的同步与异步修改数据的问题

    这次项目中因为前端有事儿,项目紧急加个新需求,于是自己硬着头皮上去看了下前端的逻辑后便开始动手了,但是为了简单起见就直接自己写了个ajax调服务来获取数据,然后修改前端定义的全局数据 //ajax来请 ...

  7. cocos2d-x在Android上的编译过程(3):简化Android.mk文件的编写

    在编译动态库时.要求我们要去编写jni/Android.mk文件.告诉编译器编译出来的库时应包括包括编译文件和其它引用库.但对于一个大项目来说,维护这个文件肯定是一件比較繁琐的事情.由于每加一个文件或 ...

  8. 从零开始一起学习SLAM | 点云平滑法线估计

    点击公众号"计算机视觉life"关注,置顶星标更快接收消息! 本文编程练习框架及数据获取方法见文末获取方式 菜单栏点击"知识星球"查看「从零开始学习SLAM」一 ...

  9. 初识github之项目创建

    登录github后,点击左上角logo章鱼猫,进入主页面,点击start a project ,此时进入新建项目的页面.在repostory name这一栏上写下你想创建的项目的名字.然后在descr ...

  10. make pycaffe时候报错:Makefile:501: recipe for target 'python/caffe/_caffe.so' failed

    安装caffe-ssd编译环境的时候报错: python/caffe/_caffe.cpp:10:31: fatal error: numpy/arrayobject.h: No such file ...