web前端面试题html+css

最新推荐文章于 2021-06-09 22:22:21 发布

lse717

最新推荐文章于 2021-06-09 22:22:21 发布

阅读量402

点赞数

分类专栏： html css

本文链接：https://blog.csdn.net/weixin_44880730/article/details/108579061

版权

css 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

html

2 篇文章 0 订阅

订阅专栏

本文整理了web前端面试中关于HTML和CSS的常见问题，涵盖DOCTYPE的作用、DOM样式设置、浏览器兼容性、CSS盒模型、CSS3新特性等关键知识点，旨在帮助开发者准备面试，提升技能。

摘要由CSDN通过智能技术生成

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

**********************************************
IE		Trident内核（IE内核）
Firefox		Gecko内核 （firefox内核）
Google Chrome	webit内核 -> Blink内核（Chrome内核）

Safari	Webit内核
opera 	Presto内核 -> webit内核 ->Blink内核

谈谈你对内核的理解：
	内核主要分为两部分：渲染引擎、JS引擎
	渲染引擎：
		负责获取网页的内容（html、xml以及图像等），整理讯息，以及计算网页的显示方式，然后输出到显示器或者打印机。浏览器内核的不同对于网页的语法解释也会有所不同，所以渲染的效果也会不一样。
	JS引擎：
		解析执行JavaScript语言来实现网页的动态效果
	注意：最开始的渲染引擎和JS引擎没有区分的很明确，后来JS引擎越来越独立，内核就倾向于指渲染引擎。
	
	参考：https://www.jianshu.com/p/f4bf35898719

2.DOCTYPE 的作用是什么？

告诉浏览器它应该用哪种文档类型定义来解析文档。
如果没有doctype声明，那么声明文档的解析类型就是怪异模式，
也就是浏览器会按照自己的解析方式去解析，那么在不同的浏览器中就会有不同的样式。
所以你的页面添加<!doctype html>,让浏览器按照标准模式解析然后渲染页面。

3.img标签中的alt和title有何异同？

alt是图片加载失败后，代替图片显示的文字
title是鼠标划上去显示的内容，其实质是对图片的一种备注或注释

4.简述一下 src 与 href 的区别

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

src 是 source 的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在 
位置；在请求 src 资源时会将其指向的资源下载并应用到文档内，例如 js 脚本，img 图片 
和 frame 等元素、	<script src =”js.js”></script> 
当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行 
完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。

href 是 Hypertext Reference 的缩写，指向网络资源所在位置，建立和当前元素（锚点） 
或当前文档（链接）之间的链接，如果我们在文档中添加  <link href=”common.css” rel=”stylesheet”/> 
那么浏览器会识别该文档为 css 文件，就会并行下载资源并且不会停止对当前文档的处理。

5.简述网页制作会用到的图片格式

png，jpeg，jpg，gif，svg 以及  webp
     （面试官可能最想听到webp这个结果）
如今对于 JPEG、PNG 和 GIF 这些图片格式的优化几乎已经达到了极致， 
为了改变现状开辟新局面， Google 给了我们一个新选择：WebP
webp优势：它具有更优的图像数据压缩算法，能带来更小的图片体积，
而且拥有肉眼识别无差异的图像质量；同时具备了无损和有损的压缩模式
Alpha 透明以及动画的特性，在 JPEG 和 PNG 上的转化效果都非常优秀、稳定和统一。

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

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

7.简述一下你对HTML语义化的理解

1) HTML语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析；
2) 即使在没有样式CSS的情况下也能以一种文档格式显示，并且是容易阅读的；
3) 搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，有利于SEO；
4) 使阅读源代码的人更容易将网站分块，便于阅读、维护和理解。

8.SGML 、 HTML 、XML 和 XHTML 的区别？

SGML：(Standard Generalized Markup Language，标准通用标记语言)，SGML具有非常复杂的文档结构，
主要用于大量高度结构化数据的访问和其他各种工业领域，在分类和索引数据中非常有用。但是它不适用于Web数据描述。

