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

标准原文:http://www.w3.org/TR/html5/document-metadata.html#the-style-element HTML文档中,style元素可用于定义页面的样式。可以通过type属性来设定相应的样式语言,但一般情况下都会忽略该属性而使用默认的样式语言:text/css。 在使用style元素时,与link元素一样,可以通过media属性来限定样式所适用的环境(比如,限定某个style元素所定义的样式仅在打印时有效)。如果media属性未被设定,则其默认值为“all”,意为该样式在所有的访问环境下都适用。 当style元素中的样式被解析处理后,如果这些样式中不存在“关键子资源”(通过@import所引用的别的样式表文件),则style元素会直接触发其自己的load事件。如果这些样式中存在“关键子资源”

  • Chuan Shao
    Chuan Shao
1 min read

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

标准原文:http://www.w3.org/TR/html5/document-metadata.html#the-meta-element 在HTML文档中,meta元素可放置在head标签内用于定义整个文档层面的元数据信息。使用meta标签时无需将标签闭合。 除了通用的全局属性,meta元素还可以拥有4个特有属性:name、http-equiv、charset和content。对于name、http-equiv和charset,任何meta元素必须拥有且只能拥有其中的一个,这一属性及其值决定了该meta元素所表达的作用。如果meta元素拥有name属性或者http-equiv属性,则该meta元素必须同时具备content属性用于描述具体的元数据信息(如果content属性缺失,则其值默认为空字符串);如果meta元素拥有charset属性,则content属性不应出现。 一个HTML文档中拥有charset属性的meta元素最多只能出现一个。这很好理解 -- 整个文档层面的编码信息只需要出现一次即可。 name

  • Chuan Shao
    Chuan Shao
5 min read

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

标准原文:http://www.w3.org/TR/html5/document-metadata.html#the-link-element 在HTML文档中,link元素作为元数据元素,可放置在head标签内用于定义当前文档与其它资源的关系。使用link标签时无需将标签闭合。 除了通用的全局属性,link元素还可以拥有以下特有属性: rel rel属性定义当前文档与link元素所链接的其它资源之间的关系类型。比较常用的rel值有icon和stylesheet等。这一属性是必需的,且其值必须从标准的几个关键词中选。在定义rel属性值时,也可以同时使用多个关键词,关键词之间用空格隔开即可 -- 这样做可以用一个link元素来创建多个链接。比如,以下代码用一个link元素创建了2个链接,第一个链接将当前文档的作者信息链接到/about,第二个链接则将当前文档的许可证信息链接到/about: <

  • Chuan Shao
    Chuan Shao
5 min read

W3C HTML5标准阅读笔记 – 元数据元素head、title、base

标准原文:http://www.w3.org/TR/html5/document-metadata.html#document-metadata head元素是HTML文档根元素html的第一个子元素,其内部可包含别的元数据元素。 当HTML文档作为网页在浏览器中打开时(绝大多数情况),head元素内必须包含一个title元素(有且只有一个),此时浏览器会将title元素的内容显示在当前页面的窗口上;而当HTML文档作为电子邮件中的内容时,title元素可以忽略。在DOM中,可以通过访问title元素对象的text字段来读写它的内容。 head元素中可以包含一个base元素,用于定义文档中资源相对路径的根路径。head元素中最多只能包含一个base元素,如果head元素包含多个base子元素,则只有第一个base子元素有效,其余都会被浏览器忽略。 base元素如果拥有href属性,则它会影响整个文档中所有相对路径的解析(html元素的manifest属性除外),因此这样的base元素必须放置在所有把URL作为属性值的元素之前;为了可维护性,一般将base元素作为head标签内的第一个子元素进行放置。

  • Chuan Shao
    Chuan Shao
1 min read

W3C HTML5标准阅读笔记 – 根元素html

标准原文:http://www.w3.org/TR/html5/semantics.html#the-root-element 在HTML文档中,元素”html”作为整个文档的根节点元素而存在;其内容只能是2个子元素:head元素及其后的body元素。标准建议Web开发者在html元素中定义lang属性以声明整个文档的自然语言。 除了通用的全局属性,html元素还可以具有manifest属性,从而实现HTML5中的应用缓存特性(Application Cache)。不过,manifest属性仅在文档加载的早期有效,动态改变manifest值将不会有任何效果。因此,DOM API中也不存在可用于操作manifest属性的接口。 另外,虽然HTML文档中的base元素可用于定义文档中资源相对路径的根路径,但由于html元素的manifest属性是在base元素之前被解析处理的,因此base元素对html的manifest属性无效。 p.

  • Chuan Shao
    Chuan Shao
