目录
[一、HTML 入门:先写一个 HelloWorld](#一、HTML 入门:先写一个 HelloWorld)
[二、理解 HTML 的核心:什么是 "标记"?](#二、理解 HTML 的核心:什么是 “标记”?)
[2️⃣标记的 "附加信息":属性](#2️⃣标记的 “附加信息”:属性)
[三、HTML 文档的基本结构](#三、HTML 文档的基本结构)
[2️⃣链接与图像:让网页 "动" 起来](#2️⃣链接与图像:让网页 “动” 起来)
[五、总结:HTML 学习路径建议](#五、总结: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>
(../
表示 "返回上一级")。
- 同一文件夹:
-
页内跳转(锚点)用于 "长页面" 内的快速定位,步骤如下:
- 给目标位置的标签添加
id
属性(唯一标识,不能重复):<div id="part1">第一部分内容...</div>
- 用
<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(实现交互),三者结合才能开发出完整的网页。
希望本文能帮助你快速入门 HTML,后续可以多尝试修改代码、查看效果,"边做边学" 是掌握前端技术的最佳方式!