从来没有哪种飞机的造型会比 XB-70 “女武神” 战略轰炸机更让人影响深刻的了。想到几年前第一次看到它照片的时候,确实让我震撼了好一会儿,不得不佩服美国人的智慧。

XB-70

修长的“脖子”,可变角度的机鼻,并排的六台引擎,可变的三角翼翼尖使得它与之前任何一架飞机都不同。虽然属于重型战略轰炸机,却依然可以飞到之前只有 SR-71 高空高速侦察机才能达到的3马赫极速。

XB-70

它为能取代 B-52 “同温层堡垒”而进行高空高速突防苏联领空而研发,但其费效比已不如当时已经发展起来的弹道导弹。同时,苏联也已经服役了 Mig-25 “狐蝠” 高速截击机,它以牺牲航程为代价使得全身70%不锈钢材料却依然能达到3马赫的极速。加上昂贵的造价与苏联“萨姆”防空导弹的发展,这些因素最终使得 XB-70 没能量产,试飞过程中与 F-104战斗机的相撞世故也使现今世上仅存一架放在空军博物馆做展示机。B-52 轰炸机也不得不服役至今,并将继续服役到2030年。

虽然 XB-70 项目下马了,但其超越时代的技术对后来的航空业产生了很大影响:其部分技术应用在了后来开发并服役的“协和号”超音速客机上,苏联窃取其技术制造了“图144”超音速客机。

刚发现苏联自己也曾尝试制造类似外形的苏霍伊 T-4 验证机:

T-4

冷战时期激烈的竞争确实很大程度上激发了双方的技术创新。苏联解体20余年,俄罗斯陆海军基本上在吃老本,空军的 T-50 五代歼击机仍在试飞中,不会比中国超前多少。西方世界,也仅仅有美国的 F22 “猛禽” 和 X-47B 无人机能称得上是亮点,B2 轰炸机应该仍属于冷战的产物。可见相比于冷战时期,近20年由于没了激烈的竞争,东西方都没有看到太多的技术革新,而科学技术一般都是由军用转民用。人类维持了世界和平,却也丧失了很多技术创新的动力。

没有竞争,你永远不知道人类智慧的上限。

继上次发现 Chrome 核的 text-decorationbug 后最近又发现了 Chrome 39 的开发者工具(DevTools)的一些故障,表现为不能显示某些 DOM 元素的样式,甚至 console 也会出现没有任何输出的情况,而这确和 URL 参数中含有特殊编码的值有关。虽然不知道故障的原因,但可以在 Linux/Mac 版的Chrome 39/Opera 26 上都100%重现,只是 Chrome 的 Dev/Canary Channel 都已经“意外修复”了该问题,所以也没有个结论,具体描述在这里。我觉得这样明显的问题出现在 stable 分支上,chromium 应该给个说法才是。

nodejs 的 0.11.x 分支也出现了诡异的问题url 模块的 parse 方法在第二个参数传入 true 时返回的对象中应始终存在一个非 nullquery 对象,但 0.11.x 版本却返回 null,导致了许多 crash。这会影响到一些 CI 系统在 0.11.x 版本下的构建(0.12还没有任何发布版)。

IE8以下 form 表单的 submit 事件、checkbox/radio 的 change 都不会冒泡到 document 中,jQuery 对它们进行了修复,使得在这些 DOM 元素的父节点上 delegate 这些事件得以实现。

submit

模拟 submit 事件冒泡的一个前提是表单由点击提交按钮或在输入框中敲击回车触发,这两个事件都是可以冒泡的,因此可以在监听到有表单输入元素(input、button)的clickkeypress时向包含这些元素的 form 表单元素注册一个 submit 事件,而 submit 事件一定是在 click 事件处理过后再触发的,因此不必担心错过时机。

change

radio、checkbox的 change 事件除了不能不能冒泡外,其在自身也有问题:失去焦点后才会触发,而不是选中状态变化后立即触发。所以这里的 fix 要分为两步。

