HTML初心者や初級者向けの提案。専門家は無視してかまいません。

感想:私はバックエンド開発者です。静的 (HTML) ページを取得すると、ページ構造と命名規則が極端に不規則であることに気づき、少し気分が悪くなることがあります。もちろん、このような状況は新人によく起こります。一般的には、開発効率を向上させるために、以前の標準ページを削除し、デモに名前を付けて新人に見せます。

目的:この記事は仕様の紹介ではありません。標準仕様については W3C を参照してください。これはあらゆる状況に適用できるルーチンであり、初心者の開発者がより良いスタートを切れるよう支援するためにも設計されています。
コーディング能力は重要な問題ですが、ここでは取り上げません。ここでは、個人的に問題ないと思ういくつかの方法についてのみお話しします。
とりあえずこれで終わりです。コードを見てみましょう。
1. ページのコーディング構造と基本的な命名規則

コードをコピー

コードは次のとおりです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<ヘッド>

<meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=gb2312" />
<title>無題のドキュメント</title>

<スタイルタイプ="text/css"></スタイル>
<script type="text/javascript"></script>
</head>
<本文>

<div id="ヘッダー">

<div id="ナビ">
<ul>
<li><a href="##">ナビゲーション 1</a></li>

<li><a href="##"><span>ナビゲーション 1</span></a></li>
</ul>
</div>
</div>

<div id="warp">

<div id="左コンテンツ">

<div id="左ナビゲーション">
<ul>
<li><a href="###">ジャンプ</a></li>
</ul>
</div>

<div id="広告" ></div>

<div id="お問い合わせ" ></div>
</div>

<div id="RighrContent"></div>
</div>

<div id="フッター"></div>
</本文>
</html>

1. ほとんどの初心者でも理解できると思います。ページは、<head>、<header>、<warp>、<footer> に分かれています。上記ではページを 4 つの部分に分けていますが、<header> が <warp> に含まれているため、3 つの部分に分かれている場合もあります。具体的な内容はデザインページに応じて柔軟に調整可能です。実際、ブロックをいくつに分割しても、各ブロックに独立したラベルを付けてパターンを形成することが重要です。このようにして、後続のプログラム開発では、上記のコード内の <header>、<footer>、および <div id="LeftContent"> で共通のコントロールを使用できるため、バックエンドの開発効率とその後のメンテナンスが容易になります。

2. ページファイルの構造

1. 図に示すように、これが基本的なファイル構造です。 NewsCenter と Product は列です。列に従ってフォルダーを作成し、その中にページファイルを作成する必要があります。そうしないと、すべてのページがルートディレクトリに配置されると、最初は気付かないかもしれませんが、他の人に渡したり、自分で変更したりすると、目が見えなくなります。

2. 2 番目で最も重要なページ要素ファイル (自分で定義) はすべてスキンフォルダーに配置され、ファイルのプロパティに従ってフォルダーが作成され、対応するファイルが作成されます。

<<: CSSを使用してすべての子要素を選択する方法の詳細な説明

>>: Docker ベースのよく使われる CentOS7 イメージの概要