那些HTML、CSS中常见的面试题及知识点

程序员文章站 2022-06-28 18:01:00

1.HTML、XHTML、XML有什么区别1.HTML(超文本标记语言): 在html4.0之前HTML先有实现再有标准，导致HTML非常混乱和松散2.XML(可扩展标记语言): 主要用于存储数据和结构，可扩展，大家熟悉的JSON也是相似的作用，但是更加轻量高效，所以XML现在市场越来越小了3.XHTML(可扩展超文本标记语言): 基于上面两者而来，W3C为了解决HTML混乱问题而生，并基于此诞生了HTML5，开头加入的做法因此而来，如果不加就是兼容混乱的HT...

1.HTML、XHTML、XML有什么区别

1.HTML(超文本标记语言): 在html4.0之前HTML先有实现再有标准，导致HTML非常混乱和松散

2.XML(可扩展标记语言): 主要用于存储数据和结构，可扩展，大家熟悉的JSON也是相似的作用，但是更加轻量高效，所以XML现在市场越来越小了

3.XHTML(可扩展超文本标记语言): 基于上面两者而来，W3C为了解决HTML混乱问题而生，并基于此诞生了HTML5，开头加入<!DOCTYPE html>的做法因此而来，如果不加就是兼容混乱的HTML，加了就是标准模式。

2.知道img的srcset的作用

可以设计响应式图片，我们可以使用两个新的属性srcset 和 sizes来提供更多额外的资源图像和提示

srcset 定义了我们允许浏览器选择的图像集，以及每个图像的大小。

sizes 定义了一组媒体条件（例如屏幕宽度）并且指明当某些媒体条件为真时，什么样的图片尺寸是最佳选择。

3.link和@import的区别

1.link属于XHTML标签，而@import是CSS提供的

2.加载页面时link同时加载，@import引用的css页面加载完再加载

3.link是HTML标签无兼容问题，@import只有IE5以上才能识别

4.link方式的样式权重比@import高

5.dom可以控制link，但@import不可用dom控制

4.层叠上下文

层叠上下文是 HTML 中的一个三维的概念，每个层叠上下文中都有一套元素的层叠排列顺序。页面根元素天生具有层叠上下文，所以整个页面处于一个“层叠结界”中。

层叠上下文的创建：

页面根元素：html
z-index 值为数值的定位元素
其他 css 属性
- opacity 不是 1
- transform 不是 none
- flex，z-index 不是 auto
层叠上下文中的排列规则，从下到上：
- background/border
- 负 z-index
- block 块状水平盒子
- float 浮动盒子
- inline 水平盒子
- z-index:auto, 或看成 z-index:0
- 正 z-index
由此引申出：定位元素的z-index：0和z-index：auto的区别是，前者会创建层叠上下文，影响布局。

5.谈谈对BFC的理解

BFC：块级格式化上下文，它是指一个独立的块级渲染区域，只有Block-level BOX参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。

BFC的生成

既然上文提到BFC是一块渲染区域，那这块渲染区域到底在哪，它又是有多大，这些由生成BFC的元素决定，CSS2.1中规定满足下列CSS声明之一的元素便会生成BFC。

根元素
float的值不为none
overflow的值不为visible
display的值为inline-block、table-cell、table-caption
position的值为absolute或fixed

BFC的约束规则

内部的Box会在垂直方向上一个接一个的放置
垂直方向上的距离由margin决定。（完整的说法是：属于同一个BFC的两个相邻Box的margin会发生重叠，与方向无关。）
每个元素的左外边距与包含块的左边界相接触（从左向右），即使浮动元素也是如此。（这说明BFC中子元素不会超出他的包含块，而position为absolute的元素可以超出他的包含块边界）
BFC的区域不会与float的元素区域重叠
计算BFC的高度时，浮动子元素也参与计算
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然

6.HTML5和css3的新标签

HTML5

1.标签

HTML5本质上只是增加了一些语义化标签

只兼容高版本（ie9以上）浏览器

最有用的三个标签：video 视频

audio 音频

