【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>核心说明：
<html>：根标签，所有内容都包在里面；<head>：头，网页的“后台配置区”，比如<title>定义浏览器标签栏显示的文字；<body>：身体，网页的“前台展示区”，用户能看到的内容都在这。
1.4 标签的层级关系：像“家族树”一样好理解
HTML标签不是乱堆的，有明确的父子、兄弟关系，就像家族里的长辈和同辈：
<html><!-- 爷爷 --><head><!-- 爸爸：html的子标签 --><title>我的网页</title><!-- 儿子：head的子标签 --></head><body><!-- 叔叔：和head是兄弟关系 --> 网页内容 </body></html>💡 你可以用Chrome浏览器的F12（开发者工具）→「Elements」标签，直接看到网页的标签层级（也就是常说的DOM树），直观又好懂。
二、HTML开发准备：工欲善其事，必先利其器
2.1 选对工具：VS Codeyyds
手写HTML可以用记事本，但效率极低！新手首选Visual Studio Code（VS Code）：
- 跨平台（Windows/Mac/Linux都能用）；
- 轻量又强大，自带语法高亮、代码提示；
- 官网：https://code.visualstudio.com（直接下载安装即可）。
2.2 快速生成HTML骨架
在VS Code里新建.html文件（比如index.html），输入!（英文感叹号），按Enter/Tab键，瞬间生成标准骨架：
<!DOCTYPEhtml><htmllang="zh-CN"><!-- 改成中文，避免浏览器提示翻译 --><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>我的第一个网页</title><!-- 自定义标题 --></head><body><!-- 在这里写内容就行 --></body></html>核心细节（新手了解即可）：
<!DOCTYPE html>：告诉浏览器这是HTML5文件；<meta charset="UTF-8">：设置字符编码，避免中文乱码；viewport：适配移动端，让网页在手机上显示正常。
三、常用HTML标签：让网页内容丰富起来
3.1 标题标签：h1~h6（重要性递减）
网页的标题有6级，数字越大，字体越小、权重越低（h1一个页面最好只写1个，是页面核心标题）：
<h1>网站主标题（比如博客标题）</h1><h2>文章一级标题</h2><h3>文章二级标题</h3><h4>小标题</h4><h5>次要标题</h5><h6>最次标题</h6>结果展示：
3.2 段落标签：p（区分文本块）
HTML里直接换行/打空格没用，想把文字分成段落，必须用<p>标签：
<p>这是第一段内容：HTML是网页的骨架，学好它是前端入门的第一步。</p><p>这是第二段内容：段落标签会自动给文本上下留空隙，让排版更清晰。</p>结果展示：
💡 注意：<p>标签的内容不会自动缩进（后续用CSS可以设置），多个空格/换行只会被识别为1个空格。
3.3 换行标签：br/（强制换行）
如果只想换行不想分段（比如诗歌、地址），用单标签<br/>（规范写法，别写<br>）：
<p> 床前明月光<br/> 疑是地上霜<br/> 举头望明月<br/> 低头思故乡 </p>效果展示：
3.4 图片标签：img（插入图片）
<img>是单标签，必须加src属性（图片路径），否则图片显示不出来：
<!-- 1. 同级路径（图片和html文件在同一个文件夹） --><imgsrc="cat.jpg"alt="可爱的猫咪"width="300"><!-- 2. 下一级路径（图片在image文件夹里） --><imgsrc="image/dog.jpg"alt="调皮的小狗"><!-- 3. 网络路径（直接用网上的图片链接） --><imgsrc="https://ts1.tc.mm.bing.net/th/id/R-C.8e283246276fad2c01e8d0e300bb4540?rik=umflFIIvM%2f%2b%2b6Q&riu=http%3a%2f%2fseopic.699pic.com%2fphoto%2f50118%2f7084.jpg_wh1200.jpg&ehk=1HQoa7wYy9xnf0HqsFbQQJAv79HJnBest1U0atuLHSQ%3d&risl=&pid=ImgRaw&r=0"alt="风景图">这里的话需要注意的是：图片路径的问题，分为相对路径和绝对路径，图片路径也可以是网络路径。
效果：
1）图片路径对的话，就显示的是对应的图片
2）如果图片路径不对就显示的alt属性中的内容
核心属性：
src：图片路径（相对路径/绝对路径/网络路径）；alt：图片加载失败时显示的文字（无障碍优化）；width/height：设置宽高（改一个就好，另一个等比例缩放，避免图片变形）。
3.5 超链接标签：a（页面跳转）
<a>标签是网页的“桥梁”，核心属性是href（跳转地址）：
<!-- 1. 跳转到外部网站 --><ahref="https://www.baidu.com"target="_blank">打开百度（新标签页）</a><!-- 2. 跳转到本地页面（内部链接） --><ahref="about.html">关于我</a><!-- 3. 空链接（暂时不跳转，占位置） --><ahref="#">返回顶部</a>
💡 target="_blank"：在新标签页打开链接（默认_self，在当前标签页打开）。也就是说这个属性 是代表再开启一个新的页面打开链接。
四、结构化展示：表格标签（table）
表格用来展示规整的数据（比如课程表、成绩单），核心标签：
<table>：整个表格；<tr>：表格的一行；<td>：一行里的一个单元格【也就是列】；<thead>/<tbody>：可选，区分表头和表体，结构更清晰。
示例（课程表，和示例的人员信息表不同）：
<tableborder="1"align="center"cellpadding="10"cellspacing="0"width="400"><thead><tr><td>时间</td><td>周一</td><td>周二</td></tr></thead><tbody><tr><td>上午</td><td>HTML</td><td>CSS</td></tr><tr><td>下午</td><td>JavaScript</td><td>实战</td></tr></tbody></table>效果：
属性说明：
border：表格边框（数字越大越粗）；align：表格整体居中；cellpadding：内容到单元格边框的距离；cellspacing：单元格之间的间距（设为0更美观）。
五、交互核心：表单标签（收集用户信息）
表单是比较重要的一个标签，那么其实他的一个最重要的作用就是from和表单控件submit一起配合使用的时候，所提交的数据内容就是from所包裹起来的内容。
举个例子：
<formaction="submit.html"method="get"><!-- 1. 文本框（输入用户名） --><label>用户名：</label><inputtype="text"name="username"placeholder="请输入用户名"><br/><!-- 2. 密码框（输入密码，内容隐藏） --><label>密码：</label><inputtype="password"name="pwd"placeholder="请输入密码"><br/><!-- 3. 单选框（性别选择，name相同才能单选） --><label>性别：</label><inputtype="radio"name="gender"value="male">男 <inputtype="radio"name="gender"value="female"checked>女<br/><!-- 4. 复选框（爱好选择，可多选） --><label>爱好：</label><inputtype="checkbox"name="hobby"value="reading">阅读 <inputtype="checkbox"name="hobby"value="coding">编程 <inputtype="checkbox"name="hobby"value="sports">运动<br/><!-- 5. 普通按钮（搭配JS使用） --><inputtype="button"value="点击提示"onclick="alert('你点我啦！')"><br/><!-- 6. 提交按钮（提交表单数据） --><inputtype="submit"value="提交信息"></form> from表单的包裹范围减小 <!-- 1. 文本框（输入用户名） --><label>用户名：</label><inputtype="text"name="username"placeholder="请输入用户名"><br/><!-- 2. 密码框（输入密码，内容隐藏） --><label>密码：</label><inputtype="password"name="pwd"placeholder="请输入密码"><br/><!-- 3. 单选框（性别选择，name相同才能单选） --><label>性别：</label><inputtype="radio"name="gender"value="male">男 <inputtype="radio"name="gender"value="female"checked>女<br/><formaction="submit.html"method="get"><!-- 4. 复选框（爱好选择，可多选） --><label>爱好：</label><inputtype="checkbox"name="hobby"value="reading">阅读 <inputtype="checkbox"name="hobby"value="coding">编程 <inputtype="checkbox"name="hobby"value="sports">运动<br/><!-- 5. 普通按钮（搭配JS使用） --><inputtype="button"value="点击提示"onclick="alert('你点我啦！')"><br/><!-- 6. 提交按钮（提交表单数据） --><inputtype="submit"value="提交信息"></form>
表单是网页和用户交互的核心（比如注册、登录、搜索），核心组成：
5.1 form标签（表单域）
form包裹的范围就是submit提交的范围。
包裹所有表单控件，定义数据提交的目标地址：
<formaction="submit.html"method="get"><!-- 表单控件写在这里 --></form>属性说明：
action：提交的路径；method：提交的请求方法；
5.2 input标签（核心表单控件）
<input>是“万能控件”，通过type属性切换类型：
<!-- 1. 文本框（输入用户名） --><label>用户名：</label><inputtype="text"name="username"placeholder="请输入用户名"><br/><!-- 2. 密码框（输入密码，内容隐藏） --><label>密码：</label><inputtype="password"name="pwd"placeholder="请输入密码"><br/><!-- 3. 单选框（性别选择，name相同才能单选） --><label>性别：</label><inputtype="radio"name="gender"value="male">男 <inputtype="radio"name="gender"value="female"checked>女<br/><!-- 4. 复选框（爱好选择，可多选） --><label>爱好：</label><inputtype="checkbox"name="hobby"value="reading">阅读 <inputtype="checkbox"name="hobby"value="coding">编程 <inputtype="checkbox"name="hobby"value="sports">运动<br/><!-- 5. 普通按钮（搭配JS使用） --><inputtype="button"value="点击提示"onclick="alert('你点我啦！')"><br/><!-- 6. 提交按钮（提交表单数据） --><inputtype="submit"value="提交信息">属性说明：
name：是键值对中的键名key，也就是说，到时候我们的数据是需要提交到后端的，那么你得使用这个变量来存储你的值；然后的话，name值一样的时候同一组数据，比如我们的name="hobby"是同一组数据，那么到时候提交的时候如果是复选框，那么就是提交一组值；value：是键值对中的键值value，也就是对应上述name属性对应的值，说白了，其实就是键值对，name代表的是键，而value代表的是值；
5.3 select标签（下拉菜单）
适合选项较多的场景（比如选择城市）：
<label>所在城市：</label><selectname="city"><optionvalue="beijing">北京</option><optionvalue="shanghai"selected>上海</option><optionvalue="guangzhou">广州</option></select>效果展示：
💡 selected：设置默认选中的选项。
5.4 textarea标签（多行文本框）
适合输入大段文字（比如备注、简介）：
<label>个人简介：</label><textareaname="intro"rows="3"cols="30"placeholder="请输入个人简介"></textarea>
六、布局神器：div和span（无语义标签）
div和span没有固定样式，纯粹用来“装内容、做布局”，是网页布局的核心：
- 🧱
<div>：块级元素，独占一行（大盒子）； - 🧱
<span>：行内元素，不独占一行（小盒子）。
示例：
<!-- div：大容器，放一组内容 --><divclass="user-info"><span>用户名：</span><span>张三</span></div><divclass="user-hobby"><span>爱好：</span><span>编程</span><span>阅读</span></div>
七、实战：制作简单的用户注册页面
把上面的知识点整合，写一个完整的注册页面（原创示例，和参考示例不同）：
<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>用户注册页面</title></head><body><h1align="center">新手注册</h1><formaction="success.html"method="get"><!-- 用户名 --><p><label>用户名：</label><inputtype="text"name="username"placeholder="请输入3-10位字母/数字"required></p><!-- 密码 --><p><label>密码：</label><inputtype="password"name="pwd"placeholder="请输入6-16位密码"required></p><!-- 性别 --><p><label>性别：</label><inputtype="radio"name="gender"value="male">男 <inputtype="radio"name="gender"value="female"checked>女 </p><!-- 爱好 --><p><label>爱好：</label><inputtype="checkbox"name="hobby"value="coding">编程 <inputtype="checkbox"name="hobby"value="reading">阅读 <inputtype="checkbox"name="hobby"value="travel">旅行 </p><!-- 城市 --><p><label>所在城市：</label><selectname="city"><optionvalue="beijing">北京</option><optionvalue="shanghai"selected>上海</option><optionvalue="shenzhen">深圳</option></select></p><!-- 个人简介 --><p><label>个人简介：</label><textareaname="intro"rows="3"cols="30"placeholder="简单介绍一下自己"></textarea></p><!-- 提交按钮 --><p><inputtype="submit"value="提交注册"><inputtype="reset"value="重置"></p></form></body></html>
<h1>用户注册</h1><table><tr><td>用户名：</td><td><inputtype="text"placeholder="请输入用户名"></td></tr><tr><td>手机号：</td><td><inputtype="number"placeholder="请输入手机号"></td></tr><tr><td>密码：</td><td><inputtype="password"placeholder="请输入密码"></td></tr></table><div><inputtype="submit"value="提交"><span>是否已有账号？</span><ahref="#">登录</a></div>
总结
- HTML是网页的骨架，核心是标签，大部分标签成对出现，部分为单标签，标签可加属性；
- HTML文件有固定骨架，VS Code输入
!可快速生成，<body>写可见内容，<head>写配置； - 常用标签分三类：内容标签（h1~h6、p、br、img、a）、结构化标签（table）、交互标签（form、input、select、textarea），布局用div/span；
- 表单是用户交互核心，input通过
type切换控件类型，单选框需统一name才能实现“多选一”。
看完这篇，我想老铁已经掌握了HTML的核心知识点，动手写一个注册页面试试吧！
