前端面试准备之html&css

一只在努力的程序媛

已于 2023-11-19 17:07:35 修改

阅读量78

点赞数

文章标签：前端 html css

于 2023-11-17 22:00:46 首次发布

本文链接：https://blog.csdn.net/qq_57218855/article/details/134471493

版权

HTML5新增特性

新增语义化标签：head、footer、nav、main、section等
新增表单类型属性：email、number、color、placeholder、autofocus等
新增音视频标签：video、audio
新增canvas画布，引入了<canvas>元素
新增本地存储localStorage、sessionStorage
新增地理位置API，HTML5引入了Geolocation API，使得网页应用可以获取用户的地理位置信息，为位置相关的应用提供了更好的支持。
新增Web Workers，允许在浏览器中运行后台脚本，提高了网页应用的性能和响应速度。

HTML标签语义化的意义

提升可访问性：使用语义化的标签可以提升网站的可访问性，使得网站更易于被屏幕阅读器等辅助技术解析和理解。这样，视觉障碍用户能够更好地理解页面结构和内容。
改善SEO优化：搜索引擎通过分析网页的结构和内容来确定其在搜索结果中的排名。使用语义化的标签可以帮助搜索引擎更好地理解页面的重点内容，并提供更准确的搜索结果。
方便团队合作和维护：语义化的标签可以提供更清晰的结构，使得代码更易于理解和维护。对于多人协作开发的项目来说，统一的标签使用规范能够提高团队之间的沟通效率，减少潜在的问题和冲突。
增强代码的可读性和可维护性：语义化的标签能够让代码更加易读和易于维护。通过使用具有明确含义的标签，开发者能够更快速地理解代码的结构和意图，减少出错的可能性。
未来兼容性：使用语义化的标签有助于保持代码的未来兼容性。标签的含义相对稳定，即使是在新的HTML版本中，这些标签仍然能够保持其基本的语义意义。

Canvas和SVG的区别

canvas画布，是通过javascript来绘制2d图，是逐像素进行渲染。
SVG矢量图，是基于XML描述的2D图形语言，每个元素都是可用的，可以为其添加事件。

添加、移除、移动、复制、创建和查找节点

添加节点document.appendChild(dom)
移除节点document.removeChild(dom)
移动节点document.appendChild(targetDom)
复制节点dom.cloneNode(true)，参数true表示是否复制子节点
创建节点document.createElement(dom)
查找节点:
– document.getElementById(“elementId”)
– document.getElementsByClassName(“className”)
– document.getElementsByTagName(“tagName”)
– document.querySelector(“selector”)
– document.querySelectorAll(“selector”)

iframe

<iframe>标签用于在网页里面嵌入其他网页。

优点
可以将网页原封不动的加载进来
增加代码的可用性
用来加载显示较慢的内容，如广告、视频等
缺点
加载的内容无法被浏览器引擎识别，对SEO不友好
会阻塞onload事件加载
会产生很多页面，不利于管理

常见的CSS3新增特性

新增属性选择器、伪类选择器
边框圆角：border-radius
阴影效果：box-shadow
盒子大小：box-sizing
线性渐变：linear-gradient
径向渐变：radial-gradient
过渡效果：transition
动画属性：animation
变换效果：transform

盒模型

盒模型图例

盒模型都是由四个部分组成的，分别是margin、border、padding和content。
标准盒模型和IE盒模型的区别在于设置width和height时，对应的范围不同。

标准盒模型，是浏览器默认的盒子模型。
盒子总宽度=width+padding+border+margin
盒子总高度=height+padding+border+margin
注意：width和height只包含了content，不包含border和padding，所以实际上盒子的总宽度会比设置width大。
IE盒模型
盒子总宽度=width+margin
盒子总高度=height+margin
注意：IE盒模型width和height包含了border和padding的值。

margin和padding使用场景

margin是盒子的外边距，即盒子与盒子之间的距离，而padding是内边距，是盒子的边与盒子内部元素的距离。

何时使用margin：
需要在border外侧添加空白
空白处不需要背景色
上下相连的两个盒子之间的空白，需要相互抵消时。
何时使用padding：
需要在border内侧添加空白
空白处需要背景颜色
上下相连的两个盒子的空白，希望为两者之和。

CSS选择器和优先级

!important > 内联样式 >ID选择器 > 类选择器/伪类选择器/属性选择器 > 标签选择器/伪元素选择器 > 关系选择器/通配符选择器

display的属性和作用

