Web前端面试总结(HTML篇)

1.Html语义化的理解

1.Html语义化就是使用正确的标签进行页面开发，比如段落就用p标签，标题就用h1标签，文章用article标签，视频用video标签等。
2.Html语义化让页面的内容结构化，易于浏览器和搜索引擎的解析。即使没有引入CSS文件也是以文档方式显示，易于阅读。
3.搜索引擎的爬虫也是基于Html标记来确定上下文和各个关键字的权重，有利于SEO。
4.开发者更加容易对网站进行分块，易于维护。

2.Doctype作用？标准模式与兼容模式的区别？

Doctype声明位于HTML文档的第一行，处于html标签之前。用于告诉浏览器的解析器用什么文档标准解析该文档。Doctype不存在或者格式错误会让文档以兼容模式呈现。
标准模式的排版和JS的运作模式是以该浏览器所支持的最高标准运行。兼容模式是以宽松的向后兼容的方式显示，模拟老式浏览器的行为以防止站点无法工作。

3.HTML5为什么只需要写<!Doctype HTML>?

HTML5不是基于SGML，不需要引用DTD，但是需要Doctype来规范浏览器的行为(让浏览器以自己的方式运行)

4.meta viewport 是做什么用的，怎么写？

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1">

meta viewport是专门为移动设备设计的，在移动设备下，网页不需要缩放和滚动条才能查看网页所有内容。meta标签就是告诉浏览器, 不要在移动端显示的时候缩放。
name:表示供移动设备使用
content:定义了viewport的属性
width:表示移动设备下显示的宽度为设备宽度(device-width)
user-scalable:表示用户缩放能力, no表示不允许用户缩放网页
initial-scale:表示设备与视口的缩放比率
maximum-scale/minimun-scale:分别表示缩放的最大最小值,maximum必须大于或等于minimum

5.HTML5的新特性，移除了哪写元素？

新特性

1.拖拽释放(Drag and drop)Api
2.语义化更好的内容标签（header,nav,footer,aside,article,section）
3.音频、视频 API(audio,video)
4.画布(Canvas) API
5.地理(Geolocation) API
6.本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；sessionStorage 的数据在浏览器关闭后自动删除
7.表单控件，calendar、date、time、email、url、search
8.新的技术 webworker, websocket, Geolocation

移除元素

1.纯表现的元素：basefont，big，center，font, s，strike，tt，u；
2.对可用性产生负面影响的元素：frame，frameset，noframes；

支持HTML5新标签

IE8/IE7/IE6 支持通过 document.createElement 方法产生的标签， 可以利用这一特性让这些浏览器支持 HTML5 新标签， 浏览器支持新标签后，还需要添加标签默认的样式。
最好的方式是直接使用成熟的框架、使用最多的是 html5shim 框架

<!--[if lt IE 9]>
  <script>
    src = "http://html5shim.googlecode.com/svn/trunk/html5.js";
  </script>
<![endif]-->

6.HTML和XHTML的区别？更应该用哪一个并说出理由。

应该使用XHTML，因为XHTML是XML重写了HTML的规范，比HTML更加严格。
1.XHTML中所有的标记必须有一个相应的结束标签；
2.XHTML中的所有标签的元素和属性名字必须使用小写；
3.所有XML标记必须合理嵌套；
4.所有属性必须使网页统一风格，如果头部和版本都是一样的，就可以写成一个页面，用 iframe 来嵌套，可以增加代码的可重用。用双引号""括起来；
5.所有<和&特殊符号用编码表示；
6.给所有属性附一个值；
7.不要在注释内容中使用“--”；
8.图片必须使用说明文字。

7.iframe框架有哪些优缺点？

优点：
1.iframe能够原封不动地把嵌入的页面展现出来；
2.如果有多个网页引用 iframe，那么你只需要修改 iframe 的内容，就可以实现调用的每一个页面内容的更改，方便快捷；
3.网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用 iframe 来嵌套，可以增加代码的可重用。
4.如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由 iframe 来解决。

