作为一名工作多年的前端，我对于渲染原理自然也是了解的，但是对于它的理解只停留在理论知识层面。所以我决定自己动手实现一个玩具版的渲染引擎。

渲染引擎是浏览器的一部分，它负责将网页内容（HTML、CSS、JavaScript 等）转化为用户可阅读、观看、听到的形式。但是要独自实现一个完整的渲染引擎工作量实在太大了，而且也很困难。于是我决定退一步，打算实现一个玩具版的渲染引擎。刚好 Github 上有一个开源的用 Rust 写的玩具版渲染引擎 robinson，于是决定模仿其源码自己用 JavaScript 实现一遍，并且也在 Github 上开源了从零开始实现一个玩具版浏览器渲染引擎。

这个玩具版的渲染引擎一共分为五个阶段：

分别是：

1. 解析 HTML，生成 DOM 树
2. 解析 CSS，生成 CSS 规则集合
3. 生成 Style 树
4. 生成布局树
5. 绘制

每个阶段的代码我在仓库上都用一个分支来表示。由于直接看整个渲染引擎的代码可能会比较困难，所以我建议大家从第一个分支开始进行学习，从易到难，这样学习效果更好。

现在我们先看一下如何编写一个 HTML 解析器。

HTML 解析器

HTML 解析器的作用就是将一连串的 HTML 文本解析为 DOM 树。比如将这样的 HTML 文本：

<div class="lightblue test" id=" div " data-index="1">test!</div>

解析为一个 DOM 树：

{
    "tagName": "div",
    "attributes": {
        "class": "lightblue test",
        "id": "div",
        "data-index": "1"
    },
    "children": [
        {
            "nodeValue": "test!",
            "nodeType": 3
        }
    ],
    "nodeType": 1
}

写解析器需要懂一些编译原理的知识，比如词法分析、语法分析什么的。但是我们的玩具版解析器非常简单，即使不懂也没有关系，大家看源码就能明白了。

再回到上面的那段 HTML 文本，它的整个解析过程可以用下面的图来表示，每一段 HTML 文本都有对应的方法去解析。

为了让解析器实现起来简单一点，我们需要对 HTML 的功能进行约束：

1. 标签必须要成对出现：<div>...</div>
2. HTML 属性值必须要有引号包起来 <div class="test">...</div>
3. 不支持注释
4. 尽量不做错误处理
5. 只支持两种类型节点 Element 和 Text

对解析器的功能进行约束后，代码实现就变得简单多了，现在让我们继续吧。

节点类型

首先，为这两种节点 Element 和 Text 定一个适当的数据结构：

export enum NodeType {
    Element = 1,
    Text = 3,
}

export interface Element {
    tagName: string
    attributes: Record<string, string>
    children: Node[]
    nodeType: NodeType.Element
}

interface Text {
    nodeValue: string
    nodeType: NodeType.Text
}

export type Node = Element | Text

然后为这两种节点各写一个生成函数：

export function element(tagName: string) {
    return {
        tagName,
        attributes: {},
        children: [],
        nodeType: NodeType.Element,
    } as Element
}

export function text(data: string) {
    return {
        nodeValue: data,
        nodeType: NodeType.Text,
    } as Text
}

这两个函数在解析到元素节点或者文本节点时调用，调用后会返回对应的 DOM 节点。

HTML 解析器的执行过程

下面这张图就是整个 HTML 解析器的执行过程：

HTML 解析器的入口方法为 parse()，从这开始执行直到遍历完所有 HTML 文本为止：

1. 判断当前字符是否为 <，如果是，则当作元素节点来解析，调用 parseElement()，否则调用 parseText()
2. parseText() 比较简单，一直往前遍历字符串，直至遇到 < 字符为止。然后将之前遍历过的所有字符当作 Text 节点的值。
3. parseElement() 则相对复杂一点，它首先要解析出当前的元素标签名称，这段文本用 parseTag() 来解析。
4. 然后再进入 parseAttrs() 方法，判断是否有属性节点，如果该节点有 class 或者其他 HTML 属性，则会调用 parseAttr() 把 HTML 属性或者 class 解析出来。
5. 至此，整个元素节点的前半段已经解析完了。接下来需要解析它的子节点。这时就会进入无限递归循环回到第一步，继续解析元素节点或文本节点。
6. 当所有子节点解析完后，需要调用 parseTag()，看看结束标签名和元素节点的开始标签名是否相同，如果相同，则 parseElement() 或者 parse() 结束，否则报错。

HTML 解析器各个方法详解

入口方法 parse()

HTML 的入口方法是 parse(rawText)

parse(rawText: string) {
    this.rawText = rawText.trim()
    this.len = this.rawText.length
    this.index = 0
    this.stack = []

    const root = element('root')
    while (this.index < this.len) {
        this.removeSpaces()
        if (this.rawText[this.index].startsWith('<')) {
            this.index++
            this.parseElement(root)
        } else {
            this.parseText(root)
        }
    }
}

入口方法需要遍历所有文本，在一开始它需要判断当前字符是否是 <，如果是，则将它当作元素节点来解析，调用 parseElement()，否则将当前字符作为文本来解析，调用 parseText()。

解析元素节点 parseElement()

private parseElement(parent: Element) {
 // 解析标签
    const tag = this.parseTag()
    // 生成元素节点
    const ele = element(tag)

    this.stack.push(tag)

    parent.children.push(ele)
    // 解析属性
    this.parseAttrs(ele)

    while (this.index < this.len) {
        this.removeSpaces()
        if (this.rawText[this.index].startsWith('<')) {
            this.index++
            this.removeSpaces()
            // 判断是否是结束标签
            if (this.rawText[this.index].startsWith('/')) {
                this.index++
                const startTag = this.stack[this.stack.length - 1]
                // 结束标签
                const endTag = this.parseTag()
                if (startTag !== endTag) {
                    throw Error(`The end tagName ${endTag} does not match start tagName ${startTag}`)
                }

                this.stack.pop()
                while (this.index < this.len && this.rawText[this.index] !== '>') {
                    this.index++
                }

                break
            } else {
                this.parseElement(ele)
            }
        } else {
            this.parseText(ele)
        }
    }

    this.index++
}

parseElement() 会依次调用 parseTag() parseAttrs() 解析标签和属性，然后再递归解析子节点，终止条件是遍历完所有的 HTML 文本。

解析文本节点 parseText()

