这些常见的面试题你知道多少？(十二)HTML5特性新增新的选择器 document.querySelector、do

HTML5特性

新增

新的选择器 document.querySelector、document.querySelectorAll
媒体播放的 video 和 audio 标签，以前⽤的flash实现
本地存储 localStorage 和 sessionStorage
浏览器通知 Notifications
语义化标签，例如 header，nav，footer，section，article 等标签。
地理位置 Geolocation，鉴于隐私性，除⾮⽤户统⼀，否则不可获取⽤户地理位置信息
离线应⽤ manifest
全双⼯通信协议 websocket
浏览器历史对象 history
多任务处理 webworker，运⾏在后台的JS，独⽴于其他脚本，不影响性能
拖拽相关API
增强表单控件 url，date，time，email，calendar，search
⻚⾯可⻅性改变事件 visibilitychange
跨窗⼝通信 PostMessage
表单 FormData 对象
canvas+SVG

移除

纯表现的元素：basefont、big、center、font、 s、strike、tt、u
对可⽤性产⽣负⾯影响的元素：frame、frameset、noframes

src 和 href 的区别

src ⽤于替换当前元素，href ⽤于在当前⽂档和引⽤资源之间确⽴联系。

src 是 source 的缩写，指向外部资源的位置，指向的内容将会嵌⼊到⽂档中当前标签所在位置；
在请求 src 资源时会将其指向的资源下载并应⽤到⽂档内，例如 js 脚本，img 图⽚和 frame 等元素。
当浏览器解析到该元素时，浏览器会对这个⽂件进⾏解析，编译和执⾏，从⽽导致整个⻚⾯加载会被暂停，类似于将所指向资源嵌⼊当前标签内。这也是为什么将js 脚本放在底部⽽不是头部。
href 是 Hypertext Reference 的缩写，指向⽹络资源所在位置，建⽴和当前元素（锚点）或当前⽂档（链接）之间的链接，浏览器遇到 href 就会并⾏下载资源并且不会停⽌对当前⽂档的处理。这也是为什么建议使⽤ link ⽅式来加载 css，⽽不是使⽤@import 。

src 代表这个资源是必备的，必不可少的，最终会嵌⼊到⻚⾯中，⽽ href 是资源的链接。

JS获取元素尺寸和位置

DOM对象

dom.style.XX，这种方式获取的是行内样式设置的一些尺寸位置信息。
clientTop,clientLeft, 获取上边框和左边框的宽度。

// clientTop 40 clientLeft 30
border: 1px solid #000;
border-left-width: 30px;
border-top-width: 40px;

scrollTop,scrollLeft，设置或获取当前元素滚动条滚动的距离。
scrollHight,scrollWidth，获取当前元素的整体宽高，包括滚动条隐藏的部分。这里需要注意，如果是动态加载的长列表，随着内容增多，这个值会不断变化。 如果没有滚动条，那么值将和clientWidth,clientHeight一样。
clientWidth,clientHeight，获取当前元素的padding+content。（如果是笔试题，这里需要注意box-sizing的值，记住padding+content即可）
offsetWidth,offsetHeight，获取当前元素的border+padding+content。
offsetLeft, offsetTop。表示当前元素与offsetParent获取到的元素的偏移距离。offsetParent返回一个指向最近的（指包含层级上的最近）包含该元素的定位元素(相对定位也可以，除了静态定位不行，其他定位都行)或者最近的 table, td, th, body 元素。

注意offsetParent获取的并不是元素的包含块。需要严格按照他的定义来。防止和包含块搞混淆。 如果获取的是包含块，那么下面p.offsetParent就是div了，而不是body。

  <style>
    * {
      padding: 0;
      margin: 0;
    }

    div {
      width: 200px;
      height: 200px;
      border: 1px solid #000;
      margin: 30px;
    }

    p {
      margin: 20px;
      width: 20px;
      height: 20px;
      background: #888;
    }
  </style>
</head>
<body>
  <div>
    <!-- offsetLeft 51 包含块是body ,可以通过offsetParent获取-->
    <p></p>  
  </div>
</body>

event事件对象

clientX,clientY。鼠标作用点相对于浏览器可视区的坐标。不受浏览器窗口的变化而变化。
screenX,screenY。鼠标作用点相对于屏幕的坐标。
offsetX,offsetY。鼠标作用点相对于当前作用元素的左上角坐标。
pageX,pageY。鼠标作用点相对于浏览器可视区的坐标。受滚动条影响。如果未出现滚动条那么和clientX,clientY是一样的效果。

