Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

w3c 规范原味解读 - 1 介绍 #9

Open
ascoders opened this issue Nov 4, 2016 · 0 comments
Open

w3c 规范原味解读 - 1 介绍 #9

ascoders opened this issue Nov 4, 2016 · 0 comments

Comments

@ascoders
Copy link
Owner

ascoders commented Nov 4, 2016

说明

解读不是翻译,因此不会逐句涵盖 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 - * 属性可以确保不被浏览器使用,安全的传递数据
  • 使用 描述页面数据
  • 通过 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>

会被解析为:

image

可以看到文字虽然没有被标签包裹,但在 DOM 树中与标签一样会生成 #text 节点。不过 #text 节点比预期的要多,因为代码中包含很多空格与换行,不过,所有 <head> 之前的空白会被忽略,所有 </body> 之后的空白都会被提前到 </body> 的结尾处。

任何 DOM 节点都可以被嵌入的 script 脚本操控。

事件触发

dom的回调,比如 img 标签的 onLoad,虽然是异步事件,但可能在 dom 渲染过程中触发,因此如下的 js 监听可能不会生效:

 <img id="games" src="games.png" alt="Games">
 <!-- 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

容错

在结束标签书写属性应该被忽略,但却是合法的,应为以后可能会作为一种拓展能力 (<p></p attr="">)。

对属性设置 disable=false 是不允许的,尽管看起来设置了 enable,但实际上和 disable=true 效果一样,因为这个效果看的是属性,而不是值。

该闭合的不闭合,会根据不同情况容错,比如 form 不会放在段落元素中,那么下面这段标签会这么解析:

<p>Welcome. <form><label>Name:</label> <input></form>

自动在 form 标签前把 p 标签结束:

<p>Welcome. </p><form><label>Name:</label> <input></form>

script 标签不支持 src 与内容同时存在,为了防止减少不必要的开发错误,因为有了 src 属性的 script 标签内容将不被执行。

@ascoders ascoders changed the title w3c 规范原味解读 w3c 规范原味解读 - 1 介绍 Nov 11, 2016
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant