面试答辩

1. 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? ?

Trident 内核:IE 系列

Gecko 内核:Firefox

Webkit 内核:Safari

Blink 内核:是基于 Webkit 内核的子项目,使用的浏览器有:

Chrome/opera 等除 IE、Firefox、Safari 之外的几乎所有浏览器

几乎所有国产双内核浏览器(Trident/Blink)如 360、猎豹、qq、百度等

 2. 个 每个 L HTML 文件里开头都有个很重要的东西, Doctype ,知道这是干什么的

吗?

文档声明。

声明位于文档中的最前面的位置,处于  标签之前。此标签可告知浏览器文档使用

哪种 HTML 或 XHTML 规范。(重点:告诉浏览器按照何种规范解析页面)

IE 下如不书写文档声明会使用怪异模式解析网页导致一系列 CSS 兼容性问题。

 3. s div+css 的布局较 e table 布局有什么优点?

正常场景一般都适用 div+CSS 布局,优点:

结构与样式分离

代码语义性好

更符合 HTML 标准规范

SEO 友好

Table 布局的适用场景:

某种原因不方便加载外部 CSS 的场景,例如邮件正文,此时用 table 布局可以在无 css 情况下保持页面布

4. 你能描述一下渐进增强和优雅降级之间的不同吗? 

渐进增强 progressive enhancement:针对低版本浏览器进行构建页面,保证最基本的功能,然后再针

对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级 graceful degradation:一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。

5. 请谈一下你对网页标准和标准制定机构重要性的理解。

网页标准和标准制定机构都是为了能让 web 发展的更‘健康’,开发者遵循统一的标准,降低开发难度,开发成本,SEO 也会更好做,也不会因为滥用代码导致各种 BUG、安全问题,最终提高网站易用性。

6. 为什么利用多个域名来存储网站资源会更有效?

CDN 缓存更方便

突破浏览器并发限制

节约 cookie 带宽

节约主域名的连接数,优化页面响应速度

防止不必要的安全问题

7.你如何理解 L HTML 结构的语义化?

HTML 结构语义化:

更符合 W3C 统一的规范标准,是技术趋势。

没有样式时浏览器的默认样式也能让页面结构很清晰。

对功能障碍用户友好。屏幕阅读器(如果访客有视障)会完全根据你的标记来“读”你的网页。

对其他非主流终端设备友好。例如机顶盒、PDA、各种移动终端。

对 SEO 友好。

8.有哪项方式可以对一个 DOM 设置它的CSS 样式?

外部样式表,引入一个外部 css 文件

内部样式表,将 css 代码放在  标签内部

内联样式,将 css 样式直接定义在 HTML 元素内部

9.CSS 中可以通过哪些属性定义,使得一个 DOM 元素不显示在浏览器可视范

围内?

设置 display 属性为 none,或者设置 visibility 属性为 hidden

设置宽高为 0,设置透明度为 0,设置 z-index 位置在-1000em

设置 text-indent:-9999px;

10.超链接访问过后 r hover 样式就不出现的问题是什么?如何解决?

答案:被点击访问过的超链接样式不再具有 hover 和 active 了,解决方法是改变 CSS 属性的排列顺

序: L-V-H-A(link,visited,hover,active)

11.rgba()和 和 y opacity 的透明效果有什么不同?

rgba()和 opacity 都能实现透明效果,但最大的不同是 opacity 作用于元素,以及元素内的所有内容的透

明度,

而 rgba()只作用于元素的颜色或其背景色。(设置 rgba 透明的元素的子元素不会继承透明效果!)

12.  px 和 和 em 的区别。

px 和 em 都是长度单位,区别是:

px 值固定,容易计算。

em 值不固定,是相对单位,其相对应父级元素的字体大小会调整

13. display:none 与  visibility:hidden 的区别是什么?

display : 隐藏对应的元素但不挤占该元素原来的空间。

visibility: 隐藏对应的元素并且挤占该元素原来的空间。

14.行内元素有哪些? 块级元素有哪些? 

答:块级元素:div p h1 h2 h3 h4 form ul

行内元素: a b br i span input select

15. CSS 的盒子模型?

(1)两种, IE 盒子模型、标准 W3C 盒子模型;IE 的 content 部分包含了 border 和 pading;

(2)盒模型: 内容(content)、填充(padding)、边界(margin)、 边框(border)

16.CSS3 有哪些新特性?

(1) CSS3 实现圆角(border-radius),阴影(box-shadow),

(2) 对文字加特效(text-shadow、),线性渐变(gradient),旋转(transform)

(3) transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px)

skew(-9deg,0deg);// 旋转,缩放,定位,倾斜

(4) 增加了更多的 CSS 选择器 多背景 rgba

(5) 在 CSS3 中唯一引入的伪元素是 ::selection.

(6) 媒体查询,多栏布局

(7) border-image

17.html5 有哪些新特性、 、理 移除了那些元素?如何处理 5 HTML5 新标签的浏览器兼

分 容问题?如何区分 L HTML 和 和 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 长期存储数据,浏览器关闭后数据不丢失;

7. sessionStorage 的数据在浏览器关闭后自动删除

8. 表单控件,calendar、date、time、email、url、search

9. 新的技术 webworker, websocket, Geolocation

移除的元素:

1. 纯表现的元素:basefont,big,center,font, s,strike,tt,u;

2. 对可用性产生负面影响的元素:frame,frameset,noframes;

支持 HTML5 新标签:

1. IE8/IE7/IE6 支持通过 document.createElement 方法产生的标签,可以利用这一特性

让这些浏览器支持 HTML5 新标签,浏览器支持新标签后,还需要添加标签默认的样式(当

然最好的方式是直接使用成熟的框架、使用最多的是 html5shim 框架):

如何区分:

DOCTYPE 声明新增的结构元素、功能元素

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,324评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,303评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,192评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,555评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,569评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,566评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,927评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,583评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,827评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,365评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,941评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2 342

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,725评论 1 92
  • 在线阅读 http://interview.poetries.top[http://interview.poetr...
    程序员poetry阅读 114,222评论 24 450
  • •前端面试题汇总 一、HTML和CSS 21 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? ...
    Simon_s阅读 2,219评论 0 8
  • 前言 转自博客园 原文 一、简单介绍一下什么是浏览器内核。浏览器最重要或者说核心的部分是“Rendering En...
    吴晗君阅读 3,627评论 1 30
  • 前端开发面试知识点大纲: HTML&CSS: 对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功:...
    秀才JaneBook阅读 2,326评论 0 25