HTML 小知识点整理

W3C标准

DOCTYPE 是 document type 的简写，用来说明你用的 XHTML 或者 HTML 是什么版本。其中的 DTD (例如 xhtml1-transitional.dtd)叫文档类型定义，里面包含了文档的规则，浏览器就根据你定义的 DTD 来解释你页面的标识，并展现出来。

说说你对语义化的理解？

• 去掉或者丢失样式的时候能够让页面呈现出清晰的结构
• 有利于 SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息（爬虫依赖于标签来确定上下文和各个关键字的权重）；
• 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
• 便于团队开发和维护，更具可读性。

Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?

• 声明位于文档中的最前面，处于 html 标签之前。告知浏览器以何种模式来渲染文档。
• 严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。
• 在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
• DOCTYPE 不存在或格式不正确会导致文档以混杂模式呈现。

你知道多少种 Doctype 文档类型？

• 该标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的
  HTML 文档。
• HTML 4.01 规定了三种文档类型：Strict、Transitional 以及 Frameset。
• XHTML 1.0 规定了三种 XML 文档类型：Strict、Transitional 以及 Frameset。Standards （标准）模式（也就是严格呈现模式）用于呈现遵循最新标准的网页，而 Quirks （包容）模式（也就是松散呈现模式或者兼容模式）用于呈现为传统浏览器而设计的网页。

HTML 与 XHTML——二者有什么区别

• 所有的标记都必须要有一个相应的结束标记
• 所有标签的元素和属性的名字都必须使用小写
• 所有的 XML 标记都必须合理嵌套
• 所有的属性必须用引号""括起来
• 把所有< 、 & 特殊符号用编码表示
• 给所有属性赋一个值
• 不要在注释内容中使“--”
• 图片必须有说明文字

常见兼容性问题

• png24 位的图片在 iE6 浏览器上出现背景，解决方案是做成 PNG8，也可以引用一段脚本处理。
• 浏览器默认的 margin 和 padding 不同。解决方案是加一个全局的 *{margin:0;padding:0;}
• 浮动 ie 产生的双倍距离（IE6 双边距问题：在 IE6 下，如果对元素设置了浮动，同时又设置了margin-left 或 margin-right，margin 值会加倍。）
  #box{ float:left; width:10px; margin:0 0 0 10px;}，这种情况之下 IE 会产生 20px 的距离，解决方案是在 float 的标签样式控制中加入 _display:inline; 将其转化为行内属性。(_ 这个符号只有 ie6 会识别)

  /*
   * 渐进识别的方式，从总体中逐渐排除局部。
   * 首先，巧妙的使用“\9”这一标记，将IE游览器从所有情况中分离出来。   
   * 接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。
  */
  css
      .bb{
         background-color:#f1ee18;/*所有识别*/
        .background-color:#00deff\9; /*IE6、7、8识别*/
        +background-color:#a200ff;/*IE6、7识别*/
        _background-color:#1e0bd1;/*IE6识别*/ 
      } 

• IE 下，可以使用获取常规属性的方法来获取自定义属性，也可以使用 getAttribute() 获取自定义属性；Firefox 下，只能使用 getAttribute() 获取自定义属性。解决方法：统一通过 getAttribute() 获取自定义属性。
• IE 下，event 对象有 x、y 属性，但是没有 pageX、pageY 属性； Firefox 下，event 对象有 pageX、pageY 属性,但是没有 x、y 属性。解决方法:（条件注释）缺点是在 IE 浏览器下可能会增加额外的 HTTP 请求数。
• Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示, 可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。
• 超链接访问过后 hover 样式就不出现了，被点击访问过的超链接样式不再具有 hover 和 active 了。解决方法是改变 CSS 属性的排列顺序：L-V-H-A : link visited hover active。
• 怪异模式问题：漏写 DTD 声明，Firefox 仍然会按照标准模式来解析网页，但在 IE 中会触发怪异模式。为避免怪异模式给我们带来不必要的麻烦，最好养成书写 DTD 声明的好习惯 <doctype html>。
• 上下 margin 重合问题，ie 和 ff 都存在，相邻的两个 div 的 margin-left 和 margin-right 不会重合，但是 margin-top 和 margin-bottom 却会发生重合。解决方法，养成良好的代码编写习惯，同时采用 margin-top 或者同时采用 margin-bottom。

DOM 操作——怎样添加、移除、移动、复制、创建和查找节点。

• 创建新节点
  1. createDocumentFragment() // 创建一个 DOM 片段
  2. createElement() // 创建一个具体的元素
  3. createTextNode() // 创建一个文本节点
• 添加、移除、替换、插入
  1. appendChild()
  2. removeChild()
  3. replaceChild()
  4. insertBefore() // 在已有的子节点前插入一个新的子节点
• 查找
  1. getElementsByTagName() // 通过标签名称
  2. getElementsByName() // 通过元素的 Name 属性的值(IE容错能力较强，会得到一个数组，其中包括id等于name值的)
  3. getElementById() // 通过元素Id，唯一

HTML标签的相关操作判断

SVG 与 HTML5 的 canvas 各有什么优点？