今日は、新しいHTML5/"> HTML5シリーズコースを開始します。これは、「HTML5の決定的なガイド」に関する私の研究メモです。誰もが学ぶために良い、または意味のある章や意味のあるコンテンツを整理します。
要素は、ローカル属性と呼ばれるHREF属性を定義するタグなど、独自の属性を定義できます。それに対応して、グローバル属性を使用して、すべての要素の共通の動作を設定できます。もちろん、個々の要素にグローバルな属性を設定することもできますが、そうすることはあまり意味がありません。以下に、これらのグローバル属性を1つずつ紹介します。
次の例は、クロムブラウザで正常に実行されます。 Firefoxのいくつかの例は実行できず、他のブラウザをテストしていないため、Chromeブラウザーを好みのHTML5ブラウザとして使用することをお勧めします。ブラウザの互換性の問題ではなく、学習と実装に焦点を当てています。 HTML5はまだ改善されています。その人気により、主流のブラウザはそれをより良くサポートし、ブラウザの互換性の問題はその時点ではるかに良くなると思います。
1.AccessKeyAccessKeyプロパティを使用すると、1つ以上のキーボードショートカットを設定して、ページ上の要素を選択できるようにします。次の例を見てみましょう。
<！doctype html>
<html>
<head>
<title>例</title>
</head>
<body>
<form>
名前：<入力タイプ= "テキスト" name = "name" accesskey = "n"/>
<p/>
パスワード：<入力タイプ= "パスワード" name = "password" accesskey = "p"/>
<p/>
<入力型= "submit" value = "login" accessKey = "s"/>
</form>
</body>
</html>
この例では、キーの組み合わせを使用して、ページ内の要素を選択できます。たとえば、Windowsオペレーティングシステムでは、ALT+XXXを使用して要素を選択できます。
ランニング効果：
2.クラスこの属性についてこれ以上何も言いたくありません。これは、要素をグループ化する関数です。ほとんどの場合、CSSと組み合わせて使用して、異なるグループの要素の異なるディスプレイ効果を設定します。
3.ContentEdableこれは、HTML5に追加された新しい属性です。 HTML要素にコンテンツ誘導属性を追加し、それをTrueに設定し、ユーザーが要素コンテンツを編集できるようにします。 falseに設定し、ユーザーが編集できるようにしません。
<！doctype html>
<html>
<head>
<title>例</title>
</head>
<body>
<p contentedable = "true">今は雨が降っています</p>
</body>
</html>
4.ContextMenuContextMenuを使用すると、ユーザーはHTML要素の右クリックメニューを設定でき、ユーザーがトリガーするとメニューがポップアップします。これまでのところ、このプロパティをサポートしているブラウザはありません。
5.DIR DIR属性は、HTML要素リテラルのアラインメントを定義し、LTR（左から右）とRTL（右から左）の2つの値をサポートします。<！doctype html>
<html>
<head>
<title>例</title>
</head>
<body>
<p dir = "rtl">これは左に右になります</p>
<p dir = "ltr">これは左から右に</p>です
</body>
</html>
6.ドラッグ可能Draggableは、HTML5のHTML要素のドラッグアンドドロップ関数を実装する属性であり、次のコースで詳細に紹介します。
7.ドロップゾーンDropzoneは、HTML5のHTML要素ドラッグ関数を実装する属性でもあります。後のコースで詳細に紹介します。
8.ハイド誰もがこの属性に精通している必要があります。これは、HTML要素を非表示にすることです。
9.ID誰もがこの属性を知っている必要があります。 HTML要素の一意の識別子を設定し、HTMLページではかなりのIDを持つ要素は許可されていません。
10.LangLangは、HTML要素のコンテンツに使用される言語を指定します。 Langの値は、有効なISO言語コードでなければなりません。詳細については、以下のアドレスをご覧ください。http：//tools.ietf.org/html/bcp47をご覧ください。言語に対処することは非常に複雑で技術的な問題であることに注意する必要があります。
<！doctype html>
<html>
<head>
<title>例</title>
</head>
<body>
<p lang = "en">こんにちは - お元気ですか？</p>
<p lang = "fr"> bonjour-コメントêtes -vous？</>
<p lang = "es"> hola-¿cómoEstás？</p>
</body>
</html>
11.SpellCheckスペルチェック属性を使用する場合、ブラウザは、HTML要素のスペルチェックコンテンツが正しくスペルになっているかどうかを確認するのに役立ちます。 HTML要素が編集可能な場合にのみ、SpellCheck属性を意味することができます。<！doctype html>
<html>
<head>
<title>例</title>
</head>
<body>
<TextArea SpellCheck = "True">これは、誤ったテキスト</textarea>です
</body>
</html>
効果：（私はクロムで望ましい効果を実行しませんでした、私は理由がわかりません）
12.スタイルこの属性をあまり導入しすぎて、HTML要素のCSSスタイルを設定する必要はありません。
13.tabindexTabindexを使用すると、TABキーを使用するときにHTML要素にアクセスする順序を定義できます。 Tabindexが-1に設定されている場合、TABキーを使用してHTML要素は選択されません。
<！doctype html>
<html>
<head>
<title>例</title>
</head>
<body>
<form>
<label> name：<入力型= "text" name = "name" tabindex = "1"/> </label>
<p/>
<label> city：<入力型= "テキスト" name = "city" tabindex = "-1"/> </label>
</p>
<label> country：<入力型= "text" name = "country" tabindex = "2"/> </label>
</p>
<input type = "submit" tabindex = "3"/>
</form>
</body>
</html>
効果：
14.titleタイトルは、迅速な情報を表示するためによく使用されるHTML要素の追加情報を提供できます。<！doctype html>
<html>
<head>
<title>例</title>
</head>
<body>
<a href = "http://apress.com"> Apressサイトにアクセス</a>
</body>
</html>
効果：
今日のコースはこれですべてです。これらのコンテンツがすべての人に役立つことを願っています。
デモのダウンロードアドレス：html5guide.rar