前端必知必会-html编码规范和注意事项

编程流年

于 2024-07-29 09:00:00 发布

阅读量874

点赞数 9

文章标签：前端 html

本文链接：https://blog.csdn.net/qq_24018193/article/details/140730820

版权

HTML 样式指南

一致、干净、整洁的 HTML 代码可让其他人更轻松地阅读和理解代码。

以下是创建良好 HTML 代码的一些指南和技巧。

始终声明文档类型

HTML 的正确文档类型是：<!DOCTYPE html>

始终将文档类型声明为文档的第一行。

使用小写元素名称

HTML 允许在元素名称中混合使用大写和小写字母。仍建议使用小写元素名称，因为：

混合使用大写和小写名称看起来很糟糕
开发人员通常使用小写名称
小写看起来更干净
小写更容易编写

好的实例：

<body>
<p>这是一个段落。</p>
</body>

坏的实例：

<BODY>
<P>这是一个段落。</P>
</BODY>

所有 HTML 元素必须有结束标签

在 HTML 中，所有元素不是必须有结束标签（例如 <p> 元素）。

仍建议所有 HTML 元素必须有结束标签，如下所示：

好的实例：

<section>
<p>这是一个段落。</p>
<p>这是一个段落。</p>
</section>

不好的实例：

<section>
<p>这是一个段落。
<p>这是一个段落。
</section>

使用小写属性名称

HTML 允许在属性名称中混合使用大写和小写字母。
仍建议使用小写属性名称，因为：

混合使用大写和小写名称看起来很糟糕
开发人员通常使用小写名称
小写看起来更干净
小写更容易书写
好的实例：

<a href="https://www.baidu.com">访问baidu</a>

不好的实例：

<a HREF="https://www.baidu.com/html/">访问baidu</a>

始终属性值带引号

HTML 允许属性值不带引号。

但是，我们建议使用引号括住属性值，因为：

开发人员通常使用引号括住属性值
使用引号括住的值更易于阅读
如果值包含空格，则必须使用引号
好的实例：

<table class="striped">

不好的实例：

<table class=striped>

非常不好的实例：
因为值包含空格。class不生效：

<table class=table striped>

始终为图像指定 alt、宽度和高度

始终为图像指定 alt 属性。如果图像由于某种原因无法显示，此属性很重要。

此外，始终定义图像的宽度和高度。这可以减少闪烁，因为浏览器可以在加载之前为图像保留空间。

好的实例：

<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">

不好的实例：

<img src="html5.gif">

空格和等号

HTML 允许等号周围有空格。但是无空格的更易于阅读，并且可以更好地将实体组合在一起。

好的实例：

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

不好的实例：

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

避免使用长代码行

使用 HTML 编辑器时，左右滚动阅读 HTML 代码并不方便。

尽量避免代码行过长。

空行和缩进

不要无缘无故地添加空行、空格或缩进。

为了便于阅读，请添加空行以分隔大代码块或逻辑代码块。

为了便于阅读，请添加两个空格的缩进。不要使用制表键。

好的实例：

<body>

<h1>著名城市</h1>

<h2>东京</h2>
<p>东京是日本首都，是东京都的中心，也是世界上人口最多的大都市区。</p>

<h2>伦敦</h2>
<p>伦敦是英格兰的首都。它是英国人口最多的城市。</p>

<h2>巴黎</h2>
<p>巴黎是法国的首都。巴黎地区是欧洲最大的人口中心之一。</p>

</body>

不好的实例：

<body>
<h1>著名城市</h1>
<h2>东京</h2><p>东京是日本首都，大东京区的中心，也是世界上人口最多的大都市区。</p>
<h2>伦敦</h2><p>伦敦是英格兰的首都。它是英国人口最多的城市。</p>
<h2>巴黎</h2><p>巴黎是法国的首都。巴黎地区是欧洲最大的人口中心之一。</p>
</body>

良好的表格示例：

<table>
<tr>
<th>名称</th>
<th>说明</th>
</tr>
<tr>
<td>A</td>
<td>A 的说明</td>
</tr>
<tr>
<td>B</td>
<td>B 的说明</td>
</tr>
</table>

良好的列表示例：

<ul>
<li>伦敦</li>
<li>巴黎</li>
<li>东京</li>
</ul>

切勿忽略 `<title>` 元素

<title> 元素在 HTML 中是必需的。

页面标题的内容对于搜索引擎优化 (SEO) 非常重要！搜索引擎算法使用页面标题来决定在搜索结果中列出页面的顺序。

<title> 元素：

在浏览器工具栏中定义标题
在将页面添加到收藏夹时提供页面标题
在搜索引擎结果中显示页面标题
因此，请尽量使标题准确且有意义：

<title>HTML 样式指南和编码约定</title>

不要省略 `<html>` 和 `<body>`

HTML 页面在没有 <html> 和 <body> 标签的情况下仍可运行：

示例

<!DOCTYPE html>
<head>
<title>页面标题</title>
</head>

<h1>这是一个标题</h1>
<p>这是一个段落。</p>

仍强烈建议始终添加 <html> 和 <body> 标签！

省略 <body> 在旧版浏览器中会产生错误。
省略 <html> 和 <body> 也会导致 DOM 和 XML 软件崩溃。

不要省略 `<head>`

HTML <head> 标记也可以省略。

