google编码规范之htmlcssguide.html其二HTML

最新推荐文章于 2023-10-05 18:02:37 发布

_xixi_nn

最新推荐文章于 2023-10-05 18:02:37 发布

阅读量433

点赞数

分类专栏： google编码规范文章标签： html xhtml 前端

本文链接：https://blog.csdn.net/weixin_56674431/article/details/122816631

版权

google编码规范专栏收录该内容

2 篇文章 0 订阅

订阅专栏

3 HTML 超文本标记语言

3.1 HTML Style Rules HTML编码规范

3.1.1 Document Type 文件类型

Use HTML5.

HTML5 (HTML syntax) is preferred for all HTML documents: <!DOCTYPE html>.

(It’s recommended to use HTML, as text/html. Do not use XHTML. XHTML, as application/xhtml+xml, lacks both browser and infrastructure support and offers less room for optimization than HTML.)

Although fine with HTML, do not close void elements, i.e. write <br>, not <br />.

使用HTML5.

HTML5（HTML语法）是所有HTML文件优先选取的<!DOCTYPE html>。

（推荐使用HTML，例如text/html。不要使用XHTML。XHTML，作为应用程序/xhtml+xm，缺乏浏览器和基础设施两者之间的支持，提供的优化空间比HTML较少。）

尽可能的去使用HTML，但不要关闭void元素，写 <br>，不要写<br />。

----------------------不认识的单词--------------------------------------------------

syntax：语法 application/xhtml+xm ：应用程序/xhtml+xm browser：浏览器

infrastructure：基础设施 close：关闭 elements：元素

3.1.2 HTML Validity HTML有效性

Use valid HTML where possible.

Use valid HTML code unless that is not possible due to otherwise unattainable performance goals regarding file size.

Use tools such as the W3C HTML validator to test.

Using valid HTML is a measurable baseline quality attribute that contributes to learning about technical requirements and constraints, and that ensures proper HTML usage.

尽可能使用有效的HTML。

使用有效的HTML代码，除非由于难以达到在文件大小方面的性能目标而不能做到这点。

使用例如W3C HTML验证程序等工具来测验。

使用有效的HTML是一个可测量的基线质量属性，增加了解技术要求和约束，确保使用HTML的用法正确。

---------------不认识的单词--------------------------------

valid：有效的 due to：由于 otherwise：否则；除此之外 unattainable：难以达到

regarding：关于 W3C HTML validator：W3C HTML验证程序 measurable：可测量的

baseline：底线；基线 attribute：属性 contributes：增加 proper：正确的

requirements：要求；必备条件 constraints：约束条件；限制 usage：用法

3.1.3 Semantics 语义

Use HTML according to its purpose.

Use elements (sometimes incorrectly called “tags”) for what they have been created for. For example, use heading elements for headings, p elements for paragraphs, a elements for anchors, etc.

Using HTML according to its purpose is important for accessibility, reuse, and code efficiency reasons.

根据它的意图使用HTML。

使用元素（有时错的被称为“标签”）作为创建的内容。例如，标题使用标题元素，段落使用p元素，超链接使用a元素，等等。

根据它的意图使用HTML，对于可达性、重新使用以及代码效率是重要理由。

--------------------不认识的单词----------------------------------------------------------------

incorrectly：错误的 heading：标题 accessibility：可达性；可访问性 reuse：重新使用

3.1.4 Multimedia Fallback 多媒体回退

Provide alternative contents for multimedia.

For multimedia, such as images, videos, animated objects via canvas, make sure to offer alternative access. For images that means use of meaningful alternative text (alt) and for video and audio transcripts and captions, if available.

Providing alternative contents is important for accessibility reasons: A blind user has few cues to tell what an image is about without @alt, and other users may have no way of understanding what video or audio contents are about either.

(For images whose alt attributes would introduce redundancy, and for images whose purpose is purely decorative which you cannot immediately use CSS for, use no alternative text, as in alt="".)

为多媒体提供可代替的内容。

对于多媒体，例如图像、录像、通过画布制作的动画物体，确保提供可替代的访问途径。对于图像意味着使用代替文本（alt），对于录像和音频使用文字记录和文字说明，如果可以获得。

提供可代替内容是重要的对于可访问的原因：一个无知的用户没有线索无法判断图像的内容，如果没有@alt，其他的用户或许没有方式去理解录像或者音频的内容等等。

（对于alt属性图像会引入多余，以及你不能立即使用CSS的纯粹装饰性图像，，不要使用其他文本，比如 alt=“ ”）

------------------------不认识的单词---------------------------------------------------

via：通过 audio：音频 redundancy：多余 as in：比如 immediately：立即

3.1.5 Separation of Concerns 关键点分离

Separate structure from presentation from behavior.

Strictly keep structure (markup), presentation (styling), and behavior (scripting) apart, and try to keep the interaction between the three to an absolute minimum.

That is, make sure documents and templates contain only HTML and HTML that is solely serving structural purposes. Move everything presentational into style sheets, and everything behavioral into scripts.

In addition, keep the contact area as small as possible by linking as few style sheets and scripts as possible from documents and templates.

