随着时间的推移,我们学习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. Unity3d 脚本基础 思维导图

    盘点下Unity的脚本知识.

  2. WIN7 共享网络方法

    WIN7 共享网络方法 第一步: 按WIN+R调出“运行”栏,在“运行”菜单栏输入“cmd”,出现命令提示符,输入命令“netsh wlan set hostednetwork mode=allow ...

  3. js每天进步一点点2

    JS之图片的切换效果

  4. JS代码格式化和语法着色

    有时为了研究学习一些格式不规范的JS代码段,需要将代码段格式化一下,这样思路就会清晰多了,网上找到此款格式化的工具,将以下代码保存为html格式文件即可使用 <html> <head ...

  5. js基础篇——localStorage使用要点

    localStorage主要用来替代cookie,解决cookie(可参考cookie使用要点)读写困难.容量有限的问题.localStorage有以下几个特点 1.localStorage是一个普通 ...

  6. chrome dev debug network 的timeline说明

    在使用chrome的时候F12的开发者工具中有个network,其中对每个请求有个timeline的说明,当鼠标放上去会有下面的显示: 这里面的几个指标在说明在chrome使用文档有说明: 下面我用人 ...

  7. [python基础]关于包,类,模块的那些事儿

    转载请注明出处:http://www.cnblogs.com/codefish/p/5032753.html 在理解python的包,类,模块之前,我一直是将他类比为dll,C#的类,命名空间的这种参 ...

  8. CSS 居中方法集锦

    记录收集纯CSS层面实现的水平.垂直居中方法可用于块级.行内快.内联元素以及文字图片等. 水平或垂直居中 1.1 text-align 1.2 margin 1.3 line-height 1.4 p ...

  9. C# 之httpwatch 缩减HttpWatch成可以进行二次开发的代码

    写在前面 本文由来 特别鸣谢 支持开源 1. 写在前面 也是由于项目需要,之前对抓包,有两个方向的理解 1.使用代理抓包,自己写一个中转服务器,就可用拿到,发送和服务器返回的任何数据了.(因为操作的时 ...

  10. [教学] Firemonkey TImageList 加入原寸图片

    下面示范 Firemonkey TImageList 加入一张原始尺寸图片的方法: 使用代码加图 if Assigned(List) then begin MyList.Items.Clear; do ...