第一部分：网页的骨架 —— HTML

低代码布道师2025-04-30 8:13

这目录

  • 前言
  • [1. 初识 HTML：搭建地基和框架](#1. 初识 HTML：搭建地基和框架)
    • [1.1 小例子： 创建一个最简单的 HTML 页面，包含 "Hello World"。](#1.1 小例子： 创建一个最简单的 HTML 页面，包含 "Hello World"。)
    • [1.2 练习](#1.2 练习)
  • [2. 常用文本与内容标签：填充墙体和房间](#2. 常用文本与内容标签：填充墙体和房间)
    • [2.1 小例子： 创建一个包含个人简介（使用标题、段落、列表）的页面。](#2.1 小例子： 创建一个包含个人简介（使用标题、段落、列表）的页面。)
    • [2.2 练习](#2.2 练习)
  • [3 链接与图片：连接房间与装饰墙面](#3 链接与图片：连接房间与装饰墙面)
    • [3.1 小例子： 创建一个包含跳转链接和展示图片的页面。](#3.1 小例子： 创建一个包含跳转链接和展示图片的页面。)
    • [3.2 练习](#3.2 练习)
  • [4 表格：结构化数据的展示柜](#4 表格：结构化数据的展示柜)
    • [4.1 小例子： 创建一个简单的课程表或商品价格表。](#4.1 小例子： 创建一个简单的课程表或商品价格表。)
    • [4.2 练习](#4.2 练习)
  • [5 表单：与用户交互的窗口](#5 表单：与用户交互的窗口)
    • [5.1 小例子： 创建一个简单的登录或注册表单。](#5.1 小例子： 创建一个简单的登录或注册表单。)
    • [5.2 练习](#5.2 练习)
  • [6 HTML5 语义化标签：给骨架赋予意义](#6 HTML5 语义化标签：给骨架赋予意义)
    • [6.1 小例子： 使用语义化标签重构之前的个人简介页面。](#6.1 小例子： 使用语义化标签重构之前的个人简介页面。)
    • [6.2 练习](#6.2 练习)
  • [7 内联框架 `<iframe>` 与其他通用容器：特殊情况与万金油](#7 内联框架 <iframe> 与其他通用容器：特殊情况与万金油)
    • [7.1 小例子： 嵌入一个在线地图或视频，并使用 `<div>/<span>`。](#7.1 小例子： 嵌入一个在线地图或视频，并使用 <div>/<span>。)
    • [7.2 练习](#7.2 练习)
  • 结语

前言

欢迎来到 Web 开发的第一站！在我们开始给网页"装修"（CSS）或者让它"动起来"（JavaScript）之前，我们首先需要搭建好它的"骨架"------这就是 HTML 的任务。

想象一下建造一座房子，HTML 就是那些定义了房子结构的钢筋、水泥、梁柱和墙体。它告诉浏览器，"这里应该是一个标题"、"那儿应该是一段文字"、"这块区域放一张图片"。没有 HTML，网页就是一片空白，后续的样式和交互也就无从谈起。

1. 初识 HTML：搭建地基和框架

HTML 不是编程语言，而是标记语言，用标签标记内容。我们创建一个html文件通常会有如下的基本结构：

  • <!DOCTYPE html>: 文档类型声明，告知浏览器使用 HTML5 标准。
  • <html>: 根元素，包裹整个页面。lang 属性定义页面语言（如 lang="zh-CN"）。
  • <head>: 包含页面的元信息（标题 <title>、字符编码 <meta charset="UTF-8">、CSS 链接 <link> 等），这些信息不直接显示在页面主体上。
  • <body>: 包含所有可见的页面内容（文本、图片、链接等）。

1.1 小例子： 创建一个最简单的 HTML 页面，包含 "Hello World"。

打开我们的vscode，创建一个文件夹01-html

创建我们第一个例子，01.html

贴入如下代码：

bash 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>我的第一个页面</title>
</head>
<body>
  <h1>Hello World</h1>
  <p>这是我的第一个网页！</p>
</body>
</html>

在文件上点击鼠标右键，用我们的Live Server打开网页

可以看到如下效果

1.2 练习

创建一个名为 myname.html 的文件，包含一个 <h1> 显示你的名字，一段<p>自我介绍，并修改 <title> 为你的名字。

2. 常用文本与内容标签：填充墙体和房间

有了框架之后，就可以在框架里按照我们的需求进行建筑了，比如我们需要几个房间，有的是用来做卫生间的，有的是用来做客厅的，有的是用来做卧室的。常用的标签有：

  • <h1> 到 <h6> 定义内容的层级结构，<h1> 可以理解为我们文档排版的时候的一级标题。。
  • <p> 用于组织文本段落。
  • <ul> (项目符号列表) 和 <ol> (编号列表) 用于展示列表项 <li>。
  • <em> (语气强调，通常斜体) 和 <strong> (内容重要性，通常粗体)。
  • <br> 强制换行（少用），<hr> 主题分隔线。

2.1 小例子： 创建一个包含个人简介（使用标题、段落、列表）的页面。

创建一个02.html，贴入如下代码

bash 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>关于我</title>
</head>
<body>
  <h1>关于 张三</h1>
  <p>我是一名正在学习 Web 开发的学生。我对用代码创造东西充满热情！</p>
  <hr>
  <h2>我的技能</h2>
  <ul>
    <li>HTML (正在学习)</li>
    <li>CSS (即将学习)</li>
    <li>JavaScript (未来目标)</li>
  </ul>
  <h2>我的爱好</h2>
  <ol>
    <li>阅读</li>
    <li>编码</li>
    <li>看电影</li>
  </ol>
  <p>我认为 <em>坚持不懈</em> 是学习编程的关键，并且掌握 <strong>基础知识</strong> 非常重要。</p>
</body>
</html>

运行后的效果

2.2 练习

结合如下的文章，使用合适的标题、段落、列表和强调标签进行排版。

bash 复制代码 
我的编程学习之旅

在这个数字化时代，编程已经成为一项必不可少的技能。我开始学习编程的故事要从三个月前说起，那时我下定决心要成为一名全栈开发工程师。

为什么选择学习编程？
• 对技术充满热情
• 想要创造有价值的产品
• 提升职业竞争力

我的学习计划

1.掌握 HTML 和 CSS 基础
2.学习 JavaScript 编程
3.深入后端开发技术
4.实践项目开发
_______________________________________________________________________________
虽然学习路上会遇到很多困难，但我相信通过持续学习和勤奋实践，一定能够实现自己的目标！

3 链接与图片：连接房间与装饰墙面

用墙将屋子的各部分功能分隔好之后，我们就可以增加修饰和连接的功能了，可以给房间安装门保持房间的私密性，给客厅安装插画增加美观度。html可以有如下标签达到这种效果：

  • <a> (Anchor) 用于创建链接，href 指定目标地址，target="_blank" 在新窗口打开
  • <img> (Image) 用于插入图片，src 指定图片来源，alt 提供替代文本（必填，为了可访问性和 SEO），width/height 控制尺寸。

3.1 小例子： 创建一个包含跳转链接和展示图片的页面。

显示图片的时候，网页要知道从哪个路径去获取图片，在我们01-html文件夹下创建一个images文件夹，将我们的图片放入

创建03.html，输入如下代码

bash 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>链接与图片示例</title>
</head>
<body>
  <h1>欢迎！</h1>
  <p>访问 <a href="https://www.baidu.com" target="_blank" title="百度" rel="noopener noreferrer">百度</a></p>
  <p>这是一张可爱的猫咪图片：</p>
  <img src="images/cat.png" alt="一只趴在地上的橘猫" width="300">
  </body>
</html>

访问后的效果

3.2 练习

创建一个简单的图文介绍页面（介绍一个爱好或偶像），包含标题、段落、至少一张图片（使用 alt 属性）和至少一个指向外部网站的链接（使用 target="_blank"）。

4 表格：结构化数据的展示柜

客厅装饰好之后，我们通常会放置展示柜，摆放我们各种各样的收藏和爱好，hmtl中通常我们是使用表格标签来表达。

<table> 用于展示结构化数据，而非页面布局。<tr> 定义行，<th> 定义表头单元格（默认粗体居中），<td> 定义数据单元格。<thead>, <tbody>, <tfoot> 用于语义化组织表格。colspan="n" 横跨 n 列，rowspan="n" 纵跨 n 行。

4.1 小例子： 创建一个简单的课程表或商品价格表。

创建04.html，输入如下代码：

bash 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>课程表</title>
    <style>
      table,
      th,
      td {
        border: 1px solid black;
        border-collapse: collapse;
        padding: 5px;
      }
    </style>
  </head>
  <body>
    <h1>课程表</h1>
    <table>
      <thead>
        <tr>
          <th scope="col">时间</th>
          <th scope="col">星期一</th>
          <th scope="col">星期二</th>
          <th scope="col">星期三</th>
          <th scope="col">星期四</th>
          <th scope="col">星期五</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">第一节<br />(8:00-9:00)</th>
          <td>数学</td>
          <td>语文</td>
          <td>英语</td>
          <td>物理</td>
          <td>化学</td>
        </tr>
        <tr>
          <th scope="row">第二节<br />(9:10-10:10)</th>
          <td>语文</td>
          <td>数学</td>
          <td>物理</td>
          <td>英语</td>
          <td>生物</td>
        </tr>
        <tr>
          <td colspan="6">午休 (12:00-14:00)</td>
        </tr>
        <tr>
          <th scope="row">第三节<br />(14:00-15:00)</th>
          <td>英语</td>
          <td rowspan="2">体育</td>
          <td>数学</td>
          <td>语文</td>
          <td>历史</td>
        </tr>
        <tr>
          <th scope="row">第四节<br />(15:10-16:10)</th>
          <td>物理</td>
          <td>化学</td>
          <td>生物</td>
          <td>地理</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

运行后的效果

style标签定义了页面组件的样式，后续章节我们介绍样式的概念

4.2 练习

创建一个包含合并单元格的个人简历表格（如姓名、联系方式、教育经历、工作经验等），尝试使用 rowspan 合并"教育经历"等标题单元格。

5 表单：与用户交互的窗口

房子格局及装饰弄好之后，就需要增加一些交互的功能。比如我们要给大门安上门铃，访客可以按响门铃，主人可以打开听筒和访客进行通话。

html中<form> 用于收集用户输入并提交。action 指定处理数据的后端 URL，method 指定提交方式 (GET/POST)。<input> 通过 type 属性变化多端，name 属性用于后端识别数据。<label> 通过 for 属性关联控件的 id，提升可访问性。

5.1 小例子： 创建一个简单的登录或注册表单。

创建05.html，输入如下代码

bash 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>登录</title>
  </head>
  <body>
    <h1>用户登录</h1>
    <form action="/login" method="post">
      <div>
        <label for="username">用户名:</label>
        <input type="text" id="username" name="username" required />
      </div>
      <div>
        <label for="password">密 码:</label>
        <input type="password" id="password" name="password" required />
      </div>
      <div>
        <button type="submit">登录</button>
      </div>
    </form>
  </body>
</html>

运行后的效果

5.2 练习

创建一个包含多种表单元素的调查问卷（姓名-text, 性别-radio, 爱好-checkbox, 学历-select, 建议-textarea, 提交按钮），并为每个控件添加 <label>。

6 HTML5 语义化标签：给骨架赋予意义

html5增加了更多语义化的标签，代替我们过去全部用div来搭建布局的方式，增强了代码的可读性，也方便搜索引擎理解页面结构。有如下标签：

  • <header>: 页面或区域的头部。
  • <footer>: 页面或区域的底部。
  • <nav>: 导航链接。
  • <main>: 页面主体内容（每页唯一)。
  • <article>: 独立、完整的内容单元（如博客文章）。
  • <section>: 按主题分组的区域，通常有标题。
  • <aside>: 侧边栏内容。

6.1 小例子： 使用语义化标签重构之前的个人简介页面。

创建06.html，输入如下代码：

bash 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>关于我 (语义化)</title>
</head>
<body>
    <header>
        <h1>关于 张三</h1>
        <p>Web 开发学习者 | 前端爱好者</p>
    </header>

    <nav>
        <ul>
            <li><a href="#basic-info">基本信息</a></li>
            <li><a href="#skills">我的技能</a></li>
            <li><a href="#contact">联系方式</a></li>
        </ul>
    </nav>

    <main>
        <section id="basic-info">
            <h2>基本信息</h2>
            <p>我是一名热爱编程的大学生，目前正在学习 Web 开发技术。我相信通过不断学习和实践，可以成为一名优秀的开发者。</p>
        </section>

        <article id="skills">
            <h2>我的技能</h2>
            <ul>
                <li>HTML5 - 熟练掌握语义化标签和基础结构</li>
                <li>CSS3 - 正在学习布局和样式设计</li>
                <li>JavaScript - 开始学习基础语法</li>
                <li>Git - 了解基本的版本控制</li>
            </ul>
        </article>

        <aside>
            <h3>相关链接</h3>
            <ul>
                <li><a href="https://github.com/zhangsan" target="_blank" rel="noopener noreferrer">我的 GitHub</a></li>
                <li><a href="https://blog.zhangsan.com" target="_blank" rel="noopener noreferrer">个人博客</a></li>
            </ul>
        </aside>

        <section id="contact">
            <h2>联系方式</h2>
            <ul>
                <li>邮箱：[email protected]</li>
                <li>微信：zhangsan123</li>
            </ul>
        </section>
    </main>

    <footer>
        <p>版权所有 © 2024 张三</p>
        <p>最后更新时间：2024年1月</p>
    </footer>
</body>
</html>

运行后的效果

6.2 练习

为一个博客文章布局规划语义化标签结构（思考页眉、页脚、导航、文章主体、文章内章节、侧边栏等分别用什么标签）。

7 内联框架 <iframe> 与其他通用容器：特殊情况与万金油

<iframe> 用于在当前页面嵌入另一个 HTML 文档（如地图、视频）。<div> 是块级通用容器，<span> 是内联通用容器，它们没有语义，主要用于 CSS 样式化或 JavaScript 操作。优先使用语义化标签，仅在没有合适语义标签时才使用 <div> <span>。

7.1 小例子： 嵌入一个在线地图或视频，并使用 <div>/<span>。

创建07.html，输入如下代码

bash 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>多媒体与嵌入示例</title>
    <style>
      .highlight {
        color: red;
        font-weight: bold;
      }
      .box {
        border: 1px solid #ccc;
        padding: 20px;
        margin: 20px 0;
        border-radius: 5px;
      }
    </style>
  </head>
  <body>
    <h1>多媒体与嵌入内容示例</h1>

    <!-- 文本内容部分 -->
    <section>
      <div class="box">
        <h3>关于我们</h3>
        <p>
          这是一段介绍文字，其中
          <span class="highlight">重要内容</span> 会被特别标注。
          我们致力于为用户提供 <span class="highlight">最好的服务</span>。
        </p>
      </div>

      <div class="box">
        <h3>引用内容</h3>
        <iframe
          title="引用示例"
          src="./05.html"
          width="100%"
          height="200"
          sandbox="allow-same-origin allow-scripts"
        >
        </iframe>
      </div>
    </section>
  </body>
</html>

运行后的效果

7.2 练习

尝试嵌入一个 B站视频或在线地图。使用 <div> 包裹几段相关文字，并使用 <span> 包裹段落中的个别词语，为后续 CSS 样式做准备。

结语

太棒了！你已经成功搭建了网页的"骨架"------HTML。你学会了如何使用标签来定义内容结构，从简单的文本、列表到图片、链接，再到表格、表单和重要的语义化标签。

记住，HTML 关注的是内容和结构，而不是外观。我们搭建的"骨架"现在可能看起来还很朴素，但这正是下一步 CSS 发挥作用的地方。

有了坚实的 HTML 基础，我们就可以开始学习如何给这个骨架"穿上衣服"、"刷上油漆"了。准备好进入下一部分------CSS，网页的妆容！

相关推荐
Jedi Hongbin5 分钟前
echarts自定义图表--仪表盘
前端·javascript·echarts
凯哥19709 分钟前
Sciter.js指南 - 桌面GUI开发时使用第三方模块
前端
边洛洛10 分钟前
对Electron打包的exe文件进行反解析
前端·javascript·electron
财神爷亲闺女10 分钟前
js 实现pc端鼠标横向拖动滚动
前端
用户20311966009610 分钟前
sheet在SwiftUI中的基本用法
前端
晴殇i11 分钟前
一行代码搞定防抖节流：JavaScript新特性解析
前端·javascript
David凉宸14 分钟前
HTML表单（二）
前端
G扇子14 分钟前
深入解析CSRF攻击：从攻击机制到多层次防护策略
前端·安全
500佰17 分钟前
React 面向组件编程
前端·node.js
热门推荐
01KGG转MP3工具|非KGM文件|解密音频02从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑03西电B测-计算机网络综合实验(含验收问题)04YOLOv8入门 | 重要性能衡量指标、训练结果评价及分析及影响mAP的因素【发论文关注的指标】05Coze扣子平台完整体验和实践（附国内和国际版对比）06DeepSeek各版本说明与优缺点分析07【VIsion Master】机器视觉软件二次开发（C#版本）学习笔记08yolov8，yolo11，yolo12 服务器训练到部署全流程 笔记09我决定放弃搞 Java 了10Python基于Flask的豆瓣电影数据分析可视化系统（附源码，文档说明）