【11.0】前端基础之阶段性复习

【一】HTML

【1】什么是HTML

超文本标记语言，就是一堆标签，每个标签具有特定的意义，是浏览器展示页面所公用的一套标准
- HTML是一种用于构建网页的标记语言，全称为"Hypertext Markup Language"（超文本标记语言）。
- 它由一系列标签（tag）组成，这些标签描述了网页中的内容和结构。
- HTML不是一种编程语言，而是一种描述性的标记语言。

【2】web服务器的本质

服务端 + 客户端 + HTML
展现在页面上的花里胡哨的页面其本质都是由HTML组成的

【3】HTML文档结构

HTML文档的结构由以下几个主要部分组成：

<!DOCTYPE>声明：
- 这是HTML文档的第一行，用于指定文档类型。
- 它告诉浏览器使用哪个HTML版本来解析该文档。
<html>元素：
- 该元素是HTML文档的根元素
- 它包含了整个HTML文档的内容。
<head>元素：
- 该元素包含了用于描述文档的元数据，如标题、引用的样式表、脚本等。
- 在<head>元素中定义的内容对用户是不可见的，主要是提供给浏览器和搜索引擎使用。
<title>元素：
- 该元素定义了网页的标题
- 通常会显示在浏览器的标题栏或标签页上。
<body>元素：
- 该元素包含了实际显示给用户的网页内容，如文本、图像、链接等。
- 大部分网页的可见内容都应放在<body>元素中。
一个简单的HTML文档结构示例如下：

<!DOCTYPE html>
<html>
<head>
    <title>页面标题</title>
</head>
<body>
    <h1>这是一个标题</h1>
    <p>这是一个段落。</p>
    <img src="image.jpg" alt="图片描述">
    <a href="https://example.com">这是一个链接</a>
</body>
</html>

上述示例中，
- <!DOCTYPE>声明指定了HTML5类型的文档，
- <html>元素作为根元素包含了整个HTML文档的内容。
- <head>元素包含了页面的标题，
- 而<body>元素中则包含了一个标题、一个段落、一张图片和一个链接。

【4】标签

段落是在HTML中用于组织和显示文本内容的标签。常用的段落标签是<p>。

例如，以下是一个示例，展示如何使用段落标签创建一个包含文本内容的段落：

<p>这是一个段落。</p>

上述示例中，<p>是段落标签的开始标签，</p>是段落标签的结束标签。在这对标签之间的内容就是一个段落，其中的文本内容将被浏览器解析并按照默认样式进行显示。

除了段落标签 <p> 之外，HTML还提供了其他一些标签用于文本的装饰效果，如下所示：

除了上述标签之外，HTML还提供了<hr>和标签用于插入水平线和换行符：

（1）标题

（2）u/i/s/b

<u>：
- 定义下划线，用于为文本添加下划线效果。
<i>：
- 定义斜体，用于为文本添加斜体效果。
<s>：
- 定义删除线，用于为文本添加删除线效果。
<b>：
- 定义粗体，用于为文本添加粗体效果。
以下是几个示例，展示如何使用这些标签：

<u>下划线文本</u>
<i>斜体文本</i>
<s>删除线文本</s>
<b>粗体文本</b>

需要注意的是，这些标签通常会根据浏览器和网页的样式设置来显示文本的效果。
因此，在不同的浏览器和网页中，这些效果可能会有所差异。

（3）hr/br

<hr>和br 是HTML标签，用于插入水平线和换行符。

<hr>标签用于在页面中插入一条水平线。
- 它没有任何内容，只是作为一个单独的标签存在。
br标签用于在文本中插入一个换行符，使得紧接着的文本从下一行开始显示。

以下是示例代码和展示效果：

<p>这是一段文字。</p>
<hr>
<p>这是另一段文字。</p>

<p>这是一段文字。

这是换行后的文字。</p>

在上述示例中
- 第一个<hr>标签会在两段文字之间插入一条水平线。
- 第二个标签会在第一段文字的末尾插入一个换行符，使得下一段文字从新的一行开始显示。
需要注意的是，
- <hr>和是自闭合标签，不需要结束标签</hr>或</br>。
- 并且，由于<hr>和是单纯的装饰性标签，没有实际的内容，所以它们不会影响网页的语义结构。

（4）段落：p

<p>标签是HTML中用于定义段落的标签。
- 它用于将一段文本包裹起来，表示这些文本是一个段落的内容。
- 浏览器会自动在段落之前和之后添加一些空白，以使其在页面上显示为不同的段落。
以下是示例代码和展示效果：

<p>这是第一个段落。</p>
<p>这是第二个段落。</p>

在上述示例中，两个<p>标签分别包裹了两个不同的段落。
- 浏览器会根据这些标记自动为每个段落添加适当的间距，并在页面上显示为不同的段落。
需要注意的是，<p>标签只能包含文本内容，不能嵌套其他块级元素（如<div>、<ul>等）。
- 如果需要在段落中包含其他元素，请考虑使用合适的标签结构，如使用<div>标签来包含多个元素。

【5】标签的分类

（1）单标签/双标签

单标签：

单标签也称为自闭合标签，是指在一个标签中同时定义了开始和结束，没有包含其他内容的标签。
它们通常用于表示页面上的独立元素或空元素，不需要内部内容或子元素。

单标签的结构为<tagname>，例如：


 <!-- 换行符 -->
<hr> <!-- 水平线 -->
<img src="image.jpg" alt="图片"> <!-- 图片 -->
<input type="text" name="username"> <!-- 输入框 -->

双标签：

双标签也称为成对标签，是指一个标签包含了开始标签和结束标签，并且可以拥有内部内容或子元素。

双标签的结构为<tagname>content</tagname>，例如：

<p>这是一个段落。</p> <!-- 段落 -->
<a href="https://www.example.com">点击这里</a> <!-- 链接 -->
<ul>
  <li>项目1</li>
  <li>项目2</li>
</ul> <!-- 无序列表 -->
<div>
  <h1>标题</h1>
  <p>这是一个区块</p>
</div> <!-- 区块级元素 -->

双标签用于表示具有起始和结束的内容块或容器，并且可以嵌套其他元素。
- 结束标签通常使用斜杠/进行闭合，以与开始标签进行配对。
需要注意的是，每个双标签都必须有相应的开始标签和结束标签，并且它们必须正确地嵌套和闭合，以确保HTML代码的正确性。

（2）块级标签/行内标签

块级~标签（Block-level Tags）：

块级标签独占一行，默认情况下会在前后添加换行。
块级标签可以设置宽度、高度、边距和内边距等样式属性。
块级标签可以包含其他块级元素和行内元素。

常见的块级标签有：

<div>：用于组合其他元素，创建一个区块。
<p>：表示段落。
<h1> 到 <h6>：标题标签，按照重要性递减排列。
<ul>：无序列表。
<ol>：有序列表。
<li>：列表项。
<table>：表示表格。
<form>：表示表单。

行内标签（Inline Tags）：

行内标签与其他内容在同一行上显示，不会强制换行。
行内标签的宽度和高度取决于其中包含的内容。
行内标签通常不能设置宽度、高度和顶部/底部的边距。
行内标签只能包含其他行内元素或文本，不能嵌套块级元素。

常见的行内标签有：

<span>：用于选取文档的一部分或设置样式。
<a>：表示超链接。
<strong>：表示强调内容。
<em>：表示斜体强调内容。
<img>：表示图像。
<input>：表示输入字段。

【6】特殊符号

;
- 是HTML中的非换行空格，可以用于在页面上创建额外的空白间隔。
&
- 是HTML中的字符实体引用，用于表示字符 "&"。
>
- 是HTML中的字符实体引用，用于表示大于号 ">"。
<
- 是HTML中的字符实体引用，用于表示小于号 "<"。
©
- 是HTML中的字符实体引用，用于表示版权符号 "©"。
®
- 是HTML中的字符实体引用，用于表示注册商标符号 "®"。
¥
- 是HTML中的字符实体引用，用于表示日元符号 "¥"。

【7】常用标签

（1）`<div>` 标签是

<div> 标签是HTML中的一个块级元素

通常用于创建一个容器，用来组织和布局其他HTML元素。
它可以通过CSS来定义样式，并且可以嵌套其他的HTML元素。
<div> 标签本身没有特定的语义含义，而是作为一个通用容器使用。

（2）`<span>` 标签

<span> 标签是HTML中的一个内联元素
- 通常用于对文本或其他内联元素应用样式或添加标记。
- 与 <div> 不同，<span> 通常用于小段文字或指定样式，而不是组织页面结构。
- 它也可以嵌套其他的HTML元素。

（3）a链接标签

<a> 链接标签是HTML中的一个内联元素，用于创建超链接。

它可以通过 href 属性设置链接的目标地址，可以是一个 URL，也可以是页面中其他元素的 id 值。

下面是 href 属性的主要用法：
- 当 href 属性值为一个 URL 时，点击链接将会跳转到对应的 URL 地址。
  - 例如：<a href="https://www.example.com">点击跳转</a>
- 当 href 属性值为页面中其他元素的 id 值时，可以实现页面内的锚点功能，点击链接将会滚动到指定 id 元素所在的位置。
  - 例如：<a href="#section1">跳转到第一节</a>
另外，<a> 链接标签还有一个 target 属性，用于指定链接如何在浏览器中打开。
- 默认情况下，target 属性值为 "_self"，表示链接在当前页面打开。
  - 例如：<a href="https://www.example.com" target="_self">点击在当前页面跳转</a>
- 如果将 target 属性值设置为 "_blank"，则链接将在新的标签页或窗口中打开。
  - 例如：<a href="https://www.example.com" target="_blank">点击在新标签页中打开</a>

（4）img图片标签

<img> 图片标签是HTML中的一个自闭合元素，用于在网页中插入图像。
它通过 src 属性指定要显示的图片的地址，并可以使用其他属性来提供附加信息和设置图片的样式。
下面是 <img> 标签的常用属性：
- src：
  - 指定要显示的图片的 URL 地址。
  - 例如：<img src="image.jpg" alt="描述文本">。
  - 在 src 属性中可以使用相对路径或绝对路径来引用图片。