浏览器会将 <body> 之前的所有元素添加到默认的 <head> 元素中。

示例

<!DOCTYPE html>
<html>
<title>页面标题</title>
<body>

<h1>这是一个标题</h1>
<p>这是一个段落。</p>

</body>
</html>

仍建议使用 <head> 标记。

关闭空 HTML 元素

在 HTML 中，可以选择关闭空元素。

允许：

<meta charset="utf-8">

还允许：

<meta charset="utf-8" />

如果您希望 XML/XHTML 软件访问您的页面，请保留结束斜线 (/)，因为 XML 和 XHTML 中都需要它。

添加 lang 属性

在 <html> 标记内包含 lang 属性，以声明网页的语言。这是为了协助搜索引擎和浏览器。

示例

<!DOCTYPE html>
<html lang="en-us">
<head>
<title>页面标题</title>
</head>
<body>

<h1>这是一个标题</h1>
<p>这是一个段落。</p>

</body>
</html>

元数据

为了确保正确解释和搜索引擎正确索引，应尽早在 HTML 文档中定义语言和字符编码 <meta charset="charset">：

<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<title>页面标题</title>
</head>

设置viewport

视口是用户在网页上的可见区域。它因设备而异 - 在手机上比在计算机屏幕上小。

您应该在所有网页中包含以下 <meta> 元素：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

这将向浏览器提供有关如何控制页面尺寸和缩放的说明。

width=device-width 部分设置页面宽度以遵循设备的屏幕宽度（这将根据设备而有所不同）。
initial-scale=1.0 部分设置浏览器首次加载页面时的初始缩放级别。

HTML 注释

短注释应写在一行上，如下所示：

<!-- 这是一个注释 -->

跨多行的注释应写成如下形式：

<!--
这是一个长注释示例。 这是一个长注释示例。
这是一个长注释示例。 这是一个长注释示例。
-->

使用样式表

使用简单语法链接到样式表（type 属性不是必需的）：

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

短 CSS 规则可以压缩编写，如下所示：

p.intro {font-family:Verdana;font-size:16em;}

长 CSS 规则应写在多行上：

body {
background-color: lightgrey;
font-family: "Arial Black", Helvetica, sans-serif;
font-size: 16em;
color: black;
}

将左括号与选择器放在同一行上
在左括号前使用一个空格
使用两个缩进空格
在每个属性值对后使用分号，包括最后一个
如果值包含空格，则仅在值周围使用引号
将右括号放在新行上，不带前导空格

在 HTML 中加载 JavaScript

使用简单语法加载外部脚本（type 属性不是必需的）：

<script src="myscript.js">

使用 JavaScript 访问 HTML 元素
使用“不整洁”的 HTML 代码可能会导致 JavaScript 错误。

这两个 JavaScript 语句将产生不同的结果：

示例

getElementById("Demo").innerHTML = "Hello";

getElementById("demo").innerHTML = "Hello";

访问 JavaScript 样式指南。

使用小写文件名
某些 Web 服务器（Apache、Unix）对文件名区分大小写：“london.jpg”不能作为“London.jpg”访问。

其他 Web 服务器（Microsoft、IIS）不区分大小写：“london.jpg”可以作为“London.jpg”访问。

如果您混合使用大小写，则必须注意这一点。

如果您从不区分大小写的服务器转移到区分大小写的服务器，即使是很小的错误也会破坏您的 Web！

为避免这些问题，请始终使用小写文件名！

文件扩展名

HTML 文件应具有 .html 扩展名（允许使用 .htm）。

CSS 文件应具有 .css 扩展名。

JavaScript 文件应具有 .js 扩展名。

.htm 和 .html 之间有什么区别？

.htm 和 .html 文件扩展名之间没有区别！

任何 Web 浏览器和 Web 服务器都会将两者都视为 HTML。

默认文件名
当 URL 末尾未指定文件名（如“https://www.baidu.com/”）时，服务器只会添加默认文件名，例如“index.html”、“index.htm”、“default.html”或“default.htm”。

如果您的服务器仅配置了“index.html”作为默认文件名，您的文件必须命名为“index.html”，而不是“default.html”。

但是，服务器可以配置多个默认文件名；通常可以根据需要设置任意数量的默认文件名。

总结

本文介绍了的html编码规范和注意事项，如有问题欢迎私信和评论

编程流年

关注

9
点赞
踩
17

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端必知必会-html编码规范和注意事项

本文介绍了的html编码规范和注意事项，如有问题欢迎私信和评论。
复制链接

扫一扫

前端必知必会-html编码规范和注意事项

文章目录

HTML 样式指南

始终声明文档类型

始终将文档类型声明为文档的第一行。

使用小写元素名称

所有 HTML 元素必须有结束标签

使用小写属性名称

始终属性值带引号

始终为图像指定 alt、宽度和高度

空格和等号

避免使用长代码行

空行和缩进

切勿忽略 <title> 元素

不要省略 <html> 和 <body>

不要省略 <head>

关闭空 HTML 元素

添加 lang 属性

元数据

设置viewport

HTML 注释

使用样式表

在 HTML 中加载 JavaScript

访问 JavaScript 样式指南。

文件扩展名

.htm 和 .html 之间有什么区别？

总结

切勿忽略 `<title>` 元素

不要省略 `<html>` 和 `<body>`

不要省略 `<head>`