标签的嵌套规则

代码演示

<!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. SVG如何做圆形图片

    SVG如何做圆形图片 2016年5月31日17:30:48 提到圆形图片,大家首先想到的一定是border-radius,但在SVG中这些方法很难起效,下面方法适合SVG中制作任意规则与不规则的图形. ...

  2. 用react开发一个新闻列表网站（PC和移动端）

    最近在学习react,试着做了一个新闻类的网站,结合ant design框架, 并且可以同时在PC和移动端运行: 主要包含登录和注册组件.头部和脚部组件.新闻块类组件.详情页组件.评论和收藏组件等: ...

  3. 【转】JDBC学习笔记(10)——调用函数&存储过程

    转自:http://www.cnblogs.com/ysw-go/ 如何使用JDBC调用存储在数据库中的函数或存储过程: * 1.通过COnnection对象的prepareCall()方法创建一个C ...

  4. stm32的定时器学习

    看了几篇博客之后,对这个定时器也有了一些认识,其实和51差不多,就是配置定时器的时候多了几个步骤而已. 其中很好的一片是:http://blog.sina.com.cn/s/blog_49cb4249 ...

  5. 对GPIO_Init(GPIOx,&GPIO_InitStructure)的理解

    今天学习stm32流水灯程序的时候,看到了"GPIO_Init(GPIOB, &GPIO_InitStructure)"这个函数,参数1"GPIOB"很 ...

  6. 如何给远程主机开启mysql远程登录权限

    # 如何给远程主机开启mysql远程登录权限 > 在千锋学习PHP的有些学员会在阿里或者腾讯云去购买自己的云服务器.在初级阶段的项目上线时会遇到一个问题,就是无法使用远程连接工具操作自己线上的m ...

  7. mysql分页查询优化

    由于MySql的分页机制:并不是跳过 offset 行,而是取 offset + N 行,然后返回放弃前 offset 行,返回N 行, 所以当 offset 特别大的时候,效率就非常的低下,要么控制 ...

  8. 玩玩kafka1 单机安装

    今天主要来一遍kafka单机版的安装,比较简单易上手,关于kafka的介绍我就不贴了,大家可以自行搜索 1.首先将tgz包传到centos目录下(这里使用xftp工具) ok后查看一下tgz包是否已经 ...

  9. 576. Out of Boundary Paths

    Problem statement: There is an m by n grid with a ball. Given the start coordinate (i,j) of the ball ...

  10. 并发容器之CopyOnWriteArrayList（转载）

    Copy-On-Write简称COW,是一种用于程序设计中的优化策略.其基本思路是,从一开始大家都在共享同一个内容,当某个人想要修改这 个内容的时候,才会真正把内容Copy出去形成一个新的内容然后再改 ...