- alt：
  - 在图片无法加载时显示的替代文本。这个属性对于辅助技术（如屏幕阅读器）很重要，也可以作为图片的描述，增强网页的可访问性。
  - 例如：<img src="image.jpg" alt="这是一张图片">。
- title：
  - 鼠标悬停在图片上时显示的文本。它可以提供关于图片的额外信息或者作为提示信息。
  - 例如：<img src="image.jpg" alt="描述文本" title="更多信息">。
- height/width：
  - 用于调整图片的显示尺寸。
  - 通过设置 height 和 width 属性，可以按比例缩放图片的大小，保持图像不失真。
  - 注意，同时设置了 height 和 width 属性且两者比例不一致，可能会导致图像变形。
  - 例如：<img src="image.jpg" alt="描述文本" width="200" height="150">。

【8】标签比较重要的两个属性

`id`属性：

id属性用于为一个HTML元素指定唯一的标识符。
每个HTML文档中的元素都应该具有唯一的id值，这样可以方便地通过JavaScript或CSS选择并操作特定的元素。
在使用id属性时，应确保不同元素之间的id值不重复。
通过#符号加上id值，可以在CSS中选择特定的元素，例如：#myElement { color: red; }。
在JavaScript中，可以使用getElementById()方法来获取具有指定id值的元素。

`class`属性：

class属性用于为一个或多个HTML元素指定相同的类名。
多个元素可以共享相同的class名称，这样可以对这些元素应用相同的CSS样式或JavaScript行为。
class值可以由一个或多个空格分隔的字符组成，允许使用多个类名。例如：<div class="classA classB">。
在CSS中，可以使用.符号加上类名来选择具有特定类的元素，例如：.myClass { font-weight: bold; }。
在JavaScript中，可以使用getElementsByClassName()方法来获取具有指定类名的元素集合。

总结：

id属性用于唯一标识元素，而class属性用于为多个元素指定相同的类名。
通过id可以选择具体的元素进行操作，而通过class可以对一组元素应用共同的样式或行为。

【9】列表标签

无序列表：

使用 <ul> 标签创建无序列表，列表项使用 <li> 标签表示。

<ul>：表示无序列表的容器标签。
<li>：表示列表项，用于包裹每个列表项的内容。
list-style-type: none;：CSS 样式属性，用于去除无序列表的默认样式（例如默认的圆点）。
padding-left: px;：CSS 样式属性，用于将无序列表项的左侧缩进设为像素。

示例代码：

<ul>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ul>

有序列表：

使用 <ol> 标签创建有序列表，列表项同样使用 <li> 标签表示。

<ol>：表示有序列表的容器标签。
<li>：表示列表项，用于包裹每个列表项的内容。

示例代码：

<ol>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ol>

定义列表：

使用 <dl> 标签创建定义列表，每个术语使用 <dt> 标签表示，对应的定义使用 <dd> 标签表示。

<dl>：表示定义列表的容器标签。
<dt>：表示术语（definition term），用于包裹每个术语的内容。
<dd>：表示定义（definition），用于包裹对应术语的定义内容。

示例代码：

<dl>
  <dt>Term 1</dt>
  <dd>Definition 1</dd>
  <dt>Term 2</dt>
  <dd>Definition 2</dd>
</dl>

【10】表格标签

表格标签不一定非要将thead和tbody都写出来，也可以只有thead或tbody

<table>：表示表格的容器标签，用于包裹整个表格结构。
<thead>：表示表格的表头部分，通常包含表头行（<tr>），用于定义表格的列标题。
<tr>：表示表格的行，在表头中用于定义列标题。
<th>：表示表格的表头单元格，用于包裹表头列标题的内容。

示例代码：

<table>
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
    </tr>
  </thead>
</table>

<tbody>：表示表格的主体部分，通常包含数据行（<tr>），用于填充表格的实际数据。
<tr>：表示表格的行，在 <tbody> 中用于表示每个数据行。
<td>：表示表格的数据单元格，用于包裹每个数据单元格的内容。

示例代码：

<table>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
    <tr>
      <td>Data 4</td>
      <td>Data 5</td>
      <td>Data 6</td>
    </tr>
  </tbody>
</table>

colspan：表示单元格跨列，用于指定单元格横向占据的列数。

rowspan：表示单元格跨行，用于指定单元格纵向占据的行数。

示例代码：

<table>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td rowspan="2">Data 3</td>
    </tr>
    <tr>
      <td colspan="2">Data 4</td>
    </tr>
  </tbody>
</table>

【11】form表单

用来获取前端输入的数据

超后端发的数据，一定要写在form表单内

<form> 表单是用于获取前端用户输入数据并向后端提交数据的HTML元素。

`action`（动作）：控制数据提交的路径。

如果不写 action 属性，表单将自动拼接当前页面的URL作为提交路径。
如果完整地写出 action 属性，则指定了数据提交的具体URL。
如果只写后缀，例如 /submit，则补全的是与当前页面相同的主机和端口的完整URL。

示例代码：

<form action="/submit" method="post">
  <!-- 表单内容 -->
</form>

`method`（方法）：控制数据提交的方式。

如果使用 post 方法，表单数据将通过 HTTP POST 请求进行提交。
如果使用 get 方法，表单数据将通过 HTTP GET 请求进行提交。
默认情况下，表单的提交方式是 get。

示例代码：

<form action="/submit" method="post">
  <!-- 表单内容 -->
</form>

`enctype`（编码类型）：控制数据提交的编码格式。

如果没有设置 enctype 属性，表单数据将默认以 application/x-www-form-urlencoded 进行编码。
如果需要上传文件，需要设置 enctype 属性为 multipart/form-data。

示例代码：

<form action="/submit" method="post" enctype="multipart/form-data">
  <!-- 表单内容 -->
</form>

【12】input标签

<input> 标签用于在表单中创建可交互的输入字段。

它具有 type 属性，用于指定输入字段的类型。

以下是 <input> 常用的类型及其相关属性：

text：
- 创建一个文本输入框，用于接受用户输入的文本信息。
- 示例代码：<input type="text" name="username">
password：
- 创建一个密码输入框，用户输入的内容会被隐藏为密码格式。
- 示例代码：<input type="password" name="password">
date：
- 创建一个日期选择器，允许用户选择日期。
- 示例代码：<input type="date" name="birthdate">
radio：
- 创建一个单选按钮，用户只能在给定的选项中选择一个。
- 使用 checked 属性可以设置默认选中的单选按钮。
- 简写示例代码：<input type="radio" name="gender" value="male" checked>
- 完整示例代码：<input type="radio" name="gender" value="male" checked="checked">
checkbox：
- 创建一个复选框，用户可以选择一个或多个选项。
- 使用 checked 属性可以设置默认选中的复选框。
- 示例代码：<input type="checkbox" name="hobby" value="reading" checked>
file：
- 创建一个文件上传字段，允许用户选择并上传文件。
- 示例代码：<input type="file" name="fileupload">
submit：
- 创建一个提交按钮，用于触发表单的提交。
- 示例代码：<input type="submit" value="Submit">
button：
- 创建一个普通按钮，用于执行自定义的JavaScript函数。
- 示例代码：<input type="button" value="Click me" onclick="myFunction()">
reset：
- 创建一个重置按钮，用于将表单的字段值重置为默认值。
- 示例代码：<input type="reset" value="Reset">

【13】select标签

<select> 标签用于创建下拉选择菜单，允许用户从预定义的选项中选择一个或多个值。

默认单选：

<select> 标签默认为单选模式，用户只能选择一个选项。
示例代码：

<select>
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

多选模式：

通过设置 multiple 属性，可以使 <select> 标签支持多选模式，用户可以选择多个选项。
示例代码：

<select multiple>
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

`<option>` 元素：

使用 <option> 元素在 <select> 内部定义每个可选项。

`value` 属性：

用于设置选项的实际值，该值将被提交到服务器。

文本内容：

<option> 元素的文本内容将作为显示给用户的选项文本。
示例代码：

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

默认选中：

通过设置 selected 属性，可以指定一个或多个选项在页面加载时被默认选中。
示例代码：

<select>
  <option value="option1">Option 1</option>
  <option value="option2" selected>Option 2</option>
  <option value="option3">Option 3</option>
</select>

【14】textarea标签

<textarea> 标签被用于在 HTML 表单中创建多行文本输入框，允许用户输入和编辑大量文本。

示例代码：

<textarea rows="4" cols="50">
  这是一个示例文本框。
</textarea>

<textarea> 标签有以下属性和特点：

`rows` 和 `cols` 属性：

这两个属性用于设置文本框的行数和列数。
通过调整这两个属性的值，可以控制文本框的大小。
示例代码：

<textarea rows="4" cols="50">
  这是一个示例文本框。
</textarea>

默认内容：

您可以在 <textarea> 标签之间添加初始文本，提示用户输入什么样的内容。
示例代码：

<textarea rows="4" cols="50">
  在此处输入文本...
</textarea>

获取输入的文本：

通过表单提交或JavaScript以编程方式获取 <textarea> 中的文本内容。
- 表单提交：
  - 当用户提交包含 <textarea> 的表单时，其内容将作为表单数据的一部分发送到服务器。
- JavaScript：
  - 您可以使用 JavaScript 获取 <textarea> 中的文本内容，并进行进一步的处理。
    示例代码：

<form>
  <textarea id="myTextarea" rows="4" cols="50"></textarea>
  <input type="submit" value="Submit">
</form>

<script>
  var textareaValue = document.getElementById("myTextarea").value;
  console.log(textareaValue);
</script>

通过使用 <textarea> 标签，您可以创建一个用于获取和编辑大量文本的输入框，并以不同的方式处理用户输入的文本内容。

【15】label标签

<label> 标签用于为表单元素提供标签或标题

以便用户可以更好地理解每个输入字段的目的。

