今天在做读书笔记的时候(目前使用HTML书写),遇到一个困惑:p元素不能包含什么?不想不知道,一想吓一跳。正如最近几天我在反思的:自己对HTML标准理解不够深入,导致自己在很多地方认识很模糊,进而产生模棱两口的情况。我是有着选择强迫症的,这是我不能忍受,多种选择的我定要区分出最佳出来的(在某些时候其实这也挺好)。比如今天的问题:由p元素不能包含?就暴露了自己对行内元素以及块元素区认识不深刻(这是委婉的说法,实际我一直对此的认识为空白),扯远点还有对语义化认识不足。
起初我仅仅想知道p元素不能包含哪些元素,想找出有没有业界约定俗成的做法。但是这样Google显然是无果的,但幸运的是我发现了这篇文章 《HTML中为何P标签内不可包含DIV标签?》 ,这篇文章完美的得解决了我心中的疑惑,并且将我的思考思考方向引领到正确的方向上去。
本文开头提出的问题可以转化为:p元素是什么?既然是块元素,那么问题就是块级块元素不能包涵哪些元素。首先我们需要了解HTML约束的分类。在网上胡乱Google到这些(也无法考证正确性)。HTML元素分为三大种:
- 顶级元素(Top-level element)
- 块级元素(Block-level element)
- 内联元素(Inline element)
下面是对三中元素分类的解释:
顶级元素(Top-level element):
包括html、body、frameset、表现如Block-level element, 属于高级块级元素。这个说法也比较少见,也无法验证是否正确(这种说法在XML中倒是有)。鉴于关于顶级元素的知识点对于解释本文疑惑无太大帮助,姑且跳过。
块级元素(Block-level element):
顾名思义就是以块显示的元素,比如我们常用的 p
, h1
~h6
, div
, ul
默认状态下都是属于块级元素。
- 高度、行高以及顶和底边距都可控制
- 宽度缺省是它的容器的 100%,除非设定一个宽度。
- 默认状态下每次都占据一整个行,后面的内容也必须再新起一行显示。
address |
地址 | blockquote |
块引用 | center |
居中对齐块 | dir |
目录列表 |
---|---|---|---|---|---|---|---|
dl |
定义列表 | div |
块级元素 | filedset |
form控制组 | form |
交互表单 |
h1 |
大标题 | h2 |
副标题 | h3 |
3级标题 | h4 |
4级标题 |
h5 |
5级标题 | h6 |
6级标题 | hr |
水平分割线 | menu |
菜单列表 |
ol |
排序表单 | p |
段落 | table |
表格 | ul |
非排序列表 |
内联元素(Inline element)
通俗点来说就是文本的显示方式,与块级元素相反,我们常用到的a、span、em都属于内联元素。在《CSS权威指南》这样定义到,“任何不是块级元素的可见元素都是内联元素。
- 内联元素的高、行高及顶和底边距不可改变
- 其宽度就是自身文字或者图片的宽度,不可改变
- 内联元素依附其他块级元素存在, 紧接于被联元素之间显示, 而不换行
通过改变内联元素CSS的display为inline或者给内联元素添加float属性,可以将行内元素转化为块级元素。这时候的内联元素,虽然具有了块状元素的特征,但是这两种有一点区别:
- display:block:彻头彻尾和块元素一模一样、都要单独占一行、从左至右,前提没有width和height属性。严格遵循流动布局模型块元素的流动布局方式,自上至下流动。
- float:大小是恰好能将内容包含、并且右侧浮动,可以多个在一行。
当加上position:absolute/relative的时候,块状元素和内联元素就不受父级区域的限制了,可以移动到任何位置,此时如果加上width和height属性,那么就具有层的特征了(加上width和height 还有一点好处,就是可以兼容IE浏览器了,所有的浏览器实现效果都一样了)。
a |
锚点 | abbr |
缩写 | acronym |
首字 | b |
粗体 |
---|---|---|---|---|---|---|---|
big |
大字体 | br |
换行 | cite |
引用 | code |
计算机代码(在引用源代码的时候需要) |
dfn |
定义字段 | em |
强调 | font |
字体设定(不推荐) | i |
斜体 |
img |
图片 | input |
输入框 | kbd |
定义键盘文本 | label |
表格标签 |
q |
短引用 | s |
中划线(不推荐) | smap |
定义范例计算机代码 | select |
项目选择 |
small |
小字体文本 | span |
常用内联容器,定义文本区块 | strike |
中划线 | strong |
粗体强调 |
sub |
下标 | sup |
上标 | textarea |
多行文本输入框 | tt |
电传文本 |
u |
下划线 | var |
定义变量 | del |
删除 | center |
居中 |
搞清楚了内联元素与块级元素的区别,我们再引入这样一条规则: _XHTML DTD中规定p元素中不能插入块级元素,包括自身, 来源 _。所以问题的答案一下子豁然开朗了(实际上我在书写本文的时候还在犯这个错误)。
由此继续引申下去,那么HTML标签正确的嵌套应该是什么呢?
回到上文我可再次回顾HTML元素分类,我们换一种名称来称呼他们
- 顶级元素(Top-level element)——一集元素
- 块级元素(Block-level element)——二级元素
- 内联元素(Inline element)——三级元素
除了上表列出元素,在HTML里有几个元素是比较特别的:ul、ol、dl、table,它们的子一层必须是指定元素,ul、ol的子一级必须是li;dl的子一级必须是dt或者dd; table的子一层必须是caption或thead、tfoot、tbody等,而再子一层必须是tr(tr只存在于thead、tfoot、tbody中),之后才是可放内容的td或者th。
我的理解就是三集元素不能包含《二级元素不能包含《一集元素,以此类推。二级元素可以自由嵌套(p标签除外):例如我们可以把ul嵌在div里面,也可以把div嵌在li里面。
一丝不苟严谨可爱的老外们可不会放过。 Allowed nesting of elements in HTML 4 Strict (and XHTML 1.0 Strict)这篇文章就解释了该问题。我将文章中重点截成图片更加容易看清:
update:
本文的文成参考了如下文章:
更新于:2013年5月5日 2:30