动态更新中...

本文最后更新于 2025年7月29日下午

大三小学期集中实习项目需要做一个失物招领系统，作为项目组的PO兼前端组组长，速成前端义不容辞！（实则因为大家都没学过前端，于是只能硬着头皮上罢了🫠）
此帖为前端速成记录贴，因为我也不是科班，不足之处请大家指正！下面笔记的内容主要来自于B站UP主罗大富Bigrich 的视频教程 3小时前端入门教程（HTML+CSS+JS）
后续：本来准备把HTML、CSS、JavaScript都速成一下，后来发现在AI的辅助下，其实看懂HTML就够用了。目前集中实习也结束了，我还需要准备一下导师的第二次汇报，就不继续填前端的坑了。顺便将集中实习期间学到的MySQL相关指令记在这里。

前端的概念

前端是构建网页的一部分，负责用户在浏览器中看到和与之交互的内容，而网页是在浏览器中呈现内容的文档或页面。通常网页呢是使用HTML, CSS以及JavaScript组成。

HTML定义了页面的结构和内容，包括文本、图像、链接等等
CSS定义了页面的样式和布局（比如网页按键是黄色的，而其他的底色都是黑色的）
JS用于添加交互性和动态功能作用

VSCode环境配置

使用VSCode并安装以下插件：

安装Live Server插件，可以实时预览网页，不需要刷新页面即可看到效果。
安装HTML CSS Support插件，可以高亮显示HTML、CSS代码。
安装Auto Rename Tag插件，可以自动同步修改标签名称。

HTML 简介

HTML 全称是 Hypertext Markup Language（超文本标记语言）。

HTML 标签

HTML 通过一系列的 标签（也称为元素） 来定义文本、图像、链接等等。HTML 标签是由尖括号包围的关键字。

标签通常成对出现，包括开始标签和结束标签（也称为双标签），内容位于这两个标签之间，例如：

<p>这是一个段落。</p>
<h1>这是一个标题。</h1>
<a href="#">这是一个超链接。</a>
```  

除了双标签，也存在 **单标签**（无需结束标签），例如：  

```html
<input type="text">
<br>
<hr>
```  

区别  
- 单标签：用于**没有内容**的元素（无需包裹内容）。  
- 双标签：用于**有内容**的元素（需包裹内容）。

#### HTML 文档结构  

示例代码：
```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>：声明文档类型，告诉浏览器使用 HTML 5 标准解析页面。
<html>：文档的根元素，包含了整个 HTML 页面（是最外层容器）
<head>：包含了文档的元信息，比如标题、编码格式、样式表、脚本等。
<title>：文档的标题，显示在浏览器的标题栏。
<meta charset="UTF-8">：指定文档的编码格式，UTF-8 是目前最常用的编码格式。
<link>：链接外部样式表，将样式表文件(CSS)引入到 HTML 文档中。
<script>：链接外部脚本文件，将脚本文件(JS)引入到 HTML 文档中。
<body>：包含了文档的正文内容，也就是页面的主要内容，比如文本、图像、链接等等。

如上在VScode中输入!后按Tab键可以生成完整的HTML文档结构，右键选择Open with Live Server可以实时预览效果。

HTML 常用标签

文本标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>练习</title>
</head>
<body>
    <h1>一级标签</h1>
    <p>这是一段练习文字。</p>
    <h2>二级标签</h2>
    <h3>三级标签</h3>
    <p>这是一段练习文字。</p>
    <h4>四级标签</h4>
    <h5>五级标签</h5>
    <h6>六级标签</h6>
    <p>这是一个段落标签</p>
    <p>
        试一试：<b>加粗功能</b>, <i>斜体功能</i>, <u>下划线功能</u>, <s>删除线</s>
    </p>

    <ul>
        <li>无序列表1</li>
        <li>无序列表2</li>
        <li>无序列表3</li>
    </ul>

    <ol>
        <li>有序列表1</li>
        <li>有序列表2</li>
        <li>有序列表3</li>
    </ol>

    <ul>
        <li>th = table header</li>
        <li>td = table data</li>
        <li>tr = table row</li>
        <li>在表头加入border属性可以使表格边框显示</li>
    </ul>
    <table border="1">
        <tr>
            <th>表头 1</th>
            <th>表头 2</th>
            <th>表头 3</th>
        </tr>
        <tr>
            <td>单元格 1</td>
            <td>单元格 2</td>
            <td>单元格 3</td>
        </tr>
        <tr>
            <td>单元格 1</td>
            <td>单元格 2</td>
            <td>单元格 3</td>
        </tr>
        <tr>
            <td>单元格 1</td>
            <td>单元格 2</td>
            <td>单元格 3</td>
        </tr>
    </table>
</body>
</html>

