前端八股文（HTML、CSS）

koiyQ

已于 2024-04-25 09:18:36 修改

阅读量539

点赞数 26

分类专栏：前端八股文文章标签：前端

于 2024-03-31 22:58:57 首次发布

本文链接：https://blog.csdn.net/miss_y0/article/details/137212050

版权

前端八股文专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、HTML

HTML5 新特性

语义化标签：header、footer、section、aside 等
音视频处理API：audio、video
web存储：localStorage、SessionStorage
表单控件：calendar、date、time、email、url、search
绘图：canvas
请求动画帧：requestAnimationFrame
全双工通讯协议：WebSocket
history API
地理定位（Geolocation）API
拖拽释放（Drag and drop）API

HTML5 语义化标签的优点

在没CSS样式的情况下，页面整体也会呈现很好的结构效果
代码结构清晰，易于阅读
利于开发和维护，方便其它设备（如屏幕阅读器）解析，根据语义渲染网页
利于搜索引擎优化（SEO），搜索引擎爬虫会根据不同的标签来赋予不同的权重

src、href 的区别

src：

```
<script src="script.js"></script>
```
用于替换当前元素。src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内
同步加载执行。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部
src属性引用的资源是必需的，并且将在文档中占据一定的空间，直接影响文档的渲染
src属性适用于图片、音频、视频和脚本等资源的引用

href：

<link href="reset.css" rel=”stylesheet“/>

用于在当前文档和引用资源之间确立联系。href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接
异步执行。并行下载资源，并且不会停止对当前文档的处理。这也是为什么建议使用link方式来加载css，而不是使用@import方式
href属性引用的资源是可选的，并且不会占据文档的空间，仅用于指定链接到文档之外的资源
href属性适用于CSS样式表、字体文件和其他网页的链接

总结：

src 和 href 的区别是，它们的作用方式不同，浏览器解析方式不同，适用范围不同。
src用于嵌入到文档中的资源，而href用于链接到文档之外的资源。src会直接影响文档的加载和显示，而href只会影响到引用的资源的使用。根据具体的需求和外部资源类型，选择适当的属性来引用资源，以确保正确加载和使用外部资源。

link、@import 的区别

link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS
link引用CSS时，在页面载入时同时加载；@import需要页面完全载入以后加载
link无兼容问题；@import是在CSS2.1提出的，低版本浏览器不支持
link支持使用JavaScript控制DOM去改变样式；@import不支持

script 标签放在 header 和放在 body 的区别

放在 header

html 第一时间被加载出来，但页面 body 内容迟迟没有渲染出来
等待 header 标签中 script 脚本的加载完成后，整个页面才渲染完成

放在 body

html 内容第一时间渲染完成，随后等待 js 的加载

总结

脚本会阻塞页面的渲染，所以推荐将其放在body底部
因为当解析到 script 标签时，通常页面的大部分内容都已经渲染完成，让用户马上能看到一个非空白页面
多个脚本之间是异步向服务器请求，他们之间不互相依赖

行内元素、块级元素、空元素

行内元素：span、a、input、img、i、button
块级元素：div、p、h1~h6、header、footer、aside、ul、li、ol
行内块级元素：img、input、button
空元素：hr、br、input、img

dom 的 event 事件

什么是事件？

JavaScript 的事件机制也是一个标准的观察者模式的应用，包含事件的订阅者和事件发布者，通过监听事件对象来执行事件处理程序

事件分类

HTML 处理事件：在 html 标签里直接绑定事件处理函数
```
<button onclick="clickHandle()">
```

DOM0 级事件：通过 js 获取 dom 添加事件

<button id='btnId'>点击按钮</button>
<script>
    let btn = document.querySelector('#btnId')  // 获取dom，唯一性
    // DOM0事件绑定只能添加一个，添加多个则后面会覆盖前面
    btn.onclick = function() {
        console.log("Hello world!")
    }
</script>

DOM2 级事件：通过事件监听方法实现

<button id='btnId'>Event</button>
<script>
    let btn = document.getElementById('btnId')
    btn.addEventListener('click', function() {
        console.log('Hello world')
    }, false)
</script>

// 监听方法：addEventListener(event, fn, useCapture)
// useCapture 为布尔值用来设置事件是在事件捕获时执行，还是事件冒泡时执行，默认false
btn.addEventListener('click', fn, true) // 捕获阶段执行
btn.addEventListener('click', fn, false) // 冒泡阶段执行

事件的三个阶段
- 捕获阶段
- 目标阶段
- 冒泡阶段
Event 对象的常用方法
- Event.preventDefault() 阻止默认事件
- Event.stopPropagation() 阻止事件冒泡

二、CSS

CSS 盒子模型

什么是盒子模型
- 当对一个文档进行布局（layout）的时候，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型，将所有的元素表示为一个个矩形的盒子
- 一个盒子由四个部分组成：
  - content 内容
  - border 边框
  - padding 内边距，取值不能为负，受盒子的 background 属性影响
  - margin 外边距
