HTML、CSS和JS的入门

大前端 HTML CSS JS HTML CSS Support Live Server Auto Rename Tag VSCode

发布时间 : 2023-06-01 00:00

字数:18.7k 阅读 :

环境
HTML
CSS
JavaScript
案例：表格
移动端自适应布局
1. 定义
2. 移动端适配原理
Flex 布局（弹性盒子布局）

环境

VSCode
插件
- HTML CSS Support：帮你在写 HTML 和 CSS 时提供代码提示、自动补全和错误检查，写网页样式更顺手。
- Live Server：启动一个本地服务器，实时预览你的网页，改代码立马就能看到效果。
- Auto Rename Tag：自动同步修改 HTML 标签，比如改了个开始标签，结束标签也会跟着改，省事又防错。

HTML

HTML(Hypertext Markup Language) 中文名就是 超文本标记语言，用于创建网页的结构和内容。

单标签（Self-Closing Tags）：
- 单标签通常用于表示没有内容的元素，例如图像、换行、横线等。
```
<img src="#">
<br>
<hr>
```
- 它们以自封闭的方式出现，不需要闭合标签，因为它们没有内部内容。
- 单标签的典型形式是 <tagname>，其中 tagname 是标签名称。示例：<img src="image.jpg" /> 表示插入一张图片，而 <br> 表示换行。
双标签（Paired Tags）：
- 双标签用于定义包含内容的元素，例如段落、标题、列表等。
```
<p>这是一个段落。</p>
<h1>这是一个标题</h1>
<li>这是一个列表</li>
```
- 它们由两部分组成：开始标签和结束标签，开始标签用表示，结束标签用表示。
- 开始标签用于定义元素的起始位置，结束标签用于定义元素的结束位置。
- 在开始标签和结束标签之间可以包含元素的内容。示例：<p> 这是一个段落。</p> 表示一个段落元素，其中 <p> 是开始标签，</p> 是结束标签，之间的文本是该段落的内容。

HTML的文件结构

<!DOCTYPE html>
<html>
<head>
    <!-- 这里放置文档的元信息 -->
    <title>文档标题</title>
    <!-- 文档的编码格式 -->
    <meta charset="UTF-8">
    <!-- 连接外部样式表或脚本文件等 -->
    <link rel="stylesheet" type="text/css" href="styles.css">
    <script src="script.js"></script>
</head>
<body>
<!-- 这里放置页面内容 -->
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
<a href="https://www.example.com">这是一个链接</a>
<!-- 其他内容 -->
</body>
</html>

<!DOCTYPE html>：声明文档类型为 HTML5，告诉浏览器这是一个HTML5文件。
<html>：HTML 文档的根元素，包含了整个文档的内容。告诉浏览器，这是HTML文件的起始点和结束点。
<head>：包含一些文档的元信息，如标题、字符编码等。
<title>：定义网页标题，会显示在浏览器的标签页上。
<body>：包含实际的页面内容。

创建一个HTML文件

在文件开头输入!，VSCode就会自动生成HTML的文件结构。

右键，Open with Live Server就可以看到HTML在浏览器的样子

常用标签

文本标签

<!-- h 表示标题 -->
<h1>这是一个一级标题</h1>
<h2>这是一个二级标题</h2>
<h3>这是一个三级标题</h3>
<!-- p 表示段落 -->
<p>这是一个段落。</p>
<!-- strong 表示加粗文本 -->
<p>strong：<strong>表示加粗文本</strong></p>
<!-- b 表示粗体文本 -->
<p>b：<b>表示粗体文本</b></p>
<!-- em 表示斜体 -->
<p>em：<em>表示斜体文本</em></p>
<!-- i 表示斜体文本 -->
<p>i：<i>表示斜体文本</i></p>
<!-- u 表示下划线文本 -->
<p>u：<u>表示下划线文本</u></p>
<!-- s 表示删除线文本 -->
<p>s：<s>表示删除线文本</s></p>
<!-- del 表示删除线文本 -->
<p>del：<del>表示删除线文本</del></p>

列表

<!-- ul 表示无序列表 -->
<ul>
    <li>无序项目1</li>
    <li>无序项目2</li>
</ul>
<!-- ol 表示有序列表 -->
<ol>
    <li>有序项目1</li>
    <li>有序项目2</li>
</ol>

表格


<!-- table 表示表格 -->
<table>
<!-- tr 表示表格行 -->
    <tr>
    <!-- th 表示表头单元格 -->
        <th>列A</th>
        <th>列B</th>
        <th>列C</th>
    </tr>
    <tr>
    <!-- td 表示表格数据单元格 -->
        <td>A1</td>
        <td>B1</td>
        <td>C1</td>
    </tr>
    <tr>
        <td>A2</td>
        <td>B2</td>
        <td>C2</td>
    </tr>
</table>

图片

<!-- img 表示图片 -->
<img src="图片路径" alt="图片描述">

链接

<a href="https://github.com/">访问 GitHub </a>

注释

<!-- 这是一个注释 -->

换行

<!-- br 表示换行 -->
<br> br 表示换行

水平线

<!-- hr 表示水平线 -->
<hr> hr 表示水平线

标签的属性

属性在HTML中起到非常重要的作用，它们用于定义元素的行为和外观，以及与其他元素的关系。

基本语法

<开始标签 属性名="属性值">

每个HTML元素可以具有不同的属性

<p id="describe"class="section">这是一个段落标签 </p>
<a href=“https://www.baidu.com”>这是一个超链接</a>

属性名称不区分大小写，属性值对大小写敏感

<img src="example.jpg" alt="">
<img SRC="example.jpg" alt="">
<img src="EXAMPLE.JPG" alt="">
<!--前两者相同，第三个与前两个不一样-->

大多数标签都有的属性

class

class 属性：class 属性是用于向元素添加一个或多个类名，以便通过 CSS 样式表定义样式。此外，类名还可以用来实现 JavaScript 的交互效果。例如：

<p class="note">这是一个带有 note 类属性的 p 标签</p>

id

id 属性：id 属性是用于将元素标识为唯一的标识符。它使得我们可以通过 JavaScript 或 CSS 来定位和操作该元素。例如：

<div id="header">这是一个带有 header id 的 div 标签</div>

style

style 属性：style 属性是用于将CSS样式规则直接应用于元素。它可以用于控制元素的颜色、字体、大小和布局等。例如：

<div style="color: red; font-size: 20px;">这是一段红色的文字</div>

其他属性

herf与target

<a href="01-tag.html" target="_self">返回上一页: self</a>
<br>
<a href="https://www.baidu.com" target="_blank">去百度: blank</a>
<br>
<a href="#section1">跳转到锚点</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<p id="section1">这是一个锚点。</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>

href 属性

作用：指定链接的目标地址，即用户点击链接后将跳转到的URL或资源。
值：
- 可以是绝对URL（如 https://www.baidu.com），指向外部网站。
- 可以是相对URL（如 01-tag.html），指向同一网站内的其他页面或文件，相对于当前页面的路径。
- 也可以是锚点（如 #section1），用于跳转到页面内的某个特定位置。

target属性

作用：指定链接的打开方式，即目标页面在何处显示。
常用值：
- _self：（默认值）在当前窗口或标签页中打开链接。
- _blank：在新窗口或新标签页中打开链接。

src, alt, width 与 height

<img src ="https://www.example.com/image.jpg" alt="示例图片" width="300" height="200">

src 属性：指定图像的来源（URL或文件路径），告诉浏览器在哪里找到要显示的图片。

可以是绝对URL（如 https://www.example.com/image.jpg），指向网络上的图片。
也可以是相对URL（如 images/photo.jpg），相对于当前HTML文件的路径。

alt 属性：提供图像的替代文本（alternate text），用于描述图片内容，主要为以下场景

屏幕阅读器为视障用户朗读。
图片加载失败时显示文本。
搜索引擎优化（SEO），帮助搜索引擎理解图片内容。

width 属性：指定图片的显示宽度（以像素为单位或百分比）。

通常是像素值（如 300）。
也可以是百分比（如 50%），相对于父元素的宽度。

height 属性：指定图片的显示高度（以像素为单位或百分比）。

通常是像素值（如 200）。
也可以是百分比（如 50%），相对于父元素的高度。

块元素与行内元素

块元素

块级元素（block）：块级元素通常用于组织和布局页面的主要结构和内容，例如段落、标题、列表、表格等。它们用于创建页面的主要部分，将内容分隔成逻辑块。

块级元素通常会从新行开始，并占据整行的宽度，因此它们会在页面上呈现为一块独立的内容块。
可以包含其他块级元素和行内元素。
常见的块级元素包括 <div>, <p>, <h1> 到 <h6>, <ul>, <ol>, <li>, <table>, <form> 等。

行内元素

行内元素（inline）：行内元素通常用于添加文本样式或为文本中的一部分应用样式。它们可以在文本中插入小的元素，例如超链接、强调文本等。

