美しいHTMLコードの書き方

美しいHTMLコードの書き方

美しい HTML コードの外観 美しい HTML コードの書き方。
外国人が書いた記事: 美しい HTML コードとは 美しい HTML コードの書き方 がとてもよく書かれているように感じたので、再投稿して皆さんと共有します:
ps: 元のアドレス: http://css-tricks.com/what-beautiful-html-code-looks-like/
1. DOCTYPEが適切に宣言されている
ブラウザに HTML をレンダリングする方法を指示するヘッダー宣言を忘れないでください。
2. 整頓されたヘッドセクション
タイトルと文字セットを設定します。CSS と JS を外部リンクにリンクします (印刷用の CSS を含む)。
3. ボディID
体にIDを付与します。ここで著者が述べている理由は、複数のページでのコンテナの選択を容易にするためです。例えば、page1 と page2 の BODY に異なる ID を設定することで、#page1 h2 と #page2 h2 を通じて 2 つの異なる効果を設定できます。これは状況と具体的なアーキテクチャに依存すると感じています。
4.意味的にクリーンなメニュー
セマンティック メニュー コードを記述します。
<div id="menu">
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="about.php">About</a></li>
<li><a href="contact.php">Contact</a></li>
</ul>
</div>
ps:我個人覺得這樣寫代碼應該更簡單一點吧:
<ulid="menu">
<li><a href="index.php">Home</a></li>
<li><a href="about.php">About</a></li>
<li><a href="contact.php">Contact</a></li>
</ul>

5.すべてのページコンテンツのメインDIV
すべてのコンテンツを含むメインの DIV が必要です。被写体の幅や余白などを固定するのに便利です。
6. 重要なコンテンツを優先する
最初にメインコンテンツを書き、次にセカンダリコンテンツを書きます。ナビゲーションやサイドバーがそれほど重要でない場合は、最後に書くのが最適です。
7. 共通コンテンツが含まれる
PHP include などの動的呼び出しを通じて、ナビゲーションやフッターなどの共通部分をインポートします。
8.コードはセクションごとにタブ分けされています
インデントコード
9.適切な終了タグ
終了タグに注意してください
10.ヘッダータグの階層
適切な場所で段落を区切るには、<h1>~<h6> などの見出しタグを使用します。
11. コンテンツ、コンテンツ、コンテンツ
適切なラベルとサインコードを使用し、©を示すために & copy; を使用し
、</br> は使用しないでください。
12.スタイリング不要!
タグ内にスタイルを入れないでください。HTML は構造を表すためにのみ使用されます。パフォーマンスは CSS に任せましょう。

<<:  VUE 3 テレポート コンポーネントと使用構文をすぐに使い始める

>>:  nginx をベースにリロードなしでアップストリーム サーバーの動的な自動起動と停止を実装する方法

推薦する

Linux は suid vim.basic ファイルを使用して権限昇格を実現します。

カリで再現まず、必要なvim.basicファイルにsuid権限を設定します。 chmod u+s /...

他の人が私のウェブページを保存したり、サイトをコピーしたりするのを防ぐためのヒント

現在、インターネット上でウェブサイトをコピーすることは非常に一般的です。では、他人が私たちのウェブサ...

MySQLの場合の使用例分析

まず、データベース テーブルを作成します。 テーブル `t_demo` を作成します ( `id` ...

ウェブサイトを黒、白、グレーにする4つのコードの詳細な説明

2008年5月12日に四川省汶川市で発生した地震により、多くの命が失われ、遺憾なことと存じます。国務...

Linux システムにおける時間設定の概要

1. 時間の種類は次のように分けられます。 1. ネットワーク時間(タイムゾーンの設定、ntpサーバ...

Windows での MySQL の詳細なインストール手順と基本的な使用方法

目次1. MySQLをダウンロードする2. MySQLをインストールする3. MySQL の基本的な...

Vue ダイナミック バインディング アイコンの完全な手順

0 アイコンと画像の違いアイコンは文字であり、画像はバイナリ ストリームです。つまり、画像はアイコン...

Unicode 署名 BOM の詳細な説明

Unicode 署名 BOM - BOM とは何ですか? BOM は Byte Order Mark...

Win10にCentOS7仮想マシンをインストールする

1. VMware Workstation 64バージョンをダウンロードするhttps://www....

Ubuntu 20.04でAliソースを変更する方法

なお、この記事では、単に 20.04 ソースに変更する方法を説明するのではなく、20.04 に基づい...

VMware Esxi のルート パスワードを忘れた後に正常に取得する方法

CentOS6 インストール ディスク (任意のバージョン) を準備するか、別の pnux インスト...

Windows 7 で Python 3.4 を使って MySQL データベースを使用する

Python 3.4でMySQLデータベースを使用する詳細なプロセスは次のとおりです。 Window...

フォーム内の無効なフォームフィールドの値を送信する方法 サンプルコード

フォーム内のフォーム フィールドが無効に設定されている場合、フォーム フィールドの値は送信されません...

MySQLの明示的な型変換の簡単な分析

CAST関数前回の記事では、型変換を表示するために使用する CAST 関数について説明しました。暗黙...

Windows Server 2008 のサーバー パフォーマンス監視に関するチュートリアル

次に、ログ管理、ログのアーカイブ、ログのトラブルシューティング、イベントの転送と収集のためのコンピュ...