前端开发基础

开发
42k words

申请了招商银行的花嫁储蓄卡，很好看。

HTML

语义化 HTML

1. `
<header>
  `：表示文档的头部区域，通常包含标题、导航链接等内容。 2. `
  <nav>
    `：表示文档的导航区域，通常包含页面内的导航链接。 3. `
    <main>
      `：表示文档的主要内容，一个页面只应包含一个`
      <main>
        `标签。 4. `
        <article>
          `：表示页面中独立的、完整的、可以独立于页面其他内容存在的内容区域，例如一篇博客文章或者一篇新闻报道。
          5. `
          <section>
            `：表示文档中的一个内容区块，比如一章节或者一个标签页。 6. `
            <aside>
              `：表示页面的侧边栏内容，如相关链接、广告、注解等。 7. `
              <footer>
                `：表示文档的尾部，通常包含版权信息、作者信息、联系方式等。 8. `
                <figure>
                  `和`
                  <figcaption>
                    `：分别表示一块包含媒体内容以及该内容的说明文字的区域。 9.
                    `<mark
                      >`：表示需要突出显示的文字。 10. `<time
                        >`：表示时间或日期。 11. `
                        <summary>
                          `和`
                          <details>
                            `：表示一个可以展开和折叠的细节列表。
                          </details>
                        </summary></time
                      ></mark
                    >
                  </figcaption>
                </figure>
              </footer>
            </aside>
          </section>
        </article>
      </main>
    </main>
  </nav>
</header>

标签

一般标签

`<fieldset>`: 框，表单分组。
`<legend>`: 定义<fieldset>的标题。
`<ul>`: 无序列表。CSS中可以通过`list-style-type`来修改列表样式。
`<ol>`: 有序列表。
`<br>`: 换行。
`<textarea>`: 文本区元素。

<input>

<!-- 单选框 -->
<input id="in" type="radio" name="radio-1" checked />
<input id="out" type="radio" name="radio-1" />

<name>: name 相同的单选框之间相互关联。

<label>

<label> 元素（标签）表示用户界面中某个元素的说明。

将一个 <label> 和一个 <input> 元素相关联主要有这些优点：

  • 标签文本不仅与其相应的文本输入元素在视觉上相关联，程序中也是如此。这意味着，当用户聚焦到这个表单输入元素时，屏幕阅读器可以读出标签，让使用辅助技术的用户更容易理解应输入什么数据。

  • 可以点击关联的标签来聚焦或者激活这个输入元素，就像直接点击输入元素一样。这扩大了元素的可点击区域，让包括使用触屏设备在内的用户更容易激活这个元素。

使用

将一个 <label> 和一个 <input> 元素匹配在一起，需要给 <input> 一个 id 属性。而 <label> 需要一个 for 属性，其值和 <input> 的 id 一样。

另外，也可以将 <input> 直接放在 <label> 里，此时则不需要 for 和 id 属性，因为关联已隐含存在

<span>和<a>的区别

<span> 和 <p> 标签在 HTML 中分别代表着不同的元素类型，它们的主要区别在于它们的语义含义和呈现方式：

  1. <span>

    • 语义：<span> 是一个内联（行内）元素，没有特定的语义含义，主要用于文本的样式标记或者结构划分，尤其在需要对文本中的某个部分进行样式定制时使用。
    • 表现：<span> 标签不会带来额外的布局效果，不会像块级元素那样独占一行，它所包含的内容将会跟周围的文本一起流动在同一行内，直到遇到换行条件（比如容器边界或者另一个块级元素）才会换行。
    • 使用场合：常常配合 CSS 进行文本样式控制，例如更改字体颜色、大小、背景等，也可以用于 JavaScript/jQuery 等脚本进行动态处理。

  2. <p>

    • 语义：<p> 是一个块级元素，拥有明确的语义，表示一个段落，它意味着一个新的段落开始。
    • 表现：<p> 标签包裹的内容会自动在其前后生成换行（即段落之间会有一定的垂直间距），并且在标准文档流中，每一个 <p> 元素会另起一行显示。
    • 使用场合：用来组织文章正文、说明性的文本内容，浏览器会默认为其赋予适当的上下边距（margin），有助于提升阅读体验。

总结起来，<span> 主要是用于文本样式控制和结构分割，而 <p> 更注重文本内容的分段显示和文档结构的清晰划分。在 HTML5 语义化编程中，提倡根据内容的逻辑结构选择合适的标签，以便更好地提升 SEO 和辅助技术的理解能力。

表单 form

表单样式化进阶

属性

`name`: 表单的名称。HTML 4 中不推荐（应使用 id）。在 HTML 5
中，该值必须是所有表单中独一无二的，而且不能是空字符串。 `autocomplete`:
用于指示 input
元素是否能够拥有一个默认值，此默认值是由浏览器自动补全的。此设定可以被属于此表单的子元素的
autocomplete 属性覆盖。 `action`: 处理表单提交的 URL。这个值可被
<button>
  、<input type="submit" /> 或 <input type="image" /> 元素上的 formaction
  属性覆盖。 `method`: 浏览器使用这种 HTTP 方式来提交 表单。可能的值有：
  post：指的是 HTTP POST 方法；表单数据会包含在表单体内然后发送给服务器。
  get：指的是 HTTP GET 方法；表单数据会附加在 action 属性的 URL 中，并以 '?'
  作为分隔符，没有副作用 时使用这个方法。 dialog：如果表单在
  <dialog>
    元素中，提交时关闭对话框。此值可以被
    <button>
      、<input type="submit" /> 或 <input type="image" /> 元素中的 formmethod
      属性覆盖。 `novalidate`:
      此布尔值属性表示提交表单时不需要验证表单。如果没有声明该属性（因此表单需要通过验证）。该属性可以被表单中的
      <button>
        、<input type="submit" /> 或 <input type="image" /> 元素中的
        formnovalidate 属性覆盖。
      </button>
    </button>
  </dialog>
</button>

CSS

CSS 选择器是 CSS 语言中用于定位 HTML 文档中需要设置样式的元素的一种机制。它们就像一把钥匙，帮助开发者锁定并应用样式到特定的 HTML 元素上。选择器允许根据元素的名称、属性、类名、ID 以及其他特性来精确指定元素，以便为这些元素设置样式。

CSS 三种引入方式的使用方法和优缺点

  1. 内联样式（Inline Styles）

    • 使用方法：
      在 HTML 标签内部使用 style 属性来定义样式，例如：

      <p style="color: red; font-size: 16px;">这是一个段落</p>

    • 优点：

      • 最直接且高效，样式会立即应用到指定元素上，无需额外的 HTTP 请求。
      • 权重较高，内联样式优先级高于外部样式表和内部样式表。

    • 缺点：

      • 不利于代码复用和组织，增加页面体积，使得 HTML 和 CSS 紧密耦合，违反了内容与表现分离的原则。
      • 不便于维护，特别是当需要在整个网站范围内修改样式时，需要逐个修改每个含有内联样式的元素。

  2. 内部样式表（Internal Stylesheet）

    • 使用方法：
      在 HTML 文档的 <head> 标签内使用 <style> 标签来编写样式，例如：

      <head>
  <style>
    p {
      color: blue;
      font-size: 14px;
    }
  </style>
</head>

    • 优点：

      • 相对于内联样式，内部样式表适用于应用于整个文档的样式规则，有助于减少代码重复。
      • 仍然位于同一个文件内，相对简单且易于理解。

    • 缺点：

      • 仍不具备良好的代码复用性和模块化能力，多个 HTML 文件需共享样式时，需要在每个文件中复制内部样式表，增加维护成本。
      • 不利于组件化开发和样式隔离，多个页面间的样式难以独立管理和更新。

  3. 外部样式表（External Stylesheet）

    • 使用方法：
      在 HTML 文档中通过 <link> 标签引用外部 CSS 文件，例如：

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

      然后在 styles.css 文件中编写样式：

      p {
  color: green;
  font-size: 16px;
}

    • 优点：

      • 易于维护和更新，一个 CSS 文件可以服务于多个 HTML 文件，有利于代码复用和模块化。
      • 实现内容与表现的完美分离，有利于 SEO 优化和页面加载性能（通过缓存机制）。
      • 可以更好地组织和分类样式，方便多人协作开发。

    • 缺点：

      • 需要额外的 HTTP 请求，首次加载页面时可能会影响速度，但如果合理利用缓存，则长期来看反而能提升性能。
      • 控制权相对较弱，浏览器会按照 CSS 文件的顺序和层叠规则决定最终样式，调试时不如内联样式直观。

文字

文字样式在线测试网站

italic和oblique的区别

font-style 非常简单：用于在 normal 文本、italic 文本和 oblique 文本之间选择。唯一有点复杂的是明确 italic 文本和 oblique 文本之间的差别。

斜体（italic）是一种简单的字体风格，对每个字母的结构有一些小改动，来反映变化的外观。与此不同，倾斜（oblique）文本则是正常竖直文本的一个倾斜版本。

通常情况下，italic 和 oblique 文本在 web 浏览器中看上去完全一样。

text-transform和font-variant的区别

text-transform 和 font-variant 是 CSS 中用于改变文本样式的两个不同属性，它们的主要区别在于作用的对象和方式不同。

**text-transform**：

  • 该属性用于控制文本的大小写形式，它不影响文本的实际字体或字形，而是对文本内容进行转换。
  • 支持的值包括：
    • none（默认值）：不做大小写转换。
    • capitalize：每个单词的首字母转为大写，其余字母保持原样。
    • uppercase：将所有文本转换为大写。
    • lowercase：将所有文本转换为小写。
    • full-width：将文本转换为全角字符（仅在支持东亚文字的环境下有意义）。

