HTML5 基礎教程

HTML5 API

HTML5 メディア

HTML5 グラフィック

HTML5 语义元素

セマンティック要素は、その要素名を見ただけでその内容の意味を知ることができる要素です。例えば、記事(article)の場合、ヘッダー(header)、目次(catalog)、内容(content)、フッター(footer)などの情報があります。

セマンティック要素とは何ですか？

セマンティック要素は、ブラウザと開発者に対してその意味を明確に説明できる要素です。

セマンティックでない要素の例: <div>および<span> - 内容を考慮する必要はありません。

セマンティック要素の例: <form>、<table>、および<img> - その内容を明確に定義しています。

ブラウザのサポート

Internet Explorer 9+, Firefox、Chrome、Safari、およびOperaはセマンティック要素をサポートしています。

注意: Internet Explorer 8 及びそれ以前のバージョンではこの要素をサポートしていませんが、文章の最下部に互換性のある解決策が提供されています。

HTML5新しいセマンティック要素

多くの既存のウェブサイトには以下のHTMLコードが含まれています：

<div id="nav">、<div>、または<div id="footer">、ナビゲーションリンク、ヘッダー、およびフッターを指明するために使用されます。

HTML5 新しいセマンティック要素を提供して、ウェブページの異なる部分を明確にします:

<header>
<nav>
<section>
<article>
<aside>
<figcaption>
<figure>
<footer>

HTML5 <section> 要素

<section> タグはドキュメント内のセクション（セクション、区画）を定義します。例えば、章、ヘッダー、フッター、またはドキュメント内の他の部分です。

W3C HTML5ドキュメント: sectionは、内容とそのタイトルを含むグループを表します。

例

<!DOCTYPE　html>
<html>
<head>　
<meta　charset="utf-8">　
<title>基礎チュートリアルウェブ(oldtoolbag.com)</title>　
</head>
<body>
<section>
　　<h1>HTML5</h1>
　　<p>これは新しいHTML言語バージョンであり、新しい要素、属性、行動を含み、Webサイトやアプリケーションを多様化し、機能を強化するための技術を含みます。この技術はHTML5と呼ばれます。5　とその友人たちは、通常HTMLと略されます。5。/p>
</section>
<section>
　　<h1>CSS3</h1>
　　<p>CSSの進化の主要な変化はW3CはCSSを3モジュールに分けられています。ブラウザメーカーはCSSのリズムに合わせて迅速に革新を遂げるため、モジュール方法を採用することで、CSS3規格内の要素は、異なる速度で進展することができます。なぜなら、異なるブラウザメーカーが指定された特性をサポートするからです。しかし、異なるブラウザが異なる時間に異なる特性をサポートするため、クロスブラウザ開発が複雑になります。/p>
</section>
</body>
</html>

测试看看 ‹/›

HTML5 <article>要素

<article>タグは独立した内容を定義します。

<article>要素の使用例:

フォーラム投稿
ブログ記事
ニュースストーリー
コメント

例

<!DOCTYPE　html>
<html>
<head>　
<meta　charset="utf-8">　
<title>基礎チュートリアルウェブ(oldtoolbag.com)</title>　
</head>
<body>
<article>
　　<h1>CSS3　</h1>
　　<p>SS3CSS（カッパースタイルシート）技術のアップグレード版であり、1999年から制定を開始しました。2001年5月23日W3CがCSSを3の作業草案、
ボックスモデル、リストモジュール、ハイパーリンクスタイル、言語モジュール、背景とボーダー、テキストエフェクト、多列レイアウトなど、さまざまなモジュールを含みます。/p>
</article>
</body>
</html>

测试看看 ‹/›

HTML5 <nav>要素

<nav>タグは、ナビゲーションリンクの部分を定義します。

<nav>要素は、ページのナビゲーションリンク部分のエリアを定義しますが、すべてのリンクが<nav>要素に含まれる必要はありません!

例

