列表标签的认识

shuye1015
173 阅读4分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第12天

四、列表标签

HTML5 中提供了三种列表标签

标签语义
<ul></ul>无序列表(没有可以的顺序)
<ol></ol>有序列表
<dl></dl>定义列表

1.无序列表 - 基础语法

语法

  • 无序列表使用
      标签，是英文单词unordered list（不排序列表） 缩写
    • 每个列表项都是
    • 标签，是英文单词 list item（列表项目）缩写
    • 无序列表是一个父子组合标签，上阵父子兵，不能单独出现
    <ul> 父标签，li 子标签
<h1>无序列表</h1>
<ul>
  <li>小炒肉</li>
  <li>小龙虾</li>
  <li>剁椒鱼头</li>
  <li>酸辣白菜</li>
  <li>7分熟牛排</li>
</ul>

    注：

    • ul ，li 标签是嵌套形式，li 标签必须要缩进（一个 Tab）
    • li 标签不能单独使用
    • ul 的子标签只能是 li
    • li 标签中是可以放任何标签的

    2.无序列表 - type属性

    type 属性

    • 无序列表有 type 属性，可以定义前导符号的样式，但在 HTML5 中已经被废弃，建议使用 CSS 替代
    • 只作为学习和了解即可 |属性|值|描述| |--|--|--| |type| disc| 默认值，实心圆| |type| square| 实心正方形| |type| circle| 空心圆|
    <h1>无序列表标签</h1>
<p>ul的type属性在HTML5中已经废弃</p>

<h2>type="square" 实心正方形</h2>
<ul type="square">
  <li>小炒肉</li>
  <li>小龙虾</li>
  <li>剁椒鱼头</li>
  <li>酸辣白菜</li>
  <li>7分熟牛排</li>
</ul>

<h2>type="circle" 空心圆</h2>
<ul type="circle">
  <li>小炒肉</li>
  <li>小龙虾</li>
  <li>剁椒鱼头</li>
  <li>酸辣白菜</li>
  <li>7分熟牛排</li>
</ul>


    <h1>无序列表标签</h1>
<p>ul的type属性在HTML5中已经废弃，使用CSS替代</p>

<h2>style="list-style-type:disc" 实心圆</h2>
<ul style="list-style-type:disc">
  <li>小炒肉</li>
  <li>小龙虾</li>
  <li>剁椒鱼头</li>
  <li>酸辣白菜</li>
  <li>7分熟牛排</li>
</ul>

<h2>style="list-style-type:square" 实心正方形</h2>
<ul style="list-style-type:square">
  <li>小炒肉</li>
  <li>小龙虾</li>
  <li>剁椒鱼头</li>
  <li>酸辣白菜</li>
  <li>7分熟牛排</li>
</ul>

<h2>style="list-style-type:circle" 空心圆</h2>
<ul style="list-style-type:circle">
  <li>小炒肉</li>
  <li>小龙虾</li>
  <li>剁椒鱼头</li>
  <li>酸辣白菜</li>
  <li>7分熟牛排</li>
</ul>

    1. 有序列表 - 基础语法

    关于有序列表

    • 有序列表使用 <ol></ol>标签，每个列表项都是<li></li>标签
    • <ol>标签是英文 ordered list（排序列表） 缩写
    • ol 的特性与ul li同理
    <h1>编程语言排行榜</h1>
<ol>
  <li>JavaScript</li>
  <li>Python</li>
  <li>C/C++</li>
  <li>Java</li>
</ol>
    1. 有序列表 ol 的 type 属性

    ol 标签可以设置 type 属性，用来设置编号的类型 |type属性值|描述| |--|--| |1|数字编号(默认值)| |A|大写英文字母编号| |a|小写英文字母编号| |l|大写罗马字母编号| |i|小写罗马字母编号|

    <h1>编程语言排行榜</h1>
<p>ol type属性值</p>

<ol type="1">
  <li>JavaScript</li>
  <li>Python</li>
  <li>C/C++</li>
  <li>Java</li>
</ol>

<ol type="A">
  <li>JavaScript</li>
  <li>Python</li>
  <li>C/C++</li>
  <li>Java</li>
</ol>

.......
    1. 有序列表 ol 的 start 属性

    start 属性

    • start属性值必须是一个整数，制定了列表编号的起始值
    • 此属性的值阿拉伯数字，即使ol指定了type属性值
    <h1>编程语言排行榜</h1>
<p>ol type属性值 和 start属性值</p>

<ol type="1" start="3">
  <li>JavaScript</li>
  <li>Python</li>
  <li>C/C++</li>
  <li>Java</li>
</ol>

<ol type="A" start="2">
  <li>JavaScript</li>
  <li>Python</li>
  <li>C/C++</li>
  <li>Java</li>
</ol>

<ol type="a" start="6">
  <li>JavaScript</li>
  <li>Python</li>
  <li>C/C++</li>
  <li>Java</li>
</ol>

    1. 有序列表 ol 的 reversed 属性

    reversed 属性

    • reversed 属性是 HTML5 中的新属性
    • reversed 属性是一个布尔属性
    • reversed 属性指定列表中的条目是否是倒序排列的
    • reversed 属性不需要值，只需要写 reversed 单词即可
    <h1>有序列表 ol的reversed属性（倒序排列）</h1>
<ol type="1" reversed>
  <li>JavaScript</li>
  <li>Python</li>
  <li>C/C++</li>
  <li>Java</li>
</ol>
    1. 定义列表

    需要逐条给出定义描述的列表，就是定义列表

    • 定义列表使用 <dl></dl>标签，是英文单词definition list（定义列表） 缩写
    • <dt></dt>标签，是英文单词 data term（数据项）缩写
    • <dd></dd>标签，是英文单词 data definition (数据定义)缩写
    • dd 标签内容是对dt 标签的解释说明
    • 案例以小米官网首页 底部

    <dl>是定义列表标签，内容交替出现 <dt>、<dd>标签

    <h1>定义列表 - dt dd标签交替出现</h1>
<dl>
  <dt>服务支持</dt>
  <dd>售后政策</dd>
  <dd>关注我们</dd>
  <dd>自助服务</dd>

  <dt>关注我们</dt>
  <dd>新浪微博</dd>
  <dd>官方微信</dd>
  <dd>关于我们</dd>
</dl>

    也允许 dt 和 dd 不交替出现，而是分别处于不同定义列表 dl 中 这么写，可以有更多的 dl ，可以更好的服务 css 样式

    <h1>定义列表 dt dd 不交替出现</h1>

<dl>
  <dt>服务支持</dt>
  <dd>售后政策</dd>
  <dd>关注我们</dd>
  <dd>自助服务</dd>
</dl>

<dl>
  <dt>关注我们</dt>
  <dd>新浪微博</dd>
  <dd>官方微信</dd>
  <dd>关于我们</dd>
</dl>

    5. 相对路径和绝对路径

    相对路径

    • 从当前网页出发，要找到图片的路径就叫 相对路径
    <img src="images/logo.png" />
<img src="../images/logo.png" />
<img src="../../images/logo.png" />
.....

    ../ 表示回退上一级目录 ./ 表示当前目录 通过 cmd 命名行 dir 命令可查

    绝对路径

    • 描述文件或文件夹的精准完整地址
    <img src="D:\web\icoding-web\images\logo.png" />
<img
  src="https://www.icodingedu.com/files/system/2019/09-25/22132557f330499313.png"
/>
    avatar
    文章
    阅读
    粉丝