门户网站建设要点/网站推广的方式有哪些?
[19] 前端面试题 ------HTML&CSS 篇 (干货)
1. 请描述一下 cookies,sessionStorage 和 localStorage 的区别?
cookie 是网站为了标示用户身份而储存在用户本地终端 (Client Side) 上的数据 (通常经过加密).
cookie 数据始终在同源的 http 请求中携带 (即使不需要), 记会在浏览器和服务器间来回传递.
sessionStorage 和 localStorage 不会自动把数据发给服务器, 仅在本地保存.
存储大小:
cookie 数据大小不能超过 4k.
sessionStorage 和 localStorage 虽然也有存储大小的限制, 但比 cookie 大得多, 可以达到 5M 或更大.
有期时间:
localStorage 存储持久数据, 浏览器关闭后数据不丢失除非主动删除数据;
sessionStorage 数据在当前浏览器窗口关闭后自动删除.
cookie 设置的 cookie 过期时间之前一直有效, 即使窗口或浏览器关闭
2.iframe 有那些缺点?
iframe 会阻塞主页面的 Onload 事件;
搜索引擎的检索程序无法解读这种页面, 不利于 SEO;
iframe 和主页面共享连接池, 而浏览器对相同域的连接有限制, 所以会影响页面的并行加载.
使用 iframe 之前需要考虑这两个缺点. 如果需要使用 iframe, 最好是通过 javascript 动态
给 iframe 添加 src 属性值, 这样可以绕开以上两个问题.
3. 如何实现浏览器内多个标签页之间的通信?
webSocket,SharedWorker
也可以调用 localstorge,cookies 等本地存储方式.
localstorge 另一个浏览上下文里被添加, 修改或删除时, 它都会触发一个事件,
我们通过监听事件, 控制它的值来进行页面信息通信.
注意 quirks:Safari 在无痕模式下设置 localstorge 值时会抛出 QuotaExceededError 的异常.
4. 如何在页面上实现一个圆形的可点击区域?
(1)map+area 或者 svg
(2)border-radius
(3) 纯 js 实现 需要求一个点在不在圆上简单算法, 获取鼠标坐标等等
5. 介绍一下标准的 CSS 的盒子模型? 低版本 IE 的盒子模型有什么不同的?
(1) 有两种, IE 盒子模型, W3C 盒子模型.
(2) 盒模型: 内容 (content), 填充 (padding), 边界 (margin), 边框 (border).
(3) 区 别: IE 的 content 部分把 border 和 padding 计算了进去.
6.CSS 优先级算法如何计算?
优先级就近原则, 同权重情况下样式定义最近者为准;
载入样式以最后载入的定位为准;
优先级为:
!important> id> class> tag
important 比内联优先级高 (style)
7. 为什么要使用 CSS sprites
CSS Sprites 其实就是把网页中一些背景图片整合到一张图片文件中, 再利用 CSS 的 "background-image",
"background-position" 的组合进行背景定位, 这样可以减少很多图片请求的开销,
因为请求耗时比较长; 请求虽然可以并发, 但是如果请求太多会给服务器增加很大的压力.
8.display:none 和 visibility:hidden 的区别?
display:none 隐藏对应的元素, 在文档布局中不再给它分配空间, 它各边的元素会合拢, 就当他从来不存在.
visibility:hidden 隐藏对应的元素, 但是在文档布局中仍保留原来的空间.
9.position 的 absolute 与 fixed 区别
absolute 浮动定位是相对于父级中设置 position 为 relative 或者 absolute 最近的父级元素
fixed 浮动定位是相对于浏览器视窗的
10.IE 8 以下版本的浏览器中的盒模型有什么不同?
IE8 以下浏览器的盒模型中定义的元素的宽高不包括内边距和边框
11. 常用那几种浏览器测试? 有哪些内核 (Layout Engine)?
(Q1) 浏览器: IE,Chrome,FireFox,Safari,Opera.
(Q2) 内核: Trident,Gecko,Presto,Webkit.
12. 说下行内元素和块级元素的区别? 行内块元素的兼容性使用?(IE8 以下)
(Q1) 行内元素: 会在水平方向排列, 不能包含块级元素, 设置 width 无效, height 无效 (可以设置 line-height),
margin 上下无效, padding 上下无效.
块级元素: 各占据一行, 垂直方向排列. 从新行开始结束接着一个断行.
(Q2) 兼容性: display:inline-block;display:inline;zoom:1;
13. 清除浮动有哪些方式? 比较好的方式是哪一种?
(Q1)
(1) 父级 div 定义 height.
(2) 结尾处加空 div 标签 clear:both.
(3) 父级 div 定义伪类: after 和 zoom.
(4) 父级 div 定义 overflow:hidden.
(5) 父级 div 定义 overflow:auto.
(6) 父级 div 也浮动, 需要定义宽度.
(7) 父级 div 定义 display:table.
(8) 结尾处加 br 标签 clear:both.
(Q2) 比较好的是第 3 种方式, 好多网站都这么用.
14.box-sizing 常用的属性有哪些? 分别有什么作用?
(Q1)box-sizing: content-box|border-box|inherit;
(Q2)content-box: 宽度和高度分别应用到元素的内容框.
在宽度和高度之外绘制元素的内边距和边框 (元素默认效果).
border-box: 元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制.
通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度.
15.Doctype 作用? 标准模式与兼容模式各有什么区别?
(Q1) 告知浏览器的解析器用什么文档标准解析这个文档.
DOCTYPE 不存在或格式不正确会导致文档以兼容模式呈现.
(Q2) 标准模式的排版和 JS 运作模式都是以该浏览器支持的最高标准运行.
在兼容模式中, 页面以宽松的向后兼容的方式显示, 模拟老式浏览器的行为以防止站点无法工作.
16.html5 为什么只需要写 ?
HTML5 不基于 SGML, 因此不需要对 DTD 进行引用, 但是需要 doctype 来规范浏览器的行为
(让浏览器按照它们应该的方式来运行). 而 HTML4.01 基于 SGML, 所以需要对 DTD 进行引用,
才能告知浏览器文档所使用的文档类型.
17. 页面导入样式时, 使用 link 和 @import 有什么区别?
(1)link 属于 XHTML 标签, 除了加载 CSS 外, 还能用于定义 RSS, 定义 rel 连接属性等作用;
而 @import 是 CSS 提供的, 只能用于加载 CSS;
(2) 页面被加载的时, link 会同时被加载, 而 @import 引用的 CSS 会等到页面被加载完再加载;
(3)import 是 CSS2.1 提出的, 只在 IE5 以上才能被识别, 而 link 是 XHTML 标签, 无兼容问题;
18. 介绍一下你对浏览器内核的理解?
主要分成两部分: 渲染引擎 (layout engineer 或 Rendering Engine) 和 JS 引擎.
渲染引擎: 负责取得网页的内容 (HTML,XML, 图像等等), 整理讯息 (例如加入 CSS 等),
以及计算网页的显示方式, 然后会输出至显示器或打印机. 浏览器的内核的不同对于网页的语法解释会有不同,
所以渲染的效果也不相同. 所有网页浏览器, 电子邮件客户端以及其它需要编辑, 显示网络内容的应用程序都需要内核.
JS 引擎则: 解析和执行 javascript 来实现网页的动态效果.
最开始渲染引擎和 JS 引擎并没有区分的很明确, 后来 JS 引擎越来越独立, 内核就倾向于只指渲染引擎.
19.html5 有哪些新特性? 如何处理 HTML5 新标签的浏览器兼容问题? 如何区分 HTML 和 HTML5?
(Q1) HTML5 现在已经不是 SGML 的子集, 主要是关于图像, 位置, 存储, 多任务等功能的增加.
(1) 绘画 canvas;
(2) 用于媒介回放的 video 和 audio 元素;
(3) 本地离线存储 localStorage 长期存储数据, 浏览器关闭后数据不丢失;
(4)sessionStorage 的数据在浏览器关闭后自动删除;
(5) 语意化更好的内容元素, 比如 article,footer,header,nav,section;
(6) 表单控件, calendar,date,time,email,url,search;
(7) 新的技术 webworker, websocket, Geolocation;
(Q2)IE8/IE7/IE6 支持通过 document.createElement 方法产生的标签,
可以利用这一特性让这些浏览器支持 HTML5 新标签,
浏览器支持新标签后, 还需要添加标签默认的样式.
当然也可以直接使用成熟的框架, 比如 html5shim;
20. 简述一下你对 HTML 语义化的理解?
用正确的标签做正确的事情.
html 语义化让页面的内容结构化, 结构更清晰, 便于对浏览器, 搜索引擎解析;
即使在没有样式 CSS 情况下也以一种文档格式显示, 并且是容易阅读的;
搜索引擎的爬虫也依赖于 HTML 标记来确定上下文和各个关键字的权重, 利于 SEO;
使阅读源代码的人对网站更容易将网站分块, 便于阅读维护理解.
21.XHTML 和 HTML 有什么区别
HTML 是一种基本的 WEB 网页设计语言, XHTML 是一个基于 XML 的置标语言
最主要的不同:
XHTML 元素必须被正确地嵌套.
XHTML 元素必须被关闭.
标签名必须用小写字母.
XHTML 文档必须拥有根元素.
22. 什么是语义化的 HTML?
直观的认识标签 对于搜索引擎的抓取有好处, 用正确的标签做正确的事情!
html 语义化就是让页面的内容结构化, 便于对浏览器, 搜索引擎解析;
在没有样式 CCS 情况下也以一种文档格式显示, 并且是容易阅读的. 搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重,
利于 SEO.
使阅读源代码的人对网站更容易将网站分块, 便于阅读维护理解.
23. 常见的浏览器内核有哪些?
Trident 内核: IE,MaxThon,TT,The World,360, 搜狗浏览器等.[又称 MSHTML]Gecko 内核: Netscape6 及以上版本,
FF,MozillaSuite/SeaMonkey 等
Presto 内核: Opera7 及以上. [Opera 内核原为: Presto, 现为: Blink;]Webkit 内核: Safari,Chrome 等.
[ Chrome 的: Blink(WebKit 的分支)]
24.HTML5 有哪些新特性, 移除了那些元素? 如何处理 HTML5 新标签的浏览器兼容问题? 如何区分 HTML 和 HTML5?
HTML5 现在已经不是 SGML 的子集, 主要是关于图像, 位置, 存储, 多任务等功能的增加.
绘画 canvas
用于媒介回放的 video 和 audio 元素
本地离线存储 localStorage 长期存储数据, 浏览器关闭后数据不丢失;
sessionStorage 的数据在浏览器关闭后自动删除
语意化更好的内容元素, 比如 article,footer,header,nav,section
表单控件, calendar,date,time,email,url,search
新的技术 webworker, websockt, Geolocation
移除的元素
纯表现的元素: basefont,big,center,font, s,strike,tt,u;
对可用性产生负面影响的元素: frame,frameset,noframes;