缺点：
1.框架结构中出现各种滚动条；
2.iframe 会阻塞主页面的 Onload 事件；
3.搜索引擎的检索程序无法解读这种页面，不利于 SEO；
4.iframe 和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。

8.HTML5的 form 如何关闭自动完成功能？

将不想要自动完成的 form 或 input 设置为 autocomplete=off

9.Label 的作用是什么？是怎么用的？

label 标签来定义表单控制间的关系,当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。
有两种用法：一种是 id 绑定，一种是嵌套。

//通过id绑定
<label for="Name">Number:</label>
<input type=“text“name="Name" id="Name"/>

//嵌套
<label>Date:<input type="text" name="B"/></label>

10.title 与 h1 的区别、b 与 strong 的区别、i 与 em 的区别？

title用于网站信息标题，突出网站标题或关键字，一个网站可以有多个title，seo权重高于h1；h1概括的是文章主题，一个页面最好只用一个h1。
b这个标签对应 bold，即文本加粗，其目的仅仅是为了加粗显示文本。.strong这个标签意思是加强字符的语气，表示该文本比较重要，提醒读者／终端注意。
i为了斜体而斜体，em为了标明重点而斜体，且对于搜索引擎来说strong和em比b和i要重视的多

11.请描述下 SEO 中的 TDK？

在 SEO 中，TDK 其实就是 title、description、keywords 这三个标签，title 标题标签，description 描述标签，keywords 关键词标签

12.简述一下 src 与 href 的区别

src 用于引用资源，替换当前元素；href 用于在当前文档和引用资源之间确立联系。

13.对于 WEB 标准以及 W3C 的理解

web 标准简单来说可以分为结构层(HTML)、表现层(CSS)和行为层(JS)。
W3C 对 web 标准提出了规范化的要求，包含如下几点：
1.对于结构要求：（标签规范可以提高搜索引擎对页面的抓取效率，对 SEO 很有帮助）
1）标签字母要小写
2）标签要闭合
3）标签不允许随意嵌套
2.对于 css 和 js 来说
1）尽量使用外链 css 样式表和 js 脚本。是结构、表现和行为分为三块，符合规范。同时提高页面渲染速度，提高用户的体验。
2）样式尽量少用行内样式表，使结构与表现分离，标签的 id 和 class 等属性命名要做到见文知义，标签越少，加载越快，用户体验提高，代码维护简单，便于改版。
3）不需要变动页面内容，便可提供打印版本而不需要复制内容，提高网站易用性。

14.HTML5 引入什么新的表单属性？

Datalist datetime output keygen date month week time number range emailurl

15..对 web 标准可用性、可访问性、可维护性的理解

可用性：产品是否容易上手，用户能否完成任务，效率如何，以及这过程中用户的主观感受可好，是从用户的角度来看产品的质量。可用性好意味着产品质量高，是企业的核心竞争力。
可访问性：Web 内容对于残障用户的可阅读和可理解性
可维护性：一般包含两个层次，一是当系统出现问题时，快速定位并解决问题的成本，成本低则可维护性好。二是代码是否容易被人理解，是否容易修改和增强功能。

16.DOM 和 BOM 有什么区别

DOM就是文档对象模型。DOM 是为了操作文档出现的 API，document 是其的一个对象。DOM 和文档有关，这里的文档指的是网页，也就是 html 文档。DOM 和浏览器无关，他关注的是网页本身的内容。
BOM就是浏览器对象模型。BOM 是为了操作浏览器出现的 API，window 是其的一个对象。window 对象既为 javascript 访问浏览器提供 API，同时在 ECMAScript 中充当 Global 对象

17.Canvas 和 SVG 有什么区别？

