HTML P不能包含块级元素(包括自身)


======================================================
注:本文源代码点此下载
======================================================

评论

2264144

#1楼

2011-03-05 08:48

小毛驴

还真没注意过

回复 引用 查看

#2楼

2011-03-05 09:44

风子2

可以用css样式设置 display:block?

回复 引用 查看

#3楼

2011-03-05 09:54

ivony...

这就是可选结束标签的恼人之处!!!

与样式没有任何关系,这个完全取决于元素名,即元素被视为是块级元素,就会立即结束

元素。即使其有style="display: inline;"。

之前的ie版本应该是

遇到另一个

元素则立即结束。

回复 引用 查看

#4楼

2011-03-05 09:56

ivony...

但如果不是可选结束标签,由于dom分析时不用考虑自动结束,所以即使胡乱嵌套也不会破坏dom结构。

xhtml废除了所有可选结束标签,这是一个重大进步,html5为了向下兼容重新制定啰嗦冗余的可选结束规则完全是一种历史的倒退!

回复 引用 查看

#5楼

2011-03-05 13:35

gray zhang

p里放div本质上就是对html的语义性认识不足的结果了

但是楼主你的结论是正确的,那张图也是正确的,只是还没有说到点子上,少了几个关键的名词:

p元素的内容模型是phrasing content,注意内容模型和display为block或者inline没有任何关系

那么phrasing content是什么呢?是由0-n个phrasing element组成的内容

那么phrasing element有哪些呢?

a | em | strong | small | mark | abbr | dfn | i | b | s | code | var | samp | kbd | sup | sub | q | cite | span | bdo | bdi | br | wbr | ins | del | img | embed | object | iframe | map | area | script | noscript | ruby | video | audio | input | textarea | select | button | label | output | datalist | keygen | progress | command | canvas | time | meter

回复 引用 查看

#6楼

2011-03-05 13:41

gray zhang

对了,那图里说的inline并不真的指默认为display:inline的元素,可以看到很多表单元素是display:inline-block的,包括iframe/object/canvas也一样,另外还有script/map/area这类可变元素,还有ins这种允许flow content的元素

回复 引用 查看

#7楼

2011-03-05 15:04

赵弟栋

@风子2

不管用的 p 结构大于表现

回复 引用 查看

#8楼

2011-03-05 15:49

ivony...

引用gray zhang:

p里放div本质上就是对html的语义性认识不足的结果了

但是楼主你的结论是正确的,那张图也是正确的,只是还没有说到点子上,少了几个关键的名词:

p元素的内容模型是phrasing content,注意内容模型和display为block或者inline没有任何关系

那么phrasing content是什么呢?是由0-n个phrasing element组成的内容

那么phrasing element有哪些呢?

a | em | strong | small | mark | abbr | dfn | i | b | s | code | var | samp | k...

不对吧:

html 4.01规范和dtd规定如下:

即p可以包含任意多个%inline,

%inline是什么?

即,p可以包含inline元素,inline元素包含:文本、文本样式元素、段落元素、特殊元素和表单控件。

回复 引用 查看

#9楼

2011-03-05 15:59

gray zhang

@ivony...

这个和我说的差不多

%inline并不是指默认display为inline的元素,他包括了

#pcdata

%fontstyle

%phrase

%special

%formctrl

其中%formctrl多数为display:inline-block

%special里包含了img | object | iframe之类奇怪的元素

因此加起来,和我给的元素也差不多

当然我看的是html5的标准文档,可能解释角度有所不同,标准里把元素分为3类:

metadata element

flow element

phrasing element

回复 引用 查看

#10楼

2011-03-05 16:10

ivony...

引用gray zhang:

@ivony...

这个和我说的差不多

%inline并不是指默认display为inline的元素,他包括了

#pcdata

%fontstyle

%phrase

%special

%formctrl

其中%formctrl多数为display:inline-block

%special里包含了img | object | iframe之类奇怪的元素

因此加起来,和我给的元素也差不多

当然我看的是html5的标准文档,可能解释角度有所不同,标准里把元素分为3类:

metadata element

flow element

phrasing element

