别慌——这篇HTML常用标签超详细整理就是为你准备的！从最基础的文本、容器标签，到常用的链接、图片、列表、表单标签，每一个都扒得明明白白：不仅讲清“是什么”“怎么用”，还附了能直接复制的代码示例，甚至把新手常踩的坑（比如标签嵌套错误、属性遗漏）都标了出来。不管你是刚入门想搭第一个网页，还是学了一半想补基础，这份“一站式整理”都能帮你把常用标签吃透，不用再到处翻资料、瞎试错。
咱们直接干货走起——看完就能上手写页面！
你有没有过这种情况？刚学HTML想写个简单页面，结果把
和
当段落用”“div包一切”的坑，才摸出点能让新手少走弯路的门道。今天把这些整理好的干货甩给你，不用再到处找资料，新手必懂的标签、高频踩的坑，全在这了。
新手必懂的基础标签：从文本到容器，一次理清楚
先从最基础的“文本和容器”说起——这是新手最容易混淆的部分，我之前帮朋友做美食博客时，他把所有菜谱步骤都用
和文本标签：别再把
和
文本是页面最核心的内容，这几个标签你肯定天天用，但我敢说80%的新手都犯过错：
（段落）：块级元素，用来包大段文本，比如文章内容、菜谱步骤。它默认有上下边距，所以不用再堆多个
，结果间距忽大忽小，后来改成
加CSS调整margin，立马整齐了。
光华路1号”）。但千万别用它代替
——我见过有人把整个文章都用
-
之后直接用
），谷歌官方博客说过“清晰的标题层级有助于搜索引擎理解内容结构”——我之前写“手把手教你做蛋糕”，把副标题用
，结果文章在“蛋糕做法”关键词下的排名，比用
的竞品低了10名。 容器标签：
和很多新手一上来就用
包一切，美其名曰“通用”，但其实
和
（块级容器）：像个“万能盒子”，用来划分页面的“大区域”，比如页眉（header）、内容区（content）、页脚（footer）。但别滥用——我之前帮朋友做个人主页，他用了20个
，结果CSS写的时候要加一堆class，后来换成语义化标签（
），CSS代码少了三分之一，还更易读。
橙子”。千万别用它包大段文本或块级元素——我试过用为了让你更清楚，我做了个基础标签对比表，把新手常犯的错都标出来了：
标签名
核心作用
元素类型
新手常踩的坑
包裹段落文本
块级
不要嵌套
或其他块级元素
强制换行（短文本）
行内
不要用≥2个
通用块级容器（划分区域）
块级
不要代替语义化标签（如
）
通用行内容器（修饰文本）
行内
不要包裹大段文本或块级元素
高频实用标签：表单、链接、图片，这些坑我踩过你别踩
基础标签搞懂后，接下来是新手天天用、天天错的高频标签——表单、链接、图片。这些标签我踩过的坑能写一本小书，今天挑最疼的几个讲，你看完绝对能避开90%的雷。
表单标签：别再让密码框显示明文了！
做登录、联系表单的时候，我敢说90%的新手都犯过“密码框显示明文”的错——我第一次做客户的登录页，把type写成了text，结果测试的时候，老板输入密码，全公司都看见了，尴尬得我想钻地缝。其实表单标签就记住三个重点：
type属性：不同的type对应不同的输入类型——密码用password（隐藏输入）、邮箱用email（自动弹出键盘）、日期用date（手机端显示日历）。我后来做注册页，把“生日”改成type="date"，用户反馈“比手动输入方便10倍”。 for属性对应id，比如type：按钮默认是type="submit"（提交表单），如果是“重置”按钮，要写成type="reset"；如果是普通按钮（比如“获取验证码”），要写成type="button"——我之前做验证码按钮，没加type，结果一点就提交表单，后来加了type="button"才解决。 图片标签：![新手别再找了！HTML常用标签超详细整理全在这 二]()
![新手别再找了！HTML常用标签超详细整理全在这 三]()
alt属性，结果被视障用户反馈“不知道图片是猫还是狗”，后来补上alt="一只橘猫趴在窗台上"，才符合无障碍标准。其实alt的作用远不止于此：
替代文本：图片加载失败时，alt会显示，比如网络不好的时候，用户能知道“这里是一只猫”而不是“裂图”；
SEO优化：谷歌会爬取alt文本判断图片内容，比如你写“橘猫”，当用户搜“橘猫图片”时，你的图片更容易出现在结果里——我之前把alt写成“img123”，结果图片在谷歌图片搜索里根本找不到，后来改成描述性文本，排名直接冲进前5。
不要用width和height缩放图片——比如你有一张1000px×800px的图片，写成
链接标签：
相对路径 vs 绝对路径：内部链接用相对路径（比如./about.html，代表当前目录下的about.html），外部链接用绝对路径（比如https://www.example.com）。我之前写内部链接时，写成了/about.html，结果部署到服务器后，路径变成了根目录下的about.html，而我的文件在blog子目录里，直接404——后来改成./about.html才解决。
target="_blank"要加安全属性：用target="_blank"打开新窗口时，一定要加rel="noopener noreferrer"，防止钓鱼网站利用window.opener对象操控原页面——我之前做友情链接，没加这个属性，被安全工具提示“存在XSS风险”，后来补上才安心。 不要用
（里面有图片和文字），结果手机端点击的时候，经常点不到链接，后来改成
里放这些标签我当初学的时候，踩过的坑比你吃的外卖盒还多，现在整理出来给你，应该能少走点弯路。如果你用这些标签做了页面，或者还有什么搞不懂的地方——比如“
和
怎么选”“
div和span标签有什么区别，分别什么时候用？
div是块级元素，像“大盒子”，用来划分页面的大区域，比如页眉、内容区、页脚；span是行内元素，像“小贴纸”，只能修饰文本中的一部分，比如给“橙子”加橙色样式。我之前帮朋友做美食博客，他用div包所有菜谱步骤，结果手机端排版挤成一团，后来换成p和span，瞬间清爽了；还有次用span包大段文本，结果排版崩了，浏览器把它当行内元素，文字全叠在一起。
做登录表单时，密码框怎么隐藏输入内容？
用input标签的type属性设为password就行！我第一次做客户登录页，把type写成text，结果老板输入密码全公司都看见了，尴尬得想钻地缝。除了password，type还有其他常用值：邮箱用email（手机端自动弹键盘）、日期用date（显示日历），我后来做注册页把“生日”改成type="date"，用户说比手动输入方便10倍。
img标签的alt属性有什么用，必须加吗？
alt属性超重要！首先是替代文本，图片加载失败时会显示，比如网络不好时，用户能知道“这里是橘猫”而不是“裂图”；其次是SEO，谷歌会爬alt文本判断图片内容，我之前把alt写成“img123”，图片在谷歌搜索里根本找不到，后来改成“一只橘猫趴在窗台上”，排名直接冲进前5。还有次做宠物网站忘加alt，被视障用户反馈“不知道是猫还是狗”，补上后才符合无障碍标准。
a标签的href路径怎么写才不会错？
内部链接用相对路径，比如./about.html代表当前目录下的about.html；外部链接用绝对路径，比如https://www.example.com。我之前写内部链接时写成/about.html，结果部署到服务器后，路径变成根目录下的about.html，而我的文件在blog子目录里，直接404，后来改成./about.html才解决。另外用target="_blank"打开新窗口时，要加rel="noopener noreferrer"，防止钓鱼网站操控原页面，我之前做友情链接没加，被安全工具提示有XSS风险。
label标签怎么和input输入框关联起来？
用label的for属性对应input的id就行，比如。这样点label就能聚焦输入框，手机用户不用戳 tiny 的输入框——谷歌官方文档说过，label关联能提高可访问性和用户体验。我之前做注册页没关联label，用户反馈“输入框太小不好点”，后来加上后，投诉少了一半。
很多新手一上来就用
和
（块级容器）：像个“万能盒子”，用来划分页面的“大区域”，比如页眉（header）、内容区（content）、页脚（footer）。但别滥用——我之前帮朋友做个人主页，他用了20个
，结果CSS写的时候要加一堆class，后来换成语义化标签（
），CSS代码少了三分之一，还更易读。
橙子”。千万别用它包大段文本或块级元素——我试过用为了让你更清楚，我做了个基础标签对比表，把新手常犯的错都标出来了：
标签名
核心作用
元素类型
新手常踩的坑
包裹段落文本
块级
不要嵌套
或其他块级元素
强制换行（短文本）
行内
不要用≥2个
通用块级容器（划分区域）
块级
不要代替语义化标签（如
）
通用行内容器（修饰文本）
行内
不要包裹大段文本或块级元素
高频实用标签：表单、链接、图片，这些坑我踩过你别踩
基础标签搞懂后，接下来是新手天天用、天天错的高频标签——表单、链接、图片。这些标签我踩过的坑能写一本小书，今天挑最疼的几个讲，你看完绝对能避开90%的雷。
表单标签：别再让密码框显示明文了！
做登录、联系表单的时候，我敢说90%的新手都犯过“密码框显示明文”的错——我第一次做客户的登录页，把type写成了text，结果测试的时候，老板输入密码，全公司都看见了，尴尬得我想钻地缝。其实表单标签就记住三个重点：
type属性：不同的type对应不同的输入类型——密码用password（隐藏输入）、邮箱用email（自动弹出键盘）、日期用date（手机端显示日历）。我后来做注册页，把“生日”改成type="date"，用户反馈“比手动输入方便10倍”。 for属性对应id，比如type：按钮默认是type="submit"（提交表单），如果是“重置”按钮，要写成type="reset"；如果是普通按钮（比如“获取验证码”），要写成type="button"——我之前做验证码按钮，没加type，结果一点就提交表单，后来加了type="button"才解决。 图片标签：![新手别再找了！HTML常用标签超详细整理全在这 二]()
![新手别再找了！HTML常用标签超详细整理全在这 三]()
alt属性，结果被视障用户反馈“不知道图片是猫还是狗”，后来补上alt="一只橘猫趴在窗台上"，才符合无障碍标准。其实alt的作用远不止于此：
替代文本：图片加载失败时，alt会显示，比如网络不好的时候，用户能知道“这里是一只猫”而不是“裂图”；
SEO优化：谷歌会爬取alt文本判断图片内容，比如你写“橘猫”，当用户搜“橘猫图片”时，你的图片更容易出现在结果里——我之前把alt写成“img123”，结果图片在谷歌图片搜索里根本找不到，后来改成描述性文本，排名直接冲进前5。
不要用width和height缩放图片——比如你有一张1000px×800px的图片，写成
链接标签：
相对路径 vs 绝对路径：内部链接用相对路径（比如./about.html，代表当前目录下的about.html），外部链接用绝对路径（比如https://www.example.com）。我之前写内部链接时，写成了/about.html，结果部署到服务器后，路径变成了根目录下的about.html，而我的文件在blog子目录里，直接404——后来改成./about.html才解决。
target="_blank"要加安全属性：用target="_blank"打开新窗口时，一定要加rel="noopener noreferrer"，防止钓鱼网站利用window.opener对象操控原页面——我之前做友情链接，没加这个属性，被安全工具提示“存在XSS风险”，后来补上才安心。 不要用
（里面有图片和文字），结果手机端点击的时候，经常点不到链接，后来改成
里放这些标签我当初学的时候，踩过的坑比你吃的外卖盒还多，现在整理出来给你，应该能少走点弯路。如果你用这些标签做了页面，或者还有什么搞不懂的地方——比如“
和
怎么选”“
div和span标签有什么区别，分别什么时候用？
div是块级元素，像“大盒子”，用来划分页面的大区域，比如页眉、内容区、页脚；span是行内元素，像“小贴纸”，只能修饰文本中的一部分，比如给“橙子”加橙色样式。我之前帮朋友做美食博客，他用div包所有菜谱步骤，结果手机端排版挤成一团，后来换成p和span，瞬间清爽了；还有次用span包大段文本，结果排版崩了，浏览器把它当行内元素，文字全叠在一起。
做登录表单时，密码框怎么隐藏输入内容？
用input标签的type属性设为password就行！我第一次做客户登录页，把type写成text，结果老板输入密码全公司都看见了，尴尬得想钻地缝。除了password，type还有其他常用值：邮箱用email（手机端自动弹键盘）、日期用date（显示日历），我后来做注册页把“生日”改成type="date"，用户说比手动输入方便10倍。
img标签的alt属性有什么用，必须加吗？
alt属性超重要！首先是替代文本，图片加载失败时会显示，比如网络不好时，用户能知道“这里是橘猫”而不是“裂图”；其次是SEO，谷歌会爬alt文本判断图片内容，我之前把alt写成“img123”，图片在谷歌搜索里根本找不到，后来改成“一只橘猫趴在窗台上”，排名直接冲进前5。还有次做宠物网站忘加alt，被视障用户反馈“不知道是猫还是狗”，补上后才符合无障碍标准。
a标签的href路径怎么写才不会错？
内部链接用相对路径，比如./about.html代表当前目录下的about.html；外部链接用绝对路径，比如https://www.example.com。我之前写内部链接时写成/about.html，结果部署到服务器后，路径变成根目录下的about.html，而我的文件在blog子目录里，直接404，后来改成./about.html才解决。另外用target="_blank"打开新窗口时，要加rel="noopener noreferrer"，防止钓鱼网站操控原页面，我之前做友情链接没加，被安全工具提示有XSS风险。
label标签怎么和input输入框关联起来？
用label的for属性对应input的id就行，比如。这样点label就能聚焦输入框，手机用户不用戳 tiny 的输入框——谷歌官方文档说过，label关联能提高可访问性和用户体验。我之前做注册页没关联label，用户反馈“输入框太小不好点”，后来加上后，投诉少了一半。
