HTML网页制作源码如何添加文字？-网页设计-锦华智联科技

HTML的“骨架”与“内容”

想象一下建房子：

（图片来源网络，侵删）

HTML (超文本标记语言)：是房子的骨架和结构，它定义了哪里是标题，哪里是段落,哪里是图片。
CSS (层叠样式表)：是房子的装修和风格，它定义了文字的颜色、大小、字体、布局等。
JavaScript：是房子的智能系统，它让房子能互动,比如自动开关灯。

我们目前只关注最核心的HTML骨架，也就是如何用标签来“标记”你的文字。

最基础的单个HTML文件

这是最简单的方式，所有内容（HTML结构和文字）都写在一个文件里，你只需要将下面的代码复制到一个文本编辑器（如记事本、VS Code、Sublime Text等），然后保存为 .html 格式的文件（my-first-page.html）,最后用浏览器打开它就能看到效果。

完整源码示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">我的第一个网页</title>
</head>
<body>
    <!-- 这是网页的主要内容区域 -->
    <h1>欢迎来到我的网站！</h1>
    <p>这是一个段落，你可以在这里写下任何你想分享的文字内容，HTML 使用标签来告诉浏览器这是一段文字。</p>
    <p>这是另一个段落，你可以创建很多段落来组织你的内容。</p>
    <h2>这是一个二级标题</h2>
    <p>二级标题通常用来作为主要内容下的小标题。</p>
    <h3>这是一个三级标题</h3>
    <p>三级标题可以用来进一步细分内容。</p>
</body>
</html>

如何操作：

打开记事本（或任何代码编辑器）。
复制上面的全部代码,粘贴进去。
点击“文件” -> “另存为”。
在“保存类型”中，选择“所有文件(*.*)”。
在“文件名”中，输入 index.html 或 我的网页.html，确保后缀名是 .html。
保存后，找到这个文件，用浏览器（Chrome, Edge, Firefox等）打开它。

代码详解：你添加的文字在哪里？

在上面的代码中,你添加的文字主要位于两个地方：

在 `<title>` 标签中

作用：这里面的文字不会显示在网页正文里，它会显示在浏览器标签页的标题上，这对于SEO（搜索引擎优化）和用户识别页面非常重要。

在 `<body>` 标签中

<body>
    <!-- 你所有的可见内容都写在这里 -->
    <h1>...</h1>
    <p>...</p>
</body>

作用：<body> 是网页的“身体”，所有用户能在浏览器窗口中直接看到的内容，比如文字、图片、视频等,都应该放在这里。

常用的文字标签（放在 `<body>` 内部）

为了告诉你的文字是什么类型，HTML 提供了许多标签,最常用的几个如下：

（图片来源网络，侵删）

标签名称	描述	示例
`<h1>` 到 `<h6>`	标题标签，`<h1>` 是最重要的主标题，`<h2>` 是次级标题，以此类推，一个页面通常只有一个 `<h1>`。	`<h1>主标题</h1>`
`<p>`	段落标签，用于包裹一段文字，浏览器会自动在段落前后添加一些空白。	`<p>这是一个段落。</p>`
`<span>`	器，它没有自己的任何样式或意义，只是用来包裹一小段文字，以便后续用CSS来单独设置这部分文字的样式（如颜色、大小）。	`<p>这是一段包含 <span style="color:red;">红色</span> 文字的段落。</p>`
`<br>`	换行标签，强制文字换到下一行，这是一个单标签，没有闭合标签。	`第一行<br>第二行`
`<hr>`	水平线标签，插入一条水平分割线，也是一个单标签。	`<p>上一部分内容</p><hr><p>下一部分内容</p>`

进阶 - 分离HTML和CSS（推荐）

当你的网页变大时，把所有的样式（比如颜色、字体）都写在HTML里会变得很混乱，专业的做法是将“结构”（HTML）和“样式”（CSS）分离开。

创建三个文件

在你的文件夹中创建以下三个文件：

index.html (网页结构)
style.css (网页样式)
images/ (一个用来放图片的文件夹,可选)

编写 `index.html` 文件

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">分离样式和结构的网页</title>
    <!-- 引入外部的CSS文件 -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>一个漂亮的标题</h1>
    <p>这是一个普通的段落，它的样式由外部的 style.css 文件控制。</p>
    <p>这是另一个段落，我们也可以给特定的文字上色，<span class="highlight">这些文字是黄色的</span>。</p>
</body>
</html>

关键点：<head> 标签中的 <link rel="stylesheet" href="style.css"> 告诉浏览器：“请去读取并应用 style.css 这个文件里的样式规则。”

编写 `style.css` 文件

在同一个文件夹下，创建 style.css 文件,并写入以下内容：

/* 这是CSS注释，浏览器会忽略它 */
/* 设置整个页面的基本样式 */
body {
    font-family: "Microsoft YaHei", "微软雅黑", sans-serif; /* 设置字体 */
    background-color: #f4f4f4; /* 设置背景色 */
    color: #333; /* 设置默认文字颜色 */
    line-height: 1.6; /* 设置行高，让文字更易读 */
    margin: 0; /* 去掉默认的页面边距 */
    padding: 20px;
}
/* 设置 h1 标签的样式 */
h1 {
    color: #0056b3; /* 设置标题颜色为蓝色 */
    border-bottom: 2px solid #0056b3; /* 在标题下方添加一条蓝色下划线 */
    padding-bottom: 10px;
}
/* 给 class 名为 "highlight" 的 span 标签设置样式 */
.highlight {
    color: #ff9800; /* 文字颜色为橙色/黄色 */
    font-weight: bold; /* 文字加粗 */
}

查看效果

用浏览器打开 index.html 文件，你会发现，虽然HTML文件里没有直接写颜色或字体，但文字的样式已经被 style.css 文件成功应用了。

需求	解决方案	示例
添加网页标题	使用 `<title>`	`<title>页面标题</title>`
	使用 `<h1>`	`<h1>主标题</h1>`
添加段落	使用 `<p>`	`<p>这是一段文字。</p>`
强制换行	使用 `<br>`	`第一行<br>第二行`
快速开始	创建一个 `.html` 文件，复制粘贴方法一的完整源码。	-
专业开发	分离HTML和CSS，使用 `<link>` 标签连接。	见方法二

从最简单的方法一开始，逐步尝试,你很快就能掌握在HTML中添加和美化文字的技巧！

HTML网页制作源码如何添加文字？