<![CDATA[HTML - 99css]]>https://www.99css.com/https://www.99css.com/favicon.pngHTML - 99csshttps://www.99css.com/Ghost 3.21Mon, 18 May 2026 23:50:23 GMT60<![CDATA[[观点] H5 是个好名字]]>

好久没写文章了，以我的性格也并不想参与这些「口水战」，今天我决定挑战下自己，把水搅浑。

在国内，HTML5 被简称为 「H5」，这却引起了一些人的不满，他们绝大部分是开发人员。下面我们来看看简化的优缺点：

优点

  1. 便于沟通

首先，读起来顺口，而 H T M L 读完舌头都要打结了，你造一群人在会议室里影响唇枪舌战 PK 时这么口吃般的说话多影响气势不？

其次，方便与人交流，从 BOSS 到产品经理、PM、设计师，一提到「H5」，他们脑子里立马能浮现一打微信里的营销页面--没有版权的背景音乐、不知道什么时候能划到头的翻页（有时候你可以试试倒着划），你要知道以前跟他们讲明白前端、后端、PHP、数据库什么的是有多么困难！

  1. 有利于 HTML5 的普及

想想看，等卖面膜的妹纸们都要搞「H5」营销了，乃们离脱单的日子也就不远了

缺点

]]>https://www.99css.com/why-h5-is-a-good-name/6983728c0b74c7000133aef6Tue, 07 Jul 2015 07:31:02 GMT

好久没写文章了，以我的性格也并不想参与这些「口水战」，今天我决定挑战下自己，把水搅浑。

在国内，HTML5 被简称为 「H5」，这却引起了一些人的不满，他们绝大部分是开发人员。下面我们来看看简化的优缺点：

优点

  1. 便于沟通

首先，读起来顺口，而 H T M L 读完舌头都要打结了，你造一群人在会议室里影响唇枪舌战 PK 时这么口吃般的说话多影响气势不？

其次，方便与人交流，从 BOSS 到产品经理、PM、设计师，一提到「H5」，他们脑子里立马能浮现一打微信里的营销页面--没有版权的背景音乐、不知道什么时候能划到头的翻页（有时候你可以试试倒着划），你要知道以前跟他们讲明白前端、后端、PHP、数据库什么的是有多么困难！

  1. 有利于 HTML5 的普及

想想看，等卖面膜的妹纸们都要搞「H5」营销了，乃们离脱单的日子也就不远了

缺点

目前我想到的只有一个，会被一小撮开发人员鄙视，然并卵。为什么你能安心用着「然并卵」却在这里鄙视「H5」？

鄙视的根源

「H5」进入了他们的「鄙视链」，而「鄙视链」形成的原因是追求「优越感」，奥地利心理学家A·阿德勒认为：

人的总目标是追求「优越性」，是要摆脱自卑感以求得到优越感。

现在，知道我为什么写这篇文章了吧。

]]><![CDATA[Google Fonts 中文字体在 Safari 中的显示 Bug]]>

Nginx 反向代理 Google Fonts 以便国内访问

Ghost 博客系统的默认皮肤使用了 Google Fonts，由于被墙，所以采用了 Nginx 反向代理的方法来让国内访问，fons.99css.com.conf 配置如下：

upstream google {
    server fonts.googleapis.com:80;
}

upstream gstatic {
    server fonts.gstatic.com:80;
}

server {
    listen 80;

    server_name fonts.99css.com;
    valid_referers server_name *.99css.com 99css.com; # 限制引用的域名。如果你想要做公益服务，
]]>https://www.99css.com/chinese-g-fonts-bug-in-safari/6983728c0b74c7000133aeeeTue, 10 Feb 2015 05:24:24 GMT

Nginx 反向代理 Google Fonts 以便国内访问

Ghost 博客系统的默认皮肤使用了 Google Fonts，由于被墙，所以采用了 Nginx 反向代理的方法来让国内访问，fons.99css.com.conf 配置如下：

upstream google {
    server fonts.googleapis.com:80;
}

upstream gstatic {
    server fonts.gstatic.com:80;
}

