学习HTML成长记 4

列表标签

1.有序列表标签

ordered list

有序列表标签

用来定义带有编号的有序列表,需要和列表项目标签
  • 配合使用。
    列表项目标签
  • 标记在每个表项的开头,默认为缩进显示效果。

  • 通俗来说,就是

      标签要和
    1. 标签一起使用

      有序列表默认的起始数值是1

      • 可用start属性重新定义编号起始值,格式为:

          其中n需要替换为指定的编号数值,写成几就代表从几开始编号。
          默认的编号样式是阿拉伯数字,如果需要使用其他的,需要用type属性进行声明。
        学习HTML成长记 4_第1张图片

        <DOCTYPE html>
        <html>
        <head>
        <mete charset="utf-8">
        <title>有序列表标签的应用title>
        head>
        <body>
        <h3>有序列表标签的基本应用h3>
        <ol>
        <li>第一条
        <li>第二条
        <li>第三条
        ol>
        <hr>
        
        <h3>有序标签的type属性设置h3>
        <ol type="">
        <li>第一条
        <li>第二条
        <li>第三条
        ol>
        <hr>
        
        <h3>有序列表标签的start属性设置h3>
        <ol start="2">
        <li>第一条
        <li>第二条
        ol>
        body>
        html>
        

        2.无序列表标签

        用于定义不带编号的无序列表,也需要和 li 标签配合使用。
        效果就是那个圆点,表示无序的那个,不知道就自己去看效果嘛

        学习HTML成长记 4_第2张图片
        明白了

        <DOCTYPE html>
        <html>
        <head>
        <mete charset="utf-8">
        <title>无序列表标签的应用title>
        head>
        <body>
        <h3>无序列表标签的基本应用h3>
        <ul>
        <li>第一条
        <li>第二条
        <li>第三条
        ul>
        <hr>
        
        <h3>无序标签的type属性设置h3>
        <ul type="disc">
        <li>第一条
        <li>第二条
        <li>第三条
        ul>
        <h3>无序列表标签嵌套显示效果h3>
        <ul>
        <li>第一条
        <li>第二条
        <li>第三条
        ul>
        <li>第一条
        <li>第二条
        <li>第三条
        ul>
        body>
        html>
        

        3.定义列表标签

        用于进行词条定义的特殊列表,每条表项需要结合下面两个标签一起使用

        词条标签

        ,需要标记在每个词条的开头
        定义标签
        ,需要标记在每个定义部分的开头,默认为全文缩进显示

        <DOCTYPE html>
        <html>
        <head>
        <mete charset="utf-8">
        <title>定义列表标签的应用title>
        head>
        <body>
        <h3>易烊千玺h3>
        <hr>
        <dl>
        <dt>1128dt>
        <dd>BIRTHDAY
        dd>
        
        <dt>shuaidt>
        <dd>是的
        dd>
        dl>
        body>
        html>
        

        效果图
        学习HTML成长记 4_第3张图片
        今天的学习就结束了,明天继续
        学习HTML成长记 4_第4张图片

    你可能感兴趣的:(学习,笔记,html,html5)