[Web网页] 零基础入门 HTML

kura_tsuki2025-10-03 12:21

目录

[一、HTML 入门：先写一个 HelloWorld](#一、HTML 入门：先写一个 HelloWorld)

1️⃣开发步骤（超简单！）

[二、理解 HTML 的核心：什么是 "标记"？](#二、理解 HTML 的核心：什么是 “标记”？)

1️⃣标记的组成

[2️⃣标记的 "附加信息"：属性](#2️⃣标记的 “附加信息”：属性)

[三、HTML 文档的基本结构](#三、HTML 文档的基本结构)

1️⃣头部标签

2️⃣主体标签

四、中的核心标签：从文字到多媒体

1️⃣文字排版标签：让文字更有层次

（1）标题标签

（2）段落与换行标签

（3）水平标尺标签

[2️⃣链接与图像：让网页 "动" 起来](#2️⃣链接与图像：让网页 “动” 起来)

（1）超级链接标签

（2）图像标签

3️⃣列表标签：让内容更有条理

（1）无序列表

（2）有序列表

（3）自定义列表

4️⃣表格标签：展示结构化数据

（1）基本表格结构

（2）复杂表格：单元格合并

5️⃣表单标签：实现用户交互

（1）表单容器

（2）常用表单控件

（3）完整表单示例（登录表单）

6️⃣布局标签：

[五、总结：HTML 学习路径建议](#五、总结：HTML 学习路径建议)

对于想要踏入前端开发领域的初学者来说，HTML 是必须掌握的第一门核心技术。它是构建网页的 "骨架"，决定了网页的基本结构和内容呈现方式。本文将从最基础的 HTML 入门知识讲起，逐步深入核心标签的用法，帮助你快速搭建 HTML 知识框架，轻松开启前端学习之旅。

一、HTML 入门：先写一个 HelloWorld

学习任何编程语言，"HelloWorld" 都是经典的起点，HTML 也不例外。通过编写第一个 HTML 文件，你能直观感受 HTML 的基本格式和运行方式。

1️⃣开发步骤（超简单！）

  1. 创建文件：打开电脑自带的 "记事本"（Windows）或 "文本编辑"（Mac），新建一个空白文本文件。

  2. 编写代码：复制粘贴以下代码到文件中（建议手动敲一遍，加深记忆）：

    html

    预览

    复制代码 
    <!DOCTYPE html>
<html>
<head>
    <title>HTML版HelloWorld</title>
</head>
<body>
    HTML版HelloWorld！
</body>
</html>

  3. 保存文件：点击 "文件 - 另存为"，文件名需以.html或.htm结尾（例如Hello.html），保存类型选择 "所有文件"，避免保存为.txt格式。

  4. 运行文件：找到保存的Hello.html文件，双击它 ------ 默认会用浏览器（Chrome、Edge 等）打开，你会看到浏览器窗口中显示 "HTML 版 HelloWorld！"，标题栏显示 "HTML 版 HelloWorld"。

二、理解 HTML 的核心：什么是 "标记"？

HTML 全称为 "超文本标记语言"（HyperText Markup Language），核心就是 "标记"（也叫 "标签"）。它不是编程语言，而是一套用于定义网页结构和内容的规范，浏览器通过解析这些标签，就能知道如何显示网页内容。

1️⃣标记的组成

HTML 标签有固定的格式，主要特点如下：

  • 尖括号包裹：所有标签都用<和>包围，例如<html>、<body>。
  • 成对出现（大部分）：标签通常分为 "开始标签" 和 "结束标签"，结束标签比开始标签多一个/。例：<body>（开始标签）和</body>（结束标签），两者之间的内容是网页的主体内容。
  • 自闭合标签（少数）：有些标签功能简单，不需要包裹内容，直接写成<标签名 />的形式（也可省略/，但建议规范书写）。例：换行标签<br />、图像标签<img />。

2️⃣标记的 "附加信息"：属性

标签可以通过 "属性" 添加额外设置，实现个性化效果。属性的规则如下：

  • 格式：属性名="属性值"，多个属性之间用空格分隔，写在开始标签内部。例：<img src="pic.jpg" alt="风景图" width="300" />，其中src、alt、width都是属性。
  • 注意事项：
    • 标签不区分大小写（例如<HTML>和<html>都有效），但推荐小写（符合行业规范）。
    • 标签名和属性名中不能有空格（例如< title>是错误的，浏览器无法识别）。
    • 代码中的空格和回车不影响显示，如需在网页中插入空格，需用&nbsp;；如需换行，用<br />。
    • 属性值建议用双引号包裹（单引号也可，甚至省略引号，但双引号更规范）。

三、HTML 文档的基本结构

所有 HTML 文件都遵循固定的结构，就像房子有 "地基 - 墙体 - 屋顶" 一样，HTML 文档的结构也有明确的层级：

html

复制代码 
<!DOCTYPE html>  <!-- 1. 声明文档类型：告诉浏览器这是HTML5文档 -->
<html>           <!-- 2. 根标签：整个HTML文档的容器，所有内容都在其中 -->
    <head>       <!-- 3. 头部：存放文档的"元信息"，不直接显示在网页中 -->
        <title>网页标题</title>  <!-- 3.1 标题：显示在浏览器窗口的标题栏 -->
        <!-- 还可包含样式、脚本、元数据等，下文详细讲 -->
    </head>
    <body>       <!-- 4. 主体：网页的可见内容，如文字、图片、链接等都在这里 -->
        这是网页的正文内容！
    </body>
</html>

下面我们分别拆解<head>和<body>的核心内容：

1️⃣头部标签<head>：网页的 "幕后配置"

<head>中的内容不显示在网页主体，但对浏览器解析网页、搜索引擎抓取信息至关重要，常见子标签如下：

子标签 功能说明
<title> 定义网页标题（显示在浏览器标题栏 / 标签页），是 SEO（搜索引擎优化）的重要因素。
<meta> 提供 "元数据"（数据的描述信息），如编码格式、关键词、作者等。
<style> 内嵌 CSS 样式，用于美化网页（后续学习 CSS 时会用到）。
<script> 内嵌 JavaScript 代码，实现网页交互（后续学习 JS 时会用到）。

其中，<meta>标签的用法非常灵活，举几个常用例子：

  • 设置网页编码（避免中文乱码）：<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  • 定义搜索引擎关键词（帮助网页被搜索到）：<meta name="keywords" content="HTML入门,前端学习,零基础HTML" />
  • 自动刷新并跳转页面（5 秒后跳转到百度）：<meta http-equiv="refresh" content="5; URL=http://www.baidu.com" />

2️⃣主体标签<body>：网页的 "可见内容区"

<body>是网页内容的 "舞台"，所有用户能看到的元素都在这里。它本身也有一些属性（但现在更推荐用 CSS 控制，了解即可）：

  • bgcolor：设置网页背景色，例：<body bgcolor="#CCFFCC">（#CCFFCC是浅青色的十六进制代码）。
  • background：设置背景图片，例：<body background="images/bg.jpg">（图片路径需正确）。
  • text：设置正文文字颜色，例：<body text="#FF6666">（#FF6666是浅红色）。

接下来，我们详细讲解<body>中最常用的核心标签。

四、<body>中的核心标签：从文字到多媒体

<body>中的标签按功能可分为 "文字排版""链接与图像""列表""表格""表单""布局" 等类别，我们逐一拆解：

1️⃣文字排版标签：让文字更有层次

（1）标题标签<h1>~<h6>

用于定义不同级别的标题，<h1>最大（一级标题，通常用于页面主标题），<h6>最小（六级标题，用于次要内容标题）。特点：标题自带 "加粗" 和 "换行" 效果，同级标题之间有默认间距。

html

预览

复制代码 
<h1>一级标题（页面主标题）</h1>
<h2>二级标题（章节标题）</h2>
<h3>三级标题（小节标题）</h3>
<!-- 以此类推到<h6> -->
<h6>六级标题（最小标题）</h6>
（2）段落与换行标签

  • 段落标签<p>：定义一个段落，段落之间会自动添加空白间距（区分不同段落）。例：

    html

    预览

    复制代码 
    <p>这是第一个段落，段落之间会有默认空白。</p>
<p>这是第二个段落，即使代码中换行，浏览器也会把它当成一个段落显示。</p>

  • 换行标签<br />：强制换行（无空白间距），常用于段落内部的换行。例：

    html

    复制代码 
    <p>这是第一行文字<br />这是第二行文字（用<br />实现换行，没有段落间距）</p>

  • 预格式化标签<pre>：保留代码中的空格和换行，按 "输入时的格式" 显示文字（常用于展示代码或需要固定格式的文本）。例：

    html

    复制代码 
    <pre>
床前明月光，
  疑是地上霜。
举头望明月，
  低头思故乡。
</pre>

    （浏览器会原样显示缩进和换行，无需额外加<br />）

（3）水平标尺标签<hr />

在页面中插入一条水平线，用于分隔不同内容区块，可通过属性设置样式：

  • size：线的高度（像素值），例：<hr size="3" />。
  • width：线的宽度（像素值或百分比），例：<hr width="50%" />（占页面宽度的 50%）。
  • align：对齐方式（left左对齐、center居中、right右对齐），例：<hr align="left" />。
  • color：线的颜色（十六进制或颜色名），例：<hr color="red" />。

完整示例：<hr size="3" width="75%" align="center" color="red" />

2️⃣链接与图像：让网页 "动" 起来

（1）超级链接标签<a>

定义 "点击跳转" 的链接，核心属性是href（指定跳转目标）和target（指定打开方式）。

  • 基本用法：跳转到外部网页例：<a href="http://www.baidu.com" target="_blank">在新窗口打开百度</a>

    • href="http://www.baidu.com"：跳转目标是百度的网址（绝对路径）。
    • target="_blank"：在新浏览器窗口打开链接（默认_self，在当前窗口打开）。

  • 跳转到本地文件如果链接目标是同一文件夹下的文件，用 "相对路径" 即可：

    • 同一文件夹：<a href="about.html">跳转到同一文件夹的about.html</a>。
    • 子文件夹：<a href="pages/about.html">跳转到pages文件夹下的about.html</a>。
    • 上级文件夹：<a href="../about.html">跳转到上级文件夹的about.html</a>（../表示 "返回上一级"）。

  • 页内跳转（锚点）用于 "长页面" 内的快速定位，步骤如下：

    1. 给目标位置的标签添加id属性（唯一标识，不能重复）：<div id="part1">第一部分内容...</div>
    2. 用<a href="#id值">创建跳转链接：<a href="#part1">跳转到第一部分</a>
（2）图像标签<img />

在网页中插入图片，必须包含两个属性：src（图片路径）和alt（图片加载失败时显示的文字，用于无障碍访问）。

  • 基本用法：

    html

    预览

    复制代码 
    <img src="images/photo.jpg" alt="风景照片" width="300" height="200" />
    • src：图片的路径（相对路径或绝对路径，和<a>标签的路径规则一致）。
    • alt：图片加载失败时显示的文字（例如图片路径错误时，会显示 "风景照片"）。
    • width/height：图片的宽度 / 高度（值可以是像素px或百分比%，只设置一个会自动等比例缩放）。

  • 图片加链接：将<img />嵌套在<a>标签中，点击图片即可跳转：

    html

    预览

    复制代码 
    <a href="http://www.baidu.com" target="_blank">
    <img src="images/baidu-logo.jpg" alt="百度logo" />
</a>

3️⃣列表标签：让内容更有条理

HTML 支持三种列表：无序列表（用符号标记）、有序列表（用数字标记）、自定义列表（用于 "术语 - 解释" 场景）。

（1）无序列表<ul>+<li>
  • <ul>：定义无序列表的 "容器"。
  • <li>：定义列表中的 "每一项"（必须嵌套在<ul>中）。
  • 默认样式：每一项前有一个小黑点（可通过 CSS 修改为圆圈、方块等）。

例：

html

复制代码 
<ul>
    <li>苹果</li>
    <li>香蕉</li>
    <li>橙子</li>
</ul>

显示效果：

  • 苹果
  • 香蕉
  • 橙子
（2）有序列表<ol>+<li>
  • <ol>：定义有序列表的 "容器"。
  • <li>：定义列表中的 "每一项"（必须嵌套在<ol>中）。
  • 默认样式：每一项前有数字（从 1 开始，可通过start属性修改起始数字）。

例：

html

复制代码 
<ol start="3">  <!-- 从3开始计数 -->
    <li>第一步：打开浏览器</li>
    <li>第二步：输入网址</li>
    <li>第三步：按下回车</li>
</ol>

显示效果：3. 第一步：打开浏览器4. 第二步：输入网址5. 第三步：按下回车

（3）自定义列表<dl>+<dt>+<dd>

用于 "术语 - 解释" 的场景（例如字典、商品参数说明）：

  • <dl>：定义自定义列表的 "容器"。
  • <dt>：定义 "术语"（需要解释的内容）。
  • <dd>：定义 "解释"（对术语的说明，默认会缩进）。

例：

html

复制代码 
<dl>
    <dt>HTML</dt>
    <dd>超文本标记语言，用于构建网页结构。</dd>
    <dt>CSS</dt>
    <dd>层叠样式表，用于美化网页。</dd>
    <dt>JavaScript</dt>
    <dd>脚本语言，用于实现网页交互。</dd>
</dl>

显示效果：HTML　　超文本标记语言，用于构建网页结构。CSS　　层叠样式表，用于美化网页。JavaScript　　脚本语言，用于实现网页交互。

4️⃣表格标签：展示结构化数据

表格用于展示 "行 - 列" 形式的结构化数据（例如成绩表、商品价格表），核心标签有<table>（容器）、<tr>（行）、<td>（单元格）、<th>（表头单元格）。

（1）基本表格结构

html

预览

复制代码 
<table border="1">  <!-- border="1"：显示表格边框（默认无边框） -->
    <caption>学生成绩表</caption>  <!-- 表格标题（可选，显示在表格上方） -->
    <!-- 表头行：用<th>，文字默认居中加粗 -->
    <tr>
        <th>姓名</th>
        <th>语文</th>
        <th>数学</th>
    </tr>
    <!-- 数据行：用<td>，文字默认左对齐 -->
    <tr>
        <td>张三</td>
        <td>95</td>
        <td>98</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>88</td>
        <td>92</td>
    </tr>
</table>
（2）复杂表格：单元格合并

当需要合并单元格时，使用colspan（跨列合并）和rowspan（跨行合并）属性：

  • colspan="n"：合并当前单元格右侧的n-1个单元格（横向合并）。
  • rowspan="n"：合并当前单元格下方的n-1个单元格（纵向合并）。

例：合并 "总计" 单元格（跨 2 列）：

html

预览

复制代码 
<table border="1">
    <tr>
        <th>姓名</th>
        <th>语文</th>
        <th>数学</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>95</td>
        <td>98</td>
    </tr>
    <tr>
        <td colspan="2">总计（跨2列）</td>  <!-- 合并"语文"和"数学"列 -->
        <td>193</td>
    </tr>
</table>

5️⃣表单标签：实现用户交互

表单是网页与用户交互的核心（例如登录、注册、搜索），用于收集用户输入的数据并提交给后台。核心标签是<form>（表单容器），内部包含多种 "表单控件"（如输入框、按钮、下拉框等）。

（1）表单容器<form>

必须包含action和method属性：

  • action：指定数据提交的 "后台地址"（例如action="login.php"，后续学习后端时会用到）。
  • method：指定提交方式，常用get（数据显示在 URL 中，适合简单查询）和post（数据隐藏，适合敏感信息如密码）。
（2）常用表单控件

表单控件主要通过<input>标签实现（通过type属性区分不同类型），还有<textarea>（多行输入框）、<select>（下拉框）等。

控件类型 代码示例 功能说明
单行文本框 <input type="text" name="username" placeholder="请输入用户名" /> 输入单行文字（如用户名）
密码框 <input type="password" name="pwd" placeholder="请输入密码" /> 输入密码（文字隐藏为圆点）
单选按钮 <input type="radio" name="sex" value="male" checked /> 男 多选一（name相同为一组）
复选框 <input type="checkbox" name="hobby" value="sports" checked /> 运动 多选多（name相同为一组）
提交按钮 <input type="submit" value="登录" /> 提交表单数据
重置按钮 <input type="reset" value="重置" /> 清空表单输入
多行文本框 <textarea rows="5" cols="30" placeholder="请输入个人简介"></textarea> 输入多行文字（如简介）
下拉框 <select name="city"><option value="sh">上海</option></select> 选择预设选项
（3）完整表单示例（登录表单）

html

复制代码 
<form action="login.php" method="post">
    <p>
        用户名：<input type="text" name="username" placeholder="请输入用户名" required />
        <!-- required：设置为必填项，不填无法提交 -->
    </p>
    <p>
        密码：<input type="password" name="pwd" placeholder="请输入密码" required />
    </p>
    <p>
        性别：<input type="radio" name="sex" value="male" checked /> 男
             <input type="radio" name="sex" value="female" /> 女
    </p>
    <p>
        爱好：<input type="checkbox" name="hobby" value="sports" /> 运动
             <input type="checkbox" name="hobby" value="music" /> 音乐
             <input type="checkbox" name="hobby" value="reading" /> 阅读
    </p>
    <p>
        城市：<select name="city">
                <option value="bj">北京</option>
                <option value="sh" selected>上海</option>  <!-- selected：默认选中 -->
                <option value="gz">广州</option>
             </select>
    </p>
    <p>
        <input type="submit" value="登录" />
        <input type="reset" value="重置" />
    </p>
</form>

6️⃣布局标签：<div>与<span>

用于划分网页区域、组合元素，方便后续用 CSS 美化（是 "CSS 布局" 的基础）。

标签 功能说明 特点
<div> 定义 "块级区域"（独占一行，可包含任何元素，如文字、图片、表格等）。 块级元素，默认宽度 100%，可设置宽高。
<span> 定义 "行内区域"（不独占一行，只包裹部分文字或行内元素）。 行内元素，默认宽度由内容决定，无法直接设置宽高。

例：用<div>划分网页的 "头部 - 主体 - 底部"，用<span>高亮部分文字：

html

复制代码 
<!-- 头部区域 -->
<div style="background: #f5f5f5; padding: 10px;">
    <h1>我的博客</h1>
</div>

<!-- 主体区域 -->
<div style="padding: 20px;">
    <p>这是一篇关于<span style="color: red; font-weight: bold;">HTML基础</span>的文章，适合初学者阅读。</p>
</div>

<!-- 底部区域 -->
<div style="background: #333; color: white; padding: 10px; text-align: center;">
    版权所有 © 2024 我的博客
</div>

五、总结：HTML 学习路径建议

  1. 先掌握 "结构"：熟记 HTML 文档的基本结构（<!DOCTYPE html>-<html>-<head>-<body>），理解标签的 "嵌套关系"。
  2. 重点练习核心标签：优先掌握文字排版（<h1>~<h6>、<p>、<br />）、链接与图像（<a>、<img />）、列表（<ul>/<ol>/<dl>），这些是最常用的标签。
  3. 尝试实战案例：写一个简单的 "个人介绍页"（包含标题、文字、图片、链接、列表），再写一个 "登录表单"，通过实战巩固知识点。
  4. 后续学习方向：HTML 只是 "骨架"，后续需要学习 CSS（美化网页）和 JavaScript（实现交互），三者结合才能开发出完整的网页。

希望本文能帮助你快速入门 HTML，后续可以多尝试修改代码、查看效果，"边做边学" 是掌握前端技术的最佳方式！

相关推荐
HashTang13 分钟前
不用再配服务器了！这套 Next.js + Cloudflare 模板，一个人搞定全栈出海
前端·后端·边缘计算
前端架构师-老李1 小时前
16 Electron 应用自动更新方案：electron-updater 完整指南
前端·javascript·electron
一只学java的小汉堡1 小时前
HTML 01入门：从概念到开发环境搭建与页面头部配置
前端·css·html
用户21496515898751 小时前
从零搭建uniapp环境-记录
前端
努力写代码的熊大3 小时前
stack、queue与priority_queue的用法解析与模拟实现
java·前端·javascript
im_AMBER3 小时前
React 06
前端·javascript·笔记·学习·react.js·前端框架
wyzqhhhh4 小时前
前端常见的设计模式
前端·设计模式
IT_陈寒4 小时前
React 19重磅前瞻：10个性能优化技巧让你少写30%的useEffect代码
前端·人工智能·后端
今天没有盐5 小时前
💕CSS 基础入门指南💕：选择器与文本样式
前端·html·响应式设计
云枫晖5 小时前
Webpack系列-Entry入口
前端·webpack
热门推荐
01BongoCat - 跨平台键盘猫动画工具02GitHub 镜像站点03UV安装并设置国内源04Linux下V2Ray安装配置指南05jdk21下载、安装（Windows、Linux、macOS）06GitLab 零基础入门指南：从安装到项目管理全流程07NVIDIA显卡驱动、CUDA、cuDNN 和 TensorRT 版本匹配指南08KGG转MP3工具|非KGM文件|解密音频09Labelme从安装到标注：零基础完整指南10安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）