标签的嵌套规则

代码演示

<!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. html的常用基础应用

    HTML结构   如下一段最简单的HTML代码:<html>     <head>          <title>HTML页面</title>     ...

  2. 日历上添加活动通知（Asp.net）

    <div id="calendar_contain"> </div> <script language="javascript" ...

  3. 【转】JDBC学习笔记(9)——DBUtils的使用

    转自:http://www.cnblogs.com/ysw-go/ 使用DBUtils提供的功能需要使用commons-dbutils-1.6.jar这个JAR包,在Apache官网可以下载到 使用D ...

  4. Unity C# 多态 委托 事件 匿名委托 Lambda表达式 观察者模式 .NET 框架中的委托和事件

    一.多态 里氏替换原则: 任何能用基类的地方,可以用子类代替,反过来不行.子类能够在基类的基础上增加新的行为.面向对象设计的基本原则之一. 开放封闭原则: 对扩展开放,意味着有新的需求或变化时,可以对 ...

  5. HTTP上传 文件上传 图片上传 HTTP上传原理 文件上传原理 图片上传原理

    1.概述 在最初的http协议中,没有上传文件方面的功能.rfc1867(http://www.ietf.org/rfc/rfc1867.txt )为http协议添加了这个功能.浏览器按照此规范将用户 ...

  6. java线程控制方法

    一.中断线程 1.Thread.sleep()让线程进入睡眠状态,放弃CPU的占用暂停若干毫秒使用方法: public class runable implements Runnable { @Ove ...

  7. centos7安装redis3.0和phpredis扩展详细教程(图文)

    整理一下centos7安装redis3.0和phpredis扩展的过程,有需要的朋友可以拿去使用. 一.安装redis3.0 1.安装必要的包 yum install gcc 2.centos7安装r ...

  8. 初学T4模板

    1.T4模板语法 <#@ template language="C#v3.5" hostSpecific="true" debug="true& ...

  9. bzoj4816 [Sdoi2017]数字表格

    Description Doris刚刚学习了fibonacci数列.用f[i]表示数列的第i项,那么 f[0]=0 f[1]=1 f[n]=f[n-1]+f[n-2],n>=2 Doris用老师 ...

  10. hdu2819二分图匹配

    Given an N*N matrix with each entry equal to 0 or 1. You can swap any two rows or any two columns. C ...