Web前端开发——BAT面试题汇总及答案01（持续更新中）

亦凉 2024-04-18 09:35 49阅读 0赞

### 目录： ###

*  一、前言
 *  二、HTML&CSS篇：
 *   *   *   *  1、你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?
             *  2、每个 HTML 文件里开头都有个很重要的东西，Doctype，知道这是干什么的吗？
             *  3、div+css 的布局较 table 布局有什么优点？
             *  4、 img 的 alt 与 title 有何异同？ strong 与 em 的异同？
             *  5、为什么利用多个域名来存储网站资源会更有效？
             *  6、请谈一下你对网页标准和标准制定机构重要性的理解。
             *  7、简述一下 src 与 href 的区别。
             *  8、知道的网页制作会用到的图片格式有哪些？
             *  9、在 css/js 代码上线之后开发人员经常会优化性能，从用户刷新网页开始，一次 js 请求一般情况下有哪些地方会有缓存处理？
             *  10、一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验。
             *  11、你如何理解 HTML 结构的语义化？
             *  12、谈谈以前端角度出发做好 SEO 需要考虑什么？
             *  13、有哪项方式可以对一个DOM设置它的CSS样式？
             *  14、CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3 新增伪类有那些？
             *  15、CSS 中可以通过哪些属性定义，使得一个 DOM 元素不显示在浏览器可视范围内？
             *  16、超链接访问过后 hover 样式就不出现的问题是什么？如何解决？
             *  17、什么是 Css Hack？ie6,7,8 的 hack 分别是什么？
             *  18、行内元素和块级元素的具体区别是什么？行内元素的 padding 和 margin 可设置吗？
             *  19、什么是外边距重叠？重叠的结果是什么？
             *  20、rgba()和 opacity 的透明效果有什么不同？

# 一、前言 #

1.  做这个的初心是希望巩固自己的基础知识，当然也希望能够帮助更多的开发者！
2.  有些题目有多种答案，本文只给出了其中的一种，哪里有问题的话欢迎指出~
3.  这个栏目将持续更新，前端的小伙伴欢迎关注噢~

# 二、HTML&CSS篇： #

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

> IE: trident 内核  
> Firefox：gecko 内核  
> Safari:webkit 内核  
> Opera:以前是 presto 内核，Opera 现已改用 Google Chrome 的 Blink 内核  
> Chrome:Blink (基于 webkit，Google 与 Opera Software 共同开发)

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

> 声明位于文档中的最前面的位置，处于 < htm l> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。（重点：告诉浏览器按照何种规范解析页)

#### 3、div+css 的布局较 table 布局有什么优点？ ####

> 改版的时候更方便 只要改 css 文件。  
> 页面加载速度更快、结构化清晰、页面显示简洁。  
> 表现与结构相分离。  
> 易于优化（seo）搜索引擎更友好，排名更容易靠前。

#### 4、 img 的 alt 与 title 有何异同？ strong 与 em 的异同？ ####

> ali:指的是网页上的图片因为某种原因不能被显示时应该出现的替代文字（alternative text)。替换文字的语言由 lang 属性指定。(在 IE 浏览器下会在没有 title 时把 alt当成 tool tip(title ) 显示)。，

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

> CDN 缓存更方便  
> 突破浏览器并发限制  
> 节约 cookie 带宽  
> 节约主域名的连接数，优化页面响应速度  
> 防止不必要的安全问题

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

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

#### 7、简述一下 src 与 href 的区别。 ####

> src 用于替换当前元素，href 用于在当前文档和引用资源之间确立联系。  
> src 是 source 的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在  
> 位置；在请求 src 资源时会将其指向的资源下载并应用到文档内，例如 js 脚本，img 图片  
> 和 frame 等元素。  
> < script src =”js.js”>< /script >  
> 当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行  
> 完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将  
> js 脚本放在底部而不是头部。  
> href 是 Hypertext Reference 的缩写，指向网络资源所在位置，建立和当前元素（锚点）  
> 或当前文档（链接）之间的链接，如果我们在文档中添加  
> < link href=”common.css” rel=”stylesheet”/>  
> 那么浏览器会识别该文档为 css 文件，就会并行下载资源并且不会停止对当前文档的处理。  
> 这也是为什么建议使用 link 方式来加载 css，而不是使用@import 方式。

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

> png-8，png-24，jpeg，gif，svg。  
> 但是上面的那些都不是面试官想要的最后答案。面试官希望听到是 Webp。（是否有关注新  
> 技术，新鲜事物）  
> 科普一下 Webp：WebP 格式，谷歌（google）开发的一种旨在加快图片加载速度的图片格式。  
> 图片压缩体积大约只有 JPEG 的 2/3，并能节省大量的服务器带宽资源和数据空间。Facebook  
> Ebay 等知名网站已经开始测试并使用 WebP 格式。  
> 在质量相同的情况下，WebP 格式图像的体积要比 JPEG 格式图像小 40%

#### 9、在 css/js 代码上线之后开发人员经常会优化性能，从用户刷新网页开始，一次 js 请求一般情况下有哪些地方会有缓存处理？ ####

> cdn缓存，dns缓存,浏览器缓存,服务器缓存。

#### 10、一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验。 ####

> 图片懒加载，在页面上的未可视区域可以添加一个滚动条事件，判断图片位置与浏览器顶端  
> 的距离与页面的距离，如果前者小于后者，优先加载。  
> 如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先  
> 下载。  
> 如果图片为 css 图片，可以使用 CSSsprite，SVGsprite，Iconfont、Base64 等技术。  
> 如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，  
> 以提高用户体验。

#### 11、你如何理解 HTML 结构的语义化？ ####