**font-variant**：

  • 主要用于控制文本的排版变化，特别是在西方字体中，它能够启用一些特殊的设计变体，如小型大写字母（Small Caps）。
  • 传统上，font-variant 的常见用法是：
    • normal（默认值）：使用标准字体样式。
    • small-caps：将文本转换为小型大写字母，这是一种特殊的字体设计，其中小写字母被替换为其大写的缩小版，通常用于强调或排版样式。

在 CSS3 以后，font-variant属性得到了扩展，可以用于控制更多类型的字形变化，例如连字符、数字的斜体/衬线等。例如：

  • font-variant-ligatures：控制连字符的使用。
  • font-variant-position：控制上标和下标的定位。
  • font-variant-caps：除了small-caps之外，还包括更多类型的大小写变换选项，如全大写、全小写、Petite Capitals 等。
  • font-variant-numeric：控制数字、小数点和分数的样式。
  • font-variant-alternates：控制字体中的替代字形。

总结起来，text-transform侧重于大小写转换，而font-variant更关注字体自身的变体和特殊样式。

背景与边框

在 CSS 中，背景（Background）和边框（Border）是用于装饰元素外观的重要属性。以下是对这两个属性的基本介绍和常用属性说明：

背景（Background）：
背景属性用于设置元素背后的区域样式，包括颜色、图像、重复模式等。

常用背景属性包括：

  • background-color: 设置元素的背景颜色。
    element {
  background-color: red;
}
  • background-image: 设置背景图片。
    element {
  background-image: url("image.jpg");
}
  • background-repeat: 设置背景图片是否及如何重复，可选值有 repeat（默认，水平垂直重复）、repeat-x、repeat-y、no-repeat。
    element {
  background-repeat: no-repeat;
}
  • background-size: 设置背景图片的大小，可以是绝对单位或相对单位，也可使用关键词 contain 或 cover。
    element {
  background-size: cover;
}
  • background-position: 设置背景图片在元素内的位置。
    element {
  background-position: center;
}
  • background-attachment: 设置背景图片相对于视口的滚动行为，可选值有 scroll（默认，随内容滚动）、fixed（固定在视口）和 local（随元素内容滚动）。
    element {
  background-attachment: fixed;
}
  • 为了简化书写，以上所有属性可以合并写在一个 background 短语中：
    element {
  background: #ff0000 url("image.jpg") no-repeat center / cover fixed;
}

边框（Border）：
边框属性用于设置元素周围的线条样式，包括宽度、样式、颜色等。

常用边框属性包括：

  • border-width: 设置边框的宽度。
    element {
  border-width: 1px;
}
  • border-style: 设置边框的样式，如 solid（实线，默认）、dotted（点线）、dashed（虚线）、double（双线）等。
    element {
  border-style: dotted;
}
  • border-color: 设置边框的颜色。
    element {
  border-color: blue;
}
  • 同样的，这三个属性也可以合并成一个简写属性 border 来一起设置：
    element {
  border: 1px solid blue;
}
  • 另外，可以分别针对上、右、下、左边框设置不同的宽度、样式和颜色，例如：
    element {
  border-top: 1px solid red;
  border-right: 2px dashed green;
  border-bottom: 3px double blue;
  border-left: 4px dotted black;
}
  • 还可以分别为四个角设置圆角半径，使用 border-radius 属性：
    element {
  border-radius: 10px; /* 四个角都有相同的圆角 */
  border-top-left-radius: 20px; /* 左上角单独设置圆角 */
}

选择器

层叠、优先级与继承

在 CSS 中，层叠、优先级和继承是三个核心概念，它们共同决定了样式在网页中的应用方式：

  1. 层叠（Cascading）：
    层叠是指多个 CSS 规则可能同时影响一个 HTML 元素，CSS 通过一套规则决定哪些样式最终应用于元素。层叠的核心思想是，当有多个选择器都定义了同一属性时，CSS 会依据一定的规则决定最终使用的样式。这些规则包括：来源（如内联样式、内部样式表、外部样式表的优先级）、特异性（选择器的复杂程度和匹配度）以及样式声明的顺序（当特异性相同时，后声明的样式覆盖之前的样式）。

  2. 优先级（Specificity）：
    CSS 选择器的优先级是由其组成成分决定的。优先级从高到低大致排序为：

    • 内联样式（如 style 属性）
    • ID 选择器（如 #myID）
    • 类选择器、属性选择器、伪类选择器（如 .myClass、[attribute]、:hover)
    • 元素和伪元素选择器（如 div、:before）
    • 通用选择器（如 *）
      当两个或更多选择器都定义了同一个属性时，具有更高优先级的选择器将决定元素的样式。优先级可以通过计算选择器中 ID 选择器数量、类选择器数量、属性选择器数量和其他类型选择器数量得出。

  3. 继承（Inheritance）：
    继承指的是子元素可以获取父元素的一些 CSS 属性值。不是所有的 CSS 属性都可以被继承，例如文本相关的属性（如颜色、字体大小）通常是可以被继承的，而盒模型相关的属性（如边距、填充、边框）则是不能被继承的。如果一个元素没有自己定义某个可继承属性，它会沿用父元素的该属性值。如果子元素自己定义了该属性，则不再继承父元素的值。

属性选择器

属性选择器是一种强大的 CSS 选择器，可以根据 HTML 元素的属性及属性值来选取元素。属性选择器允许开发者定位具有特定属性或特定属性值的 HTML 元素，极大地提高了 CSS 样式的针对性和灵活性。以下是一些常见的属性选择器类型：

  1. **存在属性选择器 ([attr])**：
    选择具有指定属性（attr）的任何元素，不论属性值为何。

    [title] {
  color: red;
}

    上述代码将选择所有带有title属性的元素，并将其文本颜色设置为红色。

  2. **等于属性值选择器 ([attr=val])**：
    选择具有指定属性（attr），且属性值完全等于指定值（val）的元素。

    input[type="text"] {
  width: 100%;
}

    此代码将选择所有type属性值为text的input元素，并将其宽度设置为 100%。

  3. **开头包含值选择器 ([attr^=val])**：
    选择具有指定属性（attr），且属性值以指定值（val）开头的元素。

    a[href^="https://"]
{
  color: blue;
}

    该代码将选择所有href属性值以https://开头的a元素，并将其链接颜色设置为蓝色。

  4. **结尾包含值选择器 ([attr$=val])**：
    选择具有指定属性（attr），且属性值以指定值（val）结尾的元素。

    img[src$=".png"] {
  border: 1px solid black;
}

    该代码将选择所有src属性值以.png结尾的img元素，并为其添加 1 像素黑色边框。

  5. **包含值选择器 ([attr*=val])**：
    选择具有指定属性（attr），且属性值中包含指定值（val）的元素。

    div[class*="container"] {
  width: 100%;
}

    该代码将选择所有class属性值中包含container的div元素，并将其宽度设为 100%。

  6. **属性值列表中的子串匹配选择器 ([attr~=val])**：
    选择具有指定属性（attr），且属性值是一个以空格分隔的值列表，其中包含指定值（val）的元素。

    li[data-tags~="important"] {
  font-weight: bold;
}

    该代码将选择所有data-tags属性值中包含important的li元素，并使其文本加粗。

伪类和伪元素

伪类

伪类是选择器的一种，它用于选择处于特定状态的元素，比如当它们是这一类型的第一个元素时，或者是当鼠标指针悬浮在元素上面的时候。它们表现得会像是使文档的某个部分应用了一个类一样，可以在标记文本中减少多余的类，让代码更灵活、更易于维护。

伪类就是开头为冒号的关键字：

:pseudo-class-name

/* 简单伪类 */
:first-child 一直选中兄弟元素中的第一个子元素。
:last-child 一直选中兄弟元素中的最后一个子元素。
:only-child 一直选中没有任何兄弟元素的元素。
:invalid 用来选择任何未通过验证的 <form>、<fieldset>、<input> 或其他表单元素,一般用来突出显示用户输入的字段错误。
:active 在用户激活（例如点击）元素的时候匹配。
:nth-of-type() 匹配某种类型的一列兄弟元素。
:read-only 匹配用户不可更改的元素。
/* 用户行为伪类 */
:hover 在用户使用指针设备与元素进行交互时匹配，但不一定激活它。通常情况下，用户将光标（鼠标指针）悬停在元素上时触发。
:focus 表示获得焦点的元素（如表单输入）。当用户点击或轻触一个元素或使用键盘的Tab键选择它时，它会被触发。

伪元素

伪元素以类似方式表现，不过表现得是像是往标记文本中加入全新的 HTML 元素一样，而不是向现有的元素上应用类。伪元素开头为双冒号::。

::first-line 选中第一行。
::first-letter 匹配元素的第一个字母。
::selection 匹配文档中被选择的部分。
/* ::before和::after伪元素与content属性的共同使用，在 CSS 中被叫做“生成内容” */
::before 在元素之前。
::after 在元素之后。

盒模型

盒模型（Box Model）是 CSS 中用于描述网页元素布局的一种逻辑结构模型，它定义了一个 HTML 元素的布局和尺寸计算方式。每个 HTML 元素都被视为一个矩形的盒子，该盒子由以下几个部分构成：

  1. 内容区（Content）：
    这是元素的实际内容区域，包括文本、图片等。设置元素的 width 和 height 属性就是指内容区的尺寸。

  2. 内边距（Padding）：
    内边距是围绕内容区的空白区域，用于增加元素内容与边框之间的距离。可以通过 padding-top、padding-right、padding-bottom 和 padding-left 分别设置各边的内边距，或者使用 padding 简写属性一次性设置所有内边距。

  3. 边框（Border）：
    边框包裹在内边距外面，为元素添加可视的轮廓。边框的宽度、样式（实线、虚线、点线等）和颜色可以通过 border-width、border-style 和 border-color 分别设置，也可以使用 border 简写属性一次性设置所有边框属性。

  4. 外边距（Margin）：
    外边距是盒子边缘与其它盒子之间的空白区域，用于控制元素之间的间距。外边距与内边距类似，可以通过 margin-top、margin-right、margin-bottom 和 margin-left 分别设置各边的外边距，也可以使用 margin 简写属性设置。