行内元素通常在同一行内呈现，不会独占一行。
它们只占据其内容所需的宽度，而不是整行的宽度。
行内元素不能包含块级元素，但可以包含其他行内元素。
常见的行内元素包括 <span>, <a>, <strong>, <em>, <img>, <br>, <input> 等。

div与span

<body>
<!-- div 标签是一个块标签， 通常用于创建一个包含其他HTML元素的容器。
    通常没有特定的语义含义，但可以通过CSS样式来控制其外观和布局。 
    -->
    <h1>DIV</h1>
    <div class="nav">
        <a href=""> 链接1</a>
        <a href=""> 链接2</a>
        <a href=""> 链接3</a>
        <a href=""> 链接4</a>
    </div>
    <div id="content" style="background-color: lightblue; padding: 20px;">
        <h2>这是一个DIV元素</h2>
        <p>DIV元素通常用于创建块级容器，可以包含其他HTML元素。</p>
    </div>
<!-- span 标签是一个行内标签，也没任何特定的语义，主要用于包裹文本。
    然后可以通过CSS样式来控制其外观和布局。 
    -->
    <h1>Span</h1>
    <span style="color: red; font-size: large;">这是一个Span元素: <b>Span 的主要作用是通过CSS样式来控制其外观和布局。</b></span>

</body>

VSCode创建div标签的小技巧

使用.class名字创建div：<div class="nav"></div>

使用#id的名字创建div：<div id="nav"></div>

form 表单

<body>
    <h2>用户注册</h2>
<!-- form 表示这个区域是一个表单 -->
<!-- action 属性指定表单提交的目标 URL -->
<!-- method 属性指定表单提交的 HTTP 方法 
    常见的有 GET 和 POST。 
     - get：默认值，主动地获取方式，参数放在 URL 上，数据的容量有限，安全性差，有缓存；
     - post：数据存放在请求体中，数据量理论上没有限制，相对安全，没有缓存。
    -->
    <form action="/submit" method="post">
    <!-- label 标签用于定义表单控件的标签，for 属性与输入控件的 id 属性关联
        没有label 标签，用户可能无法理解输入框的含义。

        for 属性的作用是将标签与输入控件关联起来。关联后，用户点击标签时，浏览器会自动聚焦到对应的输入框。
        这样可以提高用户体验，尤其是对于表单控件较多的情况。
        如果没有 for 属性，用户点击标签时不会有任何效果。
          -->
        <label>用户名：</label>
    <!-- input 表示用户输入数据的控件 -->
    <!-- type 属性指定输入控件的类型
            常见的有 text、password、email、number、radio、checkbox 等。
            - text：单行文本输入框；
            - password：密码输入框，输入内容会被隐藏；
            - email：电子邮件地址输入框，浏览器会验证格式；
            - number：数字输入框，允许用户输入数字；
            - radio：单选按钮，允许用户从一组选项中选择一个；
            - checkbox：复选框，允许用户从一组选项中选择多个。
        -->
    <!-- placeholder 属性用于在输入框为空时显示提示信息 -->
        <input type="text" id="username" placeholder="请输入用户名"><br><br>

        <label for="password">密码：</label>
        <input type="password" id="password" placeholder="请输入密码"><br><br>

        <label for="email">电子邮件地址：</label>
        <input type="text" id="email" placeholder="请输入电子邮件地址"><br><br>

        <label for="age">年龄：</label>
        <input type="number" id="age" width="5" placeholder="请输入年龄"><br><br>

        <label>性别：</label>
    <!-- name 属性用于指定输入控件的名称，提交表单时，浏览器会将该控件的值作为参数发送到服务器 
        没有 name 属性，服务器无法接收到该控件的值。 
        -->
        <input type="radio" id="gender-male" name="gender" value="male"> 男
        <input type="radio" id="gender-female" name="gender" value="female"> 女<br><br>

        <label>喜欢的编程语言：</label>
        <input type="checkbox" id="language-python" name="languages" value="python"> Python
        <input type="checkbox" id="language-javascript" name="languages" value="javascript"> JavaScript
        <input type="checkbox" id="language-java" name="languages" value="java"> Java
        <input type="checkbox" id="language-cpp" name="languages" value="cpp"> C++<br><br>
    <!-- submit 表示这是一个提交按钮，用户点击后会提交表单，浏览器会将表单数据发送到指定的 URL -->
    <!-- value 属性用于指定提交按钮的文本内容 -->
        <input type="submit" value="提交/注册">
    </form>
</body>

CSS

介绍

CSS（Cascading Style Sheets）是一种用于定义网页样式和布局的样式表语言。它与 HTML 一起用于构建 Web 页面，HTML 负责定义页面的结构和内容，而 CSS 则负责控制页面的外观和样式。

CSS（Cascading Style Sheets）的语法用于定义网页的样式和外观。CSS 规则通常由选择器、属性和属性值组成，多个规则可以组合在一起，以便同时应用多个样式，以下是 CSS 的基本语法：

选择器 {
    属性1: 属性值1;
    属性2: 属性值2;
}

声明的每一行属性，都需要以英文分号结尾；
声明中的所有属性和值都是以键值对这种形式出现的；
选择器的声明中可以写无数条属性

导入方式

内联样式（Inline Styles）：内联样式是将 CSS 样式直接嵌入到 HTML 元素中的一种方式。你可以在 HTML 标签的 style 属性中定义样式规则。这些样式仅适用于特定元素，优先级较高。
```

<h1 style="color: blue; font-size: 30px;">这是一段内联样式文本。</h1>
```

内部样式表（Internal Stylesheet）：内部样式表是将 CSS 样式放置在 HTML 文档的 <head> 部分的 <style> 标签内。这些样式将应用于整个文档，但仍具有较高的优先级。


<head>
  <!-- style 用于定义内部样式表 -->
    <style>
        h2 {
            color: red;
            font-size: 16px;
        }
    </style>
</head>
<body>
<h2>这是一段内部样式表控制文本。</h2>
</body>

外部样式表（External Stylesheet）：外部样式表是将 CSS 样式定义在一个单独的 .css 文件中，并使用 <link> 元素将其链接到 HTML 文档中。这是一种最常用的方式，允许你在多个页面上重用相同的样式。外部样式表具有较低的优先级。

在该 HTML 文件目录下创建名为 css 的目录，并创建 style.css 的外部样式表文件，在其中加入以下代码：
```
p {
    color: purple;
    font-size: 16px;
}
```
在 HTML 文档中链接外部样式表：
```
<head>
    <link rel="stylesheet" type="text/css" href="./css/style.css">
</head>
<body>

<p>这是一段外部样式表控制文本。</p>
</body>
```

选择器（Selectors）

选择器用于选择要应用样式的 HTML 元素。可以选择所有的元素、特定元素、特定类或 ID 的元素，甚至更多。选择器位于规则的开头。

元素选择器

元素选择器：选择特定类型的 HTML 元素(Tag)（例如，p 选择所有段落）。

<head>
  <style>
	/* 元素选择器 */
    h2 {
        color: aqua;
    }
</style>
</head>
<body>
  <h2>这是一个元素选择器示例</h2>
</body>

类选择器

类选择器：选择具有特定类的元素（例如，.highlight 选择具有 highlight 类的元素）。

<head>
  <style>
    /* 类选择器 */
    .highlight {
        background-color: yellow;
    }
	</style>
</head>
<body>
  <h3 class="highlight">这是一个类选择器示例</h3>
</body>

ID 选择器

ID 选择器：选择具有特定 ID 的元素（例如，#header 选择 ID 为 header 的元素）。

<head>
  <style>
  /* ID选择器 */
  #header {
      font-size: 35px;
  }
	</style>
</head>
<body>
  <h4 id="header">这是一个ID选择器示例</h4>
</body>

通用选择器 `*`

通用选择器 *：选择页面上所有的元素。

<head>
  <style>
    /* 通用选择器 */
    * {
        font-family: 'KaiTi';
        font-weight: bold;
    }
	</style>
</head>
<body>
</body>

子元素选择器

子元素选择器：选择直接位于父元素内部的子元素。语法：父元素 > 子元素，例如，ul > li 选择了 <ul> 元素内直接包含的 <li> 元素。

<head>
  <style>
    /* 子元素选择器：也可以 .parent>p*/
    .parent>.element {
        color: yellowgreen;
    }
	</style>
</head>
<body>
  <div class="parent">
      <p class="element">直接子元素</p>
      <div>
          <p class="element">嵌套的子元素</p>
      </div>
  </div>
</body>

效果：只有<div class="parent">中的直接子元素<p class="element">直接子元素</p>会变成黄绿色，而嵌套在内部<div>中的<p class="element">嵌套的子元素</p>不会受影响。

匹配范围：仅匹配父元素的直接子节点，不包括更深层次的嵌套元素。

后代选择器

