html 部分
1,Doctype 作用? 标准模式与兼容模式有什么区别?
声明位于 HTML 文档的第一行, 处于标签之前. 用来告知浏览器的解析器用什么文档标准解析这个文档. DOCTYPE 不存在或格式不正确会导致文档以兼容模式呈现
标准模式: 排版和 JS 运作方式都是以该浏览器支持的最高标准运行.
兼容模式: 页面以宽松的向后兼容的方式显示, 模拟老式浏览器的行为以防止站点无法运行.
例子: 1,width 不同 在严格模式中, width 是内容宽度(content), 但是在兼容模式中, width 是(元素的实际宽度),(怪异盒模型是 margin 之外是 width 的范围)
2,html5 为什么只需要写<!DOCTYPE>
HTML5 不基于 SGML, 因此不需要对 DTD 进行引用, 但是需要 doctype 来规范浏览器的行为
所以, html5 只有一种:<!DOCTYPE> 但是 html4.01 有三种, 分别是 strict(不包含展示性和弃用元素, 不允许框架集),transitional(包含展示性和弃用元素, 不允许框架集),frameset(允许框架集)
3, 行内元素有哪些? 块级元素有哪些? 空 (void) 元素有哪些?
常见的行内元素有: a,b,span,img(我曾以为是 block),input,strong,select
常见的块级元素有: div,ul(无序),ol(有序),li,p 等
常见的空元素:<br><hr><link><script>
空元素定义: HTML 元素的内容就是其两个标签之间的 content, 所以, 标签之间没有内容的就是空元素
4, 页面导入样式时, 使用 link 和 @import 有什么区别
写法上:
- <link rel="stylesheet" href="路径" />
- <style type="text/CSS">
- @import '路径'
- </style>
本质上: link 属于 XHTML 标签, 除了加载 CSS 之外, 还能定义 RSS, 定义 rel 连接属性等作用. 而 @import 是 CSS 提供的, 只能用于加载 CSS
解析上: link 是跟着页面加载同时加载的, 但是 @import 会等到页面加载完再加载
兼容上:@import IE5 以上才能识别, 无限制
5, 介绍一下你对浏览器内核的理解?
主要分为两部分:
渲染引擎
JS 引擎
渲染引擎: 取得网页的内容(HTML,xml, 图片), 构造 cssom 树, 计算网页的显示方式, 比如各元素宽高, 然后输出至显示器或打印机.
JS 引擎: 解析和执行 JavaScript 来实现网页的动态效果
6, 常见的浏览器内核有哪些(背记)?
Trident 内核: IE,MaxThon,TT,The World,360, 搜狗浏览器等.[又称 MSHTML]
Gecko 内核: Netscape6 及以上版本, FF,MozillaSuite/SeaMonkey 等
Presto 内核: Opera7 及以上. [Opera 内核原为: Presto, 现为: Blink;]
webkit 内核: Safari,Chrome 等. [ Chrome 的: Blink(WebKit 的分支)]
*Blink 是 Chrome 使用的, webkit 的简化版本, 但是效率等都较之前有了提升
详细文章: 浏览器内核的解析和对比
7,html5 有哪些新特性, 移除了那些元素? 如何处理 HTML5 新标签的浏览器兼容问题? 如何区分 HTML 和 HTML5?
实现上: h5 不再是 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;
处理兼容性: IE8/IE7/IE6 支持通过 document.createElement 方法产生的标签, 可以利用这一特性让这些浏览器支持 HTML5 新标签, 浏览器支持新标签后, 还需要添加标签默认的样式.
也可以使用 html5shim, 可以让 IE9 或更低版本能支持 html5
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
如何区分 HTML5: DOCTYPE 声明 \ 新增的结构元素 \ 功能元素
8, 对 HTML 语义化的理解(了解)
用正确的标签做正确的事情.
HTML 语义化让页面的内容结构化, 结构更清晰, 便于对浏览器, 搜索引擎解析;
HTML 语义化让页面的内容结构化, 结构更清晰, 便于对浏览器, 搜索引擎解析;
搜索引擎的爬虫也依赖于 HTML 标记来确定上下文和各个关键字的权重, 利于 SEO;
使阅读源代码的人对网站更容易将网站分块, 便于阅读维护理解.
9,HTML5 的离线储存怎么使用, 工作原理能不能解释一下?
在用户没有与因特网连接时, 可以正常访问站点或应用, 在用户与因特网连接时, 更新用户机器上的缓存文件. 原理: HTML5 的离线存储是基于一个新建的. appcache 文件的缓存机制(不是存储技术), 通过这个文件上的解析清单离线存储资源, 这些资源就会像 cookie 一样被存储了下来. 之后当网络在处于离线状态下时, 浏览器会通过被离线存储的数据进行页面展示.
如何使用:
1, 页面头部像下面一样加入一个 manifest 的属性;
2, 在 cache.manifest 文件的编写离线存储的资源; CACHE MANIFEST #v0.11 CACHE: JS/App.JS CSS/style.CSS NETWORK: resourse/logo.PNG FALLBACK: //offline.HTML
3, 在离线状态时, 操作 Windows.applicationCache 进行需求实现.
10, 浏览器是怎么对 HTML5 的离线储存资源进行管理和加载的呢?(这个比上面重要)
在线的情况下, 浏览器发现 HTML 头部有 manifest 属性, 它会请求 manifest 文件, 如果是第一次访问 App, 那么浏览器就会根据 manifest 文件的内容下载相应的资源并且进行离线存储. 如果已经访问过 App 并且资源已经离线存储了, 那么浏览器就会使用离线的资源加载页面, 然后浏览器会对比新的 manifest 文件与旧的 manifest 文件, 如果文件没有发生改变, 就不做任何操作, 如果文件改变了, 那么就会重新下载文件中的资源并进行离线存储.
离线的情况下, 浏览器就直接使用离线存储的资源.
11, 请描述一下 cookies,sessionStorage 和 localStorage 的区别?
cookie 是网站为了标示用户身份而储存在用户本地终端 (Client Side) 上的数据(通常经过加密).
cookie 数据始终在同源的 http 请求中携带(即使不需要), 记会在浏览器和服务器间来回传递.
sessionStorage 和 localStorage 不会自动把数据发给服务器, 仅在本地保存.
存储大小:
cookie 数据大小不能超过 4k.
sessionStorage 和 localStorage 虽然也有存储大小的限制, 但比 cookie 大得多, 可以达到 5M 或更大.
有期时间:
localStorage 存储持久数据, 浏览器关闭后数据不丢失除非主动删除数据;
sessionStorage 数据在当前浏览器窗口关闭后自动删除.
cookie 设置的 cookie 过期时间之前一直有效, 即使窗口或浏览器关闭
12,iframe 有那些缺点?
iframe 会阻塞主页面的 Onload 事件;
搜索引擎的检索程序无法解读这种页面, 不利于 SEO;
iframe 和主页面共享连接池, 而浏览器对相同域的连接有限制, 所以会影响页面的并行加载.
使用 iframe 之前需要考虑这两个缺点. 如果需要使用 iframe, 最好是通过 JavaScript
动态给 iframe 添加 src 属性值, 这样可以绕开以上两个问题.
13,Label 的作用是什么? 是怎么用的?
用来关联某个标签, 可以是表单标签, 也可以是 button, 这样就可以直接点击 label 的范围来触发绑定标签的事件
用法:
14,HTML5 的 form 如何关闭自动完成功能?
自动完成: 当你给输入框输入内容时, 浏览器会从之前同名输入框的历史记录中查找出类似的内容并列在输入框下面.
给 form 或者该 input 设置 autocomplete=off.
经过实验, 提交之后, 历史记录才会存储, 当然, 必须是 name 相同的 input 才会共享历史记录
如何实现浏览器内多个标签页之前的通信(阿里)?
WebSocket,SharedWorder(需要实现试试)
也可以调用 localstorage,cookies 等本地存储方式
webSocket 如何兼容低浏览器?(阿里)(暂时没有实现)
Adobe Flash Socket ,ActiveX HTMLFile (IE) , 基于 multipart 编码发送 XHR , 基于长轮询的 XHR
(... 未完待续)
来源: https://juejin.im/post/5c5ab7dae51d4501333fc60f