跟chatGPT一起复习前端 —— HTML & CSSchatGPT回答的HTML和CSS相关问题，包含语义化理解，文

前言

又到一波面试准备的时刻，整理了一波前端相关要点内容，配合chatGPT完成要点内容整理，有纠正错误和需要补充的小伙伴可以在这里留言，及时更新。

HTML语义化的理解

HTML语义化的理解，是指使用合适的HTML标签来表示页面的内容，使其具有一定的含义和结构，便于浏览器、搜索引擎和用户理解和解析。

HTML语义化的好处有以下几点：

使页面在没有CSS的情况下，也能够呈现出良好的内容结构；
有利于SEO，爬虫可以根据标签来确定关键字的权重，抓取更多的有效信息；
提升用户体验，例如title、alt等属性可以用于解释名称或图片信息，label标签可以灵活运用；
便于团队开发和维护，语义化使得代码更具有可读性，让其他开发人员更容易理解HTML结构；
方便其他设备解析，如屏幕阅读器、盲人阅读器、移动设备等，以有意义的方式来渲染网页。

HTML5提供了许多新的语义元素来定义网页的不同部分，如<header>、<nav>、<main>、<article>、<section>、<aside>、<footer>等。这些元素可以使网页的结构更清晰，更符合Web标准。

DOCTYPE的作用

DOCTYPE是document type (文档类型) 的缩写。主要作用是告诉浏览器的解析器使用哪种HTML规范或者XHTML规范来解析页面。DOCTYPE声明位于文档的最前面，处于标签之前，它不是html标签。文档类型可分为严格模式和混杂模式。混杂模式又称为怪异模式或者兼容模式，是指浏览器按照自己的方式来解析代码，使用一种比较宽松的向后兼容的方式来显示页面。严格模式又称为标准模式，浏览器w3c标准模式解析。

标准模式与怪异模式的区别说一下

浏览器有两种渲染模式：标准模式和怪异模式。在标准模式下，浏览器按照HTML与CSS标准对文档进行解析和渲染；而在怪异模式下，浏览器则按照旧有的非标准的实现方式对文档进行解析和渲染。怪异模式是为了兼容旧版本的页面而存在的，因为在W3C标准出来之前，每个浏览器都有自己对HTML和CSS的解析和渲染方式。

在标准模式下，总宽度=width+margin (左右)+padding (左右)+border (左右)；

而在怪异模式下，总宽度=width+margin (左右)（width直接包括了padding (左右)+border (左右)）。

文档流行内元素、块级元素、行内块级元素、空元素都是什么？

文档流中的元素可以分为块级元素、行内元素、行内块级元素和空元素。块级元素默认情况下会新起一行，而行内元素不会。块级元素可以包含行内元素和其他块级元素，而行内元素只能包含其他行内元素和数据。行内块级元素则是具有块级元素的特点，同时也有行内元素的特点，它可以自由设置元素宽度和高度，也可以在一行中放置多个行内块级元素。空元素是指没有内容的 HTML 元素，例如 <br> 和 <img> 等。

html5的新特性描述

HTML5是Web中核心语言HTML的规范，是互联网的下一代标准，专门为承载丰富的Web内容而设计的。HTML5拥有新的语义、图形以及多媒体元素，提供的新元素和新的API简化了Web应用程序的搭建。

HTML5新增了很多新特性，包括但不限于：语义化标签、表单控件、音频和视频、Canvas绘图、地理定位、本地存储、Web Workers等。

iframe 内嵌框架有哪些缺点说一下

会产生很多页面，不容易管理。
iframe框架结构有时会让人感到迷惑，如果框架个数多的话，可能会出现上下、左右滚动条，会分散访问者的注意力，用户体验度差。
样式/脚本需要额外链入，会增加请求。

垂直水平居中写一下

