Stop Using Divs for Everything! Master Semantic HTML, Custom Attributes, and Accessibility
58:48 Share

<context>停止将所有内容都用 div！掌握语义 HTML、自定义属性和可访问性 在 HTML All The Things 播客的这一集中，Matt 和 Mike 深入探讨了良好的 HTML 实践为何对构建更好、更可访问和可维护的网站至关重要。他们首先解释了语义 HTML 对可读性、SEO 和可访问性的重要性，涵盖了像 &lt;header&gt;、&lt;footer&gt; 和 &lt;article&gt; 等有用标签。 Matt 和 Mike 还讨论了开发人员如何正确创建和使用自定义属性——如 data-* 属性——以干净地存储额外信息，而不依赖于脆弱的类命名约定。最后，他们强调了 HTML 在可访问性中的关键作用，突出了最佳实践，例如适当地使用 ARIA 属性和为图像提供有意义的替代文本。 为了结束这一集，主持人分享了一些关于他们假期计划的轻松更新，并向本集赞助商 Magic Mind 致以问候。

感谢 Magic Mind 赞助本集，使用我们的链接和代码享受一次性购买和订阅 20% 的折扣（链接：https://magicmind.com/HTMLPOD20 代码：HTMLPOD20） 感谢 Wix Studio 赞助本集！通过此链接查看 Wix Studio，这是一个为设计师、开发人员和营销人员量身定制的网络平台：https://www.wix.com/studio </context> <raw_text>0 本集由 Magic Mind 和 Wix Studio 赞助。你上次听关于网页开发、网页设计和小型企业的播客是什么时候？没有睡着。

是的，我们涵盖网页开发、网页设计和小型企业，但就像真正有个性的人一样。如果你是初学者，我们不会说得太高深。这更像是向你的朋友寻求帮助。我们有嘉宾，我们很开心，让我告诉你，这两个人可以跑题。女士们，先生们，欢迎来到 HTML All the Things 播客。我是 Matt Lawrence，旁边是 Mike Coran。

大家好，我们回来了。这是 HTML All Things 播客。这一集的工作标题目前是《良好 HTML 的重要性》。所以 HTML，真的，你知道，这是一件简单的事情，或者至少我们认为它是，但我们将深入探讨，包括语义 HTML 及其重要性。

我们还将讨论自定义属性以及如何正确创建和使用它们。我们将讨论 HTML 在可访问性中的作用，最终只是一些最佳实践和一些我会尝试在音频节目中传达的示例。我实际上写了一些代码示例，也会在节目笔记中提供。基本上，这一集的想法，如果你想要一个单一的段落，我想是因为我意识到

我自己和其他人当然使用 div 太多了。我们总是听到这个，但它开始变得愚蠢，就像 div、div、div、div，嵌套这个，嵌套那个，太多了。所以在我们开始之前，我们是否完全进入我们的播客的元话题，只有关于 HTML？我们是否应该直接倾斜并制作一个每周仅关于 HTML 的播客？我无法告诉你有多少次有人问我，

我们该怎么做，我就像，因为这不是他们的意思，他们就像你为什么称自己为 HTML 所有事物，我们就像这只是一个网页开发术语，不，没有，确实有相当一部分听众或一般人听说过我们认为我们的播客仅仅是关于 HTML，所以我觉得这是宣布我们正式转变为仅 HTML 播客的完美时机。

所以期待每周一集，我们将每周覆盖一个新的 HTML 元素。我们将运行它。今天是每个元素一个。我在这里的节目笔记的第一部分有大约八个。我会想，我们还可以怎么做？我们还可以如何每周做一集关于 HTML 的节目？我们每周会请来不同的人来争论 HTML 是否是一种编码语言。

而我到目前为止的答案是我不在乎。我需要使用它。所以我有时会使用它。就这样。没有，你必须有一个立场。你不采取立场就是在阻止人们能够将 HTML 作为编码语言使用。我的大门是敞开的。就像，伙计，告诉我一切关于它的事情。告诉我它不是的事情。

参考规格表，也许。事情是这样的。你怎么敢？我们是开发人员。我们正在开发。跳过作为开发人员的编程部分。我们正在开发网站。有点像房屋开发商。他们必须购买土地，安装公用设施，所有这些东西。他们正在开发那片土地，而不仅仅是...

房屋建筑商就像是一堆东西，路，所有的 HTML 是开发网站的一部分。我们必须获得服务器空间和所有其他东西，但 HTML 一起，CSS 和那悲惨的事情，你提到的？我实际上是想说我想做三集连续的我的集，所以像你每隔一周写一次，我每隔一周写一次。

所以我打算做一个 HTML 集，一个 CSS 集和一个 JS 集，深入探讨元话题，讨论语义及其重要性，组织事物，诸如此类。这是我的计划。也许一个不会大到足够，但然后就像，呃，不，伙计，HTML。所以就像，在我们开始之前，header 是其中之一。所以 header 定义了页面的顶部部分。通常它们会有导航，比如导航栏。

我们在这一集中还谈论了什么？我敢肯定还有更多我们可以。显然，我只是有点像在读一个要点。但像，你能谈论 header 标签多少？像，header 标签是用 H、E、A、D、E、R 写的。像，它会变成 ASMR 吗？是的，它会不得不放慢速度吗？我们要怎么做？好吧，我们做 header 的历史。像，它是什么时候引入的，谁引入的。我们请来引入 header 的人。

如果他们已经去世，这在这个时候是可能的，我们请来那个人的亲属，问他们一些深刻的问题，他们对此毫无头绪，并真正深入探讨他们的祖先为什么开发 header 标签。我认为这将是一个非常有趣的播客，直接在 Twitter 上关注 HTML，所有的事情在 Instagram 和线程上等等。我很好奇，人们是否希望我们转变为仅仅是一个 HTML 播客？我，

如果听众想要，Matt，我们就这么做。这就是事情的发展。如果我们得到 100,000 个写信的人，希望在 HTML 和 Things 播客上听到 HTML 和仅 HTML，我会做到。所以 100,000 人...

我在这里发出挑战。就像我们会有赞助商进来，他们会说，Wix Studio，他们会说，“Wix Studio，有时你会使用 HTML。”然后那就是广告。我们不能谈论 CSS，不能谈论无代码部分，像什么的，不必是 Wix Studio，可以是任何东西。

我们的网站只会是 HTML。没有 JavaScript，没有 CSS，仅结构。使用 Marquee。我记得在高中时使用过。是的，它会到处都是 Marquees。如果它们仍然有效，可能会。为什么不呢？是的。作为一个笑话，它会很棒。是的，所以我们必须为每个该死的 HTML、CSS、JavaScript、Node 等等制作一个单独的播客。就像，伙计。

