前端

HTML

Web基础知识

  • 定义：Web网站即万维网（World Wide Web）上的应用平台，允许用户通过浏览器访问。

Web网站结构

  • 前端程序

    • 功能：负责页面的样式与布局，将数据以直观、美观的方式展示给用户。

    • 技术栈：HTML、CSS、JavaScript、前端框架（Vue、React、Angular等）。

  • 后端程序

    • 功能：负责业务逻辑处理，接收请求、处理数据、调用数据库、返回响应。

    • 技术栈：Java、Python（Django/Flask）、Node.js、PHP等。

  • 数据库

    • 功能：存储与管理网站数据。

    • 类型：关系型数据库（MySQL、PostgreSQL）与非关系型数据库（MongoDB、Redis）。

Web网站的工作流程

Snipaste_2025-08-13_22-44-25.png

  1. 用户在浏览器地址栏输入 URL 并回车。

  2. 浏览器向服务器请求页面资源（HTML、CSS、JavaScript）。

  3. 前端程序加载页面框架与样式。

  4. 前端通过 HTTP 请求（AJAX、Fetch、Axios等）向后端获取数据。

  5. 后端处理业务逻辑，访问数据库并获取数据。

  6. 数据经过处理后返回给前端程序。

  7. 前端将数据动态渲染到页面，生成最终可视化效果。

Web网站的开发模式

  • 静态网站开发模式

    • 所有内容提前写好，直接返回给浏览器。

    • 优点：访问速度快、无需数据库支撑。

    • 缺点：内容固定，不能动态更新。

    • 示例：个人简介页面、文档站点。

  • 动态网站开发模式

    • 页面内容通过后端逻辑和数据库动态生成。

    • 优点：可实现个性化与交互功能（电商、博客、论坛等）。

    • 缺点：开发复杂度高，需要后端和数据库支撑。

  • 前后端分离开发模式（现代主流模式）

    • 前端和后端完全分离，前端负责页面渲染与数据请求，后端提供 API 接口服务。

    • 优点：开发效率高、可维护性强、前端可独立部署。

    • 示例：Vue + Node.js / React + Spring Boot。

HTML 文档结构类

<!DOCTYPE> 文档类型声明

概述： 告诉浏览器当前 HTML 文档使用的版本，HTML5 中必须写在第一行，简洁写法为 <!DOCTYPE html>。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>HTML快速入门</title>
</head>
<body>
    <h1>Hello HTML</h1>
</body>
</html>
语法说明
<!DOCTYPE html>HTML5 文档声明
lang设置文档语言，如 zh-CN（简体中文）、en（英文）

<html> 根元素

概述： HTML 页面中所有内容都必须包含在 <html> 标签内。

<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>我的网页</title>
    </head>
    <body>
        页面内容
    </body>
</html>
属性说明
lang定义文档语言（SEO及无障碍支持）

<head> 文档头部

概述： 用于定义页面的元数据（编码、标题、样式、脚本等），不会直接显示在网页中。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML快速入门</title>
    <link rel="stylesheet" href="style.css">
</head>
常用子标签说明
<meta>元信息（如字符集、描述、视口设置）
<title>浏览器标签页标题
<link>引入外部资源（CSS、字体等）
<style>内部 CSS 样式
<script>嵌入 JavaScript 脚本

<meta> 元信息

概述： 提供有关文档的元数据，不直接显示在网页上，必须位于 <head> 中。

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
属性说明常用值
charset设置字符编码UTF-8
name元信息类型viewport、description 等
content配合 name 使用，定义具体内容如 width=device-width, initial-scale=1.0

<title> 页面标题

概述： 定义网页标题，显示在浏览器标签上，也是 SEO 显示标题。

<title>我的第一个网页</title>
位置作用
<head> 内设置网页标签页上显示的标题

<body> 页面主体

概述： HTML 文档的主要内容，用户可见部分均在 <body> 中。

<body>
    <h1>欢迎来到我的网站</h1>
    <p>这是正文内容。</p>
</body>
说明
所有 HTML 可见内容的容器，可通过 CSS 控制样式

文本与排版标签

<h1> ~ <h6> 标题标签

概述： 定义不同级别的标题，<h1> 最大也最重要，<h6> 最小。对 SEO 有语义权重。

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
标签说明
<h1> ~ <h6>标题标签，数字越大字号越小，语义层级越低