IE 中存在 propertychange 这样一个事件,可以监听所有属性的变化,那么就以此代替 change 事件,只要处理event.propertyName === ‘checked’ 即可。这样,选中状态变化后不能立即触发 change 的问题得到了解决。

radio、checkbox的选中状态在变化前,在IE中会触发一个叫 beforeactivate 的事件,那么跟 submit 一样的原理,以此来解决 change 事件不能冒泡的问题。

focusin focusout mouseenter mouseleave

这4个事件是 jQuery 模拟的,支持冒泡。

顺便提一下当调用 jQuery.on 时发生了什么,jQuery 首先要判断应不应该在指定DOM 元素上绑定,一般都应该直接绑,不过像上面提到的 submitchange就不能直接绑,可能需要在子孙元素上绑定,也可能绑定其它替代事件。而像 focusinfocusout 这样模拟的事件就需要编程去实现冒泡了。

当调用 jQuery.trigger 时,jQuery 内部会尝试在 DOM 元素上调用与事件同名的方法,而不是用事件 API 去构造一个 event 对象。

参考

经常在 github 上看到很多 repo 的 readme 都会展示类似Bagde Demo这样的东西。它们的学名叫徽标(Badge),大多是使用 markdown 的图片语法嵌入的 svg,可以自动显示当前 repo 的各种状态。下面介绍几种提供徽标的服务。

NPM version

显示该repo发布在 NPM 上的版本,链接 http://img.shields.io/npm/v/{repo}.svg,如 NPM Version

NPM Download

显示在 NPM 上的阶段下载数,链接 http://img.shields.io/npm/dm/{repo}.svg,如 NPM Download

gratipay

需要登录,用于发起捐助。链接 http://img.shields.io/gittip/{user}.svg,如 Git tip

travis

需要登录并指定 repo ,用于自动显示构建状态。链接 http://img.shields.io/travis/{user}/{repo}.svg,如 Travis

coveralls

需要登录并指定 repo ,配合测试框架显示覆盖度。链接 http://img.shields.io/coveralls/{user}/{repo}/master.svg,如 Coveralls

appveyor

需要登录并指定 repo ,用于在 Windows 环境进行构建。链接 https://ci.appveyor.com/api/projects/status/{repo-id}?svg=true,如 Appveyor

codeship

类似于 travis ,同样用于自动构建,点此登录,如Build Status


其实这些服务大多都使用了同一种徽标生成服务:http://shields.io/。可以随意创建自己的徽标:yanni4night.com

http://yanni4night.github.io/badge.html 可快速生成所需徽标。

基于less 2.0 与 sass 3.5.7的官方文档对两者的功能和语法进行一些简单的比较.

Variable

两者都支持向_选择器名_、_属性名_、_属性值_和_字符串_中注入变量,并都支持数值变量的计算:

//sass
$left: left;
$variable: variable;
$num3px: 3px;
$num5: 5;

.#{$variable}{
    margin-#{$left}: $num3px + $num5;
    float: $left;
    content: "#{$variable}";
}
//less
@left:left;
@variable:variable;
@num3px: 3px;
@num5: 5;

.@{variable}{
    margin-@{left}: @num3px + @num5;
    float: @left;
    content: "@{variable}";
}

但只有sass支持字符串的连接:

$hel:"hel";
$lo:"lo";
$hello: $hel + $lp;

在sass中,变量更复杂的类型的,同时提供了如 !default!global 标记。

@import

两者的 @import 指令都默认引入同类型的.less/.scss 文件,同时也支持嵌套:

.mark{
    @import "item";
}

都输出:

.mark .item{}

如果要被引入的是一个 css 文件,sass 不执行任何操作,less 可以根据指令执行多种操作,例如,可以将 css 当做 less 处理:

@import (less) "common.css";

或者直接引入不执行任何处理操作:

@import (inline) "common.css";
@media

两者都支持媒体查询选择器提升:

.wrap{
    @media screen{
        .item{
            color: red;
        }
    }
}

输出:

