html
1.DOCTYPE
是一种文档类型声明（Document Type Declaration），用于指定HTML文档的版本和类型
<!DOCTYPE html>
2.charset="utf-8"
对于中文网页需要使用 <meta charset="utf-8"> 声明编码，否则会出现乱码
<meta charset="utf-8">
3.html5新增标签
1.canvas、audio、video、以及语义化标签nav,header,footer,main等。audio标签可定义音频内容，video可定义视频。新增input(type)类型
2.webStorage 储存机制 sessionStorage 和 localStorage（存储大小5mb）
3.新的技术webworker, websocket等
// 多媒体标签
<canvas/>
<audio/>
<video/>
// 语义化标签
<nav/>
<header/>
<footer/>
<main/>
// input type 各种类型
<input type='email'/>
<input type='number'/>
<input type='color'/>
<input type='url'/>
<input type='image'/>
<input type='search'/>
// 各种日期选择
//date 选择年、月、日
//month 选择年、月
//week 选择年、周
//time 选择时间（时、分）
//datetime 选择年、月、日、时（UTC时间）
//datetime-local 选择年、月、日、时（本地时间）
<input type='date'/>
<input type='month'/>
// webStorage 储存机制 sessionStorage 和 localStorage
sessionStorage : 浏览器关闭，则sessionStorage 被销毁 （存储大小5mb）
localStorage：永久存在（存储大小5mb）
cookie: 浏览器关闭，则cookie被销毁 （存储大小4kb） （这不是新增的）
//webworker, websocket
webworker: Web Worker（Web 工作者）是一种在浏览器中运行的脚本，提供多线程能力，能够在后台执行任务而不会阻塞主线程。
websocket： 能够建立与后台联系的长链接
4.html5语义化标签的理解（记住标题就行）
提升可访问性：
语义化标签能够更清晰地描述页面内容的结构和含义，使得屏幕阅读器、搜索引擎和其他辅助技术可以更好地理解和解析网页。这样可以提升网站的可访问性，让更多用户能够方便地获取和使用网页内容。
改善搜索引擎优化：
搜索引擎会根据网页的内容结构和标签来判断页面的相关性和排名。使用语义化标签可以为搜索引擎提供更准确的信息，提高网页在搜索结果中的显示和排名。
方便开发和维护：
语义化标签能够使网页的结构更清晰可见，易于理解和维护。对于开发人员来说，理解网页结构更容易，也可以提高代码的可读性和可维护性。
增强互操作性和扩展性：
语义化标签有助于不同系统、平台和设备之间的互操作性，可以更好地支持不同浏览器、移动设备和屏幕尺寸的适配。此外，它们还为未来的扩展和新技术提供了更好的适应性。
5.在 HTML 中，SVG、图像（Image）和图标字体（Icon Font）各有其优点和缺点
优点：
SVG:
* 可伸缩性: SVG 是一种矢量图形格式，可以无损地缩放到任意大小而不失真，适应不同分辨率的设备。
* 文本编辑和动画: SVG 基于XML，可使用文本编辑器进行编辑，并且支持动画效果，比如过渡、变形和交互。
* 矢量化: SVG 图形使用基于数学公式的矢量描述，能够产生图像的平滑轮廓和线条。
图像（Image）:
* 图片质量: 图像文件（如JPEG、PNG、GIF）能够提供高质量的照片、图形和复杂的视觉效果。
* 广泛支持: 图像格式得到广泛支持，浏览器能够直接解析和显示图像文件。
* 简单易用: 使用 [图片上传失败...(image-1e7c2f-1687934266531)]
标签嵌入图像非常简单，只需指定图像的 URL。
图标字体（Icon Font）:
* 矢量化和可伸缩性: 图标字体使用矢量字形，可以无损放大，并且保持清晰度和质量。
* 颜色和样式控制: 图标字体可以通过 CSS 控制其颜色、大小、阴影和其他视觉样式。
* 网页性能: 由于只需加载一个字体文件，图标字体比使用多个图像文件的图标集更轻量级，速度更快。
缺点：
SVG:
* 文件大小: SVG 文件可能会比图像文件更大，特别是包含复杂路径和细节的高分辨率图形。
* 浏览器兼容性: 在一些旧版本的浏览器中，对 SVG 的支持可能不完整或存在兼容性问题。
图像（Image）:
* 像素化和失真: 图像是基于像素的，放大时可能会出现模糊、锯齿或失真。
* 文件体积: 高分辨率和大尺寸的图像文件可能会很大，影响页面加载速度。
图标字体（Icon Font）:
* 受限于字体: 图标字体受限于字形和字体设计，可能无法表达图像的细节和复杂性。
* 图标数量限制: 由于字体文件的限制，图标字体的数量可能有限。
6.常见的html 块元素和内联元素有哪一些
块级元素包括：
<div> : 用于表示文档中的一个块级容器，通常用于组织和布局页面的结构。
<p> : 用于表示段落，常用于显示文本内容的段落。
<h1> - <h6> : 用于表示标题，其中 <h1> 表示最高级的标题，而 <h6> 表示最低级的标题。
<ul> : 用于表示无序列表，包含一个或多个列表项 <li>。
<li> : 用于表示列表项，在 <ul> 或 <ol> 中使用。
<table> : 用于表示表格，包含多个行 <tr> 和单元格 <td> 或表头单元格 <th>。
<header> : 用于表示文档或节的头部，可以包含标题、标志和导航等内容。
常见的内联元素（行内元素）包括：
<span> : 用于表示文档中的一个内联容器，常用于标记或包裹文本的特定部分。
<a> : 用于创建超链接，允许用户跳转到其他页面或位置。
<img> : 用于插入图像，显示指定的图像文件。
<strong> : 用于表示加重强调的文本。
<em> : 用于表示斜体强调的文本。
<br> : 用于在文本中插入换行符。
<input> : 用于创建表单中的输入字段，如文本框、复选框、单选按钮等。
<button> : 用于创建按钮。
7.标准盒模型和怪异盒模型
标准盒模型： 会撑大盒子 width+padding+border = 500
width:300px;
height:300px;
padding:40px;
border:60px solid red;
box-sizing: content-box; // 设置标准盒子模型 默认
image.png
怪异盒模型 盒子大小不会变 会往内缩小 width+padding+border=300
width:300px;
height:300px;
padding:40px;
border:60px solid red;
box-sizing: border-box; // 怪异盒子模型
image.png
8.什么是BFC
BFC 是块级格式化上下文（Block Formatting Context）的缩写。它是 CSS 布局的一种概念，用于描述在文档中的块级盒子如何布局、定位和相互影响。BFC 是一个独立的渲染区域，具有一套独立的规则来决定内部块级盒子的布局表现。
BFC 具有以下特性和行为：
渲染规则：BFC 内的块级盒子按照垂直方向一个接一个地放置，它们的边框之间的垂直间距由 margin 属性决定，属于同一个 BFC 的两个相邻块级盒子的 margin 会合并。
边界限定：BFC 的边界由包含它的父级元素的边框限定，不会与外部的元素重叠。// 可以杜绝margin重叠
浮动清除：BFC 可以包含浮动元素，当包含浮动元素时，BFC 会自动计算包含区域的高度，确保包含区域包含了浮动元素。// 清除浮动
阻止外部元素影响：BFC 内部的所有元素与 BFC 外部的元素互相隔离，内部元素的变化不会影响到外部元素，反之亦然。
阻止浮动元素覆盖：BFC 会阻止浮动元素覆盖在其内部的元素上，从而避免布局混乱。
BFC 的创建方式包括：
1.设置浮动元素 float : left , right;
2.设置overflow: auto , scroll, hidden;
3.设置display ： inline-block, flex, gird 等
4.设置position: absolute fixed
重点记住：清除浮动 避免margin重叠
BFC 的应用可以解决一些常见的布局问题，如清除浮动、避免 margin 重叠等。通过创建和利用 BFC，我们可以更好地控制和调整元素的布局和交互。
请注意，BFC 只适用于块级盒子，内联元素不触发 BFC。要创建内联元素的格式化上下文，可以使用 CSS 属性 display: inline-block 或 display: flow-root（在较新的浏览器中支持）
9.请列举几种可以清除浮动的方法（至少两种）
添加额外标签，例如
a. <div style="clear:both"></div>
b. 使用br标签和其自身的html属性，例如<br clear="all" />
c. 父元素设置 overflow：hidden；在IE6中还需要触发hasLayout，例如zoom：1；
d. 父元素设置 overflow：auto 属性；同样IE6需要触发hasLayout
e. 父元素也设置浮动
f. 父元素设置display:table
在浮动元素后使用一个空元素如
<div style="clear:both"></div>
// 父元素设置
overflow：hidden；
overflow：auto;
display:table
10.display:none和visibility:hidden的区别
display:none，该元素不占据任何空间，在文档渲染时，该元素如同不存在（但依然存在文档对象模型树中）。 会触发reflow（回流），进行渲染
visibility:hidden，该元素空间依旧存在。 只会触发repaint（重绘），因为没有发现位置变化，不进行渲染。
11.什么是回流什么是重绘
在浏览器中，回流(reflow)和重绘(repaint)是与渲染相关的两个概念。
回流是指当DOM元素的几何属性（如宽度、高度、位置等）发生变化时，浏览器需要重新计算并确定元素在页面中的位置和大小。回流会导致页面的重新布局。回流的触发会造成较大的性能开销，因为它会重新计算并更新整个渲染树。
而重绘是指当DOM元素的样式属性（如颜色、背景、字体等）发生变化时，浏览器会重新将元素绘制在屏幕上。重绘不会改变元素的位置和大小，只会重新绘制元素的外观。相较于回流，重绘的性能开销较小。
由于回流涉及到整个页面的重新布局，因此其性能开销较大，会导致页面渲染的延迟。在实际开发中，需要尽量避免频繁触发回流操作，以提高页面的性能。
为了优化页面性能，可以采取以下策略：
尽量减少回流的触发，可以通过批量修改样式、使用 CSS3 动画代替 JavaScript 操作等方式。
避免在循环中频繁修改样式，可以将样式修改操作提到循环之外。
使用雪碧图（sprite）或图标字体等方式减少 HTTP 请求，减少重绘的触发。
12.请简述CSS的权重规则
!important > 行内样式 > id > class|熟悉选择器|伪类选择器 > 元素名
14.rem 和em 区别
rem 相对于根元素的font-size
em 相对于父元素的font-size
.CSS中 link 和@import 的区别是什么？
a. link属于HTML标签，而@import是CSS提供的，且只能加载 CSS
b. 页面被加载时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载
c. import只在IE5以上才能识别，而link是HTML标签，无兼容问题
d. link方式的样式的权重 高于@import的权重
15.position的值， relative和absolute分别是相对于谁进行定位的？
absolute：生成绝对定位的元素，没有设置relative，相对于浏览器窗口定位，上层原色有设置了relative相对于设置了relative的原色定位
fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。 （IE6不支持）
relative：生成相对定位的元素，相对于其在普通流中的位置进行定位
16.css3新增属性 (记住下面的这些css 新增就行，无需记住用法)
1.text-shadow , 2.box-shadow, 3.background, 4.border-radius, 5.rgba（透明度）， 6.border-image, 7.媒体查询， 8.word-wrap ， 9. font-face ，10.transition（过度）， 11.transform(2D属性)， 12.animation（动画）13will-change 新建图层
一.text-shadow//
text-shadow:(左右平移 +右 -左) (上下平移 +下 -上) (模糊距离 0~无限) (颜色);
text-shadow:10px 10px 5px #999;
二.box-shadow
text-shadow:(左右平移 +右 -左) (上下平移 +下 -上) (模糊半径 0~无限，) (阴影扩展半径 负无限~正无限，阴影放大缩小) (颜色) 内外阴影(默认值：外，inset：内);
text-shadow:10px 10px 5px 5px #999 inset;
三.background
background-image：设置元素的背景图像。
background-origin：规定背景图片的定位区域。
background-size ：规定背景图片的尺寸。
background-repeat：设置是否及如何重复背景图像。
四.border-radius
border-radius:10px 20px 30px 40px;
五.rgba
background-color:rgba(225,225,225,0.2);
六.border-image
border-image: 边框设置图片
七.媒体查询
@media(max-width:200px){
div{
background:red;
}
}
八.word-wrap
word-wrap 属性允许长单词或 URL 地址换行到下一行。
注：所有主流浏览器都支持 word-wrap 属性。
基础语法：word-wrap: normal|break-word;
九.font-face
font-face属性：定义自己的字体
十.transition
transition: 要过渡的属性 花费时间 运动曲线 何时开始;
3. 运动曲线
默认是ease (可以省略)
linenr 匀速
eare 逐渐慢下来
eaer in 加速
eaer out 减速
eae-in- out 先加速后减速
.son {
width: 200px;
height: 200px;
background: red;
transition: all 1s linear 0.5s;
}
.son:hover {
width: 100%;
background: yellow;
}
十一.transform( 2D 属性)
transform：实现元素的位移，旋转，缩放等效果;
1.translate (位移)
transform: translate(200px, 200px);
2. rotate（旋转）
transform: rotate(40deg);
3. scale（缩放）
transform：scale（x，y）；
综合写法
transform：translate() rotate() scale() ;
十二.animation 动画
@keyframes move {
0% {
transform: translate(0, 0);
}
50% {
transform: translate(100px, 100px);
}
100% {
transform: rotate(123deg);
}
}
.son {
width: 100px;
height: 100px;
background: red;
animation: move;
animation-iteration-count: infinite;
animation-duration: 8s;
}
开启 GPU 加速的方法我们可以使用
{
will-change:transform
}
17.css 写几种水平竖直居中方案
1.使用flexbox布局
//父元素盒子
.container {
display: flex;
justify-content: center;
align-items: center;
}
2.使用绝对定位和transform属性：
//父元素盒子
.container {
position: relative;
}
//子元素盒子
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
3.使用grid布局：
//父元素盒子
.container {
display: grid;
place-items: center;
}
18.简述flex布局
flex弹性布局，可以简便、完整、响应式地实现各种页面布局, 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）
不需要全集住 带*的记住
*flex-direction：决定主轴的方向
row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。
*flex-wrap：换行
nowrap（默认）：不换行。
wrap：换行，第一行在上方。
wrap-reverse：换行，第一行在下方。
flex-flow：flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
*justify-content：水平对齐方式
flex-start（默认值）：左对齐
flex-end：右对齐
center： 居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
align-items：垂直对齐方式
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
19.less、sass、 stylus这些css 预处理器有什么优点
变量和计算功能：预处理器允许使用变量来存储和复用CSS属性值，从而提高了样式表的可维护性和重用性。此外，预处理器还支持数学计算功能，可以进行属性值的动态计算，使得样式表更加灵活。
嵌套和选择器继承：预处理器支持样式的嵌套，可以将相关样式组织在一起，使得代码更加清晰和易读。此外，预处理器还提供选择器继承功能，可以继承其他选择器的样式，减少了重复编写相似代码的工作量。
混合（Mixins）和函数：预处理器提供了混合和函数的功能，可以定义一组样式集合，并在需要的地方进行调用，以便快速生成特定的样式。这样可以提高样式表的重用性和代码的效率。
模块化和文件组织：预处理器允许将样式表拆分成多个文件，并通过导入功能进行组织。这样可以更好地管理大型项目中的样式，并实现模块化开发，使得代码更加可维护和易于管理。
增强CSS功能：预处理器通常会扩展CSS的功能，提供一些CSS原生不支持的特性。例如，自定义函数、循环和条件语句等，使得开发者可以更加灵活地控制样式的生成和渲染。
提升开发效率：通过使用预处理器，开发者可以更快地编写和组织CSS样式，减少重复劳动和错误。预处理器提供了更高级的工具和语法，使得开发效率得到提升。
20.怎么初始化css 统一个浏览器样式
使用标准化/重置样式表：
标准化样式表是一组用于重置不同浏览器之间样式差异的CSS规则，以确保网页在各个浏览器上更加一致地呈现。常见的标准化样式表包括 Normalize.css 和 Reset CSS。你可以将它们作为CSS文件链接到你的HTML文件中，修正浏览器默认样式的差异。例如：
<link rel="stylesheet" href="normalize.css">
21.移动端的布局用过媒体查询吗？
media :通过媒体查询可以为不同大小和尺寸的媒体定义不同的css，适应相应的设备的显示。
<head>
里边
<link rel="stylesheet" type="text/css" href="xxx.css" media="only screen and (max-device-width:480px)">
CSS :
@media only screen and (max-device-width:480px) {
/css样式/
}
22.怎么让Chrome支持小于12px 的文字？(因为chrome 支持最小字体为12px)
p{
font-size:12px;
-webkit-transform:scale(0.8);
transform:scale(0.8); //0.8是缩放比例
}
23.style标签写在body后与body前有什么区别？
页面加载自上而下 当然是先加载样式。
写在body标签后由于浏览器以逐行方式对HTML文档进行解析，当解析到写在尾部的样式表（外联或写在style标签）会导致浏览器停止之前的渲染，等待加载且解析样式表完成之后重新渲染，在windows的IE下可能会出现FOUC现象（即样式失效导致的页面闪烁问题）
