标签的嵌套规则

代码演示

<!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. 【shell编程基础2】shell组合应用之一：重定向和逻辑

    这篇主要讲下 数据的重定向,在shell脚本中有些重要的输出重定向为文件的形式输出来 逻辑方式的多个命令组合,可以很方便的进行一些判断 数据流重定向 数据流重定向:大致上的意思就是本该输出到屏幕上的数 ...

  2. EXCEL数据导入数据库实例(NPOI)

    Default.aspx 页面代码: 引用了:    <script src="../../js/jquery.easyui.min.js" type="text/ ...

  3. (转载)Google的PageRank算法

    本文由张洋(敲代码的张洋)投稿于伯乐在线. 本文转载于:http://blog.jobbole.com/23286/ 很早就对Google的PageRank算法很感兴趣,但一直没有深究,只有个轮廓性的 ...

  4. ajax的介绍

    $.ajax({ 11 url: "article.asmx/GetArticleByID", 12 type: "POST", 13 datatype: &q ...

  5. Linux基础网络搭建实验

    一.实验目标 利用3台虚拟机,搭建vmnet2和vmnet3两个host-only网络,实现两个网络的互联 二.实验环境   内网 外网 网关 IP 192.168.0.10/24 202.3.4.1 ...

  6. Vue 普通对象数据更新与 file 对象数据更新

    最近在做一个多图片上传的组件,需求是做到多文件依次上传,并显示上传进度条. 逻辑部分实现了以后,在更新进度条视图的时候出现一点问题:动态计算生产的进度 progress 属性不会自动更新. 原来的代码 ...

  7. python自动化测试应用-番外篇--接口测试1

    篇1                 book-python-auto-test-番外篇--接口测试1 --lamecho辣么丑 1.1概要 大家好! 我是lamecho(辣么丑),至今<安卓a ...

  8. 纯JS单页面赛车游戏代码分享

    分享一个以前写的小游戏,纯js游戏,代码很简单.欢迎大家来喷呦! 效果图: 代码展示://直接复制到html文件即可 支持IE9+版本 <!DOCTYPE html> <html&g ...

  9. codeforces 757F Team Rocket Rises Again

    链接:http://codeforces.com/problemset/problem/757/F 正解:灭绝树. mdzz倍增lca的根节点深度必须是1..我因为这个错误调了好久. 我们考虑先求最短 ...

  10. phpcms笔记

    一.建立虚拟站点 1.先更改www目录下的站点名称,再找到apache, 打开"Apache2\conf\extra"下的"httpd-vhosts.conf" ...