HTML格式规范

最新推荐文章于 2024-05-14 16:00:38 发布

xtyzmnchen

最新推荐文章于 2024-05-14 16:00:38 发布

阅读量1.8w

点赞数 10

分类专栏： HTML

本文链接：https://blog.csdn.net/xtyzmnchen/article/details/87917907

版权

HTML 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

1. 文件

文件格式

字符编码 字符编码必须是UTF-8无BOM格式
- VS Code → 文件 › 首选项 › 设置 › 文件 › Encoding › utf8
行尾序列 必须设置为Unix (LF)？
- VS Code → 文件 › 首选项 › 设置 › 文件 › Eol › \n

文件名称

文件的名称必须使用英文单词，特殊情况下可使用汉语拼音缩写。

字母必须全部小写
- e.g. sidebar.html
单词必须分开并且使用-连接
- e.g. social-media-widget.html

▲ 目录

2. 文档设置

本节展示了完整的HTML文件中所需的主要元素。

文档描述 必须指定并且应该是HTML5的
- e.g. <!DOCTYPE html>
语言必须定义并且包含在 html 标签中
- e.g. <html lang="en">
字符编码 必须指定，并且尽可能在前面定义
- e.g. <meta charset="utf-8">
Viewport 必须包含
- e.g. <meta name="viewport" content="width=device-width, user-scalable=no">
兼容IE设定 必须包含
- e.g. <meta http-equiv="X-UA-Compatible" content="ie=edge">
title 必须包含
- e.g. <title>Document</title>
Head and body 必须包含标签
- e.g. <head></head><body></body>

▲ 目录

示例

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

▲ 文档设置

3. 注释

本节介绍如何格式化和使用注释。

单行注释 必须独占一行，内部的文字必须被空格包围
- e.g. 
多行注释 必须在他们自己的行上开始和结束，文字不得缩进
- i.e. 
闭合标签的注释 应该包括类或ID符号和名称
- e.g. </div>
敏感信息 禁止出现在注释中
- e.g.

▲ 目录

1. 单行注释

单行注释必须独占一行，内部的文字必须被空格包围。

✖ 错误

<!--
This is a comment
-->

↳ 错误，因为  应该在一行内。

<!--This is a comment-->

↳ 错误，因为 This is a comment 的前后没有被空格包围。

✔ 正确

<!-- This is a comment -->

2. 多行注释

多行注释必须在他们自己的行上开始和结束，文字不得缩进

✖ 错误

<!-- This is a comment
that spans multiple lines
-->

↳ 错误，因为 <!-- 和 This is a comment 在一行上。

<!--
    This is a comment
    that spans multiple lines
-->

↳ 错误，因为 This is a comment 和 that spans multiple lines 存在缩进。

✔ 正确

<!--
This is a comment
that spans multiple lines
-->

3. 闭合标签的注释

闭合标签的注释应该包括类或ID符号和名称。

✖ 错误

<div id="main-wrapper">
    ...
</div><!-- main-wrapper -->

↳ 错误，因为缺少 # 前缀。

<div id="main-wrapper">
    ...
</div><!-- .main-wrapper -->

↳ 错误，因为 main-wrapper 前缀为 . 而不是 #.

✔ 正确

<div id="main-wrapper">
    ...
</div><!-- #main-wrapper -->

4. 敏感信息

敏感信息禁止出现在注释中。

✖ 错误

<!-- Some infos come from cookie -->

↳ 错误，因为这里显示了一些信息是从 cookie中来的.

▲ 注释

4. 格式化

本节概述了与空格和文本相关的各种常规格式规则。

行缩进 必须使用四个空格缩进
- i.e. <ul> ↵ ···· <li>
直接子元素 html, body, style 和 script 的直接子元素禁止缩进
- i.e. <body> ↵ <h1></h1> ↵ </body>, <head> ↵ ···· ... </head>
块级、列表和表格元素 必须新开一行，并且他们的子元素必须包含在里面
- i.e. <div> ↵ ·wei <h1>, <table> ↵ ···· <th>
尾空格 禁止出现在闭合标签后
- i.e. 不要 <p></p> · · ↵
标签和属性名称 必须全为小写，并且单词之间用短横线连接（kebab-case）
- e.g. <a href="" title="">, <link rel="stylesheet" href="">

