随着时间的推移,我们学习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. web基础---->request的请求参数分析

    当contentType为application/json的时候,在servlet中通过request.getParameter得到的数据为空.今天我们就java的请求,分析一下request得到参数 ...

  2. hadoop中MapReduce多种join实现实例分析

    转载自:http://zengzhaozheng.blog.51cto.com/8219051/1392961 1.在Reudce端进行连接. 在Reudce端进行连接是MapReduce框架进行表之 ...

  3. 补充ICache

    using System; using System.Collections.Generic; using System.Threading.Tasks; namespace System { /// ...

  4. Elasticsearch聚合 之 Ip Range IP地址范围聚合

    相对于range和date range,这个聚合就是能够表示IP的范围. 普通IP模式 DSL命令: { "aggs":{ "ip_ranges":{ &quo ...

  5. C# 可空值类型

    一个值类型永远不可能为null,但是当数据库中的某列数据允许为空时,或者另一种语言中的数据类型(引用类型)对应C#的是值类型,当需要和另外的语言交互时,就有可能需要处理空值的问题. 所以,CLR中引用 ...

  6. C语言学习012:将代码文件分成多个文件

    如果将所有的代码都写到一个文件中,当对于小项目来说不会有什么问题,但是当它一个很大的工程的时候,如果将所有代码都写到一个文件中,不但开发起来很困难,维护更是头疼,所以我们应该将代码按不同的功能分别建立 ...

  7. 【要什么自行车】ASP.NET MVC4笔记01:Asp.net MVC 分页,采用 MvcPager 和CYQ.Data来分页

    Control: ) { ; ; using (MAction action = new MAction("brain")) { MDataTable table = action ...

  8. 使用MiniProfiler跟踪MVC + EF + Bootstrap 2 权限管理系统的性能消耗

    安装MiniProfiler 在MVC + EF + Bootstrap 2 权限管理系统入门级(附源码)文章中下载了它的源码,调试模式下打开一个页面都要再2.5秒以上,所以使用MiniProfile ...

  9. LeetCode121:Best Time to Buy and Sell Stock

    题目: Say you have an array for which the ith element is the price of a given stock on day i. If you w ...

  10. [函数] Unicode 检查字符串是否含中文字

    // 字串含中文 by Aone function IsIncludeChinese(Str: String): Boolean; var i: Integer; UCS4Str: UCS4Strin ...