1. 意味要素
セマンティック要素とは何ですか?
セマンティック要素は、ブラウザーと開発者に対してその意味を明確に説明します。
- 非セマンティック要素の例:
<div>および<span>- その内容に関する情報はありません。
- セマンティック要素の例:
<form>、<table>および<img>- その内容を明確に定義します。
HTML5 の新しいセマンティック要素とフレーム レイアウト:
| HTML5 | 意味要素 |
|---|---|
| ヘッダ | ドキュメントまたはセクションのヘッダーを定義します |
| ナビ | ナビゲーションリンクのコンテナを定義します |
| セクション | ドキュメント内のセクションを定義する |
| 記事 | 独立した自己完結型の記事を定義する |
| 脇に | 定義されたコンテンツ以外のコンテンツ (サイドバーなど) |
| フッター | ドキュメントまたはセクションのフッターを定義する |
| 詳細 | 追加の詳細を定義する |
| まとめ | 詳細要素のタイトルを定義します |
ヒント: 高度なレイアウトの作成には時間がかかるため、テンプレートを使用するのが簡単なオプションです。検索エンジンから入手できる無料の Web サイト テンプレートが多数あります (これらの事前構築された Web サイト レイアウトを使用して最適化することができます)。
HTML5 の新しいセマンティック要素は次のとおりです。
2. HTML5 の新しい要素
| ラベル | 説明 |
|---|---|
<article> |
意味書類の中に記事。 |
<aside> |
意味ページコンテンツの外側コンテンツ。 |
<bdi> |
他のテキストとは異なるテキストの方向を定義します。 |
<details> |
ユーザーが表示または非表示にできる追加の詳細を定義します。 |
<dialog> |
意味ダイアログボックスまたは窓。 |
<figcaption> |
<figure> 要素のタイトルを定義します。 |
<figure> |
図、ダイアグラム、写真、コードリストなどの自己完結型コンテンツを定義します。 |
<footer> |
ドキュメントまたはセクションのフッターを定義します。 |
<header> |
ドキュメントまたはセクションのヘッダーを定義します。 |
<main> |
ドキュメントの主な内容を定義します。 |
<mark> |
何が重要または強調されているかを定義します。 |
<menuitem> |
ユーザーがポップアップ メニューから呼び出すことができるコマンド/メニュー項目を定義します。 |
<meter> |
既知の範囲 (スケール) 内のスカラー測定を定義します。 |
<nav> |
ドキュメント内のナビゲーション リンクを定義します。 |
<progress> |
タスクの進行状況を定義します。 |
<rp> |
ルビアノテーションをサポートしていないブラウザで何を表示するかを定義します。 |
<rt> |
文字に関する解釈/発音を定義します (東アジアのフォントの場合)。 |
<ruby> |
ルビ注釈を定義します (東アジアのフォント用)。 |
<section> |
ドキュメント内のセクションを定義します。 |
<summary> |
<details>要素の表示されるタイトルを定義します。 |
<time> |
日付/時刻を定義します。 |
<wbr> |
可能な改行を定義します。 |
3. スタイルガイドとコード規約
- 小文字の属性名を使用することをお勧めします
- 空のプロパティ名を閉じます
<meta charset="utf-8" />
- すべての HTML 要素を閉じることをお勧めします。[ペアで表示されます]
- 属性値に引用符を追加する
- 画像には常に alt 属性を使用します。このプロパティは、画像を表示できない場合に重要です。
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">
- 常に画像の寸法を定義します。これを行うと、ブラウザが画像を読み込む前にスペースを確保するため、ちらつきが軽減されます。
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">
- カンマまたはセミコロンの後にスペースを追加するのは、あらゆる種類の文章の一般的なルールです。
- スタイルシートをリンクするには、単純な構文を使用してください (type 属性は必要ありません)。
<link rel="stylesheet" href="styles.css">
- 外部スクリプトをロードするには、単純な構文を使用してください (type 属性は必要ありません)。
<script src="myscript.js">
- (可能であれば) 常に小文字のファイル名を使用してください
4. 文字エンティティ
| 結果を示す | 説明 | エンティティ名 | エンティティ番号 |
|---|---|---|---|
| 空 | |
  |
