セマンティックタグの分析例、HTML5の新機能-H5 チュートリアル-php.cn

セマンティックタグの分析例、HTML5の新機能

黄舟

リリース： 2017-11-01 10:44:52

オリジナル

1562 人が閲覧しました

HTML5 には、という単純なドキュメントタイプが 1 つだけあります。これは、ブラウザが標準モードに従ってドキュメントタイプを解析することを意味します。今日、エディターは HTML5 の新機能であるセマンティックタグをご紹介します。興味のある方はぜひ一緒にご覧ください

HTML5 には 1 つの単純なものしかありません。ドキュメントタイプ : <!DOCTYPE html>。ブラウザが標準モードに従って解析することを示します。 ：<!DOCTYPE html>，表示浏览器会按照标准模式解析。

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

、

、、

、< footer>、

、、、

、

など

ビデオとオーディオ

<video width="640" height="320" preload="auto" poster="0.jpg" controls>
    <source src="movie.ogg" type="video/ogg" />
    <source src="movie.mp4" type="video/mp4" />
    Your browser does not support the video tag.
</video>

ログイン後にコピー

フォームの拡張

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

新しい属性:

require

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

新規要素: 、、、、

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

var canvas = document.getElementById(&#39;canvas&#39;);
var context = canvas.getContext(&#39;2d&#39;);
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. 共通のセマンティックラベルモジュール

フォーム

<form action="" method="">
    <fieldset style="border: none">
        <legend style="display: none">登录表单</legend>
        <p><label for="name">账号：</label><input type="text" id="name"></p>
        <p><label for="pw">密码：</label><input type="password" id="pw"></p>
        <input type="submit" name="登录" class="subBtn">
    </fieldset>
</form>

ログイン後にコピー

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

input タグ

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

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

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

b、font、u などの純粋なスタイルタグを使用せず、代わりに CSS 設定を使用してください。 🎜強調する必要があるテキストは、strong タグまたは em タグに含めることができます。strong のデフォルトのスタイルは太字 (b は使用しない)、em は斜体 (i を使用しない) です。

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