HTML 面试常见知识点

原文->最近刚弄的个人博客：
http://hellopan.top/2017/10/15/html-knowledge-points/

intro

对HTML和CSS的平时容易忽略或忘记的小知识点做点总结，内容大都是从网上各种面试题还有一些文章里拷来的，有时间看看可以加深自己记忆，希望对自己和大家都有帮助。内容会不断更新…

html

HTML 和 Body 的区别

哪些全局样式应该应用在 HTML
- font-size rem
- background-color 将 background-color 应用到以后，即便 里的元素没有占满视口，背景颜色也会蔓延到整个视口。给 html 设置 background-color 可以解决这个问题。
- height: 100%
如果 及其子元素的高度需要设置为窗口高度时， 元素上也需要添加

哪些全局样式应该应用在 Body
- background
- margin-bottom margin-left margin-right margin-top
- font

JavaScript中html 对应 document.documentElement、body 对应 document.body

Doctype作用

声明位于位于HTML文档中的第一行，处于 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。

标准模式与兼容模式

标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行。
在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。
简单的说，就是尽可能的显示能显示的东西给用户看。

inline block void元素

（1）行内元素有：a b span img input select strong（强调的语气）
（2）块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
（3）常见的空元素：br hr img input link meta

link和@import

（1）link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS;
（2）页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
（3）import是CSS2.1提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题;
（4）link支持使用Javascript控制DOM去改变样式；而@import不支持;

<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="icon" sizes="any" mask href="//www.baidu.com/img/baidu.svg">
<link rel="search" type="application/opensearchdescription+xml" href="/content-search.xml" title="百度搜索" />

rel rev

a 标签的可选属性 rel 和 rev 分别表示源文档与目标文档之间正式的关系和方向。rel 属性指定从源文档到目标文档的关系，而 rev 属性则指定从目标文档到源文档的关系。这两种属性可以在 a 标签中同时使用。

<a href="part.html" rel="next" rev="prev">

浏览器内核

主要分成两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。
- 渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。
- JS引擎则：解析和执行javascript来实现网页的动态效果。
Trident内核：IE,MaxThon,TT,The World,360,搜狗浏览器等。[又称MSHTML]
Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等
Presto内核：Opera7及以上。 [Opera内核原为：Presto，现为：Blink;]
Webkit内核：Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）]

html5新特性 移除的元素

HTML5 现在已经不是 SGML 的子集
- 主要是关于图像，位置，存储，多任务等功能的增加。
绘画 canvas;
用于媒介回放的 video 和 audio 元素;
本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失;
sessionStorage 的数据在浏览器关闭后自动删除;
语意化更好的内容元素，比如 article、footer、header、nav、section;
表单控件，calendar、date、time、email、url、search;
新的技术webworker, websocket, Geolocation;
- 移除的元素：
纯表现的元素：basefont，big，center，font, s，strike，tt，u;
对可用性产生负面影响的元素：frame，frameset，noframes；

HTML语义化

• 让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;
• 即使在没有样式CSS情况下也以一种文档格式显示;
• 搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO;
• 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

manifest

首先manifest是一个后缀名为minifest的文件，在文件中定义那些需要缓存的文件，支持manifest的浏览器，会将按照manifest文件的规则，像文件保存在本地，从而在没有网络链接的情况下，也能访问页面。
html新增了一个manifest属性，可以用来指定当前页面的manifest文件。
创建一个和html同名的manifest文件，比如页面为index.html，那么可以建一个index.manifest的文件，然后给index.html的html标签添加如下属性即可
一个典型的manifest文件代码结构:
CACHE:（必须）
标识出哪些文件需要缓存，可以是相对路径也可以是绝对路径。
NETWORK:（可选）
这一部分是要绕过缓存直接读取的文件，可以使用通配符＊。
FALLBACK:（可选）
指定了一个后备页面，当资源无法访问时，浏览器会使用该页面。该段落的每条记录都列出两个 URI—第一个表示资源，第二个表示后备页面。两个 URI 都必须使用相对路径并且与清单文件同源。可以使用通配符。

CACHE MANIFEST
#version 1.3
CACHE:    
    test.css
NETWORK:
    *
FALLBACK:
    *.html /404.html

cookies，sessionStorage 和 localStorage

• cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）。
  cookie数据大小不能超过4k。
  设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
• sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
  sessionStorage和localStorage也有存储大小的限制可以达到5M或更大。
• localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
• sessionStorage 数据在当前浏览器窗口关闭后自动删除。

iframe有那些缺点

iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。
1. iframe会阻塞主页面的Onload事件；
2. 搜索引擎的检索程序无法解读这种页面，不利于SEO;
3. iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。
使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript动态给iframe添加src属性值，这样可以绕开以上两个问题。

Page Visibility API

• doument.hidden：表示页面是否隐藏的布尔值。页面隐藏包括 页面在后台标签页中 或者 浏览器最小化（注意，页面被其他软件遮盖并不算隐藏，比如打开的 sublime 遮住了浏览器）
• document.visibilityState：表示下面 4 个可能状态的值
  
  • hidden：页面在后台标签页中或者浏览器最小化
  • visible：页面在前台标签页中
  • prerender：页面在屏幕外执行预渲染处理 document.hidden 的值为 true
  • unloaded：页面正在从内存中卸载
• Visibilitychange 事件：当文档从可见变为不可见或者从不可见变为可见时，会触发该事件。
  这样，我们可以监听 Visibilitychange 事件，当该事件触发时，获取 document.hidden 的值，根据该值进行页面一些事件的处理。

document.addEventListener('visibilitychange', function() {
  var isHidden = document.hidden;
  if (isHidden) {
    // 动画停止
    // 服务器轮询停止 等等
  } else {
    // 动画开始
    // 服务器轮询
  }
});

title与h1 b与strong i与em

• title属性没有明确意义只表示是个标题，h1则表示层次明确的标题，对页面信息的抓取也有很大的影响；
• strong是标明重点内容，有语气加强的含义，使用阅读设备阅读网络时：< strong >会重读，而< B >是展示强调内容。
• i内容展示为斜体，em表示强调的文本；

end