HTML 基础回顾

对于 HTML 在浏览器渲染时,容错能力很强,所以我们在开发时也基本忽略了元素和元素之间的关系。想到这里得原因主要是自己对元素嵌套这一块模糊了。

HTML5 标准 说实话,这个标准真得是懒的读啊,当然造成这个原因是感觉花的时间不值。要是少玩点游戏就好了。

在 HTML5 里对于元素有定义【 Element definitions】。包括以下6部分内容:

  • Categories: A list of categories to which the element belongs.
  • Contexts in which this element can be used
  • Content model:A normative description of what content must be included as children and descendants of the element.
  • Tag omission in text/html:A non-normative description of whether, in the text/html syntax, the start and end tags can be omitted. This information is redundant with the normative requirements given in the optional tags section, and is provided in the element definitions only as a convenience.
  • Content attributes: A normative list of attributes that may be specified on the element (except where otherwise disallowed), along with non-normative descriptions of those attributes. (The content to the left of the dash is normative, the content to the right of the dash is not.)
  • DOM interface A normative definition of a DOM interface that such elements must implement.

在内容模型【Content model】中:分为7个内容模型或者说是7个分类:

  • Metadata content
  • Flow content
  • Sectioning content
  • Heading content
  • Phrasing content
  • Embedded content
  • Interactive content

每个分类下的元素和不同分类之间的关系在标准文档中可以知悉: https://www.w3.org/TR/html5/dom.html#elements

需要注意的嵌套规则:

  • a元素里不可以嵌套交互式元素(<a>、<button>、<select>等)
  • <p>里面不可以嵌套address, article, aside, blockquote, div, dl, fieldset, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, main, nav, ol, p, pre, section, table, or ul,等
  • 当然这里的内容在文档都是有表述的,更多的情况在文档中查询即可。

还有很多相关的概念和专有说法,也只有在面临问题时才能清楚。