我已经在网站上工作了几年，无论是专业的还是业余项目。有一天，我反思了这样一个事实：我所有的 Web 开发教育都来自实际制作网站。在大多数情况下，我会有一个特定的问题，谷歌如何解决它，并在这个过程中学习新的东西。

我想知道我从未全面学习 HTML 错过了什么。忘记 CSS 和 JavaScript。我只是在谈论原始 HTML。在获得了相当多的经验之后再回到 Web 开发的这样一个基本方面似乎很愚蠢，但是很容易仅仅因为您知道足够多的知识来做一些有用的事情就对一项技能过度自信。

所以我决定重新学习 HTML 并发现我未知的未知数。

经验

对于上下文，我在中学时为一个班级项目制作了我的第一个网站。我们学习了基本的 HTML，嵌入 MP3 歌曲感觉就像魔术一样。但是直到大学我才再次接触 Web 开发。我制作了一个名为The Daily Lore的轻量级新闻聚合器 ，它仍在运行（我保留了原始版本）。

从那以后，我在两个专业的网站上工作过，一个是非营利性网站，一个是个人网站，还有一些是做业余 项目的小网站，比如Make a README。

HTML5 简介

我不认为自己是基于这种经验的 Web 开发专家，但我肯定比Coursera的HTML5 入门课程的典型学生拥有更多的知识 。我开始这门课程时就希望了解很多内容，因为它是为没有编程背景的完全初学者设计的。

当我浏览这些材料时，我实际上已经知道了很多，但它仍然是一个很好的复习，特别是两点：使用语义元素的重要性以及在可访问性方面要考虑什么。

我一直有一个坏习惯，即使用通用<div>元素来制作我需要的东西，而不是代表特定内容的语义元素，如 页眉和 页脚 元素。

可访问性也是我从未深入考虑过的事情。我知道图像应该有alt描述，仅此而已。本课程的重点之一是使用适当的语义元素对于使站点更易于访问很重要。

例如，使用屏幕阅读器的人可以使用标题 元素（<h1>通过<h6>）跳转 ，因此使用它们并确保它们的顺序正确很重要。仅使用它们来放大文本是错误的，因为它们的真正目的是定义内容的结构。它们就像一个目录。

代替标题，我们可以使用<p>元素并通过 CSS 改变它们的字体大小来创建一个看起来相同的网站，但它的语义和可访问性会较差。Web 开发不仅仅是让网站看起来像我们想要的那样。让内容也代表我们想要的也很重要。

可访问性不仅仅是改善网站与屏幕阅读器的工作方式。对于有视觉障碍或色盲的人，我们应该考虑字体大小、字体样式和颜色对比度。我们应该考虑到有听力损失的人可能更难识别正在播放的音频或视频。我们应该让标签导航适合主要依赖键盘的人，也许是因为他们很难使用鼠标。当我们添加动画时，我们应该注意避免那些使人们更难以实际使用网站的动画，例如在交互过程中改变页面布局的动画。并且我们应该考虑何时页面过载信息过多或元素过多，使人们难以理解事物或如何实际使用网站。

人们很容易忘记可访问性，但我们应该努力让网站为尽可能多的人服务。可访问性还与可用性和搜索引擎优化密切相关。该课程指出，改进一个经常意味着改进所有其他。

阅读文档

我有一个朋友，他可能是我认识的唯一一个读过整本NFL 规则手册的人 （2020 年版本有 87 页长）。和他一起看足球很有趣，因为他非常善于理解比赛的细微差别和奇怪的情况。我认为使用 HTML 也有类似的机会。

严格的等价物是阅读每个 HTML 元素的HTML 标准，但我决定阅读每个元素的MDN 文档，因为 MDN 有很多关于浏览器兼容性和在实践中使用元素的信息。我阅读了每个元素的整个页面，做笔记，并为我想要记住的部分制作了Anki卡片。

有许多已弃用的元素我只是略读了一下，我也懒得做笔记，但数十个标准化的元素和属性对我来说是全新的。