HTML：(Hyper Text Markup Language)，超文本标记语言，他继承了SGML的很多优点，但是html是一种界面技术，
他只使用了SGML中很少的一部分标记，为了便于在计算机上实现，HTML规定的标记是固定的，即HTML语法是不可扩展的。
html是一种标记语言，不是一种编程语言。

XML：xml是在html和sgml的基础上诞生的。XML使用一个简单而又灵活的标准格式，为基于Web的应用提供了一个描述数据和交换数据的有效手段。但是，XML并非是用来取代HTML的。
HTML着重如何描述将文件显示在浏览器中，而XML与SGML相近，它着重描述如何将数据以结构化方式表示。

XHTML：（eXtensible HyperText Markup Language），是一种标记语言，表现方式与超文本标记语言（html）类似，不过语法上更加严格。
从继承关系上讲，HTML是一种基于标准通用标记语言（sgml）的应用，是一种非常灵活的置标语言，而XHTML则基于可扩展标记语言（xml），
XML是sgml的一个子集。

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

1) 内联样式style属性
2) 内部样式表style标签
3) 外部样式表
    link
    @import

10.@import和link的区别

1) 所属范围
	@import 是css的语法，只能导入样式
	link是html的标签，不仅可以加载样式，还可以定义rel属性
		rel="stylesheet"表示调用外部样式表
2) 加载顺序
	页面加载的时候，link标签引入的css被同时加载
	@import引入的css在页面加载完毕后再被加载
3) 兼容性
	@import需要兼容IE5+
	link标签，不存在兼容性问题

11.选择器优先级【级联】

1. !important
	优先级最高，不推荐
2. 特性值
	1000
		内联style属性
	100
		id			   
	10
		类名选择器、伪类选择器、属性选择器
	1
		标签选择器、伪元素选择器
	优先级
		特性值越高，优先级越高
		如果特性值相同，那么就近原则

12.介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？
盒子可以通过box-sizing来设置分类

	1. 内容盒子【W3C标准盒子】【默认】
		box-sizing:content-box;
		width = 内容宽
		所占的宽 = width + padding + border + margin

	2. 边框盒子【IE盒子】
		box-sizing:border-box;
		width = 内容宽 + padding + border
		所占宽 = width + margin

13.清除浮动的方式

1、浮动元素的父级元素： overflow:hidden;
2、浮动元素的父级元素： ::after{clear:both;content:'';display:block;}
3、浮动元素的同级：添加一个空标签，并且设置clear:both;

14、如何给行内元素设置宽高 – 将行内元素设置为块级元素、脱离文档流

1) 使用display
    display:block/inline-block
2) 使用position
    position:absolute/fixed
3) 使用float
    float:left/right

15、块级元素如何在父元素中水平垂直居中

1) 父元素position
    1. 父元素相对定位，子元素绝对定位，子元素margin:auto;top:0;left:0;bottom:0;right:0;  
    2. 父元素相对定位，子元素绝对定位，子元素left:50%,top:50%;margin-left:-子元素一半的宽度;margin-top: - 子元素一半的高度  

2) 父元素display
    3. 父元素display:flex; justify-content:center; align-items:center，子元素自动居中  （伸缩盒布局）
    4. 父元素display:table-cell; vertical-align:middle; 子元素margin:auto

16、显示隐藏元素的方式及区别

display    浏览器是否显示该元素, 如果隐藏也不占据页面空间
	display: none
	display: block
opcity:0    浏览器不显示该元素,但是会占据页面空间，交互事件正常
visibility  浏览器不显示该元素,但是会占据页面空间，交互事件失效
	visibility: hidden
	visibility: visible

17、如何让元素使用margin:0 auto，水平居中

