前端修炼篇①：HTML入门 - 构建网页的骨架
掌握网页内容结构，打下前端开发坚实基础🎯🎯
学习目标
- ✅ 理解HTML在网页开发中的核心作用
- ✅ 掌握HTML基础语法和常用标签
- ✅ 学会使用语义化标签构建清晰结构
- ✅ 独立完成一个简单网页的搭建
📖📖 教程概览
HTML是网页的骨架，决定了内容的组织结构。本教程将带你从零开始学习HTML，掌握构建网页的基础技能，为后续学习CSS和JavaScript打下坚实基础。
💻💻 第一步：认识HTML环境
1.1 什么是HTML？
HTML（超文本标记语言）是用于创建网页的标准标记语言，它通过一系列标签来定义网页内容的结构。
1.2 创建第一个HTML文件
1. 在VSCode中新建index.html文件
2. 输入以下基础代码结构：
<!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>欢迎学习HTML！</h1>
<p>这是我的第一个网页</p>
</body>
</html>🛠🛠 第二步：常用HTML标签详解
2.1 文本内容标签
<!-- 标题标签，h1最重要，h6最次要 -->
<h1>一级标题</h1>
<h2>二级标题</h2>
<p>这是一个段落</p>
<!-- 文本格式化 -->
<strong>加粗文本</strong>
<em>斜体文本</em>
<br> <!-- 换行 -->
<hr> <!-- 水平线 -->2.2 链接与图片
<!-- 超链接 -->
<a href="https://example.com">访问示例网站</a>
<a href="about.html" target="_blank">关于我们（新窗口打开）</a>
<!-- 图片 -->
<img src="photo.jpg" alt="个人照片" width="200">2.3 列表结构
<!-- 无序列表 -->
<ul>
<li>列表项1</li>
<li>列表项2</li>
</ul>
<!-- 有序列表 -->
<ol>
<li>第一步</li>
<li>第二步</li>
</ol>🌟🌟 第三步：语义化HTML5标签
3.1 为什么要语义化？
- 更好的SEO（搜索引擎优化）
- 提高可访问性
- 代码更易维护
3.2 常用语义化标签
<header>页面头部</header>
<nav>导航区域</nav>
<main>主要内容区域</main>
<article>独立的文章内容</article>
<section>文档中的章节</section>
<aside>侧边栏内容</aside>
<footer>页面底部</footer>🎮🎮 第四步：实战演练 - 创建个人简介页面
任务要求：
创建一个包含以下信息的个人简介页面：
- 姓名标题
- 个人介绍段落
- 技能列表
- 个人照片
- 社交媒体链接
完整代码示例：
<!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>前端开发学习者 | 技术爱好者</p>
</header>
<main>
<section>
<h2>关于我</h2>
<p>我是一名正在学习Web开发的技术爱好者，目前专注于前端技术栈的学习。</p>
<img src="profile.jpg" alt="张三的个人照片" width="150">
</section>
<section>
<h2>我的技能</h2>
<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript</li>
<li>Git版本控制</li>
</ul>
</section>
</main>
<footer>
<h2>联系我</h2>
<a href="https://github.com/zhangsan">GitHub</a> |
<a href="mailto:zhangsan@example.com">Email</a>
<p>© 2025 张三. 保留所有权利。</p>
</footer>
</body>
</html>📚📚 小结与练习
本章重点回顾：
- HTML是网页的骨架，用于定义内容结构
- 常用标签：标题、段落、链接、图片、列表
- 语义化标签让代码更清晰、更易维护
练习任务：
- 完善上面的个人简介页面，添加更多个人信息
- 尝试创建一个简单的文章页面，包含标题、作者、日期和正文
- 为页面添加一个简单的联系表单（使用
<form>、<input>、<textarea>标签）
💡💡 常见问题
Q：为什么我的中文显示乱码？
A：确保文件保存为UTF-8编码，并在<head>中添加<meta charset="UTF-8">
Q：图片无法显示怎么办？
A：检查图片路径是否正确，确保图片文件存在于指定位置
Q：链接点击后没反应？
A：检查href属性值是否正确，如果是外部链接要包含http://或https://
👉👉 下一步预告
在下一篇文章中，我们将学习CSS，为这个HTML骨架穿上漂亮的"外衣"，让网页变得美观起来！
版权申明
本文系作者 @sgyyds 原创发布在孙哥博客站点。未经许可，禁止转载。
暂无评论数据