在 CSS 中，有两种盒模型计算方式：

  • 标准盒模型（W3C 盒模型）：
    元素总宽度和总高度由内容区宽度（width）和高度（height）、内边距（padding）、边框（border）以及外边距（margin）共同组成。即 总宽度 = 内容区宽度 + 左右内边距 + 左右边框宽度 + 左右边距，总高度 计算方式类似。

  • IE 盒模型（怪异盒模型）：
    在 IE 盒模型中，元素的 width 和 height 包含了内容区和内边距，而不包括边框和外边距。若要得到与标准盒模型同样的视觉效果，需要手动减去内边距和边框的宽度或高度。

为了控制盒模型的计算方式，可以使用 box-sizing 属性，取值有 content-box（标准盒模型）和 border-box（IE 盒模型）。默认情况下，大部分浏览器遵循标准盒模型，但早期的 IE 浏览器默认使用的是怪异盒模型。

外部显示类型

一个拥有 block 外部显示类型的盒子会表现出以下行为：

盒子会产生换行。
width 和 height 属性可以发挥作用。
内边距、外边距和边框会将其他元素从当前盒子周围“推开”。
如果未指定 width，方框将沿行向扩展，以填充其容器中的可用空间。在大多数情况下，盒子会变得与其容器一样宽，占据可用空间的 100%。
某些 HTML 元素，如 <h1> 和 <p>，默认使用 block 作为外部显示类型。

一个拥有 inline 外部显示类型的盒子会表现出以下行为：

盒子不会产生换行。
width 和 height 属性将不起作用。
垂直方向的内边距、外边距以及边框会被应用但是不会把其他处于 inline 状态的盒子推开。
水平方向的内边距、外边距以及边框会被应用且会把其他处于 inline 状态的盒子推开。
某些 HTML 元素，如 <a>、 <span>、 <em> 以及 <strong>，默认使用 inline 作为外部显示类型。

内部显示类型

区块和行内布局是网络上的默认行为方式。默认情况下，在没有任何其他指令的情况下，方框内的元素也会以标准流的方式布局，并表现为区块或行内盒子。

例如，可以通过设置 display: flex; 来更改内部显示类型。该元素仍将使用外部显示类型 block 但内部显示类型将变为 flex。

display属性设置元素是否被视为块或者内联元素以及用于子元素的布局，例如流式布局、网格布局或弹性布局。

/* display的一些属性值 */
/* 外部表现 */
block
    该元素生成一个块级元素盒，在正常的流中，该元素之前和之后产生换行。
inline
    该元素生成一个或多个内联元素盒，它们之前或者之后并不会产生换行。在正常的流中，如果有空间，下一个元素将会在同一行上。
/* 浏览器支持双值语法，当仅发现外部值时，例如当指定 display: block 或 display: inline，其将内部值设置为 flow。这种行为是预期的；例如，如果你指定一个元素是块元素，你将期望该元素的子元素将同块和内联元素一样参与正常的流布局。 */
display: block flow;
/* 内部表现 */
flow
    该元素使用流式布局（块和内联布局）来排布它的内容。如果它的外部显示类型是 inline 或 run-in，并且它参与一个块或者内联格式上下文，那么它将生成一个内联盒子。否则它将生成一个块容器盒。
flow-root
    该元素生成一个块级元素盒，其会建立一个新的区块格式化上下文，定义格式化上下文的根元素。
table
    该元素的行为类似块级元素并且根据弹性盒模型布局它的内容。
flex
    该元素的行为类似块级元素并且根据弹性盒模型布局它的内容。
grid
    该元素的行为类似块级元素并且根据网格模型布局它的内容。

弹性盒子布局(flex)

Flex 布局教程：语法篇

CSS 弹性盒子布局是 CSS 的模块之一，定义了一种针对用户界面设计而优化的 CSS 盒子模型。在弹性布局模型中，弹性容器的子元素可以在任何方向上排布，也可以“弹性伸缩”其尺寸，既可以增加尺寸以填满未使用的空间，也可以收缩尺寸以避免父元素溢出。子元素的水平对齐和垂直对齐都能很方便的进行操控。通过嵌套这些框（水平框在垂直框内，或垂直框在水平框内）可以在两个维度上构建布局。

flex 布局的基本概念

由于所有 CSS 属性都会有一个初始值，所以 flex 容器中的所有 flex 元素都会有下列行为：

  • 元素排列为一行（flex-direction 属性的初始值是 row）。
  • 元素从主轴的起始线开始。
  • 元素不会在主维度方向拉伸，但是可以缩小。
  • 元素被拉伸来填充交叉轴大小。
  • flex-basis 属性为 auto。
  • flex-wrap 属性为 nowrap。

这会让你的元素呈线形排列，并且把自己的大小作为主轴上的大小。如果有太多元素超出容器，它们会溢出而不会换行。如果一些元素比其他元素高，那么元素会沿交叉轴被拉伸来填满它的大小。

flex 的两条轴线

当使用 flex 布局时，首先想到的是两根轴线 — 主轴和交叉轴,交叉轴垂直于主轴。

主轴由flex-direction定义，可以取 4 个值：

/* row或row-reverse，主轴将沿着行向延伸。 */
row
row-reverse
/* column或column-reverse，主轴会沿着页面的上下方向延伸——也就是块向。 */
column
column-reverse

flex-wrap

flex-wrap属性指定flex元素单行显示还是多行显示。如果允许换行，这个属性允许你控制行的堆叠方向。

由于flex-wrap的值设置为wrap，所以项目的子元素换行显示。若将其设置为nowrap，这也是初始值，它们将会缩小以适应容器，因为它们使用的是允许缩小的初始Flexbox值。如果项目的子元素无法缩小，使用nowrap会导致溢出，或者缩小程度还不够小。

对齐属性

align-item: 竖直方向对齐方式。

justify-content: 水平方向对齐方式。

经典用例

弹性盒子的典型用例

浮动和清除浮动

CSS 中的浮动（Float）和清除浮动（Clearing Floats）是布局设计中非常重要的概念，主要用于定位元素和构建多列布局等场景。

浮动（Float）

示例

浮动是一种样式属性，通过设置 float 属性可以使元素从正常的文档流（normal flow）中脱离出来，按照指定的方向移动，直到它的外边缘碰到包含框或者其他浮动元素的边缘为止。常见的浮动方向有两个：

  • float: left;：元素会尽可能向其容器的左侧靠拢，并让右侧的内容环绕它。
  • float: right;：元素会尽可能向其容器的右侧靠拢，并让左侧的内容环绕它。

浮动的一个常见用途是实现图像与文本环绕效果，但更多时候被用来构建多列布局，比如创建水平布局的导航菜单或其他并排显示的区块。

清除浮动（Clearing Floats）

当一个元素浮动后，它会导致其后的兄弟元素跟随其浮动，除非这些元素也设置了浮动属性。然而，这可能导致一些布局问题，如父容器高度坍塌（因为浮动元素不在文档流中，所以父容器可能无法感知其高度，表现为高度为 0），进而影响后续内容的布局。

为了处理这个问题，可以使用 clear 属性来清除浮动。常用的清除浮动方法有：

  • clear: both;：不允许元素的左边和右边有任何浮动元素。
  • clear: left;：元素的左边不允许有浮动元素。
  • clear: right;：元素的右边不允许有浮动元素。

清除浮动的常用技巧：

  1. 添加清浮动元素：
    在浮动元素后面添加一个空的 <div>，并设置 clear: both;，然后隐藏这个空元素（例如：.clearfix { clear: both; } 或 .clearfix::before, .clearfix::after { content: ""; display: table; clear: both; } 使用伪元素清除浮动）。

  2. 父元素 overflow 属性：
    给浮动元素的父元素设置 overflow 属性为 auto 或 hidden，这样可以触发 BFC（块格式化上下文），从而包含浮动元素，计算出正确的高度。

  3. 使用 Flexbox 或 Grid Layout：
    在现代布局中，可以通过 Flexbox 或 Grid 布局体系来替代浮动进行更灵活和直观的布局设计，避免了浮动带来的许多问题。

  4. CSS Grid：
    使用 CSS Grid 布局时，由于其天然的二维布局能力，通常不需要浮动来进行布局。

box-sizing

content-box 是默认值。如果你设置一个元素的宽为 100px，那么这个元素的内容区会有 100px 宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。

border-box 告诉浏览器：你想要设置的边框和内边距的值是包含在 width 内的。也就是说，如果你将一个元素的 width 设为 100px，那么这 100px 会包含它的 border 和 padding，内容区的实际宽度是 width 减去 (border + padding) 的值。大多数情况下，这使得我们更容易地设定一个元素的宽高。

定位

CSS 中的定位（Positioning）是指通过 CSS 的position属性来控制元素在页面中的布局位置。position属性有五个可选值：static（默认值）、relative、absolute、fixed和sticky。

  1. static：
    默认定位方式，元素遵循正常的文档流（Normal Flow），top、right、bottom、left属性无效。

  2. relative：
    相对定位，元素相对于其正常文档流（Static Position）的位置进行偏移。元素保持在文档流中原来的位置，但它周围的空间（原本占用的位置）仍然保留。可以使用top、right、bottom、left属性来设置偏移量。

  3. absolute：
    绝对定位，元素脱离文档流，相对于最近的非static定位的祖先元素进行定位。如果这样的祖先元素不存在，则相对于初始包含块（如或）进行定位。使用top、right、bottom、left属性设置其相对于定位上下文的位置。

  4. fixed：
    固定定位，元素脱离文档流，相对于浏览器窗口进行定位，即使页面滚动，元素的位置也会保持不变。同样使用top、right、bottom、left属性来设置其相对于浏览器窗口的位置。

  5. sticky：
    粘性定位，元素在正常文档流中按照常规流进行定位，直到遇到指定阈值（如到达视窗顶部或底部）时，才转变为相对于视窗定位，固定在某个位置。粘性定位的元素总是相对于其最近的非static定位祖先进行偏移，而非浏览器窗口。

