H5 セマンティック タグ

今回は H5 のセマンティックタグについて説明します。H5 セマンティックタグを使用する際の注意事項は何ですか?実際のケースを見てみましょう。

HTML5 の新機能

簡潔な DOCTYPE:

HTML5 には単純なドキュメント タイプ : のみがあり、ブラウザはそれを次のように解析します。標準モード。 <code>：，表示浏览器会按照标准模式解析。

简单易记的编码类型

你现在可以在meta 标签中使用”charset”：<meta charset="”utf-8″">

シンプルで覚えやすいエンコードタイプ

メタタグで「charset」を使用できるようになりました: <meta charset="utf-8″ />

スクリプトとリンク タイプは必要ありません

<link>
<script></script>

よりセマンティックな新しいタグ

例:

、

、

、

、

、、

、、、

、

など

ビデオとオーディオ

<video>
    <source></source>
    <source></source>
    Your browser does not support the video tag.
</video>

フォームの拡張

新しい入力タイプ:色、電子メール、日付、月、週、時間、日時、ローカル日時、数値、範囲、検索、電話番号、URL

新しい属性:

require

d、オートフォーカス、パターン、リスト、オートコンプリート、プレースホルダー

新規要素: 、

canvas タグは 2D グラフィックを描画します。

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(100,100);
context.lineTo(300,300);
context.lineTo(100,500);
context.lineWidth = 5;
context.strokeStyle = "red";
context.stroke();

位置情報の取得

HTMLセマンティクス

1. HTMLセマンティクスとは何ですか?

タグを通じてコン​​テンツのセマンティクスを決定します。たとえば、h1 タグに基づいてコンテンツがタイトルであるかどうかを決定し、

に基づいてコンテンツが段落であるかを決定します。入力ボックスなど

2. なぜセマンティクスなのか?

1) スタイルが削除または失われた場合、ページは明確な構造を提示できます2) 他のデバイス (スクリーン リーダー、ブラインド リーダー、モバイル デバイスなど) が Web ページをレンダリングするのに便利です。意味のある方法3) . SEO に役立ちます

4)。W3C 標準に準拠しており、タグが意味的に適切かどうかを判断する方法は?

スタイルを削除して、Web ページの構造がよく整理され、整然としているかどうか、また非常に読みやすいかどうかを確認します。

4. 共通のセマンティック ラベル モジュール

フォーム

    

        

登录表单

        

账号：

        

密码：

             

フォーム フィールドは、fieldset タグでラップする必要があり、各

input タグ

に対応する説明テキストを説明するために使用する必要があります。 label タグを作成し、入力の id 属性を設定し、label タグで for=someld を設定することで、説明テキストを対応する入力に関連付けます。

5. セマンティックタグで注意すべきいくつかの問題

非セマンティックタグ p と spam はできるだけ少なく使用してください
セマンティックが明らかでない場合は、p または p を使用してください。デフォルトでは、上部と下部にスペースがあり、特別な端末との互換性にとって有益です。

b、font、u などの純粋なスタイル タグを使用せず、代わりに CSS 設定を使用してください。

強調する必要があるテキストは、strong タグまたは em タグに含めることができます。strong のデフォルトのスタイルは太字 (b を使用しない)、em は斜体 (i を使用しない) です

この記事の事例を読んで方法をマスターしました。さらにエキサイティングな内容については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:
HTML5 で画像を回転させるアニメーション効果を実現する方法

H5 ビデオで BGM を自動的に再生する方法

🎜🎜

以上がH5 セマンティック タグの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。