HTML和CSS基础知识（前端工程师面试常考题）

攻城狮炭烤策划

已于 2022-11-20 16:40:38 修改

阅读量443

点赞数

文章标签： html 前端

于 2022-07-11 22:57:51 首次发布

本文链接：https://blog.csdn.net/qq_30258721/article/details/125708412

版权

HTML和CSS基础知识

HTML篇
CSS篇

为温习HTML基础知识而写了这篇博客，希望对各位也有点帮助。

HTML篇

一、W3C标准是什么？

万维网联盟（W3C）标准是一系列标准的集合。包括结构标准（HTML、XML等）、表现标准（CSS等）和行为标准（DOM、ES等）。

二、XHTML是什么？与HTML区别？

XHTML指可扩展超文本标签语言（EXtensible HyperText Markup Language），是在HTML4.0基础上的优化和改进，可以说是强化版HTML，它更严谨更纯净。在XHTML语法下：
1.属性名称必须小写
2.属性值必须加引号
3.属性不能简写
4.用 Id 属性代替 name 属性
5.XHTML DTD 定义了强制使用的 HTML 元素

三、对HTML语义化的理解

缺少语义化可能带来的结果是，网页大量使用div，结构不清晰不易开发。
HTML语义化概念的提出，是将每个标签赋予意义，在合适的地方使用，如p标签用于定义段落，那么就不要用于定义标题。即用HTML提供的标签，明晰标签含义去进行排版。
语义化的好处：
	1.网页结构清晰，提高代码可读性，易于开发
	2.有利于seo

四、HTML5新特性

1.HTML5新增许多标签，包括header、article、aside、audio、bdi、canvas、command、datalist、details、embed、figcaption、figure、footer、header、hgroup、keygen、mark、meter、nav、output、progress、rp、rt、ruby、section、source、summary、time、track、video
	header、footer、aside、main、section、nav等标签用于区别网页结构。
	canvas标签可用于在网页上绘制图形、路径。
	audio标签可以在网页上添加音频文件。
	其他像progress标签可用于制作进度条。
2.新增localStrorage和sessionStrorage
3.应用程序缓存、web workers、web socket

五、localStorage、sessionStrorage与cookie

三者都是用于存储客户端（网页）数据的对象。
localStorage存储时间永久（只要文件还在），储大小5M左右（不同浏览器可能不一样）。
sessionStorage，存储时间为一次会话（通常是窗口关闭为会话结束），会话结束自动清空，存储大小也是5M左右。
cookie存储空间4K左右，存储有效时间可以自己设置，通信时携带在HTTP头中，因此cookie保存过多会影响性能。

六、块级元素、行内元素、行内块元素

块级元素（div、form、table、h1-h6、p等）：
	1.总是另起一行
	2.宽高和内外边距可以自己控制
	3.可以容纳其他元素（包括块元素）
行内元素（span、a、strong、em等），又称内联元素：
	1.内容在一行上
	2.宽高和内外边距不可改变
	3.宽高就是内容宽高
	4.只能容纳文本或其他行内元素
行内块元素（img、textarea、input）
	1.支持宽高自己控制
	2.不独占一行
	（个人认为空元素属于另一种概念，指没有内容，不需要闭合标签。如br，闭合就写<br/>，而不是<br></br>）

七、HTML全局属性(Global Attribute)有哪些？

class：规定元素的一个或多个类名；
dir：规定元素内容文本方向；
id：规定元素唯一id；
style：规定元素行内css样式；
title：规定元素信息；
translate：规定是否应该翻译元素内容；
accesskey：规定激活元素的快捷键；
lang：规定元素内容的语言；
等等

八、是什么？有什么用？

<!DOCTYPE HTML>是文档类型声明。它声明该文档类型是html5，使用的html5标准。<!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前。

九、什么是渐进增强？什么是优雅降级？

渐进增强是指保证低版本浏览器能正常运行的同时，针对高版本浏览器优化网页。
优雅降级是指一开始针对主流版本浏览器开发，后再对低版本浏览器兼容。

十、什么是seo？

seo指搜索引擎优化，利用搜索引擎的规则提高网站的搜索排名。

十一、src与href的区别

src是引用资源，替换当前元素，常用于img、script和iframe。
href是超文本引用，将当前元素与资源之间建立联系，常用于a和link。

十二、meta标签

meta标签可提供有关页面的信息，它不会显示在网页上，但是对于计算机可读。可用于优化搜索和web服务。
常用属性值：
	keywords：用于定义网页关键字；
	description：用于定义网页的描述；
	charset：用于定义页面的编码格式；
	http-equiv：用于设置网页过期时间，自动刷新等；
	content-type：用于定义文件类型；
	等等。

十三、重排和重绘

浏览器下载完HTMl，CSS，JS后会生成两棵树：DOM树和渲染树。 当Dom的几何属性发生变化时，比如Dom的宽高，或者颜色，position，浏览器需要重新计算元素的几何属性，并且重新构建渲染树，这个过程称之为重绘重排。
重排（回流）：当DOM节点位置大小发生变化，会引起回流
重绘：改变元素的颜色，字体和透明度会引起重绘
（重排必然引起重绘，但重绘不会重排）

十四、引入css样式的方法

行内样式，即直接在标签中使用style属性引入css样式，不推荐使用，因为可读性不高且后续维护困难。
内部样式，在style标签中引入css样式，通常写在head标签中。
外部样式，在.css文件中写css样式，通过link标签应用。实际开发中外部样式运用最多。

十五、BFC是什么？

