文章目录▼CloseOpen

• 最基础的文本与布局标签：别再把和用混了
  我见过很多新手的第一个误区，就是把和随便用——比如用写整个段落，或者用包着多个标题。其实这俩标签的核心区别就一句话：是“段落文本”，是“容器盒子”。
  先说说文本标签里最常用的「标题与段落」：-和。是页面的“主标题”，相当于一篇文章的大标题，搜索引擎会把它当作页面的核心主题，所以一个页面最好只放1个——我之前帮朋友的美食博客改页面时，他把每个菜品都加了，结果搜索引擎根本分不清哪个是重点，后来改成只在首页放一个（比如“XX的美食日记”），菜品用，不到一周，博客的“北京特色小吃”关键词排名就往前挪了三位。-是次级标题，层级越往下权重越低，比如可以当文章里的小节标题，当小节里的子标题，别搞反顺序。
  再说说标签，它是用来放段落文本的，里面不能嵌套块级元素（比如、）——我之前犯过这个错，把里套了个，结果浏览器直接把闭合了，div跑到外面去，结构全乱。如果想给段落加样式，比如改字体大小，直接给加class就行，别用div代替。
  然后是「强调文本」的标签：和。很多人会用和，但我 你优先用（加粗）和（斜体）——因为它们是“语义化标签”，搜索引擎能识别这是你想强调的内容，而和只是纯样式标签。比如你写“这款蛋糕超好吃”，用比用好，不仅样式一样，还能让搜索引擎知道“超好吃”是重点。
  接下来是布局标签里的「老大哥」：和。是块级元素，会独占一行，用来装多个元素——比如你想把 header、main、footer 分成三大块，就用、、。是行内元素，不会独占一行，用来修饰文本的一部分——比如你想把段落里的某个词改成红色，就用这个词。别用修饰文字，也别用装大块内容，不然会搞乱页面布局。
  我再教你个小技巧：写布局的时候，先画个草稿——比如页面顶部是header，中间是main（左边是文章，右边是侧边栏），底部是footer。然后用把这些块包起来，再在里面填内容。比如：

  我的博客

  首页
  关于我

  今天吃了什么
  早上吃了包子…

  推荐阅读
  文章1

  版权所有 © 2024

  这样结构清晰，不管是自己维护还是搜索引擎爬取，都方便。
  新手必学的功能标签：表单、图片、链接怎么用才对？
  说完文本和布局，再讲最常用的「功能标签」——这些标签能让你的页面“动”起来，比如插图片、加链接、做表单。我当初学这些的时候，踩过的坑最多，比如插图片没加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%。
  再讲「超链接」的标签，核心属性是href（链接地址）和target（打开方式）。href可以是网页URL、本地文件路径，甚至是页面内的锚点（比如href="#top"回到顶部）。target="_blank"会在新窗口打开链接，适合跳转到外部网站；如果是内部链接，不用加target，默认在当前窗口打开。
  我要提醒你：别用javascript:void(0)当空链接！比如你想做个暂时没功能的按钮，别写成点击，因为搜索引擎爬不到这个链接的内容。可以先写个#，然后用CSS加样式，或者等功能做好再改href——我之前这么做过，结果那个页面的链接被搜索引擎忽略了，后来改成真实路径才恢复。
  接下来是「表单」相关的标签：、、。表单是用来收集用户信息的，比如登录、注册、留言。的核心属性是action（表单提交的地址）和method（提交方式）。method分GET和POST：GET会把表单数据暴露在URL里（比如https://example.com/login?username=xxx&password=xxx），适合提交非敏感信息；POST会把数据放在请求体里，更安全，适合提交密码、身份证号这些敏感信息——我之前做登录表单时，不小心用了GET，结果提交时密码直接显示在地址栏，吓得我赶紧改成POST。
  标签的type属性决定了输入框的类型：type="text"是普通文本框，type="password"是密码框（输入内容隐藏成星号），type="email"是邮箱框（自动验证格式），type="submit"是提交按钮。比如：

  登录

  注意：是自闭合标签，不用写；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。

• ，不到一周，博客的“北京特色小吃”关键词排名就往前挪了三位。-是次级标题，层级越往下权重越低，比如可以当文章里的小节标题，当小节里的子标题，别搞反顺序。
• -是次级标题，层级越往下权重越低，比如可以当文章里的小节标题，当小节里的子标题，别搞反顺序。
• 可以当文章里的小节标题，当小节里的子标题，别搞反顺序。
  • 当小节里的子标题，别搞反顺序。
• 今天吃了什么
  • 推荐阅读
• 新手必学的功能标签：表单、图片、链接怎么用才对？
  • div和p标签总用错，到底怎么区分？
  • 一个页面可以放多个h1标签吗？为什么？
  • img标签的alt属性一定要写吗？有什么用？
  • 想做暂时没功能的链接，能用javascript:void(0)吗？
  • 提交表单时，GET和POST哪种更安全？怎么选？

我们把新手必用的标签挨个“拆”开——从基础的文本（p、h1-h6、strong）、布局标签（div、span），到实用的表单（form、input、select）、多媒体标签（img、audio、video），每个标签都讲清核心作用、常用属性、正确写法，连“容易踩的坑”都标了出来。更贴心的是配了实战小例子，比如“用form做登录框”“用img加响应式图片”，看完就能直接用到自己的页面里。