我并不打算以 HTML 大师的身份从这次经历中走出来，而且我仍然需要应用我所学到的知识（包括在这个网站上），但我发现仅仅了解可用的内容是很有用的。尽管我不记得有关使用图片 元素的所有细节 ，但我知道它现在存在，并且我可以在以后的实施过程中随时查找细节。这与根本不知道它和<img>在所有情况下使用普通是一个绝对的区别，因为我不知道更好。

观察

当我阅读文档时，有些事情对我来说特别有趣，并且我有一些观察。

该地址 元素是一般，不只是物理邮寄地址的联系信息。

所述定义 元素表示正被定义的术语，而不是定义本身。

有一整套 ruby元素，主要用于显示东亚字符的发音。

该赛道 元素提供一种标准的方式嵌入定时文本轨道视频和音频。我以前从未听说过 WebVTT（Web 视频文本轨道）格式。

该地图元素似乎是不合时宜的，特别是考虑到它是没有反应。

所述数据 元素提供了一种机器可读的翻译内容。这似乎有助于屏幕抓取，LinkedIn 等一些网站一直在积极尝试阻止。

在正确选择使用strong 与em与 i与 u与 b与 mark时，有一个微妙之处 。

有一些元素似乎是多余的。的 图例 元素表示一个标题 字段集 元件，所述 字幕 元素表示一个字幕 表 元素，而 figcaption 元件表示用于字幕 图形 元件。我不知道为什么一个元素不能为所有三个元素完成这项工作，因为其含义可能来自父元素。

HTML 的未来

当我阅读文档时，它不断让我思考 HTML 应该如何发展的问题。浏览器不断获得越来越多的功能，以至于它们变得越来越像操作系统。甚至还有一个用于连接蓝牙设备的实验性API。

维基百科是 HTML 最初设计目的的完美网站：主要是通过超链接连接的静态文档。但是现在我们使用浏览器来交付完整的应用程序，例如 Figma，它是一种设计工具，通过将 C++ 代码编译为 WebAssembly来有效地在浏览器中运行 C++ 代码。

HTML 添加了一些元素和属性，使无需 JavaScript 即可进行交互。例如， details 元素创建了一个可以在打开和关闭状态之间切换的小部件。

但是随着您的用例变得更加先进，仅仅依赖 HTML 提供的内容很快就会变得困难。例如， Bootstrap的进度条不使用HTML 进度 元素。

我们不使用 HTML5 <progress> 元素，以确保您可以堆叠进度条、为其设置动画并在其上放置文本标签。

另一个例子是 表格 元素。纯 HTML 表格 在显示数据方面可能非常复杂，但没有对交互功能（如排序、过滤和分页）的内置支持。

当元素变得更高级时，浏览器支持也会成为一个问题。该输入 元件是最复杂的元件中的一个，因为它支持输入类型和属性的许多组合。理论上，您可以使用它轻松收集日期和时间，使用datetime-local 类型。但并非所有浏览器都支持它，即使在支持的浏览器中，它的工作方式也存在差异。

一些元素也很难设置样式，例如 select 元素。因此，网站开发人员可能希望依赖标准功能，而不是使用库或自己实现功能，但随后他们不得不担心它在某些浏览器中无法正常运行或与网站的其余部分在风格上不一致。

我很想看看Web Components 是否变得更流行，并为这些问题提供一个很好的解决方案。如果他们这样做，情况可能变得类似于编程语言，不同语言在标准库 (HTML) 中应包含多少功能的问题上采取不同的立场，以便社区或多或少地倾向于依赖第三方。方库（Web 组件）。

Web Components 似乎正在获得一些动力。 GitHub已经开始使用它们，并将它们的组件发布到 WebComponents.org。

结论

经过几年的 Web 开发，很容易对 HTML 充满信心。然而，我发现回去以更严格的方式学习它有很多价值。我了解了我可以对我工作的网站进行的许多改进，并且我对 HTML 及其开发方式有了更好的大局观。虽然我仍然认为边做边学非常有效，但这次经历让我想回去用自下而上的方法重新学习其他东西。