前端面试之-----html+css(1-20)

快来打我* 2021-09-19 19:02 361阅读 0赞

**一、HTML 和 CSS**

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

IE: trident 内核    -ms-

Firefox：gecko 内核    -moz-

Safari:webkit 内核    -webkit-

Opera:以前是 presto 内核，Opera 现已改用 Google Chrome 的 Blink 内核   -o-

Chrome:Blink(基于 webkit，Google 与 Opera Software 共同开发)   -webkit-

**2、每个 HTML 文件里开头都有个很重要的东西，Doctype，知道这是干什么的吗？**

声明位于文档中的最前面的位置，处于 标签之前。此标签可告知浏

览器文档使用哪种 HTML 或 XHTML 规范。（重点：告诉浏览器按照何种规范解析页面）

**3、Quirks 模式是什么？它和 Standards 模式有什么区别**

从 IE6 开始，引入了 Standards 模式，标准模式中，浏览器尝试给符合标准的文档在规范上

的正确处理达到在指定浏览器中的程度。

在 IE6 之前 CSS 还不够成熟，所以 IE5 等之前的浏览器对 CSS 的支持很差， IE6 将对 CSS

提供更好的支持，然而这时的问题就来了，因为有很多页面是基于旧的布局方式写的，而如

果 IE6 支持 CSS 则将令这些页面显示不正常，如何在即保证不破坏现有页面，又提供新的

渲染机制呢？

在写程序时我们也会经常遇到这样的问题，如何保证原来的接口不变，又提供更强大的功能，

尤其是新功能不兼容旧功能时。遇到这种问题时的一个常见做法是增加参数和分支，即当某

个参数为真时，我们就使用新功能，而如果这个参数 不为真时，就使用旧功能，这样就能

不破坏原有的程序，又提供新功能。IE6 也是类似这样做的，它将 DTD 当成了这个“参数”，

因为以前的页面大家都不会去写 DTD，所以 IE6 就假定 如果写了 DTD，就意味着这个页面

将采用对 CSS 支持更好的布局，而如果没有，则采用兼容之前的布局方式。这就是 Quirks

模式（怪癖模式，诡异模式，怪异模式）。

区别：

总体会有布局、样式解析和脚本执行三个方面的区别。

盒模型：在 W3C 标准中，如果设置一个元素的宽度和高度，指的是元素内容的宽度和高度，

而在 Quirks 模式下，IE 的宽度和高度还包含了 padding 和 border。设置行内元素的高宽：在 Standards 模式下，给等行内元素设置 wdith 和 height 都

不会生效，而在 quirks 模式下，则会生效。

设置百分比的高度：在 standards 模式下，一个元素的高度是由其包含的内容来决定的，如

果父元素没有设置百分比的高度，子元素设置一个百分比的高度是无效的用

margin:0 auto 设置水平居中：使用 margin:0 auto 在 standards 模式下可以使元素水平

居中，但在 quirks 模式下却会失效。

（还有很多，答出什么不重要，关键是看他答出的这些是不是自己经验遇到的，还是说都是

看文章看的，甚至完全不知道。）

**4、div+css 的布局较 table 布局有什么优点？**

改版的时候更方便 只要改 css 文件。

页面加载速度更快、结构化清晰、页面显示简洁。

表现与结构相分离。

易于优化（seo）搜索引擎更友好，排名更容易靠前。

**5、 img 的 alt 与 title 有何异同？ strong 与 em 的异同？**

**如果想在img显示title：text-indent=-999px  overflow:hidden**

a:alt(alt text):为不能显示图像、窗体或 applets 的用户代理（UA），alt 属性用来指

定替换文字。替换文字的语言由 lang 属性指定。(在 IE 浏览器下会在没有 title 时把 alt

当成 tool tip 显示)

title(tool tip):该属性为设置该属性的元素提供建议性的信息。

strong:粗体强调标签，强调，表示内容的重要性

em:斜体强调标签，更强烈强调，表示内容的强调点

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

渐进增强 (爬山)progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功

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

优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器

进行兼容。

区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个

非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰

减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。“优雅降级”观点

“优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为

“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，并把测试对象限

定为主流浏览器（如 IE、Mozilla 等）的前一个版本。

在这种设计范例下，旧版的浏览器被认为仅能提供“简陋却无

