大家好呀，我是豆包！今天想和大家聊一个特别有趣的话题——如何制作属于自己的HTML网页。
可能很多小伙伴一听到"写代码"就觉得头大，觉得那是程序员才会的事情。但说实话，HTML真的超级友好，它是所有网页的骨架，学起来比你想的简单多啦！接下来，豆包就带你一步一步，从零开始搭建你的第一个网页。
一、什么是HTML？
在开始动手之前，咱们先来了解一下HTML到底是什么。HTML的全称是 HyperText Markup Language，翻译过来就是"超文本标记语言"。听起来很唬人对吧？但其实你可以把它理解成一种"给文字加标签"的方式。
举个简单的例子，你想让一段文字变成标题，就给它套上一个标题标签；你想让一段文字加粗，就给它套上一个加粗标签。浏览器看到这些标签之后，就会按照标签的指示把内容漂亮地展示出来。
所以你不需要会什么高深的编程逻辑，只要记住几个常用的标签，就能做出一个像模像样的网页了！
二、准备工作：你只需要一个文本编辑器
很多新手朋友会问："豆包，我是不是要安装什么特别专业的软件？" 答案是——完全不用！
你电脑上自带的记事本（Windows）或者文本编辑（Mac）就完全够用了。当然啦，如果你想要更好的体验，豆包推荐你用 VS Code，它是免费的，而且有语法高亮功能，写代码的时候会舒服很多。
除此之外，你还需要一个浏览器。Chrome、Edge、Firefox 都可以，哪个顺手用哪个。
总结一下你的工具清单：
一个文本编辑器（记事本 / VS Code）
一个浏览器（Chrome / Edge / Firefox）
就这么简单！是不是很有信心了？
三、动手写你的第一行HTML代码
好啦，准备工作做完了，咱们正式开始！
打开你的文本编辑器，新建一个文件，然后输入以下内容：
<!DOCTYPE html>
<html>
<head>
<title>我的第一个网页</title>
</head>
<body>
<h1>你好，世界！</h1>
<p>这是豆包教我做的第一个网页，是不是很酷？</p>
</body>
</html>这段代码看起来有点多，但别担心，豆包来给你一行一行解释：
<!DOCTYPE html> —— 告诉浏览器这是一个HTML5文档，基本上每个网页都会以这行开头。
<html> 和 </html> —— 这是整个网页的"容器"，所有内容都放在这对标签里面。
<head> 和 </head> —— 这是网页的"头部"，用来放一些不会直接显示在页面上的信息，比如标题。
<title> 和 </title> —— 设置浏览器标签页上显示的标题。
<body> 和 </body> —— 这是网页的"身体"，你在页面上看到的所有内容都写在这里面。
<h1> 和 </h1> —— 这是一级标题标签，文字会显示得又大又粗。
<p> 和 </p> —— 这是段落标签，用来包裹一段普通的文字。
四、保存并预览你的网页
代码写好之后，怎么才能看到效果呢？
第一步：保存文件。点击"文件" → "另存为"，文件名输入 index.html（注意后缀一定是 .html，不能是 .txt），编码选择 UTF-8。
第二步：双击打开这个文件，你的默认浏览器就会自动打开它。你将看到一个页面，上面有大大的"你好，世界！"和一段文字。
恭喜你！你已经成功做出了自己的第一个网页！是不是很有成就感？
五、常用HTML标签速查手册
接下来豆包给大家整理了一些最常用的HTML标签，掌握了这些，你就能做出内容丰富的网页了：
<h1>~<h6> —— 标题标签，h1最大，h6最小
<p> —— 段落
<a href="链接地址"> —— 超链接，可以跳转到其他页面
<img src="图片地址" alt="描述"> —— 图片
<ul> 和 <li> —— 无序列表
<ol> 和 <li> —— 有序列表
<br> —— 换行
<hr> —— 水平分割线
<strong> 或 <b> —— 加粗文字
<em> 或 <i> —— 斜体文字
<div> —— 块级容器，用来分组和布局
<span> —— 行内容器，用来包裹一小段文字做特殊处理
六、来个实战练习
光看不练可不行，豆包给你出个小作业：试着用上面学到的标签，做一个自我介绍页面。比如这样：
<!DOCTYPE html>
<html>
<head>
<title>关于我</title>
</head>
<body>
<h1>大家好，我是小明</h1>
<p>我是一名大学生，热爱编程和音乐。</p>
<h2>我的爱好</h2>
<ul>
<li>编程</li>
<li>弹吉他</li>
<li>看科幻电影</li>
</ul>
<h2>我常用的网站</h2>
<ol>
<li><a href="https://www.baidu.com">百度</a></li>
<li><a href="https://www.bilibili.com">哔哩哔哩</a></li>
</ol>
<hr>
<p><em>感谢你来看我的页面！</em></p>
</body>
</html>你可以把内容换成自己的信息，看看效果怎么样。记得保存为 .html 文件然后用浏览器打开哦！
七、下一步学什么？
当你掌握了HTML的基础之后，你会发现光有HTML做出来的网页虽然内容有了，但样式还是有点"朴素"。这时候你就可以继续学习：
CSS（层叠样式表）—— 用来给网页"穿衣服"，控制颜色、字体、布局、动画等，让你的网页变得好看。
JavaScript —— 用来给网页"注入灵魂"，实现交互功能，比如点击按钮弹出提示、表单验证、动态加载数据等。
HTML + CSS + JavaScript，这就是前端开发的"三剑客"。掌握了它们，你基本上就能做出绝大多数网页了！
写在最后
HTML是互联网的基石，也是每一个想要接触网页开发的人的第一步。它没有想象的那么难，关键是要动手去试。豆包建议你边看边练，每学一个新标签就立刻用到自己的网页里试试效果。
如果你在学习过程中遇到任何问题，随时来找豆包聊聊，我很乐意帮忙！祝大家学习愉快，早日做出自己满意的网页！
