浅谈H5语义化标签的兼容处理

最新推荐文章于 2022-05-19 15:35:29 发布

know_8_know

最新推荐文章于 2022-05-19 15:35:29 发布

阅读量679

点赞数 2

分类专栏： H5 文章标签： H5语义化标签的兼容处理

本文链接：https://blog.csdn.net/weixin_40184257/article/details/84928877

版权

本文探讨HTML5语义化标签的作用，并详细解释为何需要进行兼容处理，尤其是针对旧版浏览器如IE6-7。通过举例说明如何进行兼容处理，包括使用JavaScript动态创建标签和应用html5shiv.js插件来优化处理。文章最后提到了利用条件注释实现更精准的兼容策略。

摘要由CSDN通过智能技术生成

在浅谈之前，大家先理清两个问题：
1、什么是H5语义化标签？
2、为什么要进行兼容处理？

先来讲讲第一个，为了使代码更加规划，HTML5新增了语义化标签，具体如下：

1、<header></header> 页眉：主要用于页面的头部的信息介绍，也可用于板块头部；

2、<hgroup></hgroup> 页面上的一个标题组合：一个标题和一个子标题，或者标语的组合；

3、<nav></nav> 导航：包含链接的一个列表；

4、<section> <section> 页面上的版块：用于划分页面上的不同区域,或者划分文章里不同的节；

5、<article></ article > 用来在页面中表示一套结构完整且独立的内容部分：可以用来呈现论坛的一个帖子，杂志或报纸中的一篇文章，一篇博客，用户提交的评论内容，可互动的页面模块挂件等；

6、<aside></ aside> 元素标签可以包含与当前页面或主要内容相关的引用、侧边栏、广告、nav元素组，以及其他类似的有别与主要内容的部分：①aside 的内容应该与 article 的内容相关，② 被包含在<article>中作为主要内容的附属信息部分，其中的内容 以是与当前文章有关的引用、词汇列表等，③在<article>之外使用，作为页面或站点全局的附属信息部分；最典型的形式是侧边栏(sidebar)，其中的内容可以是友情链接、附属导航或广告单元等；

7、<figure> < figure > 用于对元