标签的嵌套规则

代码演示

<!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>

一天搞定HTML----标签的嵌套规则06的更多相关文章

  1. XHTML标签的嵌套规则分析

    在 XHTML 的语言里,我们都知道:ul 标签包含着 li.dl 标签包含着 dt 和 dd——这些固定标签的嵌套规则十分明确.但是,还有许多标签是独立的,它们没有被捆绑在一起,比如 h1.div. ...

  2. HTML标签的嵌套规则

    我在平时在写html文档的时候,发现不太清楚标签之间的嵌套规则,经常是想到什么标签就用那些,后来发现有些标签嵌套却是错误的.通过网上找资料,了解了html标签的嵌套规则. 一.HTML 标签包括 块级 ...

  3. XHTML标签的嵌套规则--很基础很重要

    XHTML的标签有许多:div.ul.li.dl.dt.dd.h1~h6.p.a.addressa.span. strong……我们在运用这些标签搭建页面结构的时候,是可以将它们无限嵌套的,但是,嵌套 ...

  4. html标签的嵌套规则分析

    1.a标签最好不要嵌套块级元素,可以嵌套内联元素,但是不能嵌套a标签和input之类的标签.能嵌套的标签像,等等. 2.ul和ol的子元素不能是别的元素只能是li,不能是别的比如div等,但是li中可 ...

  5. 超级简单却不知道：html标签的嵌套规则

    XHTML的标签有许多:div.ul.li.dl.dt.dd.h1~h6.p.a.addressa.span. strong……我们在运用这些标签搭建页面结构的时候,是可以将它们无限嵌套的,但是,嵌套 ...

  6. day63-html-列表，表格，标签的嵌套规则

    1.列表 1.无序列表 <ul type="disc"> <li>a</li> <li>b</li> </ul&g ...

  7. 常见的HTML标签的嵌套规则

    众所周知,HTML标签有两类: 块级元素div.h1~h6.address.blockquote.center.dir.dl.dt.dd.fieldset.form.hr.isindex.menu.n ...

  8. 一天搞定HTML----a标签02

    1.细说a标签 2.代码演示 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  9. html 标签的嵌套规则

    1. 块元素可以包含内联元素或某些块元素,但内联元素却不能包含块元素,它只能包含其它的内联元素: <div><h1></h1><p></p> ...

随机推荐

  1. iptables配置详解

    iptables主要参数 -A 向规则链中添加一条规则,默认被添加到末尾 -T指定要操作的表,默认是filter -D从规则链中删除规则,可以指定序号或者匹配的规则来删除 -R进行规则替换 -I插入一 ...

  2. 【C和指针】笔记1

    数据 基本数据类型 整型家族:包含字符,短整型,整型和长整型 整型相互之间大小规定如下: 长整型至少和整型一样长,而整型至少应该和短整型一样长. short int至少16位,long int至少32 ...

  3. Android -- Android下的NDK开发（一）

    1,NDK是什么?为什么要进行NDK开发? NDK:Native Development Kit.Android应用运行在Dalvik虚拟机中.NDK允许开发人员使用本地代码语言(例如C和C++)实现 ...

  4. JS取消浏览器文本选中的方法

    一 .问题的出现 今天在使用Easy-UI 的messager.alert()方法时候出现浏览器文本被选中,不知道其中是什么原因,如下图所示. 二 .解决思路 我最后的思路时在弹出消息框的同时,取消浏 ...

  5. C# treeview 使用笔记

    treeView默认 展开 treeView1.ExpandAll(); treeview判断点击节点: private void treeView1_AfterSelect(object sende ...

  6. Redis编码问题

    最近搞redis存储对象出了点问题,大概说一下背景,项目原有的东东以前存的是redis,存储的直接是对象模型,没有问题,这里存储对象存储任何信息事都没有问题的.但是现在调整为存储序列化的json字符串 ...

  7. CSS新内容

     margin 外边距                                 * margin  属性值最多有4个                 * ① 只写一个值:四个方向的margin ...

  8. 自定义TextView跑马灯

    本篇主要介绍TextView的可控制跑马灯效果实现. Android自带的TextView添加几个属性就可以实现跑马灯效果,大概是这样 android:ellipsize="marquee& ...

  9. PHP预定义变量$_SERVER

    PHP预定义变量$_SERVER $_SERVER 是一个包含诸如头部(headers).路径(paths)和脚本位置(script locations)的数组.数组的实体由 web 服务器创建,不能 ...

  10. 基于python的知乎开源爬虫 zhihu_oauth使用介绍

    今天在无意之中发现了一个知乎的开源爬虫,是基于Python的,名字叫zhihu_oauth,看了一下在github上面star数还挺多的,貌似文档也挺详细的,于是就稍微研究了一下.发现果然很好用啊.就 ...