HTML5 新的语义标签

1.常用的语义标签

article -- 定义页面独立的内容区域
aside -- 定义侧边栏内容
header -- 定义了文档的头部区域
section -- 定义文档中的区块
nav -- 定义导航栏
footer -- 定义 section 或 document 的页脚

2.兼容性

IE8及IE8以下版本中，新元素不能作为父节点包裹子元素，并且不能应用CSS样式。让CSS 样式应用在未知元素上只需执行 document.createElement(elementName) 即可实现。
所以解决办法就是：用js创建这些标签元素，并为其设置css样式
演示：用IE8及IE8以下版本运行下面的代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Test</title>
    </head>
    <body>
        <header>我是header</header>
        <footer>我是footer</footer>
        <article>我是article</article>
        <aside>我是aside</aside>
        <section>我是section</section>
        <nav>我是nav</nav>
    </body>
</html>

渲染结果如下：

新的标签无法识别，需要用js创建这些标签元素，且js代码必须在Dom渲染之前运行！！！

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Test</title>
        <script>
            document.createElement('header');
            document.createElement('footer');
            document.createElement('article');
            document.createElement('aside');
            document.createElement('section');
            document.createElement('nav');
        </script>
    </head>
    <body>
        <header>我是header</header>
        <footer>我是footer</footer>
        <article>我是article</article>
        <aside>我是aside</aside>
        <section>我是section</section>
        <nav>我是nav</nav>
    </body>
</html>

这样ie8就可以正常识别新的语义标签了，但是默认渲染为行内元素，需要再为其设置css样式为块级元素

<style>
    article,aside,header,section,nav,footer{
        display:block;
    }
</style>

这样IE8也可以正常展示新的语义标签了

3.第三方插件 html5shiv.js

H5那么多的新标签，如果每个都要通过这种方法去生产的话，是不是太麻烦了呢
所以，我们现在介绍第三种方式，直接借用前辈大牛封装好的js库 --- html5shiv.js
使用方法：直接引入标签即可（js代码必须在Dom渲染之前运行！！！）

<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <script src="https://cdn.bootcss.com/html5shiv/r29/html5.js"></script>
</head>

4.自定义标签

在高级浏览器中，默认能识别自定义标签，只是默认将其渲染为行内元素。
可以自己给这些自定义标签设置css属性

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Test</title>
        <style>
            yyy{
                display: block;
            }
        </style>
    </head>
    <body>
        <xxx>我是xxx标签的文本</xxx>
        <xxx>我是xxx标签的文本</xxx>
        <yyy>我是yyy标签的文本</yyy>
        <yyy>我是yyy标签的文本</yyy>
    </body>
    <script>
        // 获取第2个xxx标签
        var xxx = document.getElementsByTagName("xxx")[1]
        // 尝试操作样式
        xxx.style.color = "red"
    </script>
</html>

渲染结果：

来源：https://www.cnblogs.com/OrochiZ-/p/11597674.html

标签

html5

charset