HTML 小知识点整理

作者: 欢欣的膜笛 | 来源:发表于2021-06-04 12:24 被阅读0次

HTML 小知识点整理
html知识点整理
html 知识点整理
HTML知识点整理
HTML知识点整理
html知识点整理
2018 浅谈前端面试那些事
js小知识点
JavaScript DOM编程艺术笔记
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，唯一