2023前端面试题（THML+CSS篇）

2023前端面试题总结

一、HTML

1.1 常用的HTML标签

1.1.1 标题标签

标题标签是HTML中用于定义标题的标签，共有六个级别，分别是<h1>到<h6>。通常情况下，<h1>用于页面主标题，而<h2>则用于子标题。使用标题标签有助于页面结构化，提高可读性和SEO优化。

1.1.2 段落标签

段落标签是HTML中用于定义段落的标签，即<p>标签。在HTML中，每个段落会自动换行，并且段落之间会有一定的间距。段落标签常用于文章、新闻等文本内容的排版。

1.1.3 图片标签

图片标签是HTML中用于插入图片的标签，即<img>标签。在使用图片标签时，需要设置图片的src属性，指定图片的URL地址。同时，也可以设置图片的alt属性，用于在图片无法正常显示时显示替代文本。

1.1.4 超链接标签

超链接标签是HTML中用于创建链接的标签，即<a>标签。在使用超链接标签时，需要设置链接的href属性，指定链接的URL地址。同时，也可以设置链接的文本内容，即<a>标签内的文本内容，用于显示链接的名称。

1.1.5 列表标签

列表标签是HTML中用于创建列表的标签，包括有序列表和无序列表。有序列表使用<ol>标签，无序列表使用<ul>标签，列表项使用<li>标签。在使用列表标签时，可以通过CSS样式对列表进行美化和定制。

1.2 HTML5的新特性

1.2.1 新的元素

HTML5引入了一些新的语义化元素，例如<article>、<section>、<header>、<footer>、<nav>等。这些元素可以更好地描述页面的结构和内容，同时也方便了搜索引擎的分析和理解。例如，<article>元素可以用来表示一个独立的文章或内容块，<section>元素可以用来表示页面中的一个部分，<header>和<footer>元素可以用来表示页面的页头和页脚，<nav>元素可以用来表示页面中的导航部分。这些元素的使用可以使HTML文档更加清晰和易于维护。

1.2.2 新的表单控件

HTML5还引入了一些新的表单控件，例如<input type="date">、<input type="time">、<input type="email">、<input type="url">等。这些控件可以使表单的输入更加方便和准确。例如，<input type="date">控件可以用来选择日期，<input type="time">控件可以用来选择时间，<input type="email">控件可以用来输入电子邮件地址，<input type="url">控件可以用来输入URL地址。这些控件的使用可以提高用户的体验和数据的准确性。

1.2.3 新的API

HTML5还引入了一些新的API，例如Canvas、Web Storage、Geolocation、Web Workers等。这些API可以使Web应用程序更加强大和灵活。例如，Canvas API可以用来绘制图形，Web Storage API可以用来在客户端存储数据，Geolocation API可以用来获取用户的位置信息，Web Workers API可以用来在后台线程中执行JavaScript代码。这些API的使用可以使Web应用程序具有更多的功能和更好的性能。

1.3 语义化的HTML标签

1.3.1 什么是语义化的HTML标签

在HTML中，语义化的标签是指在页面结构和内容中使用具有明确含义的标签，这些标签能够清晰地表达出内容的含义和结构，而不仅仅是为了布局或样式而使用的标签。语义化的HTML标签可以提高页面的可读性和可访问性，使得搜索引擎更好地理解页面的内容，也方便开发者维护和修改页面。

1.3.2 语义化的HTML标签示例

以下是一些常用的语义化的HTML标签及其对应的含义：

标签	含义
<header>	定义页面或文章的头部
<nav>	##### 1.3.1 什么是语义化的HTML标签
语义化的HTML标签是指在HTML文档中使用具有明确含义的标签来描述页面的结构和内容，而不是仅仅为了样式而使用无意义的标签。这样做的好处是可以让搜索引擎更好地理解页面的内容，提高页面的可访问性和可维护性。比如使用<header>、<nav>、<main>、<section>、<article>、<aside>等标签可以清晰地描述页面的结构，而使用<div>标签则无法清晰地表达页面的含义。因此，在编写HTML代码时，应该尽可能地使用语义化的标签来描述页面的结构和内容。

二、CSS

2.1 CSS选择器及其优先级

2.1.1 ID选择器的优先级

ID选择器具有最高的优先级，因此应该尽量避免在CSS中使用ID选择器。如果必须使用ID选择器，应该尽可能减少其使用次数，以避免影响其他样式的应用。

2.1.2 类选择器和属性选择器的优先级

类选择器和属性选择器的优先级相同，都比标签选择器的优先级高。如果两者同时应用于同一个元素，则后面出现的选择器优先级更高。

2.1.3 标签选择器的优先级

标签选择器的优先级最低，如果多个选择器同时应用于同一个元素，则后面出现的选择器优先级更高。

选择器类型	优先级
ID选择器	##### 2.1.1 选择器类型及其优先级

CSS选择器是指用来选择HTML元素的方式，常见的选择器类型包括ID选择器、类选择器、标签选择器、属性选择器、伪类选择器等。不同的选择器类型有不同的优先级，当多个选择器作用于同一个元素时，优先级高的选择器会覆盖优先级低的选择器。

下表列出了选择器类型及其优先级，其中!important是优先级最高的方式，可以强制覆盖其他选择器的样式。

选择器类型	优先级
!important	最高
行内样式	第二
ID选择器	第三
类选择器	第四
标签选择器	第五
属性选择器	第六
伪类选择器	第七
伪元素选择器	第八

举个例子，当一个元素同时被一个ID选择器和一个类选择器作用时，ID选择器的优先级更高，其样式会被应用于该元素。

2.1.2 选择器的组合使用

选择器可以组合使用，以便更精确地选择元素。常见的组合方式包括：

- 后代选择器：通过空格来表示，选择某个元素下的所有后代元素。
- 子元素选择器：通过>来表示，选择某个元素的直接子元素。
- 相邻兄弟选择器：通过+来表示，选择某个元素相邻的下一个兄弟元素。
- 通用兄弟选择器：通过~来表示，选择某个元素之后的所有兄弟元素。

举个例子，可以使用.parent > .child来选择某个父元素下的直接子元素，.sibling + .sibling来选择某个元素相邻的下一个兄弟元素。

2.2 盒子模型

2.2.1 盒子模型概述

在CSS中，每个HTML元素都被看做是一个矩形的盒子，这个盒子包含了元素的内容、内边距、边框和外边距。这个模型被称为盒子模型。盒子模型可以通过CSS的box-sizing属性进行控制，有两种不同的盒子模型：content-box和border-box。

2.2.2 content-box

content-box是默认的盒子模型。在content-box中，元素的宽度和高度只包含内容的宽度和高度，不包括内边距、边框和外边距。例如，如果一个元素的宽度设置为200px，内边距为20px，边框为2px，外边距为10px，那么这个元素的总宽度将会是：200px + 20px + 2px + 10px = 232px。

2.2.3 border-box

border-box是另一种盒子模型。在border-box中，元素的宽度和高度包括了内边距、边框和内容的宽度和高度。例如，如果一个元素的宽度设置为200px，内边距为20px，边框为2px，外边距为10px，那么这个元素的总宽度将会是：200px。

盒子模型	宽度计算公式
content-box	宽度 = 内容宽度
border-box	宽度 = 内容宽度 + 内边距 + 边框

2.3 响应式布局

2.3.1 媒体查询

媒体查询是响应式布局的核心，它可以根据设备的特性和属性来调整网页的样式和布局，从而适应不同的屏幕大小和分辨率。媒体查询的语法格式如下：

@media mediatype and (media feature){
    /* CSS 规则 */
}

其中，mediatype 表示媒体类型，常见的有 all、screen、print 等，而 media feature 表示媒体属性，常见的有 width、height、orientation 等。例如，下面的代码表示当屏幕宽度小于 768 像素时，应用特定的 CSS 规则：

@media screen and (max-width: 768px){
    /* CSS 规则 */
}

2.3.2 流式布局

2.3.1 媒体查询

媒体查询是响应式布局中非常重要的一部分，它可以根据设备的屏幕大小、分辨率、方向等特征，来选择不同的样式表，以达到适应不同设备的效果。媒体查询的语法如下：

@media (条件) {
  /* 样式代码 */
}

其中，条件可以是以下几种：

- `width`：设备宽度。
- `height`：设备高度。
- `device-width`：设备屏幕宽度。
- `device-height`：设备屏幕高度。
- `orientation`：设备方向##### 2.3.1 什么是响应式布局

响应式布局是一种能够在不同设备上##### 2.3.1 什么是响应式布局？

响应式布局是一种能够让网站在不同设备上都能够自适应展示##### 2.3.1 媒体查询

媒体查询是响应式布局的基础。通过媒体查询，我们可以根据设备的屏幕尺寸、分辨率、方向等属性，来应用不同的CSS样式。媒体查询的语法如下：

@media mediatype and (condition) {
    /* CSS rules */
}

其中，mediatype 表示媒体类型，常用的有 all（所有设备）、print（打印设备）、screen（屏幕设备）等。condition 表示条件，常用的有 min-width（最小宽度）、max-width（最大宽度）、orientation（方向）等。

例如，我们可以根据设备的宽度来应用不同的CSS样式，如下所示：

@media screen and (max-width: 768px) {
    /* 在宽度小于等于768px的设备上应用以下CSS样式 */
    body {
        font-size: 14px;
    }
}

2.3.2 弹性布局

弹性布局是响应式布局中常用的一种方式。通过设置元素的弹性属性，可以使元素根据父元素的大小自适应调整大小和位置。常用的弹性属性有：

- `flex-direction`：设置主轴的方向，常用的有 row（横向）、column（纵向）等。
- `flex-wrap`：设置是否换行，常用的有 nowrap（不换行）、wrap（换行）等。
- `justify-content`：设置主轴上的对齐方式，常用的有 flex-start（靠左）、center（居中）、flex-end（靠右）等。
- `align-items`：设置交叉轴上的对齐方式，常用的有 flex-start（靠上）、center（居中）、flex-end（靠下）等。
- `align-content`：设置多行元素的对齐方式，常用的有 flex-start（靠上）、center（居中）、flex-end（靠下）等。

例如，我们可以使用弹性布局来实现一个自适应的导航栏，如下所示：

<nav class="nav">
    <a href="#">首页</a>
    <a href="#">分类</a>
    <a href="#">标签</a>
    <a href="#">关于</a>
</nav>

.nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}