属性	作用
block	块类型。默认宽度为父元素宽度，可设置宽高，换行显示。
inline	行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。
inline-block	行内块级元素。默认宽度为内容宽度，可设置宽高，同行显示。
table	块级表格
flex	flex容器布局
none	隐藏元素
inherit	从父类继承display属性

隐藏元素的方式

display:none：元素不存在，不会占据位置
visibility:hidden：元素的位置保留，仍然占据空间
opacity:0：将透明度设置为0
z-index：负值：直接将元素放置在最下层，利用其他元素来遮盖。正值相反，数字越大，元素堆叠顺序越前
position:absolute：将元素定位到可视区域以外

单行、多行文本溢出

单行

overflow:hidden;// 溢出隐藏
text-overflow:ellipsis;// 溢出用省略号显示
white-space:nowrap;// 规定段落中的文本不进行换行

多行

overflow:hidden;// 溢出隐藏
text-overflow:ellipsis;// 溢出用省略号显示
display:-webkit-box;// 作为弹性伸缩盒子模型显示
-webkit-box-orient:vertical; // 设置伸缩盒子的子元素排列方式：从上到下垂直排列
-webkit-line-clamp:3;// 显示的行数

常见的CSS单位

px像素：固定像素单位，不会随其他元素的变化而变化。
百分比%：作用于父元素，当浏览器的宽度或者高度发生变化时，当前元素依据比例发生变化。
em和rem：相对长度单位，em相对于父元素，rem相对于根元素html，会随着html元素变化而变化。
vm/vh：是与视图窗口有关的单位，代表视图窗口的宽高。

flex布局

flex布局是CSS3新增的一种布局方式，能够根据不同屏幕尺寸的变化来自适应大小。
常用的属性：

flex-direction属性决定主轴的方向（即项目的排列方向）。
flex-wrap属性定义，如果一条轴线排不下，如何换行。
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
justify-content属性定义了项目在主轴上的对齐方式。
align-items属性定义项目在交叉轴上如何对齐。
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

BFC

BFC是块级格式上下文（Block Formatting Context，BFC），是CSS布局的一个概念，在BFC布局里面的元素不受外面元素影响。

创建BFC条件：

设置浮动：float有值并不为none（默认）
设置绝对定位： position（absolute或fixed）
overfilow值为：hidden、auto、scroll
display值为：inline-block、table-cell、table-caption、flex等

BFC作用：

解决margin重叠问题：由于BFC是一个独立的区域，内部元素和外部元素互不影响，将两个元素变为BFC，就解决了margin重叠问题
创建自适应两栏布局：可以用来创建自适应两栏布局，左边宽高固定，右边宽度自适应。
解决高度塌陷问题：在子元素设置浮动后，父元素会发生高度的塌陷，也就是父元素的高度为0解决这个问题，只需要将父元素变成一个BFC。

使用css实现一个三角形

		div {
			width: 0;
			height: 0;
			border-top: 50px solid lightcoral;
			border-left: 50px solid white;
			border-right: 50px solid white;
		}

浮动

浮动元素碰到包含它的边框或者浮动元素的边框停留。由于浮动元素不在文档流中，所以文档流的块框表现得就像浮动框不存在一样。浮动元素会漂浮在文档流的块框上。

浮动带来的问题：

父元素的高度无法被撑开，影响与父元素同级的元素
与浮动元素同级的非浮动元素（内联元素）会跟随其后
若不是第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构

清除浮动的方式：

父级div定义height
最后一个浮动元素后加<div style="clear:both"></div>
包含浮动元素的父标签添加样式overflow：hidden或auto
父级div定义为zoom

响应式设计

响应式设计的基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理，为了处理移动端，页面头部必须有meta声明viewport
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
属性对应如下：

width=device-width：是自适应手机屏幕的尺寸宽度
maximum-scale=1：是缩放比例的最大值
initial-scale=1：缩放的初始化
user-scalable=no：用户将不能通过手势操作的方式对页面进行缩放（值为yes时相反）

实现响应式布局的方式如下：

媒体查询
使用@Media查询，可以针对不同的媒体类型定义不同的样式

@media screen and (max-width: 600px) { ··· }

百分比
通过%实现响应式的效果，不建议使用
vm/vh
vm表示相对于视图窗口的宽度，vh表示相对于视图窗口的高度。任意层级元素，在使用vw单位的情况下，1vw都等于视图宽度的百分之一，与百分比布局很相似
rem
rem是相对于根元素html的font-size属性，默认情况下浏览器字体大小为16px，此时1rem=16px。
可以利用媒体查询，针对不同设备分辨率改变font-size的值