讨厌它。但无论如何，如果这，你知道，良好 HTML 的重要性，Samantha HTML，听起来对你有趣，并且你想支持这个节目，你可以在 Patreon 上查看我们，在你的播客应用上留下评论评分。加入我们的 Discord 服务器或与朋友分享。现在我已经构思了一个我想与所有优秀的人分享的介绍，ASMR。不是，我不会。把我的麦克风调高，像，HTML 通常被视为网站的最简单组成部分。

Mike。我讨厌 ASMR。它让我发疯。不要让我在麦克风前打嗝，Mike。我做不到。我不能对你们这些好人这样。我很抱歉，Matt 在压迫你们的耳朵。我的意思是，有些人喜欢 ASMR。Mike，你是我的 Mike。哦。这很奇怪。抱歉让事情变得奇怪，因为你是我的麦克风，你知道吗？无论如何，这让我感到奇怪。咳。好吧。我们在谈论 HTML。

HTML 通常被视为网站的最简单组成部分，这导致一些开发人员优先考虑 CSS 或 JavaScript 或其他工具。然而，HTML 作为每个网页的基础结构，使其成为创建可访问和可维护的网络体验的关键组成部分。HTML 充当网页的骨架。它是每个网站或网络应用程序开始其渲染旅程的基础。

基础可能不是最令人兴奋的部分。所以在房子里，你只会认为大多数基础将是混凝土或类似的东西。然而，

室内设计需求、室内设计、油漆，房子的所有那些华丽部分都需要那个基础才能保持站立，才能在那里。因此，HTML，虽然它可能不是最引人注目的东西，但绝对非常重要。因此，在这一集中，我们将讨论语义 HTML 的使用，并尝试避免过度使用 div 标签。

以提高可读性、SEO 和可访问性。我们还将讨论创建自定义属性以及如何正确做到这一点，以便你的 HTML 是有效的，你有一段干净的代码，里面将会谈到一些动态网页开发，比如 CMS 进入并更改内容。

然后我们还将讨论可访问性。因此，HTML 在网页可访问性中确实扮演着重要角色。因此，将会有一些关键实践和工具，比如屏幕阅读器将使用你的 HTML。因此，如果你的 HTML 不好，那么你的网站的可访问性就不会很好。因此，这基本上是我们在这一集中讨论的内容。好吧，回到 ASMR。不。所以第一件事，这实际上是这一集的灵感，

是语义 HTML 重要的原因。因此，语义 HTML 的定义基本上是我们的 HTML 标签，

它们需要传达关于其内部内容的含义。因此，你使用的标签传达的意义超过了仅仅是一个 div。所以我提到 HTML 是一个骨架。好吧，想象一下，如果我们拿一个人类骨架，你知道，我们知道什么是股骨，就像是你腿的顶部或其他什么，对吧？我们知道什么是骨盆。就像你的臀部和其他什么，对吧？我们知道这些东西。但是如果我只是说所有东西都是骨头呢？

骨头用于头骨，骨头用于你的股骨，骨头用于你的骨盆。是的，它是有效的，对吧？它们确实是骨头，但这真的很混乱。因此，像

搜索引擎爬虫以及屏幕阅读器将会像骨头、骨头、骨头、骨头，他们不知道发生了什么。因此，我们的语义 HTML，我们需要我们的标签传达关于它们内部内容的含义。因此，我在这里列出了一些常见的标签。第一个将是位于你 HTML 顶部的一个标签，它将是 header 标签，字面上写作 header，它定义了页面的顶部部分。

页面的顶部部分通常包含导航链接或介绍性内容。所以想想这一点。很多时候我们会做一个 div 类 header，对吧？我们会将 header 的分类留给我们的 CSS。这并不好，因为屏幕阅读器或任何专门查看 HTML 的东西将会像，

它可能足够聪明地看到它被称为 header，但这不是标准，对吧？这是一个我们应该使用的标准化标签。Header 是一个标准化标签，我们应该定义页面的顶部。接下来是一个对博客文章或新闻作者非常重要的标签，那就是，文章标签。字面上写作 article 在你的标签中，对吧？你的小于和大于符号。

这些用于自包含可以独立存在的内容。因此，像新闻文章或博客文章，我认为的方式，这并不一定完美，但我认为的方式是，如果我打印出网页，我可能会剪掉所有其他东西。所以打印出一个网页，你有你的，知道的，你的 header，你有你的 footer，然后你在中间有你的文章。好吧，你可能在那个打印件中不关心 header 和 footer。你实际上可以字面上剪掉页面的那些部分。

而那篇文章本身独立存在。你可以把它交给报纸，报纸可以打印出来。这是一个独立存在的东西。所以这就是我在脑海中粗略定义的方式，当我试图在某些东西周围放置文章标签时。

然后我已经提到过的另一个标签是 footer，字面上写作 footer。它标记了页面或内容部分的结束，通常用于版权、法律联系信息，所有这些类型的东西。通常我们会稍微进行 SEO。因此，我们会有一个，不是站点地图，但我们会有一些关键链接，比如，嘿，你知道，我们有一个博客，但我们也有一个帮助部分。我们还有一个文档部分。因此，我们会有链接到一些关键页面的内容。社交媒体链接，诸如此类。

然后我们还有导航。现在，这不是写作导航。它写作 nav，仅 N-A-V。它表示网站上的一组导航链接。你的 nav，正如我们已经提到的，通常会放在你的 header 内，对吧？放在你的 header 标签内。我们还有一个 section。

因此，如果有一部分内容具有共同的主题或目的，将其放在一个 section 中是有意义的。该标签字面上写作 section，它允许我们对该内容进行分组。它告诉屏幕阅读器和网站爬虫进行 SEO，嘿，这是一部分东西。这是一部分东西。因此，例如，你可能有一个部分...

这是你的行动呼吁部分，你可能还有另一个部分是你的趣味事实，如果你在侧边栏上有一些趣味事实或类似的东西，你有一个小趣味事实部分，诸如此类，我提到侧边栏，还有一个东西是为此而存在的，称为 aside，字面上写作 aside，用于包含与主题相关的信息。因此，像侧边栏、引用部分。例如，你可能正在写一篇博客文章。

有时博客文章会有那些小的引用部分，你知道，它会引用文章本身，或者它会引用一个谈论内容中某些东西的名人。有时人们希望那些在侧边栏上。因此，他们会把它们放在那里。趣味事实。有时它们会是动态的。我见过几次，当你滚动时，它就像一个粘性侧边栏，保持在左侧或右侧。

通常在我的经验中是右侧。基本上，它有时会动态变化。因此，它会像，哦，你知道，你正在滚动并且你达到了这个部分，关于像鲸鱼的部分。因此，也许我们会有像鲸鱼的一些趣味事实，去，知道的，动物星球或你学习动物的地方，诸如此类。所以这很酷。因此，这些语义标签，你知道，还有更多，但这些语义标签为提供结构和意义，

