前言
面试中面试官经常会来问一些常见的关于html5 或css的问题。这些问题如果没答上来太丢分了！为此我总结一些常考的知识点,以便下次答的更完整！！
HTML5新增的标签
html5引入了许多新的标签来增强网页的结构和功能,这些新标签有助于创建更加语义化,更易于理解和维护的页面。
像<article> <aside> <details> <figcaption> <figure>
<footer> <header> <main> <mark> <nav> <section>
<summary> <time> <audio> <video> <source> <track>
这些标签不仅丰富了HTML的功能，而且通过提供更加具体的语义化标签，使得网站对搜索引擎更加友好，也更容易被辅助技术识别，从而提高了网站的可访问性。
<article>作用为定义页面中独立的内容部分，如论坛帖子、文章、报纸文章等。
<aside>作用为定义与页面主要内容相关的旁注内容，通常表现为侧边栏。
<details>作用为创建用户可以查看或隐藏的详细信息视图
<figcaption>作用为 <figure> 元素定义标题。
<figure>作用为标记图片、图表、照片、代码等，并常与 <figcaption> 结合使用来提供描述。
<footer>作用为定义文档或区段的脚注。
<header>作用为定义文档或区段的头部。
<main>作用为指定文档或应用程序的主要内容，该内容应直接与文档相关。<mark>定义有标记或高亮显示的文本。<nav>定义导航链接集合。<section>定义文档中的一个区域或部分。<summary> 定义 <details> 元素的可见标题。<time> 定义日期或时间。<audio> 嵌入音频文件的标准。<video> 嵌入视频文件的标准。<source>在 <audio> 或 <video> 元素内指定媒体资源。<track> 规定外部时间轴文件（例如字幕）的位置。
css伪类
伪类可以细分为动态伪类,用户界面伪类,结构性伪类,语言伪类,输入相关伪类。 1.动态伪类：这些伪类用于描述元素的动态状态，通常与用户的交互有关：
:hover- 当用户将鼠标悬停在元素上时应用样式。:active- 当元素被激活（如点击按钮时）时应用样式。:focus- 当元素获得焦点时应用样式，常见于表单元素。:target- 当元素的ID匹配URL中的片段标识符时应用样式。
- 用户界面元素伪类:这些伪类用于描述用户界面元素的状态：
:checked- 当<input>元素类型为radio或checkbox并且被选中时应用样式。:enabled- 当<input>或<button>元素未被禁用时应用样式。:disabled- 当<input>或<button>元素被禁用时应用样式。:read-only- 当<input>或<textarea>元素设置为只读时应用样式。:read-write- 当<input>或<textarea>元素不是只读时应用样式。
- 结构性伪类: 这些伪类基于元素在其文档树中的位置：
:first-child- 如果一个元素是其父元素的第一个子元素，则应用样式。:last-child- 如果一个元素是其父元素的最后一个子元素，则应用样式。:nth-child(n)- 如果一个元素是其父元素的第 n 个子元素，则应用样式。n 可以是一个数字或一个表达式。:nth-last-child(n)- 类似于:nth-child()，但是从最后一个子元素开始计数。:only-child- 如果一个元素是其父元素唯一的子元素，则应用样式。:first-of-type- 如果一个元素是其父元素的第一种类型的子元素，则应用样式。:last-of-type- 如果一个元素是其父元素的最后一种类型的子元素，则应用样式。:nth-of-type(n)- 如果一个元素是其父元素的第 n 种类型的子元素，则应用样式。:nth-last-of-type(n)- 类似于:nth-of-type()，但是从最后一种类型的子元素开始计数。:empty- 如果一个元素没有任何子元素（包括文本节点），则应用样式。
- 语言伪类
:lang(language)- 如果元素的语言属性与指定的语言相匹配，则应用样式。
- 输入相关伪类
:invalid- 当<input>元素值无效时应用样式。:valid- 当<input>元素值有效时应用样式。:in-range- 当<input>元素的值在指定范围内时应用样式。:out-of-range- 当<input>元素的值超出指定范围时应用样式。:required- 当<input>元素的required属性设置时应用样式。:optional- 当<input>元素没有设置required属性时应用样式。
css选择器
CSS 选择器用于选择 HTML 文档中的元素，并为其应用样式。CSS 提供了多种选择器，可以根据不同的需求选择合适的元素。使开发者能够灵活地选择和样式化 HTML 文档中的元素。通过合理使用这些选择器，可以创建复杂而美观的网页布局。
可以分为基本选择器、 组合选择器、属性选择器、伪类选择器、伪元素选择器、组合选择器、
基本选择器：
- 类型选择器（Type Selector）
- 选择特定类型的元素。
-
- 示例：
p选择所有<p>元素。
- 示例：
-
类选择器（Class Selector）
- 选择具有特定类名的元素。
- 示例：
.example选择所有类名为example的元素。
-
ID 选择器（ID Selector）
- 选择具有特定 ID 的元素。
- 示例：
#unique选择 ID 为unique的元素。
-
通配符选择器（Universal Selector）
- 选择文档中的所有元素。
- 示例：
*选择所有元素。
组合选择器：
-
后代选择器（Descendant Selector）
- 选择某个元素的所有后代元素。
- 示例：
div p选择所有位于<div>内的<p>元素。
-
子选择器（Child Selector）
- 选择某个元素的直接子元素。
- 示例：
div > p选择所有直接位于<div>内的<p>元素。
-
相邻兄弟选择器（Adjacent Sibling Selector）
- 选择紧接在另一个元素之后的元素。
- 示例：
h1 + p选择紧跟在<h1>元素之后的<p>元素。
-
通用兄弟选择器（General Sibling Selector）
- 选择同一父元素下的所有后续兄弟元素。
- 示例：
h1 ~ p选择所有位于<h1>元素之后的<p>元素。
属性选择器:
-
属性存在选择器
- 选择具有特定属性的元素。
a[title]选择所有具有title属性的<a>元素。
-
属性值选择器
- 选择具有特定属性值的元素。
- 示例：
a[href="https://example.com"]选择所有href属性值为https://example.com的<a>元素。
-
属性值包含选择器
- 选择属性值包含特定值的元素。
- 示例：
a[href*="example"]选择所有href属性值包含example的<a>元素。
-
属性值以特定值开头的选择器
- 选择属性值以特定值开头的元素。
- 示例：
a[href^="https"]选择所有href属性值以https开头的<a>元素。
-
属性值以特定值结尾的选择器
- 选择属性值以特定值结尾的元素。
- 示例：
a[href$=".pdf"]选择所有href属性值以.pdf结尾的<a>元素。
伪元素选择器:
- ::before 和 ::after
- 在元素内容之前或之后插入生成的内容。
- 示例：`p::before` 在每个 `<p>` 元素的内容前插入内容。
2. ::first-letter 和 ::first-line
- 选择元素中的首字母或首行。
- 示例：`p::first-letter` 选择每个 `<p>` 元素的首字母。
组合选择器:
1. 多重选择器
- 将多个选择器组合在一起，对它们应用相同的样式。
- 示例：`h1, h2, h3` 选择所有 `<h1>`、`<h2>` 和 `<h3>` 元素。
、