Canvas通过 Javascript 来绘制 2D 图形。 是逐像素进行渲染的。 其位置发生改变，会重新进行绘制。
SVG一种使用 XML 描述的 2D 图形的语言。 SVG 基于 XML 意味着，SVG DOM 中的每个元素都是可用的，可以为某个元素附加 Javascript 事件处理器。 在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

18.网页验证码是干嘛的，是为了解决什么安全问题？

区分用户是计算机还是人的公共全自动程序。可以防止恶意破解密码、刷票、论坛灌水。
有效防止黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试。

19.为什么用多个域名存储网站资源更有效？

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

20.页面可见性（Page Visibility）API 可以有哪些用途？

document.hidden返回一个布尔值，如果是 true, 表示页面可见，false 则表示页面隐藏。 不同页面之间来回切换，触发 visibilitychange 事件。document.visibilityState,表示页面所处的状态。动画，视频，音频都可以在页面显示时打开，在页面隐藏时关闭

document.addEventListener("visibilitychange", function() {
  if (document.hidden) {
    document.title = "hidden";
  } else {
    document.title = "visibile";
  }
});

21.div+css 的布局较 table 布局有什么优点？

1.改版的时候更方便 只要改 css 文件。
2.页面加载速度更快、结构化清晰、页面显示简洁。
3.表现与结构相分离。
4.易于优化（seo）搜索引擎更友好，排名更容易靠前。

22.对网页标准和标准制定机构重要性的理解。

降低开发难度及开发成本，减少各种 BUG、安全问题， 提高网站易用性。

23.什么是微格式吗？

微格式（Microformats）是一种让机器可读的语义化 XHTML 词汇的集合，是结构化数据的开放标准。是为特殊应用而制定的特殊格式。
优点：将智能数据添加到网页上，让网站内容在搜索引擎结果界面可以显示额外的提示。

24.HTML常见兼容性问题？

1.双边距bug(float 引起的)，解决办法: 使用 display解决
2.三像素问题(float 引起的)，解决办法: 使用 dislpay:inline -3px
3.超链接hover点击后失效，解决办法: 使用正确的书写顺序 link visited hover active
4.z-index 问题，解决办法: 给父级添加 position:relative
5.png 透明 ，解决办法: 使用 js 代码
6.min-height 最小高度 ，解决办法: !Important 解决
7.select 在 ie6 下遮盖，解决办法: 使用 iframe 嵌套
8.为什么没有办法定义 1px 左右的宽度容器，解决办法: （IE6 默认的行高造成的，使用 over:hidden,zoom:0.08 line-height:1px）
9.IE5-8 不支持 opacity，解决办法：

.opacity {
  opacity: 0.4;
  filter: alpha(opacity=60); /_ for IE5-7 _/
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; /_ for IE 8_/
}

10.IE6 不支持png透明背景，解决办法: IE6下使用gif图片

25.前端需要注意哪些 SEO?

1.合理的 title、description、keywords：搜索对着三项的权重逐个减小，title 值强调重点即可，重要关键词出现不要超过 2 次，而且要靠前，不同页面 title 要有所不同；description 把页面内容高度概括，长度合适，不可过分堆砌关键词，不同页面 description 有所不同；keywords 列举出重要关键词即可
2.语义化的 HTML 代码，符合 W3C 规范：语义化代码让搜索引擎容易理解网页
3.重要内容 HTML 代码放在最前：搜索引擎抓取 HTML 顺序是从上到下，有的搜索引擎对抓取长度有限制，保证重要内容一定会被抓取
4.重要内容不要用 js 输出：爬虫不会执行 js 获取内容
5.少用 iframe：搜索引擎不会抓取 iframe 中的内容
6.非装饰性图片必须加 alt
7.提高网站速度：网站速度是搜索引擎排序的一个重要指标

26.HTML5 的离线储存怎么使用，工作原理能不能解释一下？

在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件。
原理：HTML5 的离线存储是基于一个新建的.appcache 文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像 cookie 一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。
使用方法:在头部加一个 manifest 属性

