html « 99css

Posts Tagged: html

Determining IE8′s Document Mode

未分类 — 5 Comments
24
一 10

Web标准中的特殊字符»

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

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

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

更多>>

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

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

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

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

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

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

显示效果：

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

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

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

显示效果如下：

添加新文章 ‹ 99css — WordPress

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

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

测试发现空格还是用 \u0020 表示兼容性和语义最好

我也不是很认同，我的观点是：在html中使用 ，而在css中使用\20才是比较合理的做法:p

延伸阅读

Using HTML Symbol Entities 中文翻译：使用 HTML 字符实体
Character Entity Reference HTML 4
字符引用和空白字符

未分类 — 1 Comment
19
一 10

Hyphens, Underscores, or camelCase?

via Poll Results: Hyphens, Underscores, or camelCase?

未分类 — 1 Comment
11
十一 09

What Beautiful HTML Code Looks Like

via What Beautiful HTML Code Looks Like

未分类 — No Comments
2
十 09

用 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 “对用户代理提供一个暗示：脚本不产生任何文档内容(比如，在Javascript 中没有 document.write )，这样，用户代理会继续解析并渲染”。

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

未分类 — 7 Comments
29
六 09

[翻译]减小 HTML 文件

原文：Reducing the file size of HTML documents
作者：Jens Meiert & Kevin Khaw， Google 网站管理员
翻译：ytzong

改善网站速度的一个很明显的方法是减小 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%。

未分类 — 1 Comment
28
六 09

[翻译]谨慎使用 Iframe

原文：Using Iframes Sparingly
原作者：Steve Souders
翻译：ytzong

使用 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是合理的。但要意识到这对你的页面的性能影响。非必要时，请谨慎使用。

99css