使用flex布局，父元素设置display:flex;justify-content:center;align-items:center;即可实现垂直水平居中。
使用绝对定位布局，父元素设置position:relative;子元素设置position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);即可实现垂直水平居中。
使用table-cell布局，父元素设置display:table-cell;vertical-align:middle;text-align:center;子元素设置display:inline-block;即可实现垂直水平居中。
使用margin:auto布局，父元素设置position:relative;子元素设置position:absolute;top:0;left:0;bottom:0;right:0;margin:auto;width:宽度;height:高度;即可实现垂直水平居中。

transform讲一下

transform是CSS3中的一个属性，它可以对元素进行旋转、缩放、移动或倾斜等操作。transform属性可以应用于2D或3D转换。

在2D转换中，我们可以使用translate、rotate、scale和skew函数来实现元素的平移、旋转、缩放和倾斜。

在3D转换中，我们可以使用rotateX、rotateY、rotateZ、scaleZ等函数来实现元素的3D旋转和缩放。

transform属性是CSS3中的一个重要属性，它可以让我们更加灵活地控制元素的样式。

平常实现动画是怎么去实现的

CSS动画包括两个部分：描述动画的样式规则和用于指定动画开始、结束以及中间点样式的关键帧。相较于传统的脚本实现动画技术，使用CSS动画有三个主要优点：能够非常容易地创建简单动画，不需要JavaScript或Flash；性能更好，因为浏览器知道如何优化它们；更容易控制和修改，因为它们是在CSS中定义的。

下面是一些常用的CSS动画属性：

animation-name：规定需要绑定到选择器的关键帧名称。
animation-duration：规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function：规定动画的速度曲线。
animation-delay：规定在动画开始之前的延迟。
animation-iteration-count：规定动画应该播放的次数。
animation-direction：规定是否应该轮流反向播放动画。
animation-fill-mode：规定当动画不播放时（当等待时间过去或在动画完成后），要应用到元素上的样式。

也可以通过transition让元素发生变化时平滑过渡到新样式，从而达到动画效果。 CSS transition包括以下几个属性：

transition-property：规定应用过渡效果的 CSS 属性的名称。
transition-duration：规定完成过渡效果需要多少秒或毫秒。
transition-timing-function：规定过渡效果的速度曲线。
transition-delay：规定过渡效果何时开始。

flex有哪些属性，怎么应用

flex是CSS3中的一个模块，它提供了一种更加灵活的布局方式。flex布局中有很多属性，下面是一些常用的属性：

flex-direction：规定主轴的方向。 flex-wrap：规定如何换行。 flex-flow：是flex-direction属性和flex-wrap属性的简写形式。 justify-content：定义了项目在主轴上的对齐方式。 align-items：定义了项目在交叉轴上如何对齐。 align-content：定义了多根轴线的对齐方式。 align-self：允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。 flex：是flex-grow、flex-shrink 和 flex-basis属性的简写，默认值为0 1 auto。

此外，还有一些用于控制弹性盒子子元素的属性：

order：定义项目的排列顺序。数值越小，排列越靠前，默认为0。 flex-grow：定义项目的放大比例。 flex-shrink：定义了项目的缩小比例。 flex-basis：定义了在分配多余空间之前，项目占据的主轴空间。

grid布局有哪些属性，怎么应用

Grid 布局是 CSS 中的一种二维布局方式，它可以将一个页面划分为几个主要区域，并定义这些区域的大小、位置、层次等关系。在 Grid 布局中，父容器充当一个 (Grid Container)，子元素充当 (Grid Item)。

Grid 布局的使用非常灵活，可以通过设置网格线的数量和位置来控制布局。同时，还可以通过设置网格单元格的大小和位置来控制元素的大小和位置。

以下是一些常用的 Grid 布局属性：

grid-template-columns：定义列的数量和宽度。
grid-template-rows：定义行的数量和高度。
grid-template-areas：定义网格区域。
grid-column-gap：定义列之间的间距。
grid-row-gap：定义行之间的间距。
grid-gap：定义行和列之间的间距。

