新しいHTML5セマンティックタグ

1.共通セマンティックタグ

記事-定義ページの独立したコンテンツ領域を
脇-サイドバーコンテンツの定義
ヘッダは、 -文書のヘッダ領域定義
部を-文書で定義されたブロック
NAV -ナビゲーションの定義
フッター-またはドキュメントの定義セクションをフッター

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のコードを作成するために、これらのラベルを使用する必要がドムのレンダリングの前に実行する必要があります認識しません!

<!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>

ブロックレベル要素のCSSのスタイルを設定する必要があり、その後、このようなIE8は、適切に新しいセマンティックタグを識別することができますが、デフォルトではインライン要素のレンダリング

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

このようなIE8は、通常の新しいセマンティックタグを表示することができます

3.サードパーティ製のプラグインhtml5shiv.js

それぞれがこの製造方法を経なければならない場合H5非常に多くの新しいラベルは、ないあまりにも面倒ではありません
直接jsのパッケージ化ライブラリ--- html5shiv古い牛から借りたので、私たちは今、第三の方法を紹介し、 .jsファイルは
使用:直接ラベルを導入することができる(jsのコードは、ドムのレンダリングの前に実行する必要があります!)

<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>

レンダリング結果:

おすすめ

転載: www.cnblogs.com/OrochiZ-/p/11597674.html