HTML小实验：用代码分析HTML标准

winter



该思维导图由 AI 生成，仅供参考

你好，我是 winter。
前面的课程中，我们已经讲解了大部分的 HTML 标签。
然而，为了突出重点，我们还是会忽略一些标签类型。比如表单类标签和表格类标签，我认为只有少数前端工程师用过，比如我在整个手机淘宝的工作生涯中，一次表格类标签都没有用到，表单类则只用过 input，也只有几次。
那么，剩下的标签我们怎么样去了解它们呢？当然是查阅 HTML 标准。
由于阅读标准有一定门槛，需要了解一些机制，这节课，我为你设计了一个小实验，用 JavaScript 代码去抽取标准中我们需要的信息。
HTML 标准我们采用 WHATWG 的 living standard 标准，我们先来看看标准是如何描述一个标签的，这里我们看到，有下面这些内容。
Categories:
    Flow content.
    Phrasing content.
    Embedded content.
    If the element has a controls attribute: Interactive content.
    Palpable content.
Contexts in which this element can be used:
    Where embedded content is expected.
Content model:
    If the element has a src attribute: zero or more track elements, then transparent, but with no media element descendants.
    If the element does not have a src attribute: zero or more source elements, then zero or more track elements, then transparent, but with no media element descendants.
Tag omission in text/html:
    Neither tag is omissible.
Content attributes:
    Global attributes
    src — Address of the resource
    crossorigin — How the element handles crossorigin requests
    poster — Poster frame to show prior to video playback
    preload — Hints how much buffering the media resource will likely need
    autoplay — Hint that the media resource can be started automatically when the page is loaded
    playsinline — Encourage the user agent to display video content within the element's playback area
    loop — Whether to loop the media resource
    muted — Whether to mute the media resource by default
    controls — Show user agent controls
    width — Horizontal dimension
    height — Vertical dimension
DOM interface:
    [Exposed=Window, HTMLConstructor]
    interface HTMLVideoElement : HTMLMediaElement {
      [CEReactions] attribute unsigned long width;
      [CEReactions] attribute unsigned long height;
      readonly attribute unsigned long videoWidth;
      readonly attribute unsigned long videoHeight;
      [CEReactions] attribute USVString poster;
      [CEReactions] attribute boolean playsInline;
    };
我们看到，这里的描述分为 6 个部分，有下面这些内容。
Categories：标签所属的分类。
Contexts in which this element can be used：标签能够用在哪里。
Content model：标签的内容模型。
Tag omission in text/html：标签是否可以省略。
Content attributes：内容属性。
DOM interface：用 WebIDL 定义的元素类型接口。

公开

同步至部落

取消

完成

0/2000

荧光笔

直线

曲线

笔记

复制

AI

深入了解
翻译
英语
中文简体
中文繁体
法语
德语
日语
韩语
俄语
西班牙语
阿拉伯语
解释
总结

本文通过代码分析HTML标准，介绍了如何抓取HTML标准中的描述内容和结构，以及标签的分类、使用上下文、内容模型等信息。作者设计了一个小实验，通过JavaScript代码抽取标准中需要的信息，以便检查某个标签是否能放入另一个标签内。文章突出了技术特点，强调了对HTML标准的理解和应用。读者可以通过本文了解如何用代码分析HTML标准，适合前端工程师和对HTML标准感兴趣的读者阅读。文章中还介绍了如何通过JavaScript代码创建索引和编写检查函数，以便判断一个标签是否可以作为另一个标签的子元素。这些技术内容对于前端开发人员来说具有重要的参考价值，能够帮助他们更好地理解和应用HTML标准。通过这个实验，作者希望传递一种思路，即代码能够帮助我们从Web标准中挖掘出很多想要的信息，编写代码的过程也是更深入理解标准的契机。这一节课的产出是“绝对完整的标签列表”，也是学习和阅读标准的小技巧，通过代码可以从不同的侧面分析标准的内容，挖掘需要注意的点，这是一种非常好的学习方法。

仅可试看部分内容，如需阅读全部内容，请付费购买文章所属专栏
《重学前端》，新⼈⾸单¥59

立即购买

登录后留言

全部留言(11)

最新
精选

阿成
这种“通过简单的文本分析，快速提炼出自己感兴趣的部分”的方法是非常值得借鉴的，我平时也会用这种方法去网页中做一些快速的统计和信息筛选。不过，通过这样的文本分析去完成一个“检查一个元素是否能够放置在另一个元素内部”的小程序还是有点“把问题复杂化”的感觉（尽管这个过程中也可以锻炼一些能力），况且文档是会更新的，指不定有一天那些check分支就hold不住新的case了。在我看来，如果想知道A元素是否可以放在B元素中，只要把所有元素的categories和contentModel提取出来，筛选出A元素的categories和B元素的contentModel，再去阅读比较就可以了（当然你还要对标准中的一些术语有所了解，所幸的是这些术语都有超链接指向定义，所以还是比较方便的ヾ(≧▽≦*)o）。
2019-04-14

20
奕
老师有个疑问： WHATWG 和 W3C 标准以哪个为准，这两个标准有什么区别？是不是相互不认可的
2019-04-29

9
前端男孩
为什么我去网页控制台上Console出不来呢？
2020-02-16

3
会飞的大猫
Winter，刚看完文章，就在淘宝技术节视频看到了你持相机和大家自拍的图片
2019-04-11

1
大神博士
是我的问题吗，这文档好大，滚动起来好卡啊
2023-04-30归属地：上海


Clors
我提出一个场景，如果vw布局网页，不使用iframe如何做到限制最大大小？
2020-09-04


Change
本想实践一下这个实验，奈何https://html.spec.whatwg.org/链接打不开是什么情况？
2020-03-07
1

爱学习的大叔
没太看懂，好多语法基于这个页面https://html.spec.whatwg.org/
2019-06-02


away
@一步 WHATWG 和 W3C 标准若有不同，一般以 WHATWG 为准
2019-04-30


嗨海海
学不到，有因果关系，工作实际需要吗？
2019-04-12
1


收起评论