DN-01：前端杂记

DN 系列：平时遇到、觉得记一下也好的杂事，多数和 Web 相关。

Cookie 的限制

IE 中每个域名的 cookie 总数受限：

1. IE6 及更早最多 20 个；
2. IE7 起最多 50 个；
3. Firefox 最多 50 个；
4. Chrome 和 Safari 没有硬性上限。

此外 IE / Opera 会定时清理不常用的 cookie，Firefox 则会随机清理。相比之下，几乎所有浏览器都支持的 userData 不会被随便清理，单条上限 128 KB。

Cookie 的好处

走 SSL 的话不容易被拦截；即便被拦了，只要有效期控制得好，cookie 本身的价值也很有限。不存重要信息的 cookie 用起来很方便。

display:none vs visibility:hidden

• display:none：隐藏元素，且不在文档布局中给它留位置，周围元素会合拢，相当于不存在。
• visibility:hidden：隐藏元素，但仍占用原来的空间。

link vs @import

1. <link> 是 HTML 标签，@import 是 CSS 规则。
2. 页面加载时 <link> 会一起加载，而 @import 引用的 CSS 要等页面加载完才加载。
3. @import 只在 IE5 及以上可识别；<link> 没有兼容问题。
4. <link> 的样式权重高于 @import。

position:absolute 和 float 的异同

• 共同点：对行内元素设置 float 或 position:absolute，元素会脱离文档流，并可以指定宽高。
• 不同点：float 仍会占据空间，影响其它元素布局；position:absolute 会完全脱离布局，可能覆盖其它元素。

CSS 选择器

1. id 选择器（#my-id）
2. 类选择器（.my-class-name）
3. 标签选择器（div、h1、p）
4. 相邻兄弟选择器（h1 + p）
5. 子选择器（ul > li）
6. 后代选择器（li a）
7. 通配符（*）
8. 属性选择器（a[rel="external"]）
9. 伪类选择器（a:hover、li:nth-child）

CSS3 新增伪类

• p:first-of-type：父元素中第一个 <p>。
• p:last-of-type：父元素中最后一个 <p>。
• p:only-of-type：父元素中唯一的 <p>。
• p:only-child：父元素中作为唯一子元素的 <p>。
• p:nth-child(2)：父元素中第二个子元素，且是 <p>。
• :enabled / :disabled：表单控件启用状态。
• :checked：单选框或复选框被选中。

XML vs JSON

1. 体积上 JSON 比 XML 小，传输更快。
2. JSON 与 JavaScript 天然互通，解析处理都更顺。
3. 描述性上 JSON 比 XML 弱。
4. 解析速度上 JSON 远快于 XML。

Doctype

• <!DOCTYPE> 可声明三种 DTD 类型，分别对应严格、过渡和基于框架的 HTML 文档。
• HTML 4.01 定义了三种：Strict、Transitional、Frameset。
• XHTML 1.0 同样定义了三种 XML 文档类型：Strict、Transitional、Frameset。
• Standards 模式（严格模式）用于渲染遵循最新标准的网页。Quirks 模式（兼容模式）用于渲染为旧浏览器设计的页面。

HTML vs XHTML

1. 所有标签都必须有闭合。
2. 元素和属性名必须全小写。
3. 所有标签必须正确嵌套。
4. 所有属性值必须用引号括起来。
5. < 等特殊符号要用实体编码。
6. 所有属性都必须有值。
7. 注释里不能出现 --。
8. 图片必须有说明文字（alt）。