后代选择器（包含选择器）：选择元素的后代元素。语法：元素名后代素名，例如，ul li 选择了所有在 <ul> 元素内部的 <li> 元素。

<head>
  <style>
     /* 后代选择器: 也可以 .parent p*/
    .parent .element {
        font-size: x-large;
        color: brown;
    }
	</style>
</head>
<body>
  <div class="parent">
      <p class="element">直接子元素</p>
      <div>
          <p class="element">嵌套的子元素</p>
      </div>
  </div>
</body>

效果：<div class="parent">中的所有class="element"元素（包括直接子元素<p class="element">直接子元素</p>和嵌套的<p class="element">嵌套的子元素</p>）都会变成红色。

匹配范围：匹配父元素内的所有符合条件的后代元素，不限层级。

相邻兄弟选择器

相邻兄弟选择器：选择紧邻在另一个元素后面的兄弟元素。元素名 + 元素名，例如，.brother + p 选择了与 .brother 相邻的 <p> 元素。

<head>
  <style>
   /* 相邻兄弟选择器 */
    .brother+p {
        color: red;
    }
	</style>
</head>
<body>
  <div>
    <p>选中标签之前的 p 标签</p>
    <p class="brother">这是一个兄弟</p>
      <!-- 只影响class="brother" 后面相邻的一行 -->
    <p>相邻兄弟元素示例</p>
    <p>通用兄弟元素示例</p>
  </div>
</body>

通用兄弟选择器

通用兄弟选择器：元素1 ~ 元素2 表示选择所有在元素1之后，且与元素1共享同一父元素所有的元素2。

<head>
  <style>
 /* 通用兄弟选择器 */
    .brother~p {
        background-color: #1b91ff;
    }
	</style>
</head>
<body>
  <div>
    <p>选中标签之前的 p 标签</p>
    <p class="brother">这是一个兄弟</p>
      <!-- 只影响class="brother" 后面所有的 p 标签 -->
    <p>相邻兄弟元素示例</p>
    <p>通用兄弟元素示例</p>
  </div>
</body>

伪类选择器

伪类选择器：选择 HTML 文档中的元素的特定状态或位置，而不仅仅是元素自身的属性。伪类选择器以冒号（:）开头，通常用于为用户交互、文档结构或其他条件下的元素应用样式。

语法：选择器:伪类 { 样式 }

<head>
  <style>
  /* 伪类选择器 */
  /* :hover 表示当鼠标悬停在元素上时，会触发该样式 */
    .hover:hover {
        background-color: blueviolet;
    }
	</style>
</head>
<body>
  <h3 class="hover">这是一个 hover 伪类选择器示例</h3>
</body>

伪类选择器可以分为几类，以下是常见示例：

类别	伪类	描述	示例
动态伪类	`:hover`	鼠标悬停在元素上时。	`a:hover { color: red; }`（鼠标悬停时链接变红）
	`:active`	元素被激活（通常是鼠标点击并按住时）。	`button:active { background-color: gray; }`（点击按钮时背景变灰）
	`:focus`	元素获得焦点（通常用于表单输入框）。	`input:focus { border-color: blue; }`（输入框聚焦时边框变蓝）
	`:visited`	已访问过的链接（常用于 `<a>` 标签）。	`a:visited { color: purple; }`（已访问链接变紫）
结构伪类	`:first-child`	选择父元素的第一个子元素。	`li:first-child { font-weight: bold; }`（列表的第一个 `<li>` 加粗）
	`:last-child`	选择父元素的最后一个子元素。	（未提供示例，可类似 `:first-child`）
	`:nth-child(n)`	选择父元素的第n个子元素（n可以是数字、奇偶等）。	`tr:nth-child(even) { background-color: #f2f2f2; }`（表格偶数行背景变灰）
	`:first-of-type`	选择父元素中指定类型的第一个子元素。	`p:first-of-type { color: blue; }`（第一个 `<p>` 变蓝）
状态伪类	`:checked`	选择被选中的复选框或单选按钮。	`input:checked { outline: 2px solid green; }`（选中时绿色轮廓）
	`:disabled`	选择被禁用的表单元素。	`input:disabled { background-color: gray; }`（禁用输入框背景变灰）
	`:required`	选择必填的表单元素。	`input:required { border-color: red; }`（必填输入框边框变红）
其他伪类	`:not(selector)`	选择不匹配指定选择器的元素。	`p:not(.special) { color: gray; }`（非 `.special` 类的 `<p>` 变灰）
	`:empty`	选择没有子节点（包括文本）的元素。	`div:empty { display: none; }`（隐藏空 `<div>`）

CSS的优先级

CSS的特异性决定了当多个样式规则应用于同一元素时，哪个规则优先应用。特异性按以下规则计算（从高到低）：

内联样式（如 <div style="...">）：1000
ID选择器（如 #box）：100
类选择器、伪类、属性选择器（如 .highlight、:hover）：10
元素选择器、伪元素（如 div、::before）：1
通用选择器（*）：0

属性

常用属性

类别	属性	描述	示例
文本样式	`color`	设置文本颜色。	`color: #ff0000;`（文本为红色）
	`font-size`	设置字体大小。	`font-size: 16px;`（字体大小为16像素）
	`font-family`	指定字体类型。	`font-family: Arial, sans-serif;`（优先使用Arial字体）
	`font-weight`	设置字体粗细。	`font-weight: bold;`（字体加粗）
	`text-align`	设置文本水平对齐方式。	`text-align: center;`（文本居中）
	`text-decoration`	设置文本装饰（如下划线）。	`text-decoration: underline;`（文本加下划线）
	`line-height`	设置行高。	`line-height: 1.5;`（行高为1.5倍字体大小）
背景样式	`background-color`	设置元素背景颜色。	`background-color: #f0f0f0;`（背景为浅灰色）
	`background-image`	设置背景图片。	`background-image: url('image.jpg');`（设置背景图片）
	`background-repeat`	控制背景图片是否重复。	`background-repeat: no-repeat;`（背景图片不重复）
	`background-position`	设置背景图片的位置。	`background-position: center;`（背景图片居中）
	`background-size`	设置背景图片的大小。	`background-size: cover;`（背景图片覆盖容器）
盒模型	`width`	设置元素宽度。	`width: 200px;`（宽度为200像素）
	`height`	设置元素高度。	`height: 100px;`（高度为100像素）
	`margin`	设置元素外边距。	`margin: 10px;`（四边外边距为10像素）
	`padding`	设置元素内边距。	`padding: 15px;`（四边内边距为15像素）
	`border`	设置边框样式、宽度和颜色。	`border: 1px solid black;`（1像素宽的黑色实线边框）
	`box-sizing`	定义盒模型的计算方式。	`box-sizing: border-box;`（宽度包含边框和内边距）
布局	`display`	设置元素的显示类型。	`display: flex;`（使用Flexbox布局）
	`position`	设置定位方式（如相对、绝对）。	`position: absolute;`（绝对定位）
	`top`/`right`/`bottom`/`left`	设置定位元素的偏移。	`top: 10px;`（距顶部10像素）
	`float`	设置元素浮动。	`float: left;`（元素左浮动）
	`clear`	清除浮动影响。	`clear: both;`（清除两侧浮动）

复核属性

在CSS中，复合属性（也称为简写属性，Shorthand Properties）是一种将多个相关属性合并为一个属性的写法，以简化代码并提高可读性。font 是一个典型的复合属性，它可以同时设置与字体相关的多个属性。

font: [font-style] [font-variant] [font-weight] [font-size]/[line-height] [font-family];

例如

p {
    font: italic bold 16px/1.5 Arial, sans-serif;
}
/* 等价于*/
p {
    font-style: italic;
    font-weight: bold;
    font-size: 16px;
    line-height: 1.5;
    font-family: Arial, sans-serif;
}

复合属性	包含的单个属性	描述	示例
`font`	`font-style`, `font-variant`, `font-weight`, `font-size`, `line-height`, `font-family`	设置字体样式、变体、粗细、大小、行高和字体族。	`font: italic bold 16px/1.5 Arial, sans-serif;`
`background`	`background-color`, `background-image`, `background-repeat`, `background-position`, `background-size`, `background-attachment`	设置背景颜色、图片、重复方式、位置、大小等。	`background: #f0f0f0 url('image.jpg') no-repeat center/cover;`
`margin`	`margin-top`, `margin-right`, `margin-bottom`, `margin-left`	设置元素四边的外边距。	`margin: 10px 20px 30px 40px;`（上右下左依次为10px、20px、30px、40px）
`padding`	`padding-top`, `padding-right`, `padding-bottom`, `padding-left`	设置元素四边的内边距。	`padding: 15px;`（四边内边距15px）
`border`	`border-width`, `border-style`, `border-color`	设置边框的宽度、样式和颜色。	`border: 1px solid black;`（1像素宽黑色实线边框）