妨 (poor, but passable)” 的浏览体验。你可以做一些小的调整来适应某个特定的浏

览器。但由于它们并非我们所关注的焦点，因此除了修复较大的错误之外，其它的差异将被

直接忽略。

“渐进增强”观点

“渐进增强”观点则认为应关注于内容本身。

内容是我们建立网站的诱因。有的网站展示它，有的则收集它，有的寻求，有的操作，还有

的网站甚至会包含以上的种种，但相同点是它们全都涉及到内容。这使得“渐进增强”成为

一种更为合理的设计范例。这也是它立即被 Yahoo! 所采纳并用以构建其“分级式浏览器

支持 (Graded Browser Support)”策略的原因所在。

那么问题来了。现在产品经理看到 IE6,7,8 网页效果相对高版本现代浏览器少了很多圆角，

阴影（CSS3），要求兼容（使用图片背景，放弃 CSS3），你会如何说服他？

**7、为什么利用多个域名来存储网站资源会更有效？**

CDN 缓存更方便

突破浏览器并发限制

节约 cookie 带宽

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

防止不必要的安全问题

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

网页标准和标准制定机构都是为了能让 web 发展的更‘健康’，开发者遵循统一的标准，降

低开发难度，开发成本，SEO 也会更好做，也不会因为滥用代码导致各种 BUG、安全问题，

最终提高网站易用性。

**9、请描述一下 cookies，sessionStorage 和 localStorage 的区别？**

sessionStorage （session）中的数据，这些数据只有在同一个会话中的页面才能访问

并且当会话结束后数据也随之销毁。因此 sessionStorage 不是一种持久化的本地存储，仅仅是会话级别的存储。而 localStorage 用于持久化的本地存储，除非主动删除数据，否则

数据是永远不会过期的。

web storage 和 cookie 的区别

Web Storage 的概念和 cookie 相似，区别是它是为了更大容量存储设计的。Cookie 的大小

是受限的，并且每次你请求一个新的页面的时候 Cookie 都会被发送过去，这样无形中浪费

了带宽，另外 cookie 还需要指定作用域，不可以跨域调用。

除此之外，Web Storage 拥有 setItem,getItem,removeItem,clear 等方法，不像 cookie

需要前端开发者自己封装 setCookie，getCookie。但是 Cookie 也是不可以或缺的：Cookie

的作用是与服务器进行交互，作为 HTTP 规范的一部分而存在 ，而 Web Storage 仅仅是为

了在本地“存储”数据而生。

**10、简述一下 src 与 href 的区别。**

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

src 是 source 的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在

位置；在请求 src 资源时会将其指向的资源下载并应用到文档内，例如 js 脚本，img 图片

和 frame 等元素。

当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行

完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将

js 脚本放在底部而不是头部。

href 是 Hypertext Reference 的缩写，指向网络资源所在位置，建立和当前元素（锚点）

或当前文档（链接）之间的链接，如果我们在文档中添加

那么浏览器会识别该文档为 css 文件，就会并行下载资源并且不会停止对当前文档的处理。

这也是为什么建议使用 link 方式来加载 css，而不是使用@import 方式。

**11、知道的网页制作会用到的图片格式有哪些？**

png-8，png-24，jpeg，gif，svg。

但是上面的那些都不是面试官想要的最后答案。面试官希望听到是 Webp。（是否有关注新

技术，新鲜事物）科普一下 Webp：WebP 格式，谷歌（google）开发的一种旨在加快图片加载速度的图片格式。

图片压缩体积大约只有 JPEG 的 2/3，并能节省大量的服务器带宽资源和数据空间。Facebook

Ebay 等知名网站已经开始测试并使用 WebP 格式。

在质量相同的情况下，WebP 格式图像的体积要比 JPEG 格式图像小 40%

**12、知道什么是微格式吗？谈谈理解。在前端构建中应该考虑微格式吗？**

微格式（Microformats）是一种让机器可读的语义化 XHTML 词汇的集合，是结构化数据的开

放标准。是为特殊应用而制定的特殊格式。

优点：将智能数据添加到网页上，让网站内容在搜索引擎结果界面可以显示额外的提示。（应

用范例：豆瓣，有兴趣自行 google）

**13、在 css/js 代码上线之后开发人员经常会优化性能，从用户刷新网页开始，**

**一次 js 请求一般情况下有哪些地方会有缓存处理？**