private parseText(parent: Element) {
    let str = ''
    while (
        this.index < this.len
        && !(this.rawText[this.index] === '<' && /\w|\//.test(this.rawText[this.index + 1]))
    ) {
        str += this.rawText[this.index]
        this.index++
    }

    this.sliceText()
    parent.children.push(text(removeExtraSpaces(str)))
}

解析文本相对简单一点，它会一直往前遍历，直至遇到 < 为止。比如这段文本 <div>test!</div>，经过 parseText() 解析后拿到的文本是 test!。

解析标签 parseTag()

在进入 parseElement() 后，首先调用就是 parseTag()，它的作用是解析标签名：

private parseTag() {
    let tag = ''

    this.removeSpaces()

    // get tag name
    while (this.index < this.len && this.rawText[this.index] !== ' ' && this.rawText[this.index] !== '>') {
        tag += this.rawText[this.index]
        this.index++
    }

    this.sliceText()
    return tag
}

比如这段文本 <div>test!</div>，经过 parseTag() 解析后拿到的标签名是 div。

解析属性节点 parseAttrs()

解析完标签名后，接着再解析属性节点：

// 解析元素节点的所有属性
private parseAttrs(ele: Element) {
 // 一直遍历文本，直至遇到 '>' 字符为止，代表 <div ....> 这一段文本已经解析完了
    while (this.index < this.len && this.rawText[this.index] !== '>') {
        this.removeSpaces()
        this.parseAttr(ele)
        this.removeSpaces()
    }

    this.index++
}

// 解析单个属性，例如 class="foo bar"
private parseAttr(ele: Element) {
    let attr = ''
    let value = ''
    while (this.index < this.len && this.rawText[this.index] !== '=' && this.rawText[this.index] !== '>') {
        attr += this.rawText[this.index++]
    }

    this.sliceText()
    attr = attr.trim()
    if (!attr.trim()) return

    this.index++
    let startSymbol = ''
    if (this.rawText[this.index] === "'" || this.rawText[this.index] === '"') {
        startSymbol = this.rawText[this.index++]
    }

    while (this.index < this.len && this.rawText[this.index] !== startSymbol) {
        value += this.rawText[this.index++]
    }

    this.index++
    ele.attributes[attr] = value.trim()
    this.sliceText()
}

parseAttr() 可以将这样的文本 class="test" 解析为一个对象 { class: "test" }。

其他辅助方法

有时不同的节点、属性之间有很多多余的空格，所以需要写一个方法将多余的空格清除掉。

protected removeSpaces() {
    while (this.index < this.len && (this.rawText[this.index] === ' ' || this.rawText[this.index] === '\n')) {
        this.index++
    }

    this.sliceText()
}

同时为了方便调试，开发者经常需要打断点看当前正在遍历的字符是什么。如果以前遍历过的字符串还在，那么是比较难调试的，因为开发者需要根据 index 的值自己去找当前遍历的字符是什么。所以所有解析完的 HTML 文本，都需要截取掉，确保当前的 HTML 文本都是没有被遍历：

protected sliceText() {
    this.rawText = this.rawText.slice(this.index)
    this.len = this.rawText.length
    this.index = 0
}

sliceText() 方法的作用就是截取已经遍历过的 HTML 文本。用下图来做例子，假设当前要解析 div 这个标签名：

那么解析后需要对 HTML 文本进行截取，就像下图这样：

小结

至此，整个 HTML 解析器的逻辑已经讲完了，所有代码加起来 200 行左右，如果不算 TS 各种类型声明，代码只有 100 多行。

CSS 解析器

CSS 样式表是一系列的 CSS 规则集合，而 CSS 解析器的作用就是将 CSS 文本解析为 CSS 规则集合。

div, p {
    font-size: 88px;
    color: #000;
}

例如上面的 CSS 文本，经过解析器解析后，会生成下面的 CSS 规则集合：

[
    {
        "selectors": [
            {
                "id": "",
                "class": "",
                "tagName": "div"
            },
            {
                "id": "",
                "class": "",
                "tagName": "p"
            }
        ],
        "declarations": [
            {
                "name": "font-size",
                "value": "88px"
            },
            {
                "name": "color",
                "value": "#000"
            }
        ]
    }
]

每个规则都有一个 selector 和 declarations 属性，其中 selectors 表示 CSS 选择器，declarations 表示 CSS 的属性描述集合。

export interface Rule {
    selectors: Selector[]
    declarations: Declaration[]
}

export interface Selector {
    tagName: string
    id: string
    class: string
}

export interface Declaration {
    name: string
    value: string | number
}

每一条 CSS 规则都可以包含多个选择器和多个 CSS 属性。

解析 CSS 规则 parseRule()

private parseRule() {
    const rule: Rule = {
        selectors: [],
        declarations: [],
    }

    rule.selectors = this.parseSelectors()
    rule.declarations = this.parseDeclarations()

    return rule
}

在 parseRule() 里，它分别调用了 parseSelectors() 去解析 CSS 选择器，然后再对剩余的 CSS 文本执行 parseDeclarations() 去解析 CSS 属性。

解析选择器 parseSelector()

private parseSelector() {
    const selector: Selector = {
        id: '',
        class: '',
        tagName: '',
    }

    switch (this.rawText[this.index]) {
        case '.':
            this.index++
            selector.class = this.parseIdentifier()
            break
        case '#':
            this.index++
            selector.id = this.parseIdentifier()
            break
        case '*':
            this.index++
            selector.tagName = '*'
            break
        default:
            selector.tagName = this.parseIdentifier()
    }

    return selector
}

private parseIdentifier() {
    let result = ''
    while (this.index < this.len && this.identifierRE.test(this.rawText[this.index])) {
        result += this.rawText[this.index++]
    }

    this.sliceText()
    return result
}

选择器我们只支持标签名称、前缀为 # 的 ID 、前缀为任意数量的类名 . 或上述的某种组合。如果标签名称为 *，则表示它是一个通用选择器，可以匹配任何标签。

标准的 CSS 解析器在遇到无法识别的部分时，会将它丢掉，然后继续解析其余部分。主要是为了兼容旧浏览器和防止发生错误导致程序中断。我们的 CSS 解析器为了实现简单，没有做这方面的做错误处理。

解析 CSS 属性 parseDeclaration()

private parseDeclaration() {
    const declaration: Declaration = { name: '', value: '' }
    this.removeSpaces()
    declaration.name = this.parseIdentifier()
    this.removeSpaces()

    while (this.index < this.len && this.rawText[this.index] !== ':') {
        this.index++
    }

    this.index++ // clear :
    this.removeSpaces()
    declaration.value = this.parseValue()
    this.removeSpaces()

    return declaration
}

parseDeclaration() 会将 color: red; 解析为一个对象 { name: "color", value: "red" }。

小结

CSS 解析器相对来说简单多了，因为很多知识点在 HTML 解析器中已经讲到。整个 CSS 解析器的代码大概 100 多行，如果你阅读过 HTML 解析器的源码，相信看 CSS 解析器的源码会更轻松。

构建样式树

本阶段的目标是写一个样式构建器，输入 DOM 树和 CSS 规则集合，生成一棵样式树 Style tree。

样式树的每一个节点都包含了 CSS 属性值以及它对应的 DOM 节点引用：

interface AnyObject {
    [key: string]: any
}

export interface StyleNode {
    node: Node // DOM 节点
    values: AnyObject // style 属性值
    children: StyleNode[] // style 子节点
}

先来看一个简单的示例：

<div>test</div>
div {
    font-size: 88px;
    color: #000;
}

上述的 HTML、CSS 文本在经过样式树构建器处理后生成的样式树如下：

{
    "node": { // DOM 节点
        "tagName": "div",
        "attributes": {},
        "children": [
            {
                "nodeValue": "test",
                "nodeType": 3
            }
        ],
        "nodeType": 1
    },
    "values": { // CSS 属性值
        "font-size": "88px",
        "color": "#000"
    },
    "children": [ // style tree 子节点
        {
            "node": {
                "nodeValue": "test",
                "nodeType": 3
            },
            "values": { // text 节点继承了父节点样式
                "font-size": "88px",
                "color": "#000"
            },
            "children": []
        }
    ]
}

遍历 DOM 树

现在我们需要遍历 DOM 树。对于 DOM 树中的每个节点，我们都要在样式树中查找是否有匹配的 CSS 规则。

export function getStyleTree(eles: Node | Node[], cssRules: Rule[], parent?: StyleNode) {
    if (Array.isArray(eles)) {
        return eles.map((ele) => getStyleNode(ele, cssRules, parent))
    }

    return getStyleNode(eles, cssRules, parent)
}

匹配选择器

匹配选择器实现起来非常容易，因为我们的CSS 解析器仅支持简单的选择器。 只需要查看元素本身即可判断选择器是否与元素匹配。

/**
 * css 选择器是否匹配元素
 */
function isMatch(ele: Element, selectors: Selector[]) {
    return selectors.some((selector) => {
        // 通配符
        if (selector.tagName === '*') return true
        if (selector.tagName === ele.tagName) return true
        if (ele.attributes.id === selector.id) return true

        if (ele.attributes.class) {
            const classes = ele.attributes.class.split(' ').filter(Boolean)
            const classes2 = selector.class.split(' ').filter(Boolean)
            for (const name of classes) {
                if (classes2.includes(name)) return true
            }
        }

        return false
    })
}

当查找到匹配的 DOM 节点后，再将 DOM 节点和它匹配的 CSS 属性组合在一起，生成样式树节点 styleNode：

function getStyleNode(ele: Node, cssRules: Rule[], parent?: StyleNode) {
    const styleNode: StyleNode = {
        node: ele,
        values: getStyleValues(ele, cssRules, parent),
        children: [],
    }

    if (ele.nodeType === NodeType.Element) {
        // 合并内联样式
        if (ele.attributes.style) {
            styleNode.values = { ...styleNode.values, ...getInlineStyle(ele.attributes.style) }
        }

        styleNode.children = ele.children.map((e) => getStyleNode(e, cssRules, styleNode)) as unknown as StyleNode[]
    }

    return styleNode
}

function getStyleValues(ele: Node, cssRules: Rule[], parent?: StyleNode) {
    const inheritableAttrValue = getInheritableAttrValues(parent)

    // 文本节点继承父元素的可继承属性
    if (ele.nodeType === NodeType.Text) return inheritableAttrValue

    return cssRules.reduce((result: AnyObject, rule) => {
        if (isMatch(ele as Element, rule.selectors)) {
            result = { ...result, ...cssValueArrToObject(rule.declarations) }
        }

        return result
    }, inheritableAttrValue)
}

在 CSS 选择器中，不同的选择器优先级是不同的，比如 id 选择器就比类选择器的优先级要高。但是我们这里没有实现选择器优先级，为了实现简单，所有的选择器优先级是一样的。

继承属性

文本节点无法匹配选择器，那它的样式从哪来？答案就是继承，它可以继承父节点的样式。

在 CSS 中存在很多继承属性，即使子元素没有声明这些属性，也可以从父节点里继承。比如字体颜色、字体家族等属性，都是可以被继承的。为了实现简单，这里只支持继承父节点的 color、font-size 属性。

// 子元素可继承的属性，这里只写了两个，实际上还有很多
const inheritableAttrs = ['color', 'font-size']

/**
 * 获取父元素可继承的属性值
 */
function getInheritableAttrValues(parent?: StyleNode) {
    if (!parent) return {}
    const keys = Object.keys(parent.values)
    return keys.reduce((result: AnyObject, key) => {
        if (inheritableAttrs.includes(key)) {
            result[key] = parent.values[key]
        }

        return result
    }, {})
}

内联样式

在 CSS 中，内联样式的优先级是除了 !important 之外最高的。

<span style="color: red; background: yellow;">

我们可以在调用 getStyleValues() 函数获得当前 DOM 节点的 CSS 属性值后，再去取当前节点的内联样式值。并对当前 DOM 节点的 CSS 样式值进行覆盖。

styleNode.values = { ...styleNode.values, ...getInlineStyle(ele.attributes.style) }

function getInlineStyle(str: string) {
    str = str.trim()
    if (!str) return {}
    const arr = str.split(';')
    if (!arr.length) return {}

    return arr.reduce((result: AnyObject, item: string) => {
        const data = item.split(':')
        if (data.length === 2) {
            result[data[0].trim()] = data[1].trim()
        }

        return result
    }, {})
}

布局树

第四阶段讲的是如何将样式树转化为布局树，也是整个渲染引擎相对比较复杂的部分。

CSS 盒子模型

在 CSS 中，所有的 DOM 节点都可以当作一个盒子。这个盒子模型包含了内容、内边距、边框、外边距以及在页面中的位置信息。

我们可以用以下的数据结构来表示盒子模型：

export default class Dimensions {
    content: Rect
    padding: EdgeSizes
    border: EdgeSizes
    margin: EdgeSizes
}

export default class Rect {
    x: number
    y: number
    width: number
    height: number
}

export interface EdgeSizes {
    top: number
    right: number
    bottom: number
    left: number
}

块布局和内联布局

CSS 的 display 属性决定了盒子在页面中的布局方式。display 的类型有很多种，例如 block、inline、flex 等等，但这里只支持 block 和 inline 两种布局方式，并且所有盒子的默认布局方式为 display: inline。

我会用伪 HTML 代码来描述它们之间的区别：

<container>
  <a></a>
  <b></b>
  <c></c>
  <d></d>
</container>

块布局会将盒子从上至下的垂直排列。

内联布局则会将盒子从左至右的水平排列。

如果容器内同时存在块布局和内联布局，则会用一个匿名布局将内联布局包裹起来。

这样就能将内联布局的盒子和其他块布局的盒子区别开来。

通常情况下内容是垂直增长的。也就是说，在容器中添加子节点通常会使容器更高，而不是更宽。另一种说法是，默认情况下，子节点的宽度取决于其容器的宽度，而容器的高度取决于其子节点的高度。

布局树

布局树是所有盒子节点的集合。

export default class LayoutBox {
 dimensions: Dimensions
 boxType: BoxType
 children: LayoutBox[]
 styleNode: StyleNode
}

盒子节点的类型可以是 block、inilne 和 anonymous。

export enum BoxType {
    BlockNode = 'BlockNode',
    InlineNode = 'InlineNode',
    AnonymousBlock = 'AnonymousBlock',
}

我们构建样式树时，需要根据每一个 DOM 节点的 display 属性来生成对应的盒子节点。

export function getDisplayValue(styleNode: StyleNode) {
    return styleNode.values?.display ?? Display.Inline
}

如果 DOM 节点 display 属性的值为 none，则在构建布局树的过程中，无需将这个 DOM 节点添加到布局树上，直接忽略它就可以了。

如果一个块节点包含一个内联子节点，则需要创建一个匿名块（实际上就是块节点）来包含它。如果一行中有多个子节点，则将它们全部放在同一个匿名容器中。

function buildLayoutTree(styleNode: StyleNode) {
    if (getDisplayValue(styleNode) === Display.None) {
        throw new Error('Root node has display: none.')
    }

    const layoutBox = new LayoutBox(styleNode)

    let anonymousBlock: LayoutBox | undefined
    for (const child of styleNode.children) {
        const childDisplay = getDisplayValue(child)
        // 如果 DOM 节点 display 属性值为 none，直接跳过
        if (childDisplay === Display.None) continue

        if (childDisplay === Display.Block) {
            anonymousBlock = undefined
            layoutBox.children.push(buildLayoutTree(child))
        } else {
         // 创建一个匿名容器，用于容纳内联节点
            if (!anonymousBlock) {
                anonymousBlock = new LayoutBox()
                layoutBox.children.push(anonymousBlock)
            }

            anonymousBlock.children.push(buildLayoutTree(child))
        }
    }

    return layoutBox
}

遍历布局树

现在开始构建布局树，入口函数是 getLayoutTree()：

export function getLayoutTree(styleNode: StyleNode, parentBlock: Dimensions) {
    parentBlock.content.height = 0
    const root = buildLayoutTree(styleNode)
    root.layout(parentBlock)
    return root
}

它将遍历样式树，利用样式树节点提供的相关信息，生成一个 LayoutBox 对象，然后调用 layout() 方法。计算每个盒子节点的位置、尺寸信息。

在本节内容的开头有提到过，盒子的宽度取决于其父节点，而高度取决于子节点。这意味着，我们的代码在计算宽度时需要自上而下遍历树，这样它就可以在知道父节点的宽度后设置子节点的宽度。然后自下而上遍历以计算高度，这样父节点的高度就可以在计算子节点的相关信息后进行计算。

layout(parentBlock: Dimensions) {
 // 子节点的宽度依赖于父节点的宽度，所以要先计算当前节点的宽度，再遍历子节点
    this.calculateBlockWidth(parentBlock)
    // 计算盒子节点的位置
    this.calculateBlockPosition(parentBlock)
    // 遍历子节点并计算对位置、尺寸信息
    this.layoutBlockChildren()
    // 父节点的高度依赖于其子节点的高度，所以计算子节点的高度后，再计算自己的高度
    this.calculateBlockHeight()
}

这个方法执行布局树的单次遍历，向下执行宽度计算，向上执行高度计算。一个真正的布局引擎可能会执行几次树遍历，有些是自上而下的，有些是自下而上的。

计算宽度

现在，我们先来计算盒子节点的宽度，这部分比较复杂，需要详细的讲解。

首先，我们要拿到当前节点的 width padding border margin 等信息：

calculateBlockWidth(parentBlock: Dimensions) {
 // 初始值
 const styleValues = this.styleNode?.values || {}

 // 初始值为 auto
 let width = styleValues.width ?? 'auto'
 let marginLeft = styleValues['margin-left'] || styleValues.margin || 0
 let marginRight = styleValues['margin-right'] || styleValues.margin || 0

 let borderLeft = styleValues['border-left'] || styleValues.border || 0
 let borderRight = styleValues['border-right'] || styleValues.border || 0

 let paddingLeft = styleValues['padding-left'] || styleValues.padding || 0
 let paddingRight = styleValues['padding-right'] || styleValues.padding || 0

 // 拿到父节点的宽度，如果某个属性为 'auto'，则将它设为 0
 let totalWidth = sum(width, marginLeft, marginRight, borderLeft, borderRight, paddingLeft, paddingRight)
 // ...

如果这些属性没有设置，就使用 0 作为默认值。拿到当前节点的总宽度后，还需要和父节点对比一下是否相等。如果宽度或边距设置为 auto，则可以对这两个属性进行适当展开或收缩以适应可用空间。所以现在需要对当前节点的宽度进行检查。

const isWidthAuto = width === 'auto'
const isMarginLeftAuto = marginLeft === 'auto'
const isMarginRightAuto = marginRight === 'auto'

// 当前块的宽度如果超过了父元素宽度，则将它的可扩展外边距设为 0
if (!isWidthAuto && totalWidth > parentWidth) {
    if (isMarginLeftAuto) {
        marginLeft = 0
    }

    if (isMarginRightAuto) {
        marginRight = 0
    }
}

// 根据父子元素宽度的差值，去调整当前元素的宽度
const underflow = parentWidth - totalWidth

// 如果三者都有值，则将差值填充到 marginRight
if (!isWidthAuto && !isMarginLeftAuto && !isMarginRightAuto) {
    marginRight += underflow
} else if (!isWidthAuto && !isMarginLeftAuto && isMarginRightAuto) {
 // 如果右边距是 auto，则将 marginRight 设为差值
    marginRight = underflow
} else if (!isWidthAuto && isMarginLeftAuto && !isMarginRightAuto) {
 // 如果左边距是 auto，则将 marginLeft 设为差值
    marginLeft = underflow
} else if (isWidthAuto) {
    // 如果只有 width 是 auto，则将另外两个值设为 0
    if (isMarginLeftAuto) {
        marginLeft = 0
    }

    if (isMarginRightAuto) {
        marginRight = 0
    }

    if (underflow >= 0) {
        // 展开宽度，填充剩余空间，原来的宽度是 auto，作为 0 来计算的
        width = underflow
    } else {
        // 宽度不能为负数，所以需要调整 marginRight 来代替
        width = 0
        // underflow 为负数，相加实际上就是缩小当前节点的宽度
        marginRight += underflow
    }
} else if (!isWidthAuto && isMarginLeftAuto && isMarginRightAuto) {
    // 如果只有 marginLeft 和 marginRight 是 auto，则将两者设为 underflow 的一半
    marginLeft = underflow / 2
    marginRight = underflow / 2
}

详细的计算过程请看上述代码，重要的地方都已经标上注释了。

通过对比当前节点和父节点的宽度，我们可以拿到一个差值：

// 根据父子元素宽度的差值，去调整当前元素的宽度
const underflow = parentWidth - totalWidth

如果这个差值为正数，说明子节点宽度小于父节点；如果差值为负数，说明子节点大于父节。上面这段代码逻辑其实就是根据 underflow width padding margin 等值对子节点的宽度、边距进行调整，以适应父节点的宽度。

定位

计算当前节点的位置相对来说简单一点。这个方法会根据当前节点的 margin border padding 样式以及父节点的位置信息对当前节点进行定位：

calculateBlockPosition(parentBlock: Dimensions) {
 const styleValues = this.styleNode?.values || {}
 const { x, y, height } = parentBlock.content
 const dimensions = this.dimensions

 dimensions.margin.top = transformValueSafe(styleValues['margin-top'] || styleValues.margin || 0)
 dimensions.margin.bottom = transformValueSafe(styleValues['margin-bottom'] || styleValues.margin || 0)

 dimensions.border.top = transformValueSafe(styleValues['border-top'] || styleValues.border || 0)
 dimensions.border.bottom = transformValueSafe(styleValues['border-bottom'] || styleValues.border || 0)

 dimensions.padding.top = transformValueSafe(styleValues['padding-top'] || styleValues.padding || 0)
 dimensions.padding.bottom = transformValueSafe(styleValues['padding-bottom'] || styleValues.padding || 0)

 dimensions.content.x = x + dimensions.margin.left + dimensions.border.left + dimensions.padding.left
 dimensions.content.y = y + height + dimensions.margin.top + dimensions.border.top + dimensions.padding.top
}

function transformValueSafe(val: number | string) {
    if (val === 'auto') return 0
    return parseInt(String(val))
}

比如获取当前节点内容区域的 x 坐标，计算方式如下：

dimensions.content.x = x + dimensions.margin.left + dimensions.border.left + dimensions.padding.left

遍历子节点

在计算高度之前，需要先遍历子节点，因为父节点的高度需要根据它下面子节点的高度进行适配。

layoutBlockChildren() {
    const { dimensions } = this
    for (const child of this.children) {
        child.layout(dimensions)
        // 遍历子节点后，再计算父节点的高度
        dimensions.content.height += child.dimensions.marginBox().height
    }
}

每个节点的高度就是它上下两个外边距之间的差值，所以可以通过 marginBox() 获得高度：

export default class Dimensions {
    content: Rect
    padding: EdgeSizes
    border: EdgeSizes
    margin: EdgeSizes

    constructor() {
        const initValue = {
            top: 0,
            right: 0,
            bottom: 0,
            left: 0,
        }

        this.content = new Rect()

        this.padding = { ...initValue }
        this.border = { ...initValue }
        this.margin = { ...initValue }
    }

    paddingBox() {
        return this.content.expandedBy(this.padding)
    }

    borderBox() {
        return this.paddingBox().expandedBy(this.border)
    }

    marginBox() {
        return this.borderBox().expandedBy(this.margin)
    }
}
export default class Rect {
    x: number
    y: number
    width: number
    height: number

    constructor() {
        this.x = 0
        this.y = 0
        this.width = 0
        this.height = 0
    }

    expandedBy(edge: EdgeSizes) {
        const rect = new Rect()
        rect.x = this.x - edge.left
        rect.y = this.y - edge.top
        rect.width = this.width + edge.left + edge.right
        rect.height = this.height + edge.top + edge.bottom

        return rect
    }
}

遍历子节点并执行完相关计算方法后，再将各个子节点的高度进行相加，得到父节点的高度。

height 属性

默认情况下，节点的高度等于其内容的高度。但如果手动设置了 height 属性，则需要将节点的高度设为指定的高度：

calculateBlockHeight() {
    // 如果元素设置了 height，则使用 height，否则使用 layoutBlockChildren() 计算出来的高度
    const height = this.styleNode?.values.height
    if (height) {
        this.dimensions.content.height = parseInt(height)
    }
}

为了简单起见，我们不需要实现外边距折叠。

小结

布局树是渲染引擎最复杂的部分，这一阶段结束后，我们就了解了布局树中每个盒子节点在页面中的具体位置和尺寸信息。下一步，就是如何把布局树渲染到页面上了。

绘制

绘制阶段主要是根据布局树中各个节点的位置、尺寸信息将它们绘制到页面。目前大多数计算机使用光栅（raster，也称为位图）显示技术。将布局树各个节点绘制到页面的这个过程也被称为“光栅化”。

浏览器通常在图形API和库（如Skia、Cairo、Direct2D等）的帮助下实现光栅化。这些API提供绘制多边形、直线、曲线、渐变和文本的功能。

实际上绘制才是最难的部分，但是这一步我们有现成的 canvas 库可以用，不用自己实现一个光栅器，所以相对来说就变得简单了。在真正开始绘制阶段之前，我们先来学习一些关于计算机如何绘制图像、文本的基础知识，有助于我们理解光栅化的具体实现过程。

计算机如何绘制图像、文本

在计算机底层进行像素绘制属于硬件操作，它依赖于屏幕和显卡接口的具体细节。为了简单起点，我们可以用一段内存区域来表示屏幕，内存的一个 bit 就代表了屏幕中的一个像素。比如在屏幕中的 (x,y) 坐标绘制一个像素，可以用 memory[x + y * rowSize] = 1 来表示。从屏幕左上角开始，列是从左至右开始计数，行是从上至下开始计数。因此屏幕最左上角的坐标是 (0,0)。

为了简单起见，我们用 1 bit 来表示屏幕的一个像素，0 代表白色，1 代表黑色。屏幕每一行的长度用变量 rowSzie 表示，每一列的高度用 colSize 表示。

绘制线条

如果我们要在计算机上绘制一条直线，那么只要知道计算机的起点坐标 (x1,y1) 和终点坐标 (x2,y2) 就可以了。

然后根据 memory[x + y * rowSize] = 1 公式，将 (x1,y1) 至 (x2,y2) 之间对应的内存区域置为 1，这样就画出来了一条直线。

绘制文本

为了在屏幕上显示文本，首先必须将物理上基于像素点的屏幕，在逻辑上以字符为单位划分成若干区域，每个区域能输出单个完整的字符。假设有一个 256 行 512 列的屏幕，如果为每个字符分配一个 11*8 像素的网格，那么屏幕上总共能显示 23 行，每行 64 个字符（还有 3 行像素没使用）。

有了这些前提条件后，我们现在打算在屏幕上画一个 A：

上图的 A 在内存区域中用 11*8 像素的网格表示。为了在内存区域中绘制它，我们可以用一个二维数组来表示它：

const charA = [
 [0, 0, 1, 1, 0, 0, 0, 0], // 按从左至右的顺序来读取 bit，转换成十进制数字就是 12
 [0, 1, 1, 1, 1, 0, 0, 0], // 30
 [1, 1, 0, 0, 1, 1, 0, 0], // 51
 [1, 1, 0, 0, 1, 1, 0, 0], // 51
 [1, 1, 1, 1, 1, 1, 0, 0], // 63
 [1, 1, 0, 0, 1, 1, 0, 0], // 51
 [1, 1, 0, 0, 1, 1, 0, 0], // 51
 [1, 1, 0, 0, 1, 1, 0, 0], // 51
 [1, 1, 0, 0, 1, 1, 0, 0], // 51
 [0, 0, 0, 0, 0, 0, 0, 0], // 0
 [0, 0, 0, 0, 0, 0, 0, 0], // 0
]

上面二维数组的第一项，代表了第一行内存区域每个 bit 的取值。一共 11 行，画出了一个字母 A。

如果我们为 26 个字母都建一个映射表，按 ascii 的编码来排序，那么 charsMap[65] 就代表字符 A，当用户在键盘上按下 A 键时，就把 charsMap[65] 对应的数据输出到内存区域上，这样屏幕上就显示了一个字符 A。

绘制布局树

科普完关于绘制屏幕的基础知识后，我们现在正式开始绘制布局树（为了方便，我们使用 node-canvas 库）。

首先要遍历整个布局树，然后逐个节点进行绘制：

function renderLayoutBox(layoutBox: LayoutBox, ctx: CanvasRenderingContext2D, parent?: LayoutBox) {
    renderBackground(layoutBox, ctx)
    renderBorder(layoutBox, ctx)
    renderText(layoutBox, ctx, parent)
    for (const child of layoutBox.children) {
        renderLayoutBox(child, ctx, layoutBox)
    }
}

这个函数对每个节点依次绘制背景色、边框、文本，然后再递归绘制所有子节点。

默认情况下，HTML 元素按照它们出现的顺序进行绘制。如果两个元素重叠，则后一个元素将绘制在前一个元素之上。这种排序反映在我们的布局树中，它将按照元素在 DOM 树中出现的顺序绘制元素。

绘制背景色

function renderBackground(layoutBox: LayoutBox, ctx: CanvasRenderingContext2D) {
    const { width, height, x, y } = layoutBox.dimensions.borderBox()
    ctx.fillStyle = getStyleValue(layoutBox, 'background')
    ctx.fillRect(x, y, width, height)
}

首先拿到布局节点的位置、尺寸信息，以 x,y 作为起点，绘制矩形区域。并且以 CSS 属性 background 的值作为背景色进行填充。

绘制边框

function renderBorder(layoutBox: LayoutBox, ctx: CanvasRenderingContext2D) {
    const { width, height, x, y } = layoutBox.dimensions.borderBox()
    const { left, top, right, bottom } = layoutBox.dimensions.border
    const borderColor = getStyleValue(layoutBox, 'border-color')
    if (!borderColor) return

    ctx.fillStyle = borderColor

    // left
    ctx.fillRect(x, y, left, height)
    // top
    ctx.fillRect(x, y, width, top)
    // right
    ctx.fillRect(x + width - right, y, right, height)
    // bottom
    ctx.fillRect(x, y + height - bottom, width, bottom)
}

绘制边框，其实我们绘制的是四个矩形，每一个矩形就是一条边框。

绘制文本

function renderText(layoutBox: LayoutBox, ctx: CanvasRenderingContext2D, parent?: LayoutBox) {
    if (layoutBox.styleNode?.node.nodeType === NodeType.Text) {
        // get AnonymousBlock x y
        const { x = 0, y = 0, width } = parent?.dimensions.content || {}
        const styles = layoutBox.styleNode?.values || {}
        const fontSize = styles['font-size'] || '14px'
        const fontFamily = styles['font-family'] || 'serif'
        const fontWeight = styles['font-weight'] || 'normal'
        const fontStyle = styles['font-style'] || 'normal'

        ctx.fillStyle = styles.color
        ctx.font = `${fontStyle} ${fontWeight} ${fontSize} ${fontFamily}`
        ctx.fillText(layoutBox.styleNode?.node.nodeValue, x, y + parseInt(fontSize), width)
    }
}

通过 canvas 的 fillText() 方法，我们可以很方便的绘制带有字体风格、大小、颜色的文本。

输出图片

绘制完成后，我们可以借助 canvas 的 API 输出图片。下面用一个简单的示例来演示一下：

<html>
    <body id=" body " data-index="1" style="color: red; background: yellow;">
        <div>
            <div class="lightblue test">test1!</div>
            <div class="lightblue test">
                <div class="foo">foo</div>
            </div>
        </div>
    </body>
</html>
* {
    display: block;
}

div {
    font-size: 14px;
    width: 400px;
    background: #fff;
    margin-bottom: 20px;
    display: block;
    background: lightblue;
}

.lightblue {
    font-size: 16px;
    display: block;
    width: 200px;
    height: 200px;
    background: blue;
    border-color: green;
    border: 10px;
}

.foo {
    width: 100px;
    height: 100px;
    background: red;
    color: yellow;
    margin-left: 50px;
}

body {
    display: block;
    font-size: 88px;
    color: #000;
}

上面这段 HTML、CSS 代码经过渲染引擎程序解析后生成的图片如下：

总结

至此，这个玩具版的渲染引擎就完成了。虽然这个玩具并没有什么用，但如果能通过实现它来了解真实的渲染引擎是如何运作的，从这个角度来看，它还是“有用”的。

参考资料

• Let's build a browser engine!
• robinson
• 渲染页面：浏览器的工作原理
• 关键渲染路径
• 计算机系统要素

有的时候，你会想把链接嵌套在段落里，或者把图片变成链接。但你如何在 HTML 中这样做呢？

在这篇文章中，我将通过代码实例向你展示如何在段落中嵌套链接，以及如何将图片变成链接。

如何在段落标签内嵌套锚标签

如果你想在你的段落中包含链接，那么你可以在段落标签中嵌套锚标签。

在这第一个例子中，我们有 “I love freeCodeCamp” 的文字。

<p>I love freeCodeCamp</p>

如果我想把 freeCodeCamp 这个词变成一个链接，那么我就把它包在一组锚标签里面。

<p>I love <a href="https://www.freecodecamp.org/">freeCodeCamp</a></p>

我们还可以添加 target="_blank" 属性，让该链接在新标签页中打开。

<p>I love <a target="_blank" href="https://www.freecodecamp.org/">freeCodeCamp</a></p>

当你把鼠标悬停在 freeCodeCamp 这个词上时，你会发现它是一个链接，你现在可以点击它，它将引导你进入网站。

当你想把你的用户引导到与页面上的主要内容有关的额外信息时，可以在段落标签内嵌套链接。

在下一个例子中，我有一个关于 freeCodeCamp 的课程的段落。

<p>I started learning how to code using freeCodeCamp. I really enjoyed their Responsive Web Design course. I am looking forward to starting the JavaScript course soon.</p>

我想首先把 freeCodeCamp 这个词变成一个链接，把人们引向网站。

<p>I started learning how to code using  <a href="https://www.freecodecamp.org/">freeCodeCamp</a>. I really enjoyed  their Responsive Web Design course. I am looking forward to starting the  JavaScript course soon.</p>

现在我将添加另一个 “Responsive Web Design course” 的链接，这将引导人们进入基于项目的课程。

<p>I started learning how to code using  <a href="https://www.freecodecamp.org/">freeCodeCamp</a>. I really enjoyed  their  <a href="https://www.freecodecamp.org/learn/2022/responsive-web-design/">Responsive Web Design course</a>. I am looking forward to starting the JavaScript course soon.</p>

最后，我将为 JavaScript 课程添加一个链接，这将引导用户进入 JavaScript 课程。

<p>I started learning how to code using <a href="https://www.freecodecamp.org/">freeCodeCamp</a>. I really enjoyed their <a href="https://www.freecodecamp.org/learn/2022/responsive-web-design/">Responsive Web Design course</a>. I am looking forward to starting the <a href="https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/">JavaScript course</a> soon.</p>

这就是 web 浏览器中展示的样子：

如何将图片变成链接

在 HTML 中，我们可以使用 <img> 元素来在页面上添加图片。在这个例子中，我们要添加一张五只猫的图片。

<img  src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg"  alt="Five cats looking around a field."/>

如果我们想让该图片成为一个可点击的链接，那么我们可以把它放在一组锚标签里面。

<a href="https://en.wikipedia.org/wiki/Cat"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field."/></a>

我们还可以添加 target="_blank" 属性，让该链接在新标签页中打开。

<a target="_blank" href="https://en.wikipedia.org/wiki/Cat"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field." /></a>

当你把鼠标悬停在图片上时，你会看到光标指针，表明它是一个链接，引导你进入一篇关于猫的文章。

总结

在这篇文章中，我们学习了如何在段落中嵌套锚标签，以及如何将图片变成链接。

为了在段落中添加链接，我们可以在段落标签中嵌套锚标签。

<p>I love <a href="https://www.freecodecamp.org/">freeCodeCamp</a></p>

为了把图片变成一个链接，我们可以把一个 img 元素嵌套在锚标签里面。

<a href="https://en.wikipedia.org/wiki/Cat"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field."/></a>

我希望你喜欢这篇文章，祝你在编程之旅中好运。

CSS 是 web 开发者的一个强大工具。它允许你以各种方式设置 HTML 内容的样式。

一种常见的格式化技术是使用 font-weight 属性将文本加粗。粗体字可以增加对关键信息的强调，创造视觉对比，并提高内容的可读性。

在这篇文章中，你将学习如何使用 CSS font-weight 属性在 HTML 中将文本加粗。无论你是初学者还是有经验的开发者，本文都将为你提供一个全面的指南，让你在 HTML 内容中使用 CSS 创建粗体文本。

理解 Font-Weight 属性

font-weight 属性是一个 CSS 属性，它决定了文本的粗细程度，数值越高表示字体越粗。

font-weight 属性接受各种数值，包括数字和关键字值。

数值范围从 100 到900，增量为 100。正常粗细的值是 400，而 700 的值被认为是粗体。一些常用的关键字值包括 bold、bolder、lighter 和 normal。

如何用 CSS 创建粗体字

在 HTML 中使用 CSS 创建粗体字是一个简单的过程，可以通过几种方式实现。你可以选择使用任何形式的样式，如内联、内部或外部样式。

如何用内联样式创建粗体字

你可以使用内联样式，将 font-weight 属性直接应用于特定的 HTML 元素，就像这样：

<p style="font-weight: bold;">This is a bold text</p>

然而，内联样式会使你的 HTML 代码变得杂乱无章，难以维护，特别是当许多元素需要相同的样式时。

如何用内部样式创建粗体字

内部样式设计允许你在 HTML 文档的 head 部分使用 style 标签来应用 CSS 样式，像这样：

<head>
  <style>
    p {
      font-weight: bold;
    }
  </style>
</head>
<body>
  <p>This is a bold text</p>
</body>

这种方法在对一个页面上的多个元素应用相同的样式时很有用。

如何用外部样式创建粗体字

外部样式设计包括创建一个单独的 CSS 文件，并使用 link 标签将其链接到你的 HTML 文档中，像这样：

<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>

CSS 文件可以包含你网站上所有 HTML 元素的样式，你可以很容易地对这些样式进行修改，而不必修改 HTML 代码。

p {
  font-weight: bold;
}

在 HTML 中使用粗体字的最佳实践

虽然在 HTML 中使用粗体字可以帮助强调重要的信息，但必须遵循最佳实践，以确保文本的可读性和可访问性。

以下是在 HTML 中使用粗体字的一些最佳实践：

选择正确的 font-weight：在使用粗体字时，必须选择正确的 font-weight，以确保文本清晰易读。

较粗的 font-weight 可能适合于标题，较细的字体可能更适合于正文。同样重要的是，要确保粗体字不会太过压抑，也不会影响到页面上的其他元素。

平衡粗体字和其他格式化选项的关系：虽然粗体字可以成为吸引人们注意重要信息的有力方式，但重要的是要将它与其他格式选项相平衡，以创造视觉层次。

你可以使用其他样式，如斜体、下划线或不同的字体大小或颜色，来区分不同的重要程度。

避免过度使用粗体字：过度使用粗体字会使文字更难阅读，并有损页面的整体设计。

重要的是要少用粗体字，只在有必要强调重要信息的地方使用。避免在整个段落或文本块中使用粗体字，因为这可能使读者难以区分重要信息和普通文本。

测试无障碍性：当使用粗体字时，必须确保所有用户，包括有视力障碍的用户，都能使用。

屏幕阅读器可能难以阅读粗体文本，因此，使用无障碍工具测试页面，以确保粗体字格式正确，兼顾无障碍，是很重要的。

总结

总之，在 HTML 中使用粗体字可以有效地强调重要信息，并创造视觉层次。

通过选择合适的 font-weight，平衡粗体字与其他格式选项，避免过度使用，并进行无障碍测试，你可以确保粗体字保持可读性，并让所有用户都能使用。

谢谢你阅读本文，happy coding！

你可以访问我的网站，阅读我的 188 篇文章。你也可以使用搜索栏来查看我是否写过特定的文章。

HTML 有不同的标签，其中一些标签有语义的含义。一个 HTML 文件的基本模板看起来像这样：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>My Website</title>
    <link rel="stylesheet" href="./style.css">
    <link rel="icon" href="./favicon.ico" type="image/x-icon">
  </head>
  <body>
    <main>
        <h1>Welcome to My Website</h1>  
    </main>
	<script src="index.js"></script>
  </body>
</html>

在本文的其余部分，我将解释这个模板的每一部分是什么意思。

HTML 模板语法

DOCTYPE

<!DOCTYPE html>

这个元素是 HTML 文件的 doctype 声明。<!DOCTYPE html> 告诉浏览器将 HTML 代码渲染成 HTML5（而不是其他版本的 HTML）。

这一点很重要，因为如果没有这个声明，像 section、article 等 HTML5 元素可能不会被正确呈现。

html 标签

<html lang="en">
    ...
</html>

html 标签是 HTML 文档的根。它包含了 head 标签、body 标签以及网站中使用的其他所有 HTML 元素（除了 DOCTYPE）。

它也有 lang 属性，你可以用它来指定网站上文本内容的语言。默认值是 “unknown”，所以建议你总是指定一种语言。

定义语言有助于屏幕阅读器正确阅读单词，也有助于搜索引擎返回特定语言的搜索结果。

head 标签

<head>
    ...
</head>

head 标签容纳了你的网站的元数据。这些是用户在视觉上看不到的数据，但它们提供了关于你网站内容的信息。搜索引擎特别使用这些数据对你的网站进行排名。

head 标签中的 metadata 包括 meta 标签、title 标签、link 标签、脚本、样式表，以及更多。

meta 标签

<meta ... />

meta 标签是一个元数据元素，用于为你的网站添加更多的元数据，而不是像 title 这样的非元标签所提供的那种。

你可以将这些标签用于各种目的：

• 为社交媒体平台添加元数据，以创建链接预览
• 为你的网站添加一个描述
• 为你的网站添加一个字符编码
• 以及更多。

搜索引擎、社交媒体平台和 web 服务使用这些元数据来了解你的网站内容，并决定如何向用户展示它们。

title 标签

<title>My Website</title>

title 标签是用来为你的网站指定一个标题。你的浏览器使用它来在标题栏中显示一个标题：

这个标签也有助于搜索引擎在其搜索结果中显示你的网站的标题：

link 标签

你使用 link 标签，顾名思义，是为了链接到另一个文档。通常情况下，这在当前文档和一个单独的文档之间建立了不同种类的关系。

<link rel="stylesheet" href="./style.css">

例如，从上面的代码块中可以看出，我们已经与 style.css 文件建立了一个 “stylesheet” 文档关系。

这个标签最常见的用途是将样式表添加到文档中，同时也将 favicons 添加到网站中：

<link rel="icon" href="./favicon.ico" type="image/x-icon">

图标是靠近网页标题的一个小图片，如下图所示：

body 标签

<body>
    ...
</body>

body 标签容纳了网站的主体内容，对用户来说是可见的。虽然像 style 和 script 这样的非可见元素也可以添加到这里，但 body 标签里的大多数标签通常是可见的。

从标题到段落到媒体等等，这些元素都被添加在这里。任何没有在这里找到的元素（可以包含在 head 标签中）都不会在屏幕上显示。

main 标签

<main>
    ...
</main>

main 标签规定了一个网站的基本内容。这将是与网站标题相关的内容。

例如，一个博客文章页面。左边的社交媒体分享、右边的广告、页眉和页脚是网页的次要部分。显示封面图片、标题和帖子文本内容的帖子本身是中心部分，将在 main 元素中。

h1 标签

HTML 有不同的标题元素，包括 h1、h2、h3、h4、h5 和 h6。标题元素被用来描述网页的不同部分。而这些元素有一个顺序，h1 是最高的。

你在一个网页上只应该有一个 h1 元素，因为它是主要部分开始的地方。然后，你还有其他章节和子章节，你可以使用其他标题元素。

另外，请注意，你不应该跳过标题。例如，你不应该在使用 h2 元素之后使用 h4 元素。一个好的结构可以是这样的：

<h1>Welcome to my website</h1>

<h2>What do I have to offer</h2>

<h3>1. Financial Benefits</h3>

<h3>2. Society improves</h3>

<h4>a. Improving the tax system</h4>

<h4>b. Providing more refuse dumps</h4>

<h2>Who am I</h2>

<h2>Conclusion</h2>

从这段代码中，你可以看到标题层如何指定它们在章节和子章节中的位置。

总结

在这篇文章中，我们已经看到了一个 HTML 启动模板，以及这个模板中使用的每个标签的含义。

这个元素列表并非详尽无遗，在 head 标签和 body 标签中还可以找到更多的元素，而且还有许多属性。

有些时候，你会希望你的用户点击一个网站链接，并在一个新的浏览器标签页中打开它。但你如何在 HTML 中做到这一点呢？

在这篇文章中，我将通过代码实例告诉你如何使用 target="_blank" 属性。我还将谈到什么时候你应该考虑使用这个属性。

如何使用 target="_blank" 打开一个新的标签页

应该在锚标签开始标签内使用 target="_blank" 属性，像这样：

<a href="website-link-goes-here" target="_blank">

当用户点击该链接时，将自动在一个新的浏览器标签页打开该页面。

在这个例子中，我在一组段落标签中嵌套了一个链接，以引导人们到 freeCodeCamp。

<p>To learn how to code for free, please visit <a href="https://www.freecodecamp.org/learn" target="_blank">freeCodeCamp.org</a></p>

当你点击 freeCodeCamp 的链接时，它将为你打开一个新的浏览器标签页。

如果我省略 target="_blank"  属性，那么默认行为就是离开当前网页，直接进入该链接，而不打开新的浏览器标签页。

noopener 关键词是什么

rel 属性中的 noopener 关键词主要是出于安全考虑，以防止恶意用户通过 Window.opener 属性对原始网页进行破坏。如果恶意用户获得了对你的窗口对象的访问权，那么他们可以将你的页面重定向到一个恶意的 URL。

你可以使用 noopener 关键词来防止这种安全问题发生。下面是 noopener 关键词的使用方法：

<a target="_blank" rel="noopener" href="https://devdocs.io/html/element/heading_elements">DevDocs documentation</a>

如果你想了解更多关于 rel=noopener 帮助解决安全问题的信息，请阅读这篇有帮助的文章。

对 noopener 关键词的更新

在 2021 年，有一个更新，现代浏览器现在对任何使用 target=_blank 属性的链接设置 rel=noopener。正如你在这个“我可以使用吗”表中所看到的，除了 Internet Explorer 11，大多数浏览器都支持 noopener 关键词。

即使有了这个更新，很多开发者仍然会对使用 target=_blank 属性的链接使用 rel=noopener。

你应该一直使用 target="_blank" 属性吗

当用户点击一个链接时，默认行为是让该链接在用户所在的当前页面上打开，而不打开一个新的浏览器标签页。在很多情况下，你并不想改变这种默认行为，因为用户已经习惯了这种行为。

你必须仔细考虑何时是使用 target="_blank" 属性的好时机。一个很好的例子是，如果用户正在一个页面上工作，如果她们点击了一个链接，她们不想离开这个页面。

在这个例子中，我们正在链接到 DevDocs 文档，所以用户可以留在他们当前的页面上，在新的标签页上查找参考资料。

总结

如果你希望你的用户点击一个链接，打开一个新的浏览器标签页，你可以使用 target="_blank" 属性。

target="_blank" 属性是在锚标签开始标签内使用的，像这样：

<a href="website-link-goes-here" target="_blank">

在 rel 属性中添加 noopener 关键词是为了防止恶意用户通过 Window.opener 属性来扰乱原始网页。

<a target="_blank" rel="noopener" href="link-goes-here">

你必须仔细考虑何时是使用 target="_blank" 属性的好时机，因为你不希望总是改变链接的默认行为。

我希望你喜欢这篇文章，祝你在编程之旅中好运。

在这篇文章中，你将学习如何在 HTML 中创建一个文本输入字段。你还将了解 web 表单，并对其工作原理有一个概括的认识，因为文本框是表单的共同特征。

让我们开始吧！

web 表单是什么

表单是收集信息的一种有效方式。

在很多情况下，你需要填写一个实体的表格、一个打印的实体文件，并提供个人的详细资料。

例如，当你开始一份新工作时，或当你去做体检时，或当你在租/买房子的过程中，或任何其他需要文书工作的时候，你可能会填写一份表格并把它交给某人。

就像实体表格一样，在线数字 web 表单是一种使用 web 技术组合的方式来接收和收集用户和访问者的输入、信息和重要数据。

web 表格模仿物理表格，包含供用户填写信息的空格。

web 表单使用各种工具或表格控件来收集用户的输入。

一个网站可以有一个搜索框，或一个文本输入栏，用于输入一行文本。这使用户能够搜索特定的东西。

一个网站也可以包含一个注册表，让用户注册一个新闻简报或其他更新。

这通常会包含一个文本输入字段，用于输入用户的名字、姓氏和电子邮件地址。

当用户在进行网上购物时，许多网站也有注册/登录表单。例如，用户在一个文本字段中输入他们的用户名，在另一个字段中输入他们的密码。虽然密码字段也是文本字段，但每个文本字符都被一个黑点所掩盖，以隐藏正在输入的内容。

一个网站也可以有一个较大的文本区域，供用户输入较长的文本段落，这对于在博客文章下面留下评论是很有用的。

许多表单还允许用户通过选择一个单选按钮从若干选项中选择一个特定的选项。它们可以让用户通过选中/不选中复选框来选择一个以上的选项。

最后，所有的表单都有一个提交按钮，将数据提交给服务器，在服务器存储或处理数据。

web 表单如何运行

互联网是一个大型的全球网络，连接着世界各地数以百万计的计算机。

作为网络一部分的计算机通过发送和接收信息相互通信。

实现这一目的的方式是得益于 web 客户端/服务器请求/响应架构。

客户端，通常是一个 web 浏览器，如谷歌浏览器，向 web 服务器发送一个请求。

web 服务器是一块计算机硬件或软件，用于存储构成网站的文件，并在收到请求时分发这些文件。

该请求可能是要查看作为网页一部分的表单。

服务器将构成 web 表单的文件作为响应发送回来。然后，web 浏览器将这些文件组合在一起，用户在 web 浏览器中查看表单。

这个请求/响应循环是由一个协议构成的，叫作 HTTP（代表 HyperText Transfer Protocol 超文本传输协议）。

因此，当使用一个 web 表单时，用户输入必要的数据，然后经过客户端验证，检查是否填写了所有需要的字段，以及数据的格式是否正确，用户点击提交按钮。

然后，数据在 HTTP 请求中以名-值对的形式被发送到服务器上。这种用名-值对组织信息的方法可以确保正确的数据与正确的表单元素相对应。

然后，一个服务器端语言，如 PHP、Ruby 或 Python，被用来处理信息，并将其存储在数据库中，以便以后使用或检索。

如何在 HTML 中创建 web 表单

要在 HTML 中创建一个表单，你需要使用 <form> 元素，它是用来收集信息的。

<form> 元素有一个开头的 <form> 标签和结尾的 </form> 标签。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web form</title>
</head>
<body>
    <form>
        
    </form>
</body>
</html>

<form> 元素有两个属性：

• action 属性，它指定了你希望数据被发送和处理的 URL。
• method 属性，接受两个 HTTP 动词中的一个作为值，即 GET 或 POST。如果没有 method 属性，则默认使用 GET 方法。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web form</title>
</head>
<body>
    <form action="/url" method="GET">

    </form>
</body>
</html>

然而，仅此一项并不收集任何用户输入。

HTML input 元素是什么

<input> 元素最常用于收集和检索 web 表单中的用户数据。

它是用户输入数据的地方。

它被嵌套在 <form> 元素内部，是一个自闭合元素。这意味着它不需要一个结束标签。（关闭标签有一个正斜杠，</>）

你用它来创建不同风格的输入字段或表单输入控件，供用户输入各种不同的信息。

它可以创建文本字段、电子邮件字段、密码字段、复选框、单选按钮、下拉菜单、提交按钮，从用户的计算机中选择和上传文件和图像的能力，以及更多。

确定 input 字段或表单输入控件类型的方法是设置 type 属性并为其赋值。

<input> 的语法是这样的：

<input type="value"> <!-- the value of the type attribute determines the style of input field -->

例如，要创建一个允许用户上传文件的字段，<input> 元素是这样的：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web form</title>
</head>
<body>
    <form action="/url" method="GET">
        <input type="file">
    </form>
</body>
</html>

type 属性决定了该 input 元素可以接受什么样的数据。

如何创建一个 HTML 文本输入框

如果不指定 input 的 type 属性，其默认值是文本。所以文本输入是最常见的输入样式。

<input type="text"> 创建了一个单行文本输入框，用户可以在这里输入任何文本。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web form</title>
</head>
<body>
    <form action="/url" method="GET">
        <p>Please enter some text below:</p>
        <input type="text">
    </form>
</body>
</html>

当你在浏览器中查看该页面时，你可以看到创建了一个单行文本输入字段：

如何在文本字段中添加占位符文本

占位符文本，也叫填充文本，是一种提示的方式，给用户一个提示，告诉他们需要在表单中填写什么样的信息。它还可以在用户开始输入之前提供一个默认值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web form</title>
</head>
<body>
    <form action="/url" method="GET">
        <p>Please enter your first and last name:</p>
        <input type="text" placeholder="John">
        <input type="text" placeholder="Doe">
    </form>
</body>
</html>

上面代码的结果如下：

文本字段中 name 属性的重要性

当提交表单并将其发送到服务器时，服务器需要区分它所收集的不同种类的提交数据。

例如，它需要知道哪个是用户名、哪个是密码、哪个是电子邮件地址。

这意味着每个文本字段都需要一个 name 属性和一个值，以使提交的数据类型更加清晰。

例如，你可以用下面的方法来提示某人在一个文本字段中输入他们的全名：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web form</title>
</head>
<body>
    <form action="/url" method="GET">
        <p>Please enter your full name:</p>
        <input type="text" name="name" placeholder="John Doe">
    </form>
</body>
</html>

假设用户在文本字段中输入了 “John Bexley” 这个名字。然后，这将成为 name 属性的值。

如前所述，表单中的数据是以名-值对的形式发送的。在这种情况下，服务器会知道用户的 name 是 John Bexley，具体来说，就是 name=John Bexley。

再举一个例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web form</title>
</head>
<body>
    <form action="/url" method="GET">
        <p>Please enter your first  name:</p>
        <input type="text" name="first_name" placeholder="John">
        <p>Please enter your last  name:</p>
        <input type="text" name="last_name" placeholder="Doe">
    </form>
</body>
</html>

上面的代码有两个独立的文本字段，供用户分别输入他们的名字和姓氏。

如果他们输入 “John” 作为名字，发送到服务器的名-值对将是 first_name=John。

如果他们输入 “Bexley” 作为姓氏，发送到服务器的名-值对将是 last_name=Bexley。

如何使文本信息是必填的

你可以使某些字段成为必填项，需要用户填写。

HTML5 引入了客户端验证功能。

这是一个功能，如果用户没有填写必要的字段或没有正确输入信息，就会显示一条信息。这也意味着他们将无法提交表单。

为了启用这一功能，你需要做的就是给 <input> 元素添加 required 属性。这个属性不需要一个值。

请记住，在向 <input> 元素添加多个属性时，你不必按照一定的顺序添加元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web form</title>
</head>
<body>
    <form action="/url" method="GET">
        <p>Please enter your first  and last name:</p>
        <input type="text" name="first_name" placeholder="John" required>
        <input type="text" name="last_name" placeholder="Doe" required>
        <button type="submit">Submit</button>  
    </form>
</body>
</html>

看看如果一个用户没有填写其中一个字段会发生什么：

如果用户没有填写所需的字段，就会出现一条信息，用户将无法提交表单。

如何设置文本框中的最小和最大字符数

你可以指定用户在一个文本字段中可以输入的最小和最大字符数。

要创建一个最小字符数，请使用 minlength 属性。

例如，你可以让用户的用户名至少有三个字符长：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web form</title>
</head>
<body>
    <form action="/url" method="GET">
        <p>Please enter your username</p>
        <input type="text" name="username" minlength="3" required>
        <button type="submit">Submit</button>  
    </form>
</body>
</html>

如果用户名短于三个字符，用户将无法提交表单：

要限制用户在一个文本字段中输入的字符数，可以使用 maxlength 属性。

一个结合 minlength 和 maxlength 属性的例子是这样的：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web form</title>
</head>
<body>
    <form action="/url" method="GET">
        <p>Please enter your username</p>
        <input type="text" name="username" minlength="3" maxlength="20" required>
        <button type="submit">Submit</button>  
    </form>
</body>
</html>

在上面的例子中，一个用户的用户名必须至少有 3 个字符，并且不超过 20 个字符。

如何使用 label 元素

到目前为止，我一直在使用 <p> 元素在文本框前写一些文字，以这种方式提示用户，让他们知道他们需要输入什么。

但这不是最佳实践。

每个表单控件，在这里是每个文本字段，都应该有自己的 <label> 元素。

这使得使用屏幕阅读器等辅助技术的视力障碍用户能够访问该表单。

一种方法是将任何介绍性文本和 <input type="text"> 嵌套在一个 <label> 元素中，像这样：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web form</title>
</head>
<body>
    <form action="/url" method="GET">
        <label>
            Please enter your username
            <input type="text" name="username" minlength="3" maxlength="20" required>
        </label>
        <button type="submit">Submit</button>  
    </form>
</body>
</html>

另一种使用 <label> 元素并获得相同结果的方法是将其与 <input> 元素分开。

在这种情况下，需要给 <label> 添加 for 属性，给 <input> 添加 id 属性，以便将两者联系在一起。

for 的值将与 id 相同。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web form</title>
</head>
<body>
    <form action="/url" method="GET">
        <label for="username"> Please enter your username:</label>
            <input type="text" id="username" name="username" minlength="3" maxlength="20" required>
        <button type="submit">Submit</button>  
    </form>
</body>
</html>

总结

总而言之，要在 HTML 中创建一个文本输入字段，你至少需要：

• 一个 <input> 元素，这通常是在一个 <form> 元素内。
• 将 type 属性的值设置为 text。这将创建一个单行文本输入框
• 不要忘记添加一个 name 属性。这可以识别每个被创建的表单控件的信息，使服务器更清楚地了解情况。

要学习更多关于 HTML 和 CSS 的知识，请查看 freeCodeCamp 的响应式网页设计认证。你可以学习交互式课程，并创建有趣的项目。

谢谢你阅读本文，happy coding！

UTF-8 是一个字符编码系统。它可以让你将字符表示为 ASCII 文本，同时还允许使用国际字符，如中文字符。

截至 2020 年代中期，UTF-8 是最流行的编码系统之一。

要开始使用 UTF-8，你首先要熟悉基本的 ASCII 字符集。

什么是 ASCII 字符集

ASCII 使用 7 位代码来表示 128 个不同的字符。这些代码被分为 95 个可打印的字符，其中包括 26 个英文字母（A 到 Z，包括大写和小写）、10 个数字（0 到 9），以及各种标点符号和其他符号。

还有 33 个不可打印的字符，其中包括控制字符，如回车和换行，以及其他各种用于格式化文本的字符。

UTF-8 和 ASCII 有什么区别

UTF-8 扩展了 ASCII 字符集，使用 8 位代码，允许多达 256 个不同的字符。

这意味着 UTF-8 可以表示所有可打印的 ASCII 字符，以及不可打印的字符。

UTF-8 还包括各种额外的国际字符，如中文字符和阿拉伯字符。

如何在你的网页中使用 UTF-8 - HTML UTF-8 实例

现在是最简单的部分。你实际上不需要知道它是如何工作的（尽管我一会儿会告诉你）。你可以在你的 HTML 代码中配置 UTF-8 字符编码，只需在代码的 <head> 部分写上一行 HTML：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
</html>

说完这些，让我解释一下 UTF-8 是如何工作的，以及为什么它是一个出色的编码方案。

UTF-8 编码是如何工作的，以及每个字符使用的存储量是多少

当用 UTF-8 表示字符时，每个代码都由一个或多个字节的序列来表示。使用的字节数取决于该字符所代表的码位。下面是使用范围的细分：

• 在 ASCII 范围内（0-127）的代码由一个字节表示
• （128-2047）范围内的码位由两个字节表示
• （2048-65535）范围内的代码点由三个字节表示
• （65536-1114111）范围内的代码由四个字节表示。（这似乎是很多可能的字符，但请记住，仅在中文中，就有数 10 万个字符。）

UTF-8 序列的第一个字节被称为 “leader byte”。leader byte 提供了关于序列中有多少个字节的信息，以及字符的码位值是什么。

单字节序列的 leader byte 总是在（0-127）范围内。两字节序列的 leader byte 在（194-223）范围内。三字节序列的 leader byte 在（224-239）范围内。四字节序列的 leader byte 在（240-247）范围内。

序列中剩余的字节被称为 “trailing bytes”。两字节序列的 trailing bytes 的范围是（128-191）。三字节序列的 trailing bytes 的范围是（128-191）。而四字节序列的 trailing bytes 在（128-191）范围内。

你可以通过查看 leader bytes 和 trailing bytes 来计算一个字符的码位值。对于一个单字节的序列，其码位值等于 leader bytes 的值。

对于一个两字节的序列，码位值等于 ((leader byte - 194) * 64) + (trailing byte - 128)。

对于一个三字节的序列，码位值等于 ((leader byte - 224) * 4096) + ((trailing byte1 - 128) * 64) + (trailing byte2 - 128)。

对于一个四字节的序列，码位值等于 ((leader byte - 240) * 262144) + ((trailing byte1 - 128) * 4096) + ((trailing byte2 - 128) * 64) + (trailing byte3 - 128)。

UTF-8 是一个不错的编码选择

UTF-8 是一个超级有效的编码系统。它可以代表广泛的字符，同时仍然与 ASCII 兼容。这使得它成为国际化软件中的一个不错选择。

我希望这篇文章对你有帮助。如果你想学习更多关于编程和技术的知识，可以查看 freeCodeCamp 的核心编程课程。它是免费的。

HTML 文档类型声明，也被称为 DOCTYPE，是每个 HTML 或 XHTML 文档中需要的第一行代码。DOCTYPE 声明是给 Web 浏览器的一个指令，说明网页是用什么版本的 HTML 写的。这可以确保不同的网络浏览器对网页的解析方式是相同的。

在 HTML 4.01 中，DOCTYPE 声明是指文档类型定义（DTD）。DTD 定义了一个 XML 文档的结构和元素。因为 HTML 4.01 是基于标准通用标记语言（SGML）的，所以在 DOCTYPE 声明中提到 DTD 是必要的。

此外，HTML 4.01 的 doctype 要求声明 strict、transitional 或 frameset  DTD，每一种都有不同的使用情况，如下所述。

• 严格型 DTD：用于排除某些属性和元素的网页——W3C 希望随着 CSS 支持的增加而逐步淘汰这些属性和元素。
• 过渡型 DTD：用于包括某些属性和元素的网页——W3C 希望随着 CSS 支持的增加而逐步淘汰这些属性和元素。
• 框架型 DTD：用于带有框架的网页。

相比之下，HTML5 DOCTYPE 的声明要简单得多：它不再需要引用 DTD，因为它不再基于 SGML。请看下面的例子来比较 HTML4.01 和 HTML5 DOCTYPE。

示例

HTML5 及以后的 doctype 语法：

<!DOCTYPE html>

严格型 HTML 4.01 的 doctype 语法：

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

过渡型 HTML 4.01 的 doctype 语法：

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

框架型 HTML 4.01 的 doctype 语法：

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

历史

在 HTML 的形成期，web 标准还没有达成一致。浏览器供应商会以他们想要的方式创建新的特性。人们很少关注竞争性的浏览器。

其结果是，web 开发者不得不选择一个浏览器来开发他们的网站。这意味着网站在不支持的浏览器中无法很好地呈现。这种情况不能再继续下去了。

W3C（万维网联盟）制定了一套 web 标准来处理这种情况。所有的浏览器供应商和 web 开发人员都应该遵守这些标准。这将确保网站在不同的浏览器上都能很好地呈现。

该标准所要求的变化与一些现有的做法有很大的不同。遵循这些标准会破坏现有的不符合标准的网站。

为了解决这个问题，供应商开始在他们的浏览器中设置渲染模式。web 开发者需要在 HTML 文档的顶部添加一个 doctype 声明。doctype 声明将告诉浏览器对该文档使用何种渲染模式。

各个浏览器通常有三种不同的渲染模式：

• 完全标准模式是根据 W3C 网络标准来渲染页面。
• 怪异模式以不符合标准的方式渲染页面。
• 准标准模式接近于完全标准模式，但具有支持少量怪异的特性。

在现代的 HTML5 时代，web 标准在所有主要的浏览器中都得到了充分的实施。网站一般都是以符合标准的方式开发的。正因为如此，HTML5 doctype 声明的存在只是为了告诉浏览器以完全标准模式来渲染文档。

使用

除了注释之外，doctype 声明必须是 HTML 文档中的第一行代码，如果需要，注释可以放在前面。对于现代 HTML5 文档，doctype 声明应该如下：

<!DOCTYPE html>

更多信息

虽然不再普遍使用，但还有几个其他的 doctype 声明类型来自以前的 HTML 版本。也有专门针对 XML 文档的版本。要想了解更多关于这些类型的信息，并查看每种类型的代码示例，请看维基百科的文章。

W3 上的解释

MDN 词汇

W3Schools

关于怪异模式和标准模式的解释