- 默认情况下，盒子模型为 W3C 标准盒子模型
```
box-sizing: content-box | border-box | inherit;
          //   W3C标准   |    IE怪异   | 继承父元素
```
W3C 标准盒子模型
- 盒子总宽度 = width + padding + border + margin
- width/height 只是内容宽高，不包含 padding 和 border 值
IE 怪异盒子模型
- 盒子总宽度 = width + margin
- width/height 包含了 padding 和 border 值

CSS 选择器及优先级

!important > 行内样式 > ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

选择器
- id选择器 (#myid)
- 类选择器 (.myclass)
- 属性选择器 (a[rel=“external”])
- 伪类选择器 (a:hover, li:nth-child)
- 标签选择器 (div, h1,p)
- 相邻选择器 (h1 + p)
- 子选择器 (ul > li)
- 后代选择器 (li a)
- 通配符选择器 (*)
优先级
- !important
- 内联样式（1000）
- ID选择器（0100）
- 类选择器/属性选择器/伪类选择器（0010）
- 元素选择器/伪元素选择器（0001）
- 关系选择器/通配符选择器（0000）

CSS3 新特性

过渡：transition
动画：animation
变换：transform
选择器：属性、伪类、伪元素、多重
阴影：box-shadow、text-shadow
边框圆角：border-radius
背景：background-size、background-repeat、background-position
文字：text-overflow
渐变：线性渐变、径向渐变、圆锥渐变
布局：弹性布局、栅格布局、多列布局
媒体查询

CSS 预处理器

什么是 CSS 预处理器
- CSS 预处理器是一个包含自定义语法的解析器，根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件
- 本质上，预处理器是 CSS 的超集
常见的 CSS 预处理器
- sass 最常用的一种，它具有简洁、灵活、易于使用的特点
- less
- stylus
主要功能
- 嵌套（允许在样式规则中嵌套其他样式规则，反映层级与约束关系）
- 变量（引入变量，可用于存储颜色、尺寸等信息，同时支持数学运算，减少代码重复）
- 混入 Mixin（Mixins可以将一部分样式抽出，作为单独定义的模块，被很多选择器重复使用）
- 循环（支持在样式表中使用循环结构，适用于生成复杂但有规律的样式）
- 模块化 Import（允许在样式表中导入其他样式文件，有助于提高可维护性和代码复用）

CSS 动画

@keyframes 规则：@keyframes 规则用于定义动画的关键帧。通过指定关键帧的百分比和样式属性，可以定义动画从开始到结束的过渡效果。
```
@keyframes example {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}
```
transform 属性：transform 属性实现平移、缩放和旋转效果。
animation 属性：animation 属性用于将动画应用到元素上，并指定动画的名称、持续时间、延迟时间、播放次数、动画方向等。
```
.element {
  animation: example 2s ease-in-out 1s infinite alternate;
}
```
transition 属性：transition 属性用于实现元素状态变化时的平滑过渡效果，可以指定过渡的属性、持续时间、时间函数等。
```
.element {
  transition: transform 0.3s ease-in-out;
}
```

伪类、伪元素的区别

伪类是用来为元素添加一些特殊的样式。伪类是动态的，是一种状态，用 : 表示，如 :hover、:active、:first-child 等
伪元素是用来为元素添加一些内容。用 :: 表示，如 ::before、::after 等

position 属性

static
- 默认值，没有定位，遵循正常的文档流对象
- 静态定位的元素不会受到 top、bottom、left、right 和 z-index 影响
relative
- 相对定位，相对其正常位置
absolute
- 绝对定位，相对于最近的已定位元素（最近的非 static 定位祖先元素），如果元素没有已定位的父元素，那么它的位置相对于 html
- absolute 定位与文档流无关，因此不占据空间，且可和其它元素重叠
fixed
- 固定定位，相对于浏览器窗口，窗口是滚动的它也不会移动
- fixed 定位与文档流无关，因此不占据空间，且可和其它元素重叠
sticky
- 粘性定位，基于用户的滚动位置来定位
- 在 relative 与 fixed 定位之间切换，正常表现为 relative，而当页面滚动超出目标区域时，它会表现为 fixed 固定在目标位置
- Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix

水平垂直居中

使用 flex 布局

.container {
    display: flex;
    justify-content: center;
    align-items: center;
}

使用 定位 + transform 属性

.container {
    position: relative;
}
 
.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

使用表格布局

.container {
    display: table;
}
 
.center {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

使用 grid 布局

.container {
    display: grid;
    place-items: center;
}

其它
- 行内元素：text-align: center、height === line-height
- 块级元素：margin: 0 auto 或者定宽高 + margin 负值一半

隐藏页面元素的方法

opacity: 0 本质上是将元素的透明度将为0，就看起来隐藏了，但是依然占据空间且可以交互
visibility: hidden 与上⼀个⽅法类似的效果，占据空间，但是不可以交互了
overflow: hidden 这个只隐藏元素溢出的部分，但是占据空间且不可交互
display: none 这个是彻底隐藏了元素，元素从⽂档流中消失，既不占据空间也不交互，也不影响布局
z-index: -9999 原理是将层级放到底部，这样就被覆盖了，看起来隐藏了
transform: scale(0,0) 平⾯变换，将元素缩放为0，但是依然占据空间，但不可交互

块级格式化上下文（BFC）

什么是 BFC
- BFC（Block formatting context），即块级格式化上下文，它作为 HTML 页面上的一个独立渲染区域，只有区域内元素参与渲染，且不会影响其外部元素
BFC 渲染规则
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然
- 内部的盒子会在垂直方向上一个接一个的放置
- 对于同一个 BFC 的两个相邻盒子的 margin 会发生重叠，与方向无关
- BFC 的区域不会与 float 的元素区域重叠
- 计算 BFC 元素的高度时，浮动子元素也参与计算
- 每个元素的左外边距与包含块的左边界相接触（从左到右），即使浮动元素也是如此
触发 BFC 的条件有哪些
- 根元素，即 HTML 元素
- 浮动元素：float 值为 left、right
- overflow 值不为 visible，为 auto、scroll、hidden
- display 的值为 inline-block、inltable-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid
- position 的值为 absolute 或 fixed
BFC 应用场景
- 防止 margin 重叠（塌陷）
- 清除内部浮动
- 自适应多栏布局

如何解决父元素高度塌陷（清除浮动的方法）

什么是高度塌陷
- 高度塌陷简单说就是，父级元素包含的子元素浮动了，当父级元素没有设置高度时，会因为没有子元素撑开，而变成一条线
清除浮动的方法
- 父级元素定义高度（不推荐）
- 使用 BFC
- 添加 clear: both; （推荐）
```
.clearfix::after {
    content: "";
    display: block;
    clear: both;
}
```

CSS 常用布局

适配布局
- rem 适配布局
- 页面盒子的高度，宽度，内外边距，边框大小，文字的大小，定位的元素位置等能够根据屏幕宽度自动改变大小和位置，从而达到对不同的屏幕都能够做到最完美的展示
流式布局
- 百分比自适应布局
- 一种等比例缩放布局方式，在CSS代码中使用百分比来设置宽度
弹性布局
- flex 布局
- 用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 flex 布局，常用来做排版
- 当布局涉及到不定宽度，分布对⻬的场景时，就要优先考虑弹性盒布局
浮动布局
- float 布局
- 使当前元素脱离普通流，相当于浮动起来一样，浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动的边缘

em/px/rem/vh/vw 的区别

px：绝对长度单位，页面按精确像素展示
em：相对长度单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算，整个页面内1em不是一个固定的值
rem：相对长度单位，可理解为root em, 相对根节点 html 的字体大小来计算，常应用于响应式布局
vh、vw：主要用于网页视口大小布局，在页面布局上更加方便简单

渐进增强、优雅降级

渐进增强和优雅降级是解决高级和低级浏览器之间基础功能和前沿特性兼容问题的不同方案

渐进增强
- CSS 渐进增强（Progressive Enhancement）指的是在设计网页时，先使用基本功能来确保所有用户都可以正常访问并获得良好体验。然后再通过添加更多特性或样式来提高那些支持这些新技术的用户的体验
- 渐近增强会优先书写浏览器特有的属性，以适应旧版本浏览器，然后再补充新标准中的属性
```
.wrap {
    -moz-box-shadow: 1px 1px teal;     // 基于Gecko引擎
    -webkit-box-shadow: 1px 1px teal;  // 所有基于Webkit引擎，如Chore和Safari
    -o-box-shadow: 1px 1px teal;       // Opera浏览器
    -ms-box-shadow: 1px 1px teal;      // IE浏览器
     box-shadow: 1px 1px teal;
}
```
优雅降级
- CSS 优雅降级（Graceful Degradation）则相反，首先为最高版本的浏览器编写完美的效果和交互，然后根据不同的浏览器对于某些属性或功能的支持程度，逐渐向下兼容到其他旧版本的浏览器上
- 优雅降级会优先书写新标准中的属性，以适应新版本浏览器，然后再补充旧版本浏览器中的书写方式
```
.wrap {
    box-shadow: 1px 1px teal;
    -moz-box-shadow: 1px 1px teal;
    -webkit-box-shadow: 1px 1px teal;
    -o-box-shadow: 1px 1px teal;
    -ms-box-shadow: 1px 1px teal;
}
```

浏览器样式兼容

什么是浏览器兼容问题
- 不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一
- 而造成浏览器兼容问题的根本原因，是浏览器的内核不同导致的
解决方案
- 使用 CSS Hack。例如：浏览器兼容前缀、HTML 头部引用
- 浏览器 CSS 样式初始化。例如：
```
*{
    margin: 0; 
    padding: 0;
}
```
- 渐近增强和优雅降级
- 使用媒体查询
- 使用 CSS 插件

画一条 0.5px 的线

采用 meta viewport 的方式 <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
采用 border-image 的方式
采用 transform: scale() 的方式

如何画一个三角形

三角形原理：边框的均分原理

div {
  width:0px;
  height:0px;
  border-top:10px solid red; 
  border-right:10px solid transparent; 
  border-bottom:10px solid transparent; 
  border-left:10px solid transparent;
}