不用找零散教程，不用死记硬背，跟着过一遍就能把常用标签“刻”进脑子里，轻轻松松搞定网页结构。不管你是做个人博客、小项目，还是为学CSS、JS打基础，这篇新手友好的指南，都能帮你快速闯过HTML标签这关！

你有没有过刚打开VS Code写HTML时，盯着空白文档发呆的情况？想写个段落不知道用

还是

，插张图片半天没显示——因为忘了加src属性？我当初学HTML的时候，也犯过这些傻：比如把

嵌套在

里，结果浏览器直接把结构打乱，急得我对着屏幕挠头；或者写了个标签，却把href写成了“#”，点进去直接跳转到页面顶部，用户留言说“点链接没反应”，我才反应过来错在哪。后来我把常用标签一个个拆开来试，记下来哪些地方容易踩坑，慢慢就摸出了规律。今天把这些整理好的东西分享给你，都是新手最常碰到的问题，跟着走一遍，保准你下次写标签不会再慌。

最基础的文本与布局标签：别再把

和

用混了

我见过很多新手的第一个误区，就是把

和

随便用——比如用

写整个段落，或者用

包着多个标题。其实这俩标签的核心区别就一句话：

是“段落文本”，

是“容器盒子”。

先说说文本标签里最常用的「标题与段落」：

–

和

。

是页面的“主标题”，相当于一篇文章的大标题，搜索引擎会把它当作页面的核心主题，所以一个页面最好只放1个

——我之前帮朋友的美食博客改页面时，他把每个菜品都加了

，结果搜索引擎根本分不清哪个是重点，后来改成只在首页放一个

（比如“XX的美食日记”），菜品用

，不到一周，博客的“北京特色小吃”关键词排名就往前挪了三位。

–

是次级标题，层级越往下权重越低，比如

可以当文章里的小节标题，

当小节里的子标题，别搞反顺序。


再说说

标签，它是用来放段落文本的，里面不能嵌套块级元素（比如

、

）——我之前犯过这个错，把

里套了个

，结果浏览器直接把

闭合了，div跑到外面去，结构全乱。如果想给段落加样式，比如改字体大小，直接给

加class就行，别用div代替。

然后是「强调文本」的标签：和。很多人会用和，但我 你优先用（加粗）和（斜体）——因为它们是“语义化标签”，搜索引擎能识别这是你想强调的内容，而和只是纯样式标签。比如你写“这款蛋糕超好吃”，用比用好，不仅样式一样，还能让搜索引擎知道“超好吃”是重点。

接下来是布局标签里的「老大哥」：

和。

是块级元素，会独占一行，用来装多个元素——比如你想把 header、main、footer 分成三大块，就用

、

、

。是行内元素，不会独占一行，用来修饰文本的一部分——比如你想把段落里的某个词改成红色，就用这个词。别用

修饰文字，也别用装大块内容，不然会搞乱页面布局。

我再教你个小技巧：写布局的时候，先画个草稿——比如页面顶部是header，中间是main（左边是文章，右边是侧边栏），底部是footer。然后用

把这些块包起来，再在里面填内容。比如：

 
我的博客
 

 首页
 关于我
 


 

 
今天吃了什么
 
早上吃了包子...
 
 

 
推荐阅读
 文章1
 


 
版权所有 © 2024

这样结构清晰，不管是自己维护还是搜索引擎爬取，都方便。

新手必学的功能标签：表单、图片、链接怎么用才对？

说完文本和布局，再讲最常用的「功能标签」——这些标签能让你的页面“动”起来，比如插图片、加链接、做表单。我当初学这些的时候，踩过的坑最多，比如插图片没加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%。

再讲「超链接」的标签，核心属性是href（链接地址）和target（打开方式）。href可以是网页URL、本地文件路径，甚至是页面内的锚点（比如href=”#top”回到顶部）。target=”_blank”会在新窗口打开链接，适合跳转到外部网站；如果是内部链接，不用加target，默认在当前窗口打开。

我要提醒你：别用javascript:void(0)当空链接！比如你想做个暂时没功能的按钮，别写成点击，因为搜索引擎爬不到这个链接的内容。可以先写个#，然后用CSS加样式，或者等功能做好再改href——我之前这么做过，结果那个页面的链接被搜索引擎忽略了，后来改成真实路径才恢复。

接下来是「表单」相关的标签：

、、。表单是用来收集用户信息的，比如登录、注册、留言。的核心属性是action（表单提交的地址）和method（提交方式）。method分GET和POST：GET会把表单数据暴露在URL里（比如https://example.com/login?username=xxx&password=xxx），适合提交非敏感信息；POST会把数据放在请求体里，更安全，适合提交密码、身份证号这些敏感信息——我之前做登录表单时，不小心用了GET，结果提交时密码直接显示在地址栏，吓得我赶紧改成POST。
标签的type属性决定了输入框的类型：type=”text”是普通文本框，type=”password”是密码框（输入内容隐藏成星号），type=”email”是邮箱框（自动验证格式），type=”submit”是提交按钮。比如：

 
 
 登录

注意：是自闭合标签，不用写；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。