并且它们消除了 div 元素的那种通用感觉。我想在这里明确一点，我对 div 感到内疚。就像，我去，知道的，div、div、div、div、div。我们在 div 内嵌套 div，然后我们只是给它们加上类，诸如此类。这确实不仅是一个坏习惯，而且也是一个...

我想这是习惯的一部分，但这也是我快速构建的一部分。就像我只是快速去。就像，好吧，我需要一个 div。我需要另一个组，另一个，另一个组，另一个分组，另一个分组。然后我只是想，哦，我，知道的，我给它加了一个类。它足够好了，但我确实想开始考虑这些语义 HTML 标签，因为这不仅会帮助残疾人，也会帮助爬虫更好地爬取你的内容，因为也许爬虫是

不关心你的导航栏，但它确实关心你的博客文章。好吧，如果它在一个文章标签中，它可能会有所帮助，对吧？爬虫可能会说，哇，我不想看到所有这些垃圾。我想阅读这个页面的肉和土豆。

所以，哦，抱歉，继续，Mike。是的，我认为你提到的那些标签确实很好，并且是提供结构的非常常见的语义标签。但我确实想提到一些更具功能性和结构性以及可读性的标签。因此，有一些 HTML 标签，特别是在更现代的 HTML 时代，实际上可以让你避免编写 JavaScript。例如，有一个 details 标签，可以与 summary 标签结合使用。

这将允许你基本上创建一个自动可折叠的容器。因此，如果你使用 details 标签，然后在其中有 summary 标签，

summary 实际上将是你的未折叠内容。因此，就像你的，您的摘要在你实际展开之前。然后你放入的任何其他内容，比如带有段落的 P 标签，最初将自动折叠。然后你可以按下，它会自动为你生成整个点击容器，所有内容都可以按下。然后它会自动展开 summary 之外的其他内容。因此，

这只是一个非常实用的 HTML 标签组合的一个例子，对吧？如果你在谈论表单，表单是另一个非常高效的 HTML 结构，它不仅允许你，

创建像，你知道的，表单，将信息发送到服务器，还可以进行一些基本的数学运算并提供该运算的输出。在表单内部，你还可以有一个输出标签，这可以与实际的

你必须在这里做一点 JavaScript，但它将自动将特定表单的计算输出放置在一个适当 ID 的输出标签元素中。所有这些都是自动的，你不必做任何获取元素的 ID。你不必创建元素或你不必这样做。所有这些都内置于 HTML 中，只需一点点 JS 来实际执行你需要的任何计算或格式化。就像你可能只是在做像大写格式化或其他东西。你可以仅用 HTML 做很多事情。还有像

一种加载条的情况，使用 meter，对吧？像有一个 meter HTML 标签，如果你放入一个范围，然后放入一个值，它会显示你放入的范围和值的加载条或条形图的情况。因此，

有一些非常酷的、非常少用的 HTML 元素，我认为我们并没有特别依赖它们。就像对我来说，例如，当我创建一个，知道的，FAQ 部分时，我并没有过于依赖细节和摘要的内容，尽管我可能应该这样做，因为它已经为我处理好了。我在浏览器中减少了更少的 JavaScript，并且

对于屏幕阅读器来说，这更容易理解。这就像一旦它看到细节和摘要，它就知道我们在谈论可折叠、可扩展的内容，对吧？就像有很多非常酷的内置功能，我觉得人们不使用，因为他们不仅仅依赖于 div，还依赖于所有其他语言，如 JavaScript 和 CSS 太多，而 HTML 实际上内置了功能。

实际上，基于你的观点，Mike，一个重要的事情是表单，特别是对我来说，日期选择器，日期选择器在不同浏览器之间确实有所不同。然而，仅仅能够在 HTML 中有效地初始化它，你基本上只需说，嘿，我需要一个日期选择器在这里的 HTML。然后浏览器和用户可以显示和隐藏它，做他们需要做的事情。这非常有帮助，尤其是如果你只是快速尝试设置一个表单。因为当然，你可以有一个自定义的，但那是很大的，对吧？这很烦人。就像很多...

方块，字面上是一个日历和那些东西在那里，除非你想让某人输入它。因此，仅仅能够快速拥有一个日期选择器，老实说，非常实用。就像我知道很多人会不喜欢使用默认的东西，但老实说，它非常实用。就像没有人会点击日期选择器字段，至少我不认为，

然后会说，伙计，这太疯狂了，他们没有自定义的。就像，嗯，另一个看起来也不错。我们会，知道的，投入大量的开发时间，或者必须引入另一个 JavaScript 库或其他东西来拥有一个自定义的日期选择器吗？就像，有时使用 HTML 版本更好，因为通常 HTML 就像，我称之为香草版本/浏览器版本。

通常是最可访问的。就像它非常可访问。它已经被简化到这一点，因为浏览器不想做一些超级花哨的东西。对吧？而屏幕阅读器没有像，嗯，他们能够查看花哨的东西，但页面上的杂乱越多，显然越难以向像屏幕阅读器这样的东西传达你的观点。对吧？

这实际上是我将要列出的一些好处。就像语义 HTML 的好处，我们已经触及过它们，但我会再提一下，这增强了 SEO，对吧？它给搜索引擎提供了上下文的视角，对吧？因此，我一直在教我的客户，当他们问 SEO 是什么时，

对我来说，SEO，这可能完全错误，我不是 SEO 专家，但这就是我一直在做的方式，这就是我获得成功的方式。我不会深入探讨 SEO，但我告诉他们的方式是，我告诉他们，把它想象成一个人，就像你在与一个人交谈一样，对吧？在正常的对话中，如果我试图向 Mike 推销 Magic Mind，例如，

我可能会提到“Magic Mind”这个词几次。这是我的关键词。我可能会提到“Magic Mind”这个词几次，但我不会像“Magic Mind，你知道的，Mike，你是 Magic Mind。嘿，Mike，做你的 HTML Magic Mind。”你知道我的意思吗？这太荒谬了，对吧？像一个普通人一样谈论它。还有一些关于技术 SEO 的技术内容。再次，我只是做一个非常简短的总结。但我总是告诉他们，假设爬虫实际上是一个没有被告知的人。因此，确保你非常清楚。

确保你所谈论的内容非常明显。不要塞满东西。不要让机器人感到尴尬，对吧？然后还有很多其他东西，比如关键词研究，哪些是竞争的，哪些不是。但我总是得到的最大问题是，如何构建我的内容？这个和那个。确保你的标题很好。这就是 HTML。H1 到 H6，对吧？确保它清晰，像如果它是一个独立的作品，可能将其包裹在一个文章标签中，对吧？一些可以独立存在的东西。

并确保内容在适当的段落中。你有链接。如果链接是非描述性的，抱歉，描述性链接。如果链接是非描述性的，你可以添加一些称为 ARIA 标签的东西。像这样的东西。就像确保它就像，如果 Mike 从未去过一个网站，他去你的网站时，他不会像在房间里说，

