2-7. 无序列表

作者: 一Left一 | 来源:发表于2017-11-09 17:52 被阅读4次

1、无序列表
给数据添加列表语义,并且数据的排列没有先后之分

2、格式

<ul>
    <li>需要显示的条目内容</li>
</ul>
  • li其实是英文list item的缩写
  • list是列表的意思
  • item是条目的意思
  • 所以结合起来就是 列表条目的意思

3、注意点

  • 一定要记住ul标签是用来给一堆数据添加列表语义的, 而不是用来给他们添加小圆点的
  • ul标签和li标签是一个整体, 是一个组合. 所以一般情况下ul标签和li标签都是一起出现, 不会单个出现. 也就是说不会单独使用一个ul标签或者单独使用一个li 标签, 都是结合在一起使用
  • 由于ul标签和li标签是一个组合, 所以ul标签中不推荐包含其它标签, 也就是说以后你在ul标签中只会看到li标签

4、应用场景

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

5、无序列表一
type属性:指定条目前面的标记样式
不建议使用这个属性,一般在css中进行修改样式

  • disc 实心圆点
  • square 方点
  • circle 空心圆点
<body>
<!--
无序列表: 给一些语义相近,的条目增加列表语义
格式:
 <ul>
        <li>条目内容</li>
        <li>条目内容</li>
        <li>条目内容</li>
  </ul>

属性:
    type: ul
        1.实心圆点,默认 ,disc
        2.空心的圆点 , circle
        3.实心的方点 , square
        4.无 ,none
注意点:
    1.ul中只能有li标签
    2.li标签中可以放其他的标签,a,h,p....
    3.凡是在标签中,通过属性修改标签的样式的做法,都是不推荐使用的
-->

<ul type="none">
    <li>我是一个li</li>
    <li>我是一个li</li>
    <li>我是一个li</li>
    <li>我是一个li</li>
</ul>
</body>

http://www.w3school.com.cn/tags/tag_ul.asp
http://www.w3school.com.cn/html/html_lists.asp

相关文章

  • 2-7. 无序列表

    1、无序列表给数据添加列表语义,并且数据的排列没有先后之分 2、格式 li其实是英文list item的缩写 li...

  • 学习小组Day1笔记-Herobrine

    Day1-Herobrine 列表 无序列表 无序列表 无序列表 无序列表 有序列表 有序列表 有序列表 有序列表...

  • HTML 列表

    HTML支持有序、无序和定义列表 实例 无序列表 本例演示无序列表。 有序列表 本例演示有序列表。 无序列表 无序...

  • 网页设计:HTML列表标签

    无序列表 有序列表 自定义列表 1,无序列表 无序列表的标签是: 无序列表 定义一个无序列表: 定义一个列表项; ...

  • Markdown学习笔记

    列表语法 无序列表 无序列表基础语法 无序列表1 此处使用*和空格作为无序列表项的开头语句为: 无序列表2``` ...

  • 无标题文章

    学习 Markdown [TOC] 超链接 百度 列表 无序列表1 无序列表2 无序列表3 无序列表3 有序列表 ...

  • mackdown 基本语法

    一.无序列表 实现样式 无序列表1 无序列表2无序列表2.1无序列别2.2 二.有序列表 实现样式 1.有序列表1...

  • 列表 表格 特殊符号 样式 内联框架 table布局

    1.列表 无序列表 有序列表 列表的属性 自定义列表 无序列表的基本格式 无序列表的type属性 无序列表的typ...

  • alisa的Markdown笔记

    一级标题 这是一个引用。 列表 有序列表 有序列表 有序列表 无序列表 无序列表无序子列表 无序列表 代码 我是代...

  • Markdown简书JR小记

    EVERYTHING IS JR ~ 大标题 小标题 小小标题 无序列表和有序列表: 无序列表1 无序列表2 无序...

网友评论

    本文标题:2-7. 无序列表

    本文链接:https://www.haomeiwen.com/subject/dahmmxtx.html