|
| 1行目のインデント |   |
||
| < | 小なり記号 | < |
< |
| > | 大なり記号 | > |
> |
| & | アンパサンド | & |
& |
| 」 | 引用符 | " |
" |
| ' | アポストロフィ | ' (IEは対応しておりません) |
' |
| ￠ | 分（cent） | ¢ |
¢ |
| £ | ポンド | £ |
£ |
| ¥ | 元（円） | ¥ |
¥ |
| ユーロ | ユーロ（ユーロ） | € |
€ |
| § | セクション | § |
§ |
| © | 著作権 | © |
© |
| ® | 商標 | ® |
® |
| ™ | 商標 | ™ |
™ |
| × | 乗算記号 | × |
× |
| ÷ | 区切り記号 | ÷ |
÷ |
その他の具体的な詳細については、w3schoolを参照してください。
5. ユニフォーム リソース ロケーター URL
URL は、「w3school.com.cn」などの単語、またはインターネット プロトコル (IP) アドレス 192.168.1.253 で構成できます。名前の方が数字より覚えやすいため、ほとんどの人は Web サーフィンをするときに Web アドレスのドメイン名を入力します。
ルールに従ってください:scheme://host.domain:port/path/filename
説明：
- スキーム - インターネット サービスのタイプを定義します。最も一般的なタイプは http です
- host - ドメイン ホストを定義します (http のデフォルトのホストは www)
- ドメイン - インターネット ドメイン名を定義します (w3school.com.cn など)。
- :port - ホスト上のポート番号を定義します (http のデフォルトのポート番号は 80)
- path - サーバー上のパスを定義します (省略した場合、ドキュメントは Web サイトのルート ディレクトリに存在する必要があります)。
- filename - ドキュメント/リソースの名前を定義します。
6. 枠組み
フレーム フレーム
を使用すると、同じブラウザ ウィンドウに複数のページを表示できます。各 HTML ドキュメントはフレームと呼ばれ、各フレームは他のフレームから独立しています。
フレームを使用するデメリット:
- 開発者はより多くの HTML ドキュメントを同時に追跡する必要がある
- ページ全体を印刷するのは難しい
フレーム構造タグ ( <frameset>)
- 框架结构标签（
<frameset>）定义如何将窗口分割为框架 - 每个 frameset 定义了一系列行或列
- rows/columns 的值规定了每行或每列占据屏幕的面积
基本的注意事项 - 有用的提示：
- 假如一个框架有可见边框，用户可以拖动边框来改变它的大小。为了避免这种情况发生，可以在 标签中加入：noresize=“noresize”。
- 为不支持框架的浏览器添加 标签。
重要提示：不能将 <body></body> 标签与 <frameset></frameset> 标签同时使用！不过，假如你添加包含一段文本的 <noframes> 标签，就必须将这段文字嵌套于<body></body>标签内。
6.1 如何利用框架制作导航栏
导航框架包含一个将第二个框架作为目标的链接列表。名为 “contents.html” 的文件包含三个链接。通过锚定的方法制作导航栏。
<html>
<frameset cols="120,*">
<frame src="/demo/html/content.html">
<frame src="/example/html/frame_a.html" name="showframe">
</frameset>
</html>
七、使用插件
浏览器插件是一种扩展浏览器标准功能的小型计算机程序。插件有很多用途：播放音乐、显示地图、验证银行账号，控制输入等等。可使用 <object> 或 <embed> 标签来将插件添加到 HTML 页面。
这些标签定义资源（通常非 HTML 资源）的容器，根据类型，它们即会由浏览器显示，也会由外部插件显示。
最好的方法：
<audio controls="controls" height="100" width="100">
<source src="song.mp3" type="audio/mp3" />
<source src="song.ogg" type="audio/ogg" />
<embed height="100" width="100" src="song.mp3" />
</audio>
上面的例子使用了两个不同的音频格式。HTML5<audio>元素会尝试以 mp3 或 ogg 来播放音频。如果失败，代码将回退尝试<embed> 元素。
问题：
- 您必须把音频转换为不同的格式。
<audio>元素无法通过 HTML 4 和 XHTML 验证。<embed>元素无法通过 HTML 4 和 XHTML 验证。<embed>元素无法回退来显示错误消息。
注释：使用 (HTML5) 解决验证问题。
其他方式：
- 使用雅虎播放器
- 使用超链接形式（也就是借助浏览器自带的音乐播放器）
主要运用如下属性：
| 标签 | 描述 |
|---|---|
<audio> |
标签定义声音，比如音乐或其他音频流。 |
<embed> |
标签定义嵌入的内容，比如插件。 |
八、HTML视频
HTML 5 <object> ++に最適な HTML ソリューション <embed>
<video width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
<source src="movie.webm" type="video/webm" />
<object data="movie.mp4" width="320" height="240">
<embed src="movie.swf" width="320" height="240" />
</object>
</video>
上記の例では、4 つの異なるビデオ形式が使用されています。HTML 5
<video>要素は、mp4、ogg、または webm 形式のいずれかでビデオを再生しようとします。すべて失敗した場合は、<embed>要素。
その他の方法:
- HTML でビデオを表示する最も簡単な方法は、Youku などのビデオ サイトを使用することです。Web ページ上でビデオを再生したい場合は、ビデオを Youku などのビデオ サイトにアップロードし、HTML コードを Web ページに挿入してビデオを再生できます。
<embed src="http://player.youku.com/player.php/sid/XMzI2NTc4NTMy/v.swf"
width="480" height="400"
type="application/x-shockwave-flash">
</embed>
- ハイパーリンクを使用する