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标签的嵌套规则的更多相关文章
- XHTML标签的嵌套规则分析
在 XHTML 的语言里,我们都知道:ul 标签包含着 li.dl 标签包含着 dt 和 dd——这些固定标签的嵌套规则十分明确.但是,还有许多标签是独立的,它们没有被捆绑在一起,比如 h1.div. ...
- XHTML标签的嵌套规则--很基础很重要
XHTML的标签有许多:div.ul.li.dl.dt.dd.h1~h6.p.a.addressa.span. strong……我们在运用这些标签搭建页面结构的时候,是可以将它们无限嵌套的,但是,嵌套 ...
- html标签的嵌套规则分析
1.a标签最好不要嵌套块级元素,可以嵌套内联元素,但是不能嵌套a标签和input之类的标签.能嵌套的标签像,等等. 2.ul和ol的子元素不能是别的元素只能是li,不能是别的比如div等,但是li中可 ...
- 超级简单却不知道:html标签的嵌套规则
XHTML的标签有许多:div.ul.li.dl.dt.dd.h1~h6.p.a.addressa.span. strong……我们在运用这些标签搭建页面结构的时候,是可以将它们无限嵌套的,但是,嵌套 ...
- day63-html-列表,表格,标签的嵌套规则
1.列表 1.无序列表 <ul type="disc"> <li>a</li> <li>b</li> </ul&g ...
- 常见的HTML标签的嵌套规则
众所周知,HTML标签有两类: 块级元素div.h1~h6.address.blockquote.center.dir.dl.dt.dd.fieldset.form.hr.isindex.menu.n ...
- html 标签的嵌套规则
1. 块元素可以包含内联元素或某些块元素,但内联元素却不能包含块元素,它只能包含其它的内联元素: <div><h1></h1><p></p> ...
- HTML5标签嵌套规则
× 目录 [1]分类 [2]子元素 [3]总结 前面的话 在html5中,<a>元素的子元素可以是块级元素,这在以前是被认为不符合规则的.本文将详细介绍html5的标签嵌套规则 分类 ht ...
- HTML标签嵌套规则
摘要: 最近在整理项目时发现有些同事写的页面代码嵌套的太多,而且有些嵌套不对,比如<a><div>内容</div></a>.虽然功能实现了,但是对于浏 ...
随机推荐
- HTML5移动Web开发(二)——配置移动开发环境以及简单示例
一.准备 1.配置本地网络服务.对于Windows.Mac和Linux,最容易的方法是使用免费的XAMPP软件:http://www.apachefriends.org/en/index.html X ...
- Nutch源码阅读进程2---Generate
继之前仓促走完nutch的第一个流程Inject后,再次起航,Debug模式走起,进入第二个预热阶段Generate~~~ 上期回顾:Inject主要是将爬取列表中的url转换为指定格式<T ...
- C++程序设计之四书五经[转自2004程序员杂志]--下篇
C++程序设计之四书五经(下篇) 作者:荣耀 我在上篇中“盘点”了TCPL和D&E以及入门教程.高效和健壮编程.模板和泛型编程等方面共十几本C++好书.冬去春来,让我们继续C++书籍精彩之旅. ...
- Elasticsearch——分词器对String的作用
更多内容参考:Elasticsearch学习总结 关于String类型--分词与不分词 在Elasticsearch中String是最基本的数据类型,如果不是数字或者标准格式的日期等这种很明显的类型, ...
- 安装elasticsearch及中文IK和近义词配置
安装elasticsearch及中文IK和近义词配置 安装java环境 java环境是elasticsearch安装必须的 yum install java-1.8.0-openjdk 安装elast ...
- 百度地图与HT for Web结合的GIS网络拓扑应用
在<HT for Web整合OpenLayers实现GIS地图应用>篇中介绍了HT for Web与OpenLayers的整合,不少朋友反应国内用得比较多的还是百度地图,虽然HT整合百度地 ...
- 单例模式ARC和非ARC
ARC环境下的单例模式: static id _instance = nil; + (id)allocWithZone:(struct _NSZone *)zone { if (_instance = ...
- 解析导航栏的url--selnium,beautifulsoup实战
前段时间做ui自动化测试的时候,导航栏菜单始终有点问题,最后只好直接获取到url,然后直接使用driver.get(url)进入页面: 包括做压测的时候,比如我要找出所有报表菜单的url,这样不可能手 ...
- Centos6.5 python升级成2.7版本出现的一些问题解决方法
由于功能及程序依赖,需要将Centos上的python从2.6升级成2.7,把碰到的一些问题记录如下: 安装好2.7后将原来的/usr/bin/python改成/usr/bin/python26,并将 ...
- 解决:HTML中多文本域(textarea)回车后数据存入数据库,EL表达式取出异常。
问题描述: 当多文本域(textarea)回车后数据存入数据库. EL表达式取出异常,值换行倒置页面报错. 问题解决: 存值脚本代码,提交前转换\n为<br/>. <script t ...