实际上，你知道，更好的描述方式。你知道，当你在像 X 和任何其他或任何其他社交媒体网络上，人们在谈论就像你已经被告知一个话题三周一样，而你却不知道这是一个已经发生了三周的故事。这些人以如此高的水平和如此高的知识与我交谈，以至于我完全不知道他们在谈论什么。

对吧。你不想让机器人做工作，因为你知道吗？它可能不会这样做。它可能不会弄清楚上下文。因此，SEO 很大程度上帮助，或者说，HTML 很大程度上帮助 SEO，通过提供上下文，然后你必须用良好的内容来补充它。

语义 HTML 的另一个好处是它为辅助技术提供了更好的用户体验，比如屏幕阅读器，我们将在本集稍后深入探讨，我们已经提到过很多次。但这个上下文对屏幕阅读器非常有帮助。它还改善了网站结构和开发人员的可读性。

这是我们没有足够讨论的内容。我们已经讨论过，但我们在这个节目中讨论过几次，那就是开发人员用户体验。就像没有人想进去，看到 15 个嵌套的 div，想知道这是什么。就像你的类，尤其是如果你使用像 CMS 这样的东西，它有一些内置的页面构建。

可能会有像 L 是列 - 26489 这样的类名和这些疯狂的类名，都是 div。发生了什么？对吧？因此，拥有这样的东西，这是文章。这是 aside。这是 header。就像，好吧，

我需要修复博客文章。博客文章有什么问题。我不会查看任何其他部分。我会查看文章标签内部并找出这个问题。我需要修复侧边栏。我在寻找 aside 标签。简单易读，这在这方面很有帮助。</raw_text>

在 HTML All The Things 播客的这一集中，Matt 和 Mike 深入探讨了良好的 HTML 实践为何对构建更好、更可访问和可维护的网站至关重要。他们首先解释了语义 HTML 对可读性、SEO 和可访问性的重要性，涵盖了像 <header>、<footer> 和 <article> 这样的有用标签。 Matt 和 Mike 还讨论了开发人员如何正确创建和使用自定义属性，例如 data-* 属性，以干净地存储额外信息，而不依赖于脆弱的类命名约定。最后，他们强调了 HTML 在可访问性中的关键作用，突出了最佳实践，例如适当地使用 ARIA 属性和为图像提供有意义的替代文本。 为了结束这一集，主持人分享了一些关于他们假期计划的轻松更新，并向本集的赞助商 Magic Mind 致以问候。

感谢 Wix Studio 赞助本集！通过此链接查看 Wix Studio，这是一个为设计师、开发人员和营销人员量身定制的网络平台：https://www.wix.com/studio </context> <raw_text>0 所以 div 的常见误用，我这里有一个例子。我会尽量以视觉或音频的方式表达，但我也有视觉材料。这将在 htmlallthethings.com 的节目笔记中提供。但确实存在一个非常常见的，我也这样做，过度使用 div 的情况。所以如果你有一个 header，而你实际上只想在里面放一个标题，一个经典的例子是你有 div class header，然后在里面嵌套一个 div class title，你在里面写上你的标题。

HTML 为你提供了这个。你甚至不需要在这里引入 CSS 的类。

如果你想使用语义 HTML，正确的做法是你实际上有一个 header 标签，里面有一个 h1 标签，因为我们假设这是该页面的第一个标题或主要标题。然后你写下你的内容。所以不仅字符更少，而且很明显，哦，这就是一个标题，它是一个重要的大标题。你可以立刻看出来。那个 div class title，它是一个大标题吗？是小标题吗？重要吗？不重要吗？它是什么？

而一个我们假设的机器人，它并不知情，会想，这是什么？你想给我展示什么？也许它会理解这是一个标题，因为它看到了类，但它的重要性如何？这是什么，对吧？所以尽可能多地提供上下文，因为谷歌不会在你的网站上做重活。屏幕阅读器试图为用户提供上下文。

尽可能快速地提供最佳体验。它不会说，给我 15、20 分钟来阅读这个，你知道，使用 AI 来判断这是否是一个重要的标题。它不会那样做。所以只需提供适当的结构，其余的就会自然而然地到位。我确实想提到另一种误用，这是一种强迫的 HTML 误用，因为 HTML 有时有其缺点，比如如果你特别喜欢语义 HTML，例如，你需要做一个具有某些自定义功能的下拉菜单，对吧？比如你必须，知道，多选下拉菜单，一个可能有一些自动输入的下拉菜单，某种更复杂的下拉菜单，而不是 HTML 默认提供的。

很多时候这迫使了 HTML 的误用，因为人们意识到要创建那个真正自定义的下拉菜单，他们不能仅仅把实际的 HTML 元素拼凑在一起，下拉菜单，选择元素，我应该明确指出，这是 HTML。

为了使其完全符合他们的需求。所以他们最终会使用 div 创建自己的东西，像是，你知道，不使用语义，他们可以使其看起来和工作得当。但同样，当涉及到屏幕阅读器时，这就是一个问题。所以现在有了这种中间状态，还有所有这些新包和非常棒的 UI 库出现，我已经提到过很多次，它们以一种方式处理这个问题。

它仍然会使用 HTML 的基本选择元素，但会在其上创建一个外观，具有你所需的功能和外观。你可以以任何方式编辑那个外观。那些外观可以是任何 HTML，甚至像，知道，div 的误用等等。在外观中是可以的，因为底层元素，它们通过一些 JavaScript 绑定在一起。

底层元素仍然在页面上，并且对屏幕阅读器仍然可读，对吧？所以强迫的 HTML 误用已经存在很长一段时间了。正如 Matt 所说的日期和时间选择器，伟大的元素，无法自定义。现在有了外观，你可以自定义它。现在你拥有了两全其美的局面，既有语义，又有完全的自定义。所以有解决办法。这不是一件容易的事。如果你尝试自己构建一个外观，你总会遇到，总会有这些边缘案例让你觉得，真该死。我希望我能抓住那个。我希望我能抓住这个。所以使用这些像 Shad、CN、Radix 这样的库，它们为你处理外观，你会有更好的体验，并且保留语义 HTML 的一面。

通常来说，如果有人想要一些更自定义的东西，而他们不想使用日期选择器，他们通常会让你填写日期，但然后它会帮助像自动填充。所以它会基本上强制你的表单验证让他们写下正确的日期，或者至少是一个有效的日期。我见过这种情况。尽管如此，即使如此，我仍然觉得你应该使用日期选择器，因为对某人来说，

像在屏幕阅读器上，感觉就像，哦，这只是一个文本字段，但实际上是用于日期的，并且它试图纠正我。感觉这并不好。我从未尝试过，我可能错了，但你是对的，拥有一个外观是很棒的，尽管使用你提到的其他工具，如 Chad、CNN 等等，确实有助于这一点，因为我意思是，再次，这就是我们在这里讨论的所谓的 HTML。