使用`display`定义元素的显示类型

块元素(block)

块级元素通常会从新行开始，并占据整行的宽度。
可以包含其他块级元素和行内元素，

行内元素(inline)

行内元素通常在同一行内呈现，不会独占一行。
它们只占据其内容所需的宽度，而不是整行的宽度。
行内元素不能包含块级元素，但可以包含其他行内元素

行内块元素(Inline-block)

水平方向上排列，但可以设置宽度、高度、内外边距等块级元素的属性。
行内块元素可以包含其他行内元素或块级元素

<body>
<!-- 块元素可以知道长宽，分行展示 -->
  <div style="width: 200px; height: 200px; background: greenyellow;">这是一个块元素</div>
<!-- 行内元素没有宽高，只能在一行内展示 -->
  <span style="background-color: aqua; width: 200px; height: 200px; ">这是一个行内元素；这是一个行内元素；这是一个行内元素；</span>
<!-- 行内块元素可以设置宽高，但是无法自动分行 -->
  <img src="./img.jpg" alt="这是一个行内块元素" style="width: 200px; height: 200px; background-color: lightcoral;">
</body>

<body>
<!-- 块元素可以知道长宽，分行展示 -->
<!-- 使用 display: inline; 后，变成了行内元素 -->
  <div style="width: 200px; height: 200px; background: greenyellow; display: inline;">这是一个块元素</div>
<!-- 行内元素没有宽高，只能在一行内展示 -->
<!-- 使用display: inline-block; 后，变成了行内块元素 -->
  <span
      style="background-color: aqua; width: 200px; height: 200px; display: inline-block;">这是一个行内元素；这是一个行内元素；这是一个行内元素；</span>
<!-- 行内块元素可以设置宽高，但是无法自动分行 -->
<!-- 使用display: block; 后，变成了块元素 -->
  <img src="./img.jpg" alt="这是一个行内块元素"
       style="width: 200px; height: 200px; background-color: lightcoral; display: block;">
</body>

盒子模型

盒子模型是 CSS 中一种用于布局的基本概念，它描述了文档中的每个元素都被看作是一个矩形的盒子，这个盒子包含了内容、内边距、边框和外边距。

盒子模型的基本结构如下：

其中，从内到外分别是：

属性名	说明
内容（`Content`）	盒子包含的实际内容，比如文本、图片等。
内边距（`Padding`）	围绕在内容的内部，是内容与边框之间的空间。可以使用 `padding` 属性来设置。
边框（`Border`）	围绕在内边距的外部，是盒子的边界。可以使用 `border` 属性来设置。
外边距（`Margin`）	围绕在边框的外部，是盒子与其他元素之间的空间。可以使用 `margin` 属性来设置。


<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 盒子模型</title>
    <style>
        .demo {
        /* 设置背景色 */
            background-color: aqua;

        /* 设置边框样式 */
            border: 10px solid green;
        /* 设置内边距 */
            padding: 20px;

        /* 设置外边距 */
            margin: 50px;
        }
    </style>

</head>

<body>
    <div style="width: 500px; height: 500px; background-color: lightcoral;">
        <img class="demo" src="./img.jpg" alt="这是一个图片元素" style="width: 200px; height: 200px;">
    </div>

</body>

浮动（float）

创建浮动

传统的网页布局方式有 标准流（普通流、文档流）、浮动 和 定位。这三种传统布局方式都是用来摆放盒子的，盒子摆放到合适位置，布局自然完成了。多个块级元素纵向排列用 标准流，多个块级元素横向排列用 浮动。

标准流 是最基本的布局方式，就是由块级元素和行内元素按照默认规定的方式来排列，块级就是占一行，行内元素一行放好多个元素。

但是标准流只能按照标签规定好的默认方式进行排列布局，面对特殊的场景，此时就需要 浮动 ，因为浮动可以改变元素的默认排列方式，这使得网页布局更加灵活多变。浮动最典型的应用就是可以让多个块级元素一行内排列显示。

而 浮动 属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘，这样即可使得元素进行浮动。

学习浮动要先了解浮动的三大特性：

脱标：顾名思义就是脱离标准流。当元素设置了浮动后，该元素将会脱离标准流（普通流）的控制，移动到指定位置，浮动的盒子不再保留原来所占有的位置，就像飘浮在空中一样，脱离了原来的地面。
一行显示，顶部对齐：如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列。
具备行内块元素特性：不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性。

