一般的に使用される HTML のセマンティックな名前付け Basics_html/css_WEB-ITnose

カテゴリ: WEB フロントエンド 時間: 2016 年 2 月 17 日

WEB フロントエンド開発の過程で、ファイル、クラス、ID の命名が問題になることがあります。ほとんどのプログラムでは、メンバーが遭遇する問題。名前をより明確に、区別しやすく、意味的にする方法は簡単ではないかもしれません。合理的なファイル名、クラス名、ID 名を使用すると、コードがより洗練されたものに見えます。また、後で一目でわかるため、保守も容易になります。以下では、PHP プログラマーの Lei Xuesong が、Web 開発プロセスで要約した、一般的に使用される HTML のセマンティック命名をいくつか紹介します。

(1) 共通クラスの命名

ヘッダー: header

コンテンツ: content/container

テール: footer

ナビゲーション: nav

サイドバー: サイドバー

列: 列

ページ周辺コントロール全体のレイアウト幅: ラッパー

左右中央: 左右中央

ログインバー: ログインバー

ロゴ: ロゴ

広告: バナー

ページ本文: メイン

ホットスポット: ホット

ニュース: ニュース

ダウンロード: ダウンロード

サブナビ: サブナビ

メニュー: メニュー

サブメニュー: サブメニュー

検索: 検索

フレンドリーリンク: friendslink

フッター: footer

著作権: copyright

スクロール: スクロール

コンテンツ: content

タブページ: タブ

記事リスト: list

プロンプトメッセージ: msg

ヒント: ヒント

列タイトル: title

参加: joinus

ガイド: ギルド

サービス: サービス

登録: regsiter

ステータス: ステータス

投票: vote

パートナー: パートナー

(2) よく使用される ID 命名:

(1) ページ構造

コンテナ: コンテナ

ヘッダー: header

コンテンツ: content/container

ページ本体: main

フッター: footer

ナビゲーション: nav

サイドバー: サイドバー

列: 列

ページ周辺コントロール全体レイアウト幅: ラッパー

左右中央: 左右中央

(2)ナビゲーション

ナビゲーション: nav

メイン ナビゲーション: mainbav

サブ ナビゲーション: subnav

トップ ナビゲーション: topnav

サイド ナビゲーション: サイドバー

左側のナビゲーション: leftsidebar

右側のナビゲーション: rightsidebar

メニュー: メニュー

サブメニュー: サブメニュー

タイトル: title

概要：summary

(3) 機能

ロゴ：logo

広告：バナー

ログイン：login

ログインバー：loginbar

登録: regsiter

検索: search

リボン: shop

タイトル: title

参加: joinus

ステータス: status

ボタン: btn

スクロール: スクロール

タブ: tab

記事リスト: list

プロンプト情報: msg

現在: 現在

ヒント: ヒント

アイコン: アイコン

メモ: メモ

ガイド: ギルド

サービス: サービス

ホットスポット: ホット

ニュース: ニュース

ダウンロード: ダウンロード

投票:投票

パートナー:パートナー

フレンドリーリンク: リンク

著作権: copyright

(3) css コメント 書き方:

/* フッター * /

コンテンツエリア

/* フッター終了 */

(4) css クラス名:

(1) カラー:

.red { color: red; } .f60 { color: #f60; }

のような色の名前または 16 進コードを使用します。ff8600 { color: #ff8600; }(2) フォント サイズ、「フォント + フォント サイズ」を名前として直接使用します。

.font12px { font-size: 12px; } .font9pt {font-size: 9pt; }

など (3) 配置スタイル。

.left { float:left; } .bottom { float:bottom; }

など、配置ターゲットの英語名を使用します。 (4) タイトル列のスタイルは、「カテゴリ + 」を使用して名前が付けられます。

.barnews { } .barproduct { }

などの関数" メソッド

2. 一目で理解できる単語でない限り、英語の名前を使用することをお勧めします。 🎜>