HTML标签的嵌套
随着时间的推移,我们学习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. ...
- HTML标签的嵌套规则
我在平时在写html文档的时候,发现不太清楚标签之间的嵌套规则,经常是想到什么标签就用那些,后来发现有些标签嵌套却是错误的.通过网上找资料,了解了html标签的嵌套规则. 一.HTML 标签包括 块级 ...
- XHTML标签的嵌套规则--很基础很重要
XHTML的标签有许多:div.ul.li.dl.dt.dd.h1~h6.p.a.addressa.span. strong……我们在运用这些标签搭建页面结构的时候,是可以将它们无限嵌套的,但是,嵌套 ...
- 为什么p标签不能嵌套div??
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- 火狐下<a>标签里嵌套的<select>不能选的bug
今天遇到了这个问题,网上一找就找到原因了:在狐火下<a>标签里嵌套的<select>不能选 可是我查找这个问题过程中依然饶了一些时间,原因是在<a>标签没有写hre ...
- html标签的嵌套规则分析
1.a标签最好不要嵌套块级元素,可以嵌套内联元素,但是不能嵌套a标签和input之类的标签.能嵌套的标签像,等等. 2.ul和ol的子元素不能是别的元素只能是li,不能是别的比如div等,但是li中可 ...
- HTML中部分标签的嵌套问题
书写HTML结构的时候,对于标签的嵌套问题,在我发现这个问题之前,都不在自己的考虑之中,还傻傻的以为标签之间是可以进行百搭的! 其实,有些标签是不能进行随意嵌套,如果你没有深受其害,你是不会发现它的存 ...
- 超级简单却不知道:html标签的嵌套规则
XHTML的标签有许多:div.ul.li.dl.dt.dd.h1~h6.p.a.addressa.span. strong……我们在运用这些标签搭建页面结构的时候,是可以将它们无限嵌套的,但是,嵌套 ...
- PHPCMS V9标签循环嵌套调用数据的方法
PHPCMS V9的标签制作以灵活见长,可以自由DIY出个性的数据调用,对于制作有风格有创意的网站模板很好用,今天就介绍一个标签循环嵌套方法,可以实现对PC标签循环调用,代码如下: 在此文件里/php ...
随机推荐
- Android自定义ImageView圆形头像
效果图: 代码如下: RoundImageView.java import cn.comnav.evaluationsystem.R; import android.content.Context; ...
- ArrayBuffer简析
关键技术: JavaScript,ArrayBuffer,Type Array,DataView,Web Worker,性能对比 ArrayBuffer 在文章开头列出了这些关键字,主要就是让大家了解 ...
- Activity的四种launchMode《转》
转自:http://blog.csdn.net/liuhe688/article/details/6754323/ Activity的四种launchMode. launchMode在多个Activi ...
- 【AngularJS】—— 12 独立作用域
前面通过视频学习了解了指令的概念,这里学习一下指令中的作用域的相关内容. 通过独立作用域的不同绑定,可以实现更具适应性的自定义标签.借由不同的绑定规则绑定属性,从而定义出符合更多应用场景的标签. 本篇 ...
- 原生js编写的安全色拾色器
<html > <head> <meta http-equiv="Content-Type" content="text/html; cha ...
- 【转】FastCgi与PHP-fpm关系
刚开始对这个问题我也挺纠结的,看了<HTTP权威指南>后,感觉清晰了不少. 首先,CGI是干嘛的?CGI是为了保证web server传递过来的数据是标准格式的,方便CGI程序的编写者. ...
- File Type Icons – 免费扁平设计风格文件类型图标集
这套扁平风格图标集包含一组62个不同的文件类型图标,有 AI,ICO和 PNG 三种格式.他们采用长阴影模式的扁平化设计,看起来非常整齐和现代化.这些图标是完全免费的,可以用于商业项目. 您可能感兴趣 ...
- flexbox简介
flexbox简介 什么是flexbox flexbox是一种新的布局方式,这种布局方式是2009年W3C提出的方案.它可以简便,完整,完成页面的布局.目前,它已经得到所有浏览器的支持. 但是flex ...
- 细说ASP.NET Core与OWIN的关系
前言 最近这段时间除了工作,所有的时间都是在移植我以前实现的一个Owin框架,相当移植到到Core的话肯定会有很多坑,这个大家都懂,以后几篇文章可能会围绕这个说下,暂时就叫<Dotnet Cor ...
- nth-child和蝉原则实现的奇妙随机效果(译)
此文翻译自charlotte jackson的<Magic randomisation with nth-child and Cicada Principle> 在做伪装的随机模式时将nt ...