而且这很重要。就像，想象一下，你会说，嘿，我的房子是建立在我真的压实得很硬的沙子上。可能在某些地方有效，因为我知道某些沙子确实变得非常坚硬。但我知道在加拿大，我们大多数的

基础都是水泥块或混凝土，或者像那种人造的硬岩石，像干燥的混凝土或其他东西。这可能是因为气候和不同的建筑规范等原因。我从未见过一栋房子说，嘿，我只是压实了一些沙子，像这样工作了一年，但现在它开裂了。我们该怎么办？对吧？你不想让那些基础开裂。你不想让用户可访问，无论使用可访问性工具与否。你不想让他们掉进裂缝里。

现在，我有一些事情要分享，这有点苦乐参半。这是我们与 Magic Mind 的结束。好吧，这个特定的 Magic Mind 运行。所以我非常感激他们为我提供 Magic Mind，并帮助我度过这个旅程。我们一直在进行我的反咖啡因或减少咖啡因的旅程。但你们一直在听我说很多。我想谈谈其他一些人。所以我找到了几个视频。

几乎说成社论，我找到了几个推荐信，其中一个与网络开发相关。所以实际上是 WordPress 的创始人 Matt Mullenweg。他的推荐信写道，将 MagicMind 纳入我的日常生活已成为一种仪式，激发了我的生产力和创造力。老实说，我在这方面也有同样的感觉，我有一个 MagicMind，我进入一种不错的状态，像是，我充满活力，我做得很好，我处于一种高效的状态，我只是...

我能够轻松完成我的待办事项清单。我能够迅速完成它。这也是，抱歉如果我搞错了任何名字。这是《纽约时报》畅销书作者 Alex Snodgrass 说的同样的事情，关于征服她的待办事项清单。在喝了 Magic 之后，我的脑雾消散，我能够以更少的干扰征服我的待办事项清单。这是她的推荐信。对我来说也是一样。与其让我

不断喝咖啡并兴奋不已。然后我坐下来，我的待办事项清单很大。我担心这个。我最多会喝一杯咖啡，喝完 Magic Mind。然后我想，好吧，我的待办事项清单很大。最好今天完成一两个任务。最好完成这个。让我们来完成。让我们真正完成这个待办事项清单。让我再读一个。所以 Pete Holmes，他是一个演员和喜剧演员。

他说，多年来，Magic Mind 就像我自己的个人神奇神话生物，我释放它来摧毁我的拖延、无精打采和脑雾。但与神话生物不同的是，它的味道也很好。我也到了这个地步，我喜欢这个味道。就像我不是，它是绿色果汁，对吧？你可能会想，哦，天哪，我不想，

感觉我在做果汁清洁或类似的事情。你有点担心味道，因为这就像电影中的经典场景。有人把健康奶昔搅拌在一起，然后有人喝了一口。就像一些绿色的糊状物，你会想，哦，这不是这里的情况。就像它是绿色果汁，但味道很好。我从来没有对此感到厌恶。我从来没有担心过味道。我从来没有因为味道而跳过它。这真的非常重要。

所以我只是想反思一下我与 Magic Mind 的时光。它帮助了我的日常生活。它帮助我度过了非常忙碌的时光。我们谈过这个，我会在包里放一个小的心理表现剂。我在高尔夫球场上。我在四处奔波。我没有时间停下来喝咖啡。我没有时间停下来休息。有时我只会喝这个，砰，喝下我的 Magic Mind。现在我充满活力。我进入了那种流动状态，像是，好吧，

好吧，我们需要切入这个。我们需要完成所有这些。随着假期的到来，现在更疯狂了。所以，你知道，四处奔波去商店，为亲戚买东西，帮助别人。我们在加拿大，所以铲雪，处理冰。这是额外的工作

花费时间做事情，见朋友，各种各样的事情。有时你根本没有时间在路边停下来，喝杯咖啡，回家做这个。所以 Magic Mind 是一个快速的小剂量，可以提升我的生产力，帮助我度过那些忙碌的日子。如果你想体验我刚刚描述的所有事情，你可以这样做。

在 magicmind.com / htmlpod20。你将获得高达 20% 的折扣。并记得使用我们的代码以及该链接。代码是 htmlpod20。链接和代码也将在节目描述和节目笔记中。感谢 Magic Mind。希望我们能在不久的将来再次合作。

现在让我们稍微改变一下话题。我们仍在谈论 HTML，但我们正在谈论自定义属性。所以我们从语义 HTML 聊天转变为谈论属性。现在属性显然是 HTML 的一部分。我们已经提到过一个，即类，对吧？所以那个 div class header，类是一个属性，但你可以创建自己的属性。所以开发人员可以定义属性，对吧？

他们需要以 data- 开头，字面意思是单词 data 然后是一个破折号或连字符，对吧，以在元素中存储额外信息。这种方法保持了 HTML 结构的整洁，并允许轻松访问数据，而不依赖于脆弱的类命名约定或外部脚本。

例如，你可能有像 data user ID 或 data theme 这样的东西，对吧？记住，单词之间有破折号。单词之间没有空格。所以这是 HTML 可以扩展的另一种方式。我想在这里提到一些事情。

你实际上可以进去做一个自定义属性，使用你自己的名字。就像你可以写 Matt-is-cool 然后等于 true。实际上它会起作用。网站一般不会崩溃，除非有其他工具讨厌它，然后崩溃网站。

然而，这实际上是无效的 HTML。如果你想做自定义属性，你必须使用前缀 data- 然后是你的内容。这是保持组织的方式，因为显然有一些是预留的，比如类。例如，想象一下，回到过去。

假设当时没有类属性，但 HTML 想在某个时候添加该属性。但成千上万的网站正在使用类，因为它们使用像第三方工具那样使用类属性。现在我们有了问题，因为标准将会改变，所有这些网站都会出现问题。

所以 data- 给你提供了自由的空间，像 data- 好吧，现在我可以做我想做的事情。Data- Matt is cool 或者你想放的任何内容。这是处理未来兼容性的更好方式。而且它还保持了你的 HTML 有效。所以记住 data-。关于自定义属性的一些最佳实践。再次，始终以 data- 开头，避免与标准属性冲突。

不过，也不要仅仅有像 data- ASDF 这样的东西。要有一个有意义的名称。让它自我解释。我们刚刚谈到语义 HTML，事物在这些各种元素下变得更加自我解释，通过语义 HTML 字面意思上就是自我解释。你不想让你的网站有所有这些漂亮的布局数据或漂亮的标签，对吧？

但你有一些自定义属性，比如 data- test one。就像，这是什么意思？这些是什么意思？所以使用有意义的名称，使其自我解释。当然，变量也是如此，对吧？如果你对 JavaScript 或其他编程语言感兴趣，变量显然是巨大的。你总是使用它们，你真的应该让它们成为比