canvas 画图板，替代flash（操作上比较困难）

用处不大但很多时候又可以用到的一些标签：

header　　头部

footer　　尾部

nav　　　导航

aside　　侧边栏

section　　模块

2.表单里面新添加的一些html5属性

<form>  
<input type="email" />      邮箱输入，自带错误提示(无法修改样式)　
<input type="color" />　　　 一个可以选择颜色的调色板
<input type="date" />　　　　年月日下拉框 （在手机上显示的时候，会有滑动的选择，很好看）
<input type="month" />   选择月份下拉框
<input type="week" />   周选择下拉框
<input type="url" />     URL
<input type="tel" />     调用手机数字键盘
<input type="search" />　　搜索（带个叉可关闭）
<input type="range" />　　拖拽条
<input type="number" max="10" min="0" />   有条件范围的数字框
</form>

css3

1、盒子阴影 box-shadow:x y blur（模糊度） spread(内扩充，相当于padding) color inset（内阴影）;

2、文字阴影 text-shadow:x y blur color;

3、背景透明度 background：rgba（0，0，0，alpha）

4、背景图大小 background-size : width height;

5、background:url(),url(); 多个背景图

6、圆角　　border-radius 可以使用像素也可以使用百分比

　　　　　一个值：四个方向　　
      	两个值：左上右下 右上左下
        三个值：左上 右上左下 右下
        四个值：左上 右上 右下 左下（顺时针）

7、过渡 transition:1s 时间样式（all 所有样式）运动类型写的值不分顺序

linear匀速 ease先加后减（缓冲） ease-in加速 ease-out减速

8、浏览器前缀

（transition会涉及到浏览器前缀）

-webkit- 谷歌浏览器

-moz- 火狐浏览器

-ms- IE浏览器

-o- 欧朋

9、渐变色

线性渐变background-image:-webkit-linear-gradient(方向left top,color起始颜色，color结束颜色);

重复渐变background-image:-webkit-repeating-linear-gradient(left top,clolr,color);

10、文字描边

-webkit-text-stroke:描边大小 color

11、css3动画：

animation：time时间，name名字，ease类型，infinite重复运动

@keyframes name{

to{}

from{}

0%{}

100%{}

}

12、倒影

-webkit-box-reflect:below 10px -webkit-linear-gradient(rgba(0,0,0,0) 50%,rgba(0,0,0,1))

below向下 above向上 left right

13、滤镜　　-webkit-filter:blur(0px 模糊度)；

14、变形

   transform:
   translate(x,y)    移动px
   rotate()         旋转deg
   skew(x,y)        倾斜deg
   scale(x,y)       放大比例
   transform:transform(x,y) rotate() skew(x,y) scale(x,y);
   从后往前执行

7.html5有哪些新特性，移除了哪些元素？如何处理HTML5新标签的浏览器谦容问题？如何区分HTML和HTML5？

* HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。

* 绘画 canvas

用于媒介回放的 video 和 audio 元素

本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；

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

语意化更好的内容元素，比如 article、footer、header、nav、section

表单控件，calendar、date、time、email、url、search

新的技术webworker, websockt, Geolocation

* 移除的元素

纯表现的元素：basefont，big，center，font, s，strike，tt，u；

对可用性产生负面影响的元素：frame，frameset，noframes；

支持HTML5新标签：

* IE8/IE7/IE6支持通过document.createElement方法产生的标签，

可以利用这一特性让这些浏览器支持HTML5新标签，

浏览器支持新标签后，还需要添加标签默认的样式：

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

8.为什么有时候人们用translate来改变位置而不是定位

translate()是transform的一个值。改变transform或opacity不会触发浏览器重新布局（reflow）或重绘（repaint），只会触发复合（compositions）。

改变绝对定位会触发重新布局，进而触发重绘和复合。transform使浏览器为元素创建一个 GPU 图层，但改变绝对定位会使用到 CPU。因此translate()更高效，可以缩短平滑动画的绘制时间。

而translate改变位置时，元素依然会占据其原始空间，绝对定位就不会发生这种情况。

