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

推薦する

Reactフックとzarmコンポーネントライブラリ構成に基づいてh5フォームページを開発するためのサンプルコード

最近、React Hooks を zarm コンポーネント ライブラリと組み合わせて使用​​し、js...

Docker ベースの Etcd 分散デプロイメントの方法と手順

1. 環境整備1.1 基本環境NTP設定: 省略 #時間の一貫性を確保するためにNTPサービスを設定...

クエリプロファイラを使用して MySQL ステートメントの実行時間を表示する方法

前回の記事では、MySQL ステートメントの実行時間をチェックする 2 つの方法を紹介しました。今日...

MySQL 全体または単一のテーブルデータのエクスポート

単一のテーブルをエクスポートするmysqldump -u ユーザー -p db名 テーブル名 >...

Webデザインチュートリアル(8):Webページの階層と空間デザイン

<br />前回の記事:Webデザイン講座(7):Webページ制作の効率化1:必要な小言...

WeChatアプレットに2048ミニゲームを実装する詳細なプロセス

レンダリング サンプルコード今日は、WeChat アプレットを使用して 2048 ゲームを実装します...

vue3 watch と watchEffect の使い方と違い

1.リスナーを見る時計のご紹介 'vue' から { ref, reactive, ...

MySQLデッドロックの原因と解決策

データベースは、オペレーティング システムと同様に、複数のユーザーが使用する共有リソースです。複数の...

ElementUI コンポーネント el-dropdown (落とし穴)

選択して変更: クリックすると現在の値が表示され、ページ UI が表示され、CSS スタイルが変更さ...

Centos7環境でYUMを構築する方法

1. yumソースの設定ファイルを入力します 2.lsで設定ファイルを表示する 3. ディレクトリを...

VUE uni-app でよく使用される API についての簡単な説明

目次1. ルーティングとページジャンプ2. インターフェース要約する1. ルーティングとページジャン...

CSSレイアウトで中央揃えレイアウトを実現する方法

1. 親コンテナーをテーブルに設定し、子をインライン要素に設定します。テキストを表示するサブコンテン...

1 つの記事で Nginx ロケーション マッチングの実装を理解する

チームはフロントエンドとバックエンドを分離しているため、フロントエンドが Nginx とノード層を引...

ApacheのDjangoオンライン展開方法

環境: 1. Windows Server 2016 Datacenter 64 ビット 2. SQ...

MySQL 8.0.3 RCがリリースされようとしています。変更点を見てみましょう。

MySQL 8.0.3がリリースされます。新機能を見てみましょうMySQL 8.0.3 は RC ...