<head>
    <meta charset="utf-8">
    <title>浮动演示</title>
    <style>
    /* .left, .right 使用逗号分隔选择器（Comma-separated Selectors），
        表示选择器列表中的所有选择器（.left 和 .right）都会应用相同的CSS规则。 */
        .left,
        .right {
        /* 添加浮动，元素统一向左浮动，向右同理 float:right*/
            float: left;
            width: 100px;
            height: 100px;
            background-color: blue;
            border: 1px solid black;
        }

    /* 可以利用层叠性将右盒子向右浮动，覆盖掉上面统一声明的向左浮动 */
        .right {
            float: right;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div style="width: 500px; height: 500px; background-color: lightcoral;">
        <div class="left">
            左盒子
        </div>
        <div class="left">
            左盒子
        </div>

        <div class="right">
            右盒子
        </div>
        <div class="right">
            右盒子
        </div>
        <br>
    <!-- 与行内块元素相比， 浮动元素之间是没有间距的 -->
        <img src="./img.jpg" alt="这是一个图片元素" style="width: 100px; height: 100px;">
        <img src="./img.jpg" alt="这是一个图片元素" style="width: 100px; height: 100px;">
    </div>
</body>

浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。

而如果使用元素模式转换，让块级元素转换成行内块元素，彼此之间是有空隙的。

清除浮动

为什么要清除浮动？

由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为 0 时，就会影响下面的标准流盒子，从而对整个网页元素的排版产生不良影响。

 <head>
        <meta charset="utf-8">
        <title>浮动演示</title>
        <style>
        /* .left, .right 使用逗号分隔选择器（Comma-separated Selectors），
            表示选择器列表中的所有选择器（.left 和 .right）都会应用相同的CSS规则。 */
            .left,
            .right {
            /* 添加浮动，元素统一向左浮动，向右同理 float:right*/
                float: left;
                width: 100px;
                height: 100px;
                background-color: blue;
                border: 1px solid black;
            }

        /* 可以利用层叠性将右盒子向右浮动，覆盖掉上面统一声明的向左浮动 */
            .right {
                float: right;
                background-color: pink;
            }

            .parent {
            /* 设置父元素的宽度和高度 */
            /* width: 600px;
                height: 600px; */
                background-color: lightcoral;
            /* 设置父元素的溢出处理方式为隐藏，防止子元素浮动影响布局 */
            /* overflow: hidden; */
            }
        </style>
    </head>

    <body>
        <div class="parent">
            <div class="left">
                左盒子
            </div>
            <div class="left">
                左盒子
            </div>

            <div class="right">
                右盒子
            </div>
            <div class="right">
                右盒子
            </div>
            <br>
        </div>
        <p>浮动元素的父元素需要设置 overflow: hidden; 来清除浮动，否则会导致父元素高度塌陷。</p>
        <p>浮动元素会脱离正常的文档流，其他元素会忽略它们的存在。</p>

    </body>

如何清除浮动

使用`overflow: hidden;`

.parent {
/* 设置父元素的宽度和高度 */
/* width: 600px;
    height: 600px; */
    background-color: lightcoral;
/* 设置父元素的溢出处理方式为隐藏，防止子元素浮动影响布局 */
overflow: hidden;
}

伪元素清除浮动

/* 清除浮动 : 使用伪元素清除浮动的原理是：
通过在父元素末尾插入一个空的块级元素（伪元素），使其包含浮动子元素，从而清除浮动带来的影响。
简单来说就是，在父元素的末尾添加一个伪元素，这个伪元素会自动扩展到包含所有浮动子元素的高度。
这样，父元素就能正确计算高度，避免高度塌陷的问题。
这种方法可以避免使用额外的HTML元素，保持HTML结构的简洁。

*/
.parent::after {
    content: "";
/* display: table：表示生成一个块级格式化上下文，防止父元素高度塌陷
    table 是一个特殊的 display 值，通常用于表格布局。
    这里使用 table 是为了确保父元素能够包含所有浮动子元素的高度
    clear: both：表示清除浮动，确保伪元素在浮动元素之后显示
    这意味着伪元素会在浮动元素的下方，确保父元素能够正确计算高度
    */
    display: table;
    clear: both;
}

定位

CSS 定位是一种用于控制元素在网页上的位置的布局技术。通过定位，可以将元素放置在页面的特定位置，而不受文档流的约束。CSS 提供了几种定位属性，包括相对定位、绝对定位和固定定位。

相对定位

相对定位（Relative Positioning）：相对定位是相对于元素在正常文档流中的位置进行定位的。通过使用 position: relative; 属性，可以在不脱离文档流的情况下调整元素的位置。

    <head>
        <style>
            .parent {

                width: 300px;
                height: 300px;
                background-color: lightcoral;
            }

            .normal {
                width: 100px;
                height: 100px;
                background-color: lightblue;
            }

            .child {
                width: 100px;
            /* 设置宽度 */
                height: 100px;
            /* 设置高度 */
                background-color: aqua;
            /* 设置背景颜色 */
            }
        </style>
    </head>

    <body>
        <div class="parent">
            <div class="normal">正常流元素</div>
            <div class="child">相对定位元素</div>
        </div>
    </body>
    </body>

以下是如果没有设置相对定位的正常位置：

如果设置了相对定位：

.child {
    position: relative;
/* 相对定位 */
    top: 5px;
/* 相对于正常位置向下移动5px */
    left: 30px;
/* 相对于正常位置向右移动30px */

    width: 100px;
/* 设置宽度 */
    height: 100px;
/* 设置高度 */
    background-color: aqua;
/* 设置背景颜色 */
}

绝对定位

绝对定位（Absolute Positioning）：将元素的 position 属性设置为 absolute，使元素脱离正常文档流。并根据其最近的非static的定位祖先元素（即 position 为 relative、absolute 或 fixed 的父元素）进行定位。

如果没有定位祖先元素，则相对于文档的初始包含块（通常是<html>或浏览器视口）定位。

元素的位置由 top、right、bottom、left 属性控制，相对于参照点偏移。

脱离文档流后，元素不会影响其他元素的布局，可能会覆盖其他内容。

滚动页面时，绝对定位元素会随其参照元素（或页面）一起滚动。

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .parent {

                width: 300px;
                height: 300px;
                background-color: lightcoral;
            }

            .normal {
                width: 100px;
                height: 100px;
                background-color: lightblue;
            }

            .child {
            /* 设置元素为绝对定位:*/
                position: absolute;

            /* bottom: 50px 是设置元素距离其包含块底部的距离为50px */
                bottom: 50px;
            /* right: 30px 是设置元素距离其包含块右侧的距离为30px */
                right: 30px;
                width: 100px;
            /* 设置宽度 */
                height: 100px;
            /* 设置高度 */
                background-color: aqua;
            /* 设置背景颜色 */
            }
        </style>
    </head>

    <body>
        <div class="parent">
            <div class="normal">正常流元素</div>
            <div class="child">相对定位元素</div>
        </div>
    </body>

在上面这个例子中，由于.parent 没有显式设置position 属性，因此它使用默认值 position: static。

因为 .parent 的 position 是 static，它不是定位祖先。

再往上，.parent 的父元素是 <body>，<body> 的父元素是 <html>，通常也没有显式设置 position（默认也是 static）。

因此，.child 找不到任何具有非 static 定位的祖先元素，最终会相对于初始包含块（通常是浏览器视口）定位。

因此按照上面的配置，它会出现在浏览器的右下角

如果.parent如下配置，会出现在.parent的右下角

.parent {
    position: relative;
    width: 300px;
    height: 300px;
    background-color: lightcoral;
}

固定定位

固定定位（Fixed Positioning）：固定定位是相对于浏览器窗口进行定位的，即使页面滚动，元素也会保持在窗口的相同位置。通过使用 position: fixed; 属性，可以创建固定定位的元素。

.child {
/* 设置元素为绝对定位:*/
    position: fixed;

/* right: 30px 是设置元素距离其包含块右侧的距离为30px */
    right: 30px;
/* top: 200px 是设置元素距离其包含块顶部的距离为200px */
    top: 200px;

    width: 100px;
/* 设置宽度 */
    height: 100px;
/* 设置高度 */
    background-color: aqua;
/* 设置背景颜色 */
}

JavaScript

介绍

JavaScript 于 1995 年由 Netscape 公司的 Brendan Eich 创建。起初，它被设计为一种简单的脚本语言，用于处理用户在浏览器中的输入。随着浏览器技术的不断发展，JavaScript 也逐渐演变成为一种功能强大的编程语言。

JavaScript 是一种轻量级、解释型、面向对象的脚本语言。它主要被设计用于在网页上实现动态效果，增加用户与网页的交互性。作为一种客户端脚本语言，JavaScript 可以直接嵌入 HTML，并在浏览器中执行。与 HTML 和 CSS 不同，JavaScript 使得网页不再是静态的，而是可以根据用户的操作动态变化的。

JavaScript 的语法灵活，易于学习，是前端开发的核心技术之一。它使得开发者可以通过处理用户输入、修改页面内容、与服务器进行交互等方式，为用户提供更富有体验的网页。

JavaScript 在前端开发中扮演着重要的角色，其应用领域包括但不限于：

客户端脚本：用于在用户浏览器中执行，实现动态效果和用户交互。
网页开发：与 HTML 和 CSS 协同工作，使得网页具有更强的交互性和动态性。
后端开发：使用 Node.js，JavaScript 也可以在服务器端运行，实现服务器端应用的开发。

总的来说，JavaScript 作为一门语言在前端开发中的重要性不断上升，学习它将为学生打开广阔的编程世界，同时也为他们日后深入学习其他编程语言奠定坚实基础。

JavaScript 的导入方式

内联方式

内联方式（Inline）：在 HTML 文件中直接嵌入 JavaScript 代码，放置在 <script> 标签内，通常位于文档的 <head> 或 <body> 部分。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>内联样式</title>
        <script>
            console.log('Hello in head script');
        </script>
    </head>

    <body>
        <script>
            console.log('Hello in body script');
        </script>
    </body>
</html>

外部引入方式

外部引入方式（External）：将 JavaScript 代码保存在独立的外部文件中(如myscript.js)，通过 <script> 标签的 src 属性引入。

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>外部引入方式</title>
    <!-- 引入外部JavaScript文件 -->
        <script src="./js/myscript.js"></script>
    </head>
    <body>
    </body>

</html>

myscript.js的文件内容：

console.log('Hello in myscript.js');

变量

在 JavaScript 中，使用 var、let 或 const 关键字声明变量：

var x; // 声明一个变量x
let y = 5; // 声明一个变量y并初始化为5
const PI = 3.14; // 声明一个常量PI，并初始化为3.14

特性	`var`	`let`(推荐)
作用域	函数作用域（Function Scope）变量在整个函数内有效，或在全局作用域（如果不在函数内）。	块级作用域（Block Scope）变量仅在声明的块（如 {}，如 if、for、while）内有效。块外无法访问块内的 let 变量。
变量提升	存在变量提升，声明被提升到函数或全局作用域顶部	存在变量提升，但初始化不提升，存在“暂存死区”（TDZ）
重复声明	允许在同一作用域内重复声明	不允许在同一块级作用域内重复声明
全局声明行为	全局声明时，绑定到 `window` 对象（浏览器环境）	全局声明时，不绑定到 `window` 对象
使用场景	传统JavaScript代码，兼容旧代码	现代JavaScript代码，推荐使用以避免作用域问题

数据类型

JavaScript 有一些基本的数据类型：

字符串（String）：用于表示文本。
数字（Number）：用于表示数值。
布尔值（Boolean）：用于表示真（true）或假（false）。
未定义（Undefined）：表示变量声明但未初始化。
空值（Null）：表示空或无值。

var greeting = "Hello, World!";
var age = 25;
var logic = true;
var z;
var empty_value = null;

在JavaScript中·undefined 和 null 都表示“无”或“空”的概念，但它们在含义、用途和行为上有显著区别。最大的区别在于它们代表的意义和使用场景：undefined 表示变量未被定义或未初始化，而 null 表示有意设置为空值

最大的区别: undefined 是 JavaScript 自动分配的状态，表示“未定义”或“缺失值”；null 是开发者主动设置的值，表示“空”或“无对象”。

let x;
console.log(x); // undefined（变量声明但未初始化）
function test() {}
console.log(test()); // undefined（函数无返回值）
console.log({}.prop); // undefined（访问不存在的属性）

//---------------------------------------------------

let obj = null; // 开发者主动设置为空
console.log(obj); // null
obj = { name: "test" }; // 后续赋值
obj = null; // 清空对象
console.log(obj); // null

相等性比较：

松散相等（==）：null == undefined 为 true，因为两者都被视为“空值”。
严格相等（===）：null === undefined 为 false，因为它们的类型不同。

条件语句

if (condition) {
    // 如果条件为真，执行这里的代码
}

if (condition) {
    // 如果条件为真，执行这里的代码
} else {
    // 如果条件为假，执行这里的代码
}


if (condition1) {
    // 如果条件1为真，执行这里的代码
} else if (condition2) {
    // 如果条件2为真，执行这里的代码
} else {
    // 如果以上条件都为假，执行这里的代码
}

循环语句

for (初始化表达式; 循环条件; 迭代器) {
    // 循环体，执行这里的代码
}

while (循环条件) {
    // 循环体，执行这里的代码
}

do {
    // 循环体，执行这里的代码
} while (循环条件);


for (var i = 0; i < 5; i++) {
    if (i === 2) {
        continue; // 跳过 i 等于 2 的情况
    }
    if (i === 4) {
        break; // 结束循环，跳出循环体
    }
    console.log(i);
}

函数

function function_name(参数) { // 参数可以不写，表示不传参
    // 函数体，执行这里的代码
    return 返回值; // 可选，返回值
}

// 匿名函数: 是没有函数名的函数，通常用于作为函数表达式，或在函数内定义一个函数
var square = function (x) {
    return x * x;
};

// JavaScript 中的作用域分为 全局作用域 和 局部作用域。
// 在函数内部声明的变量具有函数作用域，而在函数外部声明的变量具有全局作用域。
var globalVar = "I am global";

function example() {
    var localVar = "I am local";
    console.log(globalVar); // 可访问全局变量
    console.log(localVar); // 可访问局部变量
}

example();
console.log(globalVar); // 输出：I am global
console.log(localVar); // 报错，局部变量不可在函数外部访问

事件

JavaScript 中的事件处理是前端开发中至关重要的一部分，它允许你对用户的交互做出响应，例如点击、鼠标移动、键盘输入等。

事件是文档或浏览器窗口中发生的特定瞬间，例如用户的点击、键盘的按下、页面的加载等。常见的事件如下：

事件	描述
`onClick`	点击事件
`onMouseOver`	鼠标经过
`onMouseOut`	鼠标移出
`onChange`	文本内容改变事件
`onSelect`	文本框选中
`onFocus`	光标聚集
`onBlur`	移开光标
`onLoad`	网页加载
`onUnload`	关闭网页

事件处理程序是与特定事件相关联的函数。当事件发生时，关联的事件处理程序将被调用。在 HTML 中，可以通过以下方式添加事件处理程序：

HTML 属性：

<button onclick="myFunction()">Click me</button>

DOM 属性：

var button = document.getElementById('myButton');
button.onclick = function () {
    alert('Button clicked!');
};

addEventListener 方法：

var button = document.getElementById('myButton');
button.addEventListener('click', function () {
    alert('Button clicked!');
});

DOM 操作

什么是DOM 操作

当网页被加载时，浏览器会创建页面的文档对象模型，也就是 DOM（Document Object Model）。

在 Web 开发中，DOM 通常与 JavaScript 一起使用。每个 HTML 或 XML 文档都可以被视为一个文档树，文档树是整个文档的层次结构表示。每个节点都有父节点、子节点和同级节点。文档节点是整个文档树的根节点，而其他节点则分布在树的不同层次上。DOM 为这个文档树提供了一个编程接口，开发者可以使用 JavaScript 来操作这个树状结构。

DOM 中的一切都是节点。文档本身是一个文档节点，而文档中的元素、属性和文本都是不同类型的节点。主要的节点类型包括：

元素节点（Element Nodes）：表示 HTML 或 XML 文档中的元素，如 <div>、<p> 等。
属性节点（Attribute Nodes）：表示元素的属性，如 class、id 等。
文本节点（Text Nodes）：表示元素的文本内容。

获取文档中的元素的常用方法

选择 DOM 元素（获取节点）

方法	描述
`document.getElementById(id)`	通过 id 获取元素
`document.getElementsByClassName(class)`	获取类名对应的所有元素集合
`document.getElementsByTagName(tag)`	获取某个标签的所有元素集合
`document.querySelector(selector)`	通过 CSS 选择器获取第一个匹配的元素
`document.querySelectorAll(selector)`	通过 CSS 选择器获取所有匹配的元素集合

const div = document.getElementById("container");

const items = document.getElementsByClassName("item");

const divs = document.getElementsByTagName("div");

const p = document.querySelector(".my-class");

const paragraphs = document.querySelectorAll("p");

修改内容（文本/HTML）

<p id="myPara">旧内容</p>

const para = document.getElementById("myPara");

para.textContent = "<strong>这是新的HTML内容</strong>";  // 改变文本（不会解析HTML标签）
para.innerHTML = "<strong>这是新的HTML内容</strong>"; // 插入 HTML 标签

修改样式

const box = document.getElementById("box");
box.style.color = "red";
box.style.backgroundColor = "#eee";

修改属性

<img id="myImg" src="a.jpg" />

const img = document.getElementById("myImg");
img.src = "b.jpg";
img.alt = "新的描述";

通过修改属性修改事件触发

<body>
    <button onclick="alert('Hello, World!')">Click Me!</button>

    <script>
        document.getElementsByTagName('button')[0].onclick = function () {
            alert('change to nihao, World!');
        };
    </script>
</body>

修改 class（CSS 类名）

const el = document.getElementById("box");

// 添加、删除、切换 class
el.classList.add("highlight");
el.classList.remove("hidden");
el.classList.toggle("active");

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8">
        <title>DOM classList 示例</title>
        <style>
            #box {
                width: 150px;
                height: 150px;
                background-color: gray;
                margin-bottom: 20px;
                transition: all 0.3s ease;
            }

            .highlight {
                background-color: yellow !important;
            }

            .active {
                border: 5px solid green;
            }

            .hidden {
                display: none;
            }
        </style>
    </head>

    <body>

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

        <button onclick="showBox()">1️⃣ 显示 box（移除 hidden）</button>
        <button onclick="addHighlight()">2️⃣ 添加 highlight 类（变红）</button>
        <button onclick="toggleActive()">3️⃣ 切换 active 类（加边框/取消）</button>
        <button onclick="hideBox()">4️⃣ 隐藏 box（添加 hidden）</button>

        <script>
            const box = document.getElementById("box");

            function showBox() {
                box.classList.remove("hidden");
            }

            function hideBox() {
                box.classList.add("hidden");
            }

            function addHighlight() {
                box.classList.add("highlight");
            }

            function toggleActive() {
                box.classList.toggle("active");
            }
        </script>

    </body>

