セマンティックタグを使用して、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 の詳細なチュートリアルとリソース

推薦する

JavaScript イベント委任の原則

目次1. イベント委任とは何ですか? 2. イベント委任の原則3. イベント委託の役割1. イベント...

MySQL サービス 1067 エラーの解決策: mysql 実行可能ファイルのパスを変更する

今日、MySQLサービス1067エラー問題に遭遇しました。システムアカウントを使用するように設定して...

JS で Websocket ベースのマルチターミナル ブリッジング プラットフォームを実装する方法

目次1. デバッグ対象2. WebSocketの機能3. ソケット接続を確立する3.1 部屋の作成方...

JavaでTomcatサーバーを起動/停止する方法

1. プロジェクト構造 2.Tomcat.javaを呼び出す パッケージ com.calltomca...

いくつかの面接の質問を使ってJavaScriptの実行メカニズムを調べる

目次前の単語同期と非同期前菜プレートを追加マクロタスク マイクロタスク約束しましょうタイマーを追加す...

Windows 7 の mysql6.x で中国語の文字化けが発生する問題に対する完璧な解決策

1. コマンドラインでMySQLサービスを停止します: net stop mysql stop my...

MySql の忘れたパスワードの変更方法はバージョン 5.7 以上に適しています

1. まずmysqld.exeプロセスを停止します2. cmd を開き、mysql の bin ディ...

Dockerコンテナがホストポートにアクセスできない場合の解決策

最近、仕事中に問題が発生しました。Docker コンテナがホストの redis にアクセスできず、t...

Xampp サーバーで MySQL パスワードを変更する方法 (画像付き)

今日、PHP で作業しているときに、Xampp サーバーに付属の mysql データベースを使用する...

Vuex データの永続性を実装するためのアイデアとコード

vuexとはvuex: vue.js専用に開発された状態管理ツールで、すべてのコンポーネントの状態を...

画像をMySQLデータベースに保存し、フロントエンドページに表示するための実装コード

目次1. まず、pycharmを使用してDjangoプロジェクトを作成し、関連する環境を設定します。...

Vue 開発ツリー構造コンポーネント (コンポーネント再帰)

この記事では、Vue開発ツリー構造コンポーネントの具体的なコードを例として紹介します。具体的な内容は...

Linux での中国語入力方法の問題を素早く解決する

背景: 最近、資産報告関連の機能に取り組んでおり、中国語入力をサポートする必要があります。通常のショ...

MySQL 分離列とプレフィックスインデックスの使用の概要

目次データ列を分離するプレフィックスインデックスとインデックスの選択性データ列を分離するMySQL ...

jquery+springbootでファイルアップロード機能を実現

この記事の例では、ファイルアップロード機能を実現するためのjquery+springbootの具体的...