@media screen {
    .wrap .item {
        color: red;
    }
}
Extend

两者都支持extend:

//less
.wrap{
    &:extend(.on);
}
.on{font-size:10px;}

//sass
.wrap{
    @extend .on;
}
.on{font-size:10px;}

输出:

.wrap .on{font-size:10px;}

sass 实现了 !optional 标记用以屏蔽错误。

Mixins

两者都支持mixin:

//less
.fork(){font-size:20px;}
.banner{
    .fork;
}

//sass
@mixin fork(){font-size:20px;}
.banner{
    @include fork;
}

对于 sass,必须使用 @mixin 指令定义一个 mixin,个人感觉 less 更方便一些,直接写入选择器名,也不需要 @include 指令,特别是 mixin 本身去掉圆括号之后也可以作为一个合法的css选择器。

判断

都支持判断:

//less
@tick:1;
& when(@tick<5){
    .tick{
        & when(@tick<5){
            color:red;
        }
        font-size: 10px;
    }
}

//sass
$tick:1;
@if $tick < 5{
    .tick {
        @if $tick < 5{
            color:red;
        }
        font-size: 10px;
    }
}
循环

less 仰赖判断实现循环:

//less
.loop(@counter) when (@counter > 0) {
    .loop((@counter - 1));
    .item-@{counter}{
        left: (10px * @counter);
    }
}

.loop(5);

sass 实现了 @for 指令:

//sass
@for $counter from 1 through 5{
    .item-#{$counter}{
        left: #{$counter * 10px};
    }
}

除此之外,sass 还实现了功能强大的 @each@while 指令,这是 less 做不到的。

总结

less 与 sass 在常规功能上不相上下,less 可能稍稍略逊一点,不过书写上要相对简洁。一些 sass 的实现比如 @at-root 个人认为用处不大,使用反倒增加了阅读代码的难度。从环境部署上看,sass 需要 ruby 环境,而 less 基于 js,相对更容易在多种环境中使用。

CSS 预处理器的使用要以简化书写 CSS 和清晰展示选择符层次为重,从这点上来讲,并不需要太复杂的功能,我比较倾向于使用 less。

常见到一些代码或笔试题会出现针对旧浏览器(主要是IE6/7/8)的 getElementsByClassName 方法的 polyfill,我在面试一些初学者时也常常问起,不过回答差不多者寥寥。其实想完整的实现与原生相同的功能基本不可能,原因之一即是不管该方法返回的是 HTMLCollection 还是 NodeList,它们都必须是 alive 的,意即针对 DOM 树的任何改动都会实时反应到其中。因此,非瞬时地缓存集合的长度是危险的。同时由于不能构造一个 HTMLCollectionNodeList ,我们一般会以数组代之,因此集合是不可变的。

所有 getElements* 方法返回的集合都是 live 的,只有 querySelector 返回的 static 的。测试参见这里;

引用

CSS3 对 text-decoration 进行了扩展,新的语法为:

text-decoration: text-decoration-style text-decoration-color text-decoration-line;

目前只有 blink 内核对其进行了支持,但很不完善,或者说是一个bug。描述为:无法设置新的格式,但是却可以获取。例如:

<p id="p" style="text-decoration:underline"></p>
<script>
    var $p = document.querySelector('#p');
    console.log($p.style.textDecoration);//underline solid rgba(0,0,0)
    $p.style.textDecoration = "overline solid dashed #fff";
    console.log($p.style.textDecoration);//underline solid rgba(0,0,0)
</script>

该问题从Chrome 31开始出现,我提了 bug 给 chromium ,在后来的Chrome 37 中修复了一部分,不再返回 text-decoration-colortext-decoration-line,同时仍然无法设置。

这个 bug ,jQuery 拒绝修复,理由是 1.x 与 2.x 都仅保证支持 Chrome 的最近两个版本,同时这也不是个严重的问题,当前,Chrome 39 已经发布了。

