【云驻共创】你不知道的 HTML

举报
胡琦 发表于 2021/08/17 15:26:17 2021/08/17
【摘要】 资深前端，您真的了解 HTML 吗？

目录

  • 前言
  • 第一个 HTML 规范居然是 HTML 2.0
  • HTML 标准中一共定义了 122 个标签元素
  • 神奇的 Meta 标签
  • HTML 与 无障碍（ARIA）
  • 总结

前言

众所周知，“HTML + CSS + JavaScript”被称之为前端三大件, 其中 HTML 称之为超文本标记语言，用来构建语义化的网页内容；CSS 称之为层叠样式表，用来为网页添加样式；JavaScript 是一门动态编程语言，当应用在网页中时可以添加动态交互特性。 举个不太恰当的例子，HTML 好比是毛胚房， CSS 好比给毛胚房加上装修， JavaScript 好比给装修好的房子再来套全屋定制的智能家居。 随着前端框架的不断演进，作为前端开发的我们， 尤其是 API 调用的高级切图仔，我们可能不再关注 HTML 、CSS 怎么实现，这部分工作，框架都帮我们做了，这就好比我们直接从全屋智能的精装房开始开工建设。如下图中， 基于 Vue 3 + Vite 的 Demo 中，index.html 是唯一的 HTML 文件。

index.html 的源代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

今天，我们先不去探究框架究竟施展了什么魔法让 HTML 逐渐从我们的开发世界淡出；我们追本溯源，从 HTML 的诞生开始去探寻过去，我们去数一数 HTML 究竟有多少个元素？ HTML 元素又有哪些属性？ 应用场景是怎么样的？无障碍网页是什么怎么实现？……

“我知道这些能升职加薪吗？”
“不能！”
全文终，感谢阅读……

第一个 HTML 规范居然是 HTML 2.0

说起 HTML 的起源，和其它语言一样，也是一段佳话。那是 1980 年的夏天，一位名叫蒂姆·伯纳斯·李(Tim Berners-Lee)的 25 岁小伙，拿到了世界上最大的粒子物理实验室欧洲核研究组织的 offer 。为了破除组织内上万人工作中的交流沟通障碍，让科学家们能快速跟踪不同的事情参与不同的项目，小李头提出并开发了供研究人员使用和共享文件的系统ENQUIRE,但小李头最终想做的是“每个人都可以使用”的系统，于是他在 1989 年提议建立一个基于互联网的超文本系统，并在 1991 年末公开了名为“HTML Tags”的 HTML 描述文档，涵盖了 18 个元素和最原始的、相对简单的 HTML 设计。最终在 1993 年由国际互联网工程任务组（The Internet Engineering Task Force，IETE）发布了 HTML 草案，姑且称之为 HTML 1.0。1995 年，HTML 2.0 发布，成为第一个 HTML 规范，作为未来后续版本的基础。 image

后来的十多年又陆陆续续发布了 HTML 3、HTML 4、 HTML 5，从 HTML 3.2 开始，万维网联盟（World Wide Web Consortium， W3C） 接替国际互联网工程任务组掌控 HTML 标准的发布。HTML 4 分化出了 严格（Strict）、过度（Transitional）、框架集（Frameset）三种变体，并结合可扩展标记语言（Extensible Markup Language ，XML）产生了 XHTML。HTML 5 从 2008 年被作为草案发布，到 2014 年最为 W3C 推荐标准发布，越来越成为市场主流，未来 HTML 5 可能成为 HTML 的最终版本，并且在 2019 年网络超文本应用技术工作组（The Web Hypertext Application Technology Working Group ，WHATWG）接替 W3C 成为 HTML 和 DOM 标准的唯一发布者，因此，如果您想关注 HTML 未来的动向，可以关注 WHATWG 之后的动态。

HTML 标准中一共定义了 122 个标签元素

HTML 究竟有多少个元素？ 为了找到正确的答案，首先我们应该明确一下 HTML 的权威资料，前面我们了解了 HTML 的发展历程，我们发现是 W3C 和 WHATWG 这两个组织定义了最新的 HTML 标准，W3C 的 官网是 w3.org, WHATWG 的官网是 whatwg.org。通过访问这两个权威的网站，我们能较为直接地获取到一些完整的学习资料，也能够直观地感受到 W3C 和 WHATWG 定义的 HTML 标准之间的差异。比如以下截图中(截取时间为 2021-08-03),上图为 W3C Standards，下图为 WHATWG Standards，后者更专注于 HTML Living Standards，这也是 W3C 和 WHATWG 最大的分歧。

W3C StandardsW3C Standards WHATWG StandardsWHATWG Standards

