HTML5列表和块的相关

下面了解关于HTML5列表的制作和块:如下图

在这里插入图片描述

列表分为有序列表,无序列表,嵌套列表,自定义列表,我们可以一一尝试输出,对比,给出代码如下:

    无序列表:<br/>
    disc:实体圆  circle:空心圆  square:方块实体
    <ul type="square">
        <li>w</li>
        <li>x</li>
        <li>c</li>
    </ul>
    有序列表:<br/>
    使用type更改样式  start 来确定开始是多少
    <ol  start="10" type="I">
        <li>w</li>
        <li>x</li>
        <li>c</li>
    </ol>
    嵌套列表:
    <ul>
        <li>数字</li>
            <ul>
                <li>1</li>
                <li>2</li>
            </ul>
        <li>人</li>
            <ul>
                <li>中国人</li>
            </ul>
    </ul>
    自定义列表:
    <dl>
        <dt>你好</dt>
            <dd> 嘿嘿</dd>
        <dt>你好</dt>
            <dd>哈哈</dd>
        <dt>你好</dt>
            <dd>哦哦哦</dd>
    </dl>

我们可以根据上述代码运行:得出如下

在这里插入图片描述

运行结果如上,无序列表标签为ul,有序列表标签为ol,无序列表通过type 修改列表前的样式,分为3种,有序列表通过type规定是那种序列,同时使用start,规定起始是多少,嵌套列表里面可以无序嵌套有序,有序嵌套无序,选择自己需要的方式即可。
上述为列表的相关操作。
下面介绍HTML5 块:

在这里插入图片描述

<div id="divid">
    <p>哈哈哈</p>
    <a>dadad</a>
</div>
<div>
    <p><span>测试</span>是什么样子</p>
</div>

通过id=divid 定制了一个id
在head标签里面添加

<link rel="stylesheet" type="text/css" href="my.css">

然后创建一个css文件

span{
    color: red;
}
#divid
p{
    color: red;
}
a{
    color: blue;
}

显示如下:
在这里插入图片描述
如上即为块的相关操作。

后面会了解更多。

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值