server {
    listen 80;

    server_name fonts.99css.com;
    valid_referers server_name *.99css.com 99css.com; # 限制引用的域名。如果你想要做公益服务，可以将此行和下方的#if ($invalid_referer) {...}去掉。
    if ($invalid_referer) {
        return 404;
    }

    location /css {
        sub_filter 'fonts.gstatic.com' 'fonts.99css.com';
        sub_filter_once off;
        sub_filter_types text/css;
        proxy_pass_header Server;
        proxy_set_header Host fonts.googleapis.com;
        proxy_set_header Accept-Encoding '';
        proxy_redirect off;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Scheme $scheme;
        proxy_pass http://google;

        expires 7d;
        add_header Pragma public;
        access_log off;
    }

    location / {
        proxy_pass_header Server;
        proxy_set_header Host fonts.gstatic.com;
        proxy_redirect off;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Scheme $scheme;
        proxy_pass http://gstatic;
    }
}

之后头部调用时改为自己的域名即可

<link rel="stylesheet" type="text/css" href="//fonts.99css.com/css?family=Merriweather:300,700,700italic,300italic|Open+Sans:700,400" />

中文字体显示 Bug

刚说完苹果的坏话，报应就来了，刚才这篇文章在 Safari 中不堪入目

Blockquote 中的斜体中文像 SJ 后的丁丁一样，怎么重振雄风呢？

解决方法就是指定页面语言为中文

<html>

改为

<html lang="zh-CN">

在 Ghost 目录中，找到这个文件 /content/themes/casper/defaults.hbs 进行上述修改，之后重启 Ghost 即可，正常显示如下：

参考链接：

]]><![CDATA[HTML5 中的块级链接]]>

英文叫做 “Block-level” links，我以为只有我厂那些鸟毛不知道，没想到不知道的还挺多，需要普及一下。

最近看了 kejun 的 PPT 前端开发理论热点面对面：从怎么看，到怎么做？，p21 引用了 10 HTML Tag Crimes You Really Shouldn’t Commit 中的一条：

很遗憾，Web 标准中处处充满了打脸行为，这条规则现在已经失效了！在那篇文章发布一个月后，HTML5doctor 发表了 “Block-level” links in HTML5，引述一下，就是原先你要这么写：

<div class="story">
<h3><a
]]>https://www.99css.com/1442/6983728c0b74c7000133aecfMon, 15 Jul 2013 11:07:20 GMT

英文叫做 “Block-level” links，我以为只有我厂那些鸟毛不知道，没想到不知道的还挺多，需要普及一下。

最近看了 kejun 的 PPT 前端开发理论热点面对面：从怎么看，到怎么做？，p21 引用了 10 HTML Tag Crimes You Really Shouldn’t Commit 中的一条：

很遗憾，Web 标准中处处充满了打脸行为，这条规则现在已经失效了！在那篇文章发布一个月后，HTML5doctor 发表了 “Block-level” links in HTML5，引述一下，就是原先你要这么写：

<div class="story">
<h3><a href="story1.html">Bruce Lawson voted sexiest man on Earth</a></h3>
<p><a href="story1.html"><img src="bruce.jpg" alt="full story. " />A congress representing all the planet's women unanimously voted Bruce Lawson as sexiest man alive.</a></p>
<p><a href="story1.html">Read more</a></p>
</div>

现在 HTML5 中可以这么写

<article>
<a href="story1.html">
<h3>Bruce Lawson voted sexiest man on Earth</h3>
<p><img src="bruce.jpg" alt="gorgeous lovebundle. ">A congress representing all the planet's women unanimously voted Bruce Lawson as sexiest man alive.</p>
<p>Read more</p>
</a>
</article>

从无障碍角度考虑仅仅增加了图片的 alt 描述文字（为读屏用户提供更详细的信息），而不需人为的制造辣么多个“冗余”的 a！HTML5 的思想中的一条就是务实，用现在的话说就是接地气，嗯哼~

虽然这种写法不向前兼容，但经过 HTML5 doctor 的测试表明，主流浏览器都支持，也就是说：

你和你的小伙伴们现在就可以在项目中使用啦！

为了兼容 IE6/7 的手型 bug，需要在 reset.css 中加入诸如这样的代码：

a div, a h3, a p, ...{#cursor:hand}

]]><![CDATA[HTML5]]>

via Html5

]]>https://www.99css.com/504/6983728c0b74c7000133ae85Sun, 23 May 2010 18:14:52 GMT