▲ 目录

1. 行缩进

行缩进必须使用四个空格缩进。

✖ 错误

<ul>
	<li>Item number one</li>
	<li>Item number two</li>
</ul>

↳ 错误，因为 <li> 使用tab而不是使用空格缩进。

✔ 正确

<ul>
    <li>Item number one</li>
    <li>Item number two</li>
</ul>

2. 直接子元素

html, body, style 和 script 的直接子元素禁止缩进。

✖ 错误

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Welcome</title>
        <meta charset="utf-8">
        <style>
            #main-wrapper {
                width: 960px;
            }
        </style>
        <script>
            function show_alert() {
                ...
            }
        </script>
    </head>
    <body>
        <div id="main-wrapper">
            <h1>Welcome</h1>
            <p>This is a skeleton document.</p>
        </div>
    </body>
</html>

↳ 错误，因为 <head>, <body> 和 <div> 使用了缩进；
↳ 错误，因为 <style> 和 <script> 包含的内容使用了缩进。

✔ 正确

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Welcome</title>
    <meta charset="utf-8">
    <style>
    #main-wrapper {
        width: 960px;
    }
    </style>
    <script>
    function show_alert() {
        ...
    }
    </script>
</head>
<body>
<div id="main-wrapper">
    <h1>Welcome</h1>
    <p>This is a skeleton document.</p>
</div>
</body>
</html>

3. 块级、列表和表格元素

块级、列表和表格元素必须新开一行，并且他们的子元素必须包含在里面。

✖ 错误

<div><p>This is a paragraph.</p></div>

<ul><li>Item one</li><li>Item two</li></ul>

<table><tr><th>Header</th></tr><tr><td>Content</td></tr></table>

↳ 错误，因为 <div>, <ul>, <table> 和 <tr> 没有独占一行；
↳ 错误，因为 <p>, <li>, <tr> 和 <td> 没有使用缩进。

✔ 正确

<div>
    <p>This is a paragraph.</p>
</div>

<ul>
    <li>Item one</li>
    <li>Item two</li>
</ul>

<table>
    <tr>
        <th>Header</th>
    </tr>
    <tr>
        <td>Content</td>
    </tr>
</table>

4. 尾空格

尾空格禁止出现在闭合标签后。

✖ 错误

<p>This is a paragraph.</p>

↳ 错误，因为在 </p> 包含其他空格。

✔ 正确

<p>This is a paragraph.</p>

5. 标签和属性名称

标签和属性名称必须全为小写，并且单词之间用短横线连接（kebab-case）。

✖ 错误

<div ID="mainWrapper" class="DESKTOP">
    <P>This is a paragraph</P>
</div>

↳ 错误，因为 ID, mainWrapper, DESKTOP 和 <P> 没有使用小写。

✔ Correct

<div id="main-wrapper" class="desktop">
    <p>This is a paragraph</p>
</div>

▲ 格式化

5. 元素和属性

本节介绍如何使用元素和属性。

自闭合元素 禁止闭合
- e.g. <br>, <link rel="stylesheet" href="">
可闭合元素 必须闭合
- e.g. <ul><li></li></ul>
属性值 必须使用双引号包裹
- e.g. <a href="" title="">Link</a>
属性布尔值 禁止包含其他值
- e.g. <input type="text" name="" autofocus>
类型和语言属性 必须在 script 标签中省略
- e.g. <script src=""></script>
类型属性 必须在 link 和 style 标签中省略
- e.g. <style src=""></script>
协议应该被省略
- e.g. <link href="//style.css" rel="stylesheet">

▲ 目录

1. 自闭合元素

自闭合元素禁止闭合。

✖ 错误

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

<br />

↳ 错误，因为 <link> 和 <br> 包含 / 符号.

✔ Correct

<link href="theme.css" rel="stylesheet">

<br>

2. 可闭合元素

可闭合元素必须闭合。

✖ 错误

<!DOCTYPE html>
<html lang="en">
<div id="main-wrapper">
    <h1>Welcome</h1>
    <p>This is a skeleton document.
</div>
</html>

↳ 错误，因为缺少 <head></head>, <body></body> 元素和 </p> 闭合标签。