<p> 段落标签

概述： 定义一个段落，浏览器会在段落前后自动留出空白。

<p>这是第一个段落。</p>
<p>这是第二个段落。</p>
标签说明
<p>段落标签，常配合 CSS 调整间距、行高、缩进

<br> 换行标签

概述： 单标签，用于强制换行。

第一行<br>第二行
标签说明
<br>换行标签，常用于地址、诗歌等不规则换行场景

<hr> 分隔线

概述： 在内容之间插入一条水平分隔线。

段落一<hr>段落二
标签说明
<hr>水平分隔线，可以用 CSS 改颜色、宽度、样式

<strong> & <em> 语义强调

概述： <strong> 表示强烈强调，通常加粗；<em> 表示轻微强调，通常斜体。

<strong>重点内容</strong>
<em>轻微强调内容</em>
标签默认样式语义
<strong>加粗重要内容强调
<em>斜体轻度强调

<b> & <i> 纯样式加粗/斜体

概述： 与 <strong> / <em> 类似，但不具备语义。

<b>纯视觉加粗</b>
<i>纯视觉斜体</i>
标签说明
<b>加粗文本，无语义
<i>斜体文本，无语义

<u> & <ins> 下划线

概述： <u> 表示视觉下划线；<ins> 表示插入文本，有语义。

<u>纯下划线</u>
<ins>插入内容</ins>
标签语义
<u>仅显示下划线
<ins>插入的内容（语义化）

<s> & <del> 删除线

概述： <s> 是纯视觉删除线；<del> 表示删去的文本，有语义。

<s>原价￥199</s>
<del>无效内容</del>
标签语义
<s>纯视觉删除线
<del>表示删除（语义化）

<span> 内联容器

概述： 无语义内联容器，常用于修改部分文字样式。

<p>这是<span style="color:red">红色</span>文本</p>
标签说明
<span>内联容器，用于局部加样式或脚本

链接与多媒体标签

<a> 超链接

概述： 创建超链接，用于从一个页面跳转到另一个页面，也可以跳转到锚点、邮件、电话等。

<!-- 基本用法：当前窗口打开 -->
<a href="https://www.cctv.com">央视网</a>

<!-- 新窗口打开 -->
<a href="https://www.cctv.com" target="_blank" rel="noopener noreferrer">央视网新窗口</a>

<!-- 页面内锚点 -->
<a href="#section1">跳转到第1部分</a>
...
<h2 id="section1">第1部分内容</h2>

<!-- 邮件链接 -->
<a href="mailto:info@example.com">发邮件</a>

<!-- 电话链接（移动端） -->
<a href="tel:13800000000">拨打电话</a>
属性说明常用值示例
href链接地址https://、#section、mailto:、tel:
target打开方式_self（默认）、_blank（新窗口）
rel与 _blank 配合防安全风险noopener、noreferrer
title鼠标悬停提示文本任意描述文字
download点击下载而不是打开可为文件名

<img> 图片

概述： 用于在网页中插入图片，支持JPG、PNG、GIF、SVG等格式。

<!-- 基础用法 -->
<img src="img/1.png" alt="示例图片" width="300">

<!-- 自适应宽度（保持比例） -->
<img src="img/2.jpg" alt="自适应图片" style="max-width: 100%; height: auto;">

<!-- 高分辨率屏适配（Retina） -->
<img src="img/1.png" 
     srcset="img/1@2x.png 2x, img/1@3x.png 3x" 
     alt="高分屏图片">
属性说明常用值/示例
src图片地址相对路径 / 绝对路径 / 网络URL
alt替代文本（图片加载失败显示）描述性文字
width / height显示尺寸像素值 / 百分比
srcset多分辨率资源文件+倍率

<video> 视频

概述： 用于在网页中插入视频，支持 mp4/webm/ogg 等格式，可设置播放控件、封面图等。

<!-- 最简单用法 -->
<video src="video/news.mp4" controls width="80%"></video>

<!-- 多格式兼容 -->
<video controls poster="img/cover.jpg" width="640">
    <source src="video/news.mp4" type="video/mp4">
    <source src="video/news.webm" type="video/webm">
    您的浏览器不支持 video 标签
</video>