<h1> ~ <h6>：定义标题，<h1> 定义最大的标题，<h6> 定义最小的标题。
<p>：定义段落。
<ul>：定义无序列表。
<ol>：定义有序列表。
<li>：定义列表项。
<table>：定义表格。
<tr>：定义表格行。
<th>：定义表头。
<td>：定义表格单元格。
<b>：定义加粗。
<i>：定义斜体。
<u>：定义下划线。
<s>：定义删除线。

以下四个标签的用法示例，见标签的属性小节。

<br>：定义换行。
<hr>：定义水平线。
<a>：定义超链接。
<img>：定义图像。

标签的属性

属性在 HTML 中起到非常重要的作用，每个标签都可以有一个或多个属性，它们用于定义元素的行为和外观，以及与其他元素的关系。

基本语法：

<开始标签 属性名="属性值">  
```  
在`开始标签`后写属性名，`属性名`呢是用于标识这个属性的，`属性值`定义这个属性的值。`属性值`一般用引号将其括起来(单引号，双引号均可)。

每个 HTML 元素可以具有不同的属性  
```html  
<p id="describe" class="section">这是一个段落标签。</p>  
<a href="https://www.baidu.com">这是一个超链接</a>  
```  

属性名称不区分大小写，属性值对大小写敏感  
```html  
<img src="example.jpg" alt="">  
<img SRC="example.jpg" alt="">  
<img src="EXAMPLE.JPG" alt="">  
<!-- 前两者相同，第三个与前两个不一样-->

src属性：定义图像的 URL 地址。

适用于大多数 HTML 元素的属性：

属性	描述
class	为 HTML 元素定义一个或多个类名（类名从样式文件引入）
id	定义元素唯一的 ID
style	规定元素的行内样式

例如：

1
2
3

<h1 id="title"></h1>  
<div class="nav-bar"></div>  
<h2 class="nav-bar"></h2>

常用属性

标签属性:

href：定义超链接的 URL 地址。
target：定义链接打开的方式。
- _blank 链接在新窗口打开；
- _self 链接在当前窗口打开（默认值）
- _parent 链接在父窗口或者父框架打开；
- _top 链接在顶层窗口或者顶层框架打开。
rel：定义链接与当前页面的关系，nofollow 值可以防止搜索引擎追踪。

下面是代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML属性</title>
</head>
<body>
    a标签的href属性：<a href="https://blog.cyaml.top">这是博客网站超链接</a>
    <br>
    <a href="https://blog.cyaml.top" target="_blank">可以在新窗口打开</a>
    <br>
    <a href="https://blog.cyaml.top" target="_self">在当前窗口打开（这是默认值）</a>
    <hr>
    <a href="https://blog.cyaml.top" target="_parent">在父窗口打开</a>
    <br>
    <a href="https://blog.cyaml.top" target="_top">在顶层窗口打开</a>
    <br>
    <img src="真相帝柳淑.jpg" alt="这是一张图片" width="500" height="350">
</body>
</html>

<img>标签属性:
- src：定义图像的 URL 地址。
- alt：定义图像的替代文本，当图像不能显示时显示该文本。
- width：定义图像的宽度。
- height：定义图像的高度。

>《快意十三刀》真相帝·柳淑可爱捏😍🥰

HTML区块

块元素

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

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

div标签通常用于创建一个可以包含其他HTML元素的容器块。它通常呢没有任何语义，仅用于组织内容。因为上述良好性质，div标签经常用于创建页面的布局结构、创建网页的不同的部分，比如页眉页脚、导航栏、侧边栏以及中间的内容区域。

div构建导航栏快捷方式：直接输入`.nav`(类名)+`Tab`即可快速创建一个导航栏样式。

行内元素

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML区块</title>
</head>
<body>
    <div class="nav">
        <a href="#">首页</a>
        <a href="#">产品</a>
        <a href="#">服务</a>
    </div>
    <div class="content">
        <h1>文章标题</h1>
        <p>文章内容</p>
        <p>文章内容</p>
        <p>文章内容</p>
        <p>文章内容</p>
        <p>文章内容</p>
    </div>
    
    <span>这是第1个span标签</span>
    <span>这是第2个span标签</span>
    <span>这是第3个span标签</span>
    <span>这是第4个span标签</span>
    <hr>
    <span>链接点击这里<a href="https://blog.cyaml.top">链接</a></span>
</body>
</html>

HTML表单

表单简介

HTML 表单是 用户与服务器交互的核心载体，用于收集用户输入（如登录、注册、问卷等），并将数据发送到服务器处理。

HTML 表单用于收集、验证和提交用户输入。表单可以包含文本输入框、下拉菜单、单选框、复选框、提交按钮等。

表单可以包含多个输入控件，每个控件都有自己的属性和方法。
表单可以包含提交按钮，用户点击该按钮可以提交表单。
表单可以包含验证规则，用于确保用户输入的数据有效。
表单可以包含 JavaScript 脚本，用于处理表单提交事件。

