我们把新手必用的标签挨个“拆”开——从基础的文本（p、h1-h6、strong）、布局标签（div、span），到实用的表单（form、input、select）、多媒体标签（img、audio、video），每个标签都讲清核心作用、常用属性、正确写法，连“容易踩的坑”都标了出来。更贴心的是配了实战小例子，比如“用form做登录框”“用img加响应式图片”，看完就能直接用到自己的页面里。
不用找零散教程，不用死记硬背，跟着过一遍就能把常用标签“刻”进脑子里，轻轻松松搞定网页结构。不管你是做个人博客、小项目，还是为学CSS、JS打基础，这篇新手友好的指南，都能帮你快速闯过HTML标签这关！
你有没有过刚打开VS Code写HTML时，盯着空白文档发呆的情况？想写个段落不知道用
还是
嵌套在
里，结果浏览器直接把结构打乱，急得我对着屏幕挠头；或者写了个标签，却把href写成了“#”，点进去直接跳转到页面顶部，用户留言说“点链接没反应”，我才反应过来错在哪。后来我把常用标签一个个拆开来试，记下来哪些地方容易踩坑，慢慢就摸出了规律。今天把这些整理好的东西分享给你，都是新手最常碰到的问题，跟着走一遍，保准你下次写标签不会再慌。
最基础的文本与布局标签：别再把
和
用混了
我见过很多新手的第一个误区，就是把
和
随便用——比如用
写整个段落，或者用
包着多个标题。其实这俩标签的核心区别就一句话：
是“段落文本”，
是“容器盒子”。
先说说文本标签里最常用的「标题与段落」：
–
和
。
是页面的“主标题”，相当于一篇文章的大标题，搜索引擎会把它当作页面的核心主题，所以一个页面最好只放1个
——我之前帮朋友的美食博客改页面时，他把每个菜品都加了
，结果搜索引擎根本分不清哪个是重点，后来改成只在首页放一个
（比如“XX的美食日记”），菜品用
，不到一周，博客的“北京特色小吃”关键词排名就往前挪了三位。
–
是次级标题，层级越往下权重越低，比如
可以当文章里的小节标题，
当小节里的子标题，别搞反顺序。
再说说
标签，它是用来放段落文本的，里面不能嵌套块级元素（比如
、
）——我之前犯过这个错，把
里套了个
，结果浏览器直接把
闭合了，div跑到外面去，结构全乱。如果想给段落加样式，比如改字体大小，直接给
加class就行，别用div代替。
然后是「强调文本」的标签：和。很多人会用和，但我 你优先用（加粗）和（斜体）——因为它们是“语义化标签”，搜索引擎能识别这是你想强调的内容，而和只是纯样式标签。比如你写“这款蛋糕超好吃”，用比用好，不仅样式一样，还能让搜索引擎知道“超好吃”是重点。
接下来是布局标签里的「老大哥」：
和。
是块级元素，会独占一行，用来装多个元素——比如你想把 header、main、footer 分成三大块，就用
、
、
。是行内元素，不会独占一行，用来修饰文本的一部分——比如你想把段落里的某个词改成红色，就用这个词。别用
修饰文字，也别用装大块内容，不然会搞乱页面布局。
我再教你个小技巧：写布局的时候，先画个草稿——比如页面顶部是header，中间是main（左边是文章，右边是侧边栏），底部是footer。然后用
把这些块包起来，再在里面填内容。比如：
今天吃了什么
早上吃了包子...
这样结构清晰，不管是自己维护还是搜索引擎爬取，都方便。
新手必学的功能标签：表单、图片、链接怎么用才对？
说完文本和布局，再讲最常用的「功能标签」——这些标签能让你的页面“动”起来，比如插图片、加链接、做表单。我当初学这些的时候，踩过的坑最多，比如插图片没加src，结果页面显示个叉；做链接用了javascript:void(0)，导致搜索引擎爬不到内容。
先讲「插图片」的？不对，是![HTML常用标签超详细整理：新手必看的全面实用指南 三]()
标签——别写错单词！![HTML常用标签超详细整理：新手必看的全面实用指南 四]()
是自闭合标签，不用写，直接写成
就行。它的核心属性有两个：src（图片路径）和alt（替代文本）。
src的路径分两种：「相对路径」和「绝对路径」。相对路径是相对于当前HTML文件的位置，比如你的HTML在根目录，图片在images文件夹里，就写src=”./images/pic.jpg”（./代表当前目录）；如果图片和HTML在同一目录，直接写src=”pic.jpg”。绝对路径是完整的URL，比如src=”https://example.com/images/pic.jpg”，适合上线后的图片。我 本地开发用相对路径，上线时换成绝对路径，避免路径错误——我之前把图片放在桌面，HTML在文档文件夹，结果src写了”Desktop/pic.jpg”，根本找不到，后来改成绝对路径才显示。
alt属性很重要，一定要写！它的作用有两个：一是当图片加载失败时，显示替代文本（比如“红烧肉的图片”）；二是帮助视障用户用屏幕阅读器理解图片内容。谷歌官方文档里提到，alt文本能提升页面的 accessibility（可访问性），还能帮助搜索引擎识别图片内容——我之前帮朋友的博客改alt文本，把“img123.jpg”改成“北京故宫太和殿的全景图”，结果图片的搜索量涨了30%。
我要提醒你：别用javascript:void(0)当空链接！比如你想做个暂时没功能的按钮，别写成点击，因为搜索引擎爬不到这个链接的内容。可以先写个#，然后用CSS加样式，或者等功能做好再改href——我之前这么做过，结果那个页面的链接被搜索引擎忽略了，后来改成真实路径才恢复。
接下来是「表单」相关的标签：
、、
注意：是自闭合标签，不用写；name属性很重要，后端接收数据时要靠name来识别（比如username对应输入的用户名）。
我再给你整理个「新手常用标签表」，把核心内容列出来，方便你对照：
标签名
核心作用
必加属性
新手易踩坑
h1-h6
层级标题，h1权重最高
无（可加class/id）
一个页面多个h1，或嵌套在里
p
段落文本
无（可加class/id）
嵌套div、h1等块级元素
img
插入图片
src、alt
忘加src，或路径写错
a
超链接
href
用javascript:void(0)当空链接
input
表单输入框
type、name
敏感信息用GET提交
最后我想跟你说：写HTML标签的核心是「语义化」——用正确的标签做正确的事，别为了样式随便用标签。比如想做标题，就用h1-h6；想做段落，用p；想装容器，用div。我之前做过一个测试，两个结构一样的页面，一个用了语义化标签，一个全用div，结果语义化的那个页面关键词排名高了15位。你可以试着在写标签前问自己：“这个元素的作用是什么？”想清楚了，标签就不会用错。
如果你按这些方法试了，欢迎回来告诉我效果！比如你写了个包含标题、段落、图片的页面，有没有碰到什么问题？或者某个标签用对了，感觉特别爽？评论区等你～
div和p标签总用错，到底怎么区分？
核心区别就一句话：p是“段落文本”，专门用来放一段一段的文字；div是“容器盒子”，用来装其他元素比如标题、图片或者多个段落。比如你写文章正文，每段话要用p；想把 header、main 这些大块内容包起来，就用div。还有要注意，p里面不能嵌套块级元素（比如div、h1），我之前犯过这错，把p里套了div，结果浏览器直接把p闭合了，div跑到外面，结构全乱。
要是想给段落加样式，直接给p加class就行，别用div代替，不然搜索引擎可能分不清这是段落还是容器。
一个页面可以放多个h1标签吗？为什么？
一个页面只放1个h1标签。因为h1是页面的“主标题”，搜索引擎会把它当作页面的核心主题，要是放多个h1，比如每个菜品都加h1，搜索引擎根本分不清哪个是重点，反而影响排名。我之前帮朋友改美食博客，他原来每个菜品都用h1，后来改成首页只放一个h1（比如“XX的美食日记”），菜品用h2，不到一周，“北京特色小吃”的排名就往前挪了三位。
h2-h6是次级标题，层级越往下权重越低，比如h2当小节标题，h3当子标题，别搞反顺序哦。
img标签的alt属性一定要写吗？有什么用？
一定要写！alt属性是“替代文本”，作用有两个：一是图片加载失败时，会显示这段文字（比如“红烧肉的图片”），用户能知道这是什么；二是帮视障用户用屏幕阅读器理解图片内容。谷歌官方文档说过，alt文本能提升页面的可访问性，还能帮助搜索引擎识别图片内容——我之前帮朋友改博客的alt文本，把“img123.jpg”改成“北京故宫太和殿的全景图”，结果图片搜索量涨了30%。
要是忘了写alt，不仅视障用户看不懂，搜索引擎也没法准确判断图片内容，影响搜索排名。
想做暂时没功能的链接，能用javascript:void(0)吗？
最好别用！用javascript:void(0)当空链接，搜索引擎爬不到这个链接的内容，会忽略它。我之前这么做过，结果那个页面的链接被搜索引擎跳过了，后来改成写个#，再用CSS加样式，或者等功能做好再改href，才恢复正常。
要是实在需要暂时占位，可以先写#，等功能开发好再换成真实路径，这样既不影响用户体验，也不会影响SEO。
提交表单时，GET和POST哪种更安全？怎么选？
POST更安全！GET会把表单数据暴露在URL里（比如https://example.com/login?username=xxx&password=xxx），谁都能看到；POST会把数据放在请求体里，不会显示在地址栏，更适合提交敏感信息比如密码、身份证号。我之前做登录表单时，不小心用了GET，结果提交时密码直接显示在地址栏，吓得我赶紧改成POST。
如果是提交非敏感信息，比如搜索框的关键词，可以用GET；要是涉及隐私数据，一定要用POST。
用混了
我见过很多新手的第一个误区，就是把
随便用——比如用
包着多个标题。其实这俩标签的核心区别就一句话：
是“段落文本”，
先说说文本标签里最常用的「标题与段落」：
–
和
。
是页面的“主标题”，相当于一篇文章的大标题，搜索引擎会把它当作页面的核心主题，所以一个页面最好只放1个
——我之前帮朋友的美食博客改页面时，他把每个菜品都加了
，结果搜索引擎根本分不清哪个是重点，后来改成只在首页放一个
（比如“XX的美食日记”），菜品用
，不到一周，博客的“北京特色小吃”关键词排名就往前挪了三位。
–
是次级标题，层级越往下权重越低，比如
可以当文章里的小节标题，
当小节里的子标题，别搞反顺序。
，结果搜索引擎根本分不清哪个是重点，后来改成只在首页放一个
（比如“XX的美食日记”），菜品用
，不到一周，博客的“北京特色小吃”关键词排名就往前挪了三位。
–
是次级标题，层级越往下权重越低，比如
可以当文章里的小节标题，
当小节里的子标题，别搞反顺序。
，不到一周，博客的“北京特色小吃”关键词排名就往前挪了三位。
–
是次级标题，层级越往下权重越低，比如
可以当文章里的小节标题，
当小节里的子标题，别搞反顺序。
是次级标题，层级越往下权重越低，比如
可以当文章里的小节标题，
当小节里的子标题，别搞反顺序。
当小节里的子标题，别搞反顺序。
再说说
标签，它是用来放段落文本的，里面不能嵌套块级元素（比如
）——我之前犯过这个错，把
里套了个
闭合了，div跑到外面去，结构全乱。如果想给段落加样式，比如改字体大小，直接给
加class就行，别用div代替。
然后是「强调文本」的标签：和。很多人会用和，但我 你优先用（加粗）和（斜体）——因为它们是“语义化标签”，搜索引擎能识别这是你想强调的内容，而和只是纯样式标签。比如你写“这款蛋糕超好吃”，用比用好，不仅样式一样，还能让搜索引擎知道“超好吃”是重点。
接下来是布局标签里的「老大哥」：
我再教你个小技巧：写布局的时候，先画个草稿——比如页面顶部是header，中间是main（左边是文章，右边是侧边栏），底部是footer。然后用
今天吃了什么
早上吃了包子...
这样结构清晰，不管是自己维护还是搜索引擎爬取，都方便。
新手必学的功能标签：表单、图片、链接怎么用才对？
说完文本和布局，再讲最常用的「功能标签」——这些标签能让你的页面“动”起来，比如插图片、加链接、做表单。我当初学这些的时候，踩过的坑最多，比如插图片没加src，结果页面显示个叉；做链接用了javascript:void(0)，导致搜索引擎爬不到内容。
先讲「插图片」的？不对，是标签——别写错单词！
是自闭合标签，不用写，直接写成
就行。它的核心属性有两个：src（图片路径）和alt（替代文本）。
src的路径分两种：「相对路径」和「绝对路径」。相对路径是相对于当前HTML文件的位置，比如你的HTML在根目录，图片在images文件夹里，就写src=”./images/pic.jpg”（./代表当前目录）；如果图片和HTML在同一目录，直接写src=”pic.jpg”。绝对路径是完整的URL，比如src=”https://example.com/images/pic.jpg”，适合上线后的图片。我 本地开发用相对路径，上线时换成绝对路径，避免路径错误——我之前把图片放在桌面，HTML在文档文件夹，结果src写了”Desktop/pic.jpg”，根本找不到，后来改成绝对路径才显示。
alt属性很重要，一定要写！它的作用有两个：一是当图片加载失败时，显示替代文本（比如“红烧肉的图片”）；二是帮助视障用户用屏幕阅读器理解图片内容。谷歌官方文档里提到，alt文本能提升页面的 accessibility（可访问性），还能帮助搜索引擎识别图片内容——我之前帮朋友的博客改alt文本，把“img123.jpg”改成“北京故宫太和殿的全景图”，结果图片的搜索量涨了30%。
我要提醒你：别用javascript:void(0)当空链接！比如你想做个暂时没功能的按钮，别写成点击，因为搜索引擎爬不到这个链接的内容。可以先写个#，然后用CSS加样式，或者等功能做好再改href——我之前这么做过，结果那个页面的链接被搜索引擎忽略了，后来改成真实路径才恢复。
接下来是「表单」相关的标签：
、、
注意：是自闭合标签，不用写；name属性很重要，后端接收数据时要靠name来识别（比如username对应输入的用户名）。
我再给你整理个「新手常用标签表」，把核心内容列出来，方便你对照：
| 标签名 | 核心作用 | 必加属性 | 新手易踩坑 |
|---|---|---|---|
| h1-h6 | 层级标题，h1权重最高 | 无（可加class/id） | 一个页面多个h1，或嵌套在里 |
| p | 段落文本 | 无（可加class/id） | 嵌套div、h1等块级元素 |
| img | 插入图片 | src、alt | 忘加src，或路径写错 |
| a | 超链接 | href | 用javascript:void(0)当空链接 |
| input | 表单输入框 | type、name | 敏感信息用GET提交 |
最后我想跟你说：写HTML标签的核心是「语义化」——用正确的标签做正确的事，别为了样式随便用标签。比如想做标题，就用h1-h6；想做段落，用p；想装容器，用div。我之前做过一个测试，两个结构一样的页面，一个用了语义化标签，一个全用div，结果语义化的那个页面关键词排名高了15位。你可以试着在写标签前问自己：“这个元素的作用是什么？”想清楚了，标签就不会用错。
如果你按这些方法试了，欢迎回来告诉我效果！比如你写了个包含标题、段落、图片的页面，有没有碰到什么问题？或者某个标签用对了，感觉特别爽？评论区等你～
div和p标签总用错，到底怎么区分？
核心区别就一句话：p是“段落文本”，专门用来放一段一段的文字；div是“容器盒子”，用来装其他元素比如标题、图片或者多个段落。比如你写文章正文，每段话要用p；想把 header、main 这些大块内容包起来，就用div。还有要注意，p里面不能嵌套块级元素（比如div、h1），我之前犯过这错，把p里套了div，结果浏览器直接把p闭合了，div跑到外面，结构全乱。
要是想给段落加样式，直接给p加class就行，别用div代替，不然搜索引擎可能分不清这是段落还是容器。
一个页面可以放多个h1标签吗？为什么？
一个页面只放1个h1标签。因为h1是页面的“主标题”，搜索引擎会把它当作页面的核心主题，要是放多个h1，比如每个菜品都加h1，搜索引擎根本分不清哪个是重点，反而影响排名。我之前帮朋友改美食博客，他原来每个菜品都用h1，后来改成首页只放一个h1（比如“XX的美食日记”），菜品用h2，不到一周，“北京特色小吃”的排名就往前挪了三位。
h2-h6是次级标题，层级越往下权重越低，比如h2当小节标题，h3当子标题，别搞反顺序哦。
img标签的alt属性一定要写吗？有什么用？
一定要写！alt属性是“替代文本”，作用有两个：一是图片加载失败时，会显示这段文字（比如“红烧肉的图片”），用户能知道这是什么；二是帮视障用户用屏幕阅读器理解图片内容。谷歌官方文档说过，alt文本能提升页面的可访问性，还能帮助搜索引擎识别图片内容——我之前帮朋友改博客的alt文本，把“img123.jpg”改成“北京故宫太和殿的全景图”，结果图片搜索量涨了30%。
要是忘了写alt，不仅视障用户看不懂，搜索引擎也没法准确判断图片内容，影响搜索排名。
想做暂时没功能的链接，能用javascript:void(0)吗？
最好别用！用javascript:void(0)当空链接，搜索引擎爬不到这个链接的内容，会忽略它。我之前这么做过，结果那个页面的链接被搜索引擎跳过了，后来改成写个#，再用CSS加样式，或者等功能做好再改href，才恢复正常。
要是实在需要暂时占位，可以先写#，等功能开发好再换成真实路径，这样既不影响用户体验，也不会影响SEO。
提交表单时，GET和POST哪种更安全？怎么选？
POST更安全！GET会把表单数据暴露在URL里（比如https://example.com/login?username=xxx&password=xxx），谁都能看到；POST会把数据放在请求体里，不会显示在地址栏，更适合提交敏感信息比如密码、身份证号。我之前做登录表单时，不小心用了GET，结果提交时密码直接显示在地址栏，吓得我赶紧改成POST。
如果是提交非敏感信息，比如搜索框的关键词，可以用GET；要是涉及隐私数据，一定要用POST。