<!DOCTYPE html>
<html manifest="cache.manifest">
  ...
</html>

cache.manifest 文件的书写方式:

CACHE MANIFEST
#v0.11

CACHE:

js/app.js
css/style.css

NETWORK:
resourse/logo.png

FALLBACK:
/ /offline.html

27.浏览器是怎么对 HTML5 的离线储存资源进行管理和加载的呢?

在线的情况下，浏览器发现 html 头部有 manifest 属性，它会请求 manifest 文件，如果是第一次访问 app，那么浏览器就会根据 manifest 文件的内容下载相应的资源并且进行离线存储。如果已经访问过 app 并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的 manifest 文件与旧的 manifest 文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。 离线的情况下，浏览器就直接使用离线存储的资源。

28.HTML 全局属性(global attribute)有哪些?

  • accesskey:设置快捷键，提供快速访问元素
  • class:为元素设置类标识，多个类名用空格分开，css和 javascript 可通过 class 属性获取元素
  • contenteditable: 指定元素内容是否可编辑
  • contextmenu: 自定义鼠标右键弹出菜单内容
  • data-*: 为元素增加自定义属性
  • dir: 设置元素文本方向
  • draggable: 设置元素是否可拖拽
  • dropzone: 设置元素拖放类型： copy, move, link
  • hidden: 表示一个元素是否与文档。样式上会导致元素不显示，但是不能用这个属性实现样式效果
  • id: 元素 id，文档内唯一
  • lang: 元素内容的的语言
  • spellcheck: 是否启动拼写和语法检查
  • style: 行内 css 样式
  • tabindex: 设置元素可以获得焦点，通过 tab 可以导航
  • title: 元素相关的建议信息
  • translate: 元素和子孙节点内容是否需要本地化

29.HTML5 存储类型有什么？

Media API、Text Track API、Application Cache API、User Interaction、Data Transfer API、Command API、Constraint Validation API、History API

30.为什么把 CSS 的<link>标签放在<head></head>之间?把 JS 的<script>标签恰好放在</body>之前?

把<link>标签放在<head></head>之间是规范要求的内容,可以让页面逐步呈现，提高了用户体验。将样式表放在文档底部附近，会使许多浏览器（包括 Internet Explorer）不能逐步呈现页面。一些浏览器会阻止渲染，以避免在页面样式发生变化时，重新绘制页面中的元素。这种做法可以防止呈现给用户空白的页面或没有样式的内容。

脚本在下载和执行期间会阻止 HTML 解析。把<script>标签放在底部，保证 HTML 首先完成解析，将页面尽早呈现给用户。当你的脚本里包含document.write()时。但是现在，document.write()不推荐使用。同时，将<script>标签放在底部，意味着浏览器不能开始下载脚本，直到整个文档（document）被解析。对此比较好的做法是，<script>使用defer属性，放在<head>中。

31.什么是渐进式渲染？

渐进式渲染是用于提高网页性能（尤其是提高用户感知的加载速度），以尽快呈现页面的技术。
以下方法均可实现渐进式渲染：
图片懒加载——页面上的图片不会一次性全部加载。当用户滚动页面到图片部分时，JavaScript 将加载并显示图像。
确定显示内容的优先级（分层次渲染）——为了尽快将页面呈现给用户，页面只包含基本的最少量的 CSS、脚本和内容，然后可以使用延迟加载脚本或监听DOMContentLoaded/load事件加载其他资源和内容。
异步加载 HTML 片段——当页面通过后台渲染时，把 HTML 拆分，通过异步请求，分块发送给浏览器。

32.DOM Tree是如何构建的？