✔ 正确

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Welcome</title>
</head>
<body>
<div id="main-wrapper">
    <h1>Welcome</h1>
    <p>This is a skeleton document.</p>
</div>
</body>
</html>

3. 属性值

属性值必须使用双引号包裹。

✖ 错误

<form action=processor.html class='application'>
    ...
</form>

↳ 错误，因为 processor.html 和 application 没有用双引号包裹。

✔ 正确

<form action="processor.html" class="application">
    ...
</form>

4. 属性布尔值

属性布尔值禁止包含其他值。

~ 可以

<input type="text" name="first_name" autofocus="autofocus">

↳ 可以, 但是 autofocus 不需要作为 autofocus 属性的值。

✔ 正确

<input type="text" name="first_name" autofocus>

5. 类型和语言属性

类型和语言属性必须在 script 标签中省略。

✖ 错误

<script src="//script.js" type="text/javascript"></script>

↳ 错误，因为包含了 type 属性.

✔ 正确

<script src="//script.js"></script>

6. 类型属性

类型属性必须在 link 和 style 标签中省略。

✖ 错误

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

↳ 错误，因为包含了 type 属性.

✔ 正确

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

7. 协议

协议应该被省略。

~ 可以

<link rel="stylesheet" href="http://domain.com/style.css">

↳ 可以, 但是 http://domain.com 可替换为 //.

✔ 正确

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

▲ 元素和属性

6. 最佳实践

link和script标签位置 必须放置正确
- e.g. <head>...<title>Document</title><link rel="stylesheet" href="style.css"></head>
遵循HTML标签的嵌套规则
- i.e. 正确 <ul><li></li></ul>, 错误 <ul><p></p></ul>
表单字段标签label 必须对应相应的input标签
- e.g. <label for="pwd"></label><input name="pwd" type="text">
表单的name属性值 必须用下划线连接两个单词
- e.g. <input type="text" name="first_name">
字符实体 禁止使用
- i.e. 正确 —, 错误 —
alt属性 禁止为空
- i.e. 正确 <img href="img.jpg" alt="img">, 错误 <img href="img.jpg">
结构、表现、行为三者分离
HTML只关注内容（只表现为结构）
SEO优化
语义化

▲ 目录

1. link和script标签位置

引入css文件的<link>标签放在</title>与</head>标签之间一般的引入js文件的<script>标签放在</body>标签之前，特殊的例如模块加载器（异步加载模块等）放在<link>标签之前(Why?)

✖ 错误

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <script src="index.js"></script>
</head>
<body>
    ...
</body>
</html>

↳ 错误，因为 <script> 标签放置在头部。

✔ 正确

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    ...
<script src="index.js"></script>
</body>
</html>

2. 遵循HTML标签的嵌套规则

基本的HTML标签嵌套规则：

<ul>/<li>, <ol>/<li>和 <dl>/<dt>``<dd>是拥有父子级关系的标签, <ul>, <ol>, <dl> 只可以嵌套他们对应的子元素，而 <li>, <dd> 可以嵌套其他任意元素, <dt>禁止嵌套块级元素。
<h1~6>, <pre>和 <dt>禁止嵌套块级元素。
<button> 标签不可以嵌套交互性元素( <a>, <input>, <select>, <textarea>等)。
一般情况下行内元素不能嵌套块元素。

✖ 错误

<ul>
    <li>Item one</li>
    <li>Item two</li>
    <ul>
        <li>Sub-item one</li>
        <li>Sub-item two</li>
    </ul>
</ul>

↳ 错误，因为 <ul> 不可以直接嵌套 <ul>

✔ Correct

<ul>
    <li>Item one</li>
    <li>Item two</li>
    <li>
        <ul>
            <li>Sub-item one</li>
            <li>Sub-item two</li>
        </ul>
    </li>
</ul>

3. 表单字段标签label

表单字段标签label必须对应相应的input标签。

✖ 错误

<input type="radio" name="gender" id="male" value="male">
<input type="radio" name="gender" id="female" value="female">

↳ 错误，因为缺少 <label> 标签。

✔ 正确

<input type="radio" name="gender" id="male" value="male"> <label for="male">Male</label>
<input type="radio" name="gender" id="female" value="female"> <label for="female">Female</label>

