一天搞定HTML----标签的嵌套规则06

最新推荐文章于 2022-09-01 10:13:36 发布

Java仗剑走天涯

最新推荐文章于 2022-09-01 10:13:36 发布

阅读量896

点赞数

分类专栏：前端基础HTML5/CSS3 文章标签： HTML 标签标签嵌套规则

本文链接：https://blog.csdn.net/baidu_37107022/article/details/71514116

版权

前端基础HTML5/CSS3 专栏收录该内容

46 篇文章 2 订阅

订阅专栏

标签的嵌套规则

这里写图片描述

代码演示

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <!--
            标签嵌套规则
                1、行内标签不能嵌套块标签，块标签可以嵌套行内标签
                2、a标签不能再嵌套a标签
                3、h1-h6,dt这些标签的性质是标题，那里面就不能嵌套块级标签（可以嵌套行内标签）
                4、p标签不能嵌套块标签（可以嵌套行内标签）
                5、ul和li，以及ol与li，以及dl和dt、dd他们是固定的嵌套规则
                    1）ul和ol下边只能跟li，li的父级只能是ul或者ol
                    2）li中可以嵌套任何标签，甚至可以再放一个ul或者ol
                    3）dl和dt、dd可以参考ul和li
        -->

        <!--1、行内标签不能嵌套块标签，块标签可以嵌套行内标签-->
        <span style="border: 1px solid #f00;"><div>123</div></span>

        <!--2、a标签不能再嵌套a标签-->
        <a href="http://www.baidu.com/">百<a href="http://www.apeclass.com/">阿里</a>度</a>

        <!--3、h1-h6,dt这些标签的性质是标题，那里面就不能嵌套块级标签（可以嵌套行内标签）-->
        <h1>这里<ul><li>123</li><li>456</li></ul>是一个大<span style="color: #f00;">标题</span></h1>

        <!--4、p标签不能嵌套块标签（可以嵌套行内标签）-->
        <p>这里是一段文字这里是一段文字这里是一段文字这里是一段文字这里是一段文字这里是一段文字这里是一段文字这里是一段文字这里是一段文字这里是一<div>美梦成真 顶起</div>段文字这里是一段文字</p>

        <!--5、ul和li，以及ol与li，以及dl和dt、dd他们是固定的嵌套规则-->
        <ul>
            <li>
                <h2>这里是标题1</h2>
                <ul>
                    <li>这是第一个列表</li>
                    <li>这是第一个列表</li>
                    <li>这是第一个列表</li>
                    <li>这是第一个列表</li>
                </ul>
            </li>
            <li>
                <h2>这里是标题2</h2>
                <ul>
                    <li>这是第一个列表</li>
                    <li>这是第一个列表</li>
                    <li>这是第一个列表</li>
                    <li>这是第一个列表</li>
                </ul>
            </li>
            <li>
                <h2>这里是标题3</h2>
                <ul>
                    <li>这是第一个列表</li>
                    <li>这是第一个列表</li>
                    <li>这是第一个列表</li>
                    <li>这是第一个列表</li>
                </ul>
            </li>
        </ul>
    </body>
</html>