用法：

<label> 标签通常与表单元素（如文本框、复选框、单选按钮等）相关联。
使用 for 属性将 <label> 与目标表单元素关联起来。
示例代码：

<label for="username">用户名：</label>
<input type="text" id="username" name="username">

`for` 属性：

使用 for 属性将 <label> 与具有相同 id 属性值的表单元素关联起来。
当用户点击 <label> 时，相关联的表单元素将成为当前焦点或选中状态。
示例代码：

<label for="username">用户名：</label>
<input type="text" id="username" name="username">

嵌套：

<label> 可以包含其他 HTML 元素
例如文本、图像或其他表单元素。
示例代码：

<label for="password">密码：</label>
<input type="password" id="password" name="password">
<span>（8个字符以上）</span>

【16】补充

获取用户数据的标签都应该具有name标签来表明数据的含义类似于字典的key
获取到的用户数据类似于字典中的value（也是存储到标签的value属性中了）
<input> 元素是最常用的用于获取用户数据的标签之一。
- 不过，请注意 <input> 元素的值存储在 value 属性中，
- 而非 name 属性。

【二】CSS

【1】什么是CSS

CSS（层叠样式表，Cascading Style Sheets）是一种用于描述网页内容外观和样式的标记语言。
它为网页提供了一种控制和布局元素外观的方法，包括字体、颜色、边距、背景、定位等。
CSS与HTML结合使用，使开发者能够精确控制网页的显示效果，从而实现丰富多样的页面布局和设计。

【2】注释语法

在CSS中，注释用于向开发者添加备注和解释代码的作用。在CSS中，有两种注释语法：

单行注释：

使用双斜杠（//）表示单行注释
注释内容从双斜杠开始，一直延伸到当前行结束。
单行注释只能注释当前行的内容，不能注释多行。

示例：

/* 这是一个单行注释 */

body {
  color: blue; // 这是一行单行注释
}

多行注释：

使用斜杠加星号（/* */)表示多行注释
注释内容从斜杠加星号开始，一直延伸到星号加斜杠结束。
多行注释可以跨越多行，并且可以注释任意内容，包括代码块。

示例：

/*
这是一个多行注释
它可以跨越多行
*/

/*
这里是一个多行注释的示例

body {
  color: blue;
}

.header {
  background-color: red;
}
*/

【3】引入方式

在HTML中，有三种引入CSS样式表的方式：

`<style>` 标签：

使用 <style> 标签可以将CSS代码直接嵌入到HTML文档中。
这种方式适用于单个HTML文档或具有特定样式需求的页面。

示例：

<head>
  <style>
    body {
      color: blue;
    }
  </style>
</head>

`<link>` 标签：

使用 <link> 标签可以引入外部的CSS文件，这是一种常见的引入方式。
通过使用 <link> 标签，可以将CSS文件与HTML文档分离，提高代码的可维护性和可复用性。

示例：

<head>
  <link rel="stylesheet" href="styles.css">
</head>

行内样式（Inline Style）：

通过在HTML元素上直接使用style属性可以定义行内样式。
行内样式仅应用于当前元素，并具有最高的优先级，会覆盖其他方式引入的样式。

示例：

<div style="color: red;">Hello, World!</div>

【4】如何查找标签

在HTML中，可以使用选择器来查找标签。
选择器是一种语法结构，用于指定所要选择的HTML元素。
常见的选择器包括标签名选择器、类选择器、ID选择器、属性选择器等。

【5】基本选择器

（1）id选择器

使用ID作为选择器，可以选择具有指定ID的元素。
请注意，每个页面中ID应该是唯一的。

示例：选择具有 myId ID的元素

#myId {
  /* CSS 样式 */
}

（2）class选择器

使用类名作为选择器，可以选择具有相同类别的元素。

示例：选择所有具有 example 类的元素

.example {
  /* CSS 样式 */
}

（3）标签选择器

使用标签名作为选择器，可以选择所有符合条件的标签。

示例：选择所有的 <p> 标签

p {
  /* CSS 样式 */
}

（4）通用选择器

【6】组合选择器

我们将标签的嵌套关系比喻成了亲戚关系
div span
- div下的span标签
div > span
- 拿div标签下的第一个span
div+span
- 紧挨着div标签的span标签
div~span
- div下面的同级所有span标签

组合选择器在CSS中用于根据标签之间的亲戚关系选择元素。这些组合选择器可以帮助我们更精确地选择特定的HTML元素。

下面是对不同组合选择器的解释：

div span：
- 表示选择在 <div> 标签内部嵌套的所有 <span> 标签。
- 这包括直接嵌套和间接嵌套的 <span> 标签。
div > span：
- 表示选择作为 <div> 标签的直接子元素的第一个 <span> 标签。
- 只会选择直接嵌套在 <div> 中的 <span> 标签，不包括间接嵌套的 <span> 标签。
div + span：
- 表示选择紧挨着 <div> 标签之后的第一个 <span> 标签。
- 只会选择与 <div> 同级且紧跟在其后的 <span> 标签。
div ~ span：
- 表示选择在与 <div> 同级的元素中，位于 <div> 标签之后的所有 <span> 标签。
- 会选择所有与 <div> 同级但在其后任意位置的 <span> 标签。

【7】属性选择器

使用元素的属性值作为选择器，可以选择具有特定属性的元素。

示例：选择具有 title 属性的 <a> 元素

a[title] {
  /* CSS 样式 */
}

【8】不同选择器之间可以并用、混用

div, p, span：
- 这个选择器表示选择所有的 <div> 标签、所有的 <p> 标签和所有的 <span> 标签。
- 通过逗号分隔不同的选择器，可以同时选择多个不同类型的元素，并将相同的样式应用于它们。
div, #d1, .c1：
- 这个选择器表示选择所有的 <div> 标签、id为"d1"的元素以及class为"c1"的元素。
- 在这个例子中，"d1"和"c1"分别是id选择器和类选择器，并与标签选择器混合使用。
- 这样可以根据元素的标签、id或类来选择需要的元素，并为它们应用特定的样式。

【9】伪类选择器

伪类选择器是一种能够选择元素的特定状态或行为的CSS选择器。
对于标签，常见的四个伪类选择器以及它们代表的状态是：
- 此外，还有一个额外的伪类选择器 :focus（聚焦）
  - 在标签中，通常用于处理键盘焦点导航时的样式效果。

【10】伪元素选择器

伪元素选择器是一种CSS选择器，用于选取元素的特定部分或添加额外的内容。以下是常见的几个伪元素选择器：

:first-letter（首字母）:
- 该伪元素选择器允许选择元素内的第一个字母，并为其应用样式。
- 它可以用于制作首字母大写或添加其他样式效果。
:before（之前）:
- 该伪元素选择器允许在选中的元素之前插入内容，并为其应用样式。
- 它常用于在元素前面添加修饰性的内容，比如图标或装饰符号等。
:after（之后）:
- 该伪元素选择器允许在选中的元素之后插入内容，并为其应用样式。
- 类似于:before，:after也常用于添加修饰性的内容，通常用于处理浮动带来的影响或创建额外的元素。
- 例如，使用伪元素选择器解决浮动带来的影响时，我们可以为包含浮动元素的父元素添加一个清除浮动的样式类
- 比如.clearfix:after{}。
- 通过在该选择器中使用:after伪元素选择器，我们可以在浮动元素之后添加一个空的元素，并为其应用样式以清除浮动。

【11】选择器的优先级

选择器的优先级决定了当多个选择器应用于同一个元素时，哪个选择器的样式将被应用。选择器的优先级通常根据以下规则计算：

内联样式：给元素直接应用的内联样式具有最高的优先级。
ID选择器：ID选择器具有较高的优先级。
类选择器、属性选择器和伪类选择器：这些选择器的优先级较低。
元素选择器和伪元素选择器：这些选择器的优先级最低。

【12】字体属性相关

字体属性在CSS中用于控制文本的字体样式和颜色。以下是与字体相关的几个常见属性：
- font-family（字体族）:
  - 该属性用于设置元素中文本的字体样式，可以指定一个或多个字体名称作为其值。
  - 当指定多个字体名称时，浏览器会按照优先级逐个尝试加载字体，直到找到可用的字体。
  - 如果没有找到任何可用字体，则会使用默认字体进行显示。
- font-size（字号）:
  - 这个属性用于设置字体的大小。它可以使用绝对单位（如像素、英寸）或相对单位（如em、rem）来指定大小。
  - 常见的字体大小值包括小标题、正文、副标题和标题等。
- font-weight（字重）:
  - 字重属性用于定义字体的粗细程度。
  - 可以使用关键词（如bold、normal）或数值（如100、400）来指定字体的粗细值。
  - 常见的字重值包括普通、加粗和更细的字体。
- color（文字颜色）:
  - color属性用于设置文本的颜色。
  - 可以使用预定义颜色名称（如red、blue）或颜色值表示（如#ff000、rgb(255, , )）来指定颜色。
  - 预定义颜色名称包括了常见的颜色，而颜色值表示可以通过十六进制、RGB或RGBA来定义。
下面是对几种颜色表示方法的简要描述：
- 使用预定义颜色名称时直接写出名称即可
  - 例如：color: red;
- 十六进制表示方式以#为前缀，后面跟着三个（缩写）或六个字符来表示颜色值
  - 例如：color: #eee; 表示浅灰色。
- RGB表示方式使用红、绿和蓝三个分量的整数值来表示颜色，每个分量的取值范围为-255
  - 例如：color: rgb(255, , ); 表示红色。
- RGBA表示方式与RGB类似，但增加了一个不透明度（Alpha通道）的取值范围为-1
  - 例如：color: rgba(255, , , .5); 表示红色并且半透明。

【13】文本属性相关

