W3C HTML5标准阅读笔记 - button

标准原文: https://www.w3.org/TR/html5/forms.html#the-button-element HTML5中,button元素用于定义“按钮”,其内容模型("Content Model")为Phrasing content,且其子级元素中不能再出现别的交互性元素。 除了通用属性,button标签还包含一些有趣的特有属性:type、autofocus和disabled等。 type type属性用于定义button元素的类型,其属性值决定了button元素点击后的默认行为。type属性可使用的值包括: submit。提交按钮,默认值。当button标签位于一个form表单内部时,

  • Chuan Shao
    Chuan Shao
2 min read

用Browserify构建antd-mobile应用

antd-mobile是蚂蚁金服出的移动端设计指南和前端框架,它提供了一套基于React的移动端组件库,可以很方便地用来开发体验良好的移动应用。 使用antd-mobile遇到的问题:react-native模块找不到 在阅读了antd-mobile的介绍说明后,使用这一组件库似乎很简单,要做的只是安装和引入组件而已: 安装 $ npm install antd-mobile --save 引入组件 import { Button } from 'antd-mobile/lib/button'; ReactDOM.render(<Button>按钮</Button>, mountNode); antd-mobile的介绍说明中推荐使用babel-plugin-import插件来按需加载类库,但为了减少初期使用antd-mobile所面临的复杂度,以上代码采用了最简单的组件引入写法(

  • Chuan Shao
    Chuan Shao
5 min read
JavaScript

关于Error.captureStackTrace

在一些Node.js程序中,有时会看到Error.captureStackTrace()这一语句,用于处理堆栈信息。该语句的标准定义是什么?如何使用?本文将就这些问题做一些探讨。 标准定义 从字面上来看,captureStackTrace应该是Error构造函数自身的一个方法。因此,很自然的想到从ECMAScript标准文档中寻找答案。不幸的是,在标准文档的19.5 Error Objects章节中,并未提及任何有关captureStackTrace的内容。看来,这一语句和语言的运行环境有关,并非由JavaScript标准所定义。 既然JavaScript语言标准中没有定义captureStackTrace,那就只能从Node.js的文档中去寻找答案了。Node.js中,关于Error.captureStackTrace的描述是这样的: Error.captureStackTrace(targetObject[

  • Chuan Shao
    Chuan Shao
4 min read

W3C HTML5标准阅读笔记 - input

标准原文:https://www.w3.org/TR/html5/forms.html#the-input-element HTML5中,input标签用于表示表单输入控件,使用时通过其type属性值来确定具体控件的类型。input标签无需闭合。 属性 除了通用属性,input标签还拥有一系列特有属性: type。定义控件的类型。 accept。对于文件上传控件(type=file),定义可以接受的文件类型。 alt。对于图片按钮(type=image),当图片不可用时的替代显示文字。 autocomplete。是否支持自动补全。 autofocus。页面加载后使控件获得焦点。

  • Chuan Shao
    Chuan Shao
5 min read

W3C HTML5标准阅读笔记 - form、label

标准原文:https://www.w3.org/TR/html5/forms.html#the-form-element HTML5中,form标签用于制作表单,而label标签则用于给表单中的控件添加标题。 form form标签用于制作页面上的表单控件,其内部不能再包含别的form子元素。除了通用属性,form标签还拥有以下特有属性: accept-charset。提交表单时的字符编码。 action。表单提交的地址。 autocomplete。是否启用自动补全机制,其可选值有两个:on和off,当autocomplete属性不存在时,默认为on。很奇怪为什么此处标准不把autocomplete属性定义为boolean属性,那样的话使用起来会更加方便。 enctype。数据的编码类型,如application/

  • Chuan Shao
    Chuan Shao
4 min read

W3C HTML5标准阅读笔记 - map、area

标准原文:https://www.w3.org/TR/html5/embedded-content-0.html#the-map-element HTML5中,area元素用于定义“区域”;而map元素则用于和img、area元素一起,定义图像地图(image map)。 map map元素用于定义图像地图,其内容模型(Content Model)为透明(transparent)。除了通用属性,map元素还拥有一个必须定义的name属性,且其值不能包含空字符串。当其它元素需要使用图像地图时,可将自己的usemap属性设置为此map元素的name值,从而对map对象进行引用。 在同一个文档中,多个map元素的name值不能发生冲突(

  • Chuan Shao
    Chuan Shao
3 min read

W3C HTML5标准阅读笔记 - 多媒体元素

标准原文:https://www.w3.org/TR/html5/embedded-content-0.html#media-elements HTML5中,video元素与audio元素统称多媒体元素(media elements),由于多媒体元素(以下简称media元素)在功能上比其它普通的页面元素要复杂,因此在DOM中media元素的属性也相对来说更加丰富。 error media元素拥有一个名为error的属性。当一切正常时,error属性值为null;当发生错误时,error属性值为一个MediaError对象,该MediaError对象的code属性值表示具体的错误原因。 currentSrc media元素的currentSrc属性意指当前播放的多媒体源文件地址,具体对应video/audio标签的src值,或其内部当前播放的source元素的src值。 canPlayType(type) media元素的canPlayType(

  • Chuan Shao
    Chuan Shao
4 min read

W3C HTML5标准阅读笔记 - source、track

标准原文:https://www.w3.org/TR/html5/embedded-content-0.html#the-source-element HTML5中,source标签用于定义音视频的来源,而track标签则用于为多媒体文件定义字幕等外部辅助文本。 source source标签用于定义音频、视频的源文件,使用时作为video/audio的子标签来发挥作用。与video/audio的src属性相比,使用source标签有一个好处:可以对同一个video/audio定义多个多媒体源。这样,当第一个多媒体源文件不可用时,浏览器会试图使用第二个多媒体源,并依此类推。 除了通用属性,source标签还拥有2个特有属性: src。用于定义源文件的URL地址。 type。用于定义源文件的MIME

  • Chuan Shao
    Chuan Shao
2 min read

W3C HTML5标准阅读笔记 - video、audio

标准原文:https://www.w3.org/TR/html5/embedded-content-0.html#the-video-element HTML5中,video标签用于在网页中嵌入视频,而audio标签则用于在网页中嵌入音频。由于这两个标签是在HTML5标准中新加入的,因此在IE8等老的浏览器中并无支持;为了给老浏览器提供video/audio标签的备选方案,可以有以下两种做法: 在video/audio标签内部添加文本内容,提示用户更换浏览器后访问 -- 在不支持video/audio标签的浏览器中,这段文本内容会被显示出来;而在支持video/audio标签的浏览器中,这段文本内容则不会进行显示。 判断当前浏览器是否支持video/audio,如果不支持,则使用flash player等插件来实现音视频播放功能。

  • Chuan Shao
    Chuan Shao
3 min read

W3C HTML5标准阅读笔记 - iframe元素

标准原文:https://www.w3.org/TR/html5/embedded-content-0.html#the-iframe-element HTML5中,iframe标签用于在当前页面中内嵌别的网页。按照标准的叙述,iframe会提供一个“内嵌浏览环境(nested browsing context)”。iframe中的“i”一般解释为“inline”,也即内联元素 -- iframe标签默认和其外部的文本内容一起位于同一行中显示。 不过,与早期web开发中的frame和frameset元素相比,个人认为iframe中的“i”还有一层“independent”的意思 --

  • Chuan Shao
    Chuan Shao
4 min read

W3C HTML5标准阅读笔记 - img元素

标准原文:https://www.w3.org/TR/html5/embedded-content-0.html#the-img-element HTML5中,img标签用于在文档中插入图片元素,并默认呈现inline效果 -- 插入的图片与img标签前后的文本显示在同一行。对于img元素的内容模型(content model),标准规定其必须为空,也即img标签内不允许出现任何子标签,也不允许出现任何文本内容。 除了通用属性,img标签还包含一些特有属性:src、alt、crossorigin、usemap、ismap、width和height等。 src 所有的img标签都必须拥有src属性,其值为非空URL,用以定义原始图片的地址。

  • Chuan Shao
    Chuan Shao
4 min read

W3C HTML5标准阅读笔记 - ins、del

标准原文:https://www.w3.org/TR/html5/edits.html HTML5中,ins与del标签可用于显示文档的修订信息,其中ins标签用于显示文档中添加的内容,而del标签则用于显示文档中删除的内容。在Chrome浏览器中,ins标签内的文本会呈现添加下划线的效果;而对于del标签,浏览器会在其文本正中间添加一条水平划线 -- 显示效果与s标签相同。 除了通用属性,这两个标签还拥有2个特有属性: cite。用于定义当前修订的详情链接。与q标签和blockquote标签的cite属性一样,该cite属性的主要目的并不是给页面浏览者增加浏览体验,而是增加语义从而给文档处理者(搜索引擎、后端处理脚本等)增加便利。 datetime。用于定义当前修订操作所发生的时间。 对于列表(ol、

  • Chuan Shao
    Chuan Shao
2 min read

W3C HTML5标准阅读笔记 - sup、sub、i、b、mark、ruby、wbr

标准原文:https://www.w3.org/TR/html5/text-level-semantics.html#the-sub-and-sup-elements HTML5中,sup与sub标签被用于标记内容的上下标,i标签与b标签用于标记有一定“特殊性”,需要引起用户注意的内容,而mark标签则用于内容高亮。有两种标签平时比较少见 -- ruby标签用于标记有标注的内容,而wbr标签则用于对文本换行进行建议。 sup、sub sup标签用于标记文本上标(如数学公式中的平方符号X2),sub标签则用于标记文本下标(如数学公式中的变量下标Ix)。可见,sup标签和sub标签在处理、显示数学公式的时候是非常有用的。 i 在HTML4中,i标签作为纯粹的样式标签,用于将某块内容显示为斜体效果;

  • Chuan Shao
    Chuan Shao
4 min read

W3C HTML5标准阅读笔记 - code、var、samp、kbd

标准原文:https://www.w3.org/TR/html5/text-level-semantics.html#the-code-element HTML5中,有4个标签与“代码”、“程序”有关:code、var、samp、kbd。 code 顾名思义,code标签用于标记计算机程序代码,一般仅包含小的代码片段或关键词。 在Chrome浏览器中,code标签中的内容会使用等宽字体来进行显示,从而区别于其它文本。 var var标签用于标记“变量”内容,比如: <p&

  • Chuan Shao
    Chuan Shao
2 min read

W3C HTML5标准阅读笔记 - data、time

标准原文:https://www.w3.org/TR/html5/text-level-semantics.html#the-data-element HTML5中,有2个标签可用于既存储用户友好、便于阅读的文本,又存储机器友好、便于处理的数据 -- data标签和time标签。其中,data标签用于存储通用信息,而time标签则专门用来存储日期时间有关的信息。 data data标签用于存储通用的信息。其标签内的文本内容用于供用户阅读,而标签的特有属性value则用于存储机器友好、便于程序处理的数据 -- 比如,可以用JavaScript脚本获得data元素后再对该元素的value值进行操作。由于data标签的这种语义,HTML5标准规定data的特有属性value是必须出现的。 在Chrome浏览器中,data标签不呈现任何特殊显示效果。 time

  • Chuan Shao
    Chuan Shao
2 min read

W3C HTML5标准阅读笔记 - cite、q、dfn、abbr

标准原文:https://www.w3.org/TR/html5/text-level-semantics.html#the-cite-element HTML5中,cite和q标签用于标记对作品和文句的引用,而dfn和abbr标签则用于标记名词定义及缩写。 cite cite标签用来表示对别的“创意性”作品的引用。所谓“创意性”作品,一般即指书籍、文章、评论等。cite中必须包含作品的名称或者作者,而一般不包含作品的具体内容。 在Chrome浏览器中,cite显示为斜体效果。 q 与cite标签不同,q标签用于表示具体引用的文句内容(quote)。在语义上,q标签与blockquote标签相似,

  • Chuan Shao
    Chuan Shao
4 min read

W3C HTML5标准阅读笔记 - em、strong、small、s

标准原文:https://www.w3.org/TR/html5/text-level-semantics.html#the-em-element HTML5中,有4个标签可用于标注文本内容,在语义上强调其重要性,或者注明其次要性:em、strong、small和s。对于这4个标签,浏览器在显示时会给其加上相应的样式;但作为开发人员,应当主要从语义角度来对其进行使用。 em em标签可对某块文本内容进行强调,一般用于对阐述性文本中的部分字词进行着重。在使用em标签时,em标签可以自我嵌套,而某块文本内容的“强调程度”则取决于它的父节点、祖父节点...中em标签出现的次数。 在Chrome中,em标签呈现为斜体效果。

  • Chuan Shao
    Chuan Shao
2 min read

W3C HTML5标准阅读笔记 – a元素

标准原文:http://www.w3.org/TR/html5/text-level-semantics.html#the-a-element HTML中,a元素用于给页面上的内容添加超链接效果;其内容模型(Content Model)为Transparent,也即a元素内部子元素的合法性由该a元素的父元素所决定;除了这一内容模型的限制,a元素内部还不允许出现任何按钮或者超链接等交互元素 -- 这一点比较好理解,如果a元素内部出现交互元素的话,浏览器的用户交互处理将出现混乱。 因此,a元素内部可以出现段落、列表、表格等较复杂的组件,只要这些组件内没有按钮或超链接等交互元素即可;在这种情况下,浏览器将给整个复杂组件添加超链接效果。 除了通用的全局属性,a元素还可以拥有以下特有属性: href。

  • Chuan Shao
    Chuan Shao
2 min read

W3C HTML5标准阅读笔记 – figure、figcaption

标准原文:http://www.w3.org/TR/html5/grouping-content.html#the-figure-element 图表元素figure用于展示插图、图表、照片、代码示例等,浏览器会将figure元素作为普通的div块级元素来进行处理,并给其四周添加外边距。在figure元素内可以嵌套放置子figure元素 -- 比如,对于一个图片列表,整个图片列表可以是一个父级的figure元素,而单独的每个图片及其标题则是子的figure元素。 figure元素内部可以包含任何的Flow元素内容,在这些Flow元素内容的最前面或者最后面可以插入一个figcaption元素用于表示这个图表的标题。也即,figure标签的第一个子标签或者最后一个子标签可以是figcaption标签。 对于figcaption标签,浏览器会将其作为普通的div块级元素来进行处理,在其内部可以放置任何的Flow元素内容。

  • Chuan Shao
    Chuan Shao
1 min read

W3C HTML5标准阅读笔记 – dl、dt、dd

标准原文:http://www.w3.org/TR/html5/grouping-content.html#the-dl-element 在HTML中,"描述列表"元素dl、dt、dd可用于以键值对的方式来展示名词解释列表、问答列表等内容。在HTML4中,推荐使用dl、dt和dd标签来实现对话记录,但出于语义考虑,HTML5标准不建议这么做。关于对话记录,HTML5标准建议使用p标签来实现。 它们的语义为: dl (description list)。容器,用于包含描述列表。浏览器会把dl标签作为普通的div块级元素来进行处理渲染,并给它的上下方添加外边距。

  • Chuan Shao
    Chuan Shao
2 min read

W3C HTML5标准阅读笔记 – ol、ul、li

标准原文:http://www.w3.org/TR/html5/grouping-content.html#the-ol-element 列表元素ol、ul和列表内的项目元素li在HTML早期就已出现,并被Web开发人员所大量使用。这三个元素的语义为: ol (ordered list)。有序列表,包含一系列有顺序的子项目(li元素)。 ul (unordered list)。无序列表,包含一系列没有顺序的子项目(li元素)。 li (list item)。列表内的项目元素,只能在ol或者ul元素内使用。 除了li元素,ol和ul元素内部也可以包含脚本元素script或者template。

  • Chuan Shao
    Chuan Shao
4 min read

W3C HTML5标准阅读笔记 – p、hr、pre、blockquote

标准原文:http://www.w3.org/TR/html5/grouping-content.html#the-p-element p 在HTML中,p元素用于表示段落;而对于p元素的子元素,HTML5标准规定,p元素内只能出现Phrasing元素 -- 所以,列表元素ol和ul不能成为p元素的子元素。对于p元素本身的使用,标准规定:当有更切近语义的元素标签时(如footer、address等),不应使用相对而言更加通用的p标签。 默认情况下,浏览器会给p标签上方和下方添加外边距(margin)。 hr 当段落之间因为内容差异而需要分隔符时,可以使用hr标签。默认情况下,浏览器会把hr标签显示为宽度100%

  • Chuan Shao
    Chuan Shao
3 min read

W3C HTML5标准阅读笔记 – header、footer、main、address

标准原文:http://www.w3.org/TR/html5/sections.html#the-header-element 在HTML5标准中,新增了header标签用于表示引导介绍性内容,footer标签用于表示脚注内容,同时新增了main标签用于表示页面的主体内容,而新增的address标签则用于表示文章或页面的联系信息。 header和footer header和footer元素可以包含任何除header、footer和main元素以外的Flow元素作为子元素。与article等sectioning content一样,header和footer仅增添了语义,在浏览器呈现上,与普通的div块级元素没什么区别。从定义上来讲,header元素表示与之最近的sectioning content(article、section、nav、aside)父级元素或者sectioning root(body、

  • Chuan Shao
    Chuan Shao
3 min read

W3C HTML5标准阅读笔记 – article、section、nav、aside

标准原文:http://www.w3.org/TR/html5/sections.html#the-article-element 在HTML5标准中,新加了几个用于增添页面语义的标签,这些标签有:article、section、nav和aside等。与别的大多数标签不同,浏览器在解释渲染这些标签的时候仅仅把它们作为普通的div块级元素来进行处理,不会添加任何额外的展现逻辑;也即,这些标签仅用于增添语义。对于Web开发人员而言,使用这些标签的实际意义主要有2点:搜索引擎优化(SEO),以及增加页面的可用性(accessibility)。 在元素分类上,article、section、nav和aside称之为“Sectioning Content”

  • Chuan Shao
    Chuan Shao
3 min read

W3C HTML5标准阅读笔记 – body元素

标准原文:http://www.w3.org/TR/html5/sections.html#the-body-element body元素作为html元素的第二个子元素,用于包含整个文档的内容。在合法的HTML文档中,只允许出现一个body元素。在JavaScript脚本中,可以通过document.body来直接获取。 除了通用的全局属性,body元素还拥有一些特有的事件监听属性,通过使用这些事件监听器,可以满足一些业务需求、实现一些漂亮的页面效果。这些特有的事件监听属性有:onafterprint, onbeforeprint, onbeforeunload,onhaschange, onmessage, onoffline, ononline, onpagehide, onpageshow, onpopstate,

  • Chuan Shao
    Chuan Shao
2 min read

Subscribe to Chuan's blog