<!DOCTYPE　html>
<html>
<head>　
<meta　charset="utf-8">　
<title>基礎チュートリアルウェブ(oldtoolbag.com)</title>　
</head>
<body>
<nav>
　　　　<a　href="/html/">HTML</a>　|
　　　　<a　href="/css/">CSS</a>　|
　　　　<a　href="/js/">JavaScript</a>　|
　　　　<a　href="/jquery/">jQuery</a>
</nav>
</body>
</html>

测试看看 ‹/›

HTML5 <aside>要素

<aside>タグは、ページのメインエリアの内容以外の内容（例えばサイドバー）を定義します。

asideタグの内容は、メインエリアの内容に関連する必要があります。

例

<!doctype　html>
<html>
<head>
<meta　charset="UTF-8">
<title>HTML5　www.wによる例3codebox.com</title>
</head>
<body>
<article>
　　<h1>記事の見出し</h1>
　　<p>article下に表示されるテキスト</p>
</article>
<aside>
　　<p>aside下に表示されるテキスト/p>
</aside>
</body>
</html>

测试看看 ‹/›

HTML5 <header>要素

<header>要素は、ドキュメントのヘッダーエリアを説明しています。

<header>要素は、内容の紹介表示エリアを定義するために主に使用されます。

ページ内で複数の<header>要素を使用できます。

以下の例では、記事のヘッダーを定義しています:

例

<!doctype　html>
<html>
<head>
<meta　charset="UTF-8">
<title>HTML5　www.wによる例3codebox.com</title>
</head>
<body>
<header>
　　<img　src="/スタティック/イメージ/ロゴ-n.png"　alt="Logo">
</header>
<article>
　　<h1>記事の見出し</h1>
　　<p>article下に表示されるテキスト</p>
</article>
</body>
</html>

测试看看 ‹/›

HTML5 <footer>要素

<footer>要素はドキュメントの下部領域を説明します。

<footer>要素はその含む要素を含むべきです。

一つのフッターは、ドキュメントの著者、著作権情報、利用条件のリンク、連絡情報などが含まれています。

ドキュメント内で複数の<footer>要素を使用することができます。

例

<!doctype　html>
<html>
<head>
<meta　charset="UTF-8">
<title>HTML5　www.wによる例3codebox.com</title>
</head>
<body>
<article>
　　<h1>記事の見出し</h1>
　　<p>article下に表示されるテキスト</p>
</article>
<footer>
　　<p>著作権　©2013</p>
</footer>
</body>
</html>

测试看看 ‹/›

HTML5 <figure>と<figcaption>要素

<figure>タグは独立した流れの内容（画像、グラフ、写真、コードなど）を規定します。

<figure>要素の内容は主要な内容に関連するべきですが、削除された場合でも文書の流れに影響を与えるべきではありません。

<figcaption>タグは「figure」要素のタイトルを定義します。

<figcaption>要素は「figure」要素の最初のまたは最後の子要素の場所に配置されるべきです。

例

<!DOCTYPE　html>
<html>
<head>　
<meta　charset="utf-8">　
<title>基礎チュートリアルウェブ(oldtoolbag.com)</title>　
</head>
<body>
<figure>
　　<img　src="venglobe.gif"　alt="venglobe"　width="304"　height="228">
　　<figcaption>venglobe　venglobe　venglobe.</figcaption>
</figure>
</body>
</html>

测试看看 ‹/›

　HTML5意味の要素オンライン集約例

例

<!doctype　html>
<html>
<head>
　　　　<meta　charset="UTF-8">
　　　　<title>意味の要素</title>
</head>
<body>
　　　　<!--構造要素-->
　　　　<header>ヘッダー</header>
　　　　<section>表示一つの段落：領域の章の記述に使用/section>
　　　　<footer>領域のフッター部分</footer>
　　　　<nav>メニュー　ナビゲーション</nav>
　　　　<article>表示文章の主要内容</article>
　　　　<!--ブロックレベル要素　領域の区切りに使用-->
　　　　<aside></aside>
　　　　<figure>
　　　　　　　　<figcaption></figcaption>
　　　　</figure>
　　　　<code>表示一段代码</code>
　　　　<dialog>表示对话
　　　　　　　　<dt>说话的人</dt><dd>内容</dd>
　　　　</dialog>
　　　　<!--语义元素-->
　　　　<mtter>一定范围的数值</mtter>
　　　　<time></time>
　　　　<progress>進行状況バー</progress>
　　　　<video>ビデオ</video>
　　　　<audio>オーディオ</audio>
　　　　<!--インタラクティブ要素-->
　　　　<details>特定の内容を表示する方法で一段の具体的内容</details>
　　　　<datagrid>クライアント側のデータ表示を制御するために使用されます</datagrid>
　　　　<menu>動的インタラクティブメニュー</menu>
　　　　<command>名前</command>
　　　　<!--表示文章例-->
　　　　<article>
　　　　　　　　<header>
　　　　　　　　　　　　<h1>HTMLのhead部分のタグ</h1>
　　　　　　　　　　　　<time>2015年12月12日/time>
　　　　　　　　</header>
　　　　　　　　<p>HTMLのhead部分には多くのタグや要素があります。これらはブラウザがウェブページをレンダリングする方法、SEOなどに関連しています。また、各ブラウザのカーネルや国内のブラウザメーカーは独自のタグや要素を持っています。これにより、多くの差異が生じます。モバイルインターネット時代には、headのヘッダー構造やモバイルのmeta要素がさらに重要です。各タグの意味を理解し、自分のニーズに合ったheadヘッダータグを作成することは、この記事の目的です。この記事は、一つの記事を基にして、よく使われるhead中の各タグや要素の意味と使用シーンを拡張し、まとめました。</p>
　　　　　　　　<footer>
　　　　　　　　　　　　<p>http://www.baidu.com</p>
　　　　　　　　</footer>
　　　　</article>
　　　　<!--コメント-->
　　　　<section>
　　　　<h2>评论</h2>
　　　　　　　　<article>
　　　　　　　　　　　　<header>
　　　　　　　　　　　　　　　　<h3>李四</h3>
　　　　　　　　　　　　　　　　<p><time　pubdata　datatime="2013-09-23　10:00　-　11:00>一時間前</time></p>
　　　　　　　　　　　　</header>
　　　　　　　　　　　　<p>评论内容</p>
　　　　　　　　</article>
　　　　　　　　<article>
　　　　　　　　　　　　<header>
　　　　　　　　　　　　　　　　<h3>李四</h3>
　　　　　　　　　　　　　　　　<p><time　pubdata　datatime="2013-09-23　10:00　-　11:00>一時間前</time></p>
　　　　　　　　　　　　</header>
　　　　　　　　　　　　<p>评论内容</p>
　　　　　　　　</article>
　　　　</section>
</body>
</html>

测试看看 ‹/›

我们可以开始使用这些语义元素吗？

以上的元素都是块元素（除了<figcaption>）。

为了让这些块及元素在所有版本的浏览器中生效，你需要在样式表文件中设置以下属性（以下样式代码可以让旧版本浏览器支持本章介绍的块级元素）:

header, section, footer, aside, nav, article, figure
{
　　　　display: block;
}

Internet Explorer 8 及更早IE版本中的问题

IE8 及更早的IE版本无法在这些元素中渲染CSS效果，以至于你不能使用 <header>, <section>, <footer>, <aside>, <nav>, <article>, <figure>, または他のHTML5 <article>, <figure>, または他のHTML

elements.5 解決策: HTML5 elementsを使用して、以下のようにします。

HTML5 ShivはIEの互換性問題を解決するためのJavascriptスクリプトです。http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js

ダウンロード後、以下のコードをウェブページに配置してください：

以上のコードは、ブラウザがIEより小さい場合に使用されます。9バージョンがhtmlをロードします。5shiv.jsファイル。 IEブラウザが必要にして、これらのHTMLをロードした後にレンダリングするために、<head>要素に配置する必要があります。5の新しい要素

HTML5 クライアントストレージ HTML5 フォーム属性