一.前端web开发:零基础吃透 HTML5 核心知识

系列文章目录

提示：这里是系列文章的专栏

并不喜欢吃鱼的C++专栏

提示：以下是文章目录哦!

文章目录

系列文章目录

文章目录

前言

[一、HTML 基础认知：搞懂所有英文术语全称](#一、HTML 基础认知：搞懂所有英文术语全称)

[1. HTML 完整定义](#1. HTML 完整定义)

[2. 网页文件规范](#2. 网页文件规范)

[新增补充：HTML 注释（看懂 AI 代码必备）](#新增补充：HTML 注释（看懂 AI 代码必备）)

[3. 你的第一个 HTML 网页（两步完成）](#3. 你的第一个 HTML 网页（两步完成）)

[步骤 1：编写代码保存](#步骤 1：编写代码保存)

[步骤 2：浏览器打开](#步骤 2：浏览器打开)

二、前端开发工具选择与使用

[1. 浏览器推荐：Chrome 谷歌浏览器](#1. 浏览器推荐：Chrome 谷歌浏览器)

[2. 代码编辑器：VSCode（Visual Studio Code）](#2. 代码编辑器：VSCode（Visual Studio Code）)

基础插件安装

[VSCode 高频快捷键（附功能）](#VSCode 高频快捷键（附功能）)

[三、HTML5 标准基础骨架（必备 5 大核心标签）](#三、HTML5 标准基础骨架（必备 5 大核心标签）)

各标签详解

[新增补充：HTML 结构与 CSS 样式边界认知（调 UI 核心知识点）](#新增补充：HTML 结构与 CSS 样式边界认知（调 UI 核心知识点）)

四、页面基础内容标签（文字、排版、图片）

[1. 标题标签 h1~h6](#1. 标题标签 h1~h6)

[2. 段落、换行、水平线](#2. 段落、换行、水平线)

[3. 文本格式化标签（修饰文字样式）](#3. 文本格式化标签（修饰文字样式）)

[4. 图片标签：image，图片单标签](#4. 图片标签：image，图片单标签)

[三种图片路径写法（修改 AI 图片必看,学过Linux基础应该上手很快）](#三种图片路径写法（修改 AI 图片必看,学过Linux基础应该上手很快）)

五、超链接、列表、表格标签

[1. 超链接](#1. 超链接)：anchor，锚点链接

[2. 列表标签](#2. 列表标签)

[3. 表格标签](#3. 表格标签)

[六、Form 表单：实现网页交互](#六、Form 表单：实现网页交互)

[1. 表单基础概念](#1. 表单基础概念)

[2. 常用输入框 input（input 输入控件）](#2. 常用输入框 input（input 输入控件）)

[七、元素分类：块级、行内、行内块（调整 UI 布局核心）](#七、元素分类：块级、行内、行内块（调整 UI 布局核心）)

[1. 术语全称](#1. 术语全称)

[八、HTML5 语义化新增布局标签](#八、HTML5 语义化新增布局标签)

[1. 背景](#1. 背景)

[2. 全部语义化标签作用（看懂 AI 页面分区必备）](#2. 全部语义化标签作用（看懂 AI 页面分区必备）)

语义化布局完整代码示例

前言

提示：这里可以添加本文要记录的大概内容：

很多刚入门前端的同学，第一次接触网页开发都会一头雾水：HTML 到底是什么？网页是怎么写出来的？各种标签、缩写术语都是什么意思？

本文从零梳理 HTML 全部核心知识点，所有英文缩写术语附带完整英文全称，搭配可直接运行的代码案例，避开晦涩专业话术，零基础也能看懂。读完你将掌握：第一个网页搭建、开发工具使用、全套基础标签、表单、布局、语义化新标签等前端必备 HTML 能力，为后续 CSS、JavaScript 学习打好底层基础。

提示：以下是本篇文章正文内容

一、HTML 基础认知：搞懂所有英文术语全称

1. HTML 完整定义

HTML ：HyperText Markup Language，超文本标记语言
- 超文本：不只是纯文字，包含图片、链接、视频、表格等多媒体内容
- 标记语言：由成对 / 单个标签组成，不是编程语言，没有逻辑运算，仅用来描述页面结构
HTML5：HyperText Markup Language 5，HTML 第五代标准，2014 年 W3C（World Wide Web Consortium，万维网联盟）发布正式标准
DOCTYPE：Document Type，文档类型声明，放在网页最顶部，告诉浏览器当前文档使用 HTML5 标准，避免浏览器怪异渲染模式
SEO：Search Engine Optimization，搜索引擎优化，规范的标签写法能提升网站在搜索引擎的排名

2. 网页文件规范

网页文件后缀：.html，必须英文符号命名，不能用中文后缀
标签符号 <> 必须在英文输入法下输入，中文尖括号《》浏览器无法识别
标签分两类：
- 双标签：开始标签 + 闭合标签，格式 <标签名></标签名>，例 <html></html>
- 单标签：自闭合，无结束标签，例 <img>、<br>、<hr>

新增补充：HTML 注释（看懂 AI 代码必备）

Comment：注释，仅用于代码备注，浏览器不会渲染注释内容，AI 生成代码会大量用注释分割页面模块，快速定位 UI 区块写法：

html 复制代码

<!-- 单行注释：导航模块开始 -->
<nav></nav>
<!-- 导航模块结束 -->

<!--
多行注释
可批量标注代码区域
-->

使用规则：注释不能嵌套、不能写在标签尖括号<>内部

3. 你的第一个 HTML 网页（两步完成）

步骤 1：编写代码保存

新建记事本，写入基础代码，保存路径自定义（例 E:/CDSlice/Welcome.html）

html 复制代码

<!DOCTYPE html>
<html>
<head>
    <!-- title：浏览器标题栏文字，head内必备标签 -->
    <title>我的第一个网页</title>
</head>
<body>
    Hello,我的第一个网页
</body>
</html>

步骤 2：浏览器打开

右键文件 → 打开方式 → 选择谷歌浏览器运行，页面即可展示文字

二、前端开发工具选择与使用

1. 浏览器推荐：Chrome 谷歌浏览器

优势：启动速度快、内置完善开发者工具（DevTools），调试页面样式、代码、接口必备。开发者工具快捷键：F12，可查看页面全部 HTML 结构、样式、网络请求

2. 代码编辑器：VSCode（Visual Studio Code）

基础插件安装

1.中文语言包：左侧扩展面板（Extensions）搜索 Chinese 安装，切换中文界面

点击左测边栏的这个标签即可

2.Open In Browser：右键一键在浏览器打开 html 文件

VSCode 高频快捷键（附功能）

Ctrl+H	批量替换文字

三、HTML5 标准基础骨架（必备 5 大核心标签）

完整标准 HTML5 骨架代码，每个标签作用拆解：

html 复制代码

<!-- DOCTYPE 文档类型声明，必须放在最顶部 -->
<!DOCTYPE html>
<!-- html：整个网页根标签，包裹页面全部内容 -->
<html lang="zh-CN">
<!-- head：网页头部，存放页面配置信息，内容不直接展示在页面 -->
<head>
    <!-- meta：元数据标签，charset=Character Set字符编码，UTF-8统一万国编码，解决中文乱码 -->
    <meta charset="UTF-8">
    <!-- 新增补充：移动端视口meta（AI工具、网页界面必备，手机端UI适配） -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- viewport：视口，控制移动端页面缩放；不加该标签手机页面会整体缩小，UI排版错乱 -->
    <!-- title：页面标题，显示在浏览器顶部标签栏，SEO优化必备 -->
    <title>网页标题</title>
</head>
<!-- body：网页主体，所有用户可见内容都写在这里 -->
<body>
    页面展示内容
</body>
</html>

各标签详解

<html>：根标签，限定整个 HTML 文档范围，lang="zh-CN" 代表页面语言为中文
<head>：头部容器，存放配置、标题、编码，不会渲染到页面
<meta charset="UTF-8">：设置字符编码，不写会出现中文乱码
<title>：浏览器标签标题，搜索引擎抓取标题用于展示搜索结果
<body>：页面可视区域，文字、图片、按钮、表格全部写在此标签内

新增补充：HTML 结构与 CSS 样式边界认知（调 UI 核心知识点）

HTML：只负责页面骨架结构 ，定义页面存在哪些元素（文字、图片、按钮、卡片、输入框），无法控制元素位置、大小、颜色、间距；
CSS：负责页面样式 UI ，控制元素上下左右位置、宽高、颜色、横向 / 纵向排列；实操作用：AI 生成代码中，元素排版错乱、尺寸不合适，不用修改 HTML 标签，只需修改代码内<style>标签或元素style属性里的 CSS 参数。

四、页面基础内容标签（文字、排版、图片）

1. 标题标签 h1~h6

定义：Heading，标题标签，6 个等级，<h1>一级标题（最大、权重最高），<h6>六级标题（最小）
规范：一个页面仅 1 个 h1，用于页面主标题，h2/h3 依次做次级标题，利于 SEO
属性 align：控制标题对齐，取值 left（左对齐，默认）、center（居中）、right（右对齐）
代码示例：

html 复制代码

<h1 align="center">一级主标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

快捷生成：VSCode 输入 h$*6 回车，一次性生成 h1-h6 全部标签

2. 段落、换行、水平线

<p>：Paragraph，段落标签，自动上下留白，包裹一段完整文字
<br>：Break，换行单标签，仅文字换行，无空白间距
<hr>：Horizontal Rule，水平线单标签，分割页面区块
- 配套属性：color线条颜色、width线条宽度、size线条粗细、align对齐方式

html 复制代码

<p>第一段文字，段落自带上下间距</p>
文字第一行<br>文字第二行
<hr color="red" width="80%" size="3">
<p>分割后的第二段文字</p>

运行结果:

3. 文本格式化标签（修饰文字样式）

<del>	delete	删除线文字

html 复制代码

<b>普通粗体</b>
<strong>强调粗体（推荐）</strong>
<i>普通斜体</i>
<em>着重斜体</em>
<del>带删除线的文字</del>

运行结果:

4. 图片标签 `<img>`：image，图片单标签

核心属性全解析：

src：source，图片资源地址（必填）
alt：alternative，图片替代文本，图片加载失败时显示文字，无障碍 / SEO 必备
title：鼠标悬浮图片时弹出提示文字
width/height：设置图片宽高（只写一个值会自动等比例缩放）

三种图片路径写法（修改 AI 图片必看,学过Linux基础应该上手很快）

绝对路径：电脑完整盘符地址，仅本地可用，上线服务器失效

html 复制代码

<img src="E:/CDSlice/1.jpg" alt="风景图">

2.相对路径：文件之间相对位置，项目通用（修改 AI 失效图片首选）

同级图片：./1.jpg（./ 可省略，直接写1.jpg）
子文件夹图片：images/1.jpg
上级文件夹图片：../1.jpg

html 复制代码

<img src="../images/1.jpg" alt="风景图" title="海边风景" width="500">

3.网络路径：线上图片 URL 地址，联网即可加载

html 复制代码

<img src="shturl.cc/H5tJ1odVyqt" alt="网络图片">

五、超链接、列表、表格标签

1. 超链接 `<a>`：anchor，锚点链接

作用：页面跳转，文字 / 图片均可包裹成链接

href：hypertext reference，跳转目标地址（必填）
效果：未访问蓝色带下划线、已访问紫色、点击红色，后期 CSS 可修改样式

html 复制代码

<!-- 文字跳转链接 -->
<a href="https://www.baidu.com">跳转到百度</a>
<!-- 图片跳转链接 -->
<a href="https://www.baidu.com">
    <img src="1.jpg" alt="图片链接">
</a>

html 复制代码

<!-- 文字跳转链接 -->
<a href="https://www.baidu.com">跳转到百度</a>
<!-- 图片跳转链接 -->
<a href="https://www.baidu.com">
    <img src="1.jpg" alt="图片链接">
</a>

2. 列表标签

（1）有序列表 `<ol>`：ordered list 有序列表，搭配 `<li>` list item 列表项

type 属性：修改序号样式

1：数字 1,2,3（默认）；a小写字母；A大写字母；i小写罗马数字；I大写罗马数字

html 复制代码

<ol type="A">
    <li>第一项</li>
    <li>第二项</li>
</ol>

运行结果:

（2）无序列表 `<ul>`：unordered list 无序列表，搭配 `<li>`

type 属性：修改前面圆点样式

disc实心圆（默认）；circle空心圆；square小方块；none不显示符号多用于网站导航、商品列表

html 复制代码

<ul type="none">
    <li>手机</li>
    <li>电脑</li>
    <li>平板</li>
</ul>

运行结果:

快捷生成：ul>li*3 快速生成 3 个列表项

3. 表格标签

基础结构：
- <table>：表格容器
- <tr>：table row，表格行
- <td>：table data，单元格（列）新增补充：AI 生成数据表格常用标准表头标签
- <thead>：table head，表格表头区域
- <tbody>：table body，表格数据主体
- <th>：table header，表头单元格，文字默认加粗居中
基础属性：border边框、width表格宽度、height表格高度
单元格合并：
- colspan：column span，水平合并（横向合并多列）
- rowspan：row span，垂直合并（纵向合并多行）完整标准表格代码（看懂 AI 数据分析表格）：

html 复制代码

<table border="1" width="400">
    <thead>
        <tr>
            <th>序号</th>
            <th>AI工具名称</th>
            <th>功能</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>AI绘图工具</td>
            <td rowspan="2">生成图片、调整UI</td>
        </tr>
        <tr>
            <td>2</td>
            <td>AI代码工具</td>
        </tr>
    </tbody>
</table>

运行结果:

六、Form 表单：实现网页交互

1. 表单基础概念

Form：表单容器，收集用户输入信息（登录、注册、搜索框、AI 提示词输入框）
表单三要素：表单标签<form>、表单域<input>、表单提交按钮
<form>核心属性：
1. action：提交数据的服务器接口地址
2. method：数据提交方式，2 种：
  - GET：数据拼接在 URL 地址中，适合少量数据，不安全
  - POST：数据隐藏传输，适合密码、大量数据，更安全

2. 常用输入框 input（input 输入控件）

通过type属性切换输入类型，新增 AI 工具高频表单控件：

html 复制代码

<form action="xxx服务器地址" method="post">
    <!-- 普通文本输入框 type=text：AI提示词单行输入 -->
    <label for="prompt">AI提示词：</label>
    <input type="text" id="prompt" name="prompt"><br>
    <!-- 密码框 type=password，输入内容隐藏为圆点/星号 -->
    <label for="pwd">登录密码：</label>
    <input type="password" id="pwd" name="pwd"><br>
    <!-- 多行文本域 textarea：AI长文本提示词输入框 -->
    <label>详细需求：</label><br>
    <textarea name="desc" rows="4" cols="40"></textarea><br>
    <!-- 单选框 radio：AI模型选择 -->
    AI模型：
    <input type="radio" name="model" id="model1" value="v1">
    <label for="model1">标准版</label>
    <input type="radio" name="model" id="model2" value="v2">
    <label for="model2">增强版</label><br>
    <!-- 复选框 checkbox：AI附加功能勾选 -->
    附加功能：
    <input type="checkbox" name="func" value="img">生成配图
    <input type="checkbox" name="func" value="code">生成代码<br>
    <!-- 下拉选择框 select：风格选择 -->
    页面风格：
    <select name="style">
        <option value="simple">简约风</option>
        <option value="tech">科技风</option>
    </select><br>
    <!-- 提交按钮 type=submit，点击提交表单数据 -->
    <input type="submit" value="生成UI">
    <!-- 重置按钮 type=reset，一键清空输入内容 -->
    <input type="reset" value="清空内容">
</form>

运行结果:

补充实操要点：

<label>标签：绑定输入框，点击文字自动选中输入框，AI 界面高频使用；
同组单选框name属性必须一致，否则可以多选；
所有输入框必须加name属性，否则提交无数据（AI 生成表单常见 bug）。

七、元素分类：块级、行内、行内块（调整 UI 布局核心）

1. 术语全称

块级元素：Block Element
行内（内联）元素：Inline Element
行内块元素：Inline-Block Element

三类元素核心区别（仅保留调 UI 实用结论）

行内块	横向并排显示；支持设置宽高；图片、按钮、输入框全是这类	mg、input、button

八、HTML5 语义化新增布局标签

1. 背景

早期页面只用<div>盒子布局，结构混乱、不利于爬虫抓取；HTML5 新增语义标签，每个标签自带页面含义，利于快速识别 AI 代码的页面分区。

div：division，通用无意义容器，非 HTML5 新增标签

2. 全部语义化标签作用（看懂 AI 页面分区必备）

<header>：页面头部（导航栏、顶部 banner）
<nav>：navigation，导航区域（AI 工具顶部菜单栏）
<article>：独立完整内容块（AI 对话卡片、生成结果卡片）
<section>：区块、章节，划分页面内容区域
<aside>：侧边栏（AI 参数设置侧边面板）
<footer>：页面底部（版权、操作按钮区域）

语义化布局完整代码示例

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI工具页面</title>
</head>
<body>
    <!-- 页面头部 -->
    <header>AI绘图工具LOGO</header>
    <!-- 导航栏 -->
    <nav>首页｜绘图｜代码生成｜历史记录</nav>
    <!-- 主体内容区域 -->
    <section>
        <!-- AI生成结果卡片 -->
        <article>
            <h2>生成的UI界面</h2>
            <img src="ai-img.png" alt="AI生成页面">
        </article>
        <!-- 侧边参数面板 -->
        <aside>风格、尺寸、模型参数设置</aside>
    </section>
    <!-- 页面底部 -->
    <footer>AI工具版权 2026</footer>
</body>
</html>

运行结果:

一.前端web开发:零基础吃透 HTML5 核心知识

系列文章目录

文章目录

前言

一、HTML 基础认知：搞懂所有英文术语全称

1. HTML 完整定义

2. 网页文件规范

新增补充：HTML 注释（看懂 AI 代码必备）

3. 你的第一个 HTML 网页（两步完成）

步骤 1：编写代码保存

步骤 2：浏览器打开

二、前端开发工具选择与使用

1. 浏览器推荐：Chrome 谷歌浏览器

2. 代码编辑器：VSCode（Visual Studio Code）

基础插件安装

VSCode 高频快捷键（附功能）

三、HTML5 标准基础骨架（必备 5 大核心标签）

各标签详解

新增补充：HTML 结构与 CSS 样式边界认知（调 UI 核心知识点）

四、页面基础内容标签（文字、排版、图片）

1. 标题标签 h1~h6

2. 段落、换行、水平线

3. 文本格式化标签（修饰文字样式）

4. 图片标签 <img>：image，图片单标签

三种图片路径写法（修改 AI 图片必看,学过Linux基础应该上手很快）

五、超链接、列表、表格标签

1. 超链接 <a>：anchor，锚点链接

2. 列表标签

（1）有序列表 <ol>：ordered list 有序列表，搭配 <li> list item 列表项

（2）无序列表 <ul>：unordered list 无序列表，搭配 <li>

3. 表格标签

六、Form 表单：实现网页交互

1. 表单基础概念

2. 常用输入框 input（input 输入控件）

七、元素分类：块级、行内、行内块（调整 UI 布局核心）

1. 术语全称

八、HTML5 语义化新增布局标签

1. 背景

2. 全部语义化标签作用（看懂 AI 页面分区必备）

语义化布局完整代码示例

4. 图片标签 `<img>`：image，图片单标签

1. 超链接 `<a>`：anchor，锚点链接

（1）有序列表 `<ol>`：ordered list 有序列表，搭配 `<li>` list item 列表项

（2）无序列表 `<ul>`：unordered list 无序列表，搭配 `<li>`