常用的浏览器内核

  • IE：trident内核
  • Firefox：gecko内核
  • Safari：webkit内核
  • Opera：以前是presto内核，现已改用Google Chrome的Blink内核
  • Chrome：Blink

DOCTYPE

Doctype是HTML5的文档声明，它可以告诉浏览器，使用哪一个HTML版本标准解析文档。浏览器渲染有两种模式（可通过document.compatMode获取）

  • CSS1Compat：标准模式，默认模式，浏览器使用W3C的标准解析渲染页面。
  • BackCompat：怪异模式，浏览器将开启最大兼容模式来解析网页，这样不仅会降低解析效率，还会在解析过程中产生难以预知的bug。

html语义化

语义化是指根据内容的结构化，选择合适的标签（用正确的标签做正确的事）
优点：

  • 有利于SEO
  • 可读性强，有利于开发和维护

常见的语义化标签

1
2
3
4
5
6
7
<header></header>  头部
<nav></nav>  导航栏
<section></section>  区块（有语义化的div）
<main></main>  主要区域
<article></article>  主要内容
<aside></aside>  侧边栏
<footer></footer>  底部

strong 与 em有什么区别

  • strong：粗体强调标签，表示内容的重要性，全局强调，不会引起语义的变化
  • em：斜体强调标签，表示内容的强调点，局部强调，会引起语义的变化

src和href的区别

src和href都是用来引用外部的资源，区别如下：

  • src：表示对资源的引用，通常用于img、video、audio、script元素，它指向的内容会嵌入到当前标签所在的位置。src会将其指向的资源下载并应⽤到⽂档内，如请求js脚本。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执⾏完毕，所以⼀般js脚本会放在页面底部。
  • href：超文本引用，指向网络资源，当浏览器识别到它指向的⽂件时，就会并⾏下载资源，不会停⽌对当前⽂档的处理，通常用于a、link元素。

script标签中defer和async的区别

  • <script>：浏览器会立即加载并执行相应的脚本，不会等待后续加载的文档元素，读取到就会开始加载和执行，这样就阻塞了后续文档的加载
  • <script defer>：多个带defer属性的标签按照加载顺序执行。加载后续文档过程和js脚本的加载（仅加载不执行）是并行进行的（异步），js脚本需要等到文档所有的元素都解析完成之后才执行。（DOMContentLoaded事件触发执行之前）
  • <script async>：表示后续文档的加载和执行与js脚本的加载和执行是并行进行的（异步），但是不能保证加载顺序

常用的meta标签

在SEO中，TDK其实就是title、description、keywords这三个标签

  • charset，用来描述HTML文档的编码类型
    1
    <meta charset="UTF-8" >
  • keywords，页面关键词：
    1
    <meta name="keywords" content="关键词" />
  • description，页面描述
    1
    <meta name="description" content="页面描述内容" />
  • refresh，页面重定向和刷新
    1
    <meta http-equiv="refresh" content="0;url=" />
  • viewport，适配移动端，可以控制视口的大小和比例
    1
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    content参数：
    width viewport ：宽度(数值/device-width)
    height viewport ：高度(数值/device-height)
    initial-scale ：初始缩放比例
    maximum-scale ：最大缩放比例
    minimum-scale ：最小缩放比例
    user-scalable ：是否允许用户缩放(yes/no）
  • 搜索引擎索引方式：
    1
    <meta name="robots" content="index,follow" />
    content参数：
    all ：文件将被检索，且页面上的链接可以被查询
    none ：文件将不被检索，且页面上的链接不可以被查询
    index ：文件将被检索
    follow ：页面上的链接可以被查询
    noindex ：文件将不被检索
    nofollow ：页面上的链接不可以被查询

iframe的作用以及优缺点

iframe也称作嵌入式框架，可以把一个网页的框架和内容嵌入到现有的网页中。
优点：

  • 可以用来处理加载缓慢的内容，比如：广告
  • 使脚本可以并行下载
  • 可以实现跨子域通信

缺点：

  • iframe会阻塞主页面的Onload事件
  • iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。但是可以通过JS动态给ifame添加src属性值来解决这个问题，也可以解决iframe会阻塞主页面的Onload事件的问题
  • 会产生很多页面，不易管理
  • 浏览器的后退按钮没有作用
  • 无法被一些搜索引擎识别

img的srcset属性

响应式页面中根据屏幕密度设置不同的图片，用法如下：

1
<img src="image-1.png" srcset="image-2.png 2x" />

在屏幕密度为1x的情况下加载image-1.png, 屏幕密度为2x时加载image-2.png。
为了解决加载过慢问题，有了新的srcset标准
1
<img src="image-128.png" srcset="image-128.png 128w, image-256.png 256w, image-512.png 512w" sizes="(max-width: 360px) 340px, 128px" />

其中srcset指定图片的地址和对应的图片质量。sizes用来设置图片的尺寸零界点。对于 srcset 中的 w 单位，可以理解成图片质量。如果可视区域小于这个质量的值，就可以使用。浏览器会自动选择一个最小的可用图片。

处理HTML5新标签兼容问题

  • document.createElement(tagName)可以让浏览器识别新的标签，还可以为新标签添加CSS样式
  • 在head标签中调用以下代码 
    1
    <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>

a元素的作用

href属性中的url可以是浏览器支持的任何协议

  • 手机拨号<a href="tel:119">119</a>
  • 发短信<a href="sms:110">110</a>
  • 邮件
  • 锚点
  • 下载文件（a标签所对应的资源浏览器无法解析，浏览器就会选择将其下载下来）

HTML5 drag API

  • dragstart：事件主体是被拖放元素，在开始拖放被拖放元素时触发。
  • darg：事件主体是被拖放元素，在正在拖放被拖放元素时触发。
  • dragenter：事件主体是目标元素，在被拖放元素进入某元素时触发。
  • dragover：事件主体是目标元素，在被拖放在某元素内移动时触发。
  • dragleave：事件主体是目标元素，在被拖放元素移出目标元素是触发。
  • drop：事件主体是目标元素，在目标元素完全接受被拖放元素时触发。
  • dragend：事件主体是被拖放元素，在整个拖放操作结束时触发。

为什么利用多个域名来存储网站资源会更有效？

  • CDN 缓存更方便
  • 突破浏览器并发限制
  • 节约 cookie 带宽
  • 节约主域名的连接数，优化页面响应速度
  • 防止不必要的安全问题

html 常见兼容性问题

  1. IE6双边bug问题。 使用_display:inline
  2. 3像素问题。 使用 float 引起的，使用 dislpay:inline -3px
  3. 超链接 hover 点击后失效。 使用正确的书写顺序 link visited hover active
  4. IE6不支持 PNG 透明背景。 IE6 下使用 gif 图片
  5. IE9以下浏览器不能使用opacity
    Firefox/Chrome/Safari/Opera浏览器使用opacity；IE浏览器使用filter
    filter: alpha(opacity:70); /用了ie滤镜,可以兼容ie/