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

推薦する

MySQL の高度な機能 - データ テーブル パーティショニングの概念とメカニズムの詳細な説明

目次パーティション分割メカニズムSELECTクエリINSERT操作DELETE操作更新操作パーティシ...

MySQL トランザクション分離レベルの詳細

serializableシリアル化(問題なし)トランザクションは順次実行する必要があります。前のトラ...

MySQL Limitパフォーマンス最適化とページングデータパフォーマンス最適化の詳細な説明

MySQL Limit はセグメント内のデータベース データをクエリでき、主にページングで使用されま...

Linuxの運用・保守の基礎知識から上級者向け知識までをまとめました

運用保守エンジニアは、初期段階では非常に大変な仕事です。この期間中、コンピューターの修理、ネットワー...

win2008 サーバー セキュリティ設定の展開ドキュメント (推奨)

私は新年を迎える前からプロジェクトに取り組んでいましたが、ここ数日で、新しいサーバー用に新しく増設し...

mysql binlog ログを正しくクリーンアップする 2 つの方法

mysqlはbinlogログを正しくクリーンアップします序文: MySQL の binlog はデー...

Nginx の書き換え正規マッチング書き換え方法の例

Nginx の書き換え機能は、リダイレクトと同様に、URL アドレスを一時的または永続的に新しい場所...

MySQL の 4 つのトランザクション分離レベルの詳細な説明

この実験のテスト環境: Windows 10+cmd+MySQL5.6.36+InnoDB 1. ト...

HTML の著作権記号のフォント選択問題 (著作権記号をより美しくする方法)

1. 問題を発見する&copy; は HTML の著作権記号ですが、間違ったフォントを選択す...

Vueはカスタムツリーコンポーネントを再帰的に実装します

この記事では、カスタムツリーコンポーネントを再帰的に実装するVueの具体的なコードを参考までに共有し...

スライド効果を実現するためのネイティブJavaScript

ページ、特にホームページを作成するときは、通常、Web サイト全体の他のメイン ページにリンクできる...

フィールドの文字セットの違いによる MySQL のインデックス失敗の解決策

インデックスとは何ですか?なぜインデックスを作成するのですか?インデックスは、列に特定の値を持つ行を...

vue で wangEditor を使用する方法と、データをエコーし​​てフォーカスを取得する方法

バックグラウンド管理プロジェクトを行う際には、リッチテキストエディタがよく使用されます。ここでは、非...

Linuxシステムはポート3306、8080などを外部に開放します。ファイアウォール設定の詳しい説明

多くの場合、Linux システムに Web サービス アプリケーション (Tomcat、Apache...

vue構成ファイルはルーティングとメニューインスタンスコードを自動的に生成します

目次前面に書かれたルータ.jsonルート生成メニュー生成効果要約する前面に書かれたルートを繰り返し記...