via Html5

]]><![CDATA[IE8 X-UA-Compatible 失效？]]>

现在维护的项目中使用了

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" >

来把IE8带入IE7标准，今天测试提出一个IE8下的小BUG，简单分析了一下，发现浏览器始终为IE8标准，并未切换到IE7标准（F12调出开发工具，文本模式自动勾选在IE8标准）

翻了下MSDN《定义文档兼容性》，里面有这么一句：

X-UA-compatible 标头不区分大小写；不过，它必须显示在网页中除 title 元素和其他 meta 元素以外的所有其他元素之前的标头（HEAD 节（可能为英文网页））中。

MSDN有机器翻译的传统，再看下英文版：

The X-UA-compatible header is not case sensitive; however, it must appear in

]]>https://www.99css.com/463/6983728c0b74c7000133ae80Thu, 08 Apr 2010 23:51:37 GMT

现在维护的项目中使用了

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" >

来把IE8带入IE7标准，今天测试提出一个IE8下的小BUG，简单分析了一下，发现浏览器始终为IE8标准，并未切换到IE7标准（F12调出开发工具，文本模式自动勾选在IE8标准）

翻了下MSDN《定义文档兼容性》，里面有这么一句：

X-UA-compatible 标头不区分大小写；不过，它必须显示在网页中除 title 元素和其他 meta 元素以外的所有其他元素之前的标头（HEAD 节（可能为英文网页））中。

MSDN有机器翻译的传统，再看下英文版：

The X-UA-compatible header is not case sensitive; however, it must appear in the Web page’s header (the HEAD section) before all other elements, except for the title element and other metaelements.

而项目中是：

<head>
<script ...
<link href="xxx.css" ...
<meta ...

杯具就这么发生了…

]]><![CDATA[Determining IE8's Document Mode]]>

via How IE8 Determines Document Mode

]]>https://www.99css.com/422/6983728c0b74c7000133ae7cWed, 03 Mar 2010 09:54:30 GMT

via How IE8 Determines Document Mode

]]><![CDATA[Web标准中的特殊字符»]]>

在最开始学习web标准的时候有这么一条：

把所有<和&特殊符号用编码表示 :
任何小于号（<），不是标签的一部分，都必须被编码为& l t ; 　　任何大于号（>），不是标签的一部分，都必须被编码为& g t ;
任何与号（&），不是实体的一部分的，都必须被编码为& a m p;
注：以上字符之间无空格。

而在我们平时的工作中经常会遇到这种情况：

更多>>

国内的同行大多是写两个大于号&gt;&gt;或者干脆就写>>（更夸张的是有人为了追求和效果图完全一致的效果而单独对这里使用宋体），更合理的写法如下：

<style>
a:after{content:
]]>https://www.99css.com/286/6983728c0b74c7000133ae78Sun, 24 Jan 2010 19:43:59 GMT

在最开始学习web标准的时候有这么一条：

把所有<和&特殊符号用编码表示 :
任何小于号（<），不是标签的一部分，都必须被编码为& l t ; 　　任何大于号（>），不是标签的一部分，都必须被编码为& g t ;
任何与号（&），不是实体的一部分的，都必须被编码为& a m p;
注：以上字符之间无空格。

而在我们平时的工作中经常会遇到这种情况：

更多>>

国内的同行大多是写两个大于号&gt;&gt;或者干脆就写>>（更夸张的是有人为了追求和效果图完全一致的效果而单独对这里使用宋体），更合理的写法如下：

<style>
a:after{content:'0BB';}
</style>

<a href="">更多</a>

0BB — right double angle quote, unicode = » ( » )

由于IE6/7不支持after伪类，退一步这样写也不错：

<a href="">更多&raquo;</a>

最好的例子就是wordpress编辑器左下角的路径处：

而面包屑导航处经常被写为的大于号也不是&lt;而应是&rsaquo;根据wordpress后台的title写法：

<title>添加新文章 <strong>&amp;lsaquo;</strong> 99css  &amp;#8212; WordPress</title>;

显示效果如下：

添加新文章 ‹ 99css — WordPress

把&lsaquo;的l改成r就是右了

另看到aoao和怿飞在twitter上讨论空格，怿飞说：