BFC（Block Formatting Context），即块级格式化上下，通常指盒模型布局的CSS渲染模式，在这个盒模型内部元素无论怎样变化都不会影响到外部。
BFC的使用场景：
1.清除浮动
2.去除边距重叠现象
3.自适应布局

CSS篇

一、CSS盒模型

标准盒模型：宽（width）、高（height）、内容（content）、边框（border）、内边距（padding）和外边距（margin）
怪异盒模型（IE6以下版本）：宽（width）、高（height）、内容（content、border、padding）和外边距（margin）
如果两个盒模型都定义宽高200*200，标准盒模型是content为200*200，而怪异盒模型content+border+padding为200*200。

二、CSS选择器有哪些？

类选择器（.）  如 .demo {}
id选择器（#）  如 #demo{}
标签选择器（div等标签）  如 div{}
相邻选择器（+）  如 div + p{}
子选择器（>）  如 ul > li{}
后代选择器      如 div a{}
属性选择器（[]）  如 .el-popper[x-placement^="bottom"]{}
伪类选择器（:）  如 a:hover{}
伪元素选择器（::）  如 p::after{}
通配符选择器（*）  如 *{}

CSS选择器详解（https://blog.csdn.net/qq_30258721/article/details/125961814）

三、CSS样式优先级

标签选择器（1）<  类选择器、伪类选择器、伪元素选择器和属性选择器（10）<  id选择器（100）<  行内样式（1000）<  !important
优先级一样，后面的相同样式会覆盖前面的。

四、CSS常用伪类有哪些？其作用是什么？

:hover，鼠标悬停
:link， 选择未访问过的链接
:visited， 选择访问过的链接
:not(selector)， 选择除selector外的元素
:first-child， 选择匹配到的第一个子元素

五、初始化CSS样式是什么？为什么要初始化？

初始化CSS样式即先给定值，重设浏览器样式，后续再覆盖。如：

*{padding: 0; margin: 0;} // 适配器对于大型项目不推荐，会加重网站负载

因为浏览器的兼容问题，不同浏览器对部分标签的默认值是不同的，如果没对CSS初始化可能会导致浏览器之间的页面显示差异。

六、display:none、visibility:hidden和opacity:0有什么区别？

display:none设置元素不生成，一般用于不占空间的隐藏元素；
visibility:hidden设置元素不可见，但占空间；
opacity:0设置元素透明度100%，元素不可见，也占空间。

七、媒体查询是什么？用于做什么？

媒体查询是CSS3新语法，使用@media可以针对不同媒体类型定义样式。
可以用于解决网页端样式用于移动端混乱的问题。

八、什么是响应式设计？

响应式设计（Responsive Web Design）即一个网页能适应不同设备，注意并不是为网页制作多个版本，而是这个页面直接可以适应。

九、 ::before和 :before中双冒号和单冒号有什么区别？

: 是CSS伪类，::是CSS伪元素
::before作为一个子元素，作用于内容之前的一个伪元素，不会在dom中生成。而:before会在dom中生成

十、CSS预处理器有哪些？有什么用？

常用的有：less、sass
CSS虽然功能很强大，但它不能进行动态编程，预处理器使CSS可以进行定义变量、嵌套、运算、继承、函数等功能，更方便编写、阅读和维护。

SCSS基础教程–透过SCSS理解CSS预处理器（https://blog.csdn.net/qq_30258721/article/details/126442474）

十一、用CSS制作一个三角形

width: 0;
height: 0;
border-top: 10px solid transparent;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #000;

十二、清除浮动的方式

1.使用clear:both
2.给父标签添加overflow:hidden
3.父标签定义height
4.利用after伪类

十三、px、em和rem的区别

px（Pixel）即像素，根据显示器屏幕分辨率显示。
em即相对长度单位，相对于当前对象文本字体大小。
rem也是相对长度单位，但是相对于HTML根元素字体大小。

十四、浏览器兼容性问题

一种CSS样式并不是在所有浏览器都可以正常运行的，比如动画网格在Gecko引擎可以运行，但是webkit引擎却不可以。
CSS推出四种浏览器私有前缀，解决这一问题：
-moz- 代表firefox浏览器
-ms- 代表IE浏览器
-webkit- 代表Chrome、safari浏览器
-o- 代表Opera浏览器

十五、CSS3新特性

border-radius  添加圆角
box-shadow   添加阴影
text-shadow   添加问题特效
gradient   添加渐变
CSS3动画   transform、transition和animation
等等（一般说出三四个就行了）

十六、transform有哪些效果？

translate 改变位置
scale  大小缩放
rotate  旋转
skew    倾斜

十七、弹性布局（Flex）

弹性布局是CSS3的一种新布局模式，单页面需要适应不同屏幕大小，弹性布局可以自动排列和分配空白空间。
弹性布局由弹性容器和弹性子元素组成。在容器内可以定义排列方式、换行方式等行为。
常用属性：
flex-direction：指定子元素在容器中的排列顺序
justify-content：将子元素沿着容器主轴线对齐
align-items： 将子元素沿着容器侧轴线对齐
flex-wrap： 指定子元素换行方式
等

十八、列举一些常用CSS框架

bootstrap 是美国Twitter公司推出的前端开发框架，对于设计响应式网页十分方便。
element-ui 是饿了么推出的前端开发框架，在国内很受欢迎，常与VUE搭配使用，适合组件快速开发。
antd 常与React搭配使用，也适合组件快速开发。

攻城狮炭烤策划

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML和CSS基础知识（前端工程师面试常考题）

HTML基础知识（面试常考题）
复制链接

扫一扫