mic 或 hello 更有意义的东西，如果这不是你对那个变量的用途，对吧？你想尽可能让变量自我解释。

现在你可能会想，哇，这太棒了。我可以拥有自己的数据属性。我可以在这些元素中存储一点信息。我将开始真正地往里面填充数据。不要这样做。所以避免用不必要或过于复杂的数据过载属性。你不想在里面有一个公式，或者像疯狂的 data- formula，然后你有像 1、2、7、8、4、blah、blah、blah、blah，所有这些东西。然后你有你的 JavaScript，读取它并重建某些东西。

尽量避免这样。我知道有时事情是不可避免的，比如，有时事情变得复杂，或者是边缘案例，诸如此类。但作为最佳实践，只需不要用不必要或过于复杂的数据过载你的属性。

所以我这里有一个例子。它只是一个按钮。所以这是一个按钮属性。我们有一个删除按钮。所以在按钮内部，我们只有“删除”这个词。但然后我们有两个与之相关的属性，即 data user ID。单词之间有破折号。等于 123。然后是 data- action，等于 delete。现在，那个 123。

可以由你手动填写，但显然它只会删除用户 123。但是，你

你可以填写这个，对吧？所以我知道我们现在不在谈论 CSS 和 JavaScript，更具体地说是 JavaScript，但 JavaScript 是填写这些数据的好方法。所以 JavaScript 可能会在这里发挥作用，填写那个用户 ID。就像，哦，我拉出，假设 Mike 的个人资料，Mike 的个人资料 ID，他的用户 ID 是 123。JavaScript 用 123 填充那个 data user ID 属性。现在当我按下删除时，它使用那个 123 来知道要删除什么。

好的。这在电子商务中实际上是非常常见的。例如，你可能有一个 div。所以 div 仍然，你知道，不要避免使用 div。div 仍然是完全有效和有价值的。但你可能有一个 div 包围一个标签，上面写着像笔记本电脑这样的东西，对吧？所以你可能有，这是一个电子商务网站，你可能有 data- category，因为你想确保这个部分有你的笔记本电脑，

你知道它是电子产品类别。你还想知道有多少库存。data-stock。你可以有 25 台笔记本电脑，30 台笔记本电脑，诸如此类。使用数据属性可以实现动态交互，而无需硬编码值。它允许你的 JavaScript 进来，快速将某些东西放入那里。然而，你可以硬编码东西。如果某些东西永远不会改变，比如如果某些东西确实是，

你需要，比如，你有一堆按钮，它们都有相同的类以保持样式一致，例如。但有时你希望有一个图标或类似的东西。你可以做一个 data-。所以你可以说 data- icon true，然后让你的 JavaScript 进去，像，哦，添加一个，你知道，附加这个图标。

有很多不同的方法可以做到这一点。这只是我随口说的，可能这甚至不是最好的方法，可能是一个类或其他东西。但问题是，你可以硬编码，或者你也可以让你的代码动态地更改这些属性。实际上，作为附注，我们提到过我们在 CSS 中讨论过交互式样式，以及 CSS 是否可以在某些方面取代 JavaScript。在之前的一集中，我会在节目笔记中链接它。我们讨论的事情之一是 CSS 有一个选择器

用于属性，你可以根据该属性是否存在，或者该属性是否存在并设置为特定值来拥有选择器。所以如果你字面上有一个按钮，再次，你字面上有一个 data- seasonal 在那里，true，可能在圣诞节，当那个值为 true 时，

它将按钮的颜色更改为红色和绿色以庆祝圣诞节。但然后，你知道，你的 JavaScript，它跟踪日期，会说，哦，不再是 12 月。它将那个 true 更改为 false。你的 CSS 处理你的 CSS 和你的 JS，根据这个处理按钮的外观。这只是一个非常简单的方法。一点 JavaScript，一点 HTML，一点 CSS 协同工作，而不是让 JavaScript 无缘无故地做所有的重活。

现在，显然，有一件非常重要的事情，显然，这在过去五到七年左右的时间里，很多人都在关注。可访问性。当然，它在那之前就存在。但 HTML 在可访问性中扮演着重要角色。我已经提到过这一点。所以，是的。

可访问性很重要，因为显然你希望残疾人士仍然能够使用你的网站。你可能还需要这样做。所以你可能需要遵守某些法律标准，比如 WCAG 或 W-C-A-G，这是一个缩写。对。例如，

屏幕阅读器，如非视觉桌面访问，缩写为 NVDA，以及 JAWS 或作业访问与语音，严重依赖良好结构的 HTML 来有效地向用户传达信息。因此，例如，nav 元素帮助这些工具提供网站主要部分的清晰大纲，而适当使用标题允许用户更有效地浏览内容。

所以想象一下，当你进入你的网页，你只是快速写一些 HTML，它就是一团糟，像是类的混乱，只是一堆 div。像这些屏幕阅读器怎么能找到你的 nav 列表？你可能会说，好吧，它将是一个 div 列表，或者它将是一个链接列表。好吧，有多少？你的网站有多大？

你是如何样式化你的导航栏的？另外，也许你的侧边栏也有一个链接列表。它怎么知道 nav 在哪里？你需要有语义 HTML。因此，HTML 在使事物可访问方面发挥着非常关键的作用。

现在，显然，你也可以做一些其他关键实践。例如，在 HTML 中，你可以使用按钮元素，这告诉屏幕阅读器，甚至 SEO，对吧？爬虫说，嘿，这就是一个按钮。它将做某事。它要么会链接到某个地方。它将带我去做某事，对吧？我们不知道这个按钮是什么，但我们知道它是一个可交互的东西，对吧？但问题是，你可以使用 ARIA 标签来稍微修复或增强这一点。所以例如，假设你有一个链接，像是某个地方的按钮。出于某种原因，实际上，这很常见。我会让人们只想在按钮中放一个图标，而图标并不是很具描述性，对吧？所以我可以在里面添加 ARIA，我可以添加 ARIA 标签，像是，嘿，这个按钮，这个按钮是，知道，链接到美国网站。这个按钮链接到

另一个页面，无论它链接到哪里，这个按钮链接到分享页面，在那里我们列出所有我们的社交媒体图标和其他东西。还有另一件事是，人们会过于依赖这个 ARIA 的东西，他们会使用得太多。所以有一个不当使用 ARIA 角色的关键点是确保你只在必要时使用 ARIA，首先依赖原生 HTML 元素。因此，例如，你可以有一个按钮，意味着使用你的按钮标签，然后使用 aria-role 属性，然后说这是一个按钮。