测试发现空格还是用 u0020 表示兼容性和语义最好
我也不是很认同，我的观点是：在html中使用&nbsp;，而在css中使用20才是比较合理的做法:p

延伸阅读

]]><![CDATA[Hyphens, Underscores, or camelCase?]]>

via Poll Results: Hyphens, Underscores, or camelCase?

]]>https://www.99css.com/272/6983728c0b74c7000133ae76Tue, 19 Jan 2010 22:44:02 GMT

via Poll Results: Hyphens, Underscores, or camelCase?

]]><![CDATA[What Beautiful HTML Code Looks Like]]>

via What Beautiful HTML Code Looks Like

]]>https://www.99css.com/144/6983728c0b74c7000133ae6cWed, 11 Nov 2009 23:42:07 GMT

via What Beautiful HTML Code Looks Like

]]><![CDATA[用 HTML 5 来提升性能]]>

Google 网站管理员 Jens Meiert 发表了一篇《Using HTML 5 for performance improvements》，大部分内容在《Reducing
the file size of HTML documents》(中文版)中都有提及，新增的部分为async(和 defer)，以下为该段的翻译：

async 和 defer 使用在 script 元素上。

要解释为什么这些属性会提升性能，最好是看一下未使用时发生了什么 — 各自的脚本在用户代理(浏览器，下同)继续解析页面前将被提取并直接执行，有时这个行为是我们想要的，有时不是。

新的 async 属性允许各自的脚本在可用时异步执行。HTML 4 中已经包含 defer 属性，指出 defer

]]>https://www.99css.com/56/6983728c0b74c7000133ae63Fri, 02 Oct 2009 13:25:00 GMT

Google 网站管理员 Jens Meiert 发表了一篇《Using HTML 5 for performance improvements》，大部分内容在《Reducing
the file size of HTML documents》(中文版)中都有提及，新增的部分为async(和 defer)，以下为该段的翻译：

async 和 defer 使用在 script 元素上。

要解释为什么这些属性会提升性能，最好是看一下未使用时发生了什么 — 各自的脚本在用户代理(浏览器，下同)继续解析页面前将被提取并直接执行，有时这个行为是我们想要的，有时不是。

新的 async 属性允许各自的脚本在可用时异步执行。HTML 4 中已经包含 defer 属性，指出 defer “对用户代理提供一个暗示：脚本不产生任何文档内容(比如，在Javascript 中没有 document.write )，这样，用户代理会继续解析并渲染”。

如果不使用 async 属性而只使用 defer，脚本在页面解析完成时已经执行。即使指定了 async 属性，也可同时指定defer 属性。这使得那些旧的只理解defer 的浏览器来回退 defer 行为而非默认的同步阻塞行为。

]]><![CDATA[[翻译]减小 HTML 文件]]>

改善网站速度的一个很明显的方法是减小 HTML 文件的大小。有一些方法，比如：硬压缩（rigid compression），acupuncture-like ID 及改变 class 名（译注：这一句不是很确定，原文：There are several ways to do this, from rigid compression to acupuncture-like ID and class name

]]>https://www.99css.com/37/6983728c0b74c7000133ae55Mon, 29 Jun 2009 13:48:00 GMT

改善网站速度的一个很明显的方法是减小 HTML 文件的大小。有一些方法，比如：硬压缩（rigid compression），acupuncture-like ID 及改变 class 名（译注：这一句不是很确定，原文：There are several ways to do this, from rigid compression to acupuncture-like ID and class name changes）。下面是一些我们总结的使 HTML 标记更精简的方法。

译注：上面是引用 youtube 的视频，请翻墙观看。

HTML 4

HTML （非XHTML），MIME type 为 text/html ，允许省略一些标签。通过
HTML 4 DTD，你可以省略以下标签（那些所谓可避免的元素，这里用删除线加以标记（感谢一楼的翻译））

</area>

</base>

<body>

</body>

</br>

</col>

</colgroup>

</dd>

</dt>

<head>

</head>

</hr>

<html>

</html>

</img>

</input>

</li>

</link>

</meta>

</option>

</p>

</param>

<tbody>

</tbody>

</td>

</tfoot>

</th>

</thead>

</tr>

比如，你的代码是

<li>List item</li>

可以写为

<li>List item

又比如段落要以

</p>

结尾，你可以只写

<p>My paragraph

