前端热门面试题（一）

最新推荐文章于 2024-10-08 12:21:22 发布

shiming8879

最新推荐文章于 2024-10-08 12:21:22 发布

阅读量922

点赞数 23

分类专栏：前端面试文章标签：前端开发语言 html5 javascript css 面试

本文链接：https://blog.csdn.net/shiming8879/article/details/140245837

版权

前端面试专栏收录该内容

5 篇文章 0 订阅

订阅专栏

什么是HTML，并简述其主要作用？

HTML（HyperText Markup Language），即超文本标记语言，是构成网页内容的基本框架和结构的标准标记语言。它不是一种编程语言，而是一种标记语言，用于告诉浏览器如何显示网页上的内容，包括文本、图片、链接、表格、列表等。

主要作用：

内容结构化：HTML通过不同的标签（如<html>、<head>、<body>、<p>、<h1>到<h6>、<a>等）将网页内容组织成结构化的文档。这些标签定义了文档的不同部分，如文档的类型、标题、头部信息、正文内容等。
创建超链接：HTML中的<a>标签用于创建超链接，允许用户点击一个链接跳转到另一个页面或页面内的某个部分。这是互联网“超文本”特性的体现，也是HTML最重要的功能之一。
嵌入多媒体：HTML支持嵌入多种媒体类型，如图片（<img>）、视频（通过<video>标签或嵌入的第三方播放器）、音频（<audio>）等，丰富了网页的表现形式和用户体验。
表单交互：HTML表单（<form>）是收集用户输入的一种方式，可以包含多种输入元素（如文本框、密码框、单选按钮、复选框、下拉列表等）。这些输入数据可以被发送到服务器进行处理，实现用户与网站的交互。
样式控制：虽然HTML本身不直接控制网页的样式（如字体、颜色、布局等），但它通过<style>标签或链接外部CSS文件来支持CSS（层叠样式表）的引入，使得网页的样式和表现可以与内容分离，便于管理和维护。
提供语义信息：HTML5引入了更多的语义化标签（如<article>、<section>、<nav>、<footer>等），这些标签不仅有助于改善网页的结构，还提供了更多的语义信息，有利于搜索引擎优化（SEO）和辅助技术（如屏幕阅读器）的使用。
支持脚本语言：HTML通过<script>标签支持JavaScript等脚本语言的嵌入，这些脚本可以动态地改变网页的内容、样式和行为，实现更加丰富的用户交互效果。

综上所述，HTML是构建网页的基础，它定义了网页的结构和内容，并通过与其他Web技术的结合（如CSS、JavaScript等），共同创造出丰富多彩、功能强大的网页应用。

CSS选择器有哪些类型？并解释它们的优先级规则。

CSS选择器的类型

CSS选择器用于指定HTML元素或元素组，以便向它们应用样式。CSS选择器主要分为以下几种类型：

基本选择器：
- 元素选择器：根据HTML标签名称选择元素，如p选择所有段落元素。
- 类选择器：选择具有特定类属性的元素，通过点号.表示，如.primary选择所有class为"primary"的元素。
- ID选择器：选择具有特定ID属性的元素，通过井号#表示，如#main选择ID为"main"的元素。ID在文档中应该是唯一的。
修饰符选择器：
- 后代选择器（空格）：选择属于某元素后代的所有元素，如div p选择所有位于div元素内的p元素。
- 子选择器（>）：选择直接子元素，如div > p仅选择直接位于div元素下的p元素。
- 相邻选择器（+）：选择紧接在另一元素后的元素，且二者有相同的父元素，如h1 + p选择紧接在h1元素后的p元素。
- 随后兄弟选择器（~）：选择某一元素之后的所有同级元素，如h1 ~ p选择所有在h1元素之后的同级p元素。
- 伪类选择器：用于选择处于特定状态的元素，如:hover选择鼠标悬停时的元素，:active选择被激活的元素等。
属性选择器：
- 属性存在选择器（[attr]）：选择具有指定属性的元素，如[type]选择所有具有type属性的元素。
- 属性值选择器（[attr="value"]）：选择属性值完全等于指定值的元素，如[type="text"]选择所有type属性值为"text"的元素。
- 部分匹配属性值选择器（[attr*="value"]、[attr^="value"]、[attr$="value"]、[attr|="value"]、[attr~="value"]）：选择属性值包含、以指定值开头、以指定值结尾、以指定值开头且后跟连字符或以空格分隔的值中包含指定单词的元素。
组合选择器：
- 逗号分隔的选择器：通过逗号分隔，选择多个选择器对应的元素，如p, h1选择所有p元素和h1元素。
- 群组选择器（虽然传统上并不直接称为“群组选择器”，但可以通过将多个选择器放在同一组花括号{}内实现类似效果）：实际上，这不是一个单独的选择器类型，而是一种应用样式的方法，即将多个选择器分组并应用相同的样式规则。

优先级规则

CSS选择器的优先级由选择器的特指度（Specificity）和重要性（Importance）决定，具体规则如下：

重要性（Importance）：
- !important规则：当一个样式声明后面带有!important时，它会覆盖任何相同属性且没有!important的声明，无论其特指度如何。这是最高优先级，但应谨慎使用，以避免降低代码的可维护性和可预测性。
特指度（Specificity）：
- 内联样式（通过HTML元素的style属性直接定义的样式）：具有最高的特指度，除非遇到!important规则。
- ID选择器（#id）：每个ID选择器计为100。
- 类选择器（.class）、属性选择器（[attr]）和伪类选择器（:hover, :focus等）：每个此类选择器计为10。
- 元素选择器（如p, div）和伪元素选择器（::before, ::after等）：每个元素或伪元素选择器计为1。
优先级计算是将所有类型选择器的分数相加。例如，#header .nav-link的特指度就是100（ID选择器）+ 10（类选择器）= 110。
样式来源顺序：
- 当两个规则特指度相同时，最后定义的规则会覆盖之前的规则（就近原则）。
- 样式来源的优先级顺序为：内联样式 > 内部样式表（<style>标签内）> 外部样式表（通过<link>标签引入）。