昨天 GitHub 上捷克共和国一哥们提出几个 issues,讲我的某个石器时代土著插件不支持 Sublime Text Command 并且 Context Menu 缺失。其实这两个功能入口仅需要编辑两个配置文件就可以了,但前提是命令数量是有限的,这样才可以直接写死配置文件。

只是这个插件提供的主要功能即是无限扩展命令完成各种插入操作,默认提供了4种常见插入,此外可以无限配置插入种类,如果全部都要配置快捷键,确实不合理。

Sublime 插件配置文件分为几种:

  • sublime-menu,右键菜单和主菜单
  • sublime-commands,文本命令
  • sublime-keymap,快捷键定义
  • sublime-settings,插件主要配置文件

前三种格式全为数组,最后一个为对象,也只有最后一个 Sublime 单独提供了 API 供读写:

sublime.load_settings()
sublime.save_settings()

一般地,我们只需要读取就行了。

Text CommandContext Menu 需要修改 menucommands 配置文件,因为它们是数组格式,不能通过上面的 API 读写,所以不得不使用 python 的原生API进行写入操作。在每次插件加载时,动态更新这两个文件,编辑器本身也能立即得到通知。

settings 配置文件被修改时理应重新进行一次上面的操作,但是 Sublime API 的 Settings.add_on_change 似乎不怎么起作用,因此不得不强制要求编辑器重启来刷新设置。

引用

下面是从http://justineo.github.io/slideshows/semantic-html摘录的关于大部分 HTML 标签语义化含义的内容,可简要理解各种标签的含义。

全局属性

id

标示符 (用于引用),不应依赖其语义处理相应元素

class

authors are encouraged to use values that describe the nature of the content

title
  • 链接 - 描述目标信息
  • 图片 - 版权 / 描述
  • 引用 - 来源信息
  • 交互元素 - 操作指南
lang

内容的语言

元数据 (metadata)

meta
  • 元数据
  • name 属性决定种类,content 属性表示内容
  • 标准元数据名 (application-name author description generator keywords)
  • 已注册的扩展元数据名 (WHATWG Wiki MetaExtensions)
链接(links)
链接类型
  • 外部资源链接
    指向用来组成当前文档的外部资源,通常由 UA 自动处理
  • 超链接
    用来「导航」到其他资源 (可以在 UA 中打开 下载 …)
  • 元数据,用来描述文档本身与其他资源的关系

  • 必须包含 rel 及 href 属性

link + rel + author link + rel + license 都有预定义的语义

  • rel=”stylesheet” 链接到样式表 (外部资源)

  • rel=”alternate” 链接到当前文档的其他形式 (超链接)

  • rel=”prev” rel=”next” 链接到文档的前一篇 / 后一篇 / 前一页 / 后一页 (超链接) 在生成站点目录、归档视图时很有帮助。

  • rel=”icon” 当前文档的 favicon (外部资源)

a元素
  • 存在 href 属性时为超链接

  • 缺少 href 属性时为链接占位符

与 link 元素不同,a 元素代表的超链接都是显式的。

a + rel
  • rel=”prev” rel=”next” 链接到文档的前一篇 / 后一篇 / 前一页 / 后一页 (超链接)
  • rel=”nofollow”

当前文档的作者并不推荐超链接指向的文档 (超链接标注)
由 Google 引入,他们认为适用场景有 (via):

  1. 不可信赖的内容
  2. 付费链接
  3. 按优先级别进行抓取 (比如通知 Googlebot 不要抓取「注册」或「登陆」页面)
rel 属性

其他在 HTML 规范中预定义的 rel 属性值及其含义参见 HTML5 草案中 Link types 一节

区块 (sections)

section 元素
  • 按主题将内容分组,通常会有标题 (heading)
  • 并非「语义化的 div」

何时使用?

一个简单的评判标准:当你希望这个元素的内容体现在文档的_提纲 (outline)_ 中时,用 section 是合适的。

可以帮助 UA 迅速获得导航内容,例如读屏器可以省去很多渲染直接跳到导航位置。