甚至可以去掉 html，head，body（把这作为你的编码规范之前请确保这会令你舒服）。

省略标签后 HTML 依然有效，同时减小了文件大小。对一般的页面来说，可以节省 5-20%。

HTML 5

正在发展中的 HTML 5 提供了一些减小文件大小的方法。

比如，页面文档类型声明

<!DOCTYPE html>

对比

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

很显然 HTML 5 的 DTD 更短。

当为页面指定编码时，HTML 5 很易用而且更短：

<meta charset="utf-8">

代替

<meta http-equiv="content-type" content="text/html; charset=utf-8">

通常情况下，浏览器会正确处理 HTML。

另外，在今天的 HTML 5 中，你可以去除声明 MIME 类型的 type 属性，比如

type="text/css"

或

type="text/javascript"

你可以用

<script>

替代

<script type="text/javascript">

用

<style>

替代

<style type="text/css">

在所有类型的页面中（甚至是 XHTHML）你可以省略

type="text/css"

HTML 5 使这一切变得更简单。

同时使用上面所有的方法会使文件节省 10%-20%（甚至更多），这取决于你的编码风格和页面中的文本内容数量。代码将更干净，访问者会更快的获取网站内容。在隐私中心项目中我们采用很多这类技术，节省了原始文件大小的20%。

]]><![CDATA[[翻译]谨慎使用 Iframe]]>

使用 iframe 可以轻易的调用其他网站的页面，但应谨慎使用。它比创建其他 DOM 元素（包括 style 和 script）多耗费数十甚至数百倍的性能。增加100个不同元素的时间对比显示iframe 是多么耗费性能：

使用 iframe 的页面通常没有这么多 iframe，所以创建 DOM 的时间不用多虑。更值得关心的是 onload 事件和连接池。

iframe 阻塞 onload

window 的 onload 事件尽快执行非常重要。这会让浏览器的载入进度指示器完成，用户依据此判断页面是否已经加载完。而 onload 事件延迟，会让用户感觉页面变慢。

window 的 onload 事件直到它所包含的所有

]]>https://www.99css.com/36/6983728c0b74c7000133ae54Sun, 28 Jun 2009 15:37:00 GMT

使用 iframe 可以轻易的调用其他网站的页面，但应谨慎使用。它比创建其他 DOM 元素（包括 style 和 script）多耗费数十甚至数百倍的性能。增加100个不同元素的时间对比显示iframe 是多么耗费性能：

使用 iframe 的页面通常没有这么多 iframe，所以创建 DOM 的时间不用多虑。更值得关心的是 onload 事件和连接池。

iframe 阻塞 onload

window 的 onload 事件尽快执行非常重要。这会让浏览器的载入进度指示器完成，用户依据此判断页面是否已经加载完。而 onload 事件延迟，会让用户感觉页面变慢。

window 的 onload 事件直到它所包含的所有 iframe，以及所有 iframe 中的资源完全加载完成后才会触发。在 Safari 和 Chrome中，用 javascritpt 动态的给 iframe 的 src 赋值可以避免这种阻塞行为。

一个连接池

对每个 web 服务器来说，浏览器只打开极少的几个连接数。老的浏览器，包括 IE 6/7 和 Firefox 2，每个主机只有2个连接。在新的浏览器中，连接数增加鸟。Safari3+ 和 Opera 9+ 增至4个，Chrome 1+ 、IE 8 及 Firefox 3 增至6个。对比表格详见《并行连接数总结》。

人们可能期望每个 iframe 有单独的连接池，但并非如此。在大多数浏览器中，连接被主页面和它的 iframe 所共享，这意味着有可能 iframe 中的资源占用了可用连接而阻塞了主页面的资源加载。如果iframe 中的内容同等重要，或比主页面更重要，这很好。然而在通常情况下 iframe 中的内容对页面来说不太重要，iframe 占用连接数是不可取的。一个解决方案是在优先级更高的资源下载完成后再动态的给iframe 的 src 赋值。

美国的10大网站中有5个使用了 iframe。它们多数用来加载广告。这不是很合适，但可以理解，这是一个简便的在内容中插入广告的途径。在很多情况下，使用 iframe是合理的。但要意识到这对你的页面的性能影响。非必要时，请谨慎使用。

]]>