セマンティックタグを使用して、IE6、7、8と互換性のあるHTMLを記述します。

セマンティックタグを使用して、IE6、7、8と互換性のあるHTMLを記述します。

HTML5 では、ヘッダー、フッター、ナビゲーションなどのセマンティック タグが追加されているため、ページを作成するときに次の方法を使用してレイアウトする必要がなくなりました。

XML/HTML コードコンテンツをクリップボードにコピー
  1. < div   class = "header" >これはヘッダーです</ div >   
  2. < div   class = "content" >これは中央のコンテンツ領域です</ div >   
  3. < div   class = "footer" >これは一番下です</ div >     

次のようにレイアウトできます。

XML/HTML コードコンテンツをクリップボードにコピー
  1. <header>これヘッダーです</header>   
  2. < content >これは中央のコンテンツ領域です</ content >   
  3. <フッター>これは一番下です</フッター>     

しかし、IE は forward をサポートしていないため、IE6、7、8 をサポートする場合は、次のように js と css に少しコードを追加する必要があります。

XML/HTML コードコンテンツをクリップボードにコピー
  1. document.createElement("ヘッダー");
  2. document.createElement("コンテンツ");
  3. document.createElement("フッター");

CS: ...

ヘッダー、コンテンツ、フッター{display:block}

上記は、タグをヘッダーとしてカスタマイズし、表示をブロックするように設定することを意味します。完全なコードは以下に添付されています。

XML/HTML コードコンテンツをクリップボードにコピー
  1. <!DOCTYPE html >   
  2. <html>   
  3. <ヘッド>   
  4. <メタ 文字セット= "utf-8" >   
  5. < title >セマンティックタグを使用して、IE6、7、8 と互換性のある HTML を記述します</ title >   
  6. <スタイル>   
  7. *{マージン:0;パディング:0;}
  8. ヘッダー、コンテンツ、フッター{display:block}
  9. ヘッダー{幅:600px;高さ:150px;行の高さ:150px;境界線:1px solid #000;余白:10px auto;テキスト配置:center;フォントサイズ:24px}
  10. コンテンツ{幅:600px;高さ:250px;行の高さ:250px;境界線:1px 実線 #000;余白:10px 自動;テキスト配置:中央;フォントサイズ:24px}
  11. フッター{幅:600px;高さ:150px;行の高さ:150px;境界線:1px 実線 #000;余白:10px 自動;テキスト配置:中央;フォントサイズ:24px}
  12. </スタイル>   
  13. <スクリプト タイプ= "text/javascript" >   
  14. document.createElement("ヘッダー");
  15. document.createElement("コンテンツ");
  16. document.createElement("フッター");
  17. </スクリプト>   
  18. </ヘッド>   
  19.     
  20. <本文>   
  21. <header>これヘッダーです</header>   
  22. < content >これは中央のコンテンツ領域です</ content >   
  23. <フッター>これは一番下です</フッター>   
  24. </本文>   
  25. </html>   

関係のない話をしましょう。なぜ HTML をセマンティックに記述する必要があるのでしょうか?

まず、コードが読みやすくなります。他の人があなたのコードを見たときに、一目で理解できます。次に、SEO に有利です。検索エンジンのクローラーは、プレゼンテーションに使用されるタグをほとんど無視し、セマンティック タグのみに焦点を当てます。

それでは、セマンティック タグを使用して HTML を書き始めましょう。それほど難しいことではありませんよね?

付録1:

セマンティック タグを使用して IE6、7、8 と互換性のある HTML を記述する上記の記事は、エディターがあなたと共有するすべてのコンテンツです。これが参考になれば幸いです。また、123WORDPRESS.COM をサポートしていただければ幸いです。

オリジナル URL: http://www.cnblogs.com/shouce/p/5385701.html

<<:  SQL 実践演習: オンライン モール データベース ユーザー情報データ操作

>>:  Ubuntuのインストール Matlab2020b の詳細なチュートリアルとリソース

推薦する

CSS3 で半透明の背景画像と不透明なコンテンツを実現する方法の例

以前のブログのログインページを作成していたときに、この問題に遭遇しました。突然、透明な背景画像と不透...

MySQL 8.0.20 Window10無料インストール版設定とNavicat管理チュートリアルグラフィック詳細説明

1. MySQL 8.0.20をダウンロードして解凍するダウンロードリンク: https://dev...

ミニプログラムの基本的な使用方法の知識ポイント(非常に包括的で、お勧めです!)

目次アプリを登録するときに何をすればよいですか?ページを登録するときに通常何をする必要がありますか?...

Navicat Premium15 でクラウド サーバーに接続する際のデータベースの問題と落とし穴

クラウドサーバーを使用するとデータベースに接続できる場合もありますが、Navicat Premium...

WiFi 開発 | WiFi ワイヤレス テクノロジーの紹介

目次WiFiワイヤレステクノロジーの紹介1. WiFiテクノロジーの概要2. ESP8266の紹介W...

アニメーションとトランジションの違い

CSS3アニメーションとJSアニメーションの違いJSはフレームアニメーションを実装しますCSS3はト...

JavaScript で Baidu Maps API にアクセスする方法と手順

目次1. Baidu Map API アクセス2. HTML で Baidu Map API を使用...

MySQL の遅いクエリを見つける方法

序文誰もが日常業務で SQL の最適化を経験したことがあると思います。したがって、最適化の前に、遅い...

VMware vSAN 入門概要

1. 背景1. vSphere の共有ストレージの背景を簡単に紹介するvSphere の重要な機能は...

簡単な計算機を実装する小さなプログラム

この記事の例では、簡単な計算機を実装するための小さなプログラムの具体的なコードを参考までに共有してい...

Vue3とVue2の利点のまとめ

目次1. なぜ vue3 が必要なのでしょうか? 2. vue3の利点3. 応答原則の違い4. ライ...

Linux 構成で MySQL データベースへのリモート接続が失敗する問題の解決方法

今日は、Linux でリモート アクセス用に MySQL データベースを構成する方法について質問があ...

docker.service 起動エラーの詳細なトラブルシューティング

エラーを報告するには次のコマンドを実行しますsystemctl dockerを再起動しますエラーメッ...

Windows 10 での MySQL 5.7.21 winx64 のインストールと設定方法のグラフィック チュートリアル

mysql 5.7.21 winx64 のインストールと設定方法: MySQLのコミュニティバージョ...

インデックスを使用して数千万のデータを持つ MySQL のクエリ速度を最適化する

1. インデックスの役割一般的に言えば、インデックスは本の目次に相当します。条件に基づいてクエリを実...