只对块级元素生效，所以margin:0 auto的用法分为三种，分别为
	块级元素：div、h1~h3、ul
        /*对于块级元素，只需要设置width*/
        div{
            width: 200px;
            background-color: #ccc;
            margin:0 auto;
        }

    行内元素：span、a
        /*对于行内元素，需要先设置为块级元素，再加宽度*/
        span{
            display: block;
            width: 100px;
            background-color: red;
            margin:0 auto;
        }

    行内块元素：button、img、input、textarea
        /*对于行内块级元素，需要设置为块级元素，可以不用设置宽度*/
        input{
            display: block;
            margin:0 auto;
        }

18、overflow的三种取值，并说明具体含义

auto：自适应，内容如果溢出，会自动生成滚动条
scroll：将超出的内容进行裁剪（也就是不显示），并以滚动条的方式显示超出的内容（若不设置隐藏滚动条，滚动条一直存在）。
hidden：将超出内容进行裁剪，不会出现滚动条。

19、CSS3新特性

1. animation 动画
	animation-name   //动画名称
	animation-duration  //动画执行时间
	animation-timing-function：steps(5)  //动画执行函数步骤
	animation-iteration-count：infinite   //动画执行次数（无限）
2. transition 过渡
3. transform  变形
4. 伪元素
5. 边框
	border-radius
	box-shadow
	border-image
6. 背景
	background-size
	background-origin
	background-clip
	background-image
7. 文本
	text-shadow
	text-wrap
	@font-face

20、理解BFC吗？

BFC 即 Block Formatting Contexts (块级格式化上下文)。
具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。
通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。

21.css 中可以让文字在垂直和水平方向上重叠的两个属性是什么？

垂直方向：line-height 
水平方向：letter-spacing 
那么问题来了，关于 letter-spacing 的妙用知道有哪些么？ 
答案:可以用于消除 inline-block 元素间的换行符空格间隙问题。

22.为什么要初始化样式？

由于浏览器兼容的问题，不同的浏览器对标签的默认样式值不同，若不初始化会造成不同浏 
览器之间的显示差异，但是初始化 CSS 会对搜索引擎优化造成小影响

23.html 常见兼容性问题？

1. 浏览器默认的 margin 和 padding 不同
	解决：加一个全局 *{ margin: 0; padding: 0; }来统一
2. 谷歌中文界面下默认会将小于12px 的文本强制按照12px显示
	解决：使用-webkit-transform:scale(.75);收缩的是整个span盒子大小，这时候，必须将span准换成块元素。
3. 超链接访问过后hover样式就不会出现了，被点击访问过的超链接样式不再具有hover 和active 了
	解决：改变css 属性的排列顺序L-V-H-A
4.IE5-8 不支持 opacity，解决办法： 
.opacity { 
    opacity: 0.4 
    filter: alpha(opacity=60); /* for IE5-7 */ 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; /* for IE 8*/ 
}

24.对 WEB 标准以及 W3C 的理解与认识

答：标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外 链 css 和 js 脚本、 
结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更 
广泛的设备所访问、更少的代码和组件，容易维 护、改版方便，不需要变动页面内容、提 
供打印版本而不需要复制内容、提高网站易用性。

25.html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？

新特性：
    HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。
    拖拽释放(Drag and drop) API
    语义化更好的内容标签（header,nav,footer,aside,article,section）
    音频、视频API(audio,video)
    画布(Canvas) API
    地理(Geolocation) API
    本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
    sessionStorage 的数据在浏览器关闭后自动删除
    表单控件，calendar、date、time、email、url、search
    新的技术webworker, websocket, Geolocation
移除元素：
    纯表现的元素：basefont，big，center，font, s，strike，tt，u；
    对可用性产生负面影响的元素：frame，frameset，noframes；
h5新标签兼容：
    IE8/IE7/IE6支持通过document.createElement方法产生的标签，
    可以利用这一特性让这些浏览器支持HTML5新标签，
    当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架

26.前端性能优化的方式

1、减少DOM操作 
2、部署前，图片压缩，代码压缩 
3、优化js代码结构，减少冗余代码 
4、减少http请求，合理设置HTTP缓存 
5、使用内容分发cdn加速 
6、静态资源缓存 
7、图片延迟加载