margin 和定位偏移设置，元素如何偏移

定位偏移在元素margin后在进行偏移的。

  <style>
    * {
      padding: 0;
      margin: 0;
    }

    div {
      width: 200px;
      height: 200px;
      border: 1px solid #000;
      margin: 30px;
    }

    p {
      margin: 20%;
      width: 20px;
      height: 20px;
      background: #888;
      position: fixed; /*offsetParent = null*/
      /* 偏移是偏移的整个内容包括margin */
      left: 10px; 
    }
  </style>
</head>
<body>
  <div>
    <!-- offsetLeft 243 包含块是body offsetParent为null-->
    <p></p>  
  </div>

可替换元素

展现效果不由css来控制的元素，这些元素是一种外部对象，他们外观的渲染是独立于css的。css可以影响到可替换元素的位置，但是不会影响到可替换元素自身的内容。例如图片, iframe, 音视频标签,大部分表单标签（select, input, option...）等等。

::after, ::before伪元素也是可替换元素。

iframe

它能够将另一个 HTML 页面嵌入到当前页面中。

优点

重载页面时不需要重载整个页面，只需要重载页面中的一个框架页(减少数据的传输，增加了网页下载速度)
方便制作导航栏，例如qq邮箱导航内容时通过iframe引入，由于ajax的出现，这种方式用处能少了。

缺点

产生很多页面，不利于管理。
引入外部页面，可能会引入css,带来了额外的请求次数。
会阻塞页面加载，window的onload事件需要在所有的iframe加载完毕后才会触发。
浏览器后退按钮无效。
iframe中的内容无法被搜索引擎搜索到。
一些移动端设备无限显示框架。

限制iframe访问另⼀个⻚⾯

设置X-Frame-Options 响应头 ——是否允许当前⽹⻚通过iframe 嵌套进入其他站点，可以防止点击劫持攻击。

deny：完全禁⽌任何⽹⻚嵌套
sameorigin：只允许同源域名访问
allow-from url：允许url的域名可嵌套

设置Content-Security-Policy CSP，内容安全策略，限定⽹⻚允许加载的资源，防范XSS攻击。

"Content-Security-Policy": "frame-ancestors 'self'"//限定iframe的嵌套

判断 window.top ⻚⾯顶级窗⼝和⾃身窗⼝ window.self 是否相等，若不等则是嵌⼊了iframe。

微格式

建立在已有的被广泛采用的标准基础之上的一组简单的、开放的数据格式。

具体表现是把语义嵌入到HTML中，有助于分离式开发，并通过定制一些简单的约定来兼顾HTML文件的人机可读性相当于对web网页进行了语义注解。即通过编写一些语义化内容(例如语义化类名)，让人和机器更有利于读懂代码。更有利于SEO

例如给a标签添加rel属性，表示连接到哪里，就为这个链接添加了具体的结构和意义。

前端在编写HTML,CSS时如何进行SEO

合理设置title, description, keywords
语义化标签使用
非装饰图片必须加上alt
对于不显示的对象谨慎使用display: none;,因为搜索引擎会过滤掉display: none;的内容。可以使用其他方式代替，例如z-index等等。
重要的内容放在HTML前面。搜索引擎是从上到下分析HTML的。
少用iframe，搜索引擎不会抓取iframe内容。

文档声明的作⽤

DOCTYPE是document type (⽂档类型)的缩写。是HTML5中⼀种标准通⽤标记语⾔的⽂档类型声明，告诉浏览器⽂档的类型，便于解析⽂档。 不同的渲染模式会影响浏览器对CSS代码甚⾄JavaScript脚本的解析。它必须声明在HTML⽂档的第⼀⾏。

浏览器渲染⻚⾯的两种模式

CSS1 Compat：标准模式（Strick mode），浏览器使⽤W3C的标准解析渲染⻚⾯。浏览器以其⽀持的最⾼标准呈现⻚⾯。
BackCompat：怪异模式(混杂模式)(Quick mode)，默认模式，⻚⾯以⼀种⽐较宽松的向后兼容的⽅式显示。

HTML和MHTML区别

主要区别在于 MHTML(将 HTML 文件和所有相关资源（如图像、样式表、脚本等）打包成单个文件的格式) 文件是一个单独的文件，包含了 HTML 内容以及所有相关的资源，而 HTML(只包含文本、图像、链接等基本元素的代码,外部资源（如图像、样式表、脚本等）需要单独加载) 文件则是单独的文本文件，资源需要通过外部链接加载。 MHTML 文件可以更方便地保存和传输网页内容，但在某些情况下，可能会导致文件大小增加和加载时间延长。