不一定要包含 ul,也可用自然文本进行导航。

article 元素
  • 独立的文档、页面、应用、站点
  • 可以单独发布、重用
  • 可以是…
  • 一篇帖子
  • 一篇报刊文章
  • 一则用户评论
  • 一个可交互的 widget
aside 元素
  • 表示与周围内容关系不太密切的内容 (eg. 广告)
  • 通常表现为侧边栏内容 (eg. 相关背景内容)、引述内容
h1–h6 元素
<body>
    <h1>Let's call it a draw(ing surface)</h1>
    <h2>Diving in</h2>
    <h2>Simple shapes</h2>
</body>

语义上等价于:

<body>
  <h1>Let's call it a draw(ing surface)</h1>
  <section>
    <h1>Diving in</h1>
  </section>
  <section>
    <h1>Simple shapes</h1>
  </section>
</body>
hgroup 元素
  • 标题的组合

  • 用于副标题、标语 (tagline) 等

    The Lord of the Rings

    The Return of the King

    The Lord of the Rings

    "One ring to rule them all."

hgroup 中级别最高的标题才出现在提纲中

header 元素
  • 一组介绍性描述或导航信息 (目录 / 搜索框 / logo / …)

  • 通常包含 h1–h6 hgroup

  • 不影响文档提纲的生成

    Welcome to...

    Voidwars!

  • 代表最近的父级区块内容的页脚

  • 作者信息 / 相关文档 / 版权信息

  • 不影响文档提纲的生成

address 元素

代表与最近的父级 article 或 body 关联的联系人信息

<address>
  <a href="../People/Raggett/">Dave Raggett</a> 
  <a href="../People/Arnaud/">Arnaud Le Hors</a> 
  contact persons for the <a href="Activity">W3C HTML Activity</a>
</address>

分组内容 (grouping content)

p 元素
  • 「段落」的显式表述
    段落是主题接近的若干句子组成的文本块 (via)
    -非优先考虑的选择
    例如 address 的内容也是一个段落,但有更准确的语义
hr 元素
  • 原意为「horizontal rule」(水平分隔线)
  • HTML5 中重定义为不同主题内容间的分隔符
  • 区块内容之间不需要用 hr 元素分隔
pre 元素
  • 表示已排版的内容
  • 代码片段 / ASCII art / …
blockquote 元素
  • 引用的来自其他来源的内容

  • cite 属性表示该来源的 URL

  • 署名必须放在 blockquote 外

    His next piece was the aptly named Sonnet 130:

    My mistress' eyes are nothing like the sun
    Coral is far more red than her lips red
    [...]

ol ul li 元素
  • 有序 / 无序列表

  • 改变列表项顺序是否影响表达

  • ol 下 li 元素的 value 属性代表该列表项的序号值

    Relegation zone:

    1. Bolton Wanderers
    2. Blackburn Rovers
    3. Wolverhampton Wanderers
dl dt dd 元素
  • 名值对的集合

  • 术语定义表 / 元数据 / FAQ / …

    happiness
    n.
    The state of being happy.
    Good fortune; success. Oh happiness! It worked!
    rejoice
    v.intr. To be delighted oneself .
    v.tr. To cause one to be delighted.
figure 元素
  • 比较独立的、被主要内容引用的部分
  • 插画 / 图表 / 照片 / 代码 / …
  • 通常会有一个标题 (figcaption)
figcaption 元素
  • 图表标题 / 图例 / 代码说明 / …
div 元素
  • 本身无语义
  • 可以和 class lang title 等属性结合,为一系列连续的内容增加语义
  • 最后考虑的选择

文本级语义 (text-level semantics)

em 元素
  • 表示侧重点的强调

  • 强调级别由 em 的嵌套个数决定

  • em 的位置不同,文本本身含义不同

  • 在可视化 UA 上一般渲染为斜体

    Bats can fly.

    Bats can fly.

    Bats can fly.

三句含义各不相同

