HTML 中应避免的 7 种过时做法

我们都应该改掉一些日常的 HTML 编码习惯。

使用类型<script>属性<style>

❌别再写这个了：

<style type="text/css">/* CSS styles here */</style>
<script type="text/javascript">/* JS code here */</script>

✅ 相反，你应该简单地写：

<style>/* CSS styles here */</style>
<script>/* JS code here */</script>

无需指定类型属性，现代浏览器足够智能，可以理解哪些<style>是用于 CSS，<script>哪些是用于 JavaScript 和 V for Vendetta！

手风琴（常见问题）块需要 JS 代码

简单！观看：

<details>
  <summary>To be or not to be?</summary>
  <div>
    That is the question!
  </div>
</details>

结果如下：

还有一些额外的样式：

好的，但是您可能会问，平稳的打开/关闭动作怎么样？

这很棘手，所以如果您需要精美流畅的动画，您应该包含一些 JavaScript。

但是如果你可以处理简单的单向 CSS 转换，那么你可以这样做：

每页仅使用<header>一次<footer>

尽管有些人认为<header>和<footer>元素分别代表页面的页眉和页脚，但这是一个错误的说法。

这些元素与最近的节内容相关，这意味着它们是以下元素之一的子元素：<article>、、和。<aside><nav><section>

因此，当您在页面上创建另一个部分时，您可以（实际上，您应该）使用<header>和/或元素。<footer>

以下是包含正确元素的作者信息框的示例：

使用frameborder="0"去除边框<iframe>

这是元素的一个已弃用的属性<iframe>。就像你（希望）不要使用 align 属性来处理文本对齐一样，你也应该避免使用 frameborder 属性。

相反，使用 CSS 属性 border 来处理<iframe>边框。

尽管如此，当您右键单击 YouTube 或 Vimeo 视频，然后点击“复制嵌入代码”时，您会看到一个带有 frameborder="0" 属性的元素。因此，在将嵌入代码应用到您的页面后，请务必删除该 frameborder 属性，并在 CSS 中将<iframe>border 属性设置为您的。<iframe>

包含对 IE 8 的支持

❌ 以下脚本为 Internet Explorer 6-8 提供了基本的 HTML5 样式：

<!--[if lt IE 9]>
  <script src="scripts/html5shiv.js"></script>
<![endif]-->

说真的，这已经是过时的声音了。别再添加支持 Internet Explorer 的脚本了。我说的可不只是 IE 8，而是所有 Explorer！就连微软也已于 2022 年 6 月停止了对 IE 11 的支持。所以，你应该这么做。

随机选择标题标签

我相信你已经知道，页面上应该只有一个<h1>标签，就像主标题一样。但是其他标题标签呢<h2>…<h6>？

我们过去常常根据设计中标题的大小来大致选择它们。因此，如果我们有一些标题在 Figma 模型中看起来很小，我们就会设置<h4>标签。尽管页面上之前的标题标签是<h1>！

这是非常糟糕的做法。你的标记对于屏幕阅读器来说会变得无效且混乱。

请记住，可访问性很重要！

您应该根据页面结构（而非页面设计）提供标题标签。并且这些标签应按降序排列。因此，如果您的最后一个标题标签是<h2>，则下一个标题标签应该是<h2>（如果是页面上的另一个部分）或<h3>（如果它是标题子部分的标题）<h2>。

❌ 所以不要这样做（随机提供标题标签）：

<h1>Primary title</h1>
<section>
  <h3>Section title</h3>
  <p>Some text inside the section</p>
</section>
<section>
  <h3>Another section title</h3>
  <p>Some text inside the section</p>
  <div>
    <h5>Subtitle</h5>
    <p>Some text inside the section</p>
  </div>
</section>

✅ 保持标题标签和逻辑结构的顺序（保持标题的降序）：

<h1>Primary title</h1>
<section>
  <h2>Section title</h2>
  <p>Some text inside the section</p>
</section>
<section>
  <h2>Another section title</h2>
  <p>Some text inside the section</p>
  <div>
    <h3>Subtitle</h3>
    <p>Some text inside the section</p>
  </div>
</section>

添加="1"布尔属性

我指的是这样的属性，例如输入禁用、视频循环、静音或自动播放等。这些属性的存在本身就意味着它们等于真。

它不会影响功能，因此您的输入仍将被禁用，但这对 W3C 验证器来说是一个错误，只是一段不必要的代码。

❌所以不要像这样编码：

<input type="text" value="This input is disabled" disabled="1" />

✅ 保持简单：

<input type="text" value="This input is disabled" disabled />

如果您觉得这篇文章有帮助 — — 请毫不犹豫地点赞、订阅并在评论中留下您的想法😊

在我的 Medium 博客上阅读更多文章

感谢阅读！

祝您平安！