html入门介绍

# html-learn **Repository Path**: n111222_1_0/html-learn ## Basic Information - **Project Name**: html-learn - **Description**: 个人学习html记录 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2024-12-17 - **Last Updated**: 2024-12-28 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # html-learn #### 介绍个人学习html记录 # HTML 排版：基本的排版常用的css spa : single page application 单页应用 - 盒子模型： div+css - flex 布局两个工具： - hbuilder - visual studio code ## 介绍 - HTML 指的是超文本标记语言 (Hyper Text Markup Language) - XML 可扩展的标记语言描述数据的 - JSON 是一种轻量级的数据结构 (特殊的) - WXML 微信标记语言标记语言: ``` <元素> ``` 服务器： - apache - nginx - tomcat servlet容器（服务器+容器） ## 标签分类 - 单闭合标签是指起始标签和结束标签同时存在的标签 - 自闭合标签使用/（结尾斜线）替代，直接写在起始标签的尾部 ## head标签 meta 元数据 ``` ``` > - **width**：设置视口的宽度。通常设置为`device-width`，这意味着视口的宽度将与设备的屏幕宽度一致。 > - **initial-scale**：设置页面初始加载时的缩放级别。值为1.0表示页面以其原始尺寸显示，不进行缩放。 SEO优化 ```html html入门介绍 ``` ## 图片img ```

``` > 属性: > > - src 图片的地址 > > > 1. 引用网络地址（页面元素布局很少用） > > > > 2. 开发时相对地址 > > > > ./ 代表当前目录一般可以省略 > > > > ../ 代表上级目录 > > > > ../../ 表示上两级目录，以此类推。 > > > > 3. 绝对地址不建议使用 ## 超连接 ``` 内容 ``` **target属性** ![sss](./assets/Snipaste_2024-12-17_14-46-11.png) 自定义窗口 ``` hello页面在目标窗口显示
``` 锚点 ```html 目标 ``` ## 块级元素块级元素（block element）在浏览器中占据整行，并排斥其它元素与其位于同一行。也就是说，块级元素的宽度是 100%。常见的块级元素如下表： | 块级元素 | 说明 | | -------- | ---------------------------------- | | **div** | 最典型的块元素 | | p | 表示段落在使用富文本编辑框时使用 | | h1-h6 | 表示1-6级标题（默认加粗） | | br | 表示换行 | | **ol** | 有序列表 | | **ul** | 无序列表 | ### 列表 * ol 是 order list 的简称，表示有序列表。它可以为列表的每一项进行编号，默认从数字 1 开始；可以同过更改属性type的值显示不同的效果,type值: 1 A I a i * li 是 list item 的简称，表示列表的每一项。 > 提示：在使用时，它一般和配合使用，不会单独出现。而且不建议在中直接使用除之外的其他 * ul 是 unordered list 的简称，表示无序列表。默认情况下，无序列表的每一项都使用●符号表示；可以更改属性type值( circle disc square) ## 行内元素行内元素又称内联元素（inline block）。在浏览器中可以与其它行内元素共占一行，只有当多个元素的总宽度大于浏览器的宽度时，才会换行显示。常见的行内元素如下表： | 行内元素 | 说明 | | ---------- | ------------ | | **a** | 超链接 | | **span** | 常用行级 | | strong | 加粗，强调 | | b | 加粗，不强调 | | em | 斜体，强调 | | i | 斜体，不强调 | | **img** | 图片 | | **input** | 输入框 | | **select** | 下拉列表 | 特点： span 通过样式设置width height 无效备注: 1. 块级元素的宽度是 100%，在浏览器中默认独占一行。 2. 行内元素在浏览器中默认与其它行内元素共占一行。只有当多个行内元素的总宽度大于浏览器的宽度时，才会换行显示。 3. 块级元素内部可以嵌套块级元素或行内元素。 4. 建议行内元素里面只嵌套行内元素。 ## form表单(了解) ### method 请求的方法 > 分两类： > > * get 请求默认的 > > > 特点： > > > > 1. 它会将请求参数拼接在地址栏 url?参数名=参数值&参数名=参数值... > > > > 2. 不安全因为参数显示在地址栏 > > > > 3. 请求url长度是有限制的 > > > > ![image-20241217162735331](.\assets\image-20241217162735331.png) > > * post请求 > > > 特点： > > > > 1. 参数不会显示在地址栏 > > 2. 参数以form data 表单数据形式传递 > > 3. 参数长度不限制 ### enctype属性 > 1. 默认值 application/x-www-form-urlencoded 正常的参数传递 > 2. multipart/form-data 说明参数以二进制形式传递多用于文件上传 > 3. text/plain 纯文本（一般用不到了解既可） `enctype` 属性是 `form` 元素的一个属性，用于指定表单数据在提交时应该如何编码。这个属性特别重要，尤其是当你的表单包含文件上传时。`enctype` 属性的值定义了在表单数据被发送到服务器之前如何对数据进行编码。以下是 `enctype` 属性可以取的一些常见值： 1. **`application/x-www-form-urlencoded`**： - 这是默认值。表单数据被编码为键值对，键和值之间用 `=` 连接，键值对之间用 `&` 连接。这种编码方式适用于大多数不包含文件上传的表单。 2. **`multipart/form-data`**： - 当表单包含 `` 时，应该使用这个值。这种编码类型允许表单数据被编码为一条消息，消息中的每一部分都是独立的，可以包含不同类型的数据（如文本、二进制文件等）。这是文件上传时必须使用的编码类型。 3. **`text/plain`**： - 表单数据被编码为纯文本，不进行任何特殊字符的编码处理。这种编码类型不常用，因为它不支持键值对的格式，也不适用于文件上传。通常，如果你的表单不包含文件上传，可以不设置 `enctype` 属性，因为默认的 `application/x-www-form-urlencoded` 已经足够。但如果表单中包含文件上传，那么必须将 `enctype` 设置为 `multipart/form-data`，以确保文件数据能够正确地被发送到服务器。例如，如果你有一个包含文件上传的表单，你可以这样设置 `enctype`： html ```html ``` * target 属性表单提交后新的请求地址在哪里显示（参照a连接的值：_blank _top _self _parent 自定义框架(iframe)名称） ## 表单元素 ### input重要的属性 * id 唯一标识如dom操作引用 * name 是名称，在表单中做为参数传递用 * value 值 ![image-20241217173335455](.\assets\image-20241217173335455.png) 单选、复选 * checked 代表选中 ### select下拉列表 ![image-20241217174315801](.\assets\image-20241217174315801.png) ### textarea重要属性 ![image-20241217174404283](.\assets\image-20241217174404283.png) ### 常用的表单元素： 1. **`

