HTML5とCSSの置き換え利用について

迷茫

リリース： 2017-01-17 09:38:59

オリジナル

2185 人が閲覧しました

HTML5 について聞いたことがある人なら誰でも、より説明的なマークアップ、プラグインへの依存度が低いマルチメディアサポート、ドキュメント間のメッセージ通信、Web ソケット、クライアント側のストレージ、より強力なフォーム、アクセシビリティの向上、高度な機能など、HTML5 の威力を知っています。セレクター、強力な視覚効果。早速、詳細を見ていきましょう

非推奨のタグと属性

非推奨のタグ

CSSで置き換えられるため非推奨です

basefont

big

center

font

strike

う

ユーザビリティとアクセシビリティを損なうため非推奨です

frame

frameset

noframes

混乱を引き起こすため、使用頻度が低いため非推奨です

頭字語は頻繁に使用されるため非推奨ですページは乱雑です、代わりにabbrを使用できます

アプレットは代わりにオブジェクトを使用できるため非推奨です

isindexは代わりにフォームコントロールを使用できるため非推奨です

dirは代わりにulを使用できるため非推奨です

noscript要素はHTMLでのみ使用できますXMLでは使用できません。。

非推奨の属性

align

bodyタグのlink、vlink、alink、text属性

bgcolor

heightとwidth

iframe要素のscrolling属性

valign

hspaceとvspace

tableタグセルパディング、

のcellspacing属性とborder属性は、上記の要素によって達成される視覚効果はCSSで実現できるため、放棄されました

さらに、target属性は仕様で放棄されました

headタグのprofile属性は廃止されますサポートされます

img 要素と iframe 要素の longdesc 属性も削除されました

HTML5 仕様には、これらの属性の代替手段があります

新しい構造タグと属性

ドキュメント型宣言

<!doctype html><html>
  <head>
    <meta charset="UTF-8">
    <title>文章标题</title>
  </head>
  <body>

ログイン後にコピー

記事テキスト部分

HTML5 では、を使用するだけでドキュメントのタイプを宣言できることは誰もが知っています。この文には 2 つの重要な機能があります

バリデーターは以下に基づいています。コードを検証するためにどのような検証ルールを使用するかを決定します

ドキュメント型宣言により、IE6、IE7、および IE8 に標準モジュールでページをレンダリングするように強制できます

hgroup は Web ページまたはセクションのタイトルを結合します

< hgroup>

追加のタイトル情報: 笑

ヘッダーページのヘッダーまたはセクション

ヘッダー要素は、ガイドおよびナビゲーション機能を持つ要素です。ヘッダーには会社のロゴから検索ボックスまでさまざまなコンテンツが含まれる場合があるため、ヘッダーと h1 などのタグを混同しないでください。同じページに複数のヘッダー要素を含めることができ、各独立セクションまたは記事セクションに独自のヘッダーを含めることができます。

ページ内の重要な情報、タイトルなど

記事内実際、タイトル情報は非常に重要であり、顕著な効果があります

footer ページまたはセクションのフッター

footer 要素は、次のフッター情報を定義するために使用されます。文書または隣接するセクション。 HTML5 仕様では、同じページ内に複数のフッター要素を表示できます。つまり、フッターにはヘッダーと同様に、通常は他の要素も含めることができます。通常、フッターには、著者、関連する読書リンク、著作権情報など、関連するブロックに関する追加情報が含まれます。

以下は私の正確な本質であり、間違った紹介はまったくありません

私はインターネット上の専門家グループと協力してプログラミングのための無料学習グループを設立しました。あなたは私たちのグループに来て聞くだけで済みます。数字の最初の部分考えてみると、真ん中の数字のいくつかは Lingerqi で、最後の数字は Yiwu4 です。ここには無料の学習リソースがあり、毎日ライブコースがあります。料金を支払う必要はありません。、学ぶ心さえあればいいのです。学びたくないなら参加しないでください。

