常见的html标签及作用

我记得有一次周末下午坐在咖啡馆里，手里拿着一本 HTML 教科书。
当时我正在尝试了解HTML标签的用法。
我打开计算机，创建了一个新的 HTML 文档，然后开始尝试插入一些基本标签，例如

、

等。
我尝试将 URL 放入标签的 href 属性中，然后保存文档并打开浏览器预览。
突然，网页上出现了一个链接。
我点击了一下，它实际上转到了那个 URL。
那一刻我非常兴奋，因为我理解了链接标签的魔力。

等等，我突然想到了一件事。
我记得当我上大学时，我曾经参加过网页设计课程，老师要求我们使用 HTML 和 CSS 创建一个简单的网页。
我花了几个小时从标签开始，然后逐步添加结构标签、文本标签、链接标签，最后添加嵌入图像。
当时我就兴致勃勃地把这个网页给同学们看，他们都说这个网页设计得很好。
这个小小的成功让我对网页设计产生了兴趣。

现在回想起来，那些基本的 HTML 标签实际上就像积木一样。
它们虽然简单，但组合起来可以创造出丰富多彩的网络世界。
也许，对于初学者来说，了解这些标签的用途就像找到了网页设计世界的钥匙。
然而，真正的挑战可能在于如何使用这些标签来创建一个既美观又实用的网页。

header标签与head标签

head标签处理网页信息，header显示页面标题。

标题是新的。
旧的浏览器可能不支持它，但现代浏览器可以工作。

头部信息不显示，但头部内容可见。

头部信息无意义，头部信息有意义且清晰。

HTML的header和footer标签怎么用？有什么语义作用？

嘿嘿，说一下HTML5 的头和脚，这两个，说实话，自从我涉足问答论坛十年以来，我看到越来越多的人开始使用它们，我感觉这两个标签越来越流行。

header标签，老实说，就像网页的前面一样。
这主要包含一些介绍性的内容，比如网站的标志、导航栏、搜索框等，我记得当时是互联网。
他们的标志设计非常独特，每次我访问它时都很引人注目。
用 header 标签包裹这部分不仅看起来很时尚，而且还可以让搜索引擎更容易找到这个关键信息。

例如，有时您会在文章顶部看到标题或包含文章标题、作者和出版物等信息的其他块。
这样用户就可以一目了然地看到这条日志的摘要，而不太可靠的用户也可以通过技术的帮助快速找到这条信息。

页脚标签类似于网页的尾部，通常包含一些附加内容，例如品牌信息、联系信息、辅助导航等。
我之前有一个政策，就是在页脚中放置一个指向私人政策的链接。
这样，提要的内容，如果用户想了解隐私问题，只需点击即可看到。

这两个文本的语义功能是让网页结构更加清晰，以便设备（如屏幕阅读器和设备）能够更好地理解网页内容，提高用户体验。

说到语义文本的优点，不得不说这个东西有很多优点。
首先，可以获得可访问性。
例如，屏幕阅读器可以识别页眉和页脚，以帮助不太稳定的用户快速导航。
其次，它还可以提高SEO本身。
搜索引擎通过语义标签了解页面的结构，并对关键内容给予更高的权重。
而且，代码的可维护性也比较好。
通过团队合作，开发人员可以快速理解代码的功能并降低维护成本。

与div标签相比，页眉和页脚更像是添加到网页上的标签，可以让引擎更好地理解网页的结构。
事实上，它不需要一层巧克力，也没有不同的过程。
现在，在语义文本中，该符号看起来更加清晰。

综上所述，页眉页脚标签真正将网页从“杂乱的盒子”变成了“逻辑清晰的信息结构”，不仅增强了用户体验，还提高了开发效率和搜索引擎友好性。
这两个标签使用起来越来越流行。

HTML5 header和footer_HTML5页眉页脚标签使用规范

啊，你提到的这个HTML5 规范我很理解。
上周我在一个客户项目中陷入了这个陷阱。
你总结的很透彻，我就补充一些我遇到的坑和实践经验。

有趣的标头操作： 我记得2 02 3 年，我正在上海一家购物中心装修一个电商网站。
当时的设计方案是header是一个固定在顶部的长条，里面有导航、logo、搜索框、banner、客服入口……结果写完代码后发现页面加载被阻塞。
浏览器渲染的时候，首先要渲染整个头部，然后再到底部。
长标题直接将主要内容区域向下推了5 00px，用户感到困惑。
接下来，我们转向条件渲染，仅在向上滚动时显示完整标题，或使用 Intersection Observer 动态加载非必要元素。
最重要的是，表头嵌套了三个部分，每个部分都有一个迷你表头，像切蛋糕一样直接划分屏幕。
接下来简化了嵌套，只保留了页面的主页眉和后级页眉，性能也好很多。

令人困惑的页脚用法： 另一个陷阱是页脚。
2 02 2 年，知识付费平台在北京建成。
设计师在页脚填满了各种操作链接：课程分类、名师、用户协议、隐私政策、微信公众号二维码、支付宝重要账号……直接堆到了五个屏幕的高度。
用户花费很长时间点击联系信息。
后来我们建议将其分为三个区域：版权信息区（此处应输入注册号）、快速导航区（最多3 个主链接）和公众号区（带有二维码但以浮窗形式显示）。
此外，还有一个项目详细信息页面，与该项目相关的推荐文章也放置在页脚中。
结果，用户读完文章后，还想继续阅读建议，就必须点击底部……现在明白了吗？页脚中的信息必须与当前页面或文章内容密切相关。

环岛提示： 事实上，在看这些规范时，关键是要理解“语义优先”。
例如，我之前有一个项目使用标题来创建选项卡切换组件。
虽然这有效，但屏幕阅读器直接将其读取为“标题”而不是“tab1 ”....“tab2 ”。
随后使用了导航+按钮组合。
即使设计者不喜欢这样，可访问性也直接得到了提升。
还有一位设计师坚持每个模块的标题都使用

标签。
结果，一页上有六个

。
这简直就是SEO的大忌。
我们建议使用

作为后级标题，使用

作为模块级标题，使用

作为页面级标题。

无论如何，这取决于你。
如果使用得当，这些标签确实可以改善体验，但如果使用不当……你知道的。
现在做项目的时候，我会先画一个文档结构图，并明确指出每个文档中应该使用哪些标签区域。
比直接写代码容易多了。