strong 元素
  • 表示内容的重要性

  • 重要程度由 strong 的嵌套个数决定

  • strong 的位置不同,文本本身含义不变

  • 在可视化 UA 上一般渲染为粗体

    Warning. A huge wave of zombies is approaching.

i 元素
  • 不再只是「斜体」

  • 表示另一种叙述方式

  • 分类学名词 / 外来语片段 / 舞台指示 / 船名 / …

  • 建议与 class / lang 属性搭配使用

    Sunflower (Helianthus annuus) is an annual plant native to the Americas.

    There is a certain je ne sais quoi in the air.

    Titanic sank in the North Atlantic Ocean on 15 April 1912.

b 元素
  • 不再只是「粗体」

  • 表示某种需要引起注意却又没有其他额外语义的内容

  • 摘要中的关键词 / 评介中的产品名称 / 文章的开篇内容 …

  • 建议与 class 属性搭配使用

    Kittens 'adopted' by pet rabbit

    Six abandoned kittens have found an unexpected new mother figure — a pet rabbit.

    Veterinary nurse Melanie Humble took the three-week-old kittens to her Aberdeen home.

    [...]
small 元素
s 元素
  • 不再只是「带删除线的文字」

  • 表示不再准确或不再相关的内容

  • 与 del 元素含义不同

    Buy our Iced Tea and Lemonade!

    Recommended retail price: $3.99 per bottle

    Now selling for just $2.99 a bottle!

u 元素
  • 不再只是「带下划线的文字」

  • 表示用非文本进行的标注的内容

  • 中文专名 / 拼写检查的错误内容 / …

    屈原放逐,乃賦離騒左丘失明,厥有國語。(司馬遷《報任安書》)

cite 元素
  • 引述的作品标题

  • 书 / 论文 / 散文 / 电影 / 歌曲 / 电视节目 / 画作 / …

    My favorite movie is Transformers by Michael Bay.

q 元素
  • 引用的来自其他来源的段内内容

  • cite 属性表示该来源的 URL

  • 不用 q 而用引号亦正确

    The W3C page About W3C says the W3C's mission is To lead the World Wide Web to its full potential by developing protocols and guidelines that ensure long-term growth for the Web.

abbr 元素
  • abbreviation or acronym (区别?)

  • 其 title 属性的含义为所写的全称

    The WHATWG started working on HTML5 in 2004.

建议在用户不熟悉的缩写词汇第一次出现时用 abbr + title 进行语义标注,帮助其理解

dfn 元素
  • 用来展现一个术语的定义实例

  • 最接近的父级段落、定义列表组或区块内容必须包含 dfn 元素指定术语的定义

    The GDO is a device that allows off-world teams to open the iris.

很容易抽取出特定术语的含义,从而很容易回答「What is …?」类的问题

time 元素
  • 为表述的内容增加一个机器可读的时间数据

  • datetime 属性值必须是预定义的几种时间格式之一

  • 如果不含 datetime 属性,则会解析其文本内容值

    http://www.web2con.com/ Web 2.0 Conference: - at the Argent Hotel San Francisco CA
code samp kbd 元素
  • code - 代码片段
  • samp - 计算机程序的输出
  • kbd - 用户输入的内容 / 按键
mark 元素
  • 在引用的文字中使用,表示在当前文档中需要引起注意但原文中并没有强调的含义 (eg. 对一篇文章的分析中对原文的标注)

  • 表示与用户当前的行为相关的内容 (eg. 高亮显示搜索关键词)

    6月13日下午,一场大雨过后,正阳门箭楼被带着水雾的脚手架包裹得严严实 实。北京旧城中轴线上的这座标志性建筑,正经历着新中国成立后规模最大的一次修缮。

    [...]

    6月13日的那场大雨,将故宫端门外西朝房冲洗得干干净净。

    作者为什么两次提到6月13日的大雨?请谈谈你的看法。

ruby rt rp 元素
  • 注音标示,「ruby」来自日本印刷业

  • 主要于 CJK 文字

    ()(xié)(shè)(huì)