<!-- 自动播放/静音/循环 -->
<video src="video/banner.mp4" autoplay muted loop></video>
属性说明常用值
src视频源地址相对/绝对/URL
controls显示播放控件布尔属性
poster视频封面图片URL
autoplay自动播放布尔属性
muted静音播放布尔属性
loop循环播放布尔属性
width/height尺寸像素/百分比

<audio> 音频

概述： 用于插入音频文件，支持 mp3/ogg/wav 等格式。

<!-- 基础用法 -->
<audio src="audio/news.mp3" controls></audio>

<!-- 多格式兼容 -->
<audio controls>
    <source src="audio/news.mp3" type="audio/mpeg">
    <source src="audio/news.ogg" type="audio/ogg">
    您的浏览器不支持 audio 标签
</audio>

<!-- 循环播放 + 自动播放 -->
<audio src="audio/bgm.mp3" autoplay loop></audio>
属性说明常用值
src音频资源地址相对/绝对/URL
controls显示播放器控件布尔属性
autoplay自动播放（部分浏览器需静音）布尔属性
loop循环播放布尔属性
muted静音播放布尔属性

列表标签

<ul> / <li> 无序列表

概述： <ul> 定义无序列表，<li> 为列表项，列表项默认使用项目符号（•）显示。

<ul>
    <li>苹果</li>
    <li>香蕉</li>
    <li>橘子</li>
</ul>
标签说明
<ul>定义无序列表容器
<li>定义列表中的每一项

<ol> / <li> 有序列表

概述： <ol> 定义有序列表，<li> 为列表项，默认用数字编号。

<ol>
    <li>第一步</li>
    <li>第二步</li>
    <li>第三步</li>
</ol>
标签/属性说明常用值
<ol>定义有序列表容器
<li>定义列表中的每一项
type编号类型1（数字，默认）、A（大写字母）、a（小写字母）、I（大写罗马）、i（小写罗马）
start编号起始值数字

<dl> / <dt> / <dd> 定义列表

概述： 定义项目及其描述，用于术语解释、问答等。

<dl>
    <dt>HTML</dt>
    <dd>超文本标记语言</dd>
    <dt>CSS</dt>
    <dd>层叠样式表</dd>
</dl>
标签说明
<dl>定义列表容器 （Description List）
<dt>定义术语（Description Term）
<dd>定义术语描述（Description Definition）

表格标签

<table> 表格容器

概述： 定义表格的最外层容器，所有行和列都必须包含在 <table> 中。

<table border="1">
    <tr>
        <td>单元格1</td>
        <td>单元格2</td>
    </tr>
</table>
属性说明常用值
border表格边框粗细（HTML5 建议用CSS）数字，单位px
width表格宽度px / %
cellpadding单元格内边距（HTML5 用CSS替代）数字
cellspacing单元格间距（HTML5 用CSS替代）数字

<thead> 表头区域

概述： 表格的表头部分，通常包含列标题。与 <tbody>、<tfoot> 一起用来分隔表格结构。

<table border="1">
    <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
    </thead>
</table>
标签说明
<thead>表格头部容器

<tbody> 表格主体

概述： 表格的主要数据区域，可以有多行数据。

<table border="1">
    <tbody>
        <tr>
            <td>张三</td>
            <td>20</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>22</td>
        </tr>
    </tbody>
</table>
标签说明
<tbody>表格主体容器

<tfoot> 表格脚注

概述： 表格的底部区域，用于总结、统计等信息。

<table border="1">
    <tfoot>
        <tr>
            <td>总计</td>
            <td>100</td>
        </tr>
    </tfoot>
</table>
标签说明
<tfoot>表格底部容器

<tr> 表格行

概述： 定义表格中的一行。

<tr>
    <td>单元格1</td>
    <td>单元格2</td>
</tr>
标签说明
<tr>表格行容器

<th> 表头单元格

概述： 定义表格中列或行的标题，默认加粗并居中。

<th>姓名</th>
<th>年龄</th>
标签说明
<th>表格头部单元格（加粗居中）

<td> 数据单元格

概述： 定义表格中普通数据单元格。

<td>张三</td>
<td>20</td>
标签说明
<td>表格数据单元格

表单标签

<form> 表单容器

概述： 表单用于收集用户输入，提交到指定的服务器地址。