9.html常见谦容性问题

1.双边距BUG float引起的使用display

2.3像素问题使用float引起的使用dislpay:inline -3px

3.超链接hover 点击后失效使用正确的书写顺序 link visited hover active

4.IE z-index问题给父级添加position:relative

5.Png 透明使用js代码改

6.Min-height 最小高度！Important 解决’

7.select 在ie6下遮盖使用iframe嵌套

8.为什么没有办法定义1px左右的宽度容器（IE6默认的行高造成的，使用over:hidden,zoom:0.08 line-height:1px）

9.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*/

}

IE6不支持PNG透明背景，解决办法: IE6下使用gif图片

10.什么是外边距重叠？重叠的结果是什么？

在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。

折叠结果遵循下列计算规则

两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。

两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。

两个外边距一正一负时，折叠结果是两者的相加的和。

11.box-sizing常用的属性有哪些?分别有啥？

box-sizing有两个值:content-box(W3C标准盒模型),border-box(怪异模型),

这个css 主要是改变盒子模型大小的计算形式

1.content-box的计算公式会把宽高的定义指向 content,border和 padding 另外计算,

也就是说 content + padding + border = 120px(盒子实际大小)

2.border-box的计算公式是总的大小涵盖这三者, content 会缩小,来让给另外两者

content(80px) + padding(52px) + border(52px) = 100px

12.CSS中transition和animate有何区别?animate如何停留在最后一帧!

transition一般用来做过渡的, 没时间轴的概念, 只能触发一次没中间状态

animate则是做动效,有时间轴的概念，可以重复触发和有中间状态;

过渡的开销比动效小,前者一般用于交互居多,后者用于活动页居多

animate停留在最后一帧它自身参数的一个值就可以forwards

13.什么是css hack？ ie6,7,8的hack分别是什么？

针对不同的浏览器写不同的CSS code的过程，就是CSS hack。

background-color:yellow;  /*ie8*/

+background-color:pink; /ie7/

_background-color:orange; /ie6/

13.谈谈以前端角度出发做好SEO需要考虑什么

搜索引擎主要以:

外链数量和质量

网页内容和结构

来决定某关键字下的网页搜索排名。

前端应该注意网页结构和内容方面的情况：

Meta标签优化

主要包括主题（Title)，网站描述(Description)。还有一些其它的隐藏文字比如Author（作者），Category（目录），Language（编码语种）等。

符合W3C规范的语义性标签的使用。

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

搜索就得用关键词。关键词分析和选择是SEO最重要的工作之一。首先要给网站确定主关键词（一般在5个上下），然后针对这些关键词进行优化，包括关键词密度（Density），相关度（Relavancy），突出性（Prominency）等等。

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

1.图片懒加载，在页面上的未可视区域可以添加一个滚动条事件，判断图片位置与浏览器顶端的距离与页面的距离，如果前者小于后者，优先加载。

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

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

4.如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验。

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

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

“优雅降级”观点

“优雅降级”观点认为应该针对那些*、最完善的浏览器来设计网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，并把测试对象限定为主流浏览器（如 IE、Mozilla 等）的前一个版本。

“渐进增强”观点

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

内容是我们建立网站的诱因。有的网站展示它，有的则收集它，有的寻求，有的操作，还有的网站甚至会包含以上的种种，但相同点是它们全都涉及到内容。这使得“渐进增强”成为一种更为合理的设计范例。这也是它立即被 Yahoo! 所采纳并用以构建其“分级式浏览器支持 (Graded Browser Support)”策略的原因所在。

区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。

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

CDN缓存更方便

突破浏览器并发限制

节约cookie带宽

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

防止不必要的安全问题

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

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

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

设置text-indent:-9999px;

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

被点击访问过的超链接样式不再具有hover和active了

解决方案

改变CSS属性的排列顺序: L-V-H-A（link,visited,hover,active）

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

垂直方向：line-height

水平方向：letter-spacing

letter-spacing还可以用于消除inline-block元素间的换行符空格间隙问题。

