学习 HTML 在线

2447!DOCTYPE

<!DOCTYPE html> 是 HTML5 中唯一的 doctype,也被视作将网页 "升级" 到 HTML5 的第一步。

很多国外网站的 <!DOCTYPE html><HEAD> 之间都会有一段注释,如:

<!—[if IE 6 ]><html class="ie ielt9 ielt8 ielt7 ie6" lang="en-US"><![endif]—>
<!—[if IE 7 ]><html class="ie ielt9 ielt8 ie7" lang="en-US"><![endif]—>
<!—[if IE 8 ]><html class="ie ielt9 ie8" lang="en-US"><![endif]—>
<!—[if IE 9 ]><html class="ie ie9" lang="en-US"><![endif]—>
<!—[if (gt IE 9)|!(IE)]><!—><html lang="en-US"><!—<![endif]—>

改代码作用于 css,来写一些针对 IE 各版本的样式差异。

先判断用户用的哪个 IE 版本,然后在标签上加上该版本的 class,这样可以方便 hack。

css 文件是这样写的:

.ie6 xxx {};
.ie7 xxx {};

这是目前最好的 hack 方式之一。

2446HTML 标签 !--

javascript 中 <!-- //--> 是做什么用的?

HTML 中使用 JavaScript 经常看到以下写法:

<script type="text/javascript">
<!--
XXXXXXXX内容略XXXXX
//-->
</script>

这是防止某些浏览器,不支持 javascript,导致 javascript 的代码直接出现在页面上,影响美观。

因此,用 HTML 的注释把 javascript 的代码包括起来,如果浏览器不支持 javascript,那么也会当做注释处理。尽管 javascript 失效了,但不至于把源代码显示在页面上。

(有些浏览器可能支持 javascript,但也提供用户一个开关,关闭 javascript,如果用户关闭了javascript的功能,也会这样)

2445HTML 标签 !--

HTML 中注释

添加注释文字:

<!-- 在此处写注释 -->

也可以将一句或者一段代码注释:

<!-- 此刻不显示此段落:
<p>这是一个被注释了的段落。</p>
-->

条件注释:

<!--[if IE 8]>
    .... some HTML here ....
<![endif]-->

注意: 条件注释定义只有 Internet Explorer 执行的 HTML 标签。

420HTML5WebSocket

说到 websocket 我觉得有必要说下跟 socket 的区别。

软件通信有七层结构,下三层结构偏向与数据通信,上三层更偏向于数据处理,中间的传输层则是连接上三层与下三层之间的桥梁,每一层都做不同的工作,上层协议依赖与下层协议。基于这个通信结构的概念。

Socket 其实并不是一个协议,是应用层与 TCP/IP 协议族通信的中间软件抽象层,它是一组接口。当两台主机通信时,让 Socket 去组织数据,以符合指定的协议。TCP 连接则更依靠于底层的 IP 协议,IP 协议的连接则依赖于链路层等更低层次。

WebSocket 则是一个典型的应用层协议。

总的来说:Socket 是传输控制层协议,WebSocket 是应用层协议。

419HTML5WebSocket

Websocket 使用 ws 或 wss 的统一资源标志符,类似于 HTTPS,其中 wss 表示在 TLS 之上的 Websocket。如:

ws://example.com/wsapi
wss://secure.example.com/

Websocket 使用和 HTTP 相同的 TCP 端口,可以绕过大多数防火墙的限制。默认情况下,Websocket 协议使用 80 端口;运行在 TLS 之上时,默认使用 443 端口。

一个典型的Websocket握手请求如下:

客户端请求

GET / HTTP/1.1
Upgrade: websocket
Connection: Upgrade
Host: example.com
Origin: http://example.com
Sec-WebSocket-Key: sN9cRrP/n9NdMgdcy2VJFQ==
Sec-WebSocket-Version: 13

服务器回应

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: fFBooB7FAkLlXgRSz0BT3v4hq5s=
Sec-WebSocket-Location: ws://example.com/
  • Connection 必须设置 Upgrade,表示客户端希望连接升级。
  • Upgrade 字段必须设置 Websocket,表示希望升级到 Websocket 协议。
  • Sec-WebSocket-Key 是随机的字符串,服务器端会用这些数据来构造出一个 SHA-1 的信息摘要。把 “Sec-WebSocket-Key” 加上一个特殊字符串 “258EAFA5-E914-47DA-95CA-C5AB0DC85B11”,然后计算 SHA-1 摘要,之后进行 BASE-64 编码,将结果做为 “Sec-WebSocket-Accept” 头的值,返回给客户端。如此操作,可以尽量避免普通 HTTP 请求被误认为 Websocket 协议。
  • Sec-WebSocket-Version 表示支持的 Websocket 版本。RFC6455 要求使用的版本是 13,之前草案的版本均应当弃用。
  • Origin 字段是可选的,通常用来表示在浏览器中发起此 Websocket 连接所在的页面,类似于 Referer。但是,与 Referer 不同的是,Origin 只包含了协议和主机名称。
  • 其他一些定义在 HTTP 协议中的字段,如 Cookie 等,也可以在 Websocket 中使用。

在服务器方面,网上都有不同对websocket支持的服务器: