说明
解读不是翻译,因此不会逐句涵盖 w3c 的官方文档,我本意将站在一个初学者的角度,将需要注意的地方记录下来,同时站在一个实用主义者角度,将工作中不常用,但与标准差异较大的理解记录下来,主要意图是记录自己的理解,和帮助日后索引与查询,如果读者希望地毯式理解 w3c 标准,建议逐字阅读 w3c 官方英文文档。
HTML
the Hypertext Markup Language 超文本标记语言
HTML 乍一看可能给人感觉到一些荒谬,因为其规范是在几十年间,许多不同背景的开发者共同贡献的,很多地方可能无法很全局的把握。
为了简化难度,没有暴露多线程的特征给开发者,HTML 和 DOM API 也被设计为无法检测是否有其它脚本正在同时运行。就算是 webWorker,其实现原理可以认为是在同一个浏览器上下文序列化执行所有脚本。
Tag
由 <
>
/
构成,某些标签可以不闭合,比如 <br>
标签可以嵌套,比如:
<p>This <em>is <strong>correct</strong>.</em></p>
但不能交叉嵌套:
<p>This is <em>very <strong>wrong</em>!</strong></p>
Attribute
如果属性值不包含空格、"
'
` =
<
>
,就可以不用双引号,以下写法都是正确的:
<!-- empty attributes -->
<input disabled>
<input disabled="">
<input disabled=""/>
<!-- attributes with a value -->
<input name=address>
<input name='address'>
<input name="address">
拓展机制
HTML 提供了很多方法拓展语义,确保使用安全的方法拓展语义,保证不会产生副作用,例如:
- class 可以被浏览器广泛支持
- data - * 属性可以确保不被浏览器使用,安全的传递数据
- 使用 <meta name="" content=""> 描述页面数据
- 通过 rel="" 定义链接类型
- <script type =""> 可以定义自定义数据类型,通过本地或者服务器在页面嵌入原生数据
- 使用 embed 嵌入插件,比如 flash
- 使用 js 拓展功能
解析
HTML 标记在浏览器被解析成 DOM 树,存储在内存中。包括的节点类型:DocumentType,Element,Text,Comment,以及不常见的 ProcessingInstruction。
例如:
<!DOCTYPE html>
<html>
<head>
<title>Sample page</title>
</head>
<body>
<h1>Sample page</h1>
<p>This is a <a href="demo.html">simple</a> sample.</p>
<!-- this is a comment -->
</body>
</html>
会被解析为:
可以看到文字虽然没有被标签包裹,但在 DOM 树中与标签一样会生成 #text
节点。不过 #text
节点比预期的要多,因为代码中包含很多空格与换行,不过,所有 <head>
之前的空白会被忽略,所有 </body>
之后的空白都会被提前到 </body>
的结尾处。
任何 DOM 节点都可以被嵌入的 script
脚本操控。
事件触发
dom的回调,比如 img
标签的 onLoad
,虽然是异步事件,但可能在 dom 渲染过程中触发,因此如下的 js 监听可能不会生效:
[站外图片上传中……(2)]
<!-- the 'load' event might fire here while the parser is taking a
break, in which case you will not see it! -->
<script>
var img = document.getElementById('games');
img.onload = gamesLogoHasLoaded; // might never fire!
</script>
XHTML
是 HTML 的变体,因为使用了 XML 语法。XHTML 是 XML 的应用程序。
如果文档以 text / html MIME 类型传输,浏览器会作为 HTML 类型处理,目前使用 html 5.0 版本的规范,也就是 "HTML 5"。
如果使用 XML MIME 类型,例如 application / xhtml + xml 时,会被浏览器视为 XML 文档,使用 XHTML 5.0 版本的规范,称为 "XHTML 5"。与 HTML 5 的区别是,XHTML 5 对 HTML 标签语法检查的更严格,细小的语法错误都会阻止文档渲染,比如 XHTML 中的 DOM 语法不允许 noscript
标签,也不允许 -->
的注释。
CSS
Cascading Style Sheets 层叠样式表
让呈现样式与结构分离。
HTML 内联的样式属性因为不利于维护,增大文件体积,已经逐渐废弃,例如 <font color="">
,仅保留了 style
属性。
WebFonts
在网页使用字体,无需在系统安装,正在打造的网页字体通用标准是: WOFF