HTML这门语言，说简单是真的简单，说烦也是真的烦。我见过不少新手看教程的时候觉得全会了，一上手写页面却完全不知道从哪开第一行；也见过有人写了半年标签，还是分不清 div 和 span 究竟怎么用、为什么导航栏死活对齐不了。这篇学习日记是DAY01，我不会按手册顺序把
到
1. 从文档骨架看起：doctype、head 与 body 到底在干什么
1.1 HTML 不是编程语言，而是内容的“骨架”
很多人有个误解，觉得HTML是编程语言，一上来就开始背“语法”。实际上HTML全称是 HyperText Markup Language，翻译过来是“超文本标记语言”——重点在“标记”，不在“逻辑”。它不负责计算，不负责判断，它干的事情只有一件：把内容按结构框起来，告诉浏览器“这里是一个大标题”、“这里是一个段落”、“这里可以点”。
用装修来类比会更直观：HTML是毛坯房的水泥墙和承重柱，决定了每个房间在哪、门开在哪；CSS是刷漆、铺地板和软装，负责好看；JS则是装电灯、门铃和智能锁，让房子“能动起来”。DAY01我们只做墙体，不碰油漆和电路。
1.2 每一份HTML页面都必须有的四件事
哪怕你写的是公司官网、个人博客还是购物车页面，最外层永远是这个样子：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>X同学的简历页</title> </head> <body> <!-- 用户能看见的内容全部写在 body 里 --> </body> </html>这里面的东西一个都不能少，我逐个说：
<!DOCTYPE html>：文档类型声明。它的作用是告诉浏览器“请用现代标准模式来渲染我”，而不是用老旧的怪癖模式。不写它，同一段CSS在不同浏览器里可能有完全不同的表现，这是很多“为什么我的样式中看不中用”的根本原因之一。<html lang="zh-CN">：语言声明。zh-CN告诉搜索引擎和浏览器这个页面主要使用简体中文，对SEO和无障碍阅读都有价值。<head>：给浏览器和搜索引擎看的信息区。里面的内容不会直接显示在网页上。<meta charset="UTF-8">：字符编码声明。不写这句，HTML文件里的中文在部分环境下会显示成乱码“锟斤拷”。我见过不止一个新手把这句话删了，然后整个项目的中文全部炸掉。<meta name="viewport" ...>：移动端适配的核心声明。它告诉手机浏览器“按设备的宽度来渲染页面”。少了它，页面在手机上会默认按桌面宽度显示，然后被自动缩小，字小到需要用放大镜。<title>：标签页上显示的文字，同时也是搜索引擎结果里的标题。很多人忽略它，但它提升点击量的效果远比你想象中明显。<body>：所有会在浏览器里被看到的内容，全部放在这里。
提示：如果你用的是Windows记事本，新建文件后记得在“另存为”时把编码选成UTF-8，否则哪怕HTML里写了
charset="UTF-8"也可能乱码。
1.3 编辑器怎么选，直接影响你写代码的手感
编辑器这件事我不想说得太绝对，但如果你是真的想入门前端，别用记事本折磨自己。起步阶段我用的是VS Code，装两个插件就够：一个用来实时预览HTML页面，另一个用来高亮括号和自动补齐标签。
VS Code里有个非常实用的技巧：输入英文感叹号!然后按Tab，会自动生成完整的HTML5骨架，就是上面那十几行基础代码。省去手打doctype和head的时间，能让你更专注在body——也就是真正的内容上。
不过自动生成只解决“框架记忆”的问题，不理解每一行意味着什么，迟早会踩坑。我会强制自己把骨架默写三遍，直到闭着眼能打出来为止。这件事很笨，但值得。
2. 最常用内容标签逐一上手：标题、段落、链接和图片
2.1 标题标签 h1 到 h6：层级比字号更重要
标题标签有六个级别：<h1>、<h2>、<h3>、<h4>、<h5>、<h6>。默认字体会从大到小，但你要记住：标签的意义是“表达层级”，而不是“控制字号”。想放大字号应该用CSS的font-size，而不是挑一个更大的h标签。
打个比方：一份论文里，<h1>是书名，<h2>是章节名，<h3>是章节下的小节，<h4>再往下是小节里的要点。如果你因为“觉得字太小”就把一个段落标题从<h3>换成<h1>，在视觉上可能看不出大问题，但在搜索引擎理解页面结构和屏幕阅读器朗读顺序时，页面大纲就会变得混乱。
实操中我的建议是：
- 一个页面只保留一个
<h1>，通常是网站名称或者文章主标题。 - 其他标题从
<h2>开始往下合理嵌套。 - 不要跳级，比如从
<h2>直接跳到<h4>，中间缺了<h3>会让文档结构缺失。
这里是我今天Demo里真实用到的一组标题：
<h1>X同学的个人主页</h1> <h2>我做过的一些小事</h2> <h3>一个周末写的记账小工具</h3>2.2 段落标签 p 与文本修饰标签：别用一堆 br 强行换行
<p>标签用于包裹一个段落。浏览器渲染时，段落之间默认会有垂直间距，所以文档读起来是有呼吸感的。
新手最常犯的手癖是把<p>当成“换行工具”，一个段落里塞几十个<br>。需要反思一下这样做的后果：<br>在HTML里的本意是“在诗歌或地址中必须断行的地方换行”，是一种无奈之下的强制折行，而不是排版的常规武器。行间距、段间距这些属于样式的范畴，应该交给CSS的margin和padding来处理。如果你在2024年还在用十个<br>来拉开两个元素的间距，页面一旦要做响应式适配，你就会知道有多痛。
段落内部需要强调文字的，用这几个标签：
<strong>：表示重要内容，默认加粗，语义上是“语气加重”。<em>：表示强调内容，默认斜体，语义上是“读音加重”。<span>：本身没有语义，通常配合class用来给部分文字做样式定制，比如把一段话里的某个词标成红色。
举个例子：
<p>我是一个<strong>前端学习日记</strong>系列的作者，目前正在<em>一步一步</em>补齐HTML基础。</p>这里<strong>和<em>不只是“加粗”和“斜体”，而是给了文字层次：搜索爬虫和读屏软件读到这里时，能感知哪些内容更重要。
2.3 链接标签 a：href 是核心，target 和 rel 是细节
链接是整个互联网存在的基础。没有<a>标签，网页和网页之间就是一座座孤岛。
写法：
<a href="https://example.com" target="_blank" rel="noopener noreferrer">访问示例网站</a>href：目标地址，可以是绝对地址（https://...），也可以是相对路径（./about.html）。target="_blank"：在新标签页打开。不加的话默认在当前页面跳转，会直接盖掉你的网站，影响访问深度。rel="noopener noreferrer"：配合target="_blank"一起用。它的作用是防止新打开的页面通过window.opener反向操作你的原网页。这既是安全策略，也是性能优化。
另有使用率极高但常被忽略的锚点功能。给页面里的某个区块加个id，再用href="#区段id"，点击后就能平滑滚动到对应位置：
<a href="#contact">跳到联系方式</a> <h2 id="contact">联系方式</h2>这是单页导航最基础的手艺，比用JS硬算滚动距离简单很多。
2.4 图片标签 img：alt 不是可以偷懒的属性
图片的写法：
<img src="images/avatar.png" alt="X同学的头像，一只戴眼镜的橘猫" width="200">几个重点：
src：图片地址，可以是网络URL，也可以是本地相对路径。alt：图片加载失败时显示的文字，同时也是读屏软件识别图片内容的关键。对SEO来说，搜索引擎看不到图片内容，主要靠alt判断图片含义。width/height：建议只设置其中一个，另一个会自动等比缩放，避免图片被拉伸变形。
写alt时最忌讳的事是偷懒写“图片”两个字。你要做的是用一句话说清楚“这张图里有什么”，比如“项目截图：登录页面顶部导航栏和注册表单”。如果图片只是纯装饰没有任何信息量，才能把alt写成空字符串alt=""，表示读屏软件可以直接跳过它。
2.5 列表标签：ul、ol、li 的语义比你想的更常用
列表有三种：无序列表<ul>、有序列表<ol>、自定义列表<dl>。应用场景远比“列举几条要点”更广，网站导航栏、商品属性展示、文章目录树，几乎所有成组的内容都能用列表结构来表示。
无序列表每一项前面默认有小圆点：
<ul> <li>前端：HTML / CSS / JavaScript</li> <li>后端：Node.js 基础</li> <li>工具：VS Code / Git</li> </ul>有序列表每一项前面默认是数字，适合步骤说明：
<ol> <li>填写基本资料</li> <li>上传头像</li> <li>点击提交按钮</li> </ol><li>只能放在<ul>或<ol>里面，这是嵌套规则，硬把<li>直接塞在<body>下属于语法错误，浏览器渲染时也会帮你“纠正”，但纠正后的DOM结构往往不是你想要的。
3. 属性入门：class/id 的边界与 HTML5 语义化标签带来的改变
3.1 class 与 id：一字之差，规则完全不同
属性是标签的“补充说明”。常见的有href、src、alt，但对新手来说最核心的是class和id，因为后面学CSS时全靠它们选中元素。
先说区别：
id：页面里必须唯一，一个id值只能在文档中出现一次。就像身份证号，一个人只有一个。它通常用于定位锚点或者给JS提供操作入口。class：可以多个元素共用，同一个元素也可以同时挂多个class，用空格分隔。就像衣服尺码，一批人共享同一个码。
实操中我给class起名时会用短横线分隔的语义化名，比如nav-item、article-title，不用驼峰navItem也不用下划线nav_item。这样在CSS里写选择器时读起来更顺，也符合社区主流习惯。
3.2 块级元素与内联元素：布局理解的第一道坎
HTML标签按默认的显示方式可以分为两大类：
| 类别 | 常见标签 | 默认行为 |
|---|---|---|
| 块级元素 | <div><p><h1>~<h6><ul><li><section> | 独占一行，宽度默认撑满父容器，后面内容另起一行 |
| 内联元素 | <span><a><img><strong><em> | 和相邻文字在同一行，宽度只占内容本身 |
这个区别非常关键，因为新手最常见的布局混乱就是忘记div是块级的：写两个div想在页面上左右并排，结果发现它们上下叠着，然后开始怀疑CSS写错了。其实没写错，是块级元素“默认独占一行”的规则在起作用，要让它俩并排需要借助CSS的flex或grid。
<div>是纯粹的块级容器，用来“圈地”，本身没有任何语义；<span>是纯粹的内联容器，用来圈文字。写页面时尽量少用带语义倾向的标签来做纯布局，这句话等讲到语义化你就明白了。
3.3 语义化标签：header、main、section 解决了什么问题
HTML5之前，页面布局基本是div走天下，一个页面写出来乌泱泱全是<div class="header">、<div class="footer">。阅读性和可维护性都很差。HTML5推出了一套语义化标签，让结构“自己会说话”：
<body> <header>网站顶栏，放LOGO和导航</header> <nav>主导航菜单</nav> <main> <article> <h2>文章标题</h2> <p>文章内容</p> </article> <aside>侧边栏：相关阅读、广告位</aside> </main> <footer>版权信息和底部链接</footer> </body>这套标签的意义在于“看到名字就知道它放什么内容”，编写时不用再看class。而且搜索引擎爬虫和读屏软件对这种结构的理解远超一坨div。我写页面时从这套结构出发，语义明确，样式又好挂。
需要在<article>和<section>之间做选择的，记住一句口诀：article是“一篇完整内容”，比如一篇博客、一条论坛帖子；section是“内容分区”，它更接近一个章节容器，通常内部带有标题。如果一个区块可以被独立订阅或转载，用article；如果只是页面内部的某个分区，用section。
3.4 注释的作用远比你想的大：给未来的自己留张纸条
HTML注释写在<!-- 注释内容 -->里面。浏览器不会渲染它，但它对维护项目的人来说太重要了。
我见过有的同学写页面不加注释，两周后回来改自己写的代码，看到一排排标签完全不记得当初为什么要这么嵌套。反过来，注释写得太啰嗦也会影响阅读体验。我的习惯是：结构层次的边界加注释，比如“header开始”“main结束”；某些因业务限制不得不采用的奇怪写法加了注释说明原因，防止后人误改。
4. 写页面时最常踩的五个坑与检查习惯
4.1 标签不闭合：浏览器不会报错，但页面会幽灵式错乱
HTML不像JavaScript，语法错误往往会直接在控制台报出来。标签漏写闭合时，浏览器会尝试“智能补全”，但补全结果常常出乎意料。
举一个我实际遇到过的例子，某同学的列表代码是这样的：
<ul> <li>第一项 <li>第二项 </ul>因为漏写了</li>，浏览器自动补全时把第二个<li>嵌套进了第一个里面，导致后续样式怎么选都选不中第二个列表项。这种“幽灵式错乱”最难排查，因为页面上看不太出来，CSS一问就懵。
我的自查办法是写完一个区块后，立刻在编辑器里把外标签折叠起来，看内部层级是否整齐；或者直接用VS Code的自动格式化功能，缩进一乱马上就能看出来。标签闭合这件事，是最不起眼但最值得较真的基本功。
4.2 属性值不引引号、拼写错误，问题基本都来自这两个
HTML属性值建议统一使用双引号。虽然HTML规范允许某些情况下省略引号，但一旦属性值里出现空格，省略引号就会出问题：
<!-- 错误示范 --> <img src=images/avatar.png alt=一只戴眼镜的橘猫> <!-- 正确示范 --> <img src="images/avatar.png" alt="一只戴眼镜的橘猫">属性名的拼写错误则更隐蔽。比如src写成了scr，图片静默加载失败；href写成了herf，链接点击毫无反应。这类错误浏览器同样不会给红色报错提示，唯一验证方法是打开浏览器的开发者工具，在Elements面板里检查元素属性是否有红色波浪线。养成写完一个标签就打开DevTools看一眼的习惯，能救回大量时间。
4.3 中文乱码：九成是编码声明缺失或文件保存编码不对
中文显示成“锟斤拷”或者“秦”时，先查两件事：
- HTML的
<head>里有没有<meta charset="UTF-8">。 - 编辑器右下角保存文件时，编码是不是UTF-8。
我自己早期写第一个HTML文件时，在网页里输入“我的第一个网页”，保存后一刷新全变成了乱码。后来才发现是记事本默认保存成了ANSI编码，而页面声明的是UTF-8，两边对不上自然就乱了。现在统一用VS Code，默认UTF-8，再没出过这类问题。
4.4 相对路径与绝对路径的混淆：图片不显示的高频原因
写<img>标签时，负责图片的src有两种路径写法：
- 绝对路径：从根目录或完整网址开始，比如
/images/banner.png、https://example.com/images/banner.png。 - 相对路径：相对于当前文件的路径，比如
./images/banner.png（当前目录下的images文件夹）、../images/banner.png（上一级目录下的images文件夹）。
新手常犯的错是：在根目录下的index.html里写images/banner.png，明明文件在html文件夹里，图片却引用到项目外了。页面刷新后图片区域是一个裂图图标，开发者工具却能正常打开这个地址。
我的建议是：所有图片路径统一用相对路径，并且一定搞清楚“当前文件在哪里”、“目标文件相对于当前文件在哪一层”。打开DevTools的Network面板，如果图片资源状态是404，就说明路径没对，一步步顺着报错地址反推就行了。
4.5 嵌套规则错乱：p 标签里套 div，浏览器直接拆给你看
HTML对嵌套有严格规则：块级元素不能随便往内联元素里塞，某些标签有固定的子元素要求。最典型的是<p>标签，它里面不能套<div>、<h1>这类块级元素。
我以前“想当然”地写过这样的代码：
<p> 这是一个段落 <div>我是强行塞进来的块级内容</div> </p>浏览器处理的时候会直接把<div>从<p>里拆出来，渲染成两个并列的块，最终页面结构和HTML源代码结构不一致，稍后写CSS时又会产生迷惑。正确的做法是：段落纯文本或行内内容用<p>包裹，如果需要在段落下方放一个独立区块，就关闭</p>后再写<div>。
这类嵌套规则不用死记，只需要养成一个习惯：写完一个标签，在DevTools的Elements面板里对照一下浏览器实际解析出来的结构，和源码是否一致。看多了，哪些默认拆开、哪些正常嵌套，心里自然有数。
写完这个Demo，我自己最大的感受是：HTML入门真的不难，但每一项错误都极其隐蔽，页面不报错、不崩溃，只是静悄悄地“不对”。解决的办法不是更聪明的脑子，而是更勤快的手——多写、多开DevTools看结构、多问自己“浏览器到底把这个标签解析成了什么”。如果你今天跟着把这篇文章里的标签都亲手敲了一遍，你已经比那些只看不练的同学领先一大截了。下一步我会在DAY02把CSS接进来，让这个个人主页真正有点“设计感”。到时候见。