> **去掉或样式丢失的时候能让页面呈现清晰的结构：**  
> html 本身是没有表现的，我们看到例如< h1 >是粗体，字体大小 2em，加粗；< strong >是加粗  
> 的，不要认为这是 html 的表现，这些其实 html 默认的 css 样式在起作用，所以去掉或样式  
> 丢失的时候能让页面呈现清晰的结构不是语义化的 HTML 结构的优点，但是浏览器都有有默  
> 认样式，默认样式的目的也是为了更好的表达 html 的语义，可以说浏览器的默认样式和语  
> 义化的 HTML 结构是不可分割的。

#### 12、谈谈以前端角度出发做好 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（“冲浪”）。其它网站到你的  
> 网站的链接越多，你也就会获得更多的访问量。更重要的是，你的网站的外部链接数越多，  
> 会被搜索引擎认为它的重要性越大，从而给你更高的排名。

> 合理的标签使用

#### 13、有哪项方式可以对一个DOM设置它的CSS样式？ ####

> 外部样式表，引入一个外部 css 文件  
> 内部样式表，将 css 代码放在 < style > 标签内部  
> 内联样式，将 css 样式直接定义在 HTML 元素内部

#### 14、CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3 新增伪类有那些？ ####

> 1.id 选择器（ \# myid）  
> 2.类选择器（.myclassname）  
> 3.标签选择器（div, h1, p）  
> 4.相邻选择器（h1 + p）  
> 5.子选择器（ul < li）  
> 6.后代选择器（li a）  
> 7.通配符选择器（ \* ）  
> 8.属性选择器（a\[rel = “external”\]）  
> 9.伪类选择器（a: hover, li: nth - child）  
> 可继承： font-size font-family color, UL LI DL DD DT;  
> 不可继承 ：border padding margin width height ;  
> 优先级就近原则，样式定义最近者为准;  
> 载入样式以最后载入的定位为准;  
> 优先级为:  
> !important > id > class > tag  
> important 比 内联优先级高  
> CSS3 新增伪类举例：  
> p:first-of-type 选择属于其父元素的首个
> 
> 元素的每个
> 
> 元素。  
> p:last-of-type 选择属于其父元素的最后
> 
> 元素的每个
> 
> 元素。  
> p:only-of-type 选择属于其父元素唯一的
> 
> 元素的每个
> 
> 元素。  
> p:only-child 选择属于其父元素的唯一子元素的每个
> 
> 元素。  
> p:nth-child(2) 选择属于其父元素的第二个子元素的每个
> 
> 元素。  
> :enabled、:disabled 控制表单控件的禁用状态。  
> :checked，单选框或复选框被选中。

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

> 最基本的：  
> 设置 display 属性为 none，或者设置 visibility 属性为 hidden  
> 技巧性：  
> 设置宽高为 0，设置透明度为 0，设置 z-index 位置在-1000

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

答案：被点击访问过的超链接样式不在具有 hover 和 active 了,解决方法是改变 CSS 属性的  
排列顺序: L-V-H-A（link,visited,hover,active）

#### 17、什么是 Css Hack？ie6,7,8 的 hack 分别是什么？ ####

> 答案：针对不同的浏览器写不同的 CSS code 的过程，就是 CSS hack。  
> 示例如下：

#test {
    		width:300px;
    		height:300px;
    		background-color:blue; /*firefox*/
    		background-color:red\9; /*all ie*/
    		background-color:yellow; /*ie8*/
    		+background-color:pink; /*ie7*/
    		_background-color:orange; /*ie6*/ }
    		:root #test { background-color:purple\9; } /*ie9*/
    		@media all and (min-width:0px){ #test {background-color:black;} } /*opera*/
    		@media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} } /*chrome and safari*/

#### 18、行内元素和块级元素的具体区别是什么？行内元素的 padding 和 margin 可设置吗？ ####

> 块级元素(block)特性：  
> 总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;  
> 宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;  
> 内联元素(inline)特性：  
> 和相邻的内联元素在同一行;  
> 宽度(width)、高度(height)、内边距的 top/bottom(padding-top/padding-bottom)和外边  
> 距的 top/bottom(margin-top/margin-bottom)都不可改变（也就是 padding 和 margin 的  
> left 和 right 是可以设置的），就是里面文字或图片的大小，行内元素的高度由元素内容撑开。  
> 那么问题来了，浏览器还有默认的天生 inline-block 元素（拥有内在尺寸，可设置高宽，  
> 但不会自动换行），有哪些？  
> 答案：< input> 、< img> 、< button> 、< texterea> 、< label>。

#### 19、什么是外边距重叠？重叠的结果是什么？ ####

> 外边距重叠就是 margin-collapse。  
> 在 CSS 当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一  
> 个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠  
> 外边距。  
> 折叠结果遵循下列计算规则：  
> 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。  
> 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。  
> 两个外边距一正一负时，折叠结果是两者的相加的和。  
> 详细见：[CSS 外边距合并问题][CSS]

#### 20、rgba()和 opacity 的透明效果有什么不同？ ####

> rgba()和 opacity 都能实现透明效果，但最大的不同是 opacity 作用于元素，以及元素内的  
> 所有内容的透明度(包括文字)。  
> 而 rgba()只作用于元素的颜色或其背景色。（设置 rgba 透明的元素的子元素不会继承透明  
> 效果！）

--------------------

**[前端面试题系列将会持续更新，欢迎关注该博客~][Link 1]**

**相关文章推荐：**  
[Web前端开发——BAT面试题汇总及答案02（持续更新中）][Web_BAT_02]

[CSS]: https://blog.csdn.net/weixin_44253336/article/details/96433756
[Link 1]: https://blog.csdn.net/weixin_44253336
[Web_BAT_02]: https://blog.csdn.net/weixin_44253336/article/details/100593377