4. 表单的name属性值

表单的name属性值必须用下划线连接两个单词。

✖ 错误

<input type="text" name="emailaddress">
<input type="text" name="email-address">

↳ 错误，因为 emailaddress 和 email-address 没有使用下划线连接。

✔ 正确

<input type="text" name="email_address">

5. 字符实体

字符实体禁止使用。

✖ 错误

&euro;

↳ 错误，因为使用了 € 字符实体.

✔ 正确

€

6. alt属性

alt属性禁止为空。

✖ 错误

<img href="img.jpg">

↳ 错误，因为缺少了 alt 属性.

✔ 正确

<img href="img.jpg" alt="img">

7. 结构、表现、行为三者分离

尽量在文档和模板中只包含结构性的 HTML；而将所有表现代码，移入样式表中；将所有动作行为，移入脚本之中。
在此之外，为使得它们之间的联系尽可能的小，在文档和模板中也尽量少地引入样式和脚本文件。

建议：

不使用行内样式
- e.g. <div style="..."></div>
不在元素上使用 style 属性
- e.g. <hr style="border-top: 5px solid black">
不使用行内脚本
- e.g. <script>alert('no good')</script>
不使用表象元素
- e.g. <b>, <u>, <center>, <font>, <b>
不使用表象类名
- e.g. red, left, center

8. HTML只关注内容（只表现为结构）

HTML所构建的文档应该只包含当前页面的结构，增强代码的可读性和可维护性。

HTML只显示展示内容信息
不要引入一些特定的 HTML 结构来解决一些视觉设计问题
不要将 <img> 元素当做专门用来做视觉设计的元素
样式上的问题应该使用 css 解决
一些表现型的元素可通过伪元素来解决，从而减少不必要的DOM节点

9. SEO优化

在构建html页面的时候适当考虑SEO的优化。

必须包含 <title> 标签， <title> 标签的内容不宜过长
设置关于本网页的 description 同时注意不要堆砌关键词
- e.g. <meta name="description" content="description">
合理使用 <h1~6> 标签
<img> 标签的 alt 属性禁止为空
- e.g. <img href="img.jpg" alt="img">
对于网页中非常重要的链接采用 title 属性说明，有助于帮助搜索引擎找到网页的重点URL。
- e.g. <a href="https://www.domain.com" title="title">

HTML标签权重分值排列
内部链接文字：10分
标题title：10分
域名：7分
H1，H2字号标题：5分
每段首句：5分
路径或文件名：4分
相似度（关键词堆积）：4分
每句开头：1.5分
加粗或斜体：1分
文本用法（内容）：1分
title属性：1分（注意不是 <title>，是 title 属性）
alt标记：0.5分
Meta描述（Description属性）：0.5分

10. 语义化

我们一直都在说语义化编程，语义化编程，但是在代码中很少有人完全使用正确的元素。
语义化是指：根据元素其被创造出来时的初始意义来使用它。
意思就是用正确的标签干正确的事，而不是只有 div 和 span 。
那么要做到语义化，首先是熟悉各标签的含义：

常用的标签有

a、b、br、button、caption、div、dd、dl、dt、em、form、h1~6、hr、i、iframe、img、input、label、ul、li、ol、option、p、select、span、strong、sub、sup、table、thead、tbody、tr、th、td、tfoot、textarea

html5新增的常用标签有

article、aside、audio、canvas、figcaption、figure、footer、header、nav、progress、section、source、time、video

选取合适的标签来构建表现的文档，不仅有利于增强代码的可读性，而且通常这些标签会带有一定的结构格式，即使没有引入css样式，也会以一种特定的结构呈现，同时也有利于SEO的优化。

xtyzmnchen

关注

10
点赞
踩
35

收藏

觉得还不错? 一键收藏
1
评论
HTML格式规范

1. 文件文件格式字符编码字符编码必须是UTF-8无BOM格式 VS Code → 文件 › 首选项 › 设置 › 文件 › Encoding › utf8 行尾序列必须设置为Unix (LF)？ VS Code → 文件 › 首选项 › 设置 › 文件 › Eol › \n 文件名称文件的名称必须使用英文单词，特殊情况下可使用汉语拼音缩写。字母必须全部小写...
复制链接

扫一扫