hbuilder做一个简单的网页代码-网页设计-锦华智联科技

第一步：准备工作

下载并安装 HBuilder：如果你还没有安装，请访问 HBuilder 官网下载并安装适合你操作系统的版本，社区版是免费的,对于初学者来说完全足够。
（图片来源网络，侵删）
创建项目：
- 打开 HBuilder。
- 在顶部菜单栏选择 文件 -> 新建 -> 项目...。
- 在弹出的窗口中，选择 普通项目，然后点击 下一步。
- 给你的项目起一个名字，my-first-webpage，然后点击 创建。
创建 HTML 文件：
- 在左侧的 项目管理器 中,右键点击你刚刚创建的项目名称。
- 选择 新建 -> HTML文件。
- 给文件命名，index.html，HBuilder 会自动在代码编辑区生成一个基础的 HTML5 模板。

第二步：编写网页代码

我们将在这个 index.html 文件中编写代码，HTML 的基本结构由 <html>、<head> 和 <body> 三部分组成。

<head> 部分包含网页的元信息，比如标题、字符编码、引入的样式等。 <body> 部分包含网页所有可见的内容，比如文字、图片、链接等。

（图片来源网络，侵删）

将以下代码复制并粘贴到你的 index.html 文件中，替换掉 HBuilder 自动生成的内容。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <!-- 声明字符编码，防止中文乱码 -->
    <meta charset="UTF-8">
    <!-- 设置视口，使网页在移动设备上正常显示 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 网页的标题，会显示在浏览器标签页上 -->我的第一个网页</title>
</head>
<body>
    <!-- 这是主标题，使用 h1 标签 -->
    <h1>欢迎来到我的个人空间！</h1>
    <!-- 这是一个段落，使用 p 标签 -->
    <p>你好，世界！这是我使用 HBuilder 创建的第一个简单网页。</p>
    <p>这是一个非常酷的体验，我可以在这里添加文字、图片和链接。</p>
    <!-- 这是一个图片标签 -->
    <!-- src 属性指向图片的路径，请将 "path/to/your/image.jpg" 替换成你自己的图片路径 -->
    <!-- alt 属性是图片的描述，当图片无法显示时会显示这段文字，也有利于SEO -->
    <img src="path/to/your/image.jpg" alt="一张美丽的风景图">
    <!-- 这是一个超链接标签 -->
    <!-- href 属性指向链接的目标地址 -->
    <a href="https://www.dcloud.io/hbuilderx.html" target="_blank">点击这里访问 HBuilder 官网</a>
</body>
</html>

代码解释：

<!DOCTYPE html>：声明这是一个 HTML5 文档。
<html lang="zh-CN">：整个网页的根元素，lang="zh-CN" 表示语言为中文。
<head>：文档的头部,存放不可见的信息。
<meta charset="UTF-8">：非常重要！设置字符编码为 UTF-8,可以正确显示中文等特殊字符。
<title>我的第一个网页</title>：设置浏览器标签页上显示的标题。
<body>：文档的主体,存放所有可见内容。
<h1>，字体最大，还有 <h2>, <h3> 等标题标签。
<p>：段落标签。
<img>：图片标签。
- src (source)：图片的源文件路径。你需要将 "path/to/your/image.jpg" 替换成你电脑上图片的实际路径，或者你可以先放一张图片在你的项目文件夹里，然后直接使用图片名，my-photo.png。
- alt (alternative text)：图片的替代文本。
<a>：超链接标签。
- href (hypertext reference)：链接的目标网址。
- target="_blank"：表示点击链接后会在新标签页中打开,而不是在当前页面跳转。

第三步：预览网页

HBuilder 最大的优点之一就是可以方便地实时预览你的网页。

在 HBuilder 内部预览：
（图片来源网络，侵删）
- 点击代码编辑器右上角的 运行 按钮，然后选择 运行到内置浏览器。
- 或者，你也可以直接按快捷键 Ctrl + Enter (Windows) 或 Cmd + Enter (Mac)。
- 一个新的浏览器窗口或标签页会自动打开,显示你刚刚编写的网页效果。
在系统浏览器中预览：
- 点击 运行 -> 运行到浏览器 -> 选择默认浏览器，这会在你电脑的默认浏览器（如 Chrome, Edge, Firefox）中打开网页。

第四步：进阶与美化（可选）

网页看起来可能有点朴素，我们可以用一点点 CSS（层叠样式表）来美化它。

在 <head> 标签内添加一个 <style> 标签，在里面编写 CSS 代码。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">我的第一个网页</title>
    <style>
        /* 添加一些简单的样式 */
        body {
            font-family: "Microsoft YaHei", "微软雅黑", sans-serif; /* 设置字体 */
            background-color: #f0f8ff; /* 设置背景色 */
            color: #333; /* 设置文字颜色 */
            padding: 20px; /* 设置内边距 */
            text-align: center; /* 文字居中 */
        }
        h1 {
            color: #0066cc; /* 设置标题颜色 */
        }
        p {
            line-height: 1.6; /* 设置行高 */
            font-size: 18px; /* 设置字体大小 */
        }
        a {
            color: #ff6600; /* 设置链接颜色 */
            text-decoration: none; /* 去掉下划线 */
        }
        a:hover {
            text-decoration: underline; /* 鼠标悬停时显示下划线 */
        }
    </style>
</head>
<body>
    <h1>欢迎来到我的个人空间！</h1>
    <p>你好，世界！这是我使用 HBuilder 创建的第一个简单网页。</p>
    <p>这是一个非常酷的体验，我可以在这里添加文字、图片和链接。</p>
    <!-- 请记得替换图片路径！ -->
    <img src="path/to/your/image.jpg" alt="一张美丽的风景图" style="max-width: 100%; border-radius: 8px; margin-top: 20px;">
    <br><br> <!-- 换行 -->
    <a href="https://www.dcloud.io/hbuilderx.html" target="_blank">点击这里访问 HBuilder 官网</a>
</body>
</html>

CSS 样式解释：

<style>：用于编写 CSS 代码的标签。
body { ... }：选择 body 标签,并设置它的样式。
font-family：定义字体。
background-color：定义背景颜色。
color：定义文字颜色。
padding：定义元素内容与边框之间的距离。
text-align: center：让内部元素水平居中。
a:hover { ... }：这是一个“伪类”，当鼠标悬停在 <a> 链接上时,应用其内部的样式。

恭喜你！你已经成功地使用 HBuilder 创建并预览了你的第一个网页。

核心步骤回顾：

创建项目：在 HBuilder 中新建一个普通项目。
创建 HTML 文件：在项目中新建一个 index.html 文件。
编写代码：使用 HTML 标签（如 <h1>, <p>, <img>, <a>）构建网页内容。
实时预览：使用 运行到内置浏览器 功能查看效果。
美化：通过在 <head> 中添加 <style> 标签，用 CSS 美化你的网页。

现在你已经入门了，可以尝试修改文字、更换图片、添加更多内容，探索更多 HTML 和 CSS 的标签和属性,创造出属于你自己的精彩网页！