随着时间的推移,我们学习html的基础知识有了大概的了解。而我发现,平时在写html文档的时候,发现不太清楚标签之间的嵌套规则,经常是想到什么标签就用那些,然而发现有时的标签嵌套却是错误的。通过网上找资料,了解了html标签的嵌套规则

一、HTML 标签包括 块级元素(block)、内联元素(inline) 
  1、块级元素 
  一般用来搭建网站架构、布局、承载内容的元素,如下: 
  address、blockquote、center、dir、div、dl、dt、dd、fieldset、form、h1~h6、hr、isindex、menu、noframes、noscript、ol、p、pre、table、ul 
  2、内嵌元素 
  一般用在网站内容之中的某些细节或部位,用以“强调、区分样式、上标、下标、锚点”等等,下面这些标签都属于内嵌元素,如下: 
  a、abbr、acronym、b、bdo、big、br、cite、code、dfn、em、font、i、img、input、kbd、label、q、s、samp、select、small、span、strike、strong、sub、sup、textarea、tt、u、var 
  二、HTML 标签的嵌套规则 
  1. 块元素可以包含内联元素或某些块元素,但内联元素却不能包含块元素,它只能包含其它的内联元素: 
  <div><h1></h1><p></p></div>
—— 对 
  <a href=”#”><span></span></a>
—— 对 
  <span><div></div></span> —— 错 
  2. 块级元素不能放在<p>里面: 
  <p><ol><li></li></ol></p>
—— 错 
  <p><div></div></p> —— 错 
  3. 有几个特殊的块级元素只能包含内嵌元素,不能再包含块级元素,这几个特殊的标签是: 
  h1、h2、h3、h4、h5、h6、p、dt 
  4. li 内可以包含 div 标签。

li 和 div标签都是装载内容的容器,地位平等,没有级别之分,li 标签连它的父级 ul 或者是 ol
都 可以容纳的。

 5. 块级元素与块级元素并列、内嵌元素与内嵌元素并列: 
  <div><h2></h2><p></p></div>
—— 对 
  <div><a
href=”#”></a><span></span></div> —— 对 
  <div><h2></h2><span></span></div>
—— 错

HTML标签的嵌套的更多相关文章

  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. 为什么p标签不能嵌套div??

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  5. 火狐下<a>标签里嵌套的<select>不能选的bug

    今天遇到了这个问题,网上一找就找到原因了:在狐火下<a>标签里嵌套的<select>不能选 可是我查找这个问题过程中依然饶了一些时间,原因是在<a>标签没有写hre ...

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

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

  7. HTML中部分标签的嵌套问题

    书写HTML结构的时候,对于标签的嵌套问题,在我发现这个问题之前,都不在自己的考虑之中,还傻傻的以为标签之间是可以进行百搭的! 其实,有些标签是不能进行随意嵌套,如果你没有深受其害,你是不会发现它的存 ...

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

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

  9. PHPCMS V9标签循环嵌套调用数据的方法

    PHPCMS V9的标签制作以灵活见长,可以自由DIY出个性的数据调用,对于制作有风格有创意的网站模板很好用,今天就介绍一个标签循环嵌套方法,可以实现对PC标签循环调用,代码如下: 在此文件里/php ...

随机推荐

  1. Yii2的深入学习--yii\base\Object 类

    之前我们说过 Yii2 中大多数类都继承自 yii\base\Object,今天就让我们来看一下这个类. Object 是一个基础类,实现了属性的功能,其基本内容如下: <?php namesp ...

  2. 使用webpack打包ThinkPHP的资源文件

    使用webpack打包ThinkPHP的资源文件 利用自己的空余时间一直在维护http://www.wx2share.com这个小网站,全是一个人在弄,由于只租得起虚拟空间,所以后台采用了简单方便的T ...

  3. java interface的两个经典用法

    1.Java多态接口动态加载实例 编写一个通用程序,用来计算没一种交通工具运行1000公里所需的时间,已知每种交通工具的参数都为3个整数A.B.C的表达式.现有两种工具:Car和Plane,其中Car ...

  4. NODE.JS学习的常见误区及四大名著

    NODE.JS学习的常见误区及四大名著 前段时间由于不满于社区里很多人对于NODE.JS的种种误解而写了一篇文章名为: NODE.JS之我见:http://www.cnblogs.com/pugang ...

  5. 在java中使用redis

    在java中使用redis很简单,只需要添加jedist.jar,通过它的api就可以了.而且,api和redis的语法几乎完全相同.以下简单的测试: 参考:http://www.runoob.com ...

  6. jQuery 图像裁剪插件Jcrop

    ,    // 设置框的最大宽度          setSelect: [ 175, 100, 400, 300 ]        });                $('#text-input ...

  7. C#根据身份证号码,计算生日、年龄、性别

    朋友谈及身份证相关的信息,才了解到原来省份证号码中包含了年龄和性别. 这样在数据库中,就不必单独留字段存放它们了(不过,要根据具体情况来,要是读取频率较高,还是单独列出为好),这样顺带解决了年龄变更的 ...

  8. GoodReader跨域访问HT for Web手册

    最近下载了GoodReader App,发现GoodReader中打开的页面不仅支持WebGL,同时还允许跨域访问资源,以前不少HT for Web手册的例子需要Web服务器发布的方式才能访问,否则需 ...

  9. iOS滤镜实现之Nashville【instagram】

    Nashville是Instagram众多滤镜中最惊艳的一款,独特的奶昔色调赋予照片童话般的唯美感觉.适用范围:营造浪漫唯美的感觉.的确如此啊有2张输入图像 顶点着色有2组坐标NSString *co ...

  10. 驱动开发利器Microsoft Windows Driver Kit 7.1.0下载

    在Windows 2000 与Windows XP 系统采用是WINDDK来开发WINDOWS驱动程序,我手头也有WINDDK,可是从Windows Vista开始之后,一般采用Microsoft W ...