</html>

!important 是 CSS 中一种强制提高优先级的方式，它会覆盖所有非 !important 的样式（无论特异性多高），除非其他规则也使用 !important 且特异性更高。

创建、添加和删除元素

// 创建一个元素
const newP = document.createElement("p");
newP.textContent = "我是新段落";

// 添加到某个元素中
document.body.appendChild(newP);

// 插入到某个元素之前
const parent = document.getElementById("container");
const child = document.getElementById("child");
parent.insertBefore(newP, child);

// 删除某个元素
parent.removeChild(child);

事件监听（添加交互）

const btn = document.getElementById("myBtn");

btn.addEventListener("click", function () {
  alert("按钮被点击了！");
});

你也可以用箭头函数简写：

btn.addEventListener("click", () => {
  console.log("点击事件触发！");
});

案例：表格

HTML

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>CRUD Table Example</title>
        <style>
            table {
            /* border-collapse: collapse：合并边框 */
                border-collapse: collapse;
                width: 100%;
                margin-top: 20px;
            }

            th,
            td {
                border: 1px solid #ddd;
                padding: 8px;
                text-align: left;
            }

            th {
                background-color: #f2f2f2;
            }

            button {
                margin-top: 10px;
            }
        </style>
    </head>

    <body>
        <h2>CRUD Table Example</h2>
        <button onclick="addRow()">Add Row</button>
        <table id="dataTable">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>John Doe</td>
                    <td>john@example.com</td>
                <!--this: 代表当前点击的按钮：button -->
                    <td>
                        <button onclick="editRow(this)">Edit</button>
                        <button onclick="deleteRow(this)">Delete</button>
                    </td>
                </tr>
            <!-- Additional rows will be added dynamically -->
            </tbody>
        </table>

        <script src="./js/script.js"></script>
    </body>

</html>

JS

function addRow() {
    // dataTable 是表格的 ID
    var table = document.getElementById("dataTable");
    // insertRow(table.rows.length) 在表格的末尾插入一行
    // table.rows.length 获取表格当前的行数
    // 这样可以确保新行被添加到表格的最后
    // insertRow 方法返回新插入的行
    // 这行可以用来添加单元格
    //  table.insertRow: 返回值是一个：HTMLTableRowElement，也就是一个 <tr> 元素对象。
    var newRow = table.insertRow(table.rows.length);

    /**
     * newRow.insertCell: 返回值是一个：HTMLTableCellElement，也就是一个 <td> 元素对象
     */
    // insertCell(0) 在新行的第一个位置插入一个单元格
    var nameCell = newRow.insertCell(0);
    // insertCell(1) 在新行的第二个位置插入一个单元格
    var emailCell = newRow.insertCell(1);
    // insertCell(2) 在新行的第三个位置插入一个单元格
    var actionCell = newRow.insertCell(2);

    // 设置新单元格的内容
    nameCell.innerHTML = "New User";
    emailCell.innerHTML = "newuser@example.com";
    actionCell.innerHTML = '<button onclick="editRow(this)">Edit</button>' +
        '<button onclick="deleteRow(this)">Delete</button>';
}