文本属性在CSS中用于控制文本的对齐方式、装饰效果和缩进等。以下是与文本相关的几个常见属性：
text-align（文本对齐）:
该属性用于控制文本在容器内的对齐方式。常见的值包括：
- left: 左对齐文本。
- right: 右对齐文本。
- center: 居中对齐文本。
- justify: 两端对齐，即拉伸文本，使其填满整个容器。
text-decoration（文本装饰）:
这个属性用于设置文本的装饰效果，比如下划线或删除线等。常见的值包括：
- none: 没有任何装饰效果。
- underline: 给文本添加下划线效果。
- overline: 给文本添加上划线效果。
- line-through: 在文本中间添加删除线效果。
text-indent（首行缩进）:
- 首行缩进属性用于控制段落或文本块的首行缩进。
- 可以使用固定单位（如像素、英寸）或相对单位（如em、rem）来指定缩进值。
- 常见的方式为将负值设置为负数以使首行缩进
  - 例如：text-indent: -2em; 表示首行缩进2个em单位。

【14】背景属性相关

背景属性在CSS中用于设置元素的背景样式，包括背景颜色、背景图像、重复方式以及位置等。针对您提到的两个问题，以下是相关信息：
background（背景属性）:
这个属性用于设置元素的背景样式，可以同时设置背景颜色和背景图片，并指定图片的重复方式和位置等。具体的设置方式如下：
- background-color: 设置背景颜色，例如：red 表示红色。
- background-image: 设置背景图像，可以使用图片的URL地址，例如：url("image.jpg")。
- background-repeat: 设置背景图片的重复方式，常见的值有：
  - repeat: 默认值，表示在水平和垂直方向上平铺重复。
  - no-repeat: 不重复，在容器中只显示一次。
  - repeat-x: 在水平方向上平铺重复。
  - repeat-y: 在垂直方向上平铺重复。
- background-position: 设置背景图片的位置，默认为左上角。可以使用关键词或像素值来指定位置，例如：center center 表示居中展示。
展示位置的选择：
在 background-position 属性中可以通过设置不同的值来调整背景图片的展示位置。常见的设置方式有：
- top left, top center, top right: 图片在顶部水平方向上的左、中、右位置。
- center left, center center, center right: 图片在垂直和水平方向上的居中位置。
- bottom left, bottom center, bottom right: 图片在底部水平方向上的左、中、右位置。
  另外，还可以使用具体的像素值或百分比来细化控制背景图片的展示位置。

【15】边框属性相关

边框属性在CSS中用于设置元素的边框样式，包括边框宽度、边框样式和边框颜色等。此外，还可以使用 border-radius 属性来设置元素的圆角效果。针对您提到的两个问题，以下是相关信息：
border（边框属性）:
border 属性用于设置元素的边框样式，一般由边框宽度、边框样式和边框颜色三部分组成。具体的设置方式如下：
- border-width: 设置边框的宽度，例如：3px 表示3像素的宽度。
- border-style: 设置边框的样式，常见的值有：
  - none: 无边框。
  - solid: 实线边框。
  - dotted: 点状边框。
  - dashed: 虚线边框。
- border-color: 设置边框的颜色，例如：red 表示红色。
综合以上三个属性 border: 3px solid red;，表示设置一个宽度为3像素、样式为实线、颜色为红色的边框。
border-radius（边框圆角属性）:
border-radius 属性用于设置元素的边框圆角效果，可以将元素的边角变为圆形或椭圆形。具体的设置方式如下：
- border-radius: 设置圆角的半径，可以使用像素值或百分比来指定。
border-radius: 50%;，表示将元素的边角设置为半径为50%的圆形，从而实现圆形头像的效果。

【16】display属性

display 属性是CSS中用于控制元素的显示方式的一个关键属性，常见的取值有 none、block、inline 和 inline-block。下面是对这些取值的详细解释：
none：
display: none; 用于隐藏元素，隐藏后的元素在页面上不会占据空间，并且不会参与布局和渲染过程。元素隐藏后，无法通过用户交互或 JavaScript 进行操作。
block：
display: block; 将元素设置为块级元素，在默认情况下元素会单独占据一行，宽度会自动填充父容器的宽度。块级元素可以设置宽度、高度和边距等属性，并且可以容纳其他块级元素和内联元素。
inline：
display: inline; 将元素设置为内联元素，内联元素只占据其内容所需的空间，并且不强制换行。内联元素不具备设置宽度和高度的能力，只能通过调整内部内容来影响元素的尺寸。
inline-block：
display: inline-block; 结合了块级元素和内联元素的特性。内联块元素会在同一行内显示，但是可以设置宽度、高度和边距等属性。与内联元素不同的是，内联块元素可以容纳其他内联元素或块级元素。

【17】盒子模型

盒子模型（Box Model）是CSS中用于描述和布局元素的基本概念之一。它将一个元素看作是由四个部分组成的盒子：margin、border、padding 和 content。下面对这些部分进行详细说明：
content：
content 是盒子模型中用于显示元素实际内容的区域。它包括元素的文本、图片、背景等内容。
padding：
padding 是 content 区域与 border 区域之间的空白区域。它用于控制元素内容与边框之间的距离。可以通过设置 padding 属性来指定该区域的大小。
border：
border 是 padding 区域与 margin 区域之间的边界线。它是一个可见的边框，可以通过设置 border 属性来定义其样式、宽度和颜色。
margin：
margin 是盒子模型中的最外层区域，用于控制元素与其他元素之间的间距。它是元素边界与相邻元素边界之间的空白区域，可以通过设置 margin 属性来调整其大小和行为。

【18】浮动

浮动（Float）是CSS中用于控制元素在页面中布局的属性之一。
- 通过设置 float 属性，可以使元素向左或向右浮动，并腾出周围空间给其他元素。
浮动的元素会脱离正常的文档流，其宽度将自动收缩到适应内容，而不再占据父元素的整个宽度。
- 浮动元素会紧贴其前面的非浮动元素或前一个浮动元素的边缘。
- 浮动元素的典型应用场景包括实现多列布局、图片环绕文字等。
然而，浮动元素可能导致父标签的塌陷现象，即父标签无法正常包裹住浮动元素。
- 这是因为浮动元素对于父元素来说是脱离了文档流的，父元素无法感知到浮动元素的高度。
- 为了解决这个问题，可以在父元素上添加清除浮动的样式
  - 例如使用 clearfix 类或 clear 属性。
浮动一般多用于前期的页面布局阶段，而现代的响应式设计趋势已经逐渐减少了对浮动布局的依赖。
- 取而代之的是使用更强大的布局技术，如 Flexbox 和 Grid Layout，它们能够更灵活地实现复杂的页面布局需求。

【19】清除float

清除浮动（Clear Float）是指在使用浮动布局时，为了确保父元素正确包裹浮动元素，需要在适当的位置添加清除浮动的样式。
- 在 CSS 中，可以使用 clear 属性来实现清除浮动。
通用方式中提到的清除浮动方法是通过伪元素 :after 添加一个空内容的块级元素，并设置其样式为 clear:both，这样就能够使该元素清除掉前面的浮动元素，从而让父元素正常包裹浮动元素。
以下是通用方式的 CSS 代码示例：

.clearfix:after {
    content: "";
    display: block;
    clear: both;
}

使用时，只需在需要清除浮动的父元素上添加 clearfix 类名即可，例如：

<div class="clearfix">
    <!-- 浮动元素 -->
    <div style="float: left;">Float Element 1</div>
    <div style="float: right;">Float Element 2</div>
</div>

需要注意的是，清除浮动的方式有很多种，并且在不同的情况下可能需要选择不同的清除浮动方法。
- 例如，可以使用空的 <div> 元素或设置父元素的 overflow 属性为 hidden 等方式进行清除浮动。

【20】溢出

当在使用圆形头像时，如果图片的大小超过了容器（比如 <div>）的大小，可能会导致溢出现象。
- 为了解决这个问题，可以使用 overflow 属性来处理。

overflow 属性用于控制容器中内容溢出时的处理方式。

常用的取值有以下几种：

visible：默认值，表示内容溢出时不做任何裁剪，显示在容器外部。
hidden：内容溢出时进行裁剪，超出容器的部分将被隐藏起来。
scroll：如果内容溢出，则在容器中显示滚动条，这样用户可以滚动查看全部内容。
auto：会根据需要自动显示滚动条，只在内容溢出时显示滚动条。

针对圆形头像的情况，通常需要设置容器为一个正方形，并设置其 overflow 属性为 hidden，然后将图片设置为圆形，并调整图片的大小，使其适应容器。

以下是一个示例代码：

<div class="avatar-container">
    <img src="avatar.jpg" alt="Avatar" class="avatar">
</div>

.avatar-container {
    width: 200px;
    height: 200px;
    overflow: hidden;
    border-radius: 50%;
}

.avatar {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}

上述代码中，.avatar-container 是一个正方形容器，设置了宽度和高度为 200 像素，并且设置了 overflow: hidden，以隐藏超出容器的部分。
- .avatar 类用于设置圆形头像的样式，max-width: 100% 和 max-height: 100% 使得图片尽量不超出容器的大小，同时保持图片的宽高比。

【21】定位

静态定位（static）
- 是元素的默认定位方式
- 元素在文档流中按照其在 HTML 中的位置进行布局，不受其他定位属性的影响，无法使用 top、bottom、left、right 属性来进行偏移。
相对定位（relative）
- 是根据元素在正常文档流中的位置进行偏移的定位方式。
- 通过设置 top、bottom、left、right 等属性，可以使元素相对于其正常位置进行移动。
- 相对定位不会影响其他元素的布局，其他元素仍然按照正常文档流进行定位。
绝对定位（absolute）
- 将元素从正常文档流中脱离出来，相对于距离该元素最近的已定位的祖先元素进行定位。
- 如果没有已定位的祖先元素，则相对于文档的初始包含块（即视窗）进行定位。绝对定位的元素不再占据文档流中的空间，它们可以使用 top、bottom、left、right 属性来调整位置。
固定定位（fixed）
- 是基于视窗的定位方式，元素相对于视窗进行定位，不会随滚动条的滚动而移动。
- 固定定位的元素会脱离正常文档流，并且不占据文档流中的空间。常见用途是创建在页面上方或下方固定位置的导航栏或广告条。