`**： - 定义表单，包含表单控件和数据。 2. **``**： - 用于收集用户输入的数据，可以有多种类型，如： - `text`：单行文本框。 - `password`：密码输入框，输入内容会被隐藏。 - `radio`：单选按钮。 - `checkbox`：复选框。 - `submit`：提交按钮。 - `reset`：重置按钮，将表单数据重置为初始值。 - `file`：文件上传控件。 - `hidden`：隐藏的输入字段，通常用于存储数据，但不显示给用户。 - `image`：图像按钮。 - `button`：可定义行为的按钮。 3. **`

`**：
   - 多行文本输入控件。
4. **`<select>`**：
   - 下拉选择菜单，用于从多个选项中选择一个。
5. **`<option>`**：
   - 包含在`<select>`元素中，表示一个可选选项。
6. **`<button>`**：
   - 可自定义的按钮，可以触发JavaScript事件。
7. **`<label>`**：
   - 为`<input>`、`<textarea>`或`<select>`元素定义标签，提高可访问性。
8. **`<fieldset>`**：
   - 将表单中相关的元素分组。
9. **`<legend>`**：
   - 为`<fieldset>`元素定义标题。
10. **`<datalist>`**：
    - 为`<input>`元素提供一组预定义的选项。
11. **`<optgroup>`**：
    - 将`<option>`元素分组到`<select>`元素中。
12. **`<output>`**：
    - 显示表单控件的结果，可以用于显示计算结果。
13. **`<progress>`**：
    - 显示任务的进度。
14. **`<meter>`**：
    - 显示已知范围的度量。

这些元素可以组合使用，创建出功能丰富的表单，以收集和提交用户数据。

+++

# CSS

## 100%高设置

* 方式一   如果一个元素要想100%高 有效  前提是它的所有父元素100%高   （不太好）

* 方式二

> * vh  view height     1vh  页面高度的1%  
  > * vw  view width      1vw 页面宽度的1%

## 选择器

要求掌握的选择器：

* .*class*    类选择器
* #id  id选择器
* element  元素选择器
* element   element   包含选择器
* element,element ,element    多个选择器同时定义

超连接特定选择器：

* :link   未访问连接的颜色  （很少用）
* :visited 访问过连接的颜色 
* :active 活动连接的颜色（很少用）
* :hover  鼠标悬停的颜色

伪元素选择器：

> CSS伪元素选择器是一种特殊的选择器，用于选择元素的特定部分并对其应用样式

* ::before  所有元素之前插入内容   li::before  li元素前面插入内容 
* ::after  所有元素之后插入内容  
* ::selection  所有选择内容的样式

## 外边距

![image-20241218115517181](assets/image-20241218115517181.png)

CSS Margin (外边距)属性定义元素周围的空间。CSS Margin 属性接受任何长度单位、百分数值甚至负值。为了缩减代码，可以在一个属性中指定所有外边距属性。

| 属性 | 描述                                       |
| ---- | ------------------------------------------ |
|      | 简写属性。在一个声明中设置所有外边距属性。 |
|      | 设置元素的下外边距。                       |
|      | 设置元素的左外边距。                       |
|      | 设置元素的右外边距。                       |
|      | 设置元素的上外边距。                       |

margin简写：

margin: 25px 50px 75px 100px ;   依次代表上右下左 边距

margin: 25px 50px 75px;   依次代表上边距  左右边距  下边距

margin: 25px 50px;     依次代表上下边距  左右边距

margin: 25px 代表四个边距

## 内边距

CSS padding 属性用于在任何定义的边界内的元素内容周围生成空间。通过 CSS，您可以完全控制内边距（填充）。有一些属性可以为元素的每一侧（上、右、下和左侧）设置内边距。

![image-20241218151341638](assets/image-20241218151341638.png)

padding简写：

padding: 25px 50px 75px 100px ;   依次代表上右下左 内边距

padding: 25px 50px 75px;   依次代表上内边距  左右内边距  下内边距

padding: 25px 50px;     依次代表上下内边距  左右内边距

padding: 25px 代表四个内边距

## 边框

重要的三个属性：

* style 样式  如 实线 、虚线、没有线  
* color 颜色  
* 宽度  如1px

CSS border 属性允许您指定元素边框的样式、宽度和颜色。边框属性：

**CSS 边框样式**

![image-20241218151251735](assets/image-20241218151251735.png)

border-style 属性指定要显示的边框类型。允许以下值：

- **dotted - 定义点线边框**
- **dashed - 定义虚线边框**
- **solid - 定义实线边框**
- double - 定义双边框
- groove - 定义 3D 坡口边框。效果取决于 border-color 值
- ridge - 定义 3D 脊线边框。效果取决于 border-color 值
- inset - 定义 3D inset 边框。效果取决于 border-color 值
- outset - 定义 3D outset 边框。效果取决于 border-color 值
- **none - 定义无边框**
- hidden - 定义隐藏边框

border-style 属性可以设置一到四个值（用于上边框、右边框、下边框和左边框）。

## 文本属性

常用：

* color  字体颜色    颜色值组成是:rgb  r g b 每一个颜色值的范围是0-255  ，常用使用 16进制表示  如:ff   白色：#ffffff   黑色#000000  #333 #666 #999 #ccc 
* line-height   行高  通过设置它实现垂直居中 
* text-align  文本水平对齐方式  左   右  中    
* text-decoration  文本修饰 常用： 1.超连接  去掉下划线   2. 新旧价格比较   旧价格删除线
* word-spacing =nowrap  不换行

阴影：（熟悉 ）

* text-shadow  文本阴影

* box-shadow  容器阴影

>  4个值：
  >
  >  1. 水平移动的距离  正值向右移动 负值向左移动
  >
  >  2. 垂直方向偏移  正值向下 负值向上 
  >  3. 模糊半径 约大约模糊
  >  4. 阴影颜色

## 文本溢出

###   单行省略

~~~css
/*
				  单行文本溢出 
				*/
				/*不换行*/
				white-space: nowrap;
				/*  内容溢出 容器放不下 
				  hidden: 隐藏 
				  scroll: 产生滚动条  滚动
				  visible: 可见的
				  
				*/
				overflow: hidden;
				/*
			     溢出的文本处理：
				 clip ： 剪切 
				 ellipsis: 显示省略号
			   */
				text-overflow: ellipsis; 
~~~

### 多行溢出

~~~css
                 /*
				   多行文本溢出 
				*/
				display: -webkit-box;
				-webkit-box-orient: vertical;
				/*限制显示的行数*/
				-webkit-line-clamp: 2;
				overflow: hidden;
				text-overflow: ellipsis; 
~~~

### 字体属性

* font-family 字体 如 宋体
* font-size  字体大小   浏览器默认16px
* font-weight 字体加粗 bold=700
* font-style  字体样式  如斜体

## display属性

常用值：

* block  将元素转换为  块元素 
* inline 将元素转换为行内元素  
* inline-block  行内块  设置 宽高  且   不 会独占一行

在CSS中，`display` 属性的几个常用值包括：

1. **`block`**
   - 使元素以块级元素显示，独占一行。
   - 常用于布局中需要独占空间的元素，如 `<div>`, `<p>`, `<h1>` 等。

2. **`inline`**
   - 使元素以内联元素显示，与其他内联元素并排显示在同一行。
   - 常用于文本或需要并排显示的元素，如 `<span>`, `<a>`, `<img>` 等。

3. **`inline-block`**
   - 结合了 `inline` 和 `block` 的特性，元素以内联的方式显示，但可以设置宽高。
   - 常用于需要设置尺寸的行内元素，例如按钮或图标。

4. **`none`**
   - 元素不会被显示，也不占据空间。
   - 常用于隐藏元素或通过CSS控制元素的可见性。

5. **`flex`**
   - 使元素成为弹性容器，使用Flexbox布局。
   - 常用于创建响应式布局和复杂布局结构。

6. **`grid`**
   - 使元素成为网格容器，使用CSS Grid布局。
   - 常用于创建二维布局结构，如网格或棋盘布局。

7. **`table`**
   - 使元素表现得像HTML表格。
   - 常用于创建自定义表格布局。

8. **`table-row`**
   - 使元素表现得像表格中的一行。
   - 常用于创建自定义表格布局。

9. **`table-cell`**
   - 使元素表现得像表格中的一个单元格。
   - 常用于创建自定义表格布局。

这些值覆盖了大多数布局需求，从传统的块级和内联布局到现代的Flexbox和Grid布局。随着前端开发技术的发展，`flex` 和 `grid` 变得越来越重要，因为它们提供了更强大的布局控制能力。

## 边框圆角弧度

* **`border-radius`** 设置4个角的圆角 
* border-top-left-radius  左上角
* border-top-right-radius 右上角
* border-bottom-left-radius 左下角
* border-bottom-right-radius  右下角

## 鼠标指针形状

* cursor: pointer;  手形

## float属性

值：

* left 左浮动
* right 右浮动

与float属性相关的：

clear:清除浮动

* left  清除左浮动
* right 清除右浮动
* both 两边都清除

## 定位

position:

常用值：

* relative 相对定位

* absolute 绝对定位

* fixed 固定位置

left  top right  bottom

### [定位类型](https://developer.mozilla.org/zh-CN/docs/Web/CSS/position#定位类型)

- **定位元素**（positioned element）是其[计算后](https://developer.mozilla.org/zh-CN/docs/Web/CSS/computed_value)位置属性为 `relative`, `absolute`, `fixed` 或 `sticky` 的一个元素（换句话说，除`static`以外的任何东西）。
- **相对定位元素**（relatively positioned element）是[计算后](https://developer.mozilla.org/zh-CN/docs/Web/CSS/computed_value)位置属性为 `relative`的元素。
- **绝对定位元素**（absolutely positioned element）是[计算后](https://developer.mozilla.org/zh-CN/docs/Web/CSS/computed_value)位置属性为 `absolute` 或 `fixed` 的元素。
- **粘性定位元素**（stickily positioned element）是[计算后](https://developer.mozilla.org/zh-CN/docs/Web/CSS/computed_value)位置属性为 `sticky` 的元素。

## Flex布局

### 容器属性

#### lex-direction属性

`flex-direction`属性决定主轴的方向（即项目的排列方向）。

- `row`（默认值）：主轴为水平方向，起点在左端。
- `row-reverse`：主轴为水平方向，起点在右端。
- `column`：主轴为垂直方向，起点在上沿。
- `column-reverse`：主轴为垂直方向，起点在下沿。

#### flex-wrap

默认情况下，项目都排在一条线（又称"轴线"）上。`flex-wrap`属性定义，如果一条轴线排不下，如何换行。

* `nowrap`（默认）：不换行。
* `wrap`：换行，第一行在上方。
* `wrap-reverse`：换行，第一行在下方。

#### flex-flow

`flex-flow`属性是`flex-direction`属性和`flex-wrap`属性的简写形式，默认值为`row nowrap`。

#### justify-content

`justify-content`属性定义了项目在主轴上的对齐方式。

- `flex-start`（默认值）：左对齐
- `flex-end`：右对齐
- `center`： 居中
- `space-between`：两端对齐，项目之间的间隔都相等。
- `space-around`：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

#### align-items

- `flex-start`：交叉轴的起点对齐。
- `flex-end`：交叉轴的终点对齐。
- `center`：交叉轴的中点对齐。
- `baseline`: 项目的第一行文字的基线对齐。
- `stretch`（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

`align-items`属性定义项目在交叉轴上如何对齐。

#### align-content

`align-content`属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

- `flex-start`：与交叉轴的起点对齐。
- `flex-end`：与交叉轴的终点对齐。
- `center`：与交叉轴的中点对齐。
- `space-between`：与交叉轴两端对齐，轴线之间的间隔平均分布。
- `space-around`：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
- `stretch`（默认值）：轴线占满整个交叉轴。

## 移动页面

核心js

~~~javascript
(function(doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function() {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            if (clientWidth >= 750) {
                docEl.style.fontSize = '100px';
            } else {
                docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
            }
        };

if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
~~~

单位rem   页面750px=7.5rem

# JavaScript

> typescript   是js的超级

## 变量声明

![image-20241220140742754](assets/image-20241220140742754.png)

### var

![image-20241220140808032](assets/image-20241220140808032.png)

### let

![image-20241220140831933](assets/image-20241220140831933.png)

### const

![image-20241220140847609](assets/image-20241220140847609.png)

## 数据类型

### 基本类型

* 字符串  string  
* 数字类型 number  
* 布尔类型 true /false  
* null  空 
* undefined  未定义  
* Symbol  独一无二

#### 数字类型

常用方法：

* Number.isNaN  可以用全局函数isNaN 替换    判断给定的值是否是数字  是数字返回true  否则返回false

* parseInt(x)  将x转换为整数  如果包含小数，取整

> 指定基数，既x的值是用几进制表示,如:
  >
  > * x 是二进制  11   parseInt(x,2)   最终以10进制结果输出 3
  > * x是  16进制  0x11   parseInt(x,16)  终以10进制结果输出 17

* **`parseFloat`**  将字符串转换成小数

实例方法：

* toFixed(d)  d代表小数的位数

### 引用类型

* 对象  
* 函数
* 数组

## 对象

对象是一种属性的无序集合 ，里面是key:value对（属性值对）  ，属性与值之间用:  隔开，多个属性之是用,隔开， 属性通常是字符串类型，值可以是js中的任意类型。

### 创建方法

#### 对象常量值创建

~~~javascript
let o={} ; //  {}  对象常量 值
//可以在创建对象时，指明对象的属性，也可以动态增加属性
~~~

#### Object创建

~~~javascript
let o=new Object(); // 等价于{} 
~~~

#### Object.create()创建（了解）

~~~javascript
let o=Object.create(o);//在o的基础上创建 继承o对象 
~~~

属性的引用：

* .   运算符来引用    对象名.属性
* [] 运算符来引用，支持变量   （变量的值是属性名）

静态方法和静态属性的区别？

值的类型不同，静态方法的值是function ,静态属性的值是非function

### 原型

![image-20241220174533733](assets/image-20241220174533733.png)

## 函数

函数是一段可重复调用的js代码。

定义方式：

* 函数声明    function  函数名(参数,...)  ()
* 函数表达式  let f=function(){}
* 函数自调用  (function(){   })();

### 闭包

1. 闭包的形成
   - 当一个函数内部定义了另一个函数，并且内部函数引用了外部函数的变量时，就形成了一个闭包。
   - 内部函数可以访问外部函数的变量，即使外部函数已经执行完毕并返回。

~~~javascript
		(function() {
				//声明变量
				let x = 1;

//内部函数 可以访问外部函数的变量
				function f1() {
					console.log("f1>", x)
				}

function f2() {
					console.log("f2>", x)
				}

f1();
				f2();
			})();
~~~

### 箭头函数

* 箭头函数的目的是不允许产生自己的this作用域(词法作用域)
* 箭头函数表达式的语法比普通函数表达式更简洁

形式：

~~~javascript
//多参数
(param1, param2, …, paramN) => { statements }
// 等价于:  => { return expression; }
(param1, param2, …, paramN) => expression  
       
 
// 如果只有一个参数，圆括号是可选的:
(singleParam) => { statements }  
singleParam => { statements }
 
// 无参数的函数需要使用圆括号:
() => { statements }

// 返回对象字面量时应当用圆括号将其包起来:
params => ({foo: bar})

// 支持 Rest parameters 和 default parameters:
(param1, param2, ...rest) => { statements }  // 使用...rest  代表剩余参数
(param1 = defaultValue1, param2, …, paramN = defaultValueN) => { statements } //支付默认值

~~~

## 数组

![image-20241223103436793](/assets/image-20241223103436793.png)

常用方法：

* **`push()`** 方法将指定的元素添加到数组的末尾，并返回新的数组长度
* **`pop()`** 方法从数组中删除**最后一个**元素，并返回该元素的值。此方法会更改数组的长度。
* **`unshift()`** 方法将指定元素添加到数组的开头，并返回数组的新长度。
* **`shift()`** 方法从数组中删除**第一个**元素，并返回该元素的值。此方法更改数组的长度。
* **`concat()`** 方法用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。
* **`slice()`** 方法返回一个新的数组对象，这一对象是一个由 `start` 和 `end` 决定的原数组的[浅拷贝](https://developer.mozilla.org/zh-CN/docs/Glossary/Shallow_copy)（包括 `start`，不包括 `end`），其中 `start` 和 `end` 代表了数组元素的索引。原始数组不会被改变
* **`splice()`** 方法[就地](https://zh.wikipedia.org/wiki/原地算法)移除或者替换已存在的元素和/或添加新的元素。
* **`join()`** 方法将一个数组（或一个[类数组对象](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Indexed_collections#使用类数组对象)）的所有元素连接成一个字符串并返回这个字符串，用逗号或指定的分隔符字符串分隔。如果数组只有一个元素，那么将返回该元素而不使用分隔符。
* **`forEach()`** 方法对数组的每个元素执行一次给定的函数。

了解：

* **`fill()`** 方法用一个固定值填充一个数组中从起始索引（默认为 `0`）到终止索引（默认为 `array.length`）内的全部元素。它返回修改后的数组。
* **`indexOf()`** 方法返回数组中第一次出现给定元素的下标，如果不存在则返回 -1。

回调函数： 作为参数传递的函数

拷贝：

* 对象的**浅拷贝**是属性与拷贝的源对象属性共享相同的[引用](https://developer.mozilla.org/zh-CN/docs/Glossary/Object_reference)（指向相同的底层值）的副本。因此，当你更改源对象或副本时，也可能导致另一个对象发生更改。
* 对象的**深拷贝**是指其属性与其拷贝的源对象的属性不共享相同的引用（指向相同的底层值）的副本。因此，当你更改源或副本时，可以确保不会导致其他对象也发生更改；也就是说，你不会无意中对源或副本造成意料之外的更改

# 知识点

## 我曾经需要翻找的知识点

>
>
>

+++

## 常用的display属性

以下是一些常用 `display` 属性值的详细说明：

1. **`display: block;`**
   - 块级元素会开始于新行，并且其宽度默认填满父容器的宽度。
   - 可以设置宽度和高度。
   - 典型块级元素包括 `<div>`, `<p>`, `<section>`, `<header>` 等。

2. **`display: inline;`**
   - 内联元素与其他元素在同一行显示，其宽度和高度由内容决定。
   - 不能设置宽度和高度，但可以设置 `line-height`。
   - 典型内联元素包括 `<span>`, `<a>`, `<img>` 等。

3. **`display: inline-block;`**
   - 结合了 `inline` 和 `block` 的特性，元素以内联的方式显示，但可以设置宽度和高度。
   - 典型用途包括行内元素的尺寸控制，如按钮或图标。

4. **`display: none;`**
   - 元素不会被显示，也不占据页面空间，相当于完全从文档流中移除。
   - 常用于通过CSS隐藏元素，而不是使用HTML的 `hidden` 属性。

5. **`display: flex;`**
   - 将容器设置为Flex布局，允许子元素（flex items）在不同方向上灵活排列。
   - 适用于单行或单列布局，以及需要对齐和分布空间的场景。

6. **`display: inline-flex;`**
   - 将容器设置为内联Flex布局，与 `flex` 类似，但容器表现为内联元素。
   - 适用于行内Flexbox布局，如行内的一组按钮。

7. **`display: grid;`**
   - 将容器设置为Grid布局，允许子元素在二维空间（行和列）上排列。
   - 适用于复杂的页面布局，如网格或棋盘布局。

8. **`display: inline-grid;`**
   - 将容器设置为内联Grid布局，与 `grid` 类似，但容器表现为内联元素。
   - 适用于行内的网格布局。

### 布局特性

- **Flexbox**：
  - `flex-direction`：控制主轴方向（水平或垂直）。
  - `justify-content`：控制项目在主轴上的对齐方式。
  - `align-items`：控制项目在交叉轴上的对齐方式。
  - `flex-wrap`：控制项目是否换行。

- **Grid**：
  - `grid-template-columns`：定义网格的列。
  - `grid-template-rows`：定义网格的行。
  - `grid-column-gap`：设置列之间的间隙。
  - `grid-row-gap`：设置行之间的间隙。
  - `justify-items` 和 `align-items`：控制网格项目的水平和垂直对齐。

这些 `display` 属性值提供了强大的布局控制能力，使得开发者可以创建灵活和响应式的网页布局。随着现代浏览器对这些属性的支持越来越好，它们已经成为前端开发中不可或缺的一部分。

## display:flex

`display: flex;` 是CSS Flexible Box Layout（弹性盒子布局）模块的一个属性值，它将一个容器元素设置为flex容器，使其子元素（flex项目）可以按照flex布局的规则进行排列。Flexbox布局非常适合一维布局，可以轻松地对齐和分配容器内项目的空间，即使它们的大小是未知或动态变化的。

### Flexbox的主要特点：

1. **主轴和交叉轴**：
   - Flex容器有两个轴：主轴（main axis）和交叉轴（cross axis）。主轴的开始和结束由`flex-direction`属性定义。
   - 默认情况下，主轴沿水平方向，交叉轴沿垂直方向。

2. **flex-direction**：
   - 控制主轴的方向（是水平还是垂直）。
   - 可能的值有：`row`（默认，水平从左到右）、`row-reverse`（水平从右到左）、`column`（垂直从上到下）、`column-reverse`（垂直从下到上）。

3. **justify-content**：
   - 控制项目在主轴上的对齐方式。
   - 可能的值有：`flex-start`（起始对齐）、`flex-end`（结束对齐）、`center`（居中对齐）、`space-between`（两端对齐，项目之间等间距）、`space-around`（每个项目两侧等间距）、`space-evenly`（所有项目之间间距相等）。

4. **align-items**：
   - 控制项目在交叉轴上的对齐方式。
   - 可能的值有：`flex-start`、`flex-end`、`center`、`baseline`、`stretch`（默认，如果项目未设置高度，则伸展以填充容器）。

5. **flex-wrap**：
   - 控制项目是否应该在必要时换行。
   - 可能的值有：`nowrap`（默认，不换行）、`wrap`（换行）、`wrap-reverse`（反向换行）。

6. **flex-grow**、**flex-shrink** 和 **flex-basis**：
   - 这些属性应用于flex项目，控制它们如何增长、缩小和计算基础大小。
   - `flex`属性是`flex-grow`、`flex-shrink`和`flex-basis`的简写形式，默认值为`0 1 auto`。

### 示例代码：

```css
.container {
  display: flex;
  flex-direction: row; /* 默认值，可以省略 */
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.item {
  flex: 1; /* 默认值，等同于 flex-grow: 1; flex-shrink: 1; flex-basis: 0%; */
  /* 也可以分别设置 */
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0%;
}
```

在这个例子中，`.container` 被设置为flex容器，其子元素（`.item`）将按照flex布局的规则进行排列。项目将水平居中对齐（`justify-content: center`）并且在交叉轴上垂直居中对齐（`align-items: center`）。如果容器空间不足，项目将换行显示（`flex-wrap: wrap`）。

Flexbox提供了一种更加直观和灵活的方式来处理布局问题，特别是在响应式设计中。通过调整容器和项目的属性，可以轻松实现复杂的布局效果。

## 常用html标签（简单介绍）

HTML（HyperText Markup Language）标签构成了网页内容的基本结构。以下是一些常用的HTML标签，分为不同的类别以便于理解：

### 文档结构标签

- `<!DOCTYPE html>`：声明文档类型和HTML版本。
- `<html>`：包围整个HTML文档。
- `<head>`：包含文档的元数据，如`<title>`和`<link>`。
- `<title>`：定义文档的标题。
- `<body>`：包含文档的可见内容。

### 文本内容标签

- `<h1>` 到 `<h6>`：定义标题，`<h1>` 是最高级别的标题。
- `<p>`：定义段落。
- `<br>`：插入换行。
- `<hr>`：插入水平线。
- `<strong>` 或 `<b>`：定义粗体文本。
- `<em>` 或 `<i>`：定义斜体文本。
- `<mark>`：定义高亮文本。
- `<small>`：定义小号文本。
- `<del>`：定义删除线文本。
- `<ins>`：定义插入特殊文本。
- `<sub>`：定义下标文本。
- `<sup>`：定义上标文本。
- `<blockquote>`：定义块引用。
- `<pre>`：定义预格式化的文本。

### 链接和导航标签

- `<a>`：定义超链接。
- `<link>`：定义外部资源链接（通常在`<head>`中）。
- `<nav>`：定义导航链接的部分。

### 列表标签

- `<ul>`：定义无序列表。
- `<ol>`：定义有序列表。
- `<li>`：定义列表项。

### 表格标签

- `<table>`：定义表格。
- `<caption>`：定义表格标题。
- `<tr>`：定义表格行。
- `<th>`：定义表头单元格。
- `<td>`：定义表格单元格。
- `<thead>`：定义表格头部。
- `<tbody>`：定义表格主体。
- `<tfoot>`：定义表格脚部。

### 表单标签

- `<form>`：定义表单。
- `<input>`：定义输入控件。
- `<textarea>`：定义多行文本输入控件。
- `<button>`：定义按钮。
- `<label>`：定义标签。
- `<select>`：定义下拉列表。
- `<option>`：定义下拉列表中的选项。

### 图像和多媒体标签

- `<img>`：定义图像。
- `<audio>`：定义音频。
- `<video>`：定义视频。
- `<source>`：定义多媒体资源。
- `<track>`：定义字幕或字幕文件。

### 其他常用标签

- `<div>`：定义文档中的分区或节。
- `<span>`：定义行内的分区或节。
- `<main>`：定义文档的主要内容。
- `<section>`：定义文档中的一个区段。
- `<article>`：定义独立的、自包含的内容。
- `<aside>`：定义与页面主要内容稍微相关的部分。
- `<footer>`：定义文档或区段的页脚。
- `<header>`：定义文档或区段的头部。

这些标签是构建HTML页面的基础，但HTML5还引入了许多新的标签和功能，以支持更丰富的内容和交互。

## 常用html标签（详细作用）

在网页设计中，HTML标签不仅定义了网页的结构和内容，还对网页的语义化、可访问性、搜索引擎优化（SEO）以及最终的用户体验有着重要影响。以下是一些常用HTML标签在网页设计中的具体作用：

### 文档结构标签
- `<!DOCTYPE html>`：告诉浏览器这是一个HTML5文档，确保页面以标准模式渲染。
- `<html>`：根元素，包含整个网页的内容。
- `<head>`：包含元数据，如字符集、文档标题和链接到CSS文件。
- `<title>`：定义浏览器标签栏中的标题，对SEO至关重要。
- `<body>`：包含网页的所有可见内容。

### 文本内容标签
- `<h1>` 到 `<h6>`：创建标题，帮助组织内容结构，对SEO有正面影响。
- `<p>`：定义段落，是文本内容的基本容器。
- `<br>`：用于强制换行，用于文本格式的微调。
- `<hr>`：插入主题分隔线，用于区分不同的内容区块。
- `<strong>` 和 `<b>`：分别表示重要和粗体文本，`<strong>` 还带有语义重要性。
- `<em>` 和 `<i>`：分别表示强调和斜体文本，`<em>` 带有语义强调。
- `<mark>`：高亮文本，常用于搜索结果中的关键词。
- `<small>`：用于小号字体，常用于版权声明或免责声明。
- `<del>` 和 `<ins>`：分别表示删除线和插入线文本，常用于文档修订。
- `<sub>` 和 `<sup>`：用于下标和上标文本，常用于数学公式和科学论文。
- `<blockquote>`：用于引用其他来源的大段文本。
- `<pre>`：预格式化文本，保持空格和换行，常用于代码块。

### 链接和导航标签
- `<a>`：创建链接，是实现页面间导航和资源链接的基础。
- `<nav>`：定义导航链接的容器，有助于屏幕阅读器识别导航部分。

### 列表标签
- `<ul>` 和 `<ol>`：分别定义无序列表和有序列表，用于组织项目列表。
- `<li>`：定义列表中的一项。

### 表格标签
- `<table>` 及相关标签：用于展示数据表格，如价格表、统计数据等。

### 表单标签
- `<form>`、`<input>`、`<textarea>`、`<button>`、`<label>`、`<select>` 和 `<option>`：用于创建用户输入表单，收集用户数据。

### 图像和多媒体标签
- `<img>`：在网页中嵌入图像，是视觉内容的重要组成部分。
- `<audio>` 和 `<video>`：嵌入音频和视频内容，丰富网页媒体类型。
- `<source>` 和 `<track>`：为多媒体元素提供多种资源和字幕。

### 其他常用标签
- `<div>` 和 `<span>`：用于页面布局和文本分组，`<div>` 用于块级元素，`<span>` 用于行内元素。
- `<main>`、`<section>`、`<article>`、`<aside>` 和 `<footer>`：定义页面的不同部分，有助于内容组织和SEO。
- `<header>`：定义页面或页面部分的头部，通常包含导航和标题。

这些标签共同构成了网页的基本骨架，设计师和开发者通过组合这些标签来创建结构化、有语义的网页内容，并通过CSS和JavaScript来进一步增强视觉效果和交互功能。

+++

## 常用的stytle

在CSS中，`style` 是一个常用的属性，它允许你在HTML元素内部直接应用样式，而不需要外部或内部的CSS样式表。使用 `style` 属性可以快速地为单个元素添加样式，这在快速原型设计或小规模调整时非常有用。

### 基本用法

HTML元素的 `style` 属性可以直接在元素的开始标签中添加：

```html
<div style="color: blue; font-size: 20px;">Hello, World!</div>
```

在这个例子中，`div` 元素的文本颜色被设置为蓝色，字体大小被设置为20像素。

### 常用样式属性

以下是一些常用的CSS样式属性，它们经常在 `style` 属性中使用：

1. **字体和文本样式**
   - `color`：设置文本颜色。
   - `font-family`：设置字体族。
   - `font-size`：设置字体大小。
   - `font-weight`：设置字体粗细（如 `bold`）。
   - `text-align`：设置文本对齐方式（如 `center`）。
   - `text-decoration`：设置文本装饰（如 `underline`）。

2. **布局和尺寸**
   - `width`：设置元素宽度。
   - `height`：设置元素高度。
   - `margin`：设置元素的外边距。
   - `padding`：设置元素的内边距。
   - `display`：设置元素的显示类型（如 `block`，`inline-block`，`none`）。

3. **背景和边框**
   - `background-color`：设置元素背景颜色。
   - `background-image`：设置元素背景图像。
   - `border`：设置元素边框（可以包括样式、宽度和颜色）。
   - `border-radius`：设置元素边框圆角。

4. **定位**
   - `position`：设置元素的定位方式（如 `absolute`，`relative`）。
   - `top`、`right`、`bottom`、`left`：设置元素相对于其正常位置或父元素的偏移。

5. **过渡和动画**
   - `transition`：设置元素的过渡效果。
   - `animation`：设置元素的动画效果。

### 示例

```html
<button style="background-color: red; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer;">
  Click Me
</button>
```

在这个例子中，按钮被设置了红色背景、白色文字、内边距、无边框、圆角和指针光标，以提高用户交互体验。

使用 `style` 属性可以快速实现样式的调整，但请注意，过度使用内联样式会使HTML文档变得难以维护，特别是在大型项目中。因此，最佳实践是使用外部或内部CSS样式表来管理样式。

+++

## HTML属性

1. **`id`**: 给元素一个唯一的标识符，可以用于 CSS 选择器或 JavaScript 操作。

```html
   <div id="header">This is a header</div>
   ```

2. **`class`**: 给元素指定一个或多个类名，方便通过 CSS 或 JavaScript 操作。

```html
   <p class="text-muted">This is a paragraph.</p>
   ```

3. **`style`**: 直接为元素定义 CSS 样式。

```html
   <span style="color: red;">This text is red.</span>
   ```

4. **`href`**: 用于 `<a>` 标签，指定链接目标。

```html
   <a href="https://www.example.com">Visit Example</a>
   ```

5. **`src`**: 用于 `<img>` 和 `<script>` 标签，指定资源的路径。

```html
   <img src="image.jpg" alt="Description">
   ```

6. **`alt`**: 用于 `<img>` 标签，提供图片的替代文本。

```html
   <img src="logo.png" alt="Company Logo">
   ```

7. **`title`**: 提供关于元素的额外信息，通常在鼠标悬停时显示。

```html
   <button title="Click me">Submit</button>
   ```

8. **`name`**: 在 `<input>`, `<form>`, `<select>` 等表单元素中使用，定义元素的名称。

```html
   <input type="text" name="username">
   ```

9. **`value`**: 定义表单元素的值。

```html
   <input type="text" value="Default text">
   ```

10. **`target`**: 用于 `<a>` 标签，指定链接的打开方式（如 `_blank` 在新窗口中打开）。

```html
    <a href="https://www.example.com" target="_blank" rel="noopener">Open in new tab</a>
    ```

11. **`type`**: 指定表单元素的类型（如 `text`, `password`, `submit`）。

```html
    <input type="password" name="password">
    ```

12. **`placeholder`**: 为 `<input>` 和 `<textarea>` 提供一个占位符文本。

```html
    <input type="text" placeholder="Enter your name">
    ```

# 参考

## 基础

![JavaScript基础](./assets/JavaScript基础.png)

## 数组

![数组](/assets/数组.png)

## 对象

![ 对象](/assets/ 对象.png)

## 函数

![函数](/assets/函数.png)