前端面经——HTML篇

HTML语义化

语义化优点：

• 语义化的HTML就是正确的标签做正确的事情，能够便于开发者阅读和写出更优雅的代码的同时让网络爬虫很好地解析。

  1、为了在没有css代码时，也能呈现很好的内容结构，代码结构，以至于达到没有编程基础的非技术人员，也能看懂一二。（其实，就是为了不穿CSS外衣，裸奔依然好看）。

  2、提高用户体验，比如：title，alt用于解释名词和图片信息。

  3、利于SEO，语义化能和搜索引擎建立良好的联系，有利于爬虫抓取更多的有效信息。爬虫依赖于标签来确定上下文和各个关键字的权重。

  4、方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以语义的方式来渲染网页。

  5、便于团队开发和维护，语义化更具可读性，如果遵循W3C标准的团队都遵循这个标准，可以减少差异化，利于规范化。

Html语义化结构的注意点

h1~h6 ，作为标题使用，并且依据重要性递减，h1 是最高的等级

不要使用纯样式标签，如：b、font、u等，改用css设置

尽可能少的使用没有语义的div和span元素

ul、ol、li，ul 无序列表

dl、dt、dd，dl 就是“定义列表”

需要强调的文本，可以包含在strong或者em标签中（浏览器预设样式，能用CSS指定就不用他们），strong默认样式是加粗（不要用b，因为没语义），em是斜体（不用i同b）

在对语义要求不明显时，技能使用div也能使用p,那就使用p，以为p默认有上下边距，可以兼容特殊终端

table、td、th、caption， (X)HTML中的表格不再是用来布局 使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头标题用th，内容单元格用td；

html5新特性

1. 语义化标签

2. 新表单类型

3. 视频和音频

4. Canvas绘图

5. SVG

6. 拖放（Drag 和 drop）

7. 地理定位

8. 离线存储(manifest)

   CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存

   NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存

   FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）

9. Web 存储

10. WebSocket

11. Web Workers

常用的meta头

• meta标签是head部的一个辅助性标签，提供关于 HTML 文档的元数据。它并不会显示在页面上，但对于机器是可读的。可用于浏览器（如何显示内容或重新加载页面），搜索引擎（SEO），或其他 web 服务。
• meta标签里的数据是供机器解读的，其主要作用有：搜索引擎优化（SEO），定义页面使用语言，自动刷新并指向新的页面，实现网页转换时的动态效果，控制页面缓冲，网页定级评价，控制网页显示的窗口等等。
• http-equiv属性

1. charset 用以说明网页制作所使用的文字以及语言
2. cache-control、Pragma、Expires 设置网页的过期时间，一旦过期则必须到服务器上重新获取。
3. refresh 定时让网页在指定的时间n内，跳转到页面
4. set-cookie Cookie设定，如果网页过期，存盘的cookie将被删除。

• name属性

<!-- 设定字符集 -->
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 
<!-- 页面关键词 keywords -->
<meta name="keywords" content="your keywords">
 
<!-- 页面描述内容 description -->
<meta name="description" content="your description">
 
<!-- 定义网页作者 author -->
<meta name="author" content="author,email address">
 
<!-- 定义网页搜索引擎索引方式，robotterms 是一组使用英文逗号「,」分割的值，通常有如下几种取值：none，noindex，nofollow，all，index和follow。 -->
<meta name="robots" content="index,follow">
 
<!-- 优先使用最新的chrome版本 -->
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
 
<!-- 禁止自动翻译 -->
<meta name="google" value="notranslate">
 
<!-- 禁止转码 -->
<meta http-equiv="Cache-Control" content="no-transform">
 
<!-- 选择使用的浏览器解析内核 -->
<meta name="renderer" content="webkit|ie-comp|ie-stand">
 
<!-- 移动端 -->
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection"content="telephone=no, email=no" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" /><!-- 删除苹果默认的工具栏和菜单栏 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" /><!-- 设置苹果工具栏颜色 -->
<meta name="format-detection" content="telphone=no, email=no" /><!-- 忽略页面中的数字识别为电话，忽略email识别 -->
<!-- 启用360浏览器的极速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">

如何控制屏幕缩放，像素比的了解

主要通过meta头里面的viewpoint属性，宽度一般设为设备宽度

initial-scale：初识缩放，即页面打开时的初始缩放程度

maximum-scale：允许的最大缩放程度

minimum-scale：允许的最小缩放程度

user-scalable：用户是否可以调整缩放，是一个布尔值。

像素比：设备像素和css像素

设备像素比dpr=物理像素/css像素

html的渲染解析知识，比如为什么css放在前面，js放在后面，怎么理解并行加载串行执行？

说到这那我们就有必要先了解一下网站加载的整个完整过程了。

1.首先浏览器从服务器接收到html代码，然后开始解析html

2.构建DOM树（根据html代码自顶向下进行构建），并且在同时构建渲染树

3.遇到js文件加载执行，将阻塞DOM树的构建；遇到css文件，将阻塞渲染树的构建

（script标签中的defer属性：构建DOM树的过程和js文件的加载异步（并行）进行，但是js文件执行需要在DOM树构建完成之后

script标签中的async属性：构建DOM树、渲染树的过程和js文件的加载和执行异步（并行）进行）

为什么要对css，js的放置位置进行调整？

从以上过程可以知道，当js文件放在head中时，浏览器构建DOM树的时候遇到js文件加载会阻塞，也就是说，浏览器不会加载body中的标签，一旦这个js文件的数量和内容都比较大，那么就会造成刚刚小明遇到的那种情况，就不会给用户一个十分良好的可视化回馈，而在前端开发中，给予用户的可视化体验。

综上所述，script标签最好放在标签的前面，因为放在所有body中的标签后面就不会出现网页加载时出现空白的情况，可以持续的给用户提供视觉反馈，同时在有些情况下，会降低错误的发生。

而css标签应该放在标签之间，因为如果放在标签的前面，那么当DOM树构建完成了，渲染树才构建，那么当渲染树构建完成，浏览器不得不再重新渲染整个页面，这样造成了资源的浪费。效率也不高。如果放在之间，浏览器边构建边渲染，效率要高的多。

介绍一下你对浏览器内核的理解？

主要分成两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。
渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。

JS引擎则：解析和执行javascript来实现网页的动态效果。
最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。

HTML5如何监听video的全屏和退出全屏？

window.resize

function checkFull(){
　var isFull = document.fullscreenEnabled || window.fullScreen || document.webkitIsFullScreen || document.msFullscreenEnabled;
　if(isFull === undefined) isFull = false;
　return isFull;
}

href和src有什么区别

href（hyperReference）即超文本引用：当浏览器遇到href时，会并行的地下载资源，不会阻塞页面解析，例如我们使用引入CSS，浏览器会并行地下载CSS而不阻塞页面解析. 因此我们在引入CSS时建议使用而不是@import

<link href="style.css" rel="stylesheet" />

src（resource）即资源，当浏览器遇到src时，会暂停页面解析，直到该资源下载或执行完毕，这也是script标签之所以放底部的原因

<script src="script.js"></script>