form标签是表单的容器，它有很多的属性，暂且不表。如果想要制作表单，则需要将表单中的所有元素写入在form标签内部。

1	`<form action="submit.php" method="post"></form>`

action：指定表单数据提交到的 服务器脚本地址（如 submit.php），若省略则提交到当前页面。
method：指定 HTTP 请求方法，常用：
- get：数据拼接在 URL 中（如 ?username=xxx&password=xxx），适合简单查询。
- post：数据藏在请求体中，更安全，适合敏感数据（如密码）。

form标签中最常用的标签就是input，也就是输入标签。input标签是一个单标签，此标签有几十个属性，但常用的可能也就几个而已——最重要的属性是type。type属性规定了input元素的类型。type属性也有十几个属性值，这些属性值规定了我们要显示的input元素的类型。

input的默认值为text。

表单控件

文本输入框：`type="text"`

示例：

1
2
3

<label for="username">用户名：</label>  
<input type="text" placeholder="请输入用户名">  
<input type="text" value="请输入用户名">

<label>：通过 for 属性关联 input 的 id（示例中未写 id，建议补充 id="username" 实现点击标签聚焦输入框，提升可访问性）。
placeholder：输入框内的 浅灰色提示文字，聚焦后消失（仅提示，不占实际值）。
value：输入框的 默认值，用户可修改，提交时会被发送。

密码输入框：`type="password"`

1 2	`<label for="password">密码：</label> <input type="password" placeholder="请输入密码">`

输入内容会 隐藏为圆点/星号，保护敏感信息。

单选框：`type="radio"`

<label for="gender">性别：</label>  
<input type="radio" name="gender">男  
<input type="radio" name="gender">女  
<input type="radio" name="gender">其他

name 属性：同一组单选框必须设置 相同的 name（如 gender），确保“互斥选择”（同一时间只能选一个）。

复选框：`type="checkbox"`

<label for="hobby">爱好：</label>  
<input type="checkbox" name="hobby">乒乓球  
<input type="checkbox" name="hobby">足球  
...

name 属性：同一组复选框必须设置相同 name（如 hobby），提交时数据会以数组形式发送（如 hobby=乒乓球&hobby=足球），支持多选。

提交按钮：`type="submit"`

示例：

点击后，表单数据会按照 form 的 action 和 method 规则，发送到服务器。
value：定义按钮上显示的文字（如“提交”）。

表单工作流程 & 代码示例

用户填写表单 → 点击 提交按钮 → 表单数据被打包。
根据 method（get/post）和 action（服务器地址），数据被发送到服务器。
服务器端脚本（如 submit.php）接收并处理数据（存数据库、验证等）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML表单</title>
</head>
<body>
    <form>
        <label for="username">用户名：</label>
        <input type="text" placeholder="请输入用户名">
        <input type="text" value="请输入用户名">
        <br>

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

        <label for="gender">性别：</label>
        <input type="radio" name="gender">男
        <input type="radio" name="gender">女
        <input type="radio" name="gender">其他
        <br>

        <label for="hobby">爱好：</label>
        <input type="checkbox" name="hobby">乒乓球
        <input type="checkbox" name="hobby">足球
        <input type="checkbox" name="hobby">吉他🎸
        <input type="checkbox" name="hobby">绘画
        <br>

        <input type="submit" value="提交">
    </form>

    <form action="submit.php" method="post"></form>
</body>
</html>

MySQL指令

注意，下面命令行中的分号(;)是必须的，请不要省略！

创建项目所需的SQL库

先下载老师提供的MySQL安装包，使用老师文档中的配置安装
cmd唤起终端，使用以下命令创建数据库

mysql -u root -p
123456 # 密码
create database lost_and_found; # 创建 
show databases; # 查看
use lost_and_found # 选中
exit # 退出

增删改查

增

直接用Flask框架实现了“创建表”+“增加数据”，我就没尝试用命令行输入。

删

cmd唤起终端，使用以下命令删除数据

mysql -u root -p
123456 # 密码
use lost_and_found # 选中
delete from 表名 where 条件; # 删除数据
DELETE FROM lost_items WHERE id = '0fadc833-d23d-4b00-bb93-d864d01aef07'; # 删除指定id的数据(MySQL的关键字对大小写不敏感)

改

没试过。

查

cmd唤起终端，使用以下命令查看数据库元素

mysql -u root -p
123456 # 密码
use lost_and_found # 选中
show tables; # 查看表
select * from 表名; # 查看表中的数据

个人学习笔记 > Web前端技术

#HTML #Web前端

Web前端速成-HTML篇

http://dbqdss.github.io/2025/07/11/计算机/大三小学期集中实习/Web前端速成-HTML篇/

作者

失去理想的獾

发布于

2025年7月11日

许可协议

7月12日李家村万达小聚上一篇

Python中的常用功能下一篇