重学前端
程劭非(winter)
前手机淘宝前端负责人
立即订阅
32935 人已学习
课程目录
已完结 58 讲
0/4登录后,你可以任选4讲全文学习。
开篇词+学习路线+架构图 (3讲)
开篇词 | 从今天起,重新理解前端
免费
明确你的前端学习路线与方法
列一份前端知识架构图
模块一:JavaScript (15讲)
JavaScript类型:关于类型,有哪些你不知道的细节?
JavaScript对象:面向对象还是基于对象?
JavaScript对象:我们真的需要模拟类吗?
JavaScript对象:你知道全部的对象分类吗?
JavaScript执行(一):Promise里的代码为什么比setTimeout先执行?
JavaScript执行(二):闭包和执行上下文到底是怎么回事?
JavaScript执行(三):你知道现在有多少种函数吗?
JavaScript执行(四):try里面放return,finally还会执行吗?
JavaScript词法:为什么12.toString会报错?
(小实验)理解编译原理:一个四则运算的解释器
JavaScript语法(预备篇):到底要不要写分号呢?
JavaScript语法(一):在script标签写export为什么会抛错?
JavaScript语法(二):你知道哪些JavaScript语句?
JavaScript语法(三):什么是表达式语句?
JavaScript语法(四):新加入的**运算符,哪里有些不一样呢?
模块二:HTML和CSS (16讲)
HTML语义:div和span不是够用了吗?
HTML语义:如何运用语义类标签来呈现Wiki网页?
CSS语法:除了属性和选择器,你还需要知道这些带@的规则
HTML元信息类标签:你知道head里一共能写哪几种标签吗?
CSS 选择器:如何选中svg里的a元素?
CSS选择器:伪元素是怎么回事儿?
HTML链接:除了a标签,还有哪些标签叫链接?
CSS排版:从毕升开始,我们就开始用正常流了
HTML替换型元素:为什么link一个CSS要用href,而引入js要用src呢?
HTML小实验:用代码分析HTML标准
CSS Flex排版:为什么垂直居中这么难?
CSS动画与交互:为什么动画要用贝塞尔曲线这么奇怪的东西?
HTML语言:DTD到底是什么?
CSS渲染:CSS是如何绘制颜色的?
CSS小实验:动手做,用代码挖掘CSS属性
HTML·ARIA:可访问性是只给盲人用的特性么?
模块三:浏览器实现原理与API (9讲)
浏览器:一个浏览器是如何工作的?(阶段一)
浏览器:一个浏览器是如何工作的?(阶段二)
浏览器:一个浏览器是如何工作的(阶段三)
浏览器:一个浏览器是如何工作的?(阶段四)
浏览器:一个浏览器是如何工作的?(阶段五)
浏览器DOM:你知道HTML的节点有哪几种吗?
浏览器CSSOM:如何获取一个元素的准确位置
浏览器事件:为什么会有捕获过程和冒泡过程?
浏览器API(小实验):动手整理全部API
模块四:前端综合应用 (5讲)
性能:前端的性能到底对业务数据有多大的影响?
工具链:什么样的工具链才能提升团队效率?
持续集成:几十个前端一起工作,如何保证工作质量?
搭建系统:大量的低价值需求应该如何应对?
前端架构:前端架构有哪些核心问题?
特别加餐 (9讲)
新年彩蛋 | 2019,有哪些前端技术值得关注?
用户故事 | 那些你与“重学前端”的不解之缘
期中答疑 | name(){}与name: function() {},两种写法有什么区别吗?
答疑加餐 | 学了这么多前端的“小众”知识,到底对我有什么帮助?
加餐 | 前端与图形学
加餐 | 前端交互基础设施的建设
期末答疑(一):前端代码单元测试怎么做?
期末答疑(二):前端架构中,每个逻辑页面如何可以做到独立发布呢?
加餐 | 一个前端工程师到底需要掌握哪些技能?
尾声 (1讲)
尾声 | 长风破浪会有时,直挂云帆济沧海
重学前端
登录|注册

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

winter 2019-04-11
你好,我是 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/1000字
划线
笔记
复制
© 版权归极客邦科技所有,未经许可不得传播售卖。 页面已增加防盗追踪,如有侵权极客邦将依法追究其法律责任。
该试读文章来自付费专栏《重学前端》,如需阅读全部文章,
请订阅文章所属专栏。
立即订阅
登录 后留言

精选留言(7)

  • 阿成
    这种“通过简单的文本分析,快速提炼出自己感兴趣的部分”的方法是非常值得借鉴的,我平时也会用这种方法去网页中做一些快速的统计和信息筛选。

    不过,通过这样的文本分析去完成一个“检查一个元素是否能够放置在另一个元素内部”的小程序还是有点“把问题复杂化”的感觉(尽管这个过程中也可以锻炼一些能力),况且文档是会更新的,指不定有一天那些check分支就hold不住新的case了。

    在我看来,如果想知道A元素是否可以放在B元素中,只要把所有元素的categories和contentModel提取出来,筛选出A元素的categories和B元素的contentModel,再去阅读比较就可以了(当然你还要对标准中的一些术语有所了解,所幸的是这些术语都有超链接指向定义,所以还是比较方便的ヾ(≧▽≦*)o)。

    2019-04-14
    7
  • 一步
    老师 有个疑问: WHATWG 和 W3C 标准以哪个为准,这两个标准有什么区别?是不是相互不认可的
    2019-04-29
    4
  • 柠檬树
    没太看懂,好多语法基于这个页面https://html.spec.whatwg.org/
    2019-06-02
  • away
    @一步 WHATWG 和 W3C 标准若有不同,一般以 WHATWG 为准
    2019-04-30
  • 嗨海海
    学不到,有因果关系,工作实际需要吗?
    2019-04-12
  • 被雨水过滤的空气
    学习了
    2019-04-11
  • 会飞的大猫
    Winter,刚看完文章,就在淘宝技术节视频看到了你持相机和大家自拍的图片
    2019-04-11
收起评论
7
返回
顶部