"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { a: "a", br: "br", code: "code", h2: "h2", h3: "h3", h4: "h4", img: "img", li: "li", p: "p", path: "path", pre: "pre", span: "span", svg: "svg", ul: "ul", ..._provideComponents(), ...props.components }; return _jsxs(_Fragment, { children: [_jsxs(_components.h2, { id: "setup", children: [_jsx(_components.a, { className: "heading-link", href: "#setup", children: _jsx(_components.svg, { xmlns: "http:www.w3.org/2000/svg", fill: "#ab2b65", viewBox: "0 0 20 20", className: "w-5 h-5", children: _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z" }) }) }), "Setup"] }), "\n", _jsxs(_components.h3, { id: "links-page", children: [_jsx(_components.a, { className: "heading-link", href: "#links-page", children: _jsx(_components.svg, { xmlns: "http:www.w3.org/2000/svg", fill: "#ab2b65", viewBox: "0 0 20 20", className: "w-5 h-5", children: _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z" }) }) }), "Links page"] }), "\n", _jsx(_components.p, { children: _jsx(_components.code, { className: "language-auto", children: "links.html" }) }), "\n", _jsx(_components.pre, { className: "language-html", children: _jsxs(_components.code, { className: "language-html code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { className: "token doctype", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "html"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "head"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "title"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "Links", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "body"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "h1"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "Links", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "p"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "This particular page is about links! There are three kinds of links:", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\t\n" }), _jsxs(_components.span, { className: "code-line", children: ["\t", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "ul"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: ["\t ", _jsx(_components.span, { className: "token comment", children: "" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: ["\t", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" })] }) }), "\n", _jsxs(_components.h3, { id: "images-page", children: [_jsx(_components.a, { className: "heading-link", href: "#images-page", children: _jsx(_components.svg, { xmlns: "http:www.w3.org/2000/svg", fill: "#ab2b65", viewBox: "0 0 20 20", className: "w-5 h-5", children: _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z" }) }) }), "Images page"] }), "\n", _jsx(_components.p, { children: _jsx(_components.code, { className: "language-auto", children: "images.html" }) }), "\n", _jsx(_components.pre, { className: "language-html", children: _jsxs(_components.code, { className: "language-html code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { className: "token doctype", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "html"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "head"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "title"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "Images", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "body"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "h1"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "Images", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] })] }) }), "\n", _jsxs(_components.h3, { id: "extras-page", children: [_jsx(_components.a, { className: "heading-link", href: "#extras-page", children: _jsx(_components.svg, { xmlns: "http:www.w3.org/2000/svg", fill: "#ab2b65", viewBox: "0 0 20 20", className: "w-5 h-5", children: _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z" }) }) }), "Extras page"] }), "\n", _jsx(_components.p, { children: _jsx(_components.code, { className: "language-auto", children: "extras.html" }) }), "\n", _jsx(_components.pre, { className: "language-html", children: _jsxs(_components.code, { className: "language-html code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { className: "token doctype", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "html"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "head"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "title"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "Extras", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "body"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "h1"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "Extras", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] })] }) }), "\n", _jsxs(_components.h3, { id: "image-downloads", children: [_jsx(_components.a, { className: "heading-link", href: "#image-downloads", children: _jsx(_components.svg, { xmlns: "http:www.w3.org/2000/svg", fill: "#ab2b65", viewBox: "0 0 20 20", className: "w-5 h-5", children: _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z" }) }) }), "Image downloads"] }), "\n", _jsx(_components.p, { children: "下载示例图片" }), "\n", _jsxs(_components.h2, { id: "anchors", children: [_jsx(_components.a, { className: "heading-link", href: "#anchors", children: _jsx(_components.svg, { xmlns: "http:www.w3.org/2000/svg", fill: "#ab2b65", viewBox: "0 0 20 20", className: "w-5 h-5", children: _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z" }) }) }), "Anchors"] }), "\n", _jsxs(_components.p, { children: ["链接是使用 ", _jsx(_components.code, { className: "language-auto", children: "" }), " 元素创建的，它代表“锚点”。它的工作原理就像前一章中的所有元素一样：当您将某些文本包装在 ", _jsx(_components.code, { className: "language-auto", children: "" }), " 标记中时，它会改变该内容的含义。让我们通过将以下段落添加到 ", _jsx(_components.code, { className: "language-auto", children: "links.html" }), " 的 ", _jsx(_components.code, { className: "language-auto", children: "" }), " 元素来看看："] }), "\n", _jsx(_components.pre, { className: "language-html", children: _jsx(_components.code, { className: "language-html code-highlight", children: _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "p"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "This example is about links and ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "a"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "images", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), ".", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }) }) }), "\n", _jsxs(_components.h2, { id: "links", children: [_jsx(_components.a, { className: "heading-link", href: "#links", children: _jsx(_components.svg, { xmlns: "http:www.w3.org/2000/svg", fill: "#ab2b65", viewBox: "0 0 20 20", className: "w-5 h-5", children: _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z" }) }) }), "Links"] }), "\n", _jsx(_components.p, { children: "就像元素为其包含的内容添加内容一样，HTML“属性”为其附加的元素添加内容。" }), "\n", _jsxs(_components.p, { children: ["不同的元素允许不同的属性，您可以参考 MDN 了解哪些元素接受哪些属性的详细信息。现在，我们关注 ", _jsx(_components.code, { className: "language-auto", children: "href" }), " 属性，因为它决定用户单击 ", _jsx(_components.code, { className: "language-auto", children: "" }), " 元素时的去向。更新您的链接以匹配以下内容："] }), "\n", _jsx(_components.pre, { className: "language-html", children: _jsx(_components.code, { className: "language-html code-highlight", children: _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "p"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "This example is about links and ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "a"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "href" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "'" }), "images.html", _jsx(_components.span, { className: "token punctuation", children: "'" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "images", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), ".", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }) }) }), "\n", _jsx(_components.p, { children: "请注意属性如何存在于开始标记内。首先是属性名称，然后是等号，然后是单引号或双引号中的属性“值”。此语法将属性与内容（位于标签之间）区分开来。" }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { className: "language-auto", children: "href" }), " 属性提供的额外信息告诉浏览器此 ", _jsx(_components.code, { className: "language-auto", children: "" }), " 元素实际上是一个链接，它应该以默认的蓝色文本呈现内容："] }), "\n", _jsx(_components.img, { src: "https://picbed.guoyingwei.top/2024/08/202408102129092.png", alt: "image.png", className: "internal" }), "\n", _jsxs(_components.h2, { id: "absolute-relative-and-root-relative-links", children: [_jsx(_components.a, { className: "heading-link", href: "#absolute-relative-and-root-relative-links", children: _jsx(_components.svg, { xmlns: "http:www.w3.org/2000/svg", fill: "#ab2b65", viewBox: "0 0 20 20", className: "w-5 h-5", children: _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z" }) }) }), "Absolute, relative, and root-relative links"] }), "\n", _jsx(_components.img, { src: "https://picbed.guoyingwei.top/2024/08/202408102129952.png", alt: "image.png", className: "internal" }), "\n", _jsxs(_components.h3, { id: "absolute-links", children: [_jsx(_components.a, { className: "heading-link", href: "#absolute-links", children: _jsx(_components.svg, { xmlns: "http:www.w3.org/2000/svg", fill: "#ab2b65", viewBox: "0 0 20 20", className: "w-5 h-5", children: _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z" }) }) }), "absolute links"] }), "\n", _jsxs(_components.h3, { id: "relative-links", children: [_jsx(_components.a, { className: "heading-link", href: "#relative-links", children: _jsx(_components.svg, { xmlns: "http:www.w3.org/2000/svg", fill: "#ab2b65", viewBox: "0 0 20 20", className: "w-5 h-5", children: _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z" }) }) }), "relative links"] }), "\n", _jsxs(_components.h4, { id: "parent-folders", children: [_jsx(_components.a, { className: "heading-link", href: "#parent-folders", children: _jsx(_components.svg, { xmlns: "http:www.w3.org/2000/svg", fill: "#ab2b65", viewBox: "0 0 20 20", className: "w-5 h-5", children: _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z" }) }) }), "parent folders"] }), "\n", _jsxs(_components.h3, { id: "root-relative-links", children: [_jsx(_components.a, { className: "heading-link", href: "#root-relative-links", children: _jsx(_components.svg, { xmlns: "http:www.w3.org/2000/svg", fill: "#ab2b65", viewBox: "0 0 20 20", className: "w-5 h-5", children: _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z" }) }) }), "root-relative links"] }), "\n", _jsxs(_components.h2, { id: "link-targets", children: [_jsx(_components.a, { className: "heading-link", href: "#link-targets", children: _jsx(_components.svg, { xmlns: "http:www.w3.org/2000/svg", fill: "#ab2b65", viewBox: "0 0 20 20", className: "w-5 h-5", children: _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z" }) }) }), "Link targets"] }), "\n", _jsxs(_components.p, { children: ["属性改变 HTML 元素的含义，有时您需要修改元素的多个方面。例如， ", _jsx(_components.code, { className: "language-auto", children: "" }), " 元素还接受 ", _jsx(_components.code, { className: "language-auto", children: "target" }), " 属性，该属性定义用户单击链接时在何处显示页面。默认情况下，大多数浏览器都会用新页面替换当前页面。我们可以使用 ", _jsx(_components.code, { className: "language-auto", children: "target" }), " 属性要求浏览器在新窗口/选项卡中打开链接。"] }), "\n", _jsxs(_components.p, { children: ["尝试更改 ", _jsx(_components.code, { className: "language-auto", children: "links.html" }), " 中的绝对链接以匹配以下内容。请注意第二个属性看起来与第一个属性非常相似，但它们之间用空格（或换行符）分隔："] }), "\n", _jsx(_components.pre, { className: "language-html", children: _jsxs(_components.code, { className: "language-html code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "li"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "Absolute links, like to\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "a"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "href" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "'" }), "https://developer.mozilla.org/en-US/docs/Web/HTML", _jsx(_components.span, { className: "token punctuation", children: "'" })] }), "\n"] })] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "target" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "'" }), "_blank", _jsx(_components.span, { className: "token punctuation", children: "'" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "Mozilla Developer Network", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), ", which is a very good\n"] }), _jsxs(_components.span, { className: "code-line", children: [" resource for web developers.", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] })] }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { className: "language-auto", children: "target" }), " 属性有一些对 Web 浏览器具有特殊含义的预定义值，但最常见的是 ", _jsx(_components.code, { className: "language-auto", children: "_blank" }), " ，它指定新选项卡或窗口。您可以在", _jsx(_components.a, { href: "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a", target: "_blank", rel: "noopener noreferrer", children: "MDN" }), " 上阅读其余内容。"] }), "\n", _jsxs(_components.h2, { id: "naming-conventions", children: [_jsx(_components.a, { className: "heading-link", href: "#naming-conventions", children: _jsx(_components.svg, { xmlns: "http:www.w3.org/2000/svg", fill: "#ab2b65", viewBox: "0 0 20 20", className: "w-5 h-5", children: _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z" }) }) }), "Naming conventions"] }), "\n", _jsxs(_components.p, { children: ["您网站中的文件的一部分，而不仅仅是 HTML 文件。 CSS 文件、JavaScript 文件和图像也应避免空格并具有一致的大小写。", _jsx(_components.br, {}), "\n", "这些命名约定适用于站点中的所有文件，而不仅仅是 HTML 文件。 CSS 文件、JavaScript 文件和图像也应避免空格并具有一致的大小写。"] }), "\n", _jsxs(_components.h2, { id: "images", children: [_jsx(_components.a, { className: "heading-link", href: "#images", children: _jsx(_components.svg, { xmlns: "http:www.w3.org/2000/svg", fill: "#ab2b65", viewBox: "0 0 20 20", className: "w-5 h-5", children: _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z" }) }) }), "Images"] }), "\n", _jsxs(_components.p, { children: ["图像包含在带有 ", _jsx(_components.code, { className: "language-auto", children: "" }), " 标记及其 ", _jsx(_components.code, { className: "language-auto", children: "src" }), " 属性的网页中，该属性指向要显示的图像文件。请注意它是一个空元素，就像上一章中的 ", _jsx(_components.code, { className: "language-auto", children: "
" }), " 和 ", _jsx(_components.code, { className: "language-auto", children: "

