ホームページ > 記事 > ウェブフロントエンド > HTML5とCSSの置き換え利用について
HTML5とCSSの置き換え利用について
- 迷茫オリジナル
- 2017-01-17 09:38:591873ブラウズ
HTML5 について聞いたことがある人なら誰でも、より説明的なマークアップ、プラグインへの依存度が低いマルチメディア サポート、ドキュメント間のメッセージ通信、Web ソケット、クライアント側のストレージ、より強力なフォーム、アクセシビリティの向上、高度な機能など、HTML5 の威力を知っています。セレクター、強力な視覚効果。早速、詳細を見ていきましょう
非推奨のタグと属性
非推奨のタグ
CSSで置き換えられるため非推奨です
basefont
big
center
font
strike
tt
う
s
ユーザビリティとアクセシビリティを損なうため非推奨です
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>記事テキスト部分 36cc49f0c466276486e50c850b7e495673a6ac4ed44ffec12cee46588e518a5e
HTML5 では、aba7b36f87decd50b18c7e3e3c150106 を使用するだけでドキュメントのタイプを宣言できることは誰もが知っています。この文には 2 つの重要な機能があります
バリデーターは以下に基づいています。コードを検証するためにどのような検証ルールを使用するかを決定します
ドキュメント型宣言により、IE6、IE7、および IE8 に標準モジュールでページをレンダリングするように強制できます
hgroup は Web ページまたはセクションのタイトルを結合します
4c7441983e916c41733e1d25543c9339
4aeef7d099fb27fd12422471c92ecdd1
c1a436a314ed609750bd7c7d319db4da追加のタイトル情報: 笑2e9b454fa8428549ca2e64dfac4625cdd7fb206ed7081b134e1edd3f2b3137f0
ヘッダー ページのヘッダーまたはセクション
ヘッダー要素は、ガイドおよびナビゲーション機能を持つ要素です。ヘッダーには会社のロゴから検索ボックスまでさまざまなコンテンツが含まれる場合があるため、ヘッダーと h1 などのタグを混同しないでください。同じページに複数のヘッダー要素を含めることができ、各独立セクションまたは記事セクションに独自のヘッダーを含めることができます。
1aa9e5d373740b65a0cc8f0a02150c53
4a249f0d628e2318394fd9b75b4636b1ページ内の重要な情報、タイトルなど473f0a7621bec819994bb5020d29372aab946e7546ab66a280dd9c9f9310ecd523c3de37f2f9ebcb477c4a90aac6fffd
1aa9e5d373740b65a0cc8f0a02150c53記事内実際、タイトル情報は非常に重要であり、顕著な効果があります473f0a7621bec819994bb5020d29372a
ab946e7546ab66a280dd9c9f9310ecd5
footer ページまたはセクションのフッター footer 要素は、次のフッター情報を定義するために使用されます。文書または隣接するセクション。 HTML5 仕様では、同じページ内に複数のフッター要素を表示できます。つまり、フッターにはヘッダーと同様に、通常は他の要素も含めることができます。通常、フッターには、著者、関連する読書リンク、著作権情報など、関連するブロックに関する追加情報が含まれます。 以下は私の正確な本質であり、間違った紹介はまったくありません私はインターネット上の専門家グループと協力してプログラミングのための無料学習グループを設立しました。あなたは私たちのグループに来て聞くだけで済みます。数字の最初の部分 考えてみると、真ん中の数字のいくつかは Lingerqi で、最後の数字は Yiwu4 です。ここには無料の学習リソースがあり、毎日ライブ コースがあります。料金を支払う必要はありません。 、学ぶ心さえあればいいのです。 学びたくないなら参加しないでください。 c37f8231a37e88427e62669260f0074d ff6d136ddc5fdfeffaf53ff6ee95f185著作権情報bed06894275b65c1ab86501b08a632ebサイトマップbed06894275b65c1ab86501b08a632eb関連リンクbed06894275b65c1ab86501b08a632eb .bed06894275b65c1ab86501b08a632eb 929d1f5ca49e04fdcb27f9465b94468984122da5b51c58ef54d7045814144010ナビゲーション ページまたはセクションのナビゲーション領域 通常、ページには複数のナビゲーション要素を含めることができます。 . これにより、アクセシビリティが向上し、訪問者がそれを明確に識別できるようになります。 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 Blog5db79b134e9f6b82c0b36e0489ee08ed
このコードの利点は誰でも知っています。そうですか? 答えはアクセシビリティを向上させることです
アクセシブルなページを構築するための最初のステップは、JavaScript が無効になってもすべての機能が正常に機能するようにすることです。 onclick 属性と同様に、動作とコンテンツが密接に結びつきすぎます
。