Web基础

理论篇

什么是 Web

Web：全球广域网，也称为万维网 (World Wide Web)。
通俗理解：能够通过浏览器访问的网站。
常见类型：
- 电商网站：淘宝、京东、唯品会。
- 企业内部系统：CRM、OA、ERP 等。

Web 网站结构

一个 Web 网站核心由三部分组成：

前端程序：负责将数据以好看的样式呈现出来。
后端程序：负责具体的业务逻辑处理。
数据库：负责数据的存储和管理。

Web 请求访问流程

在浏览器地址栏输入 URL 并回车；
访问到服务器中的 前端程序（负责页面呈现）；
前端程序发送请求到 服务端程序；
服务端程序查询 数据库，获取数据返回前端；
前端程序将数据渲染展示在页面中；
浏览器解析前端程序后，最终呈现出网页。

Web 开发模式

前后端不分离模式
- 前端页面和后端逻辑混合在一起。
前后端分离模式
- 前端负责渲染页面，后端提供接口，前端通过请求获取数据。

HTML+CSS

理论篇

Web 前端介绍

职责：将数据以美观的样式呈现给用户，即网页开发。
网页组成：
文字、图片、音频、视频、超链接、表格等。
本质：前端程序员编写的代码，经浏览器“解析+渲染”后显示。
浏览器内核：负责代码解析和渲染，不同内核解析效果可能不同，因此需要遵循统一的 Web标准。

Web 标准

制定组织：W3C （万维网联盟）
组成部分：
- HTML：结构（页面元素与内容）
- CSS：表现（样式）
- JavaScript：行为（交互）
学习内容分层：
- 基础：HTML、CSS、JavaScript、Vue3、Ajax、Axios
- 进阶：Vue 工程化、ElementPlus、案例项目

HTML 基础

HTML（超文本标记语言）：
- 超文本：支持多媒体（图片、音频、视频）超越纯文本
- 标记语言：由 <标签名> 构成，标签是预定义好的。
- HTML 标签由浏览器解析，直接运行。
基本结构：
```
<html>
  <head>
    <title>标题</title>
  </head>
  <body>
    页面内容
  </body>
</html>
```
- <html> 根标签
- <head>：存放标题、样式等浏览器信息
- <body>：存放网页主体内容（文本、图片等）

CSS 基础

CSS（层叠样式表）
- 用于设置页面表现（外观、布局等）
三种引入方式：
- 行内样式（不常用，常配合 JS）
- 内部样式（ <style> 标签）
- 外部样式（ .css 文件，推荐）
颜色表示法：
- 关键字
- RGB / RGBA
- 十六进制（#b2b2b2）

常用 HTML 标签

标题：<h1> ~ <h6>（1 最大，6 最小）
超链接：<a href="" target="">
- href：链接地址
- target：_self（默认，当前页） / _blank（新窗口）
图片：<img src="路径">
视频：<video src="路径" controls>
段落：<p></p>
布局：<div>（块级）、<span>（行内）

CSS 选择器

常用类型：
- 标签选择器（p）
- 类选择器（.class）
- id 选择器（#id）
语法：
```
选择器 {
  属性: 值;
}
```
示例：去掉超链接下划线：
```
a {
  text-decoration: none;
}
```

CSS 盒子模型

元素被看作一个盒子，由：
- 内容（content）
- 内边距（padding）
- 边框（border）
- 外边距（margin）
box-sizing: border-box; 让 width 和 height 包括边框与内边距

表单标签与属性

表单：<form>，用于收集数据并提交至服务器
- action：提交地址
- method：GET（拼接在 URL 上）/ POST（请求体）
表单项：
- <input>：text、password、radio、checkbox、file、date、time、datetime-local、hidden、submit、reset、button
- <select><option>：下拉列表
- <textarea>：文本域
注意：必须有 name 属性，才能被提交到服务端

布局方式

Flex 布局
- 父级 display: flex;
- 常用属性：justify-content（主轴对齐）、align-items（交叉轴对齐）、flex-direction（方向）
版心居中
- width: 80%; margin: 0 auto;

代码篇

HTML 基本结构

作用 / 概念简述
HTML 页面都有固定骨架结构，用于定义头部信息（标题、元数据等）和主体内容（对用户展示的内容）。

通用模板

<html>
  <head>
    <title>网页标题</title>
  </head>
  <body>
    页面内容
  </body>
</html>

属性 / 知识点表格

标签/属性	说明
`<html>`	HTML 文档根元素
`<head>`	网页头部信息（标题、样式、脚本等）
`<title>`	网页标题，显示在浏览器标签上
`<body>`	网页主体内容

片段代码案例

