【JavaEE01-前端部分】从零入门HTML：从基础到实战，手把手教你写第一个网页

✅ 本文适合编程新手，用最通俗的语言讲清HTML核心知识点，搭配原创示例代码，看完就能上手写网页！

一、认识HTML：网页的'骨架语言'

1.1 什么是HTML？

HTML的全称是HyperText Markup Language（超文本标记语言），你可以把它理解为网页的骨架 —— 没有它，网页就是一片空白。

超文本：不只是单纯的文字，还能包含图片、视频、链接，甚至是可点击的按钮，让内容'活'起来。比如你刷到的带图片的公众号文章、带跳转链接的电商页面，都是'超文本'的体现。
标记语言：用提前定义好的'标签'来告诉浏览器'这段内容该怎么显示'。就像你在Word里选中文字点'加粗'，Word会给文字加'加粗标记'；HTML里的标签，就是给网页内容加的'显示规则'。

1.2 HTML标签：网页的'最小指令单元'

HTML的核心就是标签，所有网页内容都包裹在标签里，它的特点一眼就能懂：

📝 标签名放在< >里，比如<p>、<img>；
📝 大部分标签是'成对出现'的：<标签名>是开始标签（开门），</标签名>是结束标签（关门），内容写在中间；
📝 少数标签是'单标签'（只有开门，没有关门），比如换行标签<br/>；
📝 标签可以加'属性'：像给标签贴'身份证'或'说明书'，比如<h2>里的id就是属性，用来唯一标识这个标签。

举个简单例子：

<!-- 成对标签 + 属性示例 --><h2id="article-title">我的第一篇HTML笔记</h2><!-- 单标签示例 --><br/>

1.3 HTML文件的基本骨架

任何HTML文件都有固定的'骨架结构'，就像盖房子先搭承重墙：

<!DOCTYPEhtml><html><head><!-- head里是网页的'隐藏属性'：标题、编码等，不显示在页面上 --><title>我的第一个网页</title></head><body><!-- body里是网页的'可见内容'：文字、图片、按钮都写在这 --> 你好，这是我用HTML写的第一个页面！ </body></html>