这些定位方式可通过 CSS 的 position 属性进行设置

属性值分别为 static、relative、absolute 和 fixed。

以下是一个示例代码，展示了不同定位方式的应用：

<div class="container">
    <div class="box static">Static Positioning</div>
    <div class="box relative">Relative Positioning</div>
    <div class="box absolute">Absolute Positioning</div>
    <div class="box fixed">Fixed Positioning</div>
</div>

.container {
    position: relative;
    height: 300px;
    border: 1px solid #ccc;
}

.box {
    width: 100px;
    height: 100px;
    background-color: #f2f2f2;
    border: 1px solid #333;
    padding: 10px;
}

.static {
    position: static;
}

.relative {
    position: relative;
    top: 20px;
    left: 20px;
}

.absolute {
    position: absolute;
    top: 50px;
    right: 20px;
}

.fixed {
    position: fixed;
    bottom: 20px;
    left: 20px;
}

【22】z-index（层叠顺序）属性

z-index 属性用于定义元素的层叠顺序，即确定元素在重叠部分的显示顺序。
- +具有较高 z-index 值的元素将覆盖具有较低值的元素。
在模态框中，z-index 属性常用于控制模态框遮罩等背景元素的层叠顺序，以确保模态框位于其他内容之上，并且阻止用户与后面的页面进行交互。
以下是一个简单的模态框示例，展示了如何使用 z-index 控制层叠顺序：

HTML 代码：

<div class="modal-container">
    <div class="modal-overlay"></div>
    <div class="modal-content">
        <h2>Modal Title</h2>
        <p>This is the content of the modal.</p>
    </div>
</div>

CSS 代码：

.modal-container {
    position: relative;
}

.modal-overlay {
    position: fixed;
    top: ;
    left: ;
    width: 100%;
    height: 100%;
    background-color: rgba(, , , .5);
    z-index: 1; /* 遮罩层位于内容之下 */
}

.modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 20px;
    z-index: 2; /* 模态框内容位于遮罩层之上 */
}

在上述示例中，使用 z-index 属性将遮罩层设为 1，将模态框内容设为 2，确保模态框位于遮罩层之上。

【23】透明度

透明度（opacity）是指元素的不透明程度或可见性。
- 它是一个CSS属性，可以用于控制元素及其内容的透明度。
透明度的取值范围是到1
- 其中0表示完全透明（即元素不可见），而1表示完全不透明（即元素完全可见）。
以下是一个示例，展示如何使用 opacity 属性改变元素的透明度：
HTML代码：

<div class="container">
    <h2>透明度示例</h2>
    <p>这是一段文字。</p>
</div>

CSS代码：

.container {
    background-color: #f5f5f5;
    padding: 20px;
}
.container h2, .container p {
    opacity: .5; /* 将标题和段落的透明度设为.5 */
}

在上述示例中，我们将容器的背景颜色设为 #f5f5f5，并给标题和段落元素应用了 opacity: .5。
这样，标题和段落就会以50%的透明度显示，呈现半透明的效果。

需要注意的是，透明度属性会影响元素及其内部内容的可见性。

如果应用透明度于一个容器元素，那么该元素内部的所有内容，包括文字、图像等，都将受到相同的透明度影响。

【24】box-shadow

box-shadow是一种CSS属性，用于为元素添加阴影效果。
- 它可以为元素创建一个具有指定颜色、大小、模糊度和偏移量的阴影。

box-shadow属性有几个可设置的参数，包括：

颜色：
- 可以使用颜色值、rgba值或者十六进制代码来设置阴影的颜色。
偏移量X和偏移量Y：
- 通过调整这两个参数，可以设置阴影相对于元素的水平和垂直偏移量。
- 正值表示向右或向下的偏移，负值表示向左或向上的偏移。
模糊半径：
- 用于指定阴影的模糊程度。
- 较大的值会产生更模糊的效果，而较小的值会产生更清晰的阴影。
扩展半径：
- 用于指定阴影的大小。如果未指定扩展半径，则阴影将自动调整为适应内容的大小。

以下是一个示例，演示如何使用box-shadow属性为元素添加阴影效果：

HTML代码：

<div class="box"></div>

CSS代码：

.box {
    width: 200px;
    height: 200px;
    background-color: #f5f5f5;
    box-shadow: 4px 4px 8px rgba(, , , .2);
}

在上述示例中，我们为具有类名"box"的元素添加了一个阴影效果。box-shadow属性值的解释如下：

偏移量X：4px
偏移量Y：4px
模糊半径：8px
颜色：rgba(, , , .2)（黑色，透明度为.2）

这样，元素就会以相对于自身位置右下方4像素偏移的阴影显示出来，并且阴影周围有8像素的模糊效果。

需要注意的是，box-shadow属性可以同时设置多个阴影效果，通过逗号分隔不同的阴影值即可。

【三】JavaScript

面向对象的编程语言

【1】注释语法

以下是两种注释语法的示例：

单行注释（//）：

使用两个斜杠（//）来表示单行注释。
在斜杠后面的内容都会被视为注释，直到行末。

// 这是一个单行注释，用于在代码中做简短的注释说明

多行注释（/* ... /）：

使用/作为开始标记，使用*/作为结束标记，中间的内容都会被视为注释。

/*
这是一个多行注释，
可以用来写更长的注释内容，
甚至可以跨越多行
*/

【2】引入方式

`<script>`标签：

在HTML文件中使用<script>标签可以直接引入JavaScript代码文件。
将<script>标签放置在HTML文件的<head>或<body>部分，可以在页面加载时执行代码。

<script src="path/to/script.js"></script>

此方法适用于引入外部的JavaScript文件，其中src属性指定了外部文件的路径。

内联引入：

我们也可以将JavaScript代码直接写在HTML文件中，而不需要单独的外部文件。这种方式称为内联引入。

<script>
  // JavaScript代码...
</script>

在<script>标签之间编写JavaScript代码即可。

外部资源引入：

有时候，我们可能需要引入一些来自外部CDN（内容分发网络）的JavaScript库，
- 例如jQuery、React等。
- 这些库通常被托管在公共CDN上，并通过URL进行引入。

<script src="https://cdn.example.com/library.js"></script>

这种方式可以减少服务器负载，并提高缓存效果。

除了上述三种方式，还有其他一些高级的引入方式

比如模块化引入（通过import和export语法）

在Node.js环境中使用require函数等。

这些方式适用于更复杂的应用场景，例如大型项目或服务器端开发。

【3】数据类型

（1）变量

在JavaScript中，变量是用于存储和操作数据的容器。
JavaScript中有三种声明变量的关键字：var、let和const。

`var`：

在ES5及之前的版本中，var是声明变量最常用的关键字。
- 使用var声明的变量具有函数作用域，也就是说，它们的作用范围限定在包含它们的函数中。

var x = 10;

使用var声明的变量可以被重新赋值，并且在声明之前使用（存在变量提升）。

`let`：

ES6引入了let关键字作为声明块级作用域变量的推荐方法。
- 与var不同，使用let声明的变量具有块级作用域，也就是其作用范围限定在最近的代码块中（例如，一个函数内部或一个循环的花括号内部）。
```
let y = 20;
```
- let声明的变量也可以被重新赋值，但不能在声明之前使用（不存在变量提升）。

需要注意的是，在同一作用域中

不要同时使用var和let来声明同名变量，以免造成混淆和错误。

（2）变量命名规范

在JavaScript中，变量的命名需要遵循一定的规范，以使代码易于阅读、理解和维护。以下是常见的变量命名规范：
使用数字、字母、下划线（_）和美元符号（$）：
- 变量名称可以包含数字、字母、下划线和美元符号。
- 但是，名称必须以字母、下划线或美元符号开头，不能以数字开头。
```
var myVar = 10;
var _firstName = "John";
var $totalAmount = 100.50;
```
使用驼峰命名法：
- 驼峰命名法是一种常用的命名约定，它将单词首字母小写，每个后续单词的首字母大写，不使用下划线或空格。
- 这样做可以提高变量的可读性。
```
var firstName = "John";
var totalAmount = 100.50;
var myVariableName = "example";
```
避免使用关键字：
- JavaScript有一些保留关键字，用于表示语言的基本结构和特定功能。
- 在命名变量时，应避免使用这些关键字，以免产生冲突。
```
var var = 10; // 避免使用关键字作为变量名
var if = true; // 避免使用关键字作为变量名
```

（3）常量

除了var和let以外
- 还有一个关键字const用于声明常量
- 它的特点是一旦被赋值，则不能再被修改。

const PI = 3.14;

（4）数值类型 Number

数值类型（number）是JavaScript中的一种基本数据类型，用于表示数值。

它可以包括整数、浮点数和特殊数值（如NaN和Infinity）。

声明一个数值类型的变量：

var n = 10;         // 声明一个整数
var pi = 3.14;      // 声明一个浮点数

进行数值运算：

var a = 5;
var b = 2;
var sum = a + b;        // 加法
var difference = a - b; // 减法
var product = a * b;    // 乘法
var quotient = a / b;   // 除法

使用内置的Math对象进行更复杂的数学运算：

var radius = 5;
var area = Math.PI * Math.pow(radius, 2);  // 计算圆的面积

var angle = 45;
var radians = angle * (Math.PI / 180);     // 将角度转换为弧度

特殊的数值类型：

NaN（Not a Number）：
- 当执行无效的数学操作时，结果会生成NaN。
- 例如，除以或者开方一个负数。
Infinity（无穷大）：
- 表示大于任何数的特殊值，可以通过将无限值赋给一个变量来获取。

（5）字符类型 String

模板字符串是JavaScript中处理字符类型（string）的一种特殊语法。
- 它允许我们在字符串中插入变量或表达式，以一种更简洁和可读性更高的方式进行字符串拼接。

传统字符串

在传统的字符串拼接中，我们通常使用加号（+）来连接字符串和变量，例如：

