WHATWG HTMl是关于HTML的规范文档，鲜活的！ 它有一个专门面向于网页开发者的版本：DEV Edition

DEV Edition

  • Introduction
    • Is this HTML5?
    • Background
      • 一开始是用来描述科学文档的
    • Audience
      • 需要一定Web知识作为背景
    • Scope
      • 提供语义级别的标记语义和所关联的脚本用编口的规范
    • History
      • 2019年，WHATWG和W3C签了一个协定来共同开发此规范
    • Design notes
      • HTML一开始有很多部分很费解，以及存在不一致
      • HTML，其依赖的DOM用编口等技术，已经被开发了几十年
        • 一些bug从de-facto到de-jure
      • 但是，依然努力实现下面的设计目标
      • Compliance with other specifications
        • 纵然万般努力，无奈总有冲突
      • Extensibility
        • HTML提供一系列扩展机制，用于拓展语义
          • 可以使用class属性来拓展元素，效果上等同于自定义元素，可用于microformats。
          • data-*=""属性可以用于添加自定义的数据。
          • 创作者可以用使用<meta nmae="" content="">机制来添加页面元数据
          • 创作者可以用rel=""机制来注解链接，但需要提前定义之。用于microformats。
          • 创作者可以使用<script type="">来嵌入自定义类型。
          • 创作者可以使用JS原型机制来扩展用编口。
          • 创作者可能使用itemscope=""以及itemprop=""属性来嵌入可嵌套的名值对，分享给其他应用和站点。
      • HTML vs XML syntax
        • 此规范定义了一个抽象语言措辞，用于描述文档和应用，以及一些用编口用于内存中的资源表示（即DOM HTML或the DOM）交互
        • 有许多具体的语言措辞，可以用于传输抽象语言中定义的资源，本规范中定义了两个
        • 第一个是HTML措辞，以text/html为MIME type传输
        • 第二个是XML措辞，以XML的MIME type传输，比如application/xhtml+xml。XML措辞对错误的容忍度更小。有时候以XHTML称呼之。
        • DOM、HTML、XML措辞并不能表示相同的内容。HTML无法表示名字空间，但是在DOM以及XML中受到支持。noscript在HTML中支持，却不被DOM以及XML支持。只有DOM中的注释才支持-->字符串。
      • Structure of this specificsatoin
        • （过）
        • Typographic conventoins
          • （过）
      • A quick introduction to HTML
        • HTML文档是一颗包含元素和文本的树体
        • 元素由首尾标签以及内容构成（有些尾标签或内容可以忽略）
        • 标签可以嵌套作为其他标签的内容
        • HTML定义了可用的标签集合，以及标签的嵌套规则
        • 元素可以有属性，在首标签内指定
          • 属性是键值对，值的某些情况下必须带引号
          • 如果值为空的话，可以不指定
        • HTML在内存中表示为DOM树体，一般包含一个文档类型节点，若干元素节点，若干文本节点，可以包含注释节点，有时候会有ProcessingInstruction节点
          • 一般而言，html元素作为树体中的文档元素，也就是HTML文档中必须出现在那个位置的节点
            • html元素包含head和body，两者之间可以有文本
            • 历史原因，head之前的空白会被丢弃
            • 历史原因，body之后的空白会被计入body
        • DOM树体中的每个元素可以表示为一个对象，提供用编口给JS操作
        • HTML文档描述的是介质无关的交互性内容，可以展示给屏幕，或者通过语音合成器读出，或者布莱叶展示。与介质有关的绘制内容，通过CSS指定。
        • Writing secure applications with HTML
          • web的安全模型基于“origins”即内容来源。
          • 列举的例子包括XSS，以及CSRF，以及Clickjacking
        • Common pitfalls to avoid when using the scripting APIs
          • HTML中的脚本具有运行到完成的语义
          • 但是HTML的加载可以是渐进式的，脚本运行的时候，HTML可能没完全加载
          • 有两种应对办法：
            • event handler content attributes,
            • 在脚本中创建元素，随之添加事件处理器
          • 例子：如果使用HTML元素img创建img，然后在脚本中添加对其onload事件的处理，可能不会触发，因为img的onload的触发可能会在对应的事件处理器添加之前。
        • How to catch mistakes when writing HTML: validators and conformance checkers
      • Conformance requirements for authors
        • 跟之前比，对错误处理做了更详细的规定
        • 对文档的遵从性要求依然重要
        • Presentational markup
          • 此类标记存在若干问题
          • The use of presentational elements leads to poorer accessibility
          • Higher cost of maintenance
          • Larger document sizes
        • Syntax errors
          • 约束HTML的措辞，是为了避免
          • Unintuitive error-handling behavior
          • Errors with optional error recovery
          • Errors where the error-handling behavior is not compatible with streaming user agents
          • Errors that can result in infoset coercion
          • Errors that result in disproportionately poor performance
          • Errors involving fragile syntax constructs
          • Errors involving known interoperability problems in legacy user agents
          • Errors that risk exposing authors to security attacks
          • Cases where the author’s intent is unclear
          • Cases that are likely to be typos
          • Errors that could interfere with new syntax in the future
        • Restrictions on content models and on attribute values
          • 对可用的元素和属性进行约束，以避免一些问题
            • Errors involving content with dubious semantics
            • Errors that involve a conflict in expressed semantics
            • Cases where the default styles are likely to lead to confusion
            • Errors that indicate a likely misunderstanding of the specification
            • Errors involving limits that have been imposed merely to simplify the language
            • Errors that involve peculiarities of the parser
            • Errors that would likely result in scripts failing in hard-to-debug ways
            • Errors that waste authoring time
            • Errors that involve areas that affect authors migrating between the HTML and XML syntaxes
            • Errors that involve areas reserved for future expansion
            • Errors that indicate a mis-use of other specifications
      • Suggested reading
        • Character Model for the World Wide Web 1.0: Fundamentals
        • Unicode Security Considerations
        • Web Content Accessibility Guidelines (WCAG)
  • 2 Common infrastructure
    • 此章依赖于Infra
    • 2.1 Terminology
      • 在同一语境下，会涉及到HTML以及XML属性，还有IDL属性。不指明的话，就是公共属性。辖属（properties）一词，用于Javascript辖属，以及CSS辖属，如需区分，采用对象辖属和CSS辖属。
      • 不适用的特性会明确指出
      • 术语document指的是任意关于HTML的使用，从简短的静态的小作文，到包含多媒体的报告，或者全面的交互性应用。
        • 根据上下文，此术语设计文档对象，以及它们的DOM树体，还有具体的HTML或XML文档
      • HTML文档、XML文档指的是DOM的状态
      • 方便起见，shown、displayed、visible用于说明文档出示给用户了
      • 2.1.1 Resources
    • 2.2. Policy-controlled features
      • “autoplay”，其默认的allowlist为self
      • “cross-origin-isolated“，其默认的allowlist为self
    • 2.3 Common microsyntaxes
      • HTML的特定位置接受特定数据类型
      • 2.3.1 Boolean attributes
        • 此类属性出现了便为亍，否则为彳。
        • 如果出现，则值要么是字符串，要么是和自身同名的大小写不敏感的值
          • “true"或"false"不允许作为此类属性值
      • 2.3.2 Keywords and enumerated attributes
        • 有些属性可枚举，具有有限状态集合
          • 特殊状态有invalid value default以及missing value default
          • 空字符串不可作为missing value default
          • 状态判定过程
            • 如果属性未指定，
              • 如果存在missing value default，返回之
            • 如果属性值是不区分大小写的ASCII，能匹配预定义的关键字
              • 返回匹配的关键字代表的状态
            • 如果属性有invalid value default，返回之
            • 不返回任何状态
          • 就文档遵从性而言，必须指定一个枚举关键字
          • 处于勘察的目的，要确定状态的正堂关键字
            • 如果只有一个关键字映射到给定状态，那么此关键字就是正堂
            • 如果只有一个遵从性的关键字映射到给定状态，那么此关键字就是正堂
            • 其他情况下，正堂关键字必须由规范给出
      • 2.3.3 Numbers
        • Signed integers
          • 定义了valid integer
        • Non-negative intergers
        • Floating-point numbers
        • Lists of floating-point numbers
      • 2.3.4 Dates and times
        • Months/Dates/Yearless dates/Times/Local dates and times/Time zones/ Global dates and times/Weeks/Durations
      • 2.3.5 Colors
        • 定义simple color 和valid simple color以及valid lowercase simple color
      • 2.3.6 Space-separated tokens
      • 2.3.7 Comma-separated tokens
      • 2.3.8 References
        • 定义了valid hash-name reference
      • 2.3.9 Media queries
        • 定义了valid media query list
      • 2.3.10 Unique internal values
        • 时可序列化的值
  • 3 Semantics, structure, and APIs of HTML documents
    • 3.1 Documents
      • 文档在UA中表现为文档对象，此即DOM
      • URL在DOM中定义，在文档对象创建的时候设置
        • 用户浏览到一个fragment的时候，或者pushState()方法调用的时候会更改
      • origin在DOM中定义，可以通过设置document.domain来更改，此origin可能会和URL的origin异同
      • 通过createDocument()或者createHTMLDocument()创建的文档，瞬即可执行post-load任务
        • document.implementation.createDocument ('http://www.w3.org/1999/xhtml', 'html', null);
      • document的referrer时一个字符串，可以在文档创建的时候指定，未指定则为空
      • 3.1.1 The Document object
        • DOM定义了一个Document接口，其上定义有policy container以及permission policy，以及module map，以及cross-origin opener policy，以及 is initial about:blank，以及navigation id
      • 3.1.2 The DocumentOrShadowRoot interface
        • 定义了 DocumentOrShadowRoot
      • 3.1.3 Resource metadata management
        • document.referrer
          • 可以被 noreferrer类型的link阻挡
        • document.cookie [ = value ]
          • 在sandbox的iframe里面，读写此值会抛出SecurityError DOMException
        • document.lastModified
          • 返回上回改动的时间，或当前时间
      • 3.1.4 Reporting document loading status
        • document.readyState
          • “loading”, “interactive”, “complete”
          • 变化会触发readystatechange
          • DOMContentLoaded 在迁移到"interactive"之后，迁移往"complete"之前触发，此时除了async script之外的资源都加载完毕了
      • 3.1.5 Render-blocking mechanism
        • 每个文档有一个render-blocking element set，初始为空
          • 可以添加render-blocking elements，如果文档为"text/html"且body元素为null
        • 一个文档可以看成render-blocked，前提是满足以下条件
          • render-blocking element set不为空，或者允许添加render-blocking elements
          • 当前的高精时钟未出现实现定义的超时
        • 某个元素会被看作render-blocking，如果它出现
      • 3.1.6 DOM tree accessors
        • 文档的html元素是其文档元素
        • document.head
          • html元素的第一个head元素
        • document.title [ = value ]
          • html元素的第一个title元素
          • title元素，或者SVG title元素
        • document.body [ = value ]
          • 返回body元素，，可以设置替换
            • 替换必须用body或者frameset元素，否则会出HierarchyRequestError” DOMException.
          • 文档的body元素是其中出现按的第一个body元素或frmeset元素，没有的话则为null
        • document.images
          • 返回HTMLCollection，包含img元素
        • document.embeds/document.plugins
          • 返回HTMLCollection，包含嵌入的元素
        • document.links
          • 返回HTMLCollection，包含具有href属性的a以及area元素
        • document.forms
          • 返回HTMLCollection，包含form元素
        • document.scripts
          • 返回HTMLCollection，包含script元素
        • collection = document.getElementsByName(name)
          • 返回具有指定name属性的NodeList
        • document.currentScript
          • 返回正在运行的script元素，或者SVG script元素
    • [3.2 Elements]
      • 3.2.1 Semantics
        • 元素以及属性被定义为具有某种语义（semantics）
        • HTML传递含义，而不是呈现。可以在不同设备下呈现
          • 举了一个hgroup的例子
          • 举了一个误用table的例子
          • 举了一个误用input的例子
        • DOM节点，如果其node document的browsing context为null，则不受HTML/XML措辞以外的遵从性要求。
          • 比如template元素就无此要求
        • 须注意，文档的语义可以随着对文档的改动，动态变化的
          • 举了一个progress元素的例子
      • 3.2.2 Elements in the DOM
      • 3.2.3 Element definitions
      • 3.2.4 Content models
      • 3.2.5 Global attributes
      • 3.2.6 The innerText and outerText properties
      • 3.2.7 Requirements relating to the bidirectional algorithm