css选择器权重问题

CSS选择器的优先级是由权重决定的，权重值越大，优先级越高。CSS选择器的优先级从高到低依次为：

!important
行内样式
id选择器
class选择器、属性选择器
标签选择器、伪元素选择器
通配符选择器、伪类选择器

如果两个选择器的权重相同，则后面的规则会覆盖前面的规则。如果两个选择器的权重不同，则权重大的规则会覆盖权重小的规则。

css选择符有哪些

CSS选择符有很多种，其中包括：

通配选择符
类型选择符
ID选择符
类选择符
属性选择符
后代选择符
子元素选择符
相邻兄弟选择符
伪类选择符
伪元素选择符

css中哪些属性可以被继承

CSS中有一些属性可以被继承，包括：

所有元素可以继承的属性：元素可见性（visibility）、光标属性（cursor）。
内联元素可以继承的属性：字体系列属性、除text-indent、text-align之外的文本系列属性。
块级元素可以继承的属性：text-indent、text-align。

box-sizing常用的属性

box-sizing是CSS3中的一个属性，它用于控制盒模型的计算方式。常用的属性值有content-box和border-box。其中，content-box是默认值，表示盒模型的宽度和高度只包括内容的宽度和高度，不包括边框和内边距。而border-box表示盒模型的宽度和高度包括内容、内边距和边框的宽度和高度。

link与@import区别

link和@import都是CSS中用于导入样式表的方式。二者的区别如下：

link属于HTML标签，而@import是CSS提供的一种方式。
link标签不仅可以引入CSS，还可以做其他事情，而@import只能引入CSS。
link标签不存在兼容性问题，而@import只有在IE5以上才支持。

a标签的4个伪类的正确顺序，并解释

a标签的4个伪类分别是：:link、:visited、:hover、:active。书写顺序应该是Love Hate，即:link、:visited、:hover、:active。

:link：适用于未被访问的链接。 :visited：适用于已经访问过的链接。 :hover：在可视化客户端上，适用于光标（鼠标指针）指向一个元素，但还未激活它时。 :active：适用于一个元素被用户激活时。

清除浮动的方式

清除浮动的方式有很多种，以下是其中的几种方法：

额外标签法：在最后一个浮动标签后，新加一个标签，给其设置clear:both;。
父级div定义height。
父级div定义overflow:hidden。
父级div也一起浮动。

position的属性值

CSS中的position属性有五个值：static、relative、absolute、fixed和sticky。

static是默认值，表示元素在文档流中的正常位置；
relative表示相对定位，元素相对于其正常位置进行定位；
absolute表示绝对定位，元素相对于最近的非static定位祖先元素进行定位；
fixed表示固定定位，元素相对于浏览器窗口进行定位；
sticky表示粘性定位，元素在跨越特定阈值前为相对定位，之后为固定定位。

z-index认识

z-index是CSS中的一个属性，用于指定元素的堆叠顺序。z-index值越大，元素就越靠近屏幕的前面。但是，只有脱离文档流的元素（即position属性值为relative、absolute、fixed或sticky）才会受到z-index属性的影响。

flex布局中父元素设为Flex布局后对子元素的影响

flex布局中，排列方式由父元素决定，子元素的float、clear、vertical-align属性将失效。

BFC、触发条件、可解决的问题

BFC是块级格式化上下文的缩写，是一个独立的布局环境，BFC内部的元素布局与外部互不影响。可以通过一些条件触发BFC，从而实现布局上的需求或解决一些问题。

触发BFC的方式有很多，比如float、position、display等。

BFC可以解决外边距合并、检测浮动高度、制作右侧自适应盒子等问题。

IFC是什么

