7 个应该避免的老式 HTML 实践

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

❌ 停止写这个:

    <style type="text/css">/* CSS样式在这里*/</style>
    <script type="text/javascript">/* JavaScript代码在这里*/</script>

进入全屏模式 退出全屏模式

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

    <style>/* CSS样式在这里*/</style>
    <script>/* JavaScript代码在这里*/</script>

进入全屏模式 退出全屏模式

不需要指定类型属性，现代浏览器足够聪明，能够理解<style>标签是用来存放CSS的，<script>标签是用来存放JavaScript的，甚至还能理解“V for Vendetta”！

简单！观看：

    <details>
      <summary>存在还是不存在？</summary>
      <div>
        这就是问题！
      </div>
    </details>

进入全屏模式 退出全屏模式

这里是结果：

并且添加一些额外的样式：

好的，但你可能会问，关于平滑的开/关动作呢？

这比较棘手，所以如果你需要流畅的动画效果，你应该包含一些JavaScript。

但如果你能处理简单的单向 CSS 动画，这里就是你要找的内容：

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

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

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

这里是一个包含正确元素的作者信息框示例：

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

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

不过，当你右键点击一个 YouTube 或 Vimeo 视频，然后点击“复制嵌入代码”，你会得到一个带有 frameborder="0" 属性的 <iframe> 元素。因此，在将嵌入代码应用到你的页面后，确保移除 frameborder 属性，并在 CSS 中为你的 <iframe> 设置边框属性。

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

    <!--[if lt IE 9]>
      <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="scripts/html5shiv.js"></script>
    <![endif]-->

进入全屏模式 退出全屏模式

真的，这是来自过去的呼唤。停止为Internet Explorer包含支持脚本。我不仅指IE 8，而是所有版本的Explorer！甚至微软在2022年6月就停止了对IE 11的支持。所以你也应该这样做。

我希望你已经知道页面上应该只有一个 <h1> 标签用于主要标题。但是，其他标题标签 <h2>…<h6> 又该如何处理呢？

我们过去根据设计中的标题大小粗略选择它们。所以如果我们在 Figma 原型中看到某个看起来很小的标题，我们可能会将其设置为 <h4> 标签，即使页面之前的标题标签是 <h1> ！

这是非常不好的做法。你的标记变得无效且混乱，不利于屏幕阅读器。

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

你应该根据页面结构提供合适的标题标签，而不是根据页面设计。这些标签应该按降序排列。所以，如果你最后一个标题标签是 <h2>，那么下一个标签应该是 <h2>（如果它是页面上的另一个部分），或者 <h3>（如果它是 <h2> 标题下的子部分）。

❌ 所以不要这样做（随意提供的 heading 标签）：

    <h1>主要标题</h1>
    <section>
      <h3>部分标题</h3>
      <p>部分中的某些文本</p>
    </section>
    <section>
      <h3>另一个部分标题</h3>
      <p>部分中的某些文本</p>
      <div>
        <h5>副标题</h5>
        <p>部分中的某些文本</p>
      </div>
    </section>

进入全屏模式 退出全屏模式

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

    <h1>主标题</h1>
    <section>
      <h2>部分标题</h2>
      <p>部分中的某些文本</p>
    </section>
    <section>
      <h2>另一个部分标题</h2>
      <p>部分中的某些文本</p>
      <div>
        <h3>副标题</h3>
        <p>部分中的某些文本</p>
      </div>
    </section>

进入全屏模式 退出全屏模式

我的意思是像输入框的 disabled、视频的 loop、muted 或 autoplay 等属性。这些属性的存在本身就表示它们的值为 true。

这不会影响功能，所以你的输入仍然会被禁用，但这对于W3C验证器来说是一个错误，而且只是多余的代码。

❌ 所以不要这样编码：

<input type="text" value="此输入已被禁用" disabled="1" />

✅ 保持简单：

<input type="text" value="此输入框已禁用" disabled />

如果你觉得这篇文章有帮助——不要犹豫，点赞、订阅并在评论区留下你的想法 😊

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

感谢阅读！

祝你平安！