1.通过HTML 解释器将网络或者本地磁盘获取的 HTML 网页和资源从字节流解释成 DOM 树结构。
2.在 HTML 解释器的工作过程中，可能会有 JavaScript 代码需要执行，它发生在将字符串解释成词语之后、创建各种节点的时候。这也是为什么全局执行的 JavaScript 代码不能访问 DOM 的原因（因为 DOM 树还没有被创建完）。

33.HTML5行内元素有哪些,块级元素有哪些, 空元素有哪些?

(1)行内元素

  • a - 锚点
  • abbr - 缩写
  • acronym - 首字
  • b - 粗体 ( 不推荐 )
  • bdo - bidi override
  • big - 大字体
  • br - 换行
  • cite - 引用
  • code - 计算机代码 ( 在引用源码的时候需要 )
  • dfn - 定义字段
  • em - 强调
  • font - 字体设定 ( 不推荐 )
  • i - 斜体
  • img - 图片
  • input - 输入框
  • kbd - 定义键盘文本
  • label - 表格标签
  • q - 短引用
  • s - 中划线 ( 不推荐 )
  • samp - 定义范例计算机代码
  • select - 项目选择
  • small - 小字体文本
  • span - 常用内联容器，定义文本内区块
  • strike - 中划线
  • strong - 粗体强调
  • sub - 下标
  • sup - 上标
  • textarea - 多行文本输入框
  • tt - 电传文本
  • u - 下划线
  • var - 定义变量
    (2)块元素 (block element)
  • address - 地址
  • blockquote - 块引用
  • center - 居中对齐块
  • dir - 目录列表
  • div - 常用块级容易，也是 css layout 的主要标签
  • dl - 定义列表
  • fieldset - form控制组
  • form - 交互表单
  • h1 - 大标题
  • h2 - 副标题
  • h3 - 3级标题
  • h4 - 4级标题
  • h5 - 5级标题
  • h6 - 6级标题
  • hr - 水平分隔线
  • isindex - input prompt
  • menu - 菜单列表
  • noframes - frames可选内容，（对于不支持 frame 的浏览器显示此区块内容
  • noscript - ）可选脚本内容（对于不支持 script 的浏览器显示此内容）
  • ol - 排序表单
  • p - 段落
  • pre - 格式化文本
  • table - 表格
  • ul - 非排序列表
    可变元素
    可变元素为根据上下文语境决定该元素为块元素或者内联元素。
  • applet - java applet
  • button - 按钮
  • del - 删除文本
  • iframe - inline frame
  • ins - 插入的文本
  • map - 图片区块 (map)
  • object - object对象
  • script - 客户端脚本
    (3)空元素 ( 在 HTML[1] 元素中，没有内容的 HTML 元素被称为空元素 )
    br //换行
    hr //分隔线
    <input> //文本框等
    <img> //图片
    <link> <meta>

34.请你描述一下 cookies，sessionStorage 和 localStorage 的区别?

sessionStorage 和 localStorage 是 HTML5 Web Storage API 提供的，可以方便的在 web 请求之间保存数据。有了本地数据，就可以避免数据在浏览器和服务器间不必要地来回传递。
sessionStorage、 localStorage 、 cookie 都是在浏览器端存储的数据，其中 sessionStorage 的概念很特别，引入了一个“浏览器窗口”的概念。 sessionStorage 是在同源的同窗口（或 tab ）中，始终存在的数据。也就是说只要这个浏览器窗口没有关闭，即使刷新页面或进入同源另一页面，数据仍然存在。关闭窗口后， sessionStorage 即被销毁。同时“独立”打开的不同窗口，即使是同一页面， sessionStorage 对象也是不同的
cookies会发送到服务器端。其余两个不会。
Microsoft 指出 Internet Explorer 8 增加 cookie 限制为每个域名 50 个，但 IE7 似乎也允许每个域名 50 个 cookie 。 Firefox 每个域名 cookie 限制为 50 个。 Opera 每个域名 cookie 限制为 30 个。 Firefox 和 Safari 允许 cookie 多达 4097 个字节，包括名（ name ）、值（ value ）和等号。 Opera 许 cookie 多达 4096 个字节，包括：名（ name ）、值（ value ）和等号。 Internet Explorer 允许 cookie 多达 4095 个字节，包括：名（ name ）、值（ value ）和等号。

