1、HTML入门：从零开始认识前端三剑客之首
大家好，我是你们的前端引路人。今天咱们聊聊HTML——这个听起来有点神秘，其实特别简单的家伙。
说实话，我刚开始学前端的时候，也觉得HTML不就是一堆标签嘛，有啥好学的？后来才发现，越是基础的东西，越容易踩坑。今天这一章，咱们就把HTML的底裤扒干净。
1.1 HTML到底是什么？
HTML的全称是HyperText Markup Language，中文叫「超文本标记语言」。别被这个名字吓到，说白了，它就是一套「标签系统」。
你想想看，我们平时写文章，会用标题、段落、列表来组织内容。HTML做的就是同样的事——只不过是在网页上。比如：
<h1>这是一级标题</h1>
<p>这是一个段落。</p>
<ul>
<li>列表项1</li>
<li>列表项2</li>
</ul>看到没？<h1>就是告诉浏览器：「嘿，这是个标题，给我放大加粗！」<p>就是说：「这是普通文字，正常显示就行。」
核心理解：HTML不是编程语言，它是「标记语言」。它不负责逻辑判断，只负责告诉浏览器「这是什么内容」。
我在项目中遇到过不少新人，上来就问：「HTML能不能做计算器？」嗯，计算器需要JavaScript，HTML只管「长什么样、有什么内容」。
1.2 HTML发展史：从1.0到5.0
HTML的历史，其实就是互联网的进化史。我简单梳理一下，你感受下这个节奏：
| 版本 | 发布时间 | 主要特点 |
|---|---|---|
| HTML 1.0 | 1993年 | 最基础的标签，连表格都没有 |
| HTML 2.0 | 1995年 | 标准化，加入表单 |
| HTML 3.2 | 1997年 | 加入表格、脚本支持 |
| HTML 4.01 | 1999年 | 成熟稳定，CSS分离 |
| XHTML 1.0 | 2000年 | 更严格的语法要求 |
| HTML5 | 2014年 | 多媒体、语义化、API大爆发 |
我个人习惯把HTML5之前称为「老古董时代」。那时候做网页，想放个视频得用Flash插件，烦得很。HTML5一出，直接<video>标签搞定，爽快多了。
1.3 HTML5新特性：为什么它这么牛？
HTML5不是简单的版本升级，它是一次「革命」。我挑几个最常用的说说：
- 语义化标签：
<header>、<nav>、<article>、<footer>——以前全用<div>，现在标签自己就能说明白「我是谁」。 - 多媒体支持：
<audio>和<video>，不用再装插件了。 - Canvas绘图：直接在网页上画图、做游戏，性能还不错。
- 本地存储：localStorage和sessionStorage，数据存浏览器里，不用每次都问服务器。
- 表单增强：新增了日期、颜色、邮箱等输入类型，验证也方便了。
我的建议：学HTML5，优先掌握语义化标签和表单新特性。这两个在日常开发中用到最多。Canvas和本地存储可以后面再深入。
为什么会这样？因为语义化标签不仅让代码更清晰，对搜索引擎也友好。我曾经优化过一个老项目，把满屏的<div>换成语义标签后，SEO排名直接涨了。
1.4 第一个HTML页面：动手吧！
光说不练假把式。咱们来写第一个HTML页面。打开你的记事本或VS Code，输入以下代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个网页</title>
</head>
<body>
<h1>你好，世界！</h1>
<p>这是我的第一个HTML页面。</p>
</body>
</html>保存为 index.html，然后用浏览器打开。看到「你好，世界！」了吗？恭喜，你已经迈出了第一步。
注意：文件名不要用中文，不要有空格。我以前吃过这个亏，文件名写成「我的网页.html」，结果在某些服务器上死活打不开。老老实实用英文小写加连字符，比如 my-first-page.html。
这段代码里，<!DOCTYPE html>是告诉浏览器「我用的是HTML5」。没有这行，浏览器可能会用「怪异模式」渲染，页面显示会出问题。嗯，这里要注意，很多新手会漏掉。
1.5 浏览器与开发者工具：你的调试利器
写HTML，浏览器就是你的「画布」。但光看页面还不够，你得学会用开发者工具（DevTools）。
怎么打开？
- Chrome/Edge：按
F12或Ctrl+Shift+I - Firefox：同样
F12 - Mac：
Cmd+Option+I
打开后，你会看到一堆面板。我重点说几个常用的：
- Elements（元素）：查看和修改HTML结构。你可以直接在面板里改文字、改样式，页面会实时更新。调试布局时特别好用。
- Console（控制台）：看错误信息、打印日志。JavaScript的
console.log()输出就在这里。 - Network（网络）：看页面加载了哪些资源、花了多长时间。页面加载慢？来这里查。
- Sources（源代码）：调试JavaScript代码，设置断点。
我的习惯：写HTML时，我会一直开着Elements面板。哪里不对，直接点选元素看样式。比来回切编辑器快多了。
我曾经遇到一个bug，页面在Chrome里正常，在Safari里就变形。打开开发者工具一查，发现是某个CSS属性不支持。所以，多浏览器测试真的很重要。
小结
这一章咱们把HTML的底子打好了。你知道了：
- HTML是标记语言，不是编程语言
- 它从1.0发展到5.0，越来越强大
- HTML5带来了语义化、多媒体等新特性
- 写第一个页面其实很简单
- 开发者工具是你的好帮手
下一章，咱们会深入HTML的标签世界。到时候你会发现，原来网页就是「标签的堆叠」——但怎么堆得漂亮、堆得合理，那可就有讲究了。
记住：动手写，比看十遍都管用。现在就去打开编辑器，写一个你自己的页面吧！
公众号:蓝海资料掘金营，微信deep3321