js精度丢失解决

如果你在开发中存在浮点数计算，那么基本上都会遇见计算结果不准确的问题，比如0.1+0.2=0.30000000000000004,为啥会这样呢？怎么造成的这种结果呢？下面我们来分析一下。

常见问题

在js中整数和浮点数都属于number数据类型，所有的数字都是以64位浮点数形式储存的，即便是整数也是如此，所以1.00在我们打印时会变成1。

常规计算

// 加法
console.log(0.1 + 0.2)
console.log(0.1 + 0.7)
console.log(0.2 + 0.4)
console.log(2.22 + 0.1)
// 0.30000000000000004
// 0.7999999999999999
// 0.6000000000000001
// 2.3200000000000003

// 减法
console.log(1.5 - 1.3)
console.log(0.3 - 0.2)
// 0.19999999999999996
// 0.09999999999999998

// 乘法
console.log(19.9 * 100)
console.log(19.9 * 10 * 10)
console.log(9.7 * 100)
console.log(39.7 * 100)
// 1989.9999999999998
// 1990
// 969.9999999999999
// 3970.0000000000005

// 除法
console.log(0.3 / 0.1)
console.log(0.69 / 10)
// 2.9999999999999996
// 0.06899999999999999

小数乘以10的n次方取整。

console.log(parseInt(0.58 * 100)) // 57

四舍五入保留n位小数

console.log((2.355).toFixed(2)) // 2.35

大整数，整数是按照最大54位计算的。2的53次方 - 1 ~ -(2的53次方 - 1)，超出这个范围就会被舍去精度，所以计算就不准确了。

console.log(190323334242428902) // 190323334242428900
console.log(190323334242428902 === 190323334242428901) // true

为啥会出现这种情况

这个错误的根本原因是：大多数十进制无法正确的转换为二进制。 在计算机上计算时，是将十进制转换为二进制后进行计算，并将计算结果从二进制转换为十进制再次显示。

EcmaScrpt规范定义Number的类型遵循了IEEE754-2008中的64位浮点数规则定义的小数后的有效位数至多为52位导致计算出现精度丢失问题！ 由符号位(1)，指数(11)，尾数(52)3部分组成。

所有采用IEEE754-2008浮点表示法都会造成精度丢失问题，只是其他编程语言封装了方法来避免精度丢失，js弱语言无严格的数据类型，所以精度丢失比较突出。

如何解决呢？

原生的解决方法

通过toFixed方法：使用定点表示法来格式化一个数值。该方法接收digits参数。表示小数点后数字的个数。介于 0 到 20（包括）之间，实现环境可能支持更大范围。如果忽略该参数，则默认为 0。然后返回格式化后的字符串。

    let a = 0.1
    let b = 0.2

    const result = parseFloat((a + b).toFixed(1))

    console.log(typeof result, result) // number 0.3

或者通过 *10 再 ÷10 的操作

    let a = 0.1 + 0.2; // 0.30000000000000004

    a = Math.round (a * 10); // 乘以 10 → 舍入 "3.0000000000000004" → "3"
    a = a / 10; // 3 / 10
    console.log (a); // 0.3

parseFloat()方法对于小数点后全为0的数字会保留整数。

    parseFloat(1.000) // 1

    parseFloat(1.030) // 1.03

这些常见的面试题你知道多少？(十二)

HTML5特性

新增

移除

src 和 href 的区别

JS获取元素尺寸和位置

DOM对象

event事件对象

margin 和定位偏移设置，元素如何偏移

可替换元素

iframe

微格式

前端在编写HTML,CSS时如何进行SEO

文档声明的作⽤

HTML和MHTML区别

js精度丢失解决

常见问题

为啥会出现这种情况

如何解决呢？

参考

往期年度总结

往期文章

专栏文章

这些常见的面试题你知道多少？(十二)

HTML5特性

新增

移除

src 和 href 的区别

JS获取元素尺寸和位置

DOM对象

event事件对象

margin 和 定位偏移设置，元素如何偏移

可替换元素

iframe

微格式

前端在编写HTML,CSS时如何进行SEO

文档声明的作⽤

HTML和MHTML区别

js精度丢失解决

常见问题

为啥会出现这种情况

如何解决呢？

参考

往期年度总结

往期文章

专栏文章

margin 和定位偏移设置，元素如何偏移