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 声明新增的结构元素、功能元素