簡単な HTML5 の予備的な入門チュートリアル_html5 チュートリアルのスキル
HTML5 は未来を表します。W3C (World Wide Web Consortium、World Wide Web Consortium) は XHTML を放棄し、HTML5 を公式の標準として認めました。
HTML5 は次世代の HTML です。
HTML5 は、既存の HTML4.01 および XHTML1.0 標準を置き換えることを目的として、HTML、XHTML、および HTML DOM の新しい標準になります。リッチ インターネット アプリケーション (RIA) の Flash、Silverlight、JavaFX などへの依存を減らし、ネットワーク アプリケーションを効果的に強化できる API をさらに提供したいと考えています。
HTML の最後のバージョンは 1999 年に作成されました。それ以来、Web の世界は劇的に変化しました。
HTML5 はまだ開発中です。ただし、最新のブラウザのほとんどはすでに HTML5 をある程度サポートしています。
HTML5 は、W3C と WHATWG のコラボレーションの成果です。
WHATWG は Web フォームとアプリケーションに取り組んでいますが、W3C は XHTML 2.0 に重点を置いています。 2006 年に、両者は協力して新しいバージョンの HTML を作成することにしました。
HTML5 用に確立されたいくつかのルール:
新機能は HTML、CSS、DOM、および JavaScript に基づく必要があります。
外部プラグイン (Flash など) の必要性を減らす
エラー処理を改善する
スクリプトを置き換えるマークアップを増やす
HTML5 はデバイスに依存しない必要がある
開発プロセスは公開されるべきである
最も単純な HTML5 ドキュメント
- >
- <タイトル>小さな HTML ドキュメントタイトル>
- <p>HTML5 スタイルでブラウザを動かしましょう。< ;/p>
テキストが 1 行だけ含まれる非常に単純な HTML5 ドキュメント。ブラウザでは次のように表示されます。
より一般的な構造では、
- >
- <html>
- <頭>
- <title>小さな HTML ドキュメントタイトル>
- 頭>
- <ボディ>
- <p>HTML5 スタイルでブラウザを動かしましょう。< ;/p>
- ボディ>
- html>
、
、 HTML5 ではこれらの要素は必要ありませんが、この書き方の方が優れています。HTML5 ドキュメントタイプ
- >
最初の行は特定のドキュメント タイプ宣言である必要があります。これは、後続のドキュメント マークアップがどの標準に従うかを示すために使用されます。 HTML5 の文書型宣言は非常に単純です。
文字エンコーディング
現在、ほとんどの Web サイトは UTF-8 エンコーディングを使用しています。これは簡潔で変換が速く、必要な英語以外の文字もサポートしています。
HTML5 で文字エンコーディング情報を追加するのは非常に簡単です。次のように 要素を追加します。
- <頭>
- <メタ charset="utf- 8">
- <title>小さな HTML ドキュメントタイトル>
- 頭>
Dreamweaver デザイン ツールは、新しい Web ページを作成するときにこのメタ情報を自動的に追加し、ファイルを UTF エンコードで保存します。最も単純なテキスト エディタを使用している場合は、保存時に正しいエンコード (UTF-8) を選択することを忘れないでください。
Web ページで使用される自然言語を示すことは良い習慣です。コンテンツの言語を指定するには、任意の要素で lang 属性を使用します。
ページ全体に言語の説明を追加するには、次のコードに示すように、 要素に lang 属性を指定する必要があります。
- <html lang="zh-CN">
スタイルシートを追加
プロがデザインしたウェブサイトである限り、スタイルシートは必ず使用されます。使用する CSS スタイル シートを指定する場合は、次のように
に 要素を追加する必要があります。 XML/HTML コード- <頭>
- <メタ charset="utf- 8">
- <title>小さな HTML ドキュメントタイトル>
- <リンク rel="スタイルシート" href="TinyHTML5.css">
- 頭>
JavaScript を追加
HTML5 に JavaScript を追加することは、従来のページに JavaScript を追加することと似ています。たとえば、
- <頭>
- <メタ charset="utf- 8">
- <title>小さな HTML ドキュメントタイトル>
- <リンク rel="スタイルシート" href="TinyHTML5.css">
- <script src="TinyHTML5. js">スクリプト>
- 頭>
language="JavaScript" 属性を追加する必要はありません。ブラウザは JavaScript の使用を前提としています。
特記事項:
IE で JavaScript を含むページのテストに多くの時間を費やしたい場合は、Web マークと呼ばれる特別なコメント (url= から保存) も追加する必要があります。このコメント行は、指定された文字エンコーディング要素の後に配置する必要があります。以下のように:
- <頭>
- <メタ charset="utf- 8">
- <title>小さな HTML ドキュメントタイトル>
このコメントは、IE にページをリモート Web サイトからダウンロードされたものとして扱うよう指示します。そうしないと、IE は特別なロック モードに切り替わり、[ブロックされたコンテンツを許可する] をクリックした後にセキュリティ警告をポップアップ表示します。ボタンが押されるまで実行されます。
(0014) は、about:internet 文字列の長さを指します。
最終結果
完全で美しい HTML5 コードは最終的に次のようになります:
- >
- <html lang="zh- CN「> 」
- <頭>
- <メタ charset="utf- 8">
- <title>小さな HTML ドキュメントタイトル>
- <リンク rel="スタイルシート" href="TinyHTML5.css">
- <script src="TinyHTML5. js">スクリプト>
- 頭>
- <ボディ>
- <p>HTML5 スタイルでブラウザを動かしましょう。< ;/p>
- ボディ>
- html>
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7322
9
1625
14
1350
46
1261
25
1209
29
HTMLの表の境界線
Sep 04, 2024 pm 04:49 PM
HTML の表の境界線に関するガイド。ここでは、HTML でのテーブルの境界線の例を示しながら、テーブル境界線を定義する複数の方法について説明します。
HTML のネストされたテーブル
Sep 04, 2024 pm 04:49 PM
これは、HTML でのネストされたテーブルのガイドです。ここでは、テーブル内にテーブルを作成する方法をそれぞれの例とともに説明します。
HTML 左マージン
Sep 04, 2024 pm 04:48 PM
HTML マージン左のガイド。ここでは、HTML margin-left の概要とその例、およびそのコード実装について説明します。
HTML テーブルのレイアウト
Sep 04, 2024 pm 04:54 PM
HTML テーブル レイアウトのガイド。ここでは、HTML テーブル レイアウトの値と例および出力について詳しく説明します。
HTML 内のテキストの移動
Sep 04, 2024 pm 04:45 PM
HTML でのテキストの移動に関するガイド。ここでは、概要、マーキー タグが構文でどのように機能するか、および実装例について説明します。
HTML の onclick ボタン
Sep 04, 2024 pm 04:49 PM
HTML オンクリック ボタンのガイド。ここでは、それらの紹介、動作、例、およびさまざまなイベントでの onclick イベントについてそれぞれ説明します。
HTML入力プレースホルダー
Sep 04, 2024 pm 04:54 PM
HTML 入力プレースホルダーのガイド。ここでは、コードと出力とともに HTML 入力プレースホルダーの例について説明します。