var name = "Alice";
var greeting = "Hello, " + name + "!"; // 结果为 "Hello, Alice!"

模板字符串

而使用模板字符串，可以通过使用反引号（）来创建一个带有占位符的字符串。
- 占位符使用${}`包裹，并且可以在其中使用任意的JavaScript表达式，如变量、函数调用等。示例如下：

const name = "Alice";
const greeting = `Hello, ${name}!`; // 结果为 "Hello, Alice!"

模板字符串的优势

更简洁：相比传统的字符串拼接方式，模板字符串提供了更简洁的语法。
更可读：使用模板字符串使得代码更易于理解和维护，尤其是在需要拼接多个变量或表达式时。
支持多行字符串：模板字符串允许直接在字符串中换行，而不需要使用转义字符或字符串拼接。

除了插入变量外，模板字符串还可以嵌套使用，以及在其中执行更复杂的表达式。例如：

const a = 5;
const b = 2;
const result = `The sum of ${a} and ${b} is ${a + b}.`; // 结果为 "The sum of 5 and 2 is 7."

（6）字符类型常用方法

字符串（string）是一种常见的数据类型，在JavaScript中有许多可以用来操作和处理字符串的常用方法。以下是一些常用的字符串方法：

length: 返回字符串的长度。

const str = "Hello";
console.log(str.length); // 输出 5

charAt(index): 返回指定索引位置的字符。

const str = "Hello";
console.log(str.charAt()); // 输出 "H"

charCodeAt(index): 返回指定索引位置的字符的Unicode值。

const str = "Hello";
console.log(str.charCodeAt()); // 输出 72

concat(string): 连接两个或多个字符串，并返回新的字符串。

const str1 = "Hello";
const str2 = "World";
console.log(str1.concat(" ", str2)); // 输出 "Hello World"

indexOf(substring, fromIndex): 返回指定子字符串第一次出现的索引位置。如果未找到，返回-1。

const str = "Hello World";
console.log(str.indexOf("o")); // 输出 4
console.log(str.indexOf("W", 5)); // 输出 6
console.log(str.indexOf("abc")); // 输出 -1

substring(startIndex, endIndex): 返回从指定起始索引到结束索引之间的子字符串，不包括结束索引位置的字符。如果省略endIndex，则会截取到字符串的末尾。

const str = "Hello World";
console.log(str.substring(6)); // 输出 "World"
console.log(str.substring(, 5)); // 输出 "Hello"

toLowerCase(): 将字符串转换为小写字母。

const str = "Hello";
console.log(str.toLowerCase()); // 输出 "hello"

toUpperCase(): 将字符串转换为大写字母。

const str = "Hello";
console.log(str.toUpperCase()); // 输出 "HELLO"

以上只是一些常用的字符串方法示例，JavaScript还提供了其他众多的字符串方法，如 slice()、replace()、trim()等。

【4】null和undefined

在JavaScript中，null和undefined是两个特殊的值，表示变量的空缺或缺失。尽管它们有些相似，但在使用上有一些区别。

`null`

是一个表示“空”的值，可以将其赋值给任何变量。
它是JavaScript语言中的关键字，表示该变量被明确地定义为一个空值。
通常情况下，开发人员会将null用作暂时占位符，来表示一个变量尚未被赋予具体的值。

let variable = null;
console.log(variable); // 输出 null

`undefined`

表示一个变量已经声明，但尚未被赋予具体的值。
对于已声明但未初始化的变量，默认值为undefined。也
就是说，在以下情况下，变量会被认为是undefined：
- 已声明但未初始化的变量
- 未传递参数的函数参数
- 缺少返回值的函数调用
- 访问数组或对象中不存在的属性等

let variable;
console.log(variable); // 输出 undefined

function foo(parameter) {
  console.log(parameter); // 输出 undefined
}

foo();

需要注意的是
- null和undefined在比较时是不同的。
- 在进行严格相等比较（===）时，它们的结果是不相等的：

console.log(null === undefined); // 输出 false

如果在代码中遇到需要检查某个变量是否为null或undefined的情况
- 可以使用条件语句来进行判断：

if (variable === null) {
  // 处理 null 的情况
} else if (variable === undefined) {
  // 处理 undefined 的情况
} else {
  // 处理其他情况
}

总结：

null表示明确的空值
而undefined表示变量尚未赋予值。

在实际应用中，它们经常用于不同的场景和目的。

【5】布尔值 boolean

布尔值（Boolean）是计算机编程中的基本数据类型之一，它只有两个可能的取值：true（真）和false（假）。
- 布尔值主要用于逻辑运算和条件判断，使得程序能够根据不同的条件执行不同的操作。
在JavaScript中，布尔值可以通过直接使用关键字true和false来表示：

let isTrue = true;
let isFalse = false;

console.log(isTrue);  // 输出 true
console.log(isFalse); // 输出 false

布尔值常见的应用场景有：

条件判断：

在编程中，我们经常需要根据条件决定程序的执行路径。
例如，我们可以使用布尔值作为条件来控制if语句的执行：

let age = 25;

if (age >= 18) {
  console.log("成年人");
} else {
  console.log("未成年人");
}

在上面的例子中，如果age大于等于18，会输出"成年人"；否则，会输出"未成年人"。

逻辑运算：

布尔值还可以进行逻辑运算
- 常见的逻辑运算符有与（&&）、或（||）、非（!）等。以下是一些例子：

let x = true;
let y = false;

console.log(x && y); // 输出 false，逻辑与运算，只有两个操作数都为 true 时结果才为 true
console.log(x || y); // 输出 true，逻辑或运算，只有两个操作数都为 false 时结果才为 false
console.log(!x);     // 输出 false，逻辑非运算，将 true 取反为 false

返回值：

许多函数在特定条件下会返回布尔值。
- 例如，字符串比较函数startsWith()可以用于判断一个字符串是否以指定的子串开头，并返回布尔值：

let str = "Hello World";

console.log(str.startsWith("Hello")); // 输出 true
console.log(str.startsWith("World")); // 输出 false

在上述例子中
- startsWith()函数返回了一个布尔值来表示字符串str是否以"Hello"或"World"开头。

总结：

布尔值是一种简单的数据类型，它具有两个取值，即true和false。
- 布尔值常用于条件判断、逻辑运算和返回值等场景。

【6】对象

在JavaScript中，对象（Object）是一种复合数据类型，用于存储键值对（key-value）的集合。
- 对象可以包含任意数量的属性和方法，每个属性都由一个唯一的键（key）和对应的值（value）组成。
创建一个对象非常简单，可以使用花括号{}来定义一个空的对象，然后可以通过给对象添加属性来构建对象的结构和内容。例如：

var myObj = {};  // 创建一个空对象

// 添加属性
myObj.name = "John";
myObj.age = 30;

也可以在创建对象时直接定义属性和值：

var myObj = {
  name: "John",
  age: 30
};

对象可以使用点表示法或方括号表示法访问和操作属性值。例如：

console.log(myObj.name);  // 输出结果：John

// 方括号表示法
console.log(myObj["age"]);  // 输出结果：30

对象的属性值可以是任意类型的数据，包括基本类型（如字符串、数字、布尔值）和其他对象。
- 对象的属性也可以是函数，这样就可以定义对象的方法。例如：

var myObj = {
  name: "John",
  age: 30,
  greet: function() {
    console.log("Hello, my name is " + this.name);
  }
};

myObj.greet();  // 输出结果：Hello, my name is John

JavaScript对象还有许多常用的方法和功能
- 如Object.keys()用于获取对象的所有属性键
- Object.values()用于获取对象的所有属性值等。

对象是JavaScript中最重要的数据类型之一，它提供了一种方便的方式来组织和访问相关的数据和功能。

通过对象，可以将数据和相关操作封装在一起，实现更灵活和高效的编程。

【7】运算符

数字运算

在JavaScript中，有一系列用于进行数字运算的运算符。以下是常见的数字运算符：

加法运算符 +：用于将两个数相加，或将字符串拼接起来。

var a = 5;
var b = 3;
var sum = a + b; // 结果为 8

var str1 = "Hello";
var str2 = "World";
var greeting = str1 + " " + str2; // 结果为 "Hello World"

减法运算符 -：用于将一个数减去另一个数。

var a = 5;
var b = 3;
var difference = a - b; // 结果为 2

乘法运算符 *：用于将两个数相乘。

var a = 5;
var b = 3;
var product = a * b; // 结果为 15

除法运算符 /：用于将一个数除以另一个数。

var a = 6;
var b = 3;
var quotient = a / b; // 结果为 2

取模运算符 %：用于获取两个数相除的余数。

var a = 7;
var b = 3;
var remainder = a % b; // 结果为 1

自增运算符 ++：用于将一个数增加1。

var a = 5;
a++; // a的值变为 6

自减运算符 --：用于将一个数减少1。

var a = 5;
a--; // a的值变为 4

赋值运算

赋值运算符用于给变量赋值。以下是常见的赋值运算符：

简单赋值运算符 =：将右侧的值赋给左侧的变量。

var a = 5; // 将5赋给变量a

加法赋值运算符 +=：将右侧的值与左侧的变量相加，并将结果赋给左侧的变量。

var a = 5;
a += 3; // 相当于 a = a + 3，结果为8

类似地，还有减法赋值运算符 -=, 乘法赋值运算符 *=, 除法赋值运算符 /=, 取模赋值运算符 %=, 等等。

逻辑运算

逻辑运算符用于对布尔值进行操作和组合。以下是常见的逻辑运算符：

逻辑与运算符 &&：如果两个操作数都为真，结果为真；否则结果为假。

var a = true;
var b = false;
var result = a && b; // 结果为 false

逻辑或运算符 ||：如果两个操作数至少有一个为真，结果为真；否则结果为假。

var a = true;
var b = false;
var result = a || b; // 结果为 true

逻辑非运算符 !：对操作数进行取反操作，将真变为假，将假变为真。

var a = true;
var result = !a; // 结果为 false

逻辑运算符经常用于条件语句、循环和布尔逻辑的处理中，可以根据具体需求灵活运用。

【8】流程控制

if-else if-else 语句

if-else if-else 是一种用于根据条件选择性执行不同代码块的流程控制语句。它的语法结构如下：

if (条件1) {
    // 如果条件1为真，执行这里的代码块
} else if (条件2) {
    // 如果条件1为假，条件2为真，执行这里的代码块
} else {
    // 如果前面的条件都为假，执行这里的代码块
}

示例：

var num = 10;

if (num > ) {
    console.log("数字是正数");
} else if (num < ) {
    console.log("数字是负数");
} else {
    console.log("数字是零");
}
// 输出结果：数字是正数

switch case 语句

switch case 语句是一种根据不同的条件选择性执行代码块的流程控制语句。它的语法结构如下：

switch (表达式) {
    case 值1:
        // 当表达式的值等于值1时，执行此处的代码块
        break;
    case 值2:
        // 当表达式的值等于值2时，执行此处的代码块
        break;
    default:
        // 如果表达式的值与所有case的值都不匹配，执行此处的代码块
}

示例：

var day = "Tuesday";

switch (day) {
    case "Monday":
        console.log("今天是星期一");
        break;
    case "Tuesday":
        console.log("今天是星期二");
        break;
    case "Wednesday":
        console.log("今天是星期三");
        break;
    default:
        console.log("今天不是星期一、二或三");
}
// 输出结果：今天是星期二

for 循环

for 循环是一种在指定条件下重复执行代码块的流程控制语句。它的语法结构如下：

for (初始化; 条件; 递增/递减) {
    // 循环体中的代码会被重复执行
}

示例：

for (var i = ; i < 5; i++) {
    console.log(i);
}
// 输出结果： 1 2 3 4

while 循环

while 循环是一种在满足指定条件时重复执行代码块的流程控制语句。它的语法结构如下：

while (条件) {
    // 循环体中的代码会被重复执行
}

示例：

var i = ;
while (i < 5) {
    console.log(i);
    i++;
}
// 输出结果： 1 2 3 4

无论是for循环还是while循环，都可以根据实际需求来决定何时终止循环。在循环体中可以执行需要重复执行的操作，通过控制循环条件的变化或判断来控制循环的次数。

【9】三元运算

三元运算符是一种简洁的流程控制语句
- 用于根据条件从两个表达式中选择一个值。
它的语法结构如下：

条件 ? 表达式1 : 表达式2

其中，条件是一个可以求值为布尔类型的表达式。
- 如果条件为真，则返回表达式1的值；
- 如果条件为假，则返回表达式2的值。

示例：

var num = 10;
var result = (num > ) ? "正数" : "负数";
console.log(result);
// 输出结果：正数

在上述示例中，三元运算符 (num > ) ? "正数" : "负数" 的条件是 (num > )
- 如果条件为真，则返回字符串 "正数"；
- 如果条件为假，则返回字符串 "负数"。
- 结果被赋值给变量 result，并输出到控制台。
三元运算符可以代替简单的 if-else 语句，使代码更加简洁和易读。但需要注意的是，过多或过复杂的嵌套三元运算符可能会导致代码可读性下降，因此在使用时需要谨慎考虑。

【10】函数

函数是一段可重复执行的代码块，它接受输入参数，经过一系列操作和计算，最终产生输出结果。

函数通常被用来组织和封装可重复使用的代码，提高代码的可维护性和可读性。

（1）在编程中，函数有如下特点：

函数定义：

函数需要通过定义来声明。
函数定义包括函数名称、参数列表、函数体以及可选的返回值类型。

函数调用：

在代码中，通过函数名称和参数列表来调用函数。
函数调用会执行函数体内的代码，并可以返回一个值作为结果。

参数传递：

函数可以接受输入参数，这些参数用于传递数据给函数进行处理。
参数可以分为两种类型：
- 形式参数（函数定义时声明的参数）和实际参数（函数调用时传递的参数）。

返回值：

函数可以返回一个值作为结果，用于向调用者提供函数执行的输出。
- 返回值可以是任意数据类型，也可以是空（即没有返回值）。

（2）函数的使用可以带来以下好处：

代码重用：

函数将一段代码封装起来，可以被多次调用，避免了重复编写相同的代码。

模块化编程：

函数可以将大型程序分解为小的模块，提高代码的结构性和可读性。

代码抽象：

函数通过隐藏具体实现细节，仅暴露接口给外部使用，提供了一种高层次的抽象方式。

函数示例：

function add(a, b) {
  return a + b;
}

var result = add(2, 3);
console.log(result);
// 输出结果：5

在上述示例中，add 函数接受两个参数 a 和 b，并返回它们的和。
- 函数被调用时传入参数 2 和 3，计算结果为 5，并将结果赋值给变量 result，最后输出到控制台。

通过函数的定义和调用，我们可以实现代码的模块化、可重用和可扩展，提高编程效率和代码质量。

【11】箭头函数

箭头函数（Arrow Function）是ECMAScript 6引入的一种新的函数定义语法。
相比传统的函数定义方式，箭头函数提供了更简洁的语法和更便捷的使用方式。

（1）箭头函数的语法如下：

(parameters) => { 
   // 函数体 
}

其中，parameters 是函数的参数列表，可以包含零个或多个参数，多个参数使用逗号分隔。
- {} 中的部分是函数体，用来定义函数的执行逻辑。

（2）箭头函数还有以下几个特点：

函数体的简化：

如果函数体只包含一条语句，可以省略 {} 和 return 关键字，直接写表达式即可。
函数将自动返回该表达式的值。

隐式返回：

当函数体中只有一个表达式时，箭头函数会隐式返回该表达式的值，无需使用 return 关键字。

无绑定的 `this`：

箭头函数没有自己的 this 值，其内部的 this 始终指向外层作用域的 this 值。
这意味着在箭头函数内部不能通过 this 来访问对象自身的属性和方法，而是继承了外层函数的 this。

（3）箭头函数的示例：

// 无参数的箭头函数
const sayHello = () => {
  console.log("Hello!");
};

sayHello(); // 输出结果：Hello!

// 单个参数的箭头函数
const double = num => num * 2;

console.log(double(5)); // 输出结果：10

// 多个参数的箭头函数
const add = (a, b) => a + b;

console.log(add(2, 3)); // 输出结果：5

// 箭头函数的隐式返回
const multiply = (a, b) => a * b;

console.log(multiply(2, 3)); // 输出结果：6

需要注意的是，箭头函数适用于简单的函数逻辑和较短的代码块。

如果函数体较为复杂，涉及到多条语句或需要更灵活的作用域绑定，传统的函数定义方式可能更适合。

【12】常用对象

在JavaScript中，有许多常用对象可用于处理不同的数据类型、操作浏览器环境以及提供各种功能。以下是一些常见的JavaScript对象：

Object（对象）：

它是JavaScript中所有对象的基类。
对象是可变的键值对集合，用于存储和组织相关数据。

Array（数组）：

用于存储和操作有序的数据项列表。
数组可以包含任意类型的数据，并使用索引来访问和修改数据项。

String（字符串）：

表示一个字符序列。
字符串对象提供了许多用于处理和操作文本的方法，例如拼接、切割、替换等。

Number（数字）：

表示数值。
数字对象提供了许多用于处理数字的方法，例如数值转换、四舍五入、求平方根等。

Boolean（布尔值）：

表示真（true）或假（false）的值。
布尔对象提供了逻辑运算和条件判断所需的方法。

Date（日期）：

用于处理日期和时间。
日期对象提供了对日期和时间进行格式化、比较和计算的方法。

Math（数学）：

提供了许多常用的数学函数和常量
例如三角函数、指数函数、对数函数等。

RegExp（正则表达式）：

用于匹配和操作字符串的模式。
正则表达式对象提供了一组方法，用于在文本中进行模式匹配、替换等操作。

Function（函数）：

是可执行的代码块，可以被调用和传递参数。
函数对象提供了一些属性和方法，用于自定义和操作函数的行为。

Error（错误）：

用于捕捉和处理异常（错误）的对象。
它包含有关发生错误的信息，如错误类型和错误消息。

Promise（承诺）：

用于处理异步操作的对象。
Promise对象表示一个异步操作的最终完成或失败，并返回相应的结果或错误。

JSON（JavaScript对象标记）：

是一种用于数据交换的轻量级文本格式。
JSON对象提供了用于解析和序列化JSON数据的方法。

其他对象，

此外，还有一些与浏览器环境相关的对象，如Window（窗口）、Document（文档）、HTMLElement（HTML元素）等，用于与页面交互和操作DOM。

【13】自定义对象

在JavaScript中，您还可以创建自定义对象来满足特定需求。
- 自定义对象允许您组织和封装相关的数据和功能。
以下是创建自定义对象的一种常见方式：

// 使用构造函数创建自定义对象
function Person(name, age) {
  this.name = name;
  this.age = age;
}

// 使用原型方法为自定义对象添加功能
Person.prototype.sayHello = function() {
  console.log("Hello, my name is " + this.name);
};

// 创建对象实例
var person1 = new Person("John", 25);
var person2 = new Person("Alice", 30);

// 访问对象属性
console.log(person1.name); // 输出："John"

// 调用对象方法
person2.sayHello(); // 输出："Hello, my name is Alice"

在上述示例中，我们使用构造函数Person创建了一个自定义对象。
- 构造函数允许我们传入参数，并将其赋值给对象的属性。
- 然后，我们使用原型方法sayHello为自定义对象添加一个方法。
- 最后，我们通过实例化对象并访问属性和调用方法来使用自定义对象。

自定义对象的优势在于它们允许您根据应用程序的需求来定义数据结构和行为，并以交互的方式使用它们。

可以根据需要添加属性和方法，以满足复杂的业务逻辑。

通过自定义对象，可以更好地组织和管理代码，并使其更具可扩展性和可维护性。

【14】日期对象

JavaScript中的日期对象（Date object）用于处理日期和时间。
- 它提供了处理日期、时间和相关操作的方法。
- 以下是一些常见的日期对象用法：

（1）创建日期对象：

您可以使用new Date()来创建当前日期和时间的对象实例，或者使用特定日期和时间参数来创建指定的日期对象。

// 创建当前日期和时间的对象实例
var currentDate = new Date();

// 创建指定日期和时间的对象实例
var specificDate = new Date(2023, 6, 5, 10, 30, ); // 参数依次为年、月（从开始计数）、日、时、分、秒

（2）获取日期和时间信息：

您可以使用日期对象的方法获取日期和时间的各个部分。

var date = new Date();

var year = date.getFullYear(); // 获取年份（四位数）
var month = date.getMonth(); // 获取月份（表示一月，11表示十二月）
var day = date.getDate(); // 获取日期（月中的某一天）
var hours = date.getHours(); // 获取小时
var minutes = date.getMinutes(); // 获取分钟
var seconds = date.getSeconds(); // 获取秒数

（3）设置日期和时间：

您可以使用日期对象的方法设置日期和时间的各个部分。

var date = new Date();

date.setFullYear(2024); // 设置年份
date.setMonth(8); // 设置月份（表示一月，11表示十二月）
date.setDate(15); // 设置日期（月中的某一天）
date.setHours(18); // 设置小时
date.setMinutes(45); // 设置分钟
date.setSeconds(30); // 设置秒数

（4）格式化日期和时间：

日期对象没有内置的格式化方法，但是您可以使用各种方法将日期和时间格式化为所需的字符串格式。

var date = new Date();

var formattedDate = date.toLocaleDateString(); // 格式化为本地日期字符串
var formattedTime = date.toLocaleTimeString(); // 格式化为本地时间字符串
var formattedDateTime = date.toLocaleString(); // 格式化为本地日期和时间字符串

以上仅是日期对象的一些基本用法示例。

JavaScript提供了更多操作日期和时间的方法，例如比较日期、计算日期间隔等。

有关更详细的信息，请查阅JavaScript文档。

【15】JSON对象

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，常用于在客户端和服务器之间传输数据。
在JavaScript中，JSON对象用于解析和序列化JSON数据。

JSON对象提供了以下常用方法：

`JSON.parse()`：

将JSON字符串解析为JavaScript对象或值。

var jsonStr = '{"name": "John", "age": 30, "city": "New York"}';
var jsonObj = JSON.parse(jsonStr);
console.log(jsonObj.name); // 输出：John
console.log(jsonObj.age); // 输出：30
console.log(jsonObj.city); // 输出：New York

`JSON.stringify()`：

将JavaScript对象或值序列化为JSON字符串。

var jsonObj = {name: "John", age: 30, city: "New York"};
var jsonStr = JSON.stringify(jsonObj);
console.log(jsonStr); // 输出：{"name":"John","age":30,"city":"New York"}

异常处理：

当使用JSON.parse()解析JSON字符串时，如果字符串不是有效的JSON格式，将抛出异常。
可以使用try...catch语句来捕获异常并进行处理。

 try {
     var invalidJsonStr = '{name: "John", age: 30}';
     var jsonObj = JSON.parse(invalidJsonStr);
 } catch (error) {
     console.log('Invalid JSON format:', error.message);
 }

当使用JSON.stringify()序列化JavaScript对象时，如果对象包含无法转换为JSON格式的值（如函数、循环引用等），将抛出异常。
- 可以通过传递一个转换函数作为第二个参数来处理这些情况。

 var objWithFunction = {name: "John", sayHello: function() {console.log("Hello");}};
 var jsonStr = JSON.stringify(objWithFunction, function(key, value) {
     if (typeof value === 'function') {
         return value.toString(); // 将函数转换为字符串
     }
     return value;
 });
 console.log(jsonStr);

【16】RegExp对象

正则表达式（Regular Expression）是一种用来匹配、查找和操作字符串的工具。
在JavaScript中，我们可以使用RegExp对象来创建和操作正则表达式。

RegExp对象提供了以下常用方法和属性：

`test()`：

测试字符串是否匹配正则表达式，并返回布尔值。

var str = "Hello, world!";
var pattern = /Hello/;
var result = pattern.test(str);
console.log(result); // 输出：true

`exec()`：

在字符串中搜索匹配正则表达式的内容，并返回结果数组。
- 如果没有匹配的内容，则返回null。

var str = "Hello, world!";
var pattern = /l+/g;
var result = pattern.exec(str);
console.log(result); // 输出：["ll"]

`match()`：

在字符串中搜索匹配正则表达式的内容，并返回结果数组。
- 如果没有匹配的内容，则返回null。

var str = "Hello, world!";
var pattern = /l+/g;
var result = str.match(pattern);
console.log(result); // 输出：["ll", "l"]

`search()`：

在字符串中搜索匹配正则表达式的内容，并返回第一个匹配的索引位置。
- 如果没有匹配的内容，则返回-1。

var str = "Hello, world!";
var pattern = /lo/;
var result = str.search(pattern);
console.log(result); // 输出：3

`replace()`：

将匹配正则表达式的内容替换为指定的字符串，并返回新的字符串。

var str = "Hello, world!";
var pattern = /o/g;
var replacement = "a";
var result = str.replace(pattern, replacement);
console.log(result); // 输出：Hella, warld!

`flags`：

返回正则表达式的修饰符标志字符串。

var pattern = /hello/gi;
console.log(pattern.flags); // 输出：gi

RegExp对象还有其他一些方法和属性用于对正则表达式进行操作和获取相关信息，如toString()方法用于将正则表达式转换为字符串。
正则表达式是一种强大且灵活的工具，能够处理字符串的模式匹配和替换。在JavaScript中，可以使用RegExp对象来创建、测试和操作正则表达式。

【17】math对象

Math对象是JavaScript中的内置对象之一，它提供了执行数学运算的方法和属性。
- Math对象不需要实例化，我们可以直接使用其中的方法和属性。

下面是Math对象的一些常用方法：

`Math.abs()`：

返回一个数的绝对值。

var num = -5.5;
var absoluteValue = Math.abs(num);
console.log(absoluteValue); // 输出：5.5

`Math.ceil()`：

向上取整，返回大于或等于给定数字的最小整数。

var num = 4.2;
var roundedUp = Math.ceil(num);
console.log(roundedUp); // 输出：5

`Math.floor()`：

向下取整，返回小于或等于给定数字的最大整数。

var num = 4.8;
var roundedDown = Math.floor(num);
console.log(roundedDown); // 输出：4

`Math.round()`：

四舍五入，返回给定数字的四舍五入整数。

var num = 4.5;
var rounded = Math.round(num);
console.log(rounded); // 输出：5

`Math.max()`：

返回一组数中的最大值。

var maxNumber = Math.max(10, 5, 8);
console.log(maxNumber); // 输出：10

`Math.min()`：

返回一组数中的最小值。

var minNumber = Math.min(10, 5, 8);
console.log(minNumber); // 输出：5

`Math.pow()`：

返回一个数的指定次幂。

var power = Math.pow(2, 3);
console.log(power); // 输出：8

`Math.sqrt()`：

返回一个数的平方根。

var squareRoot = Math.sqrt(16);
console.log(squareRoot); // 输出：4

Math对象还包含其他一些方法，如三角函数、对数函数、随机数生成等。
- 可以根据需要查阅相关文档来使用。
除了方法，Math对象还提供了一些常用的数学常量
- 例如Math.PI表示圆周率π，Math.E表示自然对数的底数e。
Math对象为进行数学运算提供了方便和准确性，可以在各种数学计算中使用。

posted @ 2023-07-05 10:27 Chimengmeng 阅读(12) 评论(0) 编辑收藏举报

刷新页面返回顶部

Dream-Z

Hope Your Life Is Worth It !

【11.0】前端基础之阶段性复习

【11.0】前端基础之阶段性复习

【一】HTML

【1】什么是HTML

【2】web服务器的本质

【3】HTML文档结构

【4】标签

（1）标题

（2）u/i/s/b

（3）hr/br

（4）段落：p

【5】标签的分类

（1）单标签/双标签

单标签：

双标签：

（2）块级标签/行内标签

块级~标签（Block-level Tags）：

行内标签（Inline Tags）：

【6】特殊符号

【7】常用标签

（1）<div> 标签是

（2）<span> 标签

（3）a链接标签

（4）img图片标签

【8】标签比较重要的两个属性

id属性：

class属性：

总结：

【9】列表标签

无序列表：

有序列表：

定义列表：

【10】表格标签

【11】form表单

action（动作）：控制数据提交的路径。

method（方法）：控制数据提交的方式。

enctype（编码类型）：控制数据提交的编码格式。

【12】input标签

【13】select标签

默认单选：

多选模式：

<option> 元素：

value 属性：

文本内容：

默认选中：

【14】textarea标签

rows 和 cols 属性：

默认内容：

获取输入的文本：

【15】label标签

用法：

for 属性：

嵌套：

【16】补充

【二】CSS

【1】什么是CSS

【2】注释语法

单行注释：

多行注释：

【3】引入方式

<style> 标签：

<link> 标签：

行内样式（Inline Style）：

【4】如何查找标签

【5】基本选择器

（1）id选择器

（2）class选择器

（3）标签选择器

（4）通用选择器

【6】组合选择器

【7】属性选择器

【8】不同选择器之间可以并用、混用

【9】伪类选择器

【10】伪元素选择器

【11】选择器的优先级

【12】字体属性相关

【13】文本属性相关

【14】背景属性相关

（1）`<div>` 标签是

（2）`<span>` 标签

`id`属性：

`class`属性：

`action`（动作）：控制数据提交的路径。

`method`（方法）：控制数据提交的方式。

`enctype`（编码类型）：控制数据提交的编码格式。

`<option>` 元素：

`value` 属性：

`rows` 和 `cols` 属性：

`for` 属性：

`<style>` 标签：

`<link>` 标签：

`<script>`标签：

`var`：

`let`：

`null`

`undefined`