function editRow(button) {
    // button.parentNode.parentNode 获取按钮所在行：<tr>
    // button.parentNode 获取按钮所在单元格：<td>
    // button 是当前点击的按钮
    var row = button.parentNode.parentNode;
    var nameCell = row.cells[0];
    var emailCell = row.cells[1];
    // prompt 函数用于弹出一个对话框，允许用户输入新值
    // prompt 的第一个参数是对话框的提示信息，第二个参数是默认值，如果不想显示默认值，可以将其设置为 null
    // 如果用户点击取消，prompt 返回 null
    // 如果用户输入了新值，prompt 返回用户输入的字符串
    var newName = prompt("Enter new name", nameCell.innerHTML);
    var newEmail = prompt("Enter new email", emailCell.innerHTML);

    if (newName !== null && newEmail !== null) {
        nameCell.innerHTML = newName;
        emailCell.innerHTML = newEmail;
    }
}

function deleteRow(button) {
    var row = button.parentNode.parentNode;
    // row.parentNode.removeChild(row) 从表格中删除该行
    row.parentNode.removeChild(row);
}

效果

移动端自适应布局

定义

移动端自适应布局（也称响应式布局或自适应网页设计，Responsive Web Design, RWD）是指通过CSS、HTML和JavaScript等技术，使网页在不同设备（尤其是移动设备，如手机、平板）上自动调整布局、内容和样式，以提供最佳的用户体验。它确保网页在各种屏幕尺寸、分辨率和设备类型上都能正常显示和操作，而无需为每种设备单独开发页面。

主流的实现方案有两种：

通过 rem、vw/vh 等单位，实现在不同设备上显示相同比例进而实现适配。
- rem/em：rem 相对于根元素（<html>）的字体大小，em 相对于父元素字体大小。
- vw/vh：相对于视口宽度/高度的1%（1vw = 视口宽度的1/100）。
响应式布局，通过媒体查询 @media 实现一套 HTML 配合多套 CSS 实现适配；

移动端适配原理

在学习移动端适配原理之前，我们先了解一下在 VSCode 中自动生成的 head 标签中的 viewport。


<meta name="viewport" content="width=device-width, initial-scale=1.0, 
                minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

viewport 可以翻译为 视区 或者 视口。是指浏览器用来显示网页的区域，它决定了网页在用户设备上的显示效果。由于移动设备和桌面设备有不同的屏幕尺寸和分辨率，使用视口可以使网页在不同设备上得到合适的显示。

如果要实现浏览器适配移动端，首先我们要统一标准视口viewport 。

width=device-width: 将视口的宽度设置为设备的宽度（页面宽度等于设备宽度）。这确保网页内容不会被缩放，而是按照设备的实际宽度进行布局；
initial-scale=1.0: 设置初始的缩放级别为 1.0（不缩放）。这也有助于确保网页在加载时以原始大小显示，而不是被缩小或放大；
minimum-scale=1.0: 最小缩放比例为 1；
maximum-scale=1.0: 最大缩放比例为 1；
user-scalable=no：不允许用户缩放。

综合起来，这行代码的作用是告诉浏览器，网页的布局应该以设备的宽度为基准，初始缩放级别为 1.0。这样可以确保在移动设备上获得更好的显示效果，而不会出现不必要的缩放或变形。

CSS 中最常用最基础的单位是 px 像素（Pixel），px 是相对于想时期屏幕分辨率而言的。在移动端常用到的是 rem，通过使用 rem 单位，可以相对于根元素的字体大小来定义布局和元素的尺寸，从而使网页更灵活地适应不同的屏幕尺寸。

rem 是一个倍数单位，它是基于 html 标签中的 font-size 属性值的倍数。只要我们在不同的设备上设置一个合适的初始值，当设备发生变化 font-size 就会自动等比适配大小，从而在不同的设备上表现统一。比如，下面这个例子

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            html {
                font-size: 16px;
            /* 设置根元素字体大小为 16px */
            }

            body {
                font-size: 1rem;
            /* 相对于根元素，等同于 16px */
            }

            .box {
                width: 100px;
                height: 100px;
                margin-bottom: 20px;
            }

            .box1 {
                width: 5rem;
            /* 相对于根元素，等同于 80px */
            }


            p {
                font-size: 1.5rem;
            /* 相对于根元素，等同于 24px */
            }
        </style>
    </head>

    <body>

    </body>
    <div class="box" style="background-color: lightcoral; padding: 20px;">
        这是一个使用 px 单位的盒子，宽度为 50px。
    </div>
    <div class="box1" style="background-color: lightblue; padding: 20px;">
        <p>这是一个使用 rem 单位的盒子，宽度为 5rem，相当于 80px。</p>
    </div>
    <p>这是一个段落，字体大小为 1.5rem，相当于 24px。</p>

</html>

由于在不同设备中的屏幕宽度不同，我们的 html 标签中的 font-size 属性值也是动态改变的，因此，我们需要通过 JavaScript 代码动态改变 font-size 的值，代码如下：

<script>
// 根据设备宽度计算 html 标签的 font-size = 设备宽度 / 10
  function resetHtmlFontSize() {
  // 获取 html 对象并动态设置 font-size 
      document.documentElement.style.fontSize = screen.width / 20 + 'px';
  }
// 页面加载时设置 html 的 font-size
  resetHtmlFontSize();
// 窗口大小变化时重新设置 html 的 font-size：这里是在绑定事件
  window.onresize = resetHtmlFontSize;
</script>

document：
- 表示整个 HTML 文档，是 JavaScript 操作 DOM 的入口。
- 它是浏览器提供的全局对象，用于访问和操作页面中的所有元素。
document.documentElement 返回文档的根元素，即<html> 标签。
document.documentElement.style: 是 DOM 元素的属性，用于访问或修改元素的内联 CSS 样式（即中的样式）
document.documentElement.style.fontSize:
- 是 style 对象的一个属性，对应 CSS 的 font-size 属性，用于设置元素的字体大小。
- 在 JavaScript 中，CSS 属性名使用驼峰命名法（font-size 变为 fontSize）。
screen 对象的定义：screen 是 JavaScript 中的一个全局对象，具体是浏览器的 Screen 接口，提供了关于用户设备屏幕的信息。它通常用于获取屏幕的物理属性，如宽度、高度、分辨率等，适用于实现移动端自适应布局等场景。
screen.width：返回设备屏幕的总宽度（以像素为单位），包括整个物理屏幕。
window 是整个 浏览器窗口对象（顶级对象），代表浏览器中打开的这个页面窗口。document 是 window 里的一个属性，代表这个窗口中加载的 网页内容（DOM文档）。
```
window
├── document
│   ├── body
│   ├── html
│   └── ...
├── location
├── screen
├── alert()
├── ...
```
window.onresize：是一个 事件属性，用于响应窗口大小变化事件（resize）
resetHtmlFontSize() 与 resetHtmlFontSize
- resetHtmlFontSize() ：表示函数调用，它会立即执行。
- resetHtmlFontSize：表示函数引用，作为一个函数对象被调用时才会执行（比如事件触发）
window.onresize = resetHtmlFontSize;：这句话的作用就是 “给 window 对象绑定一个事件处理函数”，也就是：当窗口大小（resize）发生变化时，就调用你提供的函数 resetHtmlFontSize。

Flex 布局（弹性盒子布局）

概念

Flex 布局（弹性盒子布局）是一种用于在容器中进行布局的模型，它使得容器的子元素能够以弹性的方式排列，可以配合 rem 处理尺寸以适应不同屏幕尺寸和设备。

Flex 布局在前端开发中得到了广泛的应用，因为它提供了一种相对简单而强大的布局方式。任何一个容器都可以指定为 Flex 布局，符合响应式设计的特点。

.box {
    display: flex;
}

设为 Flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。

采用 Flex 布局的元素，称为 Flex 容器（flex container）。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），如下图：

其中 flex 容器默认存在两根轴：水平的主轴（main axis）和 垂直的交叉轴（cross axis）。
主轴的开始位置（与边框的交叉点）叫做 main start，结束位置叫做 main end；
交叉轴的开始位置叫做 cross start，结束位置叫做 cross end。项目默认沿主轴排列。
单个项目占据的主轴空间叫做 main size，占据的交叉轴空间叫做 cross size。
flex 布局主要是设置 flex 容器的对齐方式和 flex 项目的大小形态，上图中的四个概念十分重要。

Flex 容器属性

给容器设置 display: flex;后，可以为其添加以下 6 个容器属性：

flex-direction；
flex-wrap；
flex-flow：flex-direction 属性和 flex-wrap 属性的简写形式；
justify-content；
align-items；
align-content。

`flex-direction`

flex-direction：决定主轴的方向（即项目的排列方向），