区别：

  • Cookie
  • 每个域名存储量比较小（各浏览器不同，大致 4K ）
  • 所有域名的存储量有限制（各浏览器不同，大致 4K ）
  • 有个数限制（各浏览器不同）
  • 会随请求发送到服务器
  • LocalStorage
  • 永久存储
  • 单个域名存储量比较大（推荐 5MB ，各浏览器不同）
  • 总体数量无限制
  • SessionStorage
  • 只在 Session 内有效
  • 存储量更大（推荐没有限制，但是实际上各浏览器也不同）

35.说说超链接target属性的取值和作用？

target这个属性指定所链接的页面在浏览器窗口中的打开方式。
它的参数值主要有：
a、 _blank ：在新浏览器窗口中打开链接文件
b、 _parent ：将链接的文件载入含有该链接框架的父框架集或父窗口中。如果含有该链接的框架不是嵌套的，则在浏览器全屏窗口中载入链接的文件，就像 _self 参数。
c、 _self ：在同一框架或窗口中打开所链接的文档。此参数为默认值，通常不用指定。
d、 _top ：在当前的整个浏览器窗口中打开所链接的文档，因而会删除所有框架。

  1. link和@import的区别?

两者都是外部引用CSS的方式，但是存在一定的区别：
区别1： link 是 XHTML 标签，除了加载 CSS 外，还可以定义 RSS 等其他事务； @import 属于 CSS 范畴，只能加载 CSS 。
区别2： link 引用 CSS 时，在页面载入时同时加载； @import 需要页面网页完全载入以后加载。
区别3： link 是 XHTML 标签，无兼容问题； @import 是在 CSS2.1 提出的，低版本的浏览器不支持。
区别4： link 支持使用 Javascript 控制 DOM 去改变样式；而 @import 不支持。

37.data-属性的作用是什么？

data-为H5新增的为前端开发者提供自定义的属性，这些属性集可以通过对象的 dataset 属性获取，不支持该属性的浏览器可以通过 getAttribute 方法获取 :
当没有合适的属性和元素时，自定义的 data 属性是能够存储页面或 App 的私有的自定义数据。

38.如何在页面上实现一个圆形的可点击区域？

1.border-radius (css3)
对于圆形，最直接的方法想到的就是 css3 的圆角属性，这个属性可以将 html 元素的形状设置为圆形，这之后你想对该圆形区域设置什么事件就设置什么事件(当然包括点击)。
2.通过事件坐标来实现（js）
也就是通过 js 来进行一个区域判断，进而简介地的形成可点区域，以下给出主要的 js 测试代码：

// 获取目标元素
var box = document.getElementById("box");

// 对目标元素target的圆形区域进行一个点击事件绑定
function bindClickOnCircleArea(target, callback) {
  target.onclick = function(e) {
    e = e || window.event;

    // target中心点的坐标
    var x1 = 100;
    var y1 = 100;

    // 事件源坐标
    var x2 = e.offsetX;
    var y2 = e.offsetY;

    // 校验是否在圆形点击区，在的话就执行callback回调
    // 计算事件触发点与target中心的位置
    var len = Math.abs(Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2)));
    // 通过半径进行校验
    if (len <= 100) {
      callback();
    } else {
      alert("111");
    }
  };
}

// 执行
bindClickOnCircleArea(box, function() {
  alert("222");
});

3.通过 map 加 area

<img src="../imgs/test.jpg" width="200" border="0" usemap="#Map" />
<map name="Map" id="Map">
  <area
    shape="circle"
    coords="100,100,100"
    href="http://www.baidu.com"
    target="_blank"
  />
</map>