IFC 是 CSS 中的一个概念，代表内联格式化上下文。IFC 是一个盒子的集合，这些盒子按照一定的规则在一行中排列。IFC 中的 line box 高度由 CSS 行高计算规则来确定，同个 IFC 下的多个 line box 高度可能会不同。当 inline-level boxes 的总宽度少于包含它们的 line box 时，其水平渲染规则由 text-align 属性值来决定。

伪类和伪元素的区别

伪类和伪元素是CSS中的两个重要概念。它们都是用来对选择器进行修饰的，但是它们之间有一些区别。

伪类是用于向某些选择器添加特殊效果的，例如:hover、:active、:focus等。伪类只会在用户与元素交互的时候应用。

伪元素是用于将特殊的效果添加到某些选择器的。它们可以创建一些不在文档树中的元素，并为其添加样式。例如:before、:after等。

总结一下，伪类和伪元素的区别在于：

伪类是用于向某些选择器添加特殊效果的；伪元素是用于将特殊的效果添加到某些选择器的。伪类只会在用户与元素交互的时候应用；而伪元素可以创建一些不在文档树中的元素，并为其添加样式。

浏览器是怎样解析 CSS 选择器的？

浏览器在解析 CSS 选择器时，会从右往左解析，即先找到最右边的选择器，再逐步向左匹配。例如，对于选择器 #id .class h4 p，浏览器会先找到所有的 p 标签，然后再找到它们的父元素中所有的 h4 标签，再找到它们的父元素中所有的类名为 .class 的元素，最后再找到它们的父元素中所有的 ID 为 id 的元素。

px、em、rem的区别

px 是像素单位，是一个固定的单位，不会随着页面的缩放而改变。em 和 rem 是相对长度单位，相对于父元素和根元素的字体大小而定。其中，em 的参照物是该元素的父元素的字体大小，而 rem 的参照物是根元素（即 <html> 标签）的字体大小。因此，使用 rem 更方便计算和响应式布局

CSS创建一个三角形

你可以使用 CSS 的 border 属性来创建三角形。首先，创建一个元素，设置其宽度和高度为 0，然后设置其边框宽度为你想要的三角形的高度，边框样式为实线。接下来，你需要设置三角形的颜色。如果你想要一个空心的三角形，可以将除了顶部之外的边框颜色设置为透明。如果你想要一个实心的三角形，可以将元素的背景颜色设置为你想要的颜色。

这是一个使用 CSS 创建三角形的例子：

.triangle {
  width: 0;
  height: 0;
  border-top: 50px solid #007bff;
  border-right: 50px solid transparent;
  border-bottom: 0 solid transparent;
  border-left: 50px solid transparent;
}

这将创建一个蓝色的三角形，高度为 50px。

CSS 动画与 js 动画区别

CSS 动画和 JS 动画的区别如下：

CSS 动画是关键帧动画，而 JS 动画是逐帧动画。CSS 动画的补间动画部分由浏览器完成，代码复杂度低；而 JS 动画的每一帧都是由代码控制，代码复杂度高。
CSS 动画执行在合成线程，专事专干，不阻塞主线程；而 JS 动画执行在主线程，容易引发阻塞和等待。
CSS 动画只能暂停，不能在动画中寻找一个特定的时间点，不能在半路反转动画，不能变换时间尺度，不能在特定的位置添加回调函数或是绑定回放事件；而 JS 动画可以做到这些。

总之，CSS 动画适合简单的动画效果，而 JS 动画适合复杂的动画效果。如果你需要更多的控制和灵活性，那么使用 JS 动画可能更好

CSS3新增伪类

CSS3 新增的伪类有很多，以下是一些常用的：

:checked
:disabled
:enabled
:first-child
:first-of-type
:focus
:hover
:last-child
:last-of-type
:not(selector)
:nth-child(n)
:nth-last-child(n)
:nth-last-of-type(n)
:nth-of-type(n)
:only-of-type
:only-child

跟chatGPT一起复习前端 —— HTML & CSS

前言