<html>
  <head>
    <title>HTML 快速入门</title>
  </head>
  <body>
    <h1>Hello HTML</h1>
    <img src="img/1.png">
  </body>
</html>

HTML 标题与超链接

作用 / 概念简述
标题标签 <h1>~<h6> 用于分级显示标题文字；超链接 <a> 用于跳转到其他页面或资源。

通用模板

<h1>一级标题</h1>
<a href="URL地址" target="_blank">超链接文字</a>

属性 / 知识点表格

属性	说明
`href`	链接目标 URL
`target`	`_self` 当前页打开（默认），`_blank` 新页面打开

片段代码案例

<h1 id="title">【新思想】推进长江十年禁渔</h1>
<a href="https://news.cctv.com/" target="_blank">央视网</a>

HTML 图片与视频

作用 / 概念简述
图片 <img> 用于展示图像，视频 <video> 用于播放多媒体视频。

通用模板

<img src="图片路径" alt="描述文字">
<video src="视频路径" controls width="宽度"></video>

属性 / 知识点表格

属性	说明
`src`	文件路径（相对/绝对）
`alt`	图片无法加载时显示的文字
`controls`	显示播放控件
`width`/`height`	设置文件显示大小

片段代码案例

<img src="img/1.gif" alt="示例图片" width="100%">
<video src="video/news.mp4" controls width="80%"></video>

CSS 基础样式（颜色与文字）

作用 / 概念简述
CSS 用于设置文字颜色、大小、行高等视觉效果。

通用模板

.类名 {
  color: 颜色值;
  font-size: 字号;
  line-height: 行高;
}

属性 / 知识点表格

属性	说明
`color`	设置字体颜色（关键字/RGB/十六进制）
`font-size`	设置字体大小
`line-height`	设置行高

片段代码案例

<style>
  .publish-date {
    color: #b2b2b2;
  }
</style>
<span class="publish-date">2024年05月15日 20:07</span>

CSS 选择器

作用 / 概念简述
选择器用来选取需要设置样式的元素。

通用模板

标签名 { 样式属性: 值; }
.类名 { 样式属性: 值; }
#ID名 { 样式属性: 值; }

属性 / 知识点表格

选择器	说明
标签选择器	直接用标签名选择全部同类元素
类选择器	用 `.` + 类名选择
ID 选择器	用 `#` + ID 选择

片段代码案例

<style>
  a {
    text-decoration: none;
  }
</style>
<a href="#">没有下划线的链接</a>

CSS 盒子模型

作用 / 概念简述
网页中所有元素都是一个“盒子”，包括内容、内边距、边框、外边距。

通用模板

选择器 {
  width: 宽度;
  height: 高度;
  padding: 内边距;
  border: 边框;
  margin: 外边距;
  box-sizing: border-box;
}

属性 / 知识点表格

属性	说明
`width`/`height`	内容区宽高
`padding`	内边距
`border`	边框（宽度样式颜色）
`margin`	外边距
`box-sizing`	`content-box` / `border-box`

片段代码案例

<style>
  div {
    width: 200px;
    height: 200px;
    padding: 20px;
    border: 10px solid red;
    margin: 30px;
    box-sizing: border-box;
    background-color: aquamarine;
  }
</style>
<div>盒子模型测试</div>

表单与输入控件

作用 / 概念简述
HTML 表单采集用户输入数据并提交到服务端。

通用模板

<form action="提交地址" method="GET/POST">
  <input type="text" name="字段名">
  <input type="submit" value="提交">
</form>

属性 / 知识点表格

标签/属性	说明
`<form>`	定义表单，action 提交地址，method 提交方式
`<input>`	文本框、密码框、按钮等（通过 type 控制）
`<select>`	下拉选择
`<textarea>`	多行文本
`name`	字段名，提交时必须有
`value`	默认提交值

片段代码案例

<form action="" method="get">
  用户名: <input type="text" name="username">
  年龄: <input type="text" name="age">
  <input type="submit" value="提交">
</form>

Flex 布局

作用 / 概念简述
Flex（弹性盒子布局）可以灵活控制元素水平、垂直排列与对齐。

通用模板

.container {
  display: flex;
  justify-content: 对齐方式;
  align-items: 交叉轴对齐方式;
}

属性 / 知识点表格

属性	说明
`justify-content`	主轴对齐（flex-start, flex-end, center, space-between, space-around）
`align-items`	交叉轴对齐（flex-start, flex-end, center）
`flex-direction`	主轴方向（row, column）

片段代码案例

<style>
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
</style>
<div class="header">
  <h1>系统标题</h1>
  <a href="#">退出</a>
</div>