这就是冗余，对吧？HTML 已经在说这是一个按钮，而你现在又说按钮按钮，为什么呢？所以只需使用原生按钮元素，只需有按钮，仅此而已。这也是非常关键的，当人们，我注意到这一点，不知为何，很多时候会使用链接，某人会使用锚标签或 a 标签。我看到 aria-roll 的使用频率很高，像是 aria-roll button，aria-roll 这个，aria-roll 那个。我认为很多时候是 CMS 自动填充的。

而且通常是冗余的，你不需要说这是一个可点击的东西。这是一个可点击的东西，这实际上就是你在做的事情，对吧？你不想过度告知

屏幕阅读器，我的看法是，当我试图让事物与屏幕阅读器一起工作时，我想直截了当。这个人试图浏览页面。当我们快速翻阅页面时，我们不需要屏幕阅读器，我们只是快速翻阅，加载，像，哦，那是一个分享按钮。这，这，这，这，这。我们甚至不再真正注意到它。对吧。我们对网站及其工作方式非常熟悉。我们希望那种快速扫描体验。

尽可能地对屏幕阅读器可访问。如果他们想深入了解肉和土豆，如果他们说，嘿，阅读文章，屏幕阅读器开始阅读文章，我们希望他们能够找到文章并阅读它，对吧？我们不希望他们，屏幕阅读器说，我不知道文章在哪里。我不知道导航栏在哪里，知道，真是个大混乱。还有另一件事是表单。因此，在表单中，可访问性的一大要点是，如果你输入电子邮件，我的意思是，它只是一个输入。

它只是一个输入元素。如果你输入你的名字，它只是一个输入元素。所以尽量实际标记事物。例如，让你的电子邮件完整

或者对不起，你的电子邮件表单输入实际上用像 input type email ID email 进行标记。对吧。然后你有一个标签，标签为 email，是你的电子邮件。这使得非常明显。哦，这是电子邮件的标签。这是一个输入，我们必须输入电子邮件，因为它是类型电子邮件。这很有意义，对吧？不要仅仅让你的 JavaScript 验证它是电子邮件。使用类型电子邮件，像使用 HTML 实际验证。它再次帮助人们说，哦，

那需要是电子邮件，对吧？而一个人们经常谈论的重大问题，我并没有做到这一点，我想明确这一点。这是一个大问题，图像 alt 标签。alt 标签很重要，对吧？这些是图像的描述性替代文本。所以你会有像，你知道，你的图像标签，你有你的源，指向实际的图像资产，但你的 alt 标签需要描述里面的内容。现在，这是一件我想简要提及的事情，也许你甚至可以在这方面插入一些意见，Mike。

所以关于 alt 标签，这是我被教导的做法。有些人对此有不同的看法。有些人会逐字写出图像中的内容，比如，你知道，海滩上的美丽日落，像，你知道，所有这些，像什么的。然后还有另一种选择，就是说，它只是装饰性的，对吧？你还可以将某些东西标记为，嘿，这是装饰性的。因此，屏幕阅读器将大部分或完全跳过它。

通常是在其他地方写了描述时完成的。所以像说一个例子，你可能有一个旅游博客，你写关于这个美丽的海滩，你已经描述过了，对吧？你像是，这是一场惊人的日落，所有这些。然后你有一张图片。好吧，

<context>停止将所有内容都用div！掌握语义HTML、自定义属性和可访问性 在HTML All The Things播客的这一集中，Matt和Mike深入探讨了良好的HTML实践为何对构建更好、更可访问和可维护的网站至关重要。他们首先解释了语义HTML在可读性、SEO和可访问性方面的重要性，涵盖了像<header>、<footer>和<article>这样的有用标签。 Matt和Mike还讨论了开发人员如何正确创建和使用自定义属性——例如data-*属性——以干净地存储额外信息，而不依赖于脆弱的类命名约定。最后，他们强调了HTML在可访问性中的关键作用，突出了最佳实践，例如适当地使用ARIA属性和为图像提供有意义的替代文本。 为了结束这一集，主持人分享了一些关于他们假期计划的轻松更新，并向本集赞助商Magic Mind致以问候。

感谢Magic Mind赞助本集，使用我们的链接和代码享受一次性购买和订阅20%的折扣（链接：https://magicmind.com/HTMLPOD20 代码：HTMLPOD20） 感谢Wix Studio赞助本集！通过此链接查看Wix Studio，这是一个为设计师、开发人员和营销人员量身定制的网络平台：https://www.wix.com/studio </context> <raw_text>0 你不想让自己看起来像一个不使用屏幕阅读器的人。如果你是一个不使用屏幕阅读器的人，你不会想要阅读那段文字，然后看到图像，再有效地再次阅读那段文字。你不想再次描述那幅图像。那幅图像是对已经说过的内容的装饰。

所以我看到很多人犯这个错误，他们会说，哦，是的，只是写下替代文本以防万一，万一。不是的，不是以防万一。如果它是装饰性的，那就是装饰性的。对吧？还有另一件事，我会简短地说，我会让你在这一点上插话，Mike，我看到人们在替代文本中描述事物时非常细致。你知道，哦，这是一个紫色的日落。现在是早上6点。这是这样那样的。

我认为如果图像是出于艺术原因存在，那是有意义的。如果你想让某人真正解读图像的艺术，那是有意义的。

但如果图像只是为了说，嘿，这里有日落和几棵棕榈树，我的替代文本将会是，一个日落填满了海滩场景的背景，背景中有两棵棕榈树。因为图像存在的意义就是我刚刚写的内容。有些人对此不同意，他们说，不，像你知道的，使用屏幕阅读器的人应该体验整个图像。

我被教导这是不正确的。像这样的事情你不应该做。开发者们，这个是给你们的。我有30秒的时间告诉你关于Wix Studio的信息，这是一个为代理商和企业提供的网络平台。所以在Studio上，你可以在30秒或更短的时间内做一些事情。集成、扩展，并在基于VS代码的IDE中编写自定义脚本。利用零设置的开发、测试和生产环境。

更快地交付，使用AI代码助手，并在任何技术栈上与Wix无头API合作。时间到了，但列表还在继续。走进Wix Studio，亲自体验一下。链接在节目描述和节目笔记中。你觉得怎么样，Mike？是的，我完全同意你的看法。我将提供最少量的信息，以传达图像存在的意义。在网页开发中，图像很多时候是填充内容。

它们没有其他目的，只是为了平衡页面。在这种情况下，替代文本通常也是填充内容或跳过，或者其他，因为这并不是增强用户使用屏幕阅读器体验的内容。我的想法，以及我认为这是正确的做法和标准做法的原因是，当某人在使用屏幕阅读器时，时间对他们来说非常重要。

用大量的替代文本来描述图像，只是为了以与人们看到的相同的方式描述它，除了这个原因之外，实际上是在浪费使用屏幕阅读器的人的时间，他们通常在你的页面上是为了完成某个操作，因此图像在大多数情况下将被他们跳过，因此，拥有更长的替代文本

