H5 セマンティックタグ-H5 チュートリアル-php.cn

H5 セマンティックタグ

php中世界最好的语言

リリース： 2018-03-27 14:01:57

オリジナル

2552 人が閲覧しました

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

HTML5 には単純なドキュメントタイプ : <!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('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. 共通のセマンティックラベルモジュール

フォーム

<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 を使用しない) です

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

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

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

🎜🎜