" }), " 一样。（暂时不要将其添加到我们的项目中。我们将在下一节中处理具体示例。）"] }), "\n", _jsx(_components.pre, { className: "language-html", children: _jsx(_components.code, { className: "language-html code-highlight", children: _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "img"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "src" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "'" }), "some-photo.jpg", _jsx(_components.span, { className: "token punctuation", children: "'" })] }), _jsx(_components.span, { className: "token punctuation", children: "/>" })] }), "\n"] }) }) }), "\n", _jsxs(_components.h2, { id: "image-formats", children: [_jsx(_components.a, { className: "heading-link", href: "#image-formats", children: _jsx(_components.svg, { xmlns: "http:www.w3.org/2000/svg", fill: "#ab2b65", viewBox: "0 0 20 20", className: "w-5 h-5", children: _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z" }) }) }), "Image formats"] }), "\n", _jsx(_components.img, { src: "https://picbed.guoyingwei.top/2024/08/202408102129433.png", alt: "image.png", className: "internal" }), "\n", _jsxs(_components.h3, { id: "jpg-images", children: [_jsx(_components.a, { className: "heading-link", href: "#jpg-images", children: _jsx(_components.svg, { xmlns: "http:www.w3.org/2000/svg", fill: "#ab2b65", viewBox: "0 0 20 20", className: "w-5 h-5", children: _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z" }) }) }), "jpg images"] }), "\n", _jsx(_components.p, { children: "JPG 图像设计用于处理大型调色板，而不会过度增加文件大小。这使得它们非常适合包含大量渐变的照片和图像。" }), "\n", _jsx(_components.p, { children: "另一方面，JPG 不允许透明像素，如果您仔细观察，您可以在下图的白色边缘中看到透明像素：" }), "\n", _jsx(_components.img, { src: "https://picbed.guoyingwei.top/2024/08/202408102130621.png", alt: "image.png", className: "internal" }), "\n", _jsxs(_components.p, { children: ["使用以下代码片段将此 ", _jsx(_components.code, { className: "language-auto", children: "mochi.jpg" }), " 图像嵌入到我们的 ", _jsx(_components.code, { className: "language-auto", children: "images.html" }), " 页面中（这还包括一些到其他页面的导航）："] }), "\n", _jsx(_components.pre, { className: "language-html", children: _jsxs(_components.code, { className: "language-html code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "p"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "This page covers common image formats, but you may also be looking for ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "a"] }), "\n"] })] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { className: "token tag", children: [" ", _jsx(_components.span, { className: "token attr-name", children: "href" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "'" }), "links.html", _jsx(_components.span, { className: "token punctuation", children: "'" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "links", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), " and ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "a"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "href" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "'" }), "misc/extras.html", _jsx(_components.span, { className: "token punctuation", children: "'" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "useful\n"] }), _jsxs(_components.span, { className: "code-line", children: [" extras", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), ".", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "h2"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "JPGs", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "p"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "JPG images are good for photos.", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "img"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "src" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "'" }), "images/mochi.jpg", _jsx(_components.span, { className: "token punctuation", children: "'" })] }), _jsx(_components.span, { className: "token punctuation", children: "/>" })] }), "\n"] })] }) }), "\n", _jsxs(_components.h3, { id: "gif-images", children: [_jsx(_components.a, { className: "heading-link", href: "#gif-images", children: _jsx(_components.svg, { xmlns: "http:www.w3.org/2000/svg", fill: "#ab2b65", viewBox: "0 0 20 20", className: "w-5 h-5", children: _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z" }) }) }), "gif images"] }), "\n", _jsx(_components.p, { children: "GIF 是简单动画的首选，但代价是它们在调色板方面受到一定限制，切勿将它们用于照片。透明像素是 GIF 的二元选项，这意味着不能有半透明像素。" }), "\n", _jsx(_components.p, { children: "这可能会导致难以在透明背景上获得高水平的细节。因此，如果不需要动画，通常最好使用 PNG 图像。" }), "\n", _jsx(_components.img, { src: "https://internetingishard.netlify.app/mochi-961ee5.6d9c21cd.gif", alt: "an animated mochi bouncing up and down", className: "internal" }), "\n", _jsxs(_components.p, { children: ["您可以使用以下命令将这个小家伙添加到我们的 ", _jsx(_components.code, { className: "language-auto", children: "images.html" }), " 文件中："] }), "\n", _jsx(_components.pre, { className: "language-html", children: _jsxs(_components.code, { className: "language-html code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "h2"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "GIFs", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "p"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "GIFs are good for animations.", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "img"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "src" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "'" }), "images/mochi.gif", _jsx(_components.span, { className: "token punctuation", children: "'" })] }), _jsx(_components.span, { className: "token punctuation", children: "/>" })] }), "\n"] })] }) }), "\n", _jsxs(_components.h3, { id: "png-images", children: [_jsx(_components.a, { className: "heading-link", href: "#png-images", children: _jsx(_components.svg, { xmlns: "http:www.w3.org/2000/svg", fill: "#ab2b65", viewBox: "0 0 20 20", className: "w-5 h-5", children: _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z" }) }) }), "png images"] }), "\n", _jsx(_components.p, { children: "PNG 非常适合照片或动画以外的任何内容。对于照片，相同质量（人眼感知）的 PNG 文件通常会比同等的 JPG 文件大。然而，它们确实可以很好地处理不透明度，并且没有调色板限制。" }), "\n", _jsx(_components.p, { children: "这使得它们非常适合图标、技术图表、徽标等。" }), "\n", _jsx(_components.img, { src: "https://picbed.guoyingwei.top/2024/08/202408102131025.png", alt: "image.png", className: "internal" }), "\n", _jsx(_components.p, { children: "我们也将此 PNG 图像添加到我们的示例项目中：" }), "\n", _jsx(_components.pre, { className: "language-html", children: _jsxs(_components.code, { className: "language-html code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "h2"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "PNGs", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "p"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "PNGs are good for diagrams and icons.", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "img"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "src" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "'" }), "images/mochi.png", _jsx(_components.span, { className: "token punctuation", children: "'" })] }), _jsx(_components.span, { className: "token punctuation", children: "/>" })] }), "\n"] })] }) }), "\n", _jsxs(_components.h3, { id: "svg-images", children: [_jsx(_components.a, { className: "heading-link", href: "#svg-images", children: _jsx(_components.svg, { xmlns: "http:www.w3.org/2000/svg", fill: "#ab2b65", viewBox: "0 0 20 20", className: "w-5 h-5", children: _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z" }) }) }), "svg images"] }), "\n", _jsx(_components.p, { children: "与上述基于像素的图像格式不同，SVG 是一种基于矢量的图形格式，这意味着它可以放大或缩小到任何尺寸，而不会损失质量。此属性使 SVG 图像成为响应式设计的绝佳工具。它们几乎适用于与 PNG 相同的所有用例，您应该尽可能使用它们。" }), "\n", _jsx(_components.img, { src: "https://internetingishard.netlify.app/svg-vs-png-image-3df7fd.cf9848fd.png", alt: "SVG image with crisp edges compared to a pixelated PNG image", className: "internal" }), "\n", _jsx(_components.p, { children: "这些300×300像素的图像原本是100×100像素，但是放大它们可以清楚地显示它们之间的差异。请注意左侧 SVG 图像上清晰、干净的线条，而右侧 PNG 图像现在像素化程度很高。" }), "\n", _jsxs(_components.p, { children: ["尽管 SVG 是矢量格式，但其使用方式与光栅格式完全相同。继续将 ", _jsx(_components.code, { className: "language-auto", children: "mochi.svg" }), " 添加到我们的 ", _jsx(_components.code, { className: "language-auto", children: "images.html" }), " 页面："] }), "\n", _jsx(_components.pre, { className: "language-html", children: _jsxs(_components.code, { className: "language-html code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "h2"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "SVGs", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "p"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "SVGs are ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "em"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "amazing", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), ". Use them wherever you can.", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "img"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "src" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "'" }), "images/mochi.svg", _jsx(_components.span, { className: "token punctuation", children: "'" })] }), _jsx(_components.span, { className: "token punctuation", children: "/>" })] }), "\n"] })] }) }), "\n", _jsx(_components.p, { children: "SVG 存在一个潜在问题：为了使它们在浏览器中一致显示，您需要使用图像编辑器（例如 Abode Illustrator 或 Sketch）将任何文本字段转换为轮廓。如果您的图像包含大量文本（如本教程中精美的屏幕截图），这可能会对文件大小产生很大影响。出于这个原因，InternetingIsHard.com 使用 PNG 代替 SVG，尽管 SVG 非常棒" }), "\n", _jsxs(_components.h2, { id: "image-dimensions", children: [_jsx(_components.a, { className: "heading-link", href: "#image-dimensions", children: _jsx(_components.svg, { xmlns: "http:www.w3.org/2000/svg", fill: "#ab2b65", viewBox: "0 0 20 20", className: "w-5 h-5", children: _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z" }) }) }), "Image dimensions"] }), "\n", _jsxs(_components.p, { children: ["为了将基于像素的图像缩小到预期大小 (75×75)，我们可以使用 ", _jsx(_components.code, { className: "language-auto", children: "" }), " 元素的 ", _jsx(_components.code, { className: "language-auto", children: "width" }), " 属性。在 ", _jsx(_components.code, { className: "language-auto", children: "images.html" }), " 中，更新所有基于像素的图像以匹配以下内容："] }), "\n", _jsx(_components.pre, { className: "language-html", children: _jsxs(_components.code, { className: "language-html code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token comment", children: "" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "img"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "src" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "'" }), "images/mochi.jpg", _jsx(_components.span, { className: "token punctuation", children: "'" })] }), " ", _jsx(_components.span, { className: "token attr-name", children: "width" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "'" }), "75", _jsx(_components.span, { className: "token punctuation", children: "'" })] }), _jsx(_components.span, { className: "token punctuation", children: "/>" })] }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token comment", children: "" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "img"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "src" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "'" }), "images/mochi.gif", _jsx(_components.span, { className: "token punctuation", children: "'" })] }), " ", _jsx(_components.span, { className: "token attr-name", children: "width" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "'" }), "75", _jsx(_components.span, { className: "token punctuation", children: "'" })] }), _jsx(_components.span, { className: "token punctuation", children: "/>" })] }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token comment", children: "" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "img"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "src" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "'" }), "images/mochi.png", _jsx(_components.span, { className: "token punctuation", children: "'" })] }), " ", _jsx(_components.span, { className: "token attr-name", children: "width" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "'" }), "75", _jsx(_components.span, { className: "token punctuation", children: "'" })] }), _jsx(_components.span, { className: "token punctuation", children: "/>" })] }), "\n"] })] }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { className: "language-auto", children: "width" }), " 属性设置图像的明确尺寸。还有一个相应的 ", _jsx(_components.code, { className: "language-auto", children: "height" }), " 属性。仅设置其中之一将导致图像按比例缩放，而定义两者将拉伸图像。尺寸值以像素为单位指定，并且切勿包含单位（例如， ", _jsx(_components.code, { className: "language-auto", children: "width='75px'" }), " 是不正确的）。"] }), "\n", _jsxs(_components.h2, { id: "text-alternatives", children: [_jsx(_components.a, { className: "heading-link", href: "#text-alternatives", children: _jsx(_components.svg, { xmlns: "http:www.w3.org/2000/svg", fill: "#ab2b65", viewBox: "0 0 20 20", className: "w-5 h-5", children: _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z" }) }) }), "Text alternatives"] }), "\n", _jsxs(_components.p, { children: ["将 ", _jsx(_components.code, { className: "language-auto", children: "alt" }), " 属性添加到 ", _jsx(_components.code, { className: "language-auto", children: "" }), " 元素是最佳实践。它定义了所显示图像的“替代文本”。这对搜索引擎和使用纯文本浏览器的用户（例如，由于视力障碍而使用文本转语音软件的人）都有影响。"] }), "\n", _jsx(_components.pre, { className: "language-html", children: _jsxs(_components.code, { className: "language-html code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token comment", children: "" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "img"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "src" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "'" }), "images/mochi.jpg", _jsx(_components.span, { className: "token punctuation", children: "'" })] }), " ", _jsx(_components.span, { className: "token attr-name", children: "width" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "'" }), "75", _jsx(_components.span, { className: "token punctuation", children: "'" })] }), " ", _jsx(_components.span, { className: "token attr-name", children: "alt" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "'" }), "A mochi ball in a bubble", _jsx(_components.span, { className: "token punctuation", children: "'" })] }), _jsx(_components.span, { className: "token punctuation", children: "/>" })] }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token comment", children: "" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "img"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "src" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "'" }), "images/mochi.gif", _jsx(_components.span, { className: "token punctuation", children: "'" })] }), " ", _jsx(_components.span, { className: "token attr-name", children: "width" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "'" }), "75", _jsx(_components.span, { className: "token punctuation", children: "'" })] }), " ", _jsx(_components.span, { className: "token attr-name", children: "alt" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "'" }), "A dancing mochi ball", _jsx(_components.span, { className: "token punctuation", children: "'" })] }), _jsx(_components.span, { className: "token punctuation", children: "/>" })] }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token comment", children: "" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "img"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "src" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "'" }), "images/mochi.png", _jsx(_components.span, { className: "token punctuation", children: "'" })] }), " ", _jsx(_components.span, { className: "token attr-name", children: "width" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "'" }), "75", _jsx(_components.span, { className: "token punctuation", children: "'" })] }), " ", _jsx(_components.span, { className: "token attr-name", children: "alt" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "'" }), "A mochi ball", _jsx(_components.span, { className: "token punctuation", children: "'" })] }), _jsx(_components.span, { className: "token punctuation", children: "/>" })] }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [_jsx(_components.span, { className: "token comment", children: "" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "img"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "src" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "'" }), "images/mochi.svg", _jsx(_components.span, { className: "token punctuation", children: "'" })] }), " ", _jsx(_components.span, { className: "token attr-name", children: "alt" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "'" }), "A mochi ball with Bézier handles", _jsx(_components.span, { className: "token punctuation", children: "'" })] }), _jsx(_components.span, { className: "token punctuation", children: "/>" })] }), "\n"] })] }) }), "\n", _jsxs(_components.h2, { id: "more-html-attributes", children: [_jsx(_components.a, { className: "heading-link", href: "#more-html-attributes", children: _jsx(_components.svg, { xmlns: "http:www.w3.org/2000/svg", fill: "#ab2b65", viewBox: "0 0 20 20", className: "w-5 h-5", children: _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z" }) }) }), "More html attributes"] }), "\n", _jsxs(_components.h3, { id: "document-language", children: [_jsx(_components.a, { className: "heading-link", href: "#document-language", children: _jsx(_components.svg, { xmlns: "http:www.w3.org/2000/svg", fill: "#ab2b65", viewBox: "0 0 20 20", className: "w-5 h-5", children: _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z" }) }) }), "document language"] }), "\n", _jsxs(_components.p, { children: ["网页的默认语言由顶级 ", _jsx(_components.code, { className: "language-auto", children: "" }), " 元素上的 ", _jsx(_components.code, { className: "language-auto", children: "lang" }), " 属性定义。我们的文档是英文的，因此我们将使用 ", _jsx(_components.code, { className: "language-auto", children: "en" }), " 国家/地区代码作为属性值（对我们创建的所有页面执行此操作）："] }), "\n", _jsx(_components.pre, { className: "language-html", children: _jsx(_components.code, { className: "language-html code-highlight", children: _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "html"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "lang" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "'" }), "en", _jsx(_components.span, { className: "token punctuation", children: "'" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "\n"] }) }) }), "\n", _jsxs(_components.h3, { id: "character-sets", children: [_jsx(_components.a, { className: "heading-link", href: "#character-sets", children: _jsx(_components.svg, { xmlns: "http:www.w3.org/2000/svg", fill: "#ab2b65", viewBox: "0 0 20 20", className: "w-5 h-5", children: _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z" }) }) }), "character sets"] }), "\n", _jsxs(_components.p, { children: ["“字符集”有点像浏览器的数字字母表。它与文档的语言不同，因为它只影响字母本身的呈现方式，而不影响内容的语言。让我们将一些国际字符复制并粘贴到 ", _jsx(_components.code, { className: "language-auto", children: "misc/extras.html" }), " 网页中，看看会发生什么。"] }), "\n", _jsx(_components.pre, { className: "language-html", children: _jsxs(_components.code, { className: "language-html code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "h2"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "Character Sets", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "p"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "You can use UTF-8 to count in Turkish:", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsx(_components.span, { className: "code-line", children: "\n" }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "ol"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "li"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "bir", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "li"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "iki", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "li"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "üç", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "li"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "dört", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "li"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "beş", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] })] }) }), "\n", _jsx(_components.img, { src: "https://picbed.guoyingwei.top/2024/08/202408102131774.png", alt: "image.png", className: "internal" }), "\n", _jsxs(_components.p, { children: ["这是因为大多数浏览器的默认字符集不容纳这些“特殊”字符。要解决此问题，请通过将带有 ", _jsx(_components.code, { className: "language-auto", children: "charset" }), " 属性的 ", _jsx(_components.code, { className: "language-auto", children: "" }), " 元素添加到 ", _jsx(_components.code, { className: "language-auto", children: "misc/extras.html" }), " 的 ", _jsx(_components.code, { className: "language-auto", children: "" }), " 来指定 UTF-8 字符编码文件："] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-auto code-highlight", children: _jsx(_components.span, { className: "code-line", children: "\n" }) }) }), "\n", _jsxs(_components.p, { children: ["特殊字符现在应该正确呈现。如今，UTF-8 有点像互联网的通用字母表。您创建的每个网页的 ", _jsx(_components.code, { className: "language-auto", children: "" }), " 中都应包含此行。"] }), "\n", _jsxs(_components.h2, { id: "htmlentities", children: [_jsx(_components.a, { className: "heading-link", href: "#htmlentities", children: _jsx(_components.svg, { xmlns: "http:www.w3.org/2000/svg", fill: "#ab2b65", viewBox: "0 0 20 20", className: "w-5 h-5", children: _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z" }) }) }), "Html entities"] }), "\n", _jsx(_components.p, { children: "“HTML 实体”是一种特殊字符，无法在 HTML 文档中表示为纯文本。" }), "\n", _jsxs(_components.h3, { id: "reserved-characters", children: [_jsx(_components.a, { className: "heading-link", href: "#reserved-characters", children: _jsx(_components.svg, { xmlns: "http:www.w3.org/2000/svg", fill: "#ab2b65", viewBox: "0 0 20 20", className: "w-5 h-5", children: _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z" }) }) }), "Reserved characters"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { className: "language-auto", children: "<" }), " 、 ", _jsx(_components.code, { className: "language-auto", children: ">" }), " 和 ", _jsx(_components.code, { className: "language-auto", children: "&" }), " 字符称为“保留字符”，因为它们不允许在未经编码的情况下插入到 HTML 文档中。这是因为它们在 HTML 语法中具有某种含义： ", _jsx(_components.code, { className: "language-auto", children: "<" }), " 开始一个新标签， ", _jsx(_components.code, { className: "language-auto", children: ">" }), " 结束一个标签，以及，正如我们即将学习的， ", _jsx(_components.code, { className: "language-auto", children: "&" }), " 引发 HTML 实体。"] }), "\n", _jsxs(_components.p, { children: ["在 ", _jsx(_components.code, { className: "language-auto", children: "misc/extras.html" }), " 中，添加以下内容："] }), "\n", _jsx(_components.pre, { className: "language-html", children: _jsxs(_components.code, { className: "language-html code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "h2"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "HTML Entities", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "p"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "There are three reserved characters in HTML: ", _jsx(_components.span, { className: "token entity named-entity", title: "<", children: "<" }), " ", _jsx(_components.span, { className: "token entity named-entity", title: ">", children: ">" }), " and ", _jsx(_components.span, { className: "token entity named-entity", title: "&", children: "&" }), ". You\n"] }), _jsxs(_components.span, { className: "code-line", children: [" should always use HTML entities for these three characters.", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] })] }) }), "\n", _jsxs(_components.p, { children: ["entities始终以与号 ( ", _jsx(_components.code, { className: "language-auto", children: "&" }), " ) 开头并以分号 ( ", _jsx(_components.code, { className: "language-auto", children: ";" }), " ) 结尾。在两者之间，您放置一个特殊代码，浏览器会将其解释为符号。在本例中，它将 ", _jsx(_components.code, { className: "language-auto", children: "lt" }), " 、 ", _jsx(_components.code, { className: "language-auto", children: "gt" }), " 和 ", _jsx(_components.code, { className: "language-auto", children: "amp" }), " 分别解释为小于、大于和 & 符号。"] }), "\n", _jsxs(_components.h3, { id: "quotes", children: [_jsx(_components.a, { className: "heading-link", href: "#quotes", children: _jsx(_components.svg, { xmlns: "http:www.w3.org/2000/svg", fill: "#ab2b65", viewBox: "0 0 20 20", className: "w-5 h-5", children: _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z" }) }) }), "quotes"] }), "\n", _jsx(_components.p, { children: "有四种不同类型的大引号（opening and closing single and double quotes）：" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: _jsx(_components.code, { className: "language-auto", children: "“" }) }), "\n", _jsx(_components.li, { children: _jsx(_components.code, { className: "language-auto", children: "”" }) }), "\n", _jsx(_components.li, { children: _jsx(_components.code, { className: "language-auto", children: "‘" }) }), "\n", _jsx(_components.li, { children: _jsx(_components.code, { className: "language-auto", children: "’" }) }), "\n"] }), "\n", _jsxs(_components.p, { children: ["You can use them in place of ", _jsx(_components.code, { className: "language-auto", children: "'" }), " and ", _jsx(_components.code, { className: "language-auto", children: "\"" }), " straight quotes, like so:", _jsx(_components.br, {}), "\n", "您可以使用它们代替 ", _jsx(_components.code, { className: "language-auto", children: "'" }), " 和 ", _jsx(_components.code, { className: "language-auto", children: "\"" }), " 直引号，如下所示："] }), "\n", _jsx(_components.pre, { className: "language-html", children: _jsxs(_components.code, { className: "language-html code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "p"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "If you", _jsx(_components.span, { className: "token entity named-entity", title: "’", children: "’" }), "re into ", _jsx(_components.span, { className: "token entity named-entity", title: "“", children: "“" }), "web typography,", _jsx(_components.span, { className: "token entity named-entity", title: "”", children: "”" }), " you", _jsx(_components.span, { className: "token entity named-entity", title: "’", children: "’" }), "ll also find\n"] }), _jsxs(_components.span, { className: "code-line", children: [" yourself using curly quotes quite a bit.", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] })] }) }), "\n", _jsx(_components.p, { children: "与直引号不同，这些弯引号实体应该紧贴文本。" }), "\n", _jsxs(_components.h3, { id: "utf-8-and-htmlentities", children: [_jsx(_components.a, { className: "heading-link", href: "#utf-8-and-htmlentities", children: _jsx(_components.svg, { xmlns: "http:www.w3.org/2000/svg", fill: "#ab2b65", viewBox: "0 0 20 20", className: "w-5 h-5", children: _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z" }) }) }), "utf-8 and html entities"] }), "\n", _jsx(_components.p, { children: "在过去的网络时代，HTML 文件中不允许包含特殊字符，这使得实体更加有用。但是，由于我们现在使用 UTF-8 字符集，因此我们应该能够将任何字符直接插入 HTML 文档中。" }), "\n", _jsx(_components.p, { children: "这使得实体主要用作保留字符或在编写直接 HTML 时方便使用。" }), "\n", _jsxs(_components.h2, { id: "summary", children: [_jsx(_components.a, { className: "heading-link", href: "#summary", children: _jsx(_components.svg, { xmlns: "http:www.w3.org/2000/svg", fill: "#ab2b65", viewBox: "0 0 20 20", className: "w-5 h-5", children: _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", d: "M9.493 2.853a.75.75 0 00-1.486-.205L7.545 6H4.198a.75.75 0 000 1.5h3.14l-.69 5H3.302a.75.75 0 000 1.5h3.14l-.435 3.148a.75.75 0 001.486.205L7.955 14h2.986l-.434 3.148a.75.75 0 001.486.205L12.456 14h3.346a.75.75 0 000-1.5h-3.14l.69-5h3.346a.75.75 0 000-1.5h-3.14l.435-3.147a.75.75 0 00-1.486-.205L12.045 6H9.059l.434-3.147zM8.852 7.5l-.69 5h2.986l.69-5H8.852z" }) }) }), "Summary"] }), "\n", _jsxs(_components.p, { children: ["网站基本上只是一堆链接在一起的 HTML、图像和（我们很快就会了解的）CSS 文件。您应该开始将网站视为用户浏览我们在 Web 开发过程中创建的文件夹和文件的一种漂亮方式。", _jsx(_components.br, {}), "\n", "With that perspective, it should be clear than maintaining a well-organized file system is a critical aspect of creating a website.", _jsx(_components.br, {}), "\n", "从这个角度来看，应该清楚的是，维护组织良好的文件系统是创建网站的一个关键方面。"] }), "\n", _jsxs(_components.p, { children: ["We also learned about a few important attributes (", _jsx(_components.code, { className: "language-auto", children: "lang" }), " and ", _jsx(_components.code, { className: "language-auto", children: "charset" }), ") that give us the basic template you should use as the beginning of every web page you ever create:", _jsx(_components.br, {}), "\n", "我们还了解了一些重要的属性（ ", _jsx(_components.code, { className: "language-auto", children: "lang" }), " 和 ", _jsx(_components.code, { className: "language-auto", children: "charset" }), " ），它们为我们提供了应该用作您创建的每个网页的开头的基本模板："] }), "\n", _jsx(_components.pre, { className: "language-html", children: _jsxs(_components.code, { className: "language-html code-highlight", children: [_jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { className: "token doctype", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "html"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "lang" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "'" }), "en", _jsx(_components.span, { className: "token punctuation", children: "'" })] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "head"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "meta"] }), " ", _jsx(_components.span, { className: "token attr-name", children: "charset" }), _jsxs(_components.span, { className: "token attr-value", children: [_jsx(_components.span, { className: "token punctuation attr-equals", children: "=" }), _jsx(_components.span, { className: "token punctuation", children: "'" }), "UTF-8", _jsx(_components.span, { className: "token punctuation", children: "'" })] }), _jsx(_components.span, { className: "token punctuation", children: "/>" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "title"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "Some Web Page", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "body"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "<" }), "h1"] }), _jsx(_components.span, { className: "token punctuation", children: ">" })] }), "Some Web Page", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsx(_components.span, { className: "token comment", children: "" }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [" ", _jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] }), _jsxs(_components.span, { className: "code-line", children: [_jsxs(_components.span, { className: "token tag", children: [_jsxs(_components.span, { className: "token tag", children: [_jsx(_components.span, { className: "token punctuation", children: "" })] }), "\n"] })] }) }), "\n", _jsxs(_components.p, { children: ["However, we’re still missing one really big piece: CSS. In the next chapter, we’ll discover more HTML elements and attributes that will let us attach CSS styles to our entire website.", _jsx(_components.br, {}), "\n", "然而，我们仍然缺少一个非常重要的部分：CSS。在下一章中，我们将发现更多 HTML 元素和属性，它们可以让我们将 CSS 样式附加到整个网站。", _jsx(_components.br, {}), "\n", "The ability to work with multiple files and link them to each other in intelligent ways will become even more important than it was in this chapter.", _jsx(_components.br, {}), "\n", "处理多个文件并以智能方式将它们相互链接的能力将变得比本章中更加重要。"] })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent };