ホームページ > 記事 > ウェブフロントエンド > HTML5 の新しい構造要素は何ですか? HTML5 での新しい構造要素の使用 (推奨)
HTML5 の新しい構造要素は何ですか? HTML5 での新しい構造要素の使用 (推奨)
- 寻∝梦オリジナル
- 2018-08-14 16:22:595971ブラウズ
HTML5 の新しい構造とは何ですか? そしてそれらはどのように使用できるのでしょうか? この記事では詳しく説明します。
HTML5 の新しい主要構造要素:
article 要素
section 要素
nav
aside 要素
time 要素
pudate属性
要素の数:
article 要素
は埋め込み可能で、プラグインを表すことができます
<article>
<h1>这是一个内嵌页面</h1>
<object>
<embed src="#" width = "600" height = "400"</embed>
</object>
</article>section 要素
タイトルコンテンツなしでセクション要素を使用することは一般的に推奨されません
article と混同しないでください要素
概要: スタイルを設定するためのページ コンテナとしてセクション要素を使用しないでください
article、aside、nav 要素の使用の方が適している場合は、seciton 要素を使用しないでください
タイトル コンテンツがない場合、セクション要素
nav
をページとして使用しないでください。 ナビゲーション要素が他のページまたは現在のページの他の部分に接続されているナビゲーションの接続されたグループ。メインおよび基本的な接続グループを nav 要素に入れるだけです
アプリケーションシナリオ:
従来のナビゲーションバー
サイドバーナビゲーション
ページ内ナビゲーション
ページめくり操作
するHTML5 では nav 要素の代わりに menu 要素を使用しないでください
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<nav>
<ul>
<li><a href = "#">主页</a></li>
<li><a href = "#">开发文档</a></li>
</ul>
</nav>
<article>
<header>
<h1>html5和css3的历史</h1>
<nav>
<ul>
<li><a href = "#">HTML5历史</a></li>
<li><a href = "#">CSS3历史</a></li>
</ul>
</nav>
</header>
<section>
<h1>HTML5历史</h1>
<p>....</p>
</section>
<section>
<h1>css3历史</h1>
<p>....</p>
</section>
<footer>
<a href = "#">删除</a>
<a href = "#">修改</a>
</footer>
</article>
<footer>
<p><small>版权声明：</small></p>
</footer>
</body>
</html>aside 要素
現在のページまたはテキストの補助情報部分を表します
以前の参照、サイドバー、ブラウジング、ナビゲーション バーなどが含まれます
<html>
<head>
<meta charset="UTF-8">
<title>aside元素</title>
</head>
<body>
<header>
<h1>js入门</h1>
</header>
<article>
<h1>语法</h1>
<p>文章的正文。。。。。。</p>
<aside>
<h1>名词解释</h1>
<p>这是一个对语言来说很重要的内容体</p>
</aside>
</article>
<aside>
<nav>
<h2>评论</h2>
<ul>
<li><a href = "#">2015-3-10</a></li>
<li><a href = "#" >大牛：真希望可以好好的学习一下</a></li>
</ul>
</nav>
</aside>
</body>
</html> time要素
24時間
<html>
<head>
<meta charset="UTF-8">
<title>Time元素</title>
</head>
<body>
<time datatime = "2017-10-09">2017-10-09</time>
<time datatime = "2017-10-09T20:00">2017-10-09</time>
<time datatime = "2017-10-09T20:00Z">2017-10-09</time>
<time datatime = "2017-10-09T20:00Z+09:00">2017-10-09</time>
</body>
</html>pudate属性
<html>
<head>
<meta charset="UTF-8">
<title>update属性</title>
</head>
<body>
<article>
<header>
<h1>苹果</h1>
<p>发布日期
<time datetime="2017-10-09" pubudate>2015-10-09</time></p>
<p>舞会时间
<time datetime ="2015-10-09">2015-10-09</time></p>
</header>
</article>
</body>
</html>【関連推奨事項】
HTMLとはファイル？ ？ HTML ファイルについての予備的な理解
以上がHTML5 の新しい構造要素は何ですか? HTML5 での新しい構造要素の使用 (推奨)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。