1 min read

W3C HTML5标准阅读笔记 – 全局属性(Global attributes)

标准原文:http://www.w3.org/TR/html5/dom.html#global-attributes HTML5中,存在多个可供所有元素使用的属性,称之为全局属性(Global attributes)。这些属性主要分为两大类,一类是表述元素语义的属性,如id、class等;另一类是表述元素上挂载事件监听的属性,如onlick、onmouseover等。不过,虽然这些属性可以在所有元素上合法使用,但部分属性仅在特定的元素上才能发挥作用。比如volumechange属性就只能在媒体相关的元素上产生作用。 id id属性用于确定DOM中元素的唯一标识符。id值的规则为:必须包含至少一个字符,且不能包含空格符;除此之外,可以使用任何字符串来作为id值。

  • Chuan Shao
    Chuan Shao
3 min read

W3C HTML5标准阅读笔记 – 元素分类与内容模型(Content Model)

标准原文:http://www.w3.org/TR/html5/dom.html#content-models HTML4中,元素被分成两大类: inline(内联元素)与block(块级元素)。但在实际的开发过程中,因为页面表现的需要,前端工程师经常把inline元素的display值设定为block(比如a标签),也经常把block元素的display值设定为inline;之后更是出现了inline-block这一对外呈现inline、对内呈现block的属性。因此,简单地把HTML元素划分为inline与block已经不再符合实际需求。 基于这种考虑,在HTML5中,标准制定者重新定义了HTML元素的分类,并根据这一新的分类定义了元素的内容模型(Content Model) -- 对于一个元素而言,

  • Chuan Shao
    Chuan Shao
5 min read

关于Android设备中,网页端上传操作导致浏览器刷新的问题

在最近的开发过程中,碰到一个比较疑难的bug:当在Android设备的浏览器中打开某张网页时,无论是使用系统自带的浏览器打开,还是用微信扫描二维码打开,网页中的图片上传功能经常会出问题。问题的具体描述为: 在上传组件中(哪怕是最简单的<input type="file">),当选择好本地图片或者调取系统摄像头拍好照片后,网页被刷新。这一问题无法100%重现,但概率不低,在如红米等低端安卓机上发生的概率会比较高。 与用系统自带的浏览器打开的情况相比,在微信中打开的情况下该问题出现的更为频繁。 与选择本地图片上传相比,调取系统摄像头拍照上传的情况下该问题出现的更为频繁。 随便找了两家知名公司的网站(新浪微博、赶集网),在用Android设备访问网页并试图进行图片上传时,都发生了这一问题。 在经过一番搜索和调研后,发现这个问题的原因远比自己想象的要复杂:

  • Chuan Shao
    Chuan Shao
6 min read

HTMLCollection v.s. NodeList

本文参考了知乎上贺师俊对相关问题的回答: https://www.zhihu.com/question/31576889 在DOM中,有两种类型可用于存储对象的集合:HTMLCollection和NodeList。由于DOM标准历史变化的原因,造成了一些混乱,所幸目前这两种类型之间的区别已经比较清晰了。 HTMLCollection HTMLCollection类型用于存储元素的集合,因此像xxx.children和xxx.getElementsByXXX等访问语句所返回的都是HTMLCollection对象。《JavaScript权威指南》中描述xxx.getElementsByTagName返回的是NodeList对象 ,这一点并不正确。 与NodeList对象不同,HTMLCollection对象拥有一个叫做namedItem('somename')的方法,可通过调用该方法获得HTMLCollection集合中id或name值为"somename"的成员。 NodeList NodeList类型用于存储节点(

  • Chuan Shao
    Chuan Shao
1 min read

W3C HTML5标准阅读笔记 - document对象

标准原文:http://www.w3.org/TR/html5/dom.html#documents 浏览器加载HTML/XHTML文档后,文档对象在DOM中以document对象的形式而存在。HTML标准文档对部分document对象的属性进行了描述。 document.referrer 访问document对象的referrer字段将返回用户跳转至当前页面之前所访问的那张页面的地址,也即能从referrer字段获知用户是从哪张页面跳转到当前页面的。如果当前页面是直接在浏览器里打开的,则referrer字段返回空字符串。 当用户从一张页面跳转到另一张页面时,访问第二张页面的第一次HTTP请求(对第二张页面的主HTML文件的请求),其请求头中会出现Referer字段,该字段表示第一张页面的URL,其值与第二张页面中document对象的referrer字段相同 -- 个人猜测:浏览器是从该Referer请求头中获知跳转来源,并将其组装到document对象中的。有几个细节值得注意: HTTP请求头中的字段名称为”Referer”

  • Chuan Shao
    Chuan Shao