ナビゲーションページまたはセクションのナビゲーション領域

通常、ページには複数のナビゲーション要素を含めることができます。 . これにより、アクセシビリティが向上し、訪問者がそれを明確に識別できるようになります。 nav 要素は、ページナビゲーションとして使用できるリンクのグループです。ナビゲーション要素は、他のページまたは現在のページの他の部分にリンクします。

<nav>
  <ul>
    <li><a href="/home/">首页</a></li>
    <li><a href="/newBlog/">新随笔</a></li>
    <li><a href="/link/">联系</a></li>
    <li><a href="/manage/">管理</a></li>
  </ul>
</nav>

ログイン後にコピー

セクションページの論理領域またはコンテンツの組み合わせ

セクションはページ上の論理領域です。ページの論理領域を記述する場合、以前に悪用された div タグを置き換えるためにセクション要素を使用できます。実際、セクション要素を使用してコンテンツを合理的に分類します。一般に、セクションにはヘッドとコンテンツのコンテンツブロックが含まれます。

セクション要素は一般的なコンテナ要素ではないため、要素で対応するスタイルまたはスクリプトを定義する必要がある場合は、セクションを使用する条件として、この要素のコンテンツを確実に定義できるようにする必要があります。文書のアウトラインに明確に表示されます。

記事のテキストまたは完全な社内記事

Web ページの実際のコンテンツを説明するのに最も適した要素は、article タグです。 Section タグは文書の論理的な部分の記述とみなされ、article タグは具体的な内容の記述とみなされます。セクションには複数の記事を含めることができ、記事のコンテンツを複数のセクションに分割することができます。セクション要素は、他の要素を論理的にグループ化するために使用できる、より一般的な要素です。要素の内容をまとめて表示し、対応する意味を表現できる場合にはarticle要素として定義することができ、section要素を使用する必要はありません。

article 要素内で header 要素と footer 要素を使用すると、特定の論理領域をより簡単に説明できます。また、section 要素を使用してドキュメントを複数の部分に分割することもできます。

article は、ドキュメントコンテンツの独立した断片を表します。article は、セクションよりも明確な意味を持つ、関連するコンテンツの独立した完全なブロックを表します。一般に、記事にはタイトルセクション (通常はヘッダー内に含まれます) があり、フッターが含まれる場合もあります。セクションもテーマ別のコンテンツですが、記事自体は構造と内容の点で独立しており、完全です。記事内に記事を埋め込む場合、原則として内側の記事の内容は外側の記事の内容と関連します。

補足または関連コンテンツ以外

場合によっては、紹介、グラフ、関連リンクなど、メインコンテンツに追加情報を追加する必要があります。このとき、それを識別するために Side タグを使用できます。

カスタムデータ属性

開発者は、HTML、asp.net MVC の将来のバージョンとの競合を避けるために、プレフィックスとしてデータを付ける限り、任意の要素に必要な属性を定義できます。以下の jQuery 検証ではこのメソッドが使用されます。カスタムデータ属性を使用して、クライアントスクリプトに追加情報を提供します。カスタムデータ属性によってブラウザエラーが発生することはなく、HTML5 ドキュメントタイプ宣言によってドキュメントが有効であることが保証されます。すべてのカスタムデータ属性は data- プレフィックスで始まるため、HTML5 ドキュメントのバリデーターは検証時にこれを無視します。カスタム属性はほとんどすべてのブラウザで使用できるため、JavaScript を使用して簡単にアクセスできます。

最後に小さなデモを見てみましょう:

(this.href,'winName','width=500,height=500')">My Blog

このコードの利点は誰でも知っています。そうですか? 答えはアクセシビリティを向上させることです

アクセシブルなページを構築するための最初のステップは、JavaScript が無効になってもすべての機能が正常に機能するようにすることです。 onclick 属性と同様に、動作とコンテンツが密接に結びつきすぎます

。