Separating structure from presentation from behavior is important for maintenance reasons. It is always more expensive to change HTML documents and templates than it is to update style sheets and scripts.

将结构、演示和行为分开。

严格的保持结构（标记），演示（样式），和行为（脚本）部分，以及尝试去将这三者之间的相互作用降到绝对最小值之间。

即，确保文件和模板只包含HTML和唯一为结构目的服务HTML。将所有具代表的内容放在样式表中，以及所有行为的内容放进脚本里。

此外，通过从文档和模板中链接的样式表和脚本，保持联系面积尽可能小。

将结构、表现、行为分开是很重要的，出于维护的原因。更改HTML文件和模板的价格总是比样式表和脚本更高。

--------------------不认识的单词----------------------------------------------------------------

structure：结构 presentation：演示 Separate from：与...分开 interaction：相互影响

solely：唯一的 serving：服务 presentational：表象的 templates：模板

3.1.6 Entity References 实体引用

Do not use entity references.

There is no need to use entity references like —, ”, or ☺, assuming the same encoding (UTF-8) is used for files and editors as well as among teams.

The only exceptions apply to characters with special meaning in HTML (like < and &) as well as control or “invisible” characters (like no-break spaces).

不要使用实体引用。

不需要使用实体引用，比如—、”或者☺，假设文件和编码器以及团队之间用于相同的编码（UTF-8）。

只有一种例外适用于HTML特殊意义字符（像<和&），以及操纵装置或者“无形的”字符（比如无空格）。

--------------------------------不认识的单词------------------------------------------------------------

Entity：实体 References：参考；引用 assuming：假设 exceptions：例外

invisible：看不见的；无形的 no-break：不中断

3.1.7 Optional Tags 可选择的标签

Omit optional tags (optional).

For file size optimization and scannability purposes, consider omitting optional tags. The HTML5 specification defines what tags can be omitted.

(This approach may require a grace period to be established as a wider guideline as it’s significantly different from what web developers are typically taught. For consistency and simplicity reasons it’s best served omitting all optional tags, not just a selection.)

省略可选择的标签（可选）。

对于文件大小优化性和扫描性的目的，考虑省略可选标签。HTML5规范定义了什么标签能够省略。

（这个方法可能要求确立一个宽限期，作为一个更大的指南方向，因为它和web开发者的典型教学有明显的不同。对于一致性和简单的原因，最好能够省略所有可选的标签，不仅仅是一个选择。）

---------------------不认识的单词-----------------------------------

Omit：省略；遗漏 optimization：优化 scannability：扫描性 approach：方法

grace period：宽限期；优惠期 established：确立 guideline：指南 significantly：明显的

developers：开发者 consistency：一致性 simplicity：简单

3.1.8 `type` Attributes 类型属性

Omit type attributes for style sheets and scripts.

Do not use type attributes for style sheets (unless not using CSS) and scripts (unless not using JavaScript).

Specifying type attributes in these contexts is not necessary as HTML5 implies text/css and text/javascript as defaults. This can be safely done even for older browsers.

对于样式表和脚本的样式可省略类型属性。

不要使用类型属性，对于样式表（除非不使用CSS）和脚本（除非不使用JavaScript）。

在这些背景下指定类型属性是不需要的，因为HTML5暗示text/css和text/javascript作为默认值。对于旧的浏览器也可以安全的执行。

---------------------不认识的单词-----------------------------

implies：暗示

3.2 HTML Formatting Rules HTML格式规则

3.2.1 General Formatting 通常的格式

Use a new line for every block, list, or table element, and indent every such child element.

Independent of the styling of an element (as CSS allows elements to assume a different role per display property), put every block, list, or table element on a new line.

Also, indent them if they are child elements of a block, list, or table element.

(If you run into issues around whitespace between list items it’s acceptable to put all li elements in one line. A linter is encouraged to throw a warning instead of an error.)

对于每一板块、列表或者表元素，使用新的一行，并且缩进每一个子元素。

一个元素有独立的样式（因此CSS允许元素每个显示属性呈现不同的角色），每一板块、列表或者表元素放在新的一行上。

如果他们是板块、列表或者表元素的子元素，需要缩进他们。

（如果你遇到围绕列表项目之间空格的问题，它可以放在所有li元素那一行。鼓励去发出警告，而不是错误。）

-------------------不认识的单词--------------------------------------

Independent of：独立于 assume：呈现 per：每 display property：显示属性

run into：遇到

3.2.2 HTML Line-Wrapping HTML换行

Break long lines (optional).

While there is no column limit recommendation for HTML, you may consider wrapping long lines if it significantly improves readability.

When line-wrapping, each continuation line should be indented at least 4 additional spaces from the original line.

打破长线（选择）。

对于HTML ，当这里没有长列限制建议，如果它明显的提高了可读性，你可以考虑换行。

换行时，每一续行应该至少缩进4个空格与初始行之间。

-----------------不认识的单词-----------------------------------------

Line-Wrapping：绕线 column：长列；纵队 readability：可读性 indented：缩进