6 min read

W3C HTML5标准阅读笔记 - HTML简介

标准原文:https://www.w3.org/TR/html5/introduction.html#a-quick-introduction-to-html 标签、元素、DOM HTML文档是由标签(tag)所组成的,而当浏览器打开由标签所组成的HTML文档后,文档在内存中的组织与表示称之为DOM(文档对象模型)。从DOM的角度来看,文档中一个又一个的标签也可以称之为元素(element)。 HTML中的元素可以拥有属性,而通过对这些属性进行赋值,可以实现元素行为的设定。一个特殊点为:当元素属性的值不包含空格,也不包含"'=<>等字符时,

  • Chuan Shao
    Chuan Shao
6 min read

W3C HTML5标准阅读笔记 – 引论

标准原文:http://www.w3.org/TR/html5/introduction.html HTML5标准制作的背景 HTML (Hypertext Markup Language)的最初设计对象是“科学文档”,但随着时代的变化,这一标记语言承接了越来越多的功用。对于Web而言,尚未被HTML标准所覆盖的领域主要集中在“Web应用”上;因此HTML5标准所致力解决的即是厘清“web应用”领域HTML文档的规则与行为,同时修复一些积累下来的问题。 HTML5标准发布的历史 HTML5标准发布的历史时间线为: 1997年,HTML4发布 (2年后,HTML4的改进版HTML4.01发布)

  • Chuan Shao
    Chuan Shao
5 min read

前端工程化:在gulp中顺序执行任务

gulp是前端开发过程中对代码进行构建(Build)的工具,类似于Java世界中的Ant或者Maven。与Ant或Maven类似,在用gulp进行build时,经常需要顺序执行任务:在前一个任务彻底结束后才开始下一个任务。比如,在进行新的一次LESS编译前,首先需要保证删除上一次编译的结果;也即,对于以下两个gulp任务,必须保证clean执行完毕后才开始进行compileLESS。: var gulp = require('gulp'), less = require('gulp-less'), clean = require('gulp-clean'); gulp.task('compileLESS', function(){ gulp.src('sample.less') .pipe(

  • Chuan Shao
    Chuan Shao
3 min read

AngularJS初探:搭建PhoneCat项目的开发与测试环境

AngularJS官方网站提供了一个用于学习的示例项目:PhoneCat。这是一个Web应用,用户可以浏览一些Android手机,了解它们的详细信息,并进行搜索和排序操作。 对于PhoneCat项目的开发环境和测试环境的搭建,官方网站上提供了详细的指导:http://docs.angularjs.org/tutorial 获取源代码 PhoneCat项目的源代码托管在GitHub上,因此获取源代码之前需要安装Git (http://git-scm.com/download)。安装Git后,可以通过git clone来下载源代码: git clone --depth=14 https://github.com/angular/angular-phonecat.git

  • Chuan Shao
    Chuan Shao
2 min read
JavaScript

JavaScript实验:类(Class)

在JavaScript中,可以使用类(Class)来实现面向对象编程(Object Oriented Programming)。不过,JavaScript中的类与Java中的有所不同,其相应的定义和使用也不一样。 JavaScript中类的定义 在JavaScript中,所有从同一个原型对象(prototype)处衍生出来的对象组成了一个类;也就是说,JavaScript中的类是一个对象集合的概念,如果两个对象它们的prototype相同,那么它们就属于同一个类;JavaScript中的类甚至都不需要类名。以下面的代码为例: var p = {x:42}; var a = Object.create(p); var b = Object.

  • Chuan Shao
    Chuan Shao
6 min read
JavaScript

JavaScript实验:方法调用

JavaScript中,如果function属于一个对象,那么通过对象来访问该function的行为称之为“方法调用”。与普通的函数调用不同的是,在进行方法调用时,function中的this指代将发生变化 -- this将指代用于调用该function的对象(该对象将成为方法调用的invocation context): var x = 99; var sample = { x:1, act:function(a){ this.x = a*a;//assign value to sample's x, not global object's

  • Chuan Shao
    Chuan Shao
2 min read

Subscribe to Chuan's blog