span 元素
  • 本身无语义

  • 可以和 class lang 等属性结合,为文本片段增加语义

  • 有更合适的元素时不应选择 span

    var greet = function() {
    console.log(“Hello world.”);
    }

更改记录 (edits)

ins del 元素
  • 表示对当前文档内容进行的增添与删改
  • cite 属性指向对某个修改的说明文档的 URL
  • datetime 属性表示了修改发生的时间 (取值规范)
  • 用来记录文档的编辑历史

嵌入内容 (embedded content)

img 元素
  • src alt 属性决定了图片的含义
  • 有 src 且 alt 为空字符串,代表装饰用图
  • 有 src 且 alt 为非空字符串,图为文档内容的一部分
  • 有 src 且无 alt,图为内容一部分但无等价的文本内容可用
  • 用 alt 文本替换图片,文档含义尽可能不变

    You are standing in an open field west of a house. A white houseThe house is white  with a boarded front door.    There is a small mailbox here.

iframe embed object param 元素
  • iframe - 内嵌的浏览上下文

  • embed - 外部应用或可交互内容的整合入口

  • object - 通用外部资源 根据具体内容可以被处理为图片、内嵌的浏览上下文、供插件调用的资源

  • param - 为 object 元素传递的参数


相当于 imgiframe 的效果

<embed src="catgame.swf" type="application/x-shockwave-flash" quality="high">

<object data="catgame.swf" type="application/x-shockwave-flash"> 
  <param name="quality" value="high">
  <p>Plugin needed.</p>
</object>

功能等价但 object 提供更好的回退策略

多媒体元素
  • video - 视频
  • audio - 音频

公共属性:src crossorigin preload autoplay mediagroup loop muted controls

source 元素
  • 表示所在多媒体元素的可替代资源 (可能不同格式 / 清晰度,读取失败或无法解码时可以依次尝试)

  • type 属性中除了 MIME 类型外,可使用 codecs= 来指定编码

track 元素
  • 用来为多媒体元素指定「文本轨」

  • kind 属性描述文本轨的类型,可用值包括 subtitles captions descriptions chapters metadata

表格数据 (tabular data)

table 元素
  • 用来表示超过一维的数据
caption 元素
  • 表示所处的 table 的标题

当所处的 table 是外部 figure 元素的唯一子元素,应首选 figcaption

tbody thead tfoot 元素
  • 均为一组表格行
  • thead 表示列头 (通常为列标题,单元格用 th 元素)
  • tfoot 表示列脚 (通常为列数据汇总)
col colgroup tr 元素
  • 列,列组,行
td th 元素
  • td - 数据单元格
  • th - 标题单元格

th 的 scope 属性表示标题对应的数据范围

类似于 Java 语言中将异常(Exception)分为 CheckedExceptionRuntimeException一样,ECMA262 定义 Error 分为“早期错误(early error)”与“运行时错误(runtime error)”。

“早期错误”意即能够在程序进行任意构造求值操作之前检测到并报出的错误,包含下面几类:

  1. 语法错误;
  2. 对同一个属性定义多个 setter 或多个 getter;
  3. 对同一个属性同时定义 value 和 setter/getter;
  4. 正则表达式语法错误;
  5. 严格模式中有 重复的属性赋值;
  6. 严格模式中使用 wi th 关键字;
  7. 独立严格模式下的 函数定义中具有重复的参数定义;
  8. returnbreakcontinue 的不合适使用;
  9. 向非引用赋值

除了这些错误以外都属于运行时错误,不同的错误类型将会对程序带来一定的影响,例如:

<script>var i =0  j = 0;</script>
<script>
    ++i;
    syntax error
</script>
<script>
    ++j;
    throw new Error('runtime error');
</script>
<script>
    console.log(i + '/' + j);//0/1
</script>

内建的 Error 包含下面几种类型:

  • EvalError
  • InternalError
  • RangeError
  • ReferenceError
  • SyntaxError
  • TypeError
  • URIError
参考
0%