27.对前端工程化的理解

开发规范 
模块化开发 
组件化开发 
开发仓库 
性能优化 
项目部署 
开发流程 
开发工具

28.哪些 css 属性可以继承？

可继承： font-size  font-family  color, ul  li  dl  dd  dt; 
不可继承 ：border  padding  margin  width  height ;

29.HTML5的离线储存怎么使用，工作原理能不能解释一下？

在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件
原理：
    HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示
如何使用：
    页面头部像下面一样加入一个manifest的属性；
    在cache.manifest文件的编写离线存储的资源，
    在离线状态时，操作window.applicationCache进行需求实现

30.浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢

在线的情况下，浏览器发现html头部有manifest属性，它会请求manifest文件，
如果是第一次访问app，那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。
如果已经访问过app并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的manifest文件与旧的manifest文件，
如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。
离线的情况下，浏览器就直接使用离线存储的资源。

31.xhtml和html有什么区别?

一个是功能上的差别
    主要是XHTML可兼容各大浏览器、手机以及PDA，并且浏览器也能快速正确地编译网页
另外是书写习惯的差别
    XHTML 元素必须被正确地嵌套，闭合，区分大小写，文档必须拥有根元素

32.sass、less、css

sass
	Sass 诞生于 2007 年，使用Ruby 编写，是一种对css的一种扩展提升，世界上最成熟、最稳定、最强大的专业级CSS扩展语言！
	（Sass官网上的描述），因为它允许使用变量、嵌套规则等众多功能，而且完全兼容CSS，使得CSS语言更强大，更优雅。
	它最开始的语法叫做“缩进语法”，与Haml类似，使用缩进来区分代码块，并且用回车将不同规则分隔开，
	例如：
		.element
			color: red
			a
				float: right
	而较新的语法叫做“SCSS”，使用和CSS一样的块语法，即使用大括号将不同的规则分开，使用分号将具体的样式分开，
	例如：
		.element {
			color: red;
			a {
				float: right;
			}
		}
	两者都等同于CSS中
    .element {
        color: red;
    }
    .element a {
        float: right;
    }
	通常情况下，这两套语法通过.sass和.scss两个文件扩展名区分开。
less
	受Sass的影响较大，但又使用CSS的语法，让大部分开发者和设计师更容易上手。LESS保留了css的任何功能，
    同时提供了多种方式能平滑的将写好的代码转化成标准的CSS代码，可以在任何使用随时切换到css的语法进行书写。

区别和联系：
    Sass 和 Less 都是 CSS 扩展，目的都是使 CSS 更方便、更强大。它们的区别：
    1. Sass 更强大，Less 更简单。

    2. 编译环境不同，Sass 安装时需要 Ruby 环境，Sass 是在服务端处理的；而 Less 需要引入 Less.js 来处理 Less 代码输出css 到浏览器。

    3. 变量符不一样，Sass 是 $，Less 是 @。

    4. Sass 允许使用条件语句，例如 if { } else { }， for { } 等，而 Less 不允许。

33.请描述一下cookies，sessionStorage和localStorage的区别？

相同点：都会在浏览器端保存，有大小和同源限制。 
不同点： 
1、cookie会随请求发送到服务器，作为会话表示，服务器可修改cookie。web storage不会随请求发送到服务器。 
2、cookie有path的概念，子路径可以访问父路径的cookie，父路径不可以访问子路径的cookie。 
3、有效期：cookie在设置的有效期内有效，默认为浏览器关闭消失。sessionStorage在会话窗口关闭后失效，localStorage长期有效，需主动删除。 
4、sessionStorage不能共享，localStorage在同源文档之间可以共享，cookie在同源且符合path规则的文档之间可以共享。 
5、localStorage的修改会触发其他文档的update事件。 
6、cookie有secure属性要求HTTPS传输。 
7、浏览器不能保存超过300个cookie，单个服务器不能超过20个，每个cookie不能超过4k。webStorage可以支持5M的存储。