定位属性配合top、right、bottom、left属性可以帮助开发者灵活地控制元素在页面中的布局，实现复杂的界面设计和响应式布局。

响应式设计

视频

手机/移动前端开发

响应式设计（Responsive Design）是一种网页设计策略，它使得网页能够根据访问设备（如桌面电脑、平板电脑、智能手机或智能电视等）的屏幕尺寸、方向和分辨率进行自适应调整，从而提供最佳的用户体验。这种设计方法确保了网站在各种不同大小和形状的屏幕上都能美观且易读，无论用户是通过什么设备访问网站。

响应式设计的基本原理和实践方法包括：

  1. 媒体查询（Media Queries）：
    使用 CSS3 的媒体查询，可以针对不同的设备视窗尺寸定义不同的 CSS 样式。例如，当屏幕宽度小于一定值时，可以调整布局，隐藏某些内容或改变字体大小。

  2. 弹性网格布局（Flexible Grid）：
    设计时采用百分比或弹性单位（如 rem、em）代替固定的像素值，使得布局可以随着窗口大小变化而伸缩。

  3. 可伸缩图片（Responsive Images）：
    图片的尺寸可以根据屏幕大小自动调整，例如使用max-width: 100%; height: auto;来确保图片不会超出其容器，并按比例缩放。

  4. 可伸缩字体（Fluid Typography）：
    字体大小也可能是相对的，基于视口宽度进行调整，确保在不同尺寸的屏幕上保持可读性。

  5. 适应性导航菜单（Adaptive Navigation Menus）：
    对于小屏幕设备，导航菜单可能会变成下拉列表或者汉堡菜单，以节省空间。

响应式设计的目标是创建一种无缝的用户体验，无论用户是在哪种设备上浏览网站，都能轻松访问内容和功能，并保持一致性。它已成为现代网页设计的标准实践，特别是在移动优先和跨平台兼容性越来越重要的今天。

响应式图片

媒体查询@media

@media 是 CSS 中的一个重要特性，用于定义针对不同媒体类型和条件的样式规则。通过 @media 查询，开发者可以根据设备视窗尺寸、设备分辨率、设备类型等因素为不同的设备环境提供定制化的样式。

基本语法格式如下：

@media media_query {
    /* 在满足媒体查询条件时应用的样式 */
    style_rules...
}

这里的 media_query 是一组媒体特性表达式，例如：

@media screen and (min-width: 768px) {
  body {
    background-color: lightblue;
  }
}

/* 或者 */

@media print {
  body {
    font-size: 10pt;
  }
}
  • 第一个示例表明当屏幕的最小宽度为 768 像素时，body 的背景颜色变为浅蓝色。
  • 第二个示例则是在打印文档时应用样式，将 body 的字体大小设置为 10pt。

@media 查询广泛应用于响应式网页设计（Responsive Web Design, RWD），根据设备特性调整布局、颜色、字体大小等，以优化不同设备（如桌面电脑、平板、手机等）上的用户体验。

媒体类型

除非使用 not 或 only 逻辑运算符，否则媒体类型是可选的，并且会（隐式地）应用 all 类型。

all - 适用于所有设备。

print - 适用于在打印预览模式下在屏幕上查看的分页材料和文档。

screen - 主要用于屏幕。

网格布局

网格布局（Grid Layout）是 CSS3 中的一项高级布局模块，旨在提供一种强大的二维布局系统，以创建复杂、响应式的网页布局。通过网格布局，开发者可以将容器划分为一系列行和列组成的网格，并灵活地定位和调整其内部元素的大小和位置。

在 CSS 中，使用 display: grid; 将一个容器元素声明为网格容器，然后可以定义以下属性来创建和控制网格：

  • grid-template-columns 和 grid-template-rows：用于定义网格的列和行轨道（track）的大小。可以使用长度值、百分比、fr 单位（fractional unit，用于分配可用空间）或者使用 repeat() 函数来创建重复的轨道。

  • grid-template-areas：用于定义网格区域的名称，可以将元素放置到特定的区域中。

  • grid-gap 或 grid-column-gap 和 grid-row-gap：用于设置网格内元素之间的间隙。

  • justify-items 和 align-items：控制网格项（grid items）在水平和垂直方向上的对齐方式。

  • place-items（简写）：同时设置 justify-items 和 align-items。

  • grid-auto-columns、grid-auto-rows 和 grid-auto-flow：用于处理超出显式定义行列范围的网格项，自动填充和排列多余的网格项。

  • grid-area：用于定义网格项占据的网格区域。

  • justify-self、align-self 和 place-self：控制单个网格项在其所在单元格内的对齐方式，可以覆盖容器层面的对齐设置。

多列布局

多列布局（Multi-column Layout）是 CSS 中用于创建报纸或杂志样式的多列文章布局的功能。在 CSS 中，主要有以下几种方法实现多列布局：

  1. CSS Multi-column Layout Module：

    • 使用 CSS 的多列布局模块，可以将一个块级元素的内容分成几列显示。
    • 主要相关属性有：
      • column-count: 设置元素应该被分割的列数。
      • column-width: 设置每列的理想宽度，浏览器会尽可能根据这个值来确定合适的列数。
      • column-gap: 设置列之间的间距。
      • column-rule: 设置列之间的边框样式、宽度和颜色。
      • break-inside: 防止内容在列之间断开。

    示例：

    .multi-column {
  column-count: 3;
  column-gap: 20px;
  column-rule: 1px solid #ccc;
}

  2. Flexbox：

    • 虽然 Flexbox 主要用于一维布局，但通过调整容器的方向（flex-direction: column），然后利用嵌套的 Flexbox 容器，也可以实现多列布局的效果。

  3. CSS Grid Layout：

    • CSS Grid 布局提供了一种更为强大和灵活的二维布局系统，非常适合创建多列布局。
    • 使用 grid-template-columns 属性定义列的数量和大小，可以轻松创建多列布局。

    示例：

    .grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 创建三列 */
  gap: 20px; /* 列之间的间距 */
}

根据实际需求和浏览器兼容性，可以选择适合的方式来实现多列布局。在现代浏览器中，CSS Multi-column Layout Module 和 CSS Grid Layout 是实现多列布局最常用且功能丰富的技术。

瀑布流布局

深入解析

视频

图片变形

clip-path

clip-path 是 CSS 中的一个属性，用于裁剪元素的可视区域，也就是定义一个只有在这个区域内内容才会被显示的剪切路径。它可以接受多种图形形状的值，包括圆形、椭圆、多边形、路径等，来裁剪元素的显示区域。