我想你会慢慢理解我为什么强烈反对html5规范关于可选结束的规定的。

你说的还是不准确,html5规范中,p可以包含的是phrasing content是没错,但“是由0-n个phrasing element组成的内容”是错误的。

摘自html5规范:

phrasing content is the text of the document, as well as elements that mark up that text at the intra-paragraph level. runs of phrasing content form paragraphs.

a (if it contains only phrasing content) abbr area (if it is a descendant of a map element) audio b bdi bdo br button canvas cite code command datalist del (if it contains only phrasing content) dfn em embed i iframe img input ins (if it contains only phrasing content) kbd keygen label map (if it contains only phrasing content) mark math meter noscript object output progress q ruby s samp script select small span strong sub sup svg textarea time var video wbr text

请注意元素名后面跟着括号的那几个,我用a举例:

a (if it contains only phrasing content)

这里说,a是phrasing content,仅当其只包含phrasing content的时候。

换言之:

this is a block

在这段代码里,a虽然是你所说的phrasing element,但这个却不是phrasing content。

也就是说

必须在处结束。

坑爹的!我到看看到时候有几个浏览器能严格遵守!这使得dom解析前所未有的复杂。

回复 引用 查看

#11楼

2011-03-05 16:13

gray zhang

@ivony...

对这一点我的理解是这样的,phrasing content指直接子代和间接子代都只能是phrasing element,标准中自然为了避免误会明确说明了,不然至少有a和ins2个元素是包括flow content的

回复 引用 查看

#12楼

2011-03-05 16:17

ivony...

引用gray zhang:

@ivony...

对这一点我的理解是这样的,phrasing content指直接子代和间接子代都只能是phrasing element,标准中自然为了避免误会明确说明了,不然至少有a和ins2个元素是包括flow content的

坑爹的是,p是可选结束的。换言之遇到我上面那段html是合法的,只要我省略了

,浏览器必须自己去搞清楚这个

元素的范围。

回复 引用 查看

#13楼

2011-03-05 16:18

gray zhang

@ivony...

必须的-w-所以我个人而言一直在努力探究浏览器的容错规律,只在可省的时候去省

回复 引用 查看

#14楼

2011-03-05 16:21

ivony...

引用gray zhang:

@ivony...

必须的-w-所以我个人而言一直在努力探究浏览器的容错规律,只在可省的时候去省

其实我的意见就是,这规律就应该白纸黑字写清楚,这样我们都happy了。

我做html解析都快被烦死了。。。。

回复 引用 查看

#15楼

2011-03-05 16:33

gray zhang

@ivony...

标准没写明白的东西太多,浏览器各自实现吧,html解析分为tokenization和dom tree construction两个部分,单纯的xml分析或者正则分析都是不可能成功的

回复 引用 查看

#16楼

2011-03-05 16:39

ivony...

引用gray zhang:

@ivony...

标准没写明白的东西太多,浏览器各自实现吧,html解析分为tokenization和dom tree construction两个部分,单纯的xml分析或者正则分析都是不可能成功的

呵呵,jumony parser正是这样做的,jumonyreader负责tokenization,htmlparserbase的派生类则负责dom tree construction,还有一个ihtmldomprovider实例负责创建dom对象实例。

任何人可以在这个基础上做自己的html解析器(派生重写),自己决定规范的实现。

我还是建议不要省,否则哪天遇上譬如说我写的解析器了,在这些没写清楚的东西上有出入了咋办?

回复 引用 查看

#17楼[楼主]

2011-03-05 16:51

snandy

gray zhang,ivony。谢谢你们充满激情火花又深入的讨论。学习了..

回复 引用 查看

#18楼

2011-12-07 15:49

yzdever

这个问题遇到过

回复 引用 查看


======================================================
在最后,我邀请大家参加新浪APP,就是新浪免费送大家的一个空间,支持PHP+MySql,免费二级域名,免费域名绑定 这个是我邀请的地址,您通过这个链接注册即为我的好友,并获赠云豆500个,价值5元哦!短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了,每天挂广告赚50+元哦,呵呵,饭钱不愁了,\(^o^)/
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值