<form action="/submit" method="post" enctype="multipart/form-data">
    <!-- 表单项 -->
</form>
属性说明常用值
action提交目标地址URL
method提交方式get（URL传参） / post（请求体传参）
enctype编码类型，文件上传必须multipart/form-data

<input> 输入框

概述： 用户输入数据的主力标签，通过 type 决定输入类型。

<input type="text" name="username" placeholder="输入用户名">
<input type="password" name="pwd" placeholder="输入密码">
<input type="radio" name="gender" value="male"> 男
<input type="checkbox" name="hobby" value="game"> 游戏
<input type="file" name="avatar">
<input type="hidden" name="userid" value="123">
<input type="submit" value="提交">
<input type="reset" value="重置">
常见 type说明
text单行文本输入
password密码输入（内容隐藏）
radio单选按钮（同 name 组内互斥）
checkbox复选框
file文件选择
hidden隐藏字段
submit提交按钮
reset重置按钮
button普通按钮（无默认行为）

<textarea> 多行文本框

概述： 用于输入多行文本，比如留言、评论等。

<textarea name="description" rows="4" cols="40">默认内容</textarea>
属性说明
rows可见行数
cols可见列数
placeholder占位提示文本

<select> 下拉列表

概述： 定义下拉列表，配合 <option> 选项标签使用。

<select name="degree">
    <option value="">--请选择--</option>
    <option value="1">本科</option>
    <option value="2">硕士</option>
</select>
属性说明常用值
name提交字段名任意字符串
multiple支持多选布尔属性

<option> 下拉选项

概述： 定义下拉菜单里的具体选项。

<option value="1">苹果</option>
<option value="2" selected>香蕉</option>
属性说明
value提交时传给服务器的值
selected默认选中该选项

<label> 标签文本

概述： 标签文字，与表单控件关联，方便点击文字操作表单元素。

<label for="username">用户名：</label>
<input type="text" id="username" name="username">
属性说明
for关联控件的 id 值

<button> 按钮

概述： 定义一个可点击按钮，type 属性控制行为。

<button type="button">普通按钮</button>
<button type="submit">提交按钮</button>
<button type="reset">重置按钮</button>
属性说明常用值
type按钮类型button、submit、reset

语义化布局标签

<header> 页眉

概述： 定义文档或区块的头部区域，通常包含 logo、标题、导航等。具有语义化，利于 SEO。

<header>
    <h1>网站标题</h1>
    <nav>
        <a href="#home">首页</a>
        <a href="#about">关于</a>
    </nav>
</header>
标签说明
<header>文档头部/内容头部

概述： 定义导航链接部分，通常包含到站点其他部分的链接。

<nav>
    <a href="#section1">部分1</a>
    <a href="#section2">部分2</a>
</nav>
标签说明
<nav>导航链接区域容器

<main> 主内容

概述： 文档主体区域，一个文档中通常只有一个 <main>，包含主要内容。

<main>
    <article>这里是主要内容</article>
</main>
标签说明
<main>页面主要内容容器

<section> 章节

概述： 表示文档的一个独立板块，通常有自己的标题。

<section>
    <h2>新闻栏目</h2>
    <p>新闻内容...</p>
</section>
标签说明
<section>文档章节容器

<article> 文章

概述： 独立、完整的内容单元，可以单独分发（如新闻、博客文章）。

<article>
    <h2>文章标题</h2>
    <p>文章正文内容...</p>
</article>
标签说明
<article>用来包裹一篇完整的文章或独立内容

<aside> 侧边栏

概述： 定义与主内容间接相关的内容，如侧边栏、广告、推荐列表等。

<aside>
    <h3>相关链接</h3>
    <ul>
        <li><a href="#">链接一</a></li>
        <li><a href="#">链接二</a></li>
    </ul>
</aside>
标签说明
<aside>与主要内容相关的附属信息

概述： 定义文档或区块的底部区域，例如版权信息、联系信息。

<footer>
    <p>版权信息 © 2024</p>
</footer>
标签说明
<footer>文档或区块的底部信息

<div> 通用容器

概述： 块级无语义容器，用来对元素分组，便于布局和样式控制。

<div class="box">
    <p>这里是一个容器</p>
</div>
标签说明
<div>通用块级容器，可用 class/id 标识，以便设置 CSS
class类名（可多个）
id唯一标识
评论