一般原則
-
インデント
すべてのプログラミング言語では、インデントはソフトタブ (スペース文字を含む) である必要があります。テキスト エディターで Tab を入力すると、スペース 4 つが入力されます。
-
可読性と圧縮
既存のファイルを維持する場合、ファイル サイズを節約することよりも可読性の方が重要であると考えています。多くの空白と適切な ASCII アートを使用することをお勧めします。開発者は、意図的に HTML や CSS を縮小したり、JavaScript コードを認識できないほど縮小したりしてはなりません。
サーバー側またはビルドプロセス中に、CSS や JS などのすべての静的クライアント ファイルを自動的に最小化して gzip 圧縮します
-
HTML、CSS、JS コード分離
HTML コードを可能な限りクリーンに保ち、将来のメンテナンスと拡張を容易にするために複雑なレイアウト要件を完了するには最も単純なコード レベルを使用します
CSS コード自体はグローバルであり、すべての CSS モジュールJS コードは機能コードと業務コードに分割され、機能コードはチーム内の他の同僚が使いやすいように可能な限り機能コンポーネントに抽出されます
命名規則 -
ファイルとフォルダー: すべて英語の小文字 + 数字またはコネクタ「-、_」、その他の文字は使用不可: jquery.1.x.x.jsファイル: /libs ファイルの呼び出しにはバージョン番号が含まれている必要があり、圧縮ファイルには min キーワードが含まれている必要があります (/libs/modernizr-1.7.min.js
など)。 ID: キャメルケース命名法: firstName topBoxList footerCopyright
クラス: [マイナス記号コネクタ] 例: top-item main-box box-list-item-1
クリアを使用してみてくださいセマンティクス 単語の名前付け、左下や左下などの単一単語の名前付けスタイルは避けてください。 🎜> 属性では一重引用符ではなく二重引用符を使用してください。
自動終了タグの末尾にはスラッシュを使用しないでください。HTML5 仕様では、スラッシュはオプションであると規定されています。
オプションの終了タグ (例: と ) を無視しないでください。
Doctype
在每个 HTML 页面开头使用这个简单地 doctype 来启用标准模式，使其每个浏览器中尽可能一致的展现。
<!DOCTYPE html>
文字エンコーディング
通过声明一个明确的字符编码，让浏览器轻松、快速的确定适合网页内容的渲染方式。这样做之后，需要避免在 HTML 中出现字符实体，直接提供字符与文档一致的编码（通常是 UTF-8）。
<head> <meta charset="UTF-8"></head>
IE 互換モード
Internet Explorer 支持使用兼容性 <meta> 标签来指定使用什么版本的 IE 来渲染页面。如果不是特殊需要，通常通过 edge mode 来通知 IE 使用最新的兼容模式。
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
CSS と JavaScript
根据 HTML5 规范, 通常在引入 CSS 和 JavaScript 时不需要指明 type，因为 text/css 和 text/javascript 分别是他们的默认值。
<link rel="stylesheet" href="code-guide.css"><script src="code-guide.js"></script><style> /* ... */</style>
完璧より実用性を優先します
尽量遵循 HTML 标准和语义，但是不应该以浪费实用性作为代价。任何时候都要用尽量小的复杂度和尽量少的标签来解决问题。在编写 HTML 代码时，需要尽量避免多余的父节点。很多时候，需要通过迭代和重构来使 HTML 变得更少。 参考下面的示例:
<!-- Not so great --><span class="avatar"> <img src="/static/imghwm/default1.png" data-src="..." class="lazy" alt="新会社のフロントエンド開発仕様書（初稿）_html/css_WEB-ITnose" ></span><!-- Better --><img class="avatar lazy" src="/static/imghwm/default1.png" data-src="..." alt="新会社のフロントエンド開発仕様書（初稿）_html/css_WEB-ITnose" >
タグの生成に document.write を使用しないでください
用 document.write生成标签让内容变得更难查找，更难编辑，<b>性能更差</b>。应该尽量避免这种情况的出现。
CSS 仕様
- 外部ファイルLINKはCSSを読み込んでファイル数を極力減らします。ロードタグはファイルの HEAD セクションに配置する必要があります。
- インライン スタイルの使用を避ける スタイル タグで定義されているか要素に直接定義されているかに関係なく、ファイル内でインラインで導入されたスタイルを使用しないでください。これにより、スタイル ルールを追跡することが困難になる可能性があります。
- ブラウザ間でレンダリングの一貫性を高めるには、reset.css を使用します。
- CSS 式の使用を避ける
- @import を使用しない
- ID セレクターの使用を避ける
- :*
次のようなクラスに HTML タグを追加することは禁止されています: li.list-
セレクターを次のような正規表現のように見せることは避けてください: [name='aa'] 高度なセレクターの実行には時間がかかり、実行が困難です読んでくださいので、使用は避けてください。 -
HTML タグをスタイル セレクターとして直接使用しないでください-
!重要な使用を避けてください-
css3 疑似要素は控えめに使用してください-
次のような css3 の非効率的な属性の使用を避けてください: Linear-gradient, Bring-image; ### CSS を使用して CSS コードをモジュール化すること自体はグローバルであるため、すべてが CSS モジュール化のアイデアを採用し、CSS のルールを制約し、グローバルな汚染を最小限に抑える必要があります -
属性の省略形
坚持限制属性取值简写的使用，属性简写需要你必须显式设置所有取值。常见的属性简写滥用包括:paddingmarginfontbackgroundborderborder-radius大多数情况下，我们并不需要设置属性简写中包含的所有值。例如，HTML 头部只设置上下的 margin，所以如果需要，只设置这两个值。过度使用属性简写往往会导致更混乱的代码，其中包含不必要的重写和意想不到的副作用。
1 行ですか? 複数行ですか?
css实例都是用的多行的格式，每一对属性和值占单独一行。这个是广泛使用的约定，不仅是在css文件中，也多出现在书里和文章里。许多人认为他的可读性很好。然而在和团队的工作中，尤其是大型的css文件，我是将样式写成一行，并使用css模块化思想:
.alert-window {background: #fff; border: 1px solid #ff0; font-weight: bold; padding: 10px;}.alert-window .window-title{...}.alert-window .window-content{...}.alert-window .window-buttom{...} 就我个人而言，觉得单行的可读性更好。当你查找css时多行样式就变得很麻烦，相比较而言单行查找更容易。
JavaScript
命名規則
二重引用符の代わりに一重引用符 ' を使用します "-
クラスの名前付けCamel 命名規則を使用し、最初の文字は大文字になります。例: Account、EventHandler-
定数は大文字で、オブジェクト (クラス) または列挙型変数の前で宣言する必要があります。Camel 命名規則 -
クラスのプライベート変数と属性は _ で始まることが推奨されます。例: var _buffer; _init:function(){}-
Variables
で構成される必要があります。 -
変数は、型が NULL であっても、使用する前に宣言して初期化する必要があります。 -
スコープの先頭で変数に値を割り当てると、変数の使用を避けることができます宣言の問題と宣言の巻き上げに関連する問題 - <.>変数はあいまいであってはなりません。
- 関連する変数セットは同じコード ブロックに配置する必要があります。
- 変数はできるだけ小さくする必要があります。
- 直接量を使用できる場合は、new....; を使用しないでください。 ; a=new RegExp('d','g');
-
void を使用しない
with ステートメントを使用しない
Don' continue ステートメントを使用しない
ビット単位の演算を使用しないようにします
組み込みのプロトタイプ (オブジェクト、配列、文字列...) を展開しないでください
Don' eval();
+演算には注意してください
単純な条件判定方法を使用してください '1'+1==2 //false; 1+1==2 //true
単純な if else ではなく 3 項式を使用してくださいif (name !== 0 || name !== '' || name!==null || name!==undefined) {...}if (name) {...}if (collection.length > 0) { ...}if (collection.length) {...}
単純な if の代わりに && と || を使用します if(a){ d='b' }else{ d='c' } d=a?'b':'c';
if を最適化するには配列または json を使用します if(a){ b() } a && c(); if(bb){ a=bb }else{ a=2 } a=bb||2
関数以外で関数を宣言しないでくださいブロック (if、while など) if(a=='1' || a=='b' || a=='c' || a=='ss'){ bb(); }else{ ... } var hasData={ '1':1, 'b':1, 'c':1, 'ss':1 } if(hasData[a]){ bb() }else{ ... }
尽管浏览器允许你分配函数给一个变量，但坏消息是，不同的浏览器用不同的方式解析它如果一定要定义函数，请用函数表达式方式声明；如：
else を伴うすべての if には {} function b(){ ... } if(a){ function b(){ ... } } var b=function(){ ... } if(a){ b=function(){ .... } }
余分なカンマはありません if(a) b() else c(); if(a){ b(); }else{ c(); }
这会在IE6、IE7和IE9的怪异模式中导致一些问题；同时，在ES3的一些实现中，多余的逗号会增加数组的长度。在ES5中已经澄清
イベント デリゲートを使用する var hero = { firstName: 'Kevin', lastName: 'Flynn', }; var heroes = [ 'Batman', 'Superman', ]; var hero = { firstName: 'Kevin', lastName: 'Flynn' }; var heroes = [ 'Batman', 'Superman' ]; 目立たないイベント リスナーを割り当てる場合、一般に受け入れられている慣行として、ハンドラーは結果のアクションをトリガーする要素に直接ディスパッチされます。ただし、複数の要素が同時にトリガー条件を満たす場合があり、各要素にイベント リスナーを割り当てると、パフォーマンスに悪影響を及ぼす可能性があります。この場合、代わりにイベント プロキシを使用する必要があります
画像
gif 画像の代わりに png8 を使用してみてください
携帯電話ではアニメーション gif 画像を使用しないでください
HTML、CSS、およびJavaScriptの理解：初心者向けガイドApr 12, 2025 am 12:02 AMwebdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、
HTMLの役割：Webコンテンツの構造Apr 11, 2025 am 12:12 AMHTMLの役割は、タグと属性を使用してWebページの構造とコンテンツを定義することです。 1。HTMLは、読みやすく理解しやすいようなタグを介してコンテンツを整理します。 2。アクセシビリティとSEOを強化するには、セマンティックタグなどを使用します。 3. HTMLコードの最適化により、Webページの読み込み速度とユーザーエクスペリエンスが向上する可能性があります。
HTML、CSS、およびJavaScript：Web開発者に不可欠なツールApr 09, 2025 am 12:12 AMHTML、CSS、およびJavaScriptは、Web開発の3つの柱です。 1。HTMLは、Webページ構造を定義し、などなどのタグを使用します。2。CSSは、色、フォントサイズなどのセレクターと属性を使用してWebページスタイルを制御します。
HTML、CSS、およびJavaScriptの役割：コアの責任Apr 08, 2025 pm 07:05 PMHTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。
HTMLは初心者のために簡単に学ぶことができますか？Apr 07, 2025 am 12:11 AMHTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。
HTMLでの開始タグの例は何ですか？Apr 06, 2025 am 12:04 AMAnexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。
CSSのフレックスボックスレイアウトを使用して、メニューの点線のラインセグメンテーション効果のセンターアラインメントを実現する方法は？Apr 05, 2025 pm 01:24 PMメニューで点線のラインセグメンテーション効果を設計する方法は？メニューを設計するときは、通常、皿の名前と価格の間に左右に合わせることは難しくありませんが、真ん中の点線またはポイントはどうですか...
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
AtomエディタMac版ダウンロード
最も人気のあるオープンソースエディター
MantisBT
Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティング サービスをチェックしてください。
ZendStudio 13.5.1 Mac
強力な PHP 統合開発環境
EditPlus 中国語クラック版
サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません
SecLists
SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。
