HTML 5 的 9 个技巧和最佳实践

使用 HTML 5,可能很难知道什么仍然相关,更不用说“最佳实践”了。

在新的 HTML 5 标准之前使用了一些功能,但随着开发人员的更新习惯,它们继续出现。

在这种情况下,这些功能不再起作用。其他功能是使其成为 HTML 5 标准但不再被视为最佳实践的实现示例。

那么为什么这些挥之不去的特征仍然存在呢?

我的看法是: 改变是困难的。开发人员必须适应并不断学习,因为该领域经常变化。

有时仍然存在使用其中一些功能的实例,即使它们并不常见。

此外,它还可以支持向后兼容以前的 HTML 版本。

什么是 HTML 5 最佳实践?

1.首先声明doctype,并声明为<!DOCTYPE HTML>

这是当前文档类型,它应该是文档的第一行。

2. 在 <head> 标签中包含一个外部 CSS 链接

尽管内联样式和内部样式都有用例,但最佳实践是使用外部 CSS 链接。

原因之一是浏览器可以缓存外部链接的样式表,因此在初次访问后加载速度更快。另一个原因是内联和内部样式更难维护和组织。

<head> 部分中的链接将缩短加载时间。如有必要,<script> 应该放在最后。

3.关闭你的标签

每个标签后面都应该有一个相应的结束标签。这将防止验证错误。

4. 标记只能小写

使用小写字母是开发者标准;Web 开发也不例外。这将使阅读和写作更容易。

5. 使用适当的描述性标签

当没有更好的标签如 <article>、<section、<header>、<footer> 等时,使用 <div> 是可以的…

6.在所有图像上包含 alt 标签和大小

alt 标签提高了屏幕阅读器的可访问性。定义图像大小有助于页面顺利加载,因为它决定了加载时页面的结构。这可以在 CSS 中更改以提高响应能力。

7. <h1> 标签只使用一次

<h1> 用于文档的标题或主要标题。它应该始终使用,并且每个文档只使用一次。

8. 按升序使用 <h2> 到 <h6>

顺序应反映每个标题的大小和重要性。标签 <h1> 是最大和最重要的,而 <h6> 标签是最小的。

不要跳过任何内容,只包括需要的数量。

9.使用正确的缩进

可接受的缩进是两个或四个空格。最好避免制表符,因为编辑器之间的不一致。大多数编辑器都有自定义间距以使其更容易。

每个嵌套元素都应该缩进。同一级别的元素应该在相同的缩进。

9. 在块元素内嵌套行内元素

<div> 等块元素应该包含内联元素 <span>、<a>、<img> 等…内联元素不能包含块元素。

最后的想法

这不是所有 HTML 最佳实践的完整列表。了解更多关于它们的最佳方式是查看其他开发人员的文档和实践。

快乐的编码和好运!

9-tips-and-best-practices-for-html-5-c01137w7