只会延迟他们到达下一个点和页面上可能更重要的部分。显然，当图像对用户体验变得非常重要时，你可以提供所需的详细信息，以便他们以正确的方式使用网站，但总体而言，我同意你提供最少量的信息，以便他们继续前往下一个实际上更重要的事情。

是的，归根结底，你是在努力实现页面的目标，对吧？我认为，描述图像的绝对细节，比如颜色和阴影的主要原因之一是，如果这是一个艺术画廊。你想让人们体验到这里的艺术。你想让他们体验到有渐变和这样那样的东西。因为我曾经看到有人在X上卖一个控制器，

他们写了这样的话，哦，一个紫色的爆炸，还有一个紫色的Xbox控制器，或者不管是什么。PlayStation控制器，我不记得了。但中间有一个紫色的控制器。控制器有黑色的模拟摇杆和蓝色的面板按钮，等等。我心想，也许我对这个有点犹豫，因为就像，

我明白。如果有人想买控制器，而你在卖一个美学变体，你会希望他们看到所有这些。但如果...

我只是觉得这不适合社交媒体。对我来说，社交媒体就像是一个可滚动的东西。我会说，像是一个紫色的控制器，你知道，它与Xbox兼容，或者不管是什么。对吧？这基本上就是全部。也许，这也许太少了。我相信会有争论和这样的事情。会有人以不同的方式处理这个，但是的，听起来你和我在同一页上。

现在，我确实有一个部分，我不会在音频中说，完全不会。这是一个结合了我们讨论的许多最佳实践的真实世界示例。它基本上就像一篇文章。所以这就是你可能会布局的方式，当然有不同的方式，但这是你将如何布局一篇文章，带有不同的...

这是我的文章，它有一个标题，有一个部分，有这些按钮，这里有一些自定义属性，诸如此类。再次强调，完全有很多不同的方式来做到这一点。这只是我找到的一个示例。因此，这将在节目笔记中。它在第四项，结合最佳实践与真实世界示例，当然。

我不会读完这些。我本来想说，也许我会...不，不。因为这会变成，好的，大家，按钮，数据，动作，像。那现在进入页脚。别忘了你的标签。这就是你做ASMR的地方，Matt。这是ASMR的部分。HTML，ASMR，订阅。当我...因为我们有时会在他们身上直播游戏，他会把麦克风音量调高，靠得很近，然后开始低声说，我重新加载了。嗯。

我妻子。哦，我讨厌那个。哦。我在17号区域受到攻击。天哪。一些敲击麦克风的声音，等等。是的。这很疯狂。我喜欢这一点。我喜欢他随时准备好。

他只需在一秒钟内打开它。但无论如何，这将是这一集的结束。我希望你喜欢它。我不知道这一集什么时候会发布。我们接近假期季节。这一集将在12月17日发布。伙计，如果我们坚持周二的时间表，我们还有一个平安夜的特别节目。我们有12月24日的节目。我们...伙计...

伙计，有很多该死的...我们应该录制一个平安夜的节目，就像一个圣诞节...HTML的圣诞节目。那...从技术上讲，这是你的周，所以享受制作那个主题。准备好圣诞树，但在音频上。这可能是一个圣诞专辑。我们可能会进行颂歌。我们要从Bublé先生那里获取一些见解和歌曲吗？每年圣诞节我们都会请Bublé先生吗？准备好你的声带，Matt，因为我们要为圣诞节的节目制作一张圣诞专辑，所以请继续关注。我要真的买Bublé吗？我只是在开玩笑。我们不会唱歌。我声音很糟糕，但没关系。我要真的买Bublé吗？我不是指那个人。我是字面上指饮料。是的，Bublé。是的，喝点Bublé。因为有Bublé，所以...

Michael Bublé是加拿大气泡水的代言人，气泡水就像美国的LaCroix。每个假期，在过去的几个假期中，都有一个叫做Bublé的饮料，因为他是这个东西。他们把气泡水中的Y划掉，然后用带有重音符号的E替换成Bublé。所以你可以购买Bublé饮料来代表圣诞季节。

而我几乎是宗教般地喝气泡水。气泡水社区本身就是一个非常可制作成表情包的东西。拥有Bublé在其中更是锦上添花。我喜欢它。我喜欢它。我不会在这里提到这些表情包，但如果你感兴趣，有一个很好的Reddit气泡水论坛，那个论坛相当火。

哦，我记得那个。我确实记得那件事。但我确实清楚地记得在灰杯比赛上，他们有很多气泡水广告，都是Bublé，因为那是接近圣诞节，因为这是COVID杯。所以他们在年底晚些时候进行了比赛。我相信是在12月。而且是Bublé。我得到了我所需的所有Bublé，唱着关于气泡水堆叠成树的歌曲，就像圣诞树一样，因为它们都是不同的颜色。我还相信那可能是Bublé的第一年。

所以无论如何，我不知道现在还可以说什么。这有点奇怪。我们从网页开发转到Bublé。我不太确定现在该怎么办。请继续关注某种形式的圣诞节特别节目。如果你在平安夜没有事情可做，请收听我们的圣诞节特别节目。这就是我想说的。你去吧。还有，Mike，娱乐一下这些可爱的人。我不小心关闭了我的Patreon文档，而不是打开它。

好的，所以圣诞节特别节目可能会是对星球大战圣诞节特别节目的一种改编，除了我们将其与HTML结合在一起。所以可能会有一些Wookie的声音。我相信Matt可以做一个非常好的Wookie。

所以90%的节目将没有字幕，只有Matt在发出Wookie的声音。难道像爷爷Wookie在里面做一些奇怪的事情吗？或者他在看Wookie色情片之类的？可能。我是说，Matt，你得在音频中重现那个。我已经20年没看过这个了。我甚至不知道我说的是否真实。节目中有50%的内容只是Wookie的声音，没有任何字幕。这太棒了。

所以，是的，这就是我们要做的。所以请留意这个。无论如何，如果你想支持像这样的节目而不是那样的节目，请记住我们在Patreon上。你想支持这个节目，可以访问patreon.com/html all the things。非常感谢我们的3美元级别的赞助者。

来自thewebhacker.com的Tim。来自geekliferadio.com的Jason。来自www.leveloffinancialplanning.com的Garrett Segal，Level of Financial Planning。来自yesweb.se的Magnus，YesWeb。来自HTML All The Things Discord服务器的Syntaxify，以及来自swoonworthydesigns.com的Stacy Mostler。

我们还想向Michael LaRocca致以问候，他是HTML All The Things网站的贡献作者。他是Self Taught的作者，额外一代博客在selftoughttxg.com。欢迎在您收听此节目的平台上留下评论或评价。我们即将结束。

您正在收听HTML，所有事物播客，网页开发，网页设计和小型企业。我们希望您从本节目中获得一些有用和实用的信息。我们希望您能欣赏我们像人类一样与您交谈，并希望您玩得开心。