为什么p元素里面不能加div?

Fakefish
  • 4.3k

p会被div切成两个标签,其他还有什么元素是这样的?

回复
阅读 6.4k
3 个回答
Humphry
  • 16.4k
✓ 已被采纳

0

p的语义是段落,内部应当包含一些默认内联的元素。

1

嵌套约束发生在什么时机?

图片描述

上图中的Tokenizer和Tree Construction的过程中,对嵌套进行了约束:

  • Tokenizer阶段,Whatwg的标准里有一些规则规定了五类元素的内部文本被如何解析,其中,Raw text elements和RCDATA elements不能自嵌套,即<script><textarea><title><style>无法自嵌套。这个我在这个回答里解释过了。
  • Tree Construction阶段,在Doctype层面约定的嵌套要求将会作用于这个过程

2

HTML4时代的dtd文件(即Document Type Definition)直接就可以下载:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

下面有一份小抄级别的XHTML嵌套规则(来源我没有用Google搜到,有人记得吗):

图片描述

进入HTML5时代,Doctype声明已经被简化成这玩意儿了:

<!DOCTYPE html>

由于在上一个时代限制太多而花样太少,HTML5不再基于SGML,因此,不存在一个官方的HTML5的DTD文件。HTML5中的嵌套规则取决于一些模式判断,这些模式定义在Whatwg HTML5 Spec: Tree ConstructW3 HTML5 Spec: Tree Construct中。LZ碰到的p被div斩断的行为就在这个时刻发生。

HTML5的相关规则设定:

Special

The following elements have varying levels of special parsing rules: HTML's address, applet, area, article, aside, base, basefont, bgsound, blockquote, body, br, button, caption, center, col, colgroup, dd, details, dir, div, dl, dt, embed, fieldset, figcaption, figure, footer, form, frame, frameset, h1, h2, h3, h4, h5, h6, head, header, hgroup, hr, html, iframe, img, input, isindex, li, link, listing, main, marquee, meta, nav, noembed, noframes, noscript, object, ol, p, param, plaintext, pre, script, section, select, source, style, summary, table, tbody, td, template, textarea, tfoot, th, thead, title, tr, track, ul, wbr, and xmp; MathML's mi, mo, mn, ms, mtext, and annotation-xml; and SVG's foreignObject, desc, and title.

Formatting

The following HTML elements are those that end up in the list of active formatting elements: a, b, big, code, em, font, i, nobr, s, small, strike, strong, tt, and u.

http://www.w3.org/TR/html5/syntax.html#the-stack-of-open-elements

3

可以在validator.nu里检验你的文档是否符合某个doctype的规则。

4

延展一下。

更容易被理解的规则,是语义。语义规划了元素的意涵和界限,对嵌套规则作出了一些要求。
语义是什么?在我看来,语义是开发者与UA、开发者与开发者乃至UA与UA的共识
(UA包括了大家常见的IE、Chrome、Firefox,也可以更广义地涵盖上phantomjs、爬虫等上下文。)
Web标准发展到现在,浏览器这边的容错已经十分强大了,很多东西都是非强制的、静默的,CSS出了个错网页照样渲染,语义有点问题粘吧粘吧文档树照样给你建个差不太多。然而在开发者这边,依然需要遵循共识,因为不遵循共识的坏处很多:浏览器解析不正常、别人看不懂你的文档结构、无数由于语义产生的行为、表现差别、SEO排名靠后……乃至后期的维护都会变得艰难。
学习语义,理解语义,运用语义。才是正道。

解析器的规则如此,比如 a 不能嵌套 a, form不能嵌套 form 等等。这种错误在开发者工具一看便知。另外一种是语义上不合规,比如 div 作为 ul 的子元素,不过浏览器仍然能解析。

不用特别去记,经常写的就那些。

要先弄明白,块级元素和行内元素的区别。

宣传栏