我的博客

 首页
 关于我






今天吃了什么

早上吃了包子...





推荐阅读
 文章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对应输入的用户名）。

我再给你整理个「新手常用标签表」，把核心内容列出来，方便你对照：

最后我想跟你说：写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。