答案：dns 缓存，cdn 缓存，浏览器缓存，服务器缓存。

**14、一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优**

**化这些图片的加载，给用户更好的体验。**

图片懒加载，在页面上的未可视区域可以添加一个滚动条事件，判断图片位置与浏览器顶端

的距离与页面的距离，如果前者小于后者，优先加载。

如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先

下载。

如果图片为 css 图片，可以使用 CSSsprite，SVGsprite，Iconfont、Base64 等技术。

如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，

以提高用户体验。

如果图片展示区域小于图片的真实大小，则因在服务器端根据业务需要先行进行图片压缩，

图片压缩后大小与展示一致。

**15、你如何理解 HTML 结构的语义化？**

去掉或样式丢失的时候能让页面呈现清晰的结构：

html 本身是没有表现的，我们看到例如

# 是粗体，字体大小 2em，加粗；**是加粗**  #

**的，不要认为这是 html 的表现，这些其实 html 默认的 css 样式在起作用，所以去掉或样式**

**丢失的时候能让页面呈现清晰的结构不是语义化的 HTML 结构的优点，但是浏览器都有有默**

**认样式，默认样式的目的也是为了更好的表达 html 的语义，可以说浏览器的默认样式和语**

**义化的 HTML 结构是不可分割的。屏幕阅读器（如果访客有视障）会完全根据你的标记来“读”你的网页.**

**例如,如果你使用的含语义的标记,屏幕阅读器就会“逐个拼出”你的单词,而不是试着去对**

**它完整发音.**

**PDA、手机等设备可能无法像普通电脑的浏览器一样来渲染网页（通常是因为这些设备对 CSS**

**的支持较弱）**

**使用语义标记可以确保这些设备以一种有意义的方式来渲染网页.理想情况下,观看设备的**

**任务是符合设备本身的条件来渲染网页.**

**语义标记为设备提供了所需的相关信息,就省去了你自己去考虑所有可能的显示情况（包括**

**现有的或者将来新的设备）.例如,一部手机可以选择使一段标记了标题的文字以粗体显示.**

**而掌上电脑可能会以比较大的字体来显示.无论哪种方式一旦你对文本标记为标题,您就可**

**以确信读取设备将根据其自身的条件来合适地显示页面.**

**搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重**

**过去你可能还没有考虑搜索引擎的爬虫也是网站的“访客”,但现在它们他们实际上是极其**

**宝贵的用户.没有他们的话,搜索引擎将无法索引你的网站,然后一般用户将很难过来访问.**

**你的页面是否对爬虫容易理解非常重要,因为爬虫很大程度上会忽略用于表现的标记,而只**

**注重语义标记.**

**因此,如果页面文件的标题被标记,而不是,那么这个页面在搜索结果的位置可能会比较靠后.**

**除了提升易用性外,语义标记有利于正确使用 CSS 和 JavaScript,因为其本身提供了许多“钩**

**钩”来应用页面的样式与行为.**

**SEO 主要还是靠你网站的内容和外部链接的。**

**便于团队开发和维护**

**W3C 给我们定了一个很好的标准，在团队中大家都遵循这个标准，可以减少很多差异化的东**

**西，方便开发和维护，提高开发效率，甚至实现模块化开发。**

**16、谈谈以前端角度出发做好 SEO 需要考虑什么？**

**了解搜索引擎如何抓取网页和如何索引网页**

**你需要知道一些搜索引擎的基本工作原理，各个搜索引擎之间的区别，搜索机器人**

**（SE robot 或叫 web crawler）如何进行工作，搜索引擎如何对搜索结果进行排序等**

**等。**

**Meta 标签优化主要包括主题（Title)，网站描述(Description)，和关键词（Keywords）。还有一些其它**

**的隐藏文字比如 Author（作者），Category（目录），Language（编码语种）等。**

**如何选取关键词并在网页中放置关键词**

**搜索就得用关键词。关键词分析和选择是 SEO 最重要的工作之一。首先要给网站确定主关键**

**词（一般在 5 个上下），然后针对这些关键词进行优化，包括关键词密度（Density），相**

**关度（Relavancy），突出性（Prominency）等等。**

**了解主要的搜索引擎**

**虽然搜索引擎有很多，但是对网站流量起决定作用的就那么几个。比如英文的主要有**