39.实现不使用 border 画出1px高的线，在不同浏览器的标准模式与怪异模式下都能保持一致的效果？

<div style="width:100%;height:1px;background-color:black"></div>

40.HTML5标签的作用?

a、使Web页面的内容更加有序和规范
b、使搜索引擎更加容易按照HTML5规则识别出有效的内容
c、使Web页面更接近于一种数据字段和表

41.说几个几个很实用的BOM属性对象方法?

(1)location对象
location.href-- 返回或设置当前文档的URL
location.search -- 返回URL中的查询字符串部分。
location.hash -- 返回URL#后面的内容，如果没有#，返回空
location.host -- 返回URL中的域名部分。
location.pathname -- 返回URL的域名后的部分。
location.port -- 返回URL中的端口部分。
location.protocol -- 返回URL中的协议部分
location.assign -- 设置当前文档的URL
location.replace() -- 设置当前文档的URL，并且在history对象的地址列表中移除这个URL location.replace(url);
location.reload() -- 重载当前页面
(2)history对象
history.go() -- 前进或后退指定的页面数 history.go(num);
history.back() -- 后退一页
history.forward() -- 前进一页
(3)Navigator对象
navigator.userAgent -- 返回用户代理头的字符串表示(就是包括浏览器版本信息等的字符串)
navigator.cookieEnabled -- 返回浏览器是否支持(启用)cookie。

42.说一下HTML5 drag api

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

43.Cookie和session的区别

  1. cookie数据存放在客户的浏览器上，session数据放在服务器上。
  2. cookie不是很安全，别人可以分析存放在本地的COOKIE并进行COOKIE欺骗
    考虑到安全应当使用session。
  3. session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能
    考虑到减轻服务器性能方面，应当使用COOKIE。
  4. 单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。

44.浏览器在生成页面的时候，会生成那两颗树？

构造两棵树，DOM树和CSSOM规则树
当浏览器接收到服务器相应来的HTML文档后，会遍历文档节点，生成DOM树，
CSSOM规则树由浏览器解析CSS文件生成，

45.iframe通信，同源和不同源两种情况，多少种方法?

  • 同域：即父子页面相互调用
    一、父页面调用子页面
    1、先得到子页面的document
    document.getElementById('FrameId').contentWindow.document
    2、得到子页面的window
    document.getElementById('FrameId').contentWindow.window
    重载子页面：document.getElementById('FrameId').contentWindow.window.location.reload(true);
    或者 $('#FrameId').attr('src','../list');
    3、得到子页面的的变量
    doucment. iframe的name属性值 . 子页面变量名称 （document.frameName.temp）
    二、子页面调用父页面
    1、父页面document ： window.parent.document
    2、获得父页面变量 ： parent.变量名称
    3、调用事件 ： window.parent.XXX();
  • 跨域：
    主域：由两个或两个以上的字母构成，中间由点号隔开，整个域名只有1个点号
    csdn.net
    子域：是在主域名之下的域名，域名内容会有多个点号
  • 未跨主域，跨子域
    两个域的js文件中设置document.domain=主域名 即可
  • 跨主域
    location.hash
    (B操作A)
    1、动态改变location.hash，iframe不会重载
    2、无论跨域与否，iframe内可以获取自己的location.hash
    3、只要域名相同就能通信，即使ABC三层嵌套
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 220,492评论 6赞 513
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 94,048评论 3赞 396
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 166,927评论 0赞 358
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 59,293评论 1赞 295
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 68,309评论 6赞 397
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 52,024评论 1赞 308
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,638评论 3赞 420
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 39,546评论 0赞 276
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 46,073评论 1赞 319
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,188评论 3赞 340
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,321评论 1赞 352
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,998评论 5赞 347
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 41,678评论 3赞 331
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,186评论 0赞 23
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,303评论 1赞 272
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 48,663评论 3赞 375
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 45,330评论 2赞 358