随着时间的推移,我们学习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. CSS Vocabulary – CSS 词汇表,你都掌握了吗?

    CSS 是前端开发必备技能,入门容易,深入难.比如像 Pseudo-class.Pseudo-element.Media query.Media type 以及 Vendor prefix 的概念,很 ...

  2. PHP面向对象中的重要知识点(一)

    1. __construct: 内置构造函数,在对象被创建时自动调用.见如下代码: <?php class ConstructTest { private $arg1; private $arg ...

  3. Azure REST API (2) Azure Storage

    <Windows Azure Platform 系列文章目录> 注意:本文适用于国内由世纪互联运维的Azure China. 本文将会介绍如何使用REST API来直接访问Storage ...

  4. redis学习教程之一基本命令

    参阅redis中文的 互动教程(interactive tutorial)来学习的. 目录: 全局操作 get  get incr  自增 del 删除 expire 定时 list  队列 set ...

  5. 用Latex写学术论文:作者(Author)&摘要(Abstract)

    标题&作者 1.标题 \title{} "Line breaks (\\) may be used to equalize the length of the title lines ...

  6. 基于HT for Web矢量实现3D叶轮旋转

    在上一篇<基于HT for Web矢量实现2D叶轮旋转>中讲述了叶轮旋转在2D上的应用,今天我们就来讲讲叶轮旋转在3D上的应用. 在3D拓扑上可以创建各种各样的图元,在HT for Web ...

  7. 解决360、猎豹浏览器等极速模式下css3兼容问题

    有时候你会发现你写的animation动画的css3效果,在IE.谷歌.火狐等主流的新版本的浏览器的是没有什么兼容问题的,即便你不写前缀,也是可以显示动画效果的.然后,你本地在360浏览器或猎豹浏览器 ...

  8. Visual Studio Code编写HTML

    第一步双击打开Visual Studio Code,我们发现什么也没有,但是有一个默认打开的编辑页面.我们先点击File->OpenFoldor 为什么先这么做呢,有两个原因,第一个原因假如你有 ...

  9. mvc 对一个或者多个实体验证失败

    为了解决“对一个或者多个实体验证失败”,关闭调用SaveChanges() 的实体属性合法性验证(谨慎使用) db.Configuration.ValidateOnSaveEnabled = fals ...

  10. js jquery 异常

    1.0 TypeError: $(...).carousel is not a function原因:可能是没有引用或者引用了多个jquery:<script src="~/js/jq ...