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

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

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

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

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 Construct或W3 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排名靠后……乃至后期的维护都会变得艰难。
学习语义，理解语义，运用语义。才是正道。

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

【热门文章】