About HTML

HTML 简介

HTML 历史

最初的 HTMl 是由 CERN 负责制定的，后来转交给 IETF。

在 1990-1995 年期间， HTML 经历了许多次的版本修改与扩充；

1995 年的时候 HTML 的版本更新到了 HTML3.0；1997 年又完成了 HTML3.2；

同年也完成了 HTML4；次年，W3C 决定停止发展 HTML，转向和 XML 等效的 XHTML，XHTML1.0 在 2000 年制订完成；

发布了 XHTML1.0 后，在 XHTML 模块化的旗帜下，W3C 发布了与 HTML 和 XHTML 不兼容的 XHTML2.0；

在 2003 年，XForms 的发布重新点燃了人们对于 HTML 的兴趣，人们意识到 XML 仅仅适合被用作新技术（如 RSS，Atom）的载体，而不适合用来替换现有的技术（如 HTML）；

2004 年的 W3C 的研讨会上一些 HTML5 的早期提案被提交给 W3C，但是被 W3C 以该提案与其发展理念相冲突为由给拒绝，于是 W3C 决定继续开发 XHTML；

随后 Apple，Mozilla 和 Opera 一起创建了 WHATWG，版权为三个创始公司所有，WHATWG 的几个基本原则：保持向下兼容，修改规范而不是实现，规范必须足够详细防止实现规范的公司互相去逆向；WHATWG 要求 HTML5 规范包括 HTML4，XHTML1.0 和 DOM2HTML；

2006 年 W3C 表示了对 HTML5 开发的兴趣，在 2007 年和 WHATWG 组建了一个工作组来开发 HTML5 规范，WHATWG 的三个创始人公司也允许 W3C 将 HTML5 规范挂到 W3C 的名义下；

两个团队一起工作了多年，直到 2011 年，两个团队出现了分歧，W3C 希望将 HTML5 定位为 HTML 系列的最后一个规范，而 WHATWG 希望继续改进和迭代 HTML5 规范。两个团队也一起工作到现在。

HTML 的可扩展性

HTML 提供了很广泛的扩展性支持来为 HTML 文档增添语义化的支持：

使用 class 属性来拓展元素的含义与行为，但是使用更加符合语义的元素可以帮助游览器以及其它插件更好的识别出元素所代表的含义与行为。
使用 data-*="" 来将数据绑定到元素上，HTML 也提供了相应的 API 来查询和修改这些数据。
使用 <meta name="" content=""> 来定义元数据。
使用 rel="" 注明扩展文档的预定义类型。
使用 <script type=""> 可以嵌入原始数据，可以选择内联文档和外部文档。
通过 embed 标签创建和使用插件，这也是 Flash 工作的原理。
可以通过 JavaScript 的原型机制来拓展 API，许多脚本库就是这样设计的。

HTML 基本语法

一个经典的 HTML 代码如下：

<!DOCTYPE html>
<html lang="en">
 <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>

HTML 文档是由一些元素和文本组成的，非闭合元素必须包括开始标签和结束标签，闭合元素可以省略结束标签。

在 HTML 中，html 元素就是 window.document。这是一个文档元素，他包括 head 和 body 两个元素；像上面代码中的 h1 里的文本会被解析成文本节点，包括像一些换行和空格等字符也会被解析成文本节点。

Note：head 开始标签之前的文本节点会被用户代理直接忽略掉，而 body 的结束标签之后的文本节点则会被插入到 body 结束标签之前。

head 标签包括一个 title 元素，title 包括一个文本节点。

元素如果包含元素只能包含完整的元素，而不能是其一部分。比如：

<p>This is <em>very <strong>wrong</em>!</strong></p>

元素可以通过设置其属性来控制其样式和行为；比如：
```
<a href="demo.html">simple</a>
```

游览器解析的时候会认为这是一条超链接，并且给它加上下划线和颜色来突出这个元素。

属性的语法是键值对的形式，key 和 value 用等号分隔，value 推荐用单引号或双引号括起来；value 如果不包含空格或反单引号，单引号，双引号，等号可以不写单引号或双引号。

对于空属性可以只写属性名，省略等号。

DOM 与 CSS

DOM 提供了一些 API 给脚本语言（如：JavaScript）来修改 DOM。比如：

<form name="main">
 Result: <output name="result"></output>
 <script>
  document.forms.main.elements.result.value = 'Hello World';
 </script>
</form>

<script>
  var a = document.links[0]; // obtain the first link in the document
  a.href = 'sample.html'; // change the destination URL of the link
  a.protocol = 'https'; // change just the scheme part of the URL
  a.setAttribute('href', 'https://example.com/'); // change the content attribute directly
</script>

HTML 本身是独立于与其交互的媒体的。HTML 可能会被渲染到屏幕，语音合成器，或者在盲文显示屏上。为了控制在不同的媒体上需要 HTML 被展示成什么样子，你需要样式语言（如：CSS）。

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Sample styled page</title>
  <style>
   body { background: navy; color: yellow; }
  </style>
 </head>
 <body>
  <h1>Sample styled page</h1>
  <p>This page is just a demo.</p>
 </body>
</html>

HTML 安全

HTML 在样式语言和脚本语言的作用下变得可以交互之后，一堆安全问题也随之出现；Web 安全模型是基于源（"origins"）的概念；许多 Web 攻击都是和跨域相关。

XSS 攻击和 SQL 注入攻击。

XSS 通过向 HTML 注入脚本或其他用户代理能识别的信息来改变 HTML；如果这段注入能被保存的话，其他用户会受到降维打击；

SQL注入常常利用表单的提交将输入信息提交到 Web 服务器后，在将信息保存到数据库时，由于代码没有过滤输入可能会导致攻击者修改数据库中的信息。

解决方法：过滤用户输入，以及用户信息的输出。

CSRF 攻击

由于 HTML 表单的提交可以发生在任意的站点上，并且提交会附带上对应站点的 cookie；因此当用户访问某些恶意站点时，站点可以偷偷提交用户访问过的一些网站（如购物网站）的 HTML 表单；使得用户在无意识中受到降维打击。

解决方法：Web 服务器检查提交的站点的 Origin 字段是否来自于收信任的站点，否则应该拒绝；由于攻击方只是利用用户代理在提交表单时会提交 cookie，本身并不知道 cookie 的值，因此可以在表单里加上一段隐藏 token 来来验证是否是本站点的提交，隐藏 token 可以是 cookie 哈希后得到。

点击劫持

恶意占地那利用一些信息诱导用户点击，然后触发一些用户不希望看到的行为。

如：用户进入一个网站，显示一个游戏，有一个开始按钮，当用户点击后可能被诱导至购物网站；或者将受害网站放在一个 iframe 里，当用户点击时，迅速将 iframe 移动至鼠标下方。

解决办法：可以判断 top 和 window 是否相等来判断站点是否处于 iframe 中。

最后

荆轲刺秦王~