在 WHATWG 发布的标准中，我们能够在第 4 章找到 HTML 定义的全部元素，标准中还为我们制定了分类的方法，比如将 HTML 中所有元素按照 文档元素、文档元数据、嵌入内容、表格数据、表单、脚本等类型分类。如何快速获取到我们需要了解的全部元素，这里笔者曾经见识过一个非常简便的方法，如下图所示，我们打开 WHATWG 的 HTML Living Standards 页面，按下 F12 打开浏览器控制台，点击元素(Elements)页签，选中页面中 id="toc-semantics"的li 元素，再点击控制台(console)页面，输入并执行以下代码：

// 获取 toc-semantics 下所有 code 标签的内容
arr = Array.prototype.map.call(document.getElementById('toc-semantics').querySelectorAll('code'),e=>e.innerHTML)
// 简单的 ES6 去重及过滤
[...new Set(arr.filter(e=>e.indexOf('=') == -1 && /^[a-z0-9]+$/.test(e)))]
imageimage

此时能粗略获得所有 HTML 标准中定义的元素 和一些属性，我们再对照 HTML 标准移除掉属性，获得的当前 HTML 标准下(截止到 2021-08-03)所有的元素为 122 个，具体内容如下：

[
    "html","head","title","base","link","meta","style","body","article","section",
    "nav","aside","h1","h2","h3","h4","h5","h6","hgroup","header",
    "footer","address","p","hr","pre","blockquote","ol","ul","menu","li",
    "dl","dt","dd","figure","figcaption","main","div","a","em","strong",
    "small","s","cite","q","dfn","abbr","ruby","rt","rp","data",
    "time","code","var","samp","kbd","sub","sup","i","b","u",
    "mark","bdi","bdo","span","br","wbr","area","ins","del","picture",
    "source","img","iframe","embed","object","param","video","audio","track","map",
    "table","caption","colgroup","col","tbody","thead","tfoot","tr","td","th",
    "form","label","input","button","select","datalist","optgroup","option","textarea","output",
    "progress","meter","fieldset","legend","details","summary","dialog","script","noscript","template",
    "slot","canvas"
]

至此，我们探究了“HTML 中究竟有多少个元素”。说实话，“HTML 究竟有多少个元素”这类问题没有什么实际意义，无异于“茴字有四样写法，你知道么”，但我们成功的用编程的思想解决了这个问题，这也许就是我们的收获。如果您想深入学习 HTML，可以从以上标签元素中的常用元素入手，再去熟悉 Web API 、工作线程、通信、Web 存储等等知识点， 精通 HTML 指日可待！

神奇的 Meta 标签

在 HTML 众多标准元素中，有一个我们常见而又陌生的，它就是文档级元数据元素<meta>,如上文中提到的 Vue 3 + Vite 的 Demo 中就用到了charset属性为 UTF-8 和name属性为viewport的<meta>，分别用来告诉文档使用哪种字符编码和应用于整个页面的属性，除此之外还有http-equiv属性和用户自定义的属性。我们可以通过http-equiv属性来实现页面自动跳转和刷新，比如实现类似 PPT 的自动翻页：

<!-- 每分钟刷新页面  -->
<meta http-equiv="Refresh" content="60" />
<!-- 10 秒后自动跳转到 next.html  -->
<meta http-equiv="Refresh" content="10;url=next.html" />

上面代码中 content的取值决定了效果，如果 content只包含一个正整数 X，则效果是 X 秒之后重新载入页面；如果content包含一个正整数 X，并且后面跟着字符串 ';url=' 和一个有效的 URL，则是效果是 X 秒之后重定向到指定链接。

<meta>的name取值非常丰富，在搜索引擎优化(SEO) 中常常被使用到，以华为云官网为例，如下图是在搜索引擎中以华为云为关键字的查询结果，通过查看源代码，不难发现是值为 keywords 和 description 的name属性的功劳。

imageimage

代码如下：

<meta name="keywords" content="华为云，云主机，云服务器，云数据库，云计算">
<meta name="description" content="华为云为用户提供云服务器,云数据库,云存储,CDN,大数据,云安全等公有云产品和电商,金融,游戏等多种解决方案,7x24小时客服支持,帮助企业轻松上云-华为云">

<meta name="description" content="华为云空间，在线管理您的照片、联系人、备忘录等重要数据，并同步更新到您的其他华为设备。还可以在设备丢失时，帮您远程定位、播放铃声、设置丢失模式、擦除数据，保护您的隐私安全。
">
<meta name="keywords" content="华为云空间，存于云间 尽享精彩，云备份，数据同步，图库同步，云盘，查找设备">

此外http-equiv取值为Access-Control-Allow-Origin来控制哪些域名的脚本可以访问该资源，可以用来解决跨域访问。 综上所述， HTML 中一个<meta>就有如此多的规范，可见 “HTML 是一门编程语言”。

HTML 与 无障碍（ARIA）

互联网的力量存在于其普适性中，让包括残障人士在内的每个人都能访问互联网，是其中不可或缺的一方面。

—— Timothy Berners-Lee， W3C（万维网联盟）主席、万维网发明者

尽管笔者入行已有多年，但从来没关注过无障碍(ARIA), 也许是笔者接触的业务场景从来没有考虑过特殊人群，比如视障人老年人等。正如老李头所说，没有实现无障碍访问的应用不是“每个人都可以使用”的应用。首先我们看一个简单的例子:

华为云社区博客汇聚大数据、AI、物联网、云计算等热门产品专区，助力开发者获取最新技术信息和云计算技术生态圈动态。点击这里来查看更多信息。

华为云社区博客汇聚大数据、AI、物联网、云计算等热门产品专区，助力开发者获取最新技术信息和云计算技术生态圈动态。访问https://bbs.huaweicloud.com/blogs来查看更多信息。

上面三种写法本质上都是表达同一个意思，我们在浏览器中访问时，它们的效果几乎差不多，但是如果是通过屏幕阅读器访问，语音播放以上内容时，我们无法感知点击这里表达的具体含义，相对比较好的实现如下：

华为云社区博客汇聚大数据、AI、物联网、云计算等热门产品专区，助力开发者获取最新技术信息和云计算技术生态圈动态。

当然此处的案例和 HTML 并无太多联系，在 HTML 中有大量的元素和属性来实现 ARIA。W3C 给出了使用 ARIA的草案指导, MDN 中也编写了HTML ARIA 指南。举几个例子，笔者之前经常忽略的细节，也恰恰是笔者在编写 HTML 代码时常常无视的一些标签元素和属性，您想想，如果以后老去的某天我们再来访问现在编写的页面，我们老眼昏花，借助屏幕阅读器，却怎么也听不出来页面究竟写的是什么内容。

<!-- 1.很随意的按钮 -->
<div>点我</div>

<!-- 推荐的语义化 -->
<button data-message="这是点我按钮" tabindex="0">点我</button>

<!-- 2.很随意的图片 -->
<img
  src="https://res-static.hc-cdn.cn/cloudbu-site/china/zh-cn/yunzhujihua/bannerMB.jpg"
/>

<!-- 添加 alt 属性 -->
<img
  src="https://res-static.hc-cdn.cn/cloudbu-site/china/zh-cn/yunzhujihua/bannerMB.jpg"
  alt=" 云驻计划是面向华为云社区注册用户，给予全体开发者在内容创作上的激励计划。"
/>

<!-- ARIA 优化  -->
<img
  src="https://res-static.hc-cdn.cn/cloudbu-site/china/zh-cn/yunzhujihua/bannerMB.jpg"
  aria-labelledby="plan-label"
/>
<p id="plan-label">
  云驻计划是面向华为云社区注册用户，给予全体开发者在内容创作上的激励计划。
</p>

正如上面的代码，我们在编写 HTML 代码时应使用语义化标签，在必要的情况下，需考虑实现无障碍。HTML 中除了语义化的标签元素之外，还以aria-*的形式定义了一些特殊属性，如aria-checked、aria-describedby、aria-disabled、aria-label,感兴趣的话可以搜索关键字查阅资料。

总结

尽管 HTML 只是 超文本标记语言，但在网页应用开发过程中，依旧是不可或缺的部分，不管未来 HTML 标准会怎样变化，只要掌握了学习方法，“活到老，学到老”，也许未来 HTML 会如同 XHTML 一样逐步被新事物替代，但至少曾经我们和它有一面之缘。笔者结合自身的工作经验，从 HTML 的起源起笔，带着好奇心去探索 HTML 标准中定义的元素，再到简单梳理 HTML 的无障碍；但文章篇幅有限，笔者学识浅显， HTML 的知识点绝不仅仅只有这么一些。 HTML 作为一门计算机语言，也有它独特的语法和词法，此外 HTML 和 SGML 以及 XML 颇有渊源，本文就不再一一赘述，希望能为刚入行的小伙伴开启新世界的大门，也希望经验丰富的您，能在评论区多多指教！


本文整理自华为云社区内容共创活动 科普教程内容输出：HTML篇

查看活动详情：https://bbs.huaweicloud.com/blogs/281988

【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@huaweicloud.com
HTML 云计算
  • 点赞
  • 收藏
  • 关注作者

评论（0）

0/1000
抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认 取消

加入云驻计划，成为创作者

  • 华为云周边好礼
  • 免费体验产品
  • 特殊身份标识
  • 线下官方门票
  • 内部专家零距离
  • 与10000+优质创作者共同成长
立即加入