让您的 HTML 变得专业

离开你的 HTML 专业的

这是我在学习和专业表演期间收集的技巧的汇编。该内容对以下人员非常有用：

  • 它以 HTML 开头
  • 想学习编写更好的 HTML（语义）
  • 为搜索引擎改进
  • 提高可访问性
  • 获得良好实践

工具

您可以在任何文本编辑器中编写 HTML，但在生产力方面，使用适合您的文本编辑器是有意义的。所以，写这篇文章的一个好帮手就是VSCode，因为我们可以安装完成HTML代码的Emmet扩展，甚至在写的时候给出很好的提示。

那么，现在来看看如何改进 HTML 的技巧：

1. 文档类型

放上标签 文档类型 在文件的开头，以使浏览器更容易阅读并避免错误。

 <!DOCTYPE html>

2. 标题

编写智能标题，标题是负责搜索引擎更好地找到您的页面的标题之一。为此，一个好的模式是创建一个标题：

  • 重要的
  • 有关键字（方便搜索）

3. 语言

放置正确的文档语言。这也有助于搜索引擎识别您在页面上使用的语言。

 <html lang="pt-BR">

4.利用元标签

学会使用 元标记。 目标是文档本身的配置。

  • 字符集 : 标识使用的字符编码 (UTF-8)。这使得字符被正确解释，避免了特殊字符和重音的错误。

  • 描述 : 把我想显示的内容放在搜索引擎的标题下面。理想的做法是在搜索页面上放置一些影响正在阅读的人并让他们进入您的页面的内容。

  • 视口 : 标识 HTML 将适应不同的移动设备

5.使用样式标签

不要使用属性 风格 直接无HTML

  • 免责声明：建议将样式保留在与 HTML 文件不同的文件中。代码更干净，更易于维护。
  • specificity x !important：如果你在一个单独的文件中混合和匹配 css 并且还在 HTML 中使用样式标签，它会弄乱属性的特异性。最终，您最终会迷失在“这个对象的属性来自哪里，css 文件还是 html？应该从哪里来？”

6.如何导入CSS

将样式导入标签 <head> : 提高页面的渲染性能，因为它在样式仍在加载时已经被读取。

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

7. 如何导入 JavaScript

  • 关闭之前的脚本 </body> ：提高渲染性能。这是因为当 HTML 读取脚本时页面的渲染会暂停，所以如果你把它放在最后，它会在没有暂停的情况下渲染。

    <body> <h1>你好世界</h1> <script src="script.js" /> </body>

  • 如果您想在 HTML 的另一部分使用脚本，例如 <head> , 推荐使用属性 推迟 .它是一个布尔属性，指示是否与渲染页面并行加载脚本并在渲染页面时运行脚本。在这种情况下，也可以使用属性 异步 , 不同之处在于与 异步 脚本将在加载完成后立即运行，如果尚未完成渲染则暂停页面渲染。

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

8.使用语义标签

HTML 的作用不仅是为 Web 构建文档，而且还通过语义标签来描述这些文档中存在的内容的含义。语义 HTML 旨在描述 HTML 文档中存在的内容的含义，使程序员以及处理此信息的浏览器和其他引擎都更清楚。 （资源： https://www.devmedia.com.br/html-semantico-conheca-os-elementos-semanticos-da-html5/38065 )

列表标签 HTML：

h1, h2, h3, h4, h5 e h6 : 页面标题，h1为主，其他为副标题

p ： 段落

一个 ： 关联

按钮 ： 按钮

乌尔力 : 列表和列表项

HTML5 附带的标签

标题 ：对于标题，它位于页面顶部

主要的 ：对于页面内容，它在页眉和页脚之间

导航 : 用于页面导航项

文章 ：文章，例如博客文章

部分 ： 部分

在旁边 ：对于页面的横向内容，通常在主要内容旁边，可以是主要内容的一部分，也可以是主要内容的额外内容

页脚 : 用于踢脚线

9. 学习使用可访问性属性

辅助功能属性

alt ：这是组件的属性 图像 .

有两个很好的理由使用 alt ：

  • 搜索引擎看不到图像，但可以读取 alt。

  • 看不到图像和屏幕阅读器的人将阅读 alt。

    替代文本

标题 ：任何组件的描述，以帮助那些使用屏幕阅读器的人。

 <button  
 类型="按钮"  
 onClick="handleClick()"  
 title="带您进入详细信息页面的按钮"  
 >  
 细节  
 </button>

表索引 ：当用户使用 TAB 时，遵循关注字段的确切顺序。

咏叹调 （可访问的富 Internet 应用程序）：定义使残障人士更容易访问内容和 Web 应用程序的方法。这个值得更深入的研究，所以我会在最后留下两个关于这个主题的参考资料。

10. 规范 HTML 书写

你可以写任何你想做的事情，但这会让浏览器难以渲染，以后你自己甚至你的同事也很难理解代码。这就是我们使用一些模式的原因：

  • 在标签中使用小写字母
  • 注意关闭标签
  • 注意代码格式化和清理。它甚至有一个插件叫做 更漂亮 这有助于自动格式化您的代码，使其更具可读性。

11. 改进表格

每当您要使用表单时，请使用和滥用任务 字段集 e 传奇 因为他们会为你分离内容。

  • 字段集 + 图例

始终使用标签 标签 代表界面项之前的标题 输入 这是数据输入。当用户点击 标签 自动聚焦 输入 .

  • 标签+输入

    用户数据

12. 压缩 HTML

使用工具来减小 HTML 文件的大小。这有助于搜索引擎。

  • 自动化（gulp/webpack）与手动（在线工具）

13. 有效的 HTML

在构建页面/应用程序时。始终检查：

  • 如果代码遵循标准
  • 如果您有警报和错误

您可以使用有助于验证的工具，例如：

  • Lighthouse (DevTools)：这个工具非常好，因为它分析了页面的性能、可访问性、最佳实践和 SEO，并且还给出了如何改进每种情况的提示。您直接在浏览器中运行它。
  • https://validator.w3.org/

参考 ：

用于 Web 可访问性的 ARIA 简介 | Web开发

ARIA — 可访问性 | MDN

HTML defer 属性

HTML 元素 — HTML：超文本标记语言 | MDN

https://www.youtube.com/c/RocketSeat

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/37018/53541612

posted @ 2022-09-16 12:56  哈哈哈来了啊啊啊  阅读(1)  评论(0)  编辑  收藏  举报