属性值	作用
`row`（默认值）	主轴为水平方向，起点在左端（项目从左往右排列）
`row-reverse`	主轴为水平方向，起点在右端（项目从右往左排列）
`column`	主轴为垂直方向，起点在上沿（项目从上往下排列）
`column-reverse`	主轴为垂直方向，起点在下沿（项目从下往上排列）

`flex-wrap`

flex-wrap：默认情况下，项目都排列在一条轴线上，如果一条轴线排不下，那么就会压缩子容器的大小

属性值	作用
`nowrap`（默认）	不换行（列）
`wrap`	主轴为横向时：从上到下换行；主轴为纵向时：从左到右换列
`wrap-reverse`	主轴为横向时：从下到上换行；主轴为纵向时：从右到左换列

`justify-content`

justify-content：定义了项目在主轴上的对齐方式，

属性值	作用
`flex-start`（默认）	与主轴的起点对齐
`flex-end`	与主轴的终点对齐
`center`	与主轴的中点对齐
`space-between`	两端对齐主轴的起点与终点，项目之间的间隔都相等
`space-around`	每个项目两侧的间隔相等。项目之间的间隔比项目与边框的间隔大一倍

`align-items`

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

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

`align-content`

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

属性值	作用
`flex-start`	与交叉轴的起点对齐
`flex-end`	与交叉轴的终点对齐
`center`	与交叉轴的中点对齐
`space-between`	与交叉轴两端对齐，轴线之间的间隔平均分布
`space-around`	每根轴线两侧的间隔都相等，轴线之间的间隔比轴线与边框的间隔大一倍
`stretch`（默认值）	主轴线占满整个交叉轴(也就是整个高度)

代码验证

<head>
    <style>
        html {
            font-size: 10px;
        }

        .container {
            display: flex;
            height: 60rem;
            background-color: aqua;
            flex-wrap: wrap;
        }

        .item {
            width: 20rem;
            font-size: 8rem;
        }
    </style>

</head>

<body>

    <div class="container">
        <div class="item" style="background-color: aliceblue;">1</div>
        <div class="item" style="background-color: lightgreen;">2</div>
        <div class="item" style="background-color: lightcoral;">3</div>
        <div class="item" style="background-color: lightsalmon;">4</div>
        <div class="item" style="background-color: lightseagreen;">5</div>
        <div class="item" style="background-color: lightsteelblue;">6</div>
    </div>
</body>

如果没有设置align-items ，那么会默认是stretch，会默认占满整个容器的高度

.container {
  display: flex;
  height: 60rem;
  background-color: aqua;
  flex-wrap: wrap;
  align-items: flex-start;
}

align-items: flex-start;，容器会根据交叉轴的起点对齐。

其实就是调整垂直方向的排列。

.container {
    display: flex;
    height: 60rem;
    background-color: aqua;
    flex-wrap: wrap;
    align-content: flex-start;
}

如果没有设置align-content ，那么会默认是stretch，会默认占满整个容器的高度

align-content: flex-start;：多根轴线都对齐交叉轴的起点（最上面）

Flex 项目属性

上面所讲的容器属性都是用来设置项目的排列方式，而项目自身的大小和形态需要设置项目的属性，以下 5 个属性设置在项目上：

`order`

order：默认情况下，项目的排列先后顺序是按照 DOM 结构中出现的先后顺序显示的，而 order 属性定义项目的排列顺序。数值越小，排列越靠前，默认为 0，代码如下

.item {
    order: 1;
}

`flex-grow`

flex-grow 属性定义项目的放大比例。值越大，项目在剩余空间中所占的比例越大。默认是 0（不放大）。如果多个项目都有 flex-grow，他们会按比例分配多余空间。

<head>
    <style>
        .container {
            display: flex;
            width: 500px;
            background-color: aqua;
        }

        .item1 {
            background-color: lightcoral;
        }

        .item2 {
            background-color: lightblue;
        }

        .item3 {
            background-color: lightgreen;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="item1">A</div>
        <div class="item2">B</div>
        <div class="item3">C</div>
    </div>
</body>

.container {
  display: flex;
  width: 500px;
  background-color: aqua;
}

.item1 {
  flex-grow: 1;
  width: 100px;
  background-color: lightcoral;
}

.item2 {
  flex-grow: 2;
  width: 100px;
  background-color: lightblue;
}

.item3 {
  flex-grow: 1;
  width: 100px;
}

flex-grow 决定了 弹性盒子项目在父容器有剩余空间时，这个项目能“分走”多少。它的默认值是 0，即不放大。

1 + 2 + 1 = 4，总共 4 份可分配空间。
.item1 和 .item3 各拿 1 份(50px)，占 1/4
.item2 拿 2 份(100px)，占 2/4 = 1/2

所以父容器剩余空间(200px)会按 1:2:1 的比例分配给三个子项。

`flex-shrink`

flex-shrink 属性定义了项目的缩小比例。空间不足时，项目会按比例缩小。

flex-shrink 用于设置当容器空间不足时，子元素应该如何缩小。
默认值是 1，表示允许缩小。
值越大，缩小得越多；如果为 0，则表示不缩小。

<head>
    <style>
        .container {
            display: flex;
            width: 300px;
            background-color: aqua;
        }

        .item1 {
            flex-shrink: 1;
            width: 200px;
            background-color: lightcoral;
        }

        .item2 {
            flex-shrink: 2;
            width: 200px;
            background-color: lightblue;
        }

        .item3 {
            flex-shrink: 0;
            width: 200px;
            background-color: lightgreen;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="item1">A</div>
        <div class="item2">B</div>
        <div class="item3">C</div>
    </div>

</body>

总宽度为 600px，但容器只有 300px，所以需要缩小掉 300px。

.item1（红色）flex-shrink: 1
.item2（绿色）flex-shrink: 2
.item3（蓝色）flex-shrink: 0（不缩小）

因为 .item3 不允许缩小，只能从 item1 和 item2 上压缩出 300px 的空间。

它们的 shrink 比例是 1:2（总共 3 份）：

.item1：缩掉 1/3 × 300px = 100px → 剩余 100px
.item2：缩掉 2/3 × 300px = 200px → 剩余 0px
.item3：保持原样 200px

`flex-basis`

设置主轴方向的初始大小（如宽度或高度），默认是 auto。如果 flex-basis 被设置，会优先于 width 或 height。

主轴方向取决于父容器的 flex-direction 属性：

`flex-direction` 设置	主轴方向	`flex-basis` 作用在
`row`（默认）	水平（左→右）	宽度（`width`）
`column`	垂直（上→下）	高度（`height`）

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            display: flex;
            width: 600px;
            background-color: aqua;
        }

        .item1 {
            flex-basis: 100px;
            width: 200px;
            background-color: lightcoral;
        }

        .item2 {
            flex-basis: 200px;
            width: 200px;
            background-color: lightblue;
        }

        .item3 {
            flex-basis: 300px;
            width: 200px;
            background-color: lightgreen;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="item1">A</div>
        <div class="item2">B</div>
        <div class="item3">C</div>
    </div>
</body>

`flex`

flex 属性是 flex-grow，flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto（默认缩小但不放大）。后两个属性可选。代码如下：

.item {
    flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

`align-self`

align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch。

.item {
    align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 1909773034@qq.com

HTML、CSS和JS的入门

环境

HTML

标签

HTML的文件结构

创建一个HTML文件

常用标签

文本标签

列表

表格

图片

链接

注释

换行

水平线

标签的属性

基本语法

大多数标签都有的属性

class

id

style

其他属性

herf与target

src, alt, width 与 height

块元素与行内元素

块元素

行内元素

div与span

VSCode创建div标签的小技巧

form 表单

CSS

介绍

导入方式

选择器（Selectors）

元素选择器

类选择器

ID 选择器

通用选择器 *

子元素选择器

后代选择器

相邻兄弟选择器

通用兄弟选择器

伪类选择器

CSS的优先级

属性

常用属性

复核属性

使用display定义元素的显示类型

盒子模型

浮动（float）

创建浮动

清除浮动

为什么要清除浮动？

如何清除浮动

使用overflow: hidden;

伪元素清除浮动

定位

相对定位

绝对定位

固定定位

JavaScript

介绍

JavaScript 的导入方式

内联方式

外部引入方式

变量

数据类型

条件语句

循环语句

函数

事件

DOM 操作

什么是DOM 操作

获取文档中的元素的常用方法

选择 DOM 元素（获取节点）

修改内容（文本/HTML）

修改样式

修改属性

通过修改属性修改事件触发

修改 class（CSS 类名）

通用选择器 `*`

使用`display`定义元素的显示类型

使用`overflow: hidden;`

`flex-direction`

`flex-wrap`

`justify-content`

`align-items`

`align-content`

`order`

`flex-grow`

`flex-shrink`

`flex-basis`

`flex`

`align-self`