大家好，我是专栏作者soda。昨天咱们搞定了开发工具的搭建，不少同学在评论区打卡时说“原来工具安装这么简单，之前自己摸索踩了好多坑”，看到大家顺利入门我特别开心！今天是第2天，咱们正式进入核心知识学习——HTML，前端的“骨架”技术，学会它就能搭建出网页的基本结构，10分钟就能写出第一个属于自己的网页。
先问大家一个问题：为什么学前端要先学HTML？咱们拿盖房子类比，HTML就相当于房子的“钢筋骨架”，决定了房子有几间房、门窗在哪；明天要学的CSS是“装修”，负责墙面颜色、家具摆放；后续学的JS是“水电”，让房子能开灯、开空调。没有骨架，装修和水电都无从谈起，所以HTML是前端学习的第一块基石，必须扎实掌握。
今天的内容全程实操，没有复杂理论，核心目标就一个：让大家学会10个最常用的HTML标签，并用这些标签搭建一个“个人介绍页”的骨架。咱们先解决新手对HTML的3个常见误解，再一步步实操，最后通过作业巩固，确保大家学完就能用。
一、新手必懂：HTML到底是什么？3个误解澄清
很多新手刚接触HTML会被“标签”“语法”这些词吓住，其实HTML比你想象的简单太多。先花5分钟搞懂这3个问题，后续学习会更顺畅。
1. HTML不是编程语言，是“标记语言”
编程语言（比如JS、Python）需要写逻辑代码（比如判断、循环），但HTML不需要！它的核心作用是“标记内容的类型”，告诉浏览器哪些是标题、哪些是段落、哪些是图片。比如用<h1>标签包裹的内容，浏览器就知道这是“一级标题”，会自动显示成大号加粗样式；用<p>标签包裹的，就是“段落文本”，会自动换行。
简单说，HTML就是给内容“贴标签”的工具，没有任何编程难度，记住标签的作用和写法就能用，这也是新手能快速上手的原因。
2. HTML的核心是“标签”，遵循“开闭原则”
HTML的所有功能都靠“标签”实现，标签通常是成对出现的，分为“开始标签”和“结束标签”，比如<h1>是开始标签，</h1>是结束标签，中间包裹的就是标签作用的内容，这就是“开闭原则”。例如：<h1>我的第一个标题</h1>，这里“我的第一个标题”就是一级标题内容。
有少数标签是“自闭合标签”，不需要结束标签，比如图片标签<img>，后续遇到时我会专门说明，新手先记住“大部分标签成对写”即可。
3. 浏览器是HTML的“翻译官”，会忽略多余空格和换行
新手写HTML时容易犯一个错：在代码里加很多空格和换行，以为浏览器会按代码的格式显示内容。但实际上，浏览器会自动忽略HTML代码中的多余空格、换行和缩进，只根据标签来解析内容结构。比如下面两段代码，在浏览器中显示的效果完全一样：
<h1>我的标题</h1><p>我的段落内容。</p>
虽然第二段代码有缩进和换行，更易读，但浏览器解析后显示的效果和第一段完全相同。所以写HTML时，建议大家用“缩进”来整理代码结构（比如标签内的内容缩进2个或4个空格），方便自己和他人阅读，这是前端开发的好习惯。
二、第2天核心实操：10个常用标签+1个完整网页案例
今天咱们重点掌握10个最常用的HTML标签，这些标签覆盖了80%的网页基础结构需求，学会后就能搭建大多数简单网页的骨架。咱们先逐个认识标签，再用这些标签做一个“个人介绍页”实战案例。
1. 先明确：HTML文件的“固定结构”
不管是什么HTML网页，都有一个固定的基础结构，就像写作文要有“标题、开头、正文、结尾”一样，HTML文件也有必须包含的4个部分，新手写HTML前必须先写好这个结构：
<!DOCTYPE html> <html lang="zh-***"> <head> <meta charset="UTF-8"> <title>我的第一个网页</title> </head> <body> </body> </html>
对新手来说，不需要死记硬背这个结构，理解每个部分的作用即可：
-
<!DOCTYPE html>：告诉浏览器“这是一个HTML5格式的文件”，HTML5是目前最主流的版本，所有浏览器都支持，固定写法即可；
-
<html>：整个HTML文件的“根标签”，所有其他标签都要写在这个标签里面，lang="zh-***"是告诉搜索引擎“这是中文网页”，有利于SEO（后续会讲）；
-
<head>：网页的“后台信息区”，里面的内容不会显示在页面上，比如字符编码、网页标题、引入的外部文件等，其中<meta charset="UTF-8">必须加，否则网页中的中文可能会显示成乱码；
-
<body>：网页的“前台显示区”，咱们写的标题、段落、图片等内容，都要放在这个标签里，才会在浏览器中显示出来。
新手技巧：VS Code有“快速生成HTML结构”的快捷键，在新建的HTML文件中输入“! ”（英文感叹号+空格），然后按回车键，VS Code会自动生成上面的固定结构，大幅提升效率，现在就打开VS Code试一下！
2. 10个核心标签逐个拆解（附用法+案例）
下面这10个标签是网页开发中最常用的，每个标签我都会讲“作用+写法+案例”，大家跟着在VS Code中写一遍，加深记忆。所有标签都要写在<body>标签里面，才会显示在页面上。
标签1：标题标签（<h1>-<h6>）—— 定义标题，共6级
作用：用于定义网页中的标题，从<h1>到<h6>字体大小依次减小，其中<h1>级别最高（通常一个页面只有1个<h1>，用于网页主标题），<h6>级别最低。
写法：成对出现，内容写在标签中间。
<body> <h1>一级标题（最大，主标题）</h1> <h2>二级标题（次标题）</h2> <h3>三级标题（小标题）</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题（最小）</h6> </body>
效果：在浏览器中打开后，会显示6个不同大小的加粗标题，自动换行。
新手踩坑：不要为了让文本变大而用<h1>标签，标题标签有“语义”，比如<h1>代表页面核心标题，滥用会影响搜索引擎对网页的识别，文本大小后续用CSS控制，HTML只负责“定义内容类型”。
标签2：段落标签（<p>）—— 定义段落文本
作用：用于定义网页中的段落文本，浏览器会自动给段落前后添加空白，并且自动换行。
写法：成对出现，段落内容写在中间。
<body> <h2>我的个人介绍</h2> <p>大家好，我叫张三，是一名前端学习新手，正在跟着“100天拿offer实战课”学习。我每天会花1-2小时实操练习，希望100天后能掌握前端核心技能，成功入职。</p> <p>我喜欢编程、看电影和运动，编程让我学会用逻辑解决问题，运动让我保持良好的学习状态。</p> </body>
效果：两个段落之间会有明显的空白，自动分开显示，比直接写文本更规整。
标签3：换行标签（<br/>）—— 强制换行
作用：用于在段落中强制换行，比如写诗歌、地址时，需要手动换行但又不想分成两个段落，就用<br/>标签。
写法：自闭合标签，不需要结束标签，注意是<br/>（HTML5规范写法），不是<br>。
<body> <p>我的联系地址：<br/> 北京市朝阳区XX街道<br/> XX小区1号楼3单元501室</p> </body>
效果：地址中的每一行都会强制换行，显示在同一段落内。
区别：<p>标签是“分段”，会自动添加空白；<br/>标签是“换行”，只换行不添加空白，根据需求选择使用。
标签4：水平线标签（<hr/>）—— 插入水平线
作用：用于在网页中插入一条水平线，分隔不同的内容区域，让页面结构更清晰。
写法：自闭合标签，单独写即可。
<body> <h2>我的个人介绍</h2> <p>大家好，我叫张三，是一名前端学习新手...</p> <hr/> <h2>我的兴趣爱好</h2> <p>我喜欢编程、看电影和运动...</p> </body>
效果：两个标题之间会显示一条水平线，清晰分隔不同内容模块。
标签5：加粗标签（<strong>）—— 强调文本并加粗
作用：用于强调网页中的重要文本，浏览器会将内容显示为加粗样式，同时有“强调”的语义，比单纯的样式标签更友好。
写法：成对出现，需要加粗的内容写在中间。
<body> <p>前端学习的核心原则：<strong>实操为王，错了再改</strong>，不要只看教程不写代码。</p> <p>每天的学习时间建议：<strong>至少1小时实操，30分钟复盘</strong>，坚持100天必有收获。</p> </body>
效果：被<strong>包裹的文本会加粗显示，突出重点。
注意：还有一个<b>标签也能让文本加粗，但<b>只有样式没有语义，推荐用<strong>，更符合HTML的语义化要求，有利于SEO和无障碍阅读。
标签6：斜体标签（<em>）—— 强调文本并倾斜
作用：用于强调网页中的文本，浏览器会将内容显示为斜体样式，同样有“强调”的语义。
写法：成对出现，需要倾斜的内容写在中间。
<body> <p>爱因斯坦说过：<em>天才是99%的汗水加上1%的灵感，但那1%的灵感往往比99%的汗水更重要。</em></p> <p>这句话告诉我们，努力和灵感同样重要，学习前端既要刻苦练习，也要学会思考总结。</p> </body>
效果：被<em>包裹的文本会倾斜显示，起到强调作用。
注意：<i>标签也能让文本倾斜，但没有语义，推荐用<em>。
标签7：列表标签（<ul>无序列表、<ol>有序列表）—— 定义列表内容
作用：用于定义网页中的列表内容，分为无序列表（<ul>，列表项前是圆点）和有序列表（<ol>，列表项前是数字），列表中的每个项用<li>标签定义。
写法：<ul>或<ol>成对出现，里面嵌套<li>标签（成对），<li>是列表项。
<body> <h3>我的兴趣爱好（无序列表）</h3> <ul> <li>编程：每天练习HTML、CSS</li> <li>电影：喜欢科幻、剧情类电影</li> <li>运动：跑步、游泳、健身</li> </ul> <h3>我的学习计划（有序列表）</h3> <ol> <li>第1-30天：掌握HTML、CSS基础</li> <li>第31-60天：学习JS核心语法</li> <li>第61-100天：框架学习+项目实战</li> </ol> </body>
效果：无序列表项前是圆点，有序列表项前是1、2、3...数字，结构清晰易读。
新手踩坑：<ul>和<ol>里面只能放<li>标签，不能直接放文本或其他标签；<li>标签里面可以放任何内容，比如标题、段落、图片等。
标签8：图片标签（<img>）—— 插入图片
作用：用于在网页中插入图片，是网页中最常用的标签之一，支持jpg、png、gif等常见图片格式。
写法：自闭合标签，必须包含src和alt两个属性，格式为<img src="图片路径" alt="图片加载失败时的提示文本">。
关键属性说明：
-
src（必填）：指定图片的“路径”，分为“相对路径”和“绝对路径”，新手先掌握相对路径（图片和HTML文件在同一文件夹）；
-
alt（必填）：图片加载失败时显示的提示文本，同时有利于SEO（搜索引擎识别图片内容），必须填写，这是前端开发的规范；
-
width/height（可选）：设置图片的宽度和高度，单位是像素（px），只设置一个属性时，图片会按比例缩放，避免变形。
<body> <h3>我的个人照片</h3> <img src="photo.jpg" alt="张三的个人照片" width="200"> </body>
实操步骤：
-
找一张图片（比如自己的照片），重命名为“photo.jpg”；
-
将图片放在和HTML文件同一个文件夹中；
-
在VS Code中写上面的代码，用“Open in Browser”插件打开，就能看到图片。
新手踩坑：图片不显示的常见原因：① src路径错误（比如图片文件名写错、不在同一文件夹）；② 图片格式错误（比如后缀是.webp，部分浏览器支持不好）；③ 没有写alt属性不影响显示，但不符合规范，必须写。
标签9：链接标签（<a>）—— 实现页面跳转
作用：用于创建“超链接”，实现从当前网页跳转到其他网页（或同一网页的其他位置），是网页的核心交互标签之一。
写法：成对出现，格式为<a href="目标网址或文件路径" target="打开方式">链接文本或图片</a>。
关键属性说明：
-
href（必填）：目标链接的地址，可以是外部网址（比如https://www.baidu.***），也可以是本地HTML文件路径；
-
target（可选）：设置链接的打开方式，_blank表示“在新标签页打开”，_self表示“在当前标签页打开”（默认），推荐外部链接用_blank，避免跳转后关闭当前页面。
<body> <p>学习资源推荐：</p> <a href="https://www.csdn.***" target="_blank">CSDN官网（前端学习资源）</a> <br/> <a href="test2.html">跳转到我的第二个网页</a> <br/> <a href="https://www.baidu.***" target="_blank"> <img src="baidu.jpg" alt="百度图标" width="100"> </a> </body>
效果：点击“CSDN官网”文本或百度图标，会在新标签页打开对应的网页；点击“跳转到我的第二个网页”，会在当前标签页打开本地的test2.html文件。
标签10：容器标签（<div>）—— 划分页面区域
作用：用于“划分网页的区域”，本身没有任何样式，浏览器会将其显示为块级元素（自动换行），主要用于后续通过CSS控制区域样式（比如设置背景色、宽高、边距等）。
写法：成对出现，里面可以放任何标签和内容，是前端布局的核心标签。
<body> <div> <h1>我的个人主页</h1> <p>100天前端拿offer实战课学员</p> </div> <hr/> <div> <h2>个人介绍</h2> <p>大家好，我叫张三...</p> </div> <hr/> <div> <p>联系电话：138XXXX8888</p> <p>© 2024 我的个人主页 版权所有</p> </div> </body>
效果：虽然现在看起来和没加<div>一样，但后续学CSS时，就能通过给不同<div>设置样式，让头部、主体、底部呈现不同的外观，实现网页布局。
三、实战：用10个标签搭建“个人介绍页”完整骨架
现在咱们把上面学的10个标签整合起来，搭建一个完整的“个人介绍页”，包含头部、个人信息、兴趣爱好、联系链接、图片等内容，跟着步骤写，10分钟就能完成。
步骤1：新建HTML文件并生成基础结构
打开VS Code，新建一个文件（Ctrl+N），输入“! ”后按回车，自动生成HTML基础结构，将文件保存为“index.html”（HTML文件的默认命名，方便后续访问）。
步骤2：填充网页内容（写在<body>标签内）
<body> <div> <h1>我的个人主页</h1> <p>前端学习者 | 100天拿offer实战课学员</p> <hr/> </div> <div> <h2>个人信息</h2> <img src="photo.jpg" alt="我的个人照片" width="200"> <p><strong>姓名：</strong>张三</p> <p><strong>年龄：</strong>25岁</p> <p><strong>简介：</strong>大家好，我是一名零基础前端学习者，正在跟着专栏系统学习前端技术。我坚信“实操为王”，每天坚持练习，希望100天后能具备企业入门能力，成功转行前端开发。<br/>我擅长沟通和团队协作，之前的工作经历让我养成了严谨的做事风格，相信能快速适应前端开发岗位。</p> <hr/> </div> <div> <h2>我的兴趣爱好</h2> <ul> <li><strong>编程：</strong>每天练习HTML、CSS，目标掌握前端全栈技能</li> <li><strong>电影：</strong>喜欢科幻片和剧情片，比如《星际穿越》《肖申克的救赎》</li> <li><strong>运动：</strong>每周跑步3次，每次5公里，保持良好的学习状态</li> <li><strong>阅读：</strong>阅读技术书籍和散文，拓宽知识面</li> </ul> <hr/> </div> <div> <h2>我的100天学习计划</h2> <ol> <li><strong>基础阶段（1-30天）：</strong>掌握HTML、CSS核心标签和样式，能独立搭建静态网页骨架并美化</li> <li><strong>进阶阶段（31-60天）：</strong>学习JavaScript核心语法，掌握DOM操作、事件处理等交互技能</li> <li><strong>实战阶段（61-100天）：</strong>学习Vue框架，完成2-3个企业级项目（比如电商首页、博客系统），整理简历准备面试</li> </ol> <hr/> </div> <div> <h2>联系我</h2> <p>如果想和我交流学习经验，可以通过以下方式联系：</p> <ul> <li>微信：zhangsan123（备注：前端学习）</li> <li>CSDN博客：<a href="https://blog.csdn.***/zhangsan" target="_blank">张三的前端学习博客</a></li> <li>GitHub：<a href="https://github.***/zhangsan" target="_blank">查看我的学习代码</a></li> </ul> </div> </body>
步骤3：添加图片并预览效果
-
找一张个人照片（或任意图片），重命名为“photo.jpg”，放在和“index.html”同一个文件夹中；
-
在VS Code中右键点击文件内容区域，选择“Open in Default Browser”，在浏览器中查看效果；
-
如果图片不显示，检查图片文件名、路径是否正确；如果链接无法跳转，检查href属性中的网址是否正确。
效果：一个结构完整的个人介绍页，包含头部、个人信息、兴趣爱好、学习计划和联系方式，所有标签都能正常显示功能，虽然没有美化，但骨架已经非常清晰。
四、第2天作业：完善个人介绍页并打卡（15分钟）
今天的作业是基于上面的实战案例，修改成自己的个人介绍页，目的是熟练掌握10个核心标签的用法，一定要亲手写，不要复制粘贴！
作业要求：
-
修改内容：将案例中的姓名、年龄、简介、兴趣爱好等信息，替换成自己的真实信息（如果不想用真实信息，可以编合理的内容）；
-
添加标签：在“联系我”区域添加一个邮箱链接，用<a>标签实现，格式为<a href="mailto:你的邮箱地址">我的邮箱</a>，点击后能自动打开邮件客户端；
-
调整图片：用自己的图片替换“photo.jpg”，并通过width属性调整图片大小，使其显示美观；
-
预览并截图：用浏览器预览网页，确保所有标签都能正常显示（标题、段落、列表、图片、链接都正常），截图发评论区打卡，附上自己的学习心得（比如“今天学会了图片和链接标签，踩了图片路径错误的坑，解决后很有成就感”）。
五、写在最后：HTML学习的3个关键技巧
今天咱们学会了10个核心HTML标签，还搭建了第一个完整的网页骨架，很多同学可能会觉得“原来写网页这么简单”，这就是实操的魅力——看似复杂的东西，亲手做一遍就懂了。
最后分享3个HTML学习的关键技巧，帮大家巩固学习效果：
-
技巧1：语义优先，样式后置。HTML的核心是“定义内容含义”，不是“控制样式”。比如标题用<h1>-<h6>，段落用<p>，不要为了让文本加粗就用<h1>，也不要用<br/>多次换行来实现段落间距——这些样式问题后续交给CSS解决。坚持语义化能让代码更易读、更利于搜索引擎收录，这是前端开发的基础素养。
-
技巧2：边写边查，拒绝死记。HTML标签有上百个，但常用的不足30个，新手不用死记硬背所有标签。写代码时忘记标签用法，直接查MDN Web Docs（https://developer.mozilla.org/zh-***/docs/Web/HTML），这是前端工程师公认的权威手册，每个标签都有详细的用法、案例和浏览器兼容性说明。查得多了，常用标签自然就记住了。
-
技巧3：多练多错，主动排错。新手写HTML时一定会遇到问题：图片不显示、链接跳不动、标签嵌套错误……这很正常！遇到问题不要慌，先按这3步排查：① 检查标签是否闭合（尤其是成对标签，比如<div>是否漏写</div>）；② 检查属性是否正确（比如src路径是否写错、href是否加了http://）；③ 用Chrome开发者工具“检查”元素（右键页面→检查），查看“Elements”面板，红色提示就是错误所在。排错能力是前端工程师的核心能力，越早练越好。
今天的内容就到这里，咱们用10个标签搭建了第一个网页骨架，这是非常大的进步！很多同学刚开始写代码会手抖、怕出错，但请记住：再厉害的工程师都是从“写错标签”开始的，实操越多，进步越快。
明天咱们要学前端的“装修师”——CSS，教大家给今天写的个人介绍页上色、调布局，让它从“毛坯房”变成“精装修”！记得完成今天的作业并在评论区打卡，有任何问题（比如标签报错、图片不显示）都可以留言，我会逐个回复。觉得内容有用的同学点个关注，跟着进度走不迷路，咱们明天见！