以下是一些常见的 clip-path 值：

  1. 基本形状：

    • inset()：创建一个矩形剪切区域，可以指定矩形的顶点坐标。
    clip-path: inset(10px 20px 30px 40px);

    这里，(10px 20px 30px 40px) 分别代表上、右、下、左的内边距。

  2. 几何形状：

    • circle()：创建一个圆形剪切区域，需要指定半径和中心点。
    clip-path: circle(50% at 50% 50%);

    这里，circle(50% at 50% 50%) 表示一个以元素中心为圆心、半径为元素宽高的 50%的圆形。

    • ellipse()：创建一个椭圆剪切区域，也需要指定半径和中心点。
    clip-path: ellipse(75% 50% at 50% 50%);

    这里，ellipse(75% 50% at 50% 50%) 表示一个以元素中心为焦点，水平半径为元素宽度的 75%，垂直半径为元素高度的 50%的椭圆。

  3. **polygon()**：

    • 通过一系列坐标定义一个多边形剪切区域。
    clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);

    这里，polygon(0 0, 100% 0%, 100% 100%, 0% 100%) 定义了一个正方形剪切区域。

  4. URL 引用：

    • 通过 URL 引用 SVG 中的<clipPath>元素定义的剪切路径。
    clip-path: url(#myClipPath);

    在对应的 SVG 文件或嵌入在 HTML 中的 SVG 中定义名为myClipPath的剪切路径。

注意：clip-path属性对旧版本浏览器的支持程度不一，建议结合 -webkit-clip-path 等前缀属性以及渐进增强策略来确保更好的兼容性。此外，还可以使用 mask 属性作为 clip-path 的备选方案，以获得更广泛的支持。

filter

filter 是 CSS 中的一个属性，用于对元素（如图片、背景或 SVG 图形）应用图形效果，如模糊、灰度、饱和度调整、阴影等。它可以在不依赖于图像处理软件的情况下，直接在浏览器中对元素进行实时滤镜处理。

以下是一些常见的 filter 属性值：

  1. 模糊效果：

    • blur()：对元素进行模糊处理。
    filter: blur(10px);

  2. 灰度和饱和度调整：

    • grayscale()：将元素转换为灰度图像。
    filter: grayscale(100%); /* 完全灰度 */
    • sepia()：将元素转换为深褐色色调。
    filter: sepia(100%);
    • saturate()：增加或减少图像饱和度。
    filter: saturate(200%); /* 增加饱和度 */

  3. 亮度和对比度调整：

    • brightness()：调整图像亮度。
    filter: brightness(200%); /* 提高亮度 */
    • contrast()：调整图像对比度。
    filter: contrast(200%); /* 提高对比度 */

  4. 阴影效果：

    • drop-shadow()：给元素添加阴影效果。
    filter: drop-shadow(10px 10px 5px rgba(0, 0, 0, 0.5));

  5. 组合多个滤镜：

    • 可以通过空格分隔多个滤镜效果，依次应用到元素上。
    filter: grayscale(50%) blur(5px);

需要注意的是，filter 属性对浏览器的兼容性较好，但在一些较老的浏览器中可能不支持。因此，可以结合使用 -webkit-filter 前缀属性来提高兼容性。同时，过于复杂的滤镜可能会影响性能，尤其是在移动设备上，使用时需权衡视觉效果与性能之间的平衡。

blend-mode

mix-blend-mode（混合模式）是 CSS 中的一个属性，它定义了元素的内容应该如何与其底层背景或下面的元素内容进行混合。混合模式允许元素的像素颜色与底层元素的像素颜色进行数学运算，产生合成效果，类似于在图像编辑软件（如 Photoshop）中使用的图层混合模式。

mix-blend-mode 支持多种混合模式，包括但不限于以下几种：

  1. normal：默认模式，元素不与其他元素混合，每个元素独立显示。
  2. multiply：将顶层元素的颜色值与底层元素的颜色值相乘，加深整体颜色。
  3. screen：将顶层元素的颜色与底层元素的颜色进行互补色相乘，再求反，产生亮化的混合效果。
  4. overlay：根据底层颜色的明暗程度，分别采用multiply或screen模式进行混合。
  5. darken：比较顶层和底层每个像素的亮度，选择较暗的那个颜色作为混合结果。
  6. lighten：比较顶层和底层每个像素的亮度，选择较亮的那个颜色作为混合结果。
  7. color-dodge：使底层颜色变得更亮，以反映顶层颜色的亮度信息。
  8. color-burn：使底层颜色变得更暗，以反映顶层颜色的黑暗信息。
  9. hard-light：根据顶层颜色的明暗程度，分别采用color-dodge或color-burn模式进行混合。
  10. difference：取两层颜色之差，产生强烈的对比效果。
  11. hue、saturation、color和luminosity：分别混合颜色的色相、饱和度、色度（色彩信息）和亮度信息。

示例代码：

.element {
  mix-blend-mode: multiply;
}

这段 CSS 会让.element元素的内容与其下方的元素内容按照multiply模式进行混合。

transform

transform 是 CSS 中用于实现元素变形和位移的一种属性，它可以对元素进行旋转、缩放、倾斜、平移等操作，从而改变元素在视觉上的表现形式，而不影响其在文档流中的原始位置。transform属性适用于 2D 和 3D 转换，增强了网页布局的动态效果和交互体验。

以下是一些常见的 transform 属性值：

  1. 2D 变形：

    • rotate()：旋转元素。
      transform: rotate(45deg);
    • scale()：缩放元素。
      transform: scale(1.5); /* 以元素中心点放大1.5倍 */
    • translate()：平移元素。
      transform: translate(
  50px,
  100px
); /* 水平向右移动50像素，垂直向下移动100像素 */
    • skew()：倾斜元素。
      transform: skewX(30deg); /* 沿X轴倾斜30度 */

  2. 3D 变形：

    • rotate3d()：三维旋转元素。
      transform: rotate3d(1, 1, 0, 45deg);
    • scale3d()：三维缩放元素。
      transform: scale3d(1.5, 1, 1);
    • translate3d()：三维平移元素。
      transform: translate3d(50px, 100px, 0); /* 在Z轴为0的位置上平移 */

  3. 组合变形：

    • 可以通过空格分隔多个变形函数，按顺序依次应用。
      transform: rotate(45deg) scale(1.5);

此外，transform-origin 属性可以用来设置变形的基点，即变形动作发生的参照点。transform-style 用于定义 3D 元素的子元素是否也为 3D 空间，perspective 用于设置透视效果，这些属性配合 transform 一起使用，可以创造出更丰富的视觉效果。

animation

animation 是 CSS 中的一个复合属性，用于定义动画效果。它允许开发者创建并控制动画序列，包括动画名称、持续时间、延迟时间、迭代次数、速度曲线、播放方向等。

动画的工作原理是将一系列关键帧（keyframes）定义为 CSS 规则，然后将这些关键帧应用到元素上。关键帧定义了动画在各个时间段内的样式变化。

animation 属性的组成部分包括：

  1. animation-name：定义动画的名称，引用先前定义的关键帧名称。
  2. animation-duration：定义动画完成一个周期所花费的时间，通常以秒或毫秒为单位。
  3. animation-timing-function：定义动画的速度曲线，如匀速、加速、减速等。
  4. animation-delay：定义动画开始前等待的时间。
  5. animation-iteration-count：定义动画播放的次数，可以是整数值（表示播放次数）、infinite（无限次循环播放）或其他。
  6. animation-direction：定义动画播放的方向，如正常顺序播放、逆序播放、每次交替方向播放等。
  7. animation-fill-mode：定义动画结束后元素的样式，如保持最后一个关键帧的样式、回到初始关键帧的样式等。
  8. animation-play-state：控制动画是否正在运行，可以设置为 running 或 paused。

示例代码：

@keyframes fadeInOut {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.box {
  animation: fadeInOut 2s ease-in-out infinite;
}

在这个示例中，我们首先定义了一个名为 fadeInOut 的动画，该动画描述了元素从透明度 0 逐渐变为 1 然后再变回 0 的过程。接着在 .box 类的样式中应用了这个动画，设置了动画的名称、持续时间为 2 秒、速度曲线为 ease-in-out，并设置无限次循环播放。

雪碧图

视频

CSS Sprite 是一种网页优化技术，主要用于减少 HTTP 请求的数量，从而提高网页加载速度。通过将多个小图标或者背景图像合并到一张大图中，然后利用 CSS 的背景定位 background-position 属性来显示需要的部分。

具体实现方式是：

  1. 创建一个包含所有小图标的单一图像文件，即“Sprite”图片。
  2. 在 CSS 中为每个需要用到这些小图标的元素定义背景图片（指向整个 Sprite 图片）。
  3. 使用background-position属性精确地指定每个元素应该显示 Sprite 图片中的哪个部分。例如，如果第一个图标位于 Sprite 图片的左上角（0, 0），而第二个图标在其下方，则可以分别为两个元素设置不同的偏移量。

例如：

.icon1 {
  width: 20px;
  height: 20px;
  background-image: url("spritesheet.png");
  background-position: 0 0; /* 显示Sprite图片左上角的内容 */
}

.icon2 {
  width: 20px;
  height: 20px;
  background-image: url("spritesheet.png");
  background-position: -20px 0; /* 假设第二个图标距离第一个图标20px，向下移动显示下一个图标 */
}

通过这种方法，浏览器只需加载一个较大的图像文件，而不是分别加载每个小图标，减少了 HTTP 请求和网络传输的时间开销，有助于提升网站性能。同时，要注意合理布局 Sprite 图片中的元素，以便于计算每个元素对应的背景位置坐标。

JavaScript

数据

数据类型

在 JavaScript 中，undefined、null 和 NaN 是三种不同的值，各自代表不同的意义和用途：

  1. undefined：

    • 类型：undefined 是一种基本数据类型。
    • 含义：表示变量已声明但未初始化，或者对象属性不存在时返回的值。在 JavaScript 中，函数没有明确返回值时，也会返回 undefined。
    • 特性：typeof undefined 返回 'undefined'，undefined == null 为 true，这是因为 JavaScript 在执行相等性检查时会进行类型转换，把 undefined 视为 null。

  2. null：

    • 类型：在 JavaScript 中，null 通常被认为是一个特殊的对象值，但实际上它是一个类型，typeof null 返回 'object'，但这被视为 JavaScript 的一个历史遗留错误。
    • 含义：表示一个空值或者无对象值，它有意表示没有任何对象值或者没有对象被引用。null 是一个明确的标识，表明一个变量是有意为之的空值。
    • 特性：尽管 null 类型特殊，但是在相等性检查时，null == undefined 为 true，但 null === undefined 为 false，因为它们虽然在宽松相等检查中被认为是相等的，但在严格相等检查时类型不同。

  3. NaN：

    • 类型：NaN 是 Not-A-Number 的缩写，也是 JavaScript 中的一种特殊类型，属于 Number 类型，但不是一个正常的数字值。
    • 含义：当一个数学运算的结果无法表示为数字时，JavaScript 会返回 NaN。例如，0/0、Math.sqrt(-1) 或者将一个非数字的字符串转换为数字（如 Number("abc")）都会得到 NaN。
    • 特性：NaN 不等于任何值，包括它自身，即 NaN === NaN 为 false。可以使用全局方法 isNaN() 或者 Number.isNaN() 来检测一个值是否为 NaN。

总结来说，undefined 表示变量尚未初始化或属性不存在，null 表示故意设置的空值，而 NaN 表示无法表示为数字的特殊值。在实际编程中，理解和正确处理这些值对避免程序错误至关重要。

函数

JavaScript 函数是可重用的代码块，用于执行特定任务并在需要时返回结果。在 JavaScript 中，函数定义和使用的基本形式如下：

定义函数：

// 使用函数声明（function declaration）
function functionName(parameters) {
  // 函数体（包含执行的代码）
  statements;
  return value; // 可选，用于返回函数结果
}

// 使用函数表达式（function expression）
const functionName = function (parameters) {
  // 函数体
  statements;
  return value;
};

// 使用箭头函数（Arrow Function Expression）
const functionName = (parameters) => {
  // 函数体，如果只有一个表达式并且不需要花括号，则可以省略花括号和return关键字
  return value;
};

调用函数：

functionName(argumentValues);

参数和返回值：

  • 函数定义时在函数名后面的括号内可以定义零个或多个参数，这些参数在函数调用时接收传递的值。
  • 函数体内的 return 语句用于结束函数执行并返回一个值。如果不返回任何值，函数默认返回 undefined。

示例：

// 函数声明
function add(a, b) {
  return a + b;
}

// 调用函数并打印结果
console.log(add(3, 5)); // 输出：8

// 函数表达式
const subtract = function (x, y) {
  return x - y;
};

console.log(subtract(8, 3)); // 输出：5

// 箭头函数
const multiply = (num1, num2) => num1 * num2;

console.log(multiply(2, 4)); // 输出：8

除了基本的函数，JavaScript 还支持闭包、函数作为参数传递、函数作为返回值等功能，使得 JavaScript 函数功能极其强大和灵活。

文本处理

JavaScript 提供了一系列内置的文本处理方法，用于处理字符串和文本内容。以下是一些常见的文本处理方法和功能：

  1. 字符串拼接：

    • 使用加号 + 进行字符串连接。
    var str1 = "Hello";
var str2 = "world";
var result = str1 + " " + str2; // 结果为 "Hello world"
    • 使用模板字符串（Template Literals）：
    const name = "John";
const message = `Hello, ${name}!`; // 结果为 "Hello, John!"

  2. 字符串长度：

    • length 属性获取字符串长度。
    var str = "Hello World";
console.log(str.length); // 输出 11

  3. 提取子串：

    • substring() 方法提取字符串的一部分。
    var subStr = str.substring(6, 11); // 结果为 "World"
    • slice() 方法也有类似的用途。
    var subStr = str.slice(6, 11); // 结果同样为 "World"
    • substr() 方法也提取子字符串，但参数略有不同。
    var subStr = str.substr(6, 5); // 结果为 "World"

  4. 查找子串：

    • indexOf() 方法查找子字符串出现的第一个索引。
    var index = str.indexOf("World"); // 输出 6
    • includes() 方法检查字符串是否包含另一个子字符串。
    var hasWorld = str.includes("World"); // 输出 true

  5. 替换子串：

    • replace() 方法用于替换字符串中的某个子串。
    var newStr = str.replace("World", "Universe"); // 结果为 "Hello Universe"

  6. 转换大小写：

    • toUpperCase() 方法将字符串转换为大写。
    var upperCaseStr = str.toUpperCase(); // 结果为 "HELLO WORLD"
    • toLowerCase() 方法将字符串转换为小写。
    var lowerCaseStr = str.toLowerCase(); // 结果为 "hello world"

  7. trim() 方法去除字符串两端的空白字符。

    var trimmedStr = "   Hello World   ".trim(); // 结果为 "Hello World"

  8. split() 方法将字符串分割为数组。

    var words = str.split(" "); // 结果为 ["Hello", "World"]

  9. 字符串模板：

    • 使用反引号 ` backticks 创建多行或嵌入表达式的字符串。
    let name = "Alice";
let greeting = `Hello, ${name}!`; // 结果为 "Hello, Alice!"

  10. 正则表达式：

    • JavaScript 中可以结合正则表达式进行更复杂的文本处理，如匹配、查找、替换等操作。

有用的字符串方法

JavaScript 中有许多有用的字符串方法，以下是其中一些常见的和实用的：

  1. 获取长度：

    var str = "Hello, World!";
console.log(str.length); // 输出13

  2. 拼接字符串：

    var str1 = "Hello, ";
var str2 = "World!";
var combined = str1 + str2; // 输出 "Hello, World!"

    或者使用模板字符串（ES6+）：

    var name = "World";
var greeting = `Hello, ${name}!`; // 输出 "Hello, World!"

  3. 检索子串：

    var str = "Hello, World!";
console.log(str.indexOf("World")); // 输出 7，找到"World"的第一个字符索引

  4. 替换子串：

    var str = "Hello, World!";
var replaced = str.replace("World", "Earth");
console.log(replaced); // 输出 "Hello, Earth!"

  5. 提取子串：

    var str = "Hello, World!";
console.log(str.substring(7)); // 输出 "World!"
console.log(str.slice(7)); // 输出 "World!"

// 使用 start 和 end 索引
console.log(str.substring(7, 12)); // 输出 "World"
console.log(str.slice(7, 12)); // 输出 "World"

  6. 转换大小写：

    var str = "Hello, World!";
console.log(str.toUpperCase()); // 输出 "HELLO, WORLD!"
console.log(str.toLowerCase()); // 输出 "hello, world!"

  7. 查找字符：

    var str = "Hello, World!";
console.log(str.charAt(0)); // 输出 "H"

  8. 截取字符串：

    var str = "Hello, World!";
console.log(str.slice(-5)); // 输出 "World!"，从末尾截取5个字符
console.log(str.substr(-5)); // 输出 "World!"，从倒数第五个字符开始截取到字符串末尾
console.log(str.substring(0, 5)); // 输出 "Hello"，从0开始截取到第5个字符（不包括第5个）

  9. 拆分字符串：

    var str = "Hello, World!";
var arr = str.split(", "); // 输出 ["Hello", "World!"]

  10. 修剪空格：

    var str = "   Hello, World!   ";
console.log(str.trim()); // 输出 "Hello, World!"

  11. 检查是否以某个字符串开始或结束：

    var str = "Hello, World!";
console.log(str.startsWith("Hello")); // 输出 true
console.log(str.endsWith("!")); // 输出 true

  12. 正则表达式相关方法：

    var str = "I love JavaScript.";
console.log(str.match(/love/i)[0]); // 输出 "love"，忽略大小写匹配 "love"
console.log(str.replace(/JavaScript/, "programming")); // 输出 "I love programming."

数组

JavaScript 数组是有序的数据集合，可以存储任意类型的多个值。数组在 JavaScript 中是一个对象，但它具有自己的特殊性质和方法。下面是一些关于 JavaScript 数组的基础概念和操作：

创建数组

方式一：构造函数创建

let arr1 = new Array(); // 创建一个空数组
let arr2 = new Array(3); // 创建一个长度为3的空数组，元素默认为undefined
let arr3 = new Array(1, 2, 3, 4); // 创建一个包含四个元素的数组

方式二：字面量创建

let arr = []; // 创建一个空数组
let arr = [1, 2, 3, 4]; // 创建一个包含四个元素的数组

访问数组元素

let fruits = ["apple", "banana", "cherry"];
console.log(fruits[0]); // 输出 'apple'，数组的索引是从0开始的

修改和添加元素

fruits[0] = "orange"; // 修改第一个元素
fruits.push("date"); // 在数组末尾添加元素

删除元素

fruits.pop(); // 删除并返回数组最后一个元素
fruits.shift(); // 删除并返回数组第一个元素
arr.splice(index, 1); // 删除指定索引位置的元素

查找元素

let index = fruits.indexOf("banana"); // 返回 'banana' 在数组中的索引，若不存在则返回 -1

遍历数组

for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

// 或者使用 forEach 方法遍历
fruits.forEach(function (item, index, array) {
  console.log(item);
});

数组的其他方法

  • length 属性：获取数组的长度（元素数量）。
  • join(separator) 方法：将数组元素连接成一个字符串，可指定分隔符，默认是逗号。
  • slice(start, end) 方法：提取数组的一部分，返回一个新的数组。
  • sort(compareFunction) 方法：对数组元素进行排序，默认按照字符串排序，可以提供比较函数定制排序规则。
  • reverse() 方法：颠倒数组中元素的顺序。
  • concat(array2, ...[, arrayN]) 方法：将一个或多个数组（或值）与原数组合并，返回新数组，原数组不变。

ES6 新增方法

  • Array.from()：将类数组对象或可迭代对象转换为数组。
  • Array.of()：创建一个具有可变数量参数的新数组实例。
  • find(callbackFn[, thisArg])：查找数组中满足提供的测试函数的第一个元素。
  • findIndex(callbackFn[, thisArg])：查找数组中满足提供的测试函数的第一个元素的索引。
  • map()、filter()、reduce()、forEach() 等方法用于高级数组操作和处理。

对象

JavaScript 中的对象是一种数据结构，用于存储键值对集合，其中每个键是一个字符串（在 ES6 中也可以是 Symbol），每个值可以是任意类型的数据，包括但不限于字符串、数字、布尔值、函数、数组，甚至是其他对象。JavaScript 对象是动态类型的，允许在运行时添加、删除和修改其属性。

创建对象的常见方式有：

  1. 对象字面量（Literal Notation）：
let obj = {
  property1: "value1",
  property2: 123,
  method: function () {
    console.log("Method called");
  },
};
  1. 构造函数（Constructor Function）：
function Person(name, age) {
  this.name = name;
  this.age = age;
}

let person = new Person("Alice", 25);
  1. 对象创建方法：
  • Object.create()：使用原型创建新对象。
  • Object.assign()：合并源对象的属性到目标对象。

JavaScript 对象属性可以动态访问和修改：

obj.property1 = "new value";
console.log(obj.property1); // 输出 'new value'

// 动态添加属性
obj.newProperty = "added dynamically";
console.log(obj.newProperty); // 输出 'added dynamically'

// 删除属性
delete obj.property1;

对象还可以通过for...in循环或Object.keys()、Object.values()、Object.entries()方法进行遍历。

ECMAScript 6（ES6）引入了class关键字，它为定义类提供了更清晰的语法，但实际上类还是基于原型的 JavaScript 对象。

class Car {
  constructor(make, model) {
    this.make = make;
    this.model = model;
  }

  drive() {
    console.log(`${this.make} ${this.model} is driving.`);
  }
}

let myCar = new Car("Toyota", "Camry");
myCar.drive(); // 输出 'Toyota Camry is driving.'

此外，JavaScript 对象还有一个重要的概念叫“原型链”，它决定了对象如何查找属性和方法，以及继承关系。

表达式和运算符

解构赋值

解构赋值是 JavaScript 中的一项特性，允许将数组或对象的属性或数组元素的值直接提取并赋值给一组变量。这种语法简化了从复杂数据结构中提取多个值的操作，使得代码更简洁易读。

数组的解构赋值：

let arr = [1, 2, 3, 4];
let [a, b, c] = arr;
console.log(a); // 输出：1
console.log(b); // 输出：2
console.log(c); // 输出：3
// 注意，数组剩余部分可以用...运算符收集
let [first, second, ...rest] = arr;
console.log(rest); // 输出：[3, 4]

对象的解构赋值：

let obj = { firstName: "John", lastName: "Doe", age: 30 };
let { firstName, lastName } = obj;
console.log(firstName); // 输出：'John'
console.log(lastName); // 输出：'Doe'

// 如果属性名和变量名不同，可以指定
let { firstName: givenName, lastName: familyName } = obj;
console.log(givenName); // 输出：'John'
console.log(familyName); // 输出：'Doe'

默认值：

解构赋值可以设置默认值，当尝试解构的属性不存在或者值为 undefined 时，会使用默认值。

let { firstName = "Default", age = 20 } = { firstName: "John" };
console.log(firstName); // 输出：'John'
console.log(age); // 输出：20，因为age在对象中未定义，所以使用了默认值20

嵌套解构：

解构赋值还可以用于嵌套的对象和数组。

let nestedObj = { user: { name: "Alice", age: 25 }, pets: ["cat", "dog"] };
let {
  user: { name },
  pets: [pet1, pet2 = "fish"],
} = nestedObj;
console.log(name); // 输出：'Alice'
console.log(pet1); // 输出：'cat'
console.log(pet2); // 输出：'dog'，即使pets数组中没有第二个元素，pet2也会有默认值'fish'

箭头函数表达式

箭头函数表达式（Arrow Function Expression）是 ECMAScript 6（ES6）引入的一种简洁的函数定义语法。箭头函数以其简洁的语法和特殊的this绑定机制，在 JavaScript 中广泛应用。

基本语法结构如下：

(param1, param2, ..., paramN) => expression // 单行表达式体，没有大括号 {}
(param1, param2, ..., paramN) => { statements } // 多行语句体，需要用大括号包裹
  • 当箭头函数的函数体只有一行代码，并且不需要返回值时，可以省略大括号，此时函数的返回值是这一行表达式的计算结果。
  • 当函数体有多行代码或需要明确返回一个值时，则需要使用大括号包裹代码块，并在需要返回值时使用return关键字。

箭头函数的一些重要特性包括：

  1. 简洁语法：相较于传统的函数声明和函数表达式，箭头函数的语法更为简洁。

  2. 隐式返回：当函数体只包含一个表达式时，可以省略return关键字，函数会自动返回该表达式的值。

  3. this绑定：箭头函数没有自己的this上下文，它会捕获其所在（即定义的位置）上下文的this值，也就是说箭头函数的this值是静态的，不会受调用方式的影响。

例如：

const add = (x, y) => x + y; // 单行表达式箭头函数，没有显式return，自动返回结果

const multiply = (x, y) => {
  let product = x * y;
  return product; // 多行语句体箭头函数，需要明确return
};

let obj = {
  count: 1,
  increment: () => this.count++, // 这里的this将绑定到obj对象，而不是调用increment函数时的上下文
};

总的来说，箭头函数不仅简化了代码编写，还在很大程度上解决了 JavaScript 中this指向的常见问题。

可选链运算符(?.)

可选链运算符（?.）是 JavaScript 语言中的一个特性，它允许在尝试访问对象的深层属性或调用方法时，如果在链式路径中的任何一个引用是 null 或 undefined，则整个表达式返回 undefined，而不会抛出 TypeError 异常。

例如：

const obj = {
  nested: {
    prop: "value",
  },
};

// 不使用可选链运算符
console.log(obj.nested.prop); // 如果 obj 或 obj.nested 不存在，则会抛出 TypeError

// 使用可选链运算符
console.log(obj?.nested?.prop); // 如果 obj 或 obj.nested 不存在，输出 undefined，而不是抛出错误

在上面的例子中，obj?.nested?.prop 表达式首先检查 obj 是否存在，如果存在则继续查找 obj.nested，如果 nested 也存在，则返回 prop 的值；只要链式调用中的任意一项为 null 或 undefined，表达式就会立即停止计算并返回 undefined。

这种运算符极大地提高了代码的健壮性和可读性，尤其是在处理嵌套很深的对象属性或不确定对象结构时。

空值合并运算符(??)

JavaScript 中的空值合并运算符（Nullish Coalescing Operator）?? 是一个逻辑运算符，它用于在左侧表达式为 null 或 undefined 时，返回右侧表达式的值。如果左侧表达式的值既不是 null 也不是 undefined，那么就返回左侧表达式的值。

使用语法：

variable ?? default_value;

这里的 variable 是要检查的变量或表达式，如果它的值为 null 或 undefined，则表达式返回 default_value 的值。否则，返回 variable 的值。

举例说明：

let name = null;
let welcomeMessage = name ?? "Guest"; // welcomeMessage 将会是 "Guest"，因为 name 为 null

let age = 25;
let ageMessage = age ?? "Age unknown"; // ageMessage 将会是 25，因为 age 有一个非空值

空值合并运算符与逻辑或运算符 || 的区别在于，|| 在左侧表达式值为 falsy（例如：0、''（空字符串）、false 等）时也会返回右侧表达式的值，而 ?? 只在 null 或 undefined 时才返回右侧表达式。这就意味着，如果你只想在变量未定义或显式设置为 null 时提供默认值，?? 是更为精确的选择。

Document

在 Web 开发中，document 是浏览器提供的全局对象，它是 HTML DOM（Document Object Model）的根节点，代表了整个 HTML 文档。通过 document 对象，开发者可以访问和操作网页上的所有 HTML 元素、属性以及内容。

以下是 document 对象的一些主要功能和属性：

  1. 属性：

    • document.URL: 返回当前文档的 URL。
    • document.title: 获取或设置当前文档的标题。
    • document.body: 获取文档的 <body> 元素。

  2. 方法：

    • document.getElementById(id): 通过 ID 获取页面上的某个元素。
    • document.querySelector(selector): 使用 CSS 选择器获取匹配的第一个元素。
    • document.querySelectorAll(selector): 获取匹配 CSS 选择器的所有元素列表。
    • document.createElement(tagName): 创建一个新的 HTML 元素。
    • document.appendChild(element): 向文档的某个元素内部追加子元素。
    • document.write(text): 向文档写入文本或 HTML 表达式，通常用于文档加载期间，但在文档加载完毕后再调用会重写整个文档。

  3. 事件监听：

    • document.addEventListener(eventType, handlerFunction, options): 为文档添加事件监听器。

  4. 遍历文档结构：

    • document.getElementsByTagName(tagName): 获取文档中所有指定标签名的元素。
    • document.getElementsByClassName(className): 获取文档中所有指定类名的元素。

通过 document 对象，我们可以动态地修改页面内容、添加或删除元素、响应用户交互事件以及获取或设置 HTML 元素的各种属性和内容。

方法

document.querySelector()

document.querySelector() 是一个在 JavaScript 中用于获取 HTML 文档中匹配指定 CSS 选择器的第一个元素的方法。该方法属于 document 对象，返回的是符合条件的 DOM 元素的引用，如果没有匹配的元素，则返回 null。

基本语法如下：

const element = document.querySelector(selector);
  • selector：必填参数，接受一个字符串作为 CSS 选择器，用来指定要查找的元素。

例如：

// 获取页面上第一个id为"myId"的元素
const myElement = document.querySelector("#myId");

// 获取页面上第一个类名为"myClass"的元素
const classElement = document.querySelector(".myClass");

// 获取页面上第一个类型为"button"的元素
const buttonElement = document.querySelector("button");

请注意，querySelector() 方法只会返回匹配到的第一个元素。如果你需要获取所有匹配的选择器，请使用 document.querySelectorAll() 方法，它会返回一个 NodeList（类似数组的对象），包含了所有匹配的选择器的元素。

DOM 表单事件

EventTarget.addEventListener()

addEventListener() 是 JavaScript 事件处理模型中一个重要的方法，主要用于给 DOM 元素或其他实现了 EventTarget 接口的对象绑定事件监听器。当指定的事件在目标元素上触发时，预先注册的监听器函数将会被执行。

语法：

target.addEventListener(type, listener[, options]);

参数说明：

  • type（必需）：字符串，代表要监听的事件类型，例如 'click'、'mouseover' 等。

  • listener（必需）：事件处理器函数，当指定的 type 事件发生时，这个函数会被调用。也可以是一个实现了 EventListener 接口的对象。

  • options（可选）：一个可选对象，用于指定附加选项。可以包含以下属性：

    • capture：布尔值，表示事件是否在捕获阶段触发监听器，默认为 false，即冒泡阶段触发。
    • once：布尔值，表示监听器是否只执行一次，之后自动移除，默认为 false。
    • passive：布尔值，指示浏览器是否应在被动式（passive）监听器上阻止默认行为。如果设置为 true，表示永远不会调用 preventDefault() 来阻止默认行为。

示例代码：

// 给一个id为'myButton'的HTML元素绑定点击事件
var myButton = document.getElementById("myButton");

myButton.addEventListener("click", function (event) {
  console.log("Button clicked!");
});

// 使用箭头函数
myButton.addEventListener(
  "click",
  (event) => {
    console.log("Button clicked using arrow function!");
  },
  { once: true }
); // 只触发一次

在这个例子中，当用户点击 id 为myButton的按钮时，会打印出消息到控制台。同时，第二个监听器只会触发一次，然后自动移除。

EventTarget.removeEventListener()

EventTarget.removeEventListener() 是 JavaScript 中的一个方法，用于从指定的 EventTarget（即能接收事件的对象，如 DOM 元素、Window 等）上移除之前通过 addEventListener() 添加的事件监听器。

这个方法接受三个参数：

  1. type（必需）：字符串，表示要移除的事件类型，例如 'click'、'load' 等。

  2. listener（必需）：事件处理函数，即之前通过 addEventListener() 注册的函数。

  3. options（可选）：对象，提供了一些附加选项，如 capture（布尔值，表示是否在捕获阶段移除事件监听器，默认为 false，即在冒泡阶段移除）和 once（布尔值，仅当 listener 是通过 addEventLister() 的 once 选项设置的监听器时才生效）。

示例：

// 添加事件监听器
let button = document.getElementById("myButton");
let handleClick = function () {
  console.log("Button clicked!");
};

button.addEventListener("click", handleClick);

// 移除事件监听器
button.removeEventListener("click", handleClick);

在上面的示例中，我们首先为一个按钮元素添加了一个点击事件监听器。然后，我们使用 removeEventListener() 方法移除了这个监听器，所以之后点击这个按钮将不会再触发 handleClick 函数。

事件和方法提交

  1. 表单提交事件:

    • submit 事件：当表单通过点击提交按钮或在表单元素上调用 .submit() 方法时触发。此事件可用于在提交前执行验证、清理或防止默认提交行为。
    document
  .getElementById("myForm")
  .addEventListener("submit", function (event) {
    event.preventDefault(); // 阻止默认提交行为
    // 在此处进行表单验证或处理表单数据
  });

  2. 表单提交方法:

    • .submit() 方法：用于提交表单数据到服务器。通常在验证成功后手动触发。
    var form = document.getElementById("myForm");
form.submit(); // 手动提交表单

  3. 相关表单事件:

    • input 事件：当表单控件（如文本输入框、选择框等）的值发生变化时触发，用于实时监控和处理用户输入。
    • change 事件：当表单控件的值发生变化且失去焦点后触发，主要用于单选按钮、复选框和选择框等。
    • focus 和 blur 事件：分别在表单控件获取和失去焦点时触发，可用于提示信息或验证。

  4. 获取表单数据:

    • form.elements：返回表单中所有表单控件组成的 HTMLCollection，可以遍历这些元素并获取它们的值。
    • element.value：获取单个表单控件的值，例如 document.getElementById('username').value。

  5. 表单验证:

    • 在提交事件处理程序中进行验证，可以使用正则表达式、内置校验 API（HTML5 支持）或自定义函数来检查表单数据的有效性。

阻止表单提交默认事件

在 JavaScript 中，阻止表单默认的提交事件通常是为了执行自定义的验证逻辑或异步提交操作。当表单提交时，如果不希望浏览器执行默认的提交行为（例如，重载页面或发送 HTTP POST 请求到 action 属性指定的 URL），可以通过调用事件对象的preventDefault()方法来阻止。

以下是一个示例：

<form id="myForm">
  <!-- 表单控件 -->
  <button type="submit">提交</button>
</form>

<script>
  document
    .getElementById("myForm")
    .addEventListener("submit", function (event) {
      event.preventDefault(); // 阻止表单的默认提交行为

      // 在这里进行表单验证或其他自定义处理
      if (!validateForm()) {
        alert("表单验证失败，请检查您的输入！");
        return;
      }

      // 如果验证通过，可以执行异步提交或其他操作
      submitFormAsync();
    });

  // 示例验证函数
  function validateForm() {
    // 实现具体的表单验证逻辑
    // 返回true表示验证通过，false表示验证失败
    return true;
  }

  // 示例异步提交函数
  function submitFormAsync() {
    // 使用Ajax或其他技术将表单数据发送到服务器
    // 这里仅为示意，实际项目中请替换为真实代码
  }
</script>

在这个示例中，当表单提交时，首先调用event.preventDefault()阻止默认提交行为。然后执行自定义的验证逻辑，如果验证失败则显示错误消息；如果验证通过，则调用submitFormAsync函数进行异步提交操作。这样既能保证表单数据的有效性，又能避免页面不必要的刷新或跳转。

表单聚焦/失焦事件

在 HTML 表单中，有两个相关的事件用于处理元素聚焦和失焦的场景，分别是：

  1. focus 事件：
    当元素（如输入框、文本域、按钮等）获得焦点（用户开始对其进行操作，如点击或通过键盘 Tab 键切换到该元素）时触发。

    document
  .getElementById("myInput")
  .addEventListener("focus", function (event) {
    // 当元素获取焦点时执行的操作
    console.log("元素已获取焦点");
    // 可能会执行一些视觉变化，如高亮显示、清除提示信息等
  });

  2. blur 事件：
    当元素失去焦点（用户离开该元素，如点击页面上的其他地方或通过键盘 Tab 键切换到其他元素）时触发。

    document
  .getElementById("myInput")
  .addEventListener("blur", function (event) {
    // 当元素失去焦点时执行的操作
    console.log("元素已失去焦点");
    // 可能会执行一些验证、保存临时数据、显示提示信息等操作
  });

这两个事件常常搭配使用，例如在用户聚焦输入框时清除错误提示信息，在用户失焦时执行数据验证并重新显示可能存在的错误信息。

输入事件

在 HTML 表单中，有几个与用户交互相关的事件，包括change、input、cut、copy和paste事件，它们分别对应不同的用户操作：

  1. change 事件：

    • 当表单元素（如输入框、选择框、复选框等）的值发生改变且失去焦点时触发。通常用于一次性提交或验证用户更改后的表单值。
    document
  .getElementById("myInput")
  .addEventListener("change", function (event) {
    let newValue = event.target.value;
    console.log("输入值已改变:", newValue);
    // 验证或处理新的表单值
  });

  2. input 事件：

    • 当表单元素的值发生改变时立即触发，无论元素是否失去焦点。对于实时反馈或即时验证非常有用。
    document
  .getElementById("myInput")
  .addEventListener("input", function (event) {
    let currentValue = event.target.value;
    console.log("实时输入值:", currentValue);
    // 实时处理或验证输入值
  });

  3. cut 事件：

    • 当用户剪切（通过键盘快捷键 Ctrl+X 或右键菜单）表单元素（如文本输入框）中的内容时触发。
    document.getElementById("myInput").addEventListener("cut", function (event) {
  console.log("内容已被剪切");
  // 处理剪切事件
});

  4. copy 事件：

    • 当用户复制（通过键盘快捷键 Ctrl+C 或右键菜单）表单元素中的内容时触发。
    document
  .getElementById("myInput")
  .addEventListener("copy", function (event) {
    console.log("内容已被复制");
    // 处理复制事件，例如可以改变复制内容
    event.clipboardData.setData("text/plain", "自定义复制的内容");
    event.preventDefault(); // 阻止默认复制行为，使用自定义内容
  });

  5. paste 事件：

    • 当用户粘贴（通过键盘快捷键 Ctrl+V 或右键菜单）内容到表单元素中时触发。
    document
  .getElementById("myInput")
  .addEventListener("paste", function (event) {
    console.log("内容已被粘贴");
    // 处理粘贴事件，例如可以验证或修改粘贴内容
    let pastedContent = event.clipboardData.getData("text/plain");
    console.log("粘贴的内容是:", pastedContent);
    // 可以取消默认行为并自定义粘贴内容
    event.preventDefault();
    // ...
  });

表单属性和方法

在 HTML 中，表单（form）元素具有一系列属性和方法，这些属性和方法用于控制表单的提交、数据收集以及与其他元素的交互。以下是一些主要的表单属性和方法：

表单属性：

  1. action：指定表单数据提交到的 URL 地址。

    <form action="/submit-form" method="POST"></form>

  2. method：定义表单提交数据的方式，可选值包括GET和POST。

    <form action="/submit-form" method="POST"></form>

  3. name：为表单赋予一个名字，以便在脚本中引用或在服务器端识别表单。

    <form name="myForm" action="/submit-form" method="POST"></form>

  4. target：规定在何处打开处理表单提交响应的资源。它可以是 _blank（新窗口/标签页）、_self（当前窗口/标签页）或其他 frame 或 iframe 的名字。

    <form action="/submit-form" method="POST" target="_blank"></form>

  5. autocomplete：控制表单或表单字段是否启用自动完成功能。

    <input type="text" autocomplete="off" />

  6. enctype：定义表单数据提交时的编码方式，如 application/x-www-form-urlencoded（默认）、multipart/form-data（用于文件上传）或 text/plain。

    <form
  action="/upload-file"
  method="POST"
  enctype="multipart/form-data"
></form>

表单方法（JavaScript DOM 操作）：

  1. **.submit()**：提交表单。

    document.getElementById("myForm").submit();

  2. **.reset()**：重置表单的所有字段至初始状态。

    document.getElementById("myForm").reset();

  3. elements：返回一个 HTMLFormControlsCollection 对象，包含了表单内的所有表单控件。

    let formData = document.forms["myForm"].elements;

  4. **checkValidity()**：检查表单是否满足所有必要的验证要求，返回布尔值。

    let isValid = document.getElementById("myForm").checkValidity();

  5. **reportValidity()**：检查表单的验证状态并在必要时显示浏览器的原生验证提示。

    document.getElementById("myForm").reportValidity();

  6. **requestSubmit()**：提交表单，同时触发提交和相关提交事件。

    document.getElementById("myForm").requestSubmit();

表单验证

表单验证是指在网页表单提交之前，对用户输入的数据进行有效性检查的过程。表单验证可以在客户端（前端）和服务器端（后端）进行，以确保数据符合预期格式和业务规则，提高数据质量，减少因非法数据导致的问题。

前端（客户端）验证：
前端验证可以在用户提交表单前即时反馈错误信息，提升用户体验。常用的前端验证手段包括：

  1. HTML5 内置验证：

    • 使用 HTML5 提供的属性，如required（必填项）、pattern（匹配正则表达式）、minlength、maxlength（限制字符长度）、type（如 email、url 等）。
    <input type="email" required placeholder="请输入邮箱" />

  2. JavaScript 验证：

    • 使用 JavaScript 编写自定义验证函数，监听表单事件（如submit、blur、input等），并进行数据验证。
    document
  .getElementById("myForm")
  .addEventListener("submit", function (event) {
    const email = document.getElementById("email");
    if (!isValidEmail(email.value)) {
      alert("请输入有效的邮箱地址");
      event.preventDefault(); // 阻止表单提交
    }
  });
Comments