**Google，Yahoo，Bing 等；中文的有百度，搜狗，有道等。不同的搜索引擎对页面的抓取和**

**索引、排序的规则都不一样。还要了解各搜索门户和搜索引擎之间的关系，比如 AOL 网页搜**

**索用的是 Google 的搜索技术，MSN 用的是 Bing 的技术。**

**主要的互联网目录**

**Open Directory 自身不是搜索引擎，而是一个大型的网站目录，他和搜索引擎的主要区别**

**是网站内容的收集方式不同。目录是人工编辑的，主要收录网站主页；搜索引擎是自动收集**

**的，除了主页外还抓取大量的内容页面。**

**按点击付费的搜索引擎**

**搜索引擎也需要生存，随着互联网商务的越来越成熟，收费的搜索引擎也开始大行其道。最**

**典型的有 Overture 和百度，当然也包括 Google 的广告项目 Google Adwords。越来越多的**

**人通过搜索引擎的点击广告来定位商业网站，这里面也大有优化和排名的学问，你得学会用**

**最少的广告投入获得最多的点击。**

**搜索引擎登录**

**网站做完了以后，别躺在那里等着客人从天而降。要让别人找到你，最简单的办法就是将网**

**站提交（submit）到搜索引擎。如果你的是商业网站，主要的搜索引擎和目录都会要求你付**

**费来获得收录（比如 Yahoo 要 299 美元），但是好消息是（至少到目前为止）最大的搜索引**

**擎 Google 目前还是免费，而且它主宰着 60％以上的搜索市场。**

**链接交换和链接广泛度（Link Popularity）**

**网页内容都是以超文本（Hypertext）的方式来互相链接的，网站之间也是如此。除了搜索**

**引擎以外，人们也每天通过不同网站之间的链接来 Surfing（“冲浪”）。其它网站到你的**

**网站的链接越多，你也就会获得更多的访问量。更重要的是，你的网站的外部链接数越多，**

**会被搜索引擎认为它的重要性越大，从而给你更高的排名。**

**合理的标签使用17、有哪项方式可以对一个 DOM 设置它的 CSS 样式？**

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

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

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

**18、CSS 都有哪些选择器？**

**派生选择器（用 HTML 标签申明）**

**id 选择器（用 DOM 的 ID 申明）**

**类选择器（用一个样式类名申明）**

**属性选择器（用 DOM 的属性申明，属于 CSS2，IE6 不支持，不常用，不知道就算了）**

**除了前 3 种基本选择器，还有一些扩展选择器，包括**

**后代选择器（利用空格间隔，比如 div .a\{ \}）**

**群组选择器（利用逗号间隔，比如 p,div,\#a\{ \}）**

**那么问题来了，CSS 选择器的优先级是怎么样定义的？**

**基本原则：**

**一般而言，选择器越特殊，它的优先级越高。也就是选择器指向的越准确，它的优先级就越**

**高。**

**复杂的计算方法：**

**用 1 表示派生选择器的优先级**

**用 10 表示类选择器的优先级**

**用 100 标示 ID 选择器的优先级**

**div.test1 .span var 优先级 1+10 +10 +1**

**span\#xxx .songs li 优先级 1+100 + 10 + 1**

**\#xxx li 优先级 100 +1**

**那么问题来了，看下列代码，**

**标签内的文字是什么颜色的？**

**123**

**答案：red。与样式定义在文件中的先后顺序有关，即是后面的覆盖前面的，与在**

**classB classA’>中的先后关系无关。**

**19、CSS 中可以通过哪些属性定义，使得一个 DOM 元素不显示在浏览器可视范围**

**内？**

**最基本的：**

**设置 display 属性为 none，或者设置 visibility 属性为 hidden**

**技巧性：**

**设置宽高为 0，设置透明度为 0，设置 z-index 位置在-1000**

**20、超链接访问过后 hover 样式就不出现的问题是什么？如何解决？**

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

**排列顺序: L-V-H-A（link,visited,hover,active）**

前端面试之-----html+css(1-20)

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关前端面试之浏览器渲染

相关 ReverseMe-120

相关 120小时

相关前端劝退之前端知识体系（前端面试体系）

相关前端面试之HTML篇

相关前端之HTML相关面试题。

相关前端面试之JS

相关前端面试之盒模型

相关前端面试ES6之Promise

相关前端面试之js基础