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

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

news 来源：原创 2025/4/27 9:48:02

这目录

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

贴入如下代码：

<!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，贴入如下代码

<!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 练习

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

我的编程学习之旅在这个数字化时代，编程已经成为一项必不可少的技能。我开始学习编程的故事要从三个月前说起，那时我下定决心要成为一名全栈开发工程师。为什么选择学习编程？
• 对技术充满热情
• 想要创造有价值的产品
• 提升职业竞争力我的学习计划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，输入如下代码

<!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，输入如下代码：

<!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，输入如下代码

<!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，输入如下代码：

<!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>邮箱：zhangsan@example.com</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，输入如下代码

<!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><iframetitle="引用示例"src="./05.html"width="100%"height="200"sandbox="allow-same-origin allow-scripts"></iframe></div></section></body>
</html>