当前位置：首页 > news >正文

[Web网页] 零基础入门 HTML

news 2025/10/3 5:26:09

一、HTML 入门：先写一个 HelloWorld

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

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

1️⃣标记的组成

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

三、HTML 文档的基本结构

1️⃣头部标签

2️⃣主体标签

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

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

（1）标题标签

（2）段落与换行标签

（3）水平标尺标签

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

（1）超级链接标签

（2）图像标签

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

（1）无序列表

（2）有序列表

（3）自定义列表

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

（1）基本表格结构

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

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

（1）表单容器

（2）常用表单控件

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

6️⃣布局标签：

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

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

一、HTML 入门：先写一个 HelloWorld

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

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

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

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

html

预览

<!DOCTYPE html>
<html>
<head><title>HTML版HelloWorld</title>
</head>
<body>HTML版HelloWorld！
</body>
</html>

保存文件：点击 “文件 - 另存为”，文件名需以.html或.htm结尾（例如Hello.html），保存类型选择 “所有文件”，避免保存为.txt格式。
运行文件：找到保存的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>是错误的，浏览器无法识别）。
- 代码中的空格和回车不影响显示，如需在网页中插入空格，需用 ；如需换行，用<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 学习路径建议

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