20.display:none 与visibility:hidden的区别是什么？

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

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

即是，使用CSS display:none属性后，HTML元素（对象）的宽度、高度等各种属性值都将“丢失”;而使用visibility:hidden属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在。

21.IE的双边BUG：块级元素float后设置横向margin，ie6显示margin比设置的较大。

解决方案：加入_display：inline

22.css有个content属性吗？有什么作用？有什么应用？

css的content属性专门应用在 before/after 伪元素上，用来插入生成内容。最常见的应用是利用伪类清除浮动。

23.css新增伪类有哪些

p:first-of-type 选择属于其父元素的首个

元素的每个

元素。

p:last-of-type 选择属于其父元素的最后

元素的每个

元素。

p:only-of-type 选择属于其父元素唯一的

元素的每个

元素。

p:only-child 选择属于其父元素的唯一子元素的每个

元素。

p:nth-child(2) 选择属于其父元素的第二个子元素的每个

元素。

:enabled、:disabled 控制表单控件的禁用状态。

:checked，单选框或复选框被选中。

24.sass，less是什么？大家为什么要使用他们？

他们是CSS预处理器。他是CSS上的一种抽象层。他们是一种特殊的语法/语言编译成CSS。

为什么要使用它们？

结构清晰，便于扩展。

可以方便地屏蔽浏览器私有语法差异。这个不用多说，封装对浏览器语法差异的重复处理，减少无意义的机械劳动。

可以轻松实现多重继承。

完全兼容 CSS 代码，可以方便地应用到老项目中。LESS 只是在 CSS 语法上做了扩展，所以老的 CSS 代码也可以与 LESS 代码一同编译。

25.css动画animation

transition: 过渡动画

transition-property: 属性
transition-duration: 间隔
transition-timing-function: 曲线
transition-delay: 延迟
常用钩子: transitionend

animation / keyframes

animation-name: 动画名称，对应@keyframes
animation-duration: 间隔
animation-timing-function: 曲线
animation-delay: 延迟
```
animation-iteration-count
```
: 次数
- infinite: 循环动画
```
animation-direction
```
: 方向
- alternate: 反向播放
```
animation-fill-mode
```
: 静止模式
- forwards: 停止时，保留最后一帧
- backwards: 停止时，回到第一帧
- both: 同时运用 forwards / backwards
常用钩子: animationend

动画属性: 尽量使用动画属性进行动画，能拥有较好的性能表现

translate
scale
rotate
skew
opacity
color

本文地址：https://blog.csdn.net/liu_kaige/article/details/109640630

上一篇：设计模式漫谈之命令模式

下一篇： JavaScript中为什么 0.1 + 0.2 != 0.3

那些HTML、CSS中常见的面试题及知识点

1.HTML、XHTML、XML有什么区别

2.知道img的srcset的作用

3.link和@import的区别

4.层叠上下文

5.谈谈对BFC的理解

6.HTML5和css3的新标签

7.html5有哪些新特性，移除了哪些元素？如何处理HTML5新标签的浏览器谦容问题？如何区分HTML和HTML5？

8.为什么有时候人们用translate来改变位置而不是定位

9.html常见谦容性问题

10.什么是外边距重叠？重叠的结果是什么？

11.box-sizing常用的属性有哪些?分别有啥？

12.CSS中transition和animate有何区别?animate如何停留在最后一帧!

13.什么是css hack？ ie6,7,8的hack分别是什么？

13.谈谈以前端角度出发做好SEO需要考虑什么

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

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

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

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

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

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

20.display:none 与visibility:hidden的区别是什么？

21.IE的双边BUG：块级元素float后设置横向margin，ie6显示margin比设置的较大。

22.css有个content属性吗？有什么作用？有什么应用？

23.css新增伪类有哪些

24.sass，less是什么？大家为什么要使用他们？

25.css动画animation

Css代码中color属性的几种常见用法及区别

HTML5移动端开发中的Viewport标签及相关CSS用法解析

html中css3之3d基本知识点完成一个立方体的并且让其旋转