学ぶためのHTML仕様のWEBフロントエンド

概要

優れた供給源の開発よりもさらにプロジェクト、だけでなく、一人の人間の手のようなコードを見てください。統一されたコーディング標準、コード読みやすく、理解しやすく、維持するために簡単に

HTMLの仕様

凹み

統一された二つの空間をインデントします

命名規則

クラスの機能やコンテンツが顕在化して名前が付けられていない、名前を付ける必要があります。
クラスIDと小文字の単語、複数の単語下線付きを使用して - 分離。
作成クラス・ノースタイル情報を避けない間、Javascriptのフックとして一意のIDを使用します。

DOCTYPE宣言

HTMLファイルには、DOCTYPE宣言、およびHTML5の文書宣言の一貫した使用を追加する必要があります。

<!DOCTYPE html>

METAタグ

統一された使用「UTF-8」エンコーディング

<meta charset="utf-8">

SEOの最適化

<!-- 页面关键词 -->
<meta name ="keywords" content =""/>
<!-- 页面描述 -->
<meta name ="description" content ="">
<!-- 网页作者 -->
<meta name ="author" content ="">

優先順位は、IEとChromeの最新バージョンを使用します

<meta http-equiv ="X-UA-Compatible" content ="IE = edge，chrome = 1">

モバイルデバイス用のビューポート

<!-- device-width 是指这个设备最理想的 viewport 宽度 -->
<!-- initial-scale=1.0 是指初始化的时候缩放大小是1，也就是不缩放 -->
<!-- user-scalable=0 是指禁止用户进行缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

自動識別のページを無効にし、デジタル電話のフォーマットが存在してもよいです

<meta name="format-detection" content="telephone=no">

ライブウェブフロントエンドの開発チュートリアルQqun：767273102、無料の開発ツール、ゼロベース、高度なビデオチュートリアルがあり、私は初心者の迂回路を願っています

チームの規則：

pc 端：

<meta charset="utf-8">
<meta name="keywords" content="your keywords">
<meta name="description" content="your description">
<meta name="author" content="author,email address">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">

モバイルエンド：

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">

要素のプロパティ

二重引用符を使用するには、要素の属性値の構文

推奨：

<input type="text">
复制代码

推奨しません：

<input type=text>
<input type='text'>

コードのネスト

インラインブロック要素は、ブロックのいくつかの要素または要素を含むことができるが、インライン要素は、要素をブロック含まれていないことができ、それは、他のインライン要素を含むことができ
H1、H2、H3、H4、H5、H6、P、DT：などの見出しや段落ブロックが含まれていません、
これは、インラインブロック、平行とブロックレベル要素におけるブロックレベル要素、埋め込まれた埋め込み要素と並列の要素と平行ではありません
ルールネストされた一部のタグは、例えば、UL李、オール備えるリチウム、DL DTを備えるなど、DDを備え、固定されています。

擬似クラスの柔軟な使用

非コンテンツ情報は、あなたのHTMLを汚染させてはいけません、HTMLの構造を破壊しました。それは使用することができますなど、疑似希土類元素後,:前に

推奨：

HTMLコード

<!-- That is clean markup! -->
<span class="text-box">
  See the square next to me?
</span>

CSSコード：

/* We use a :before pseudo element to solve the design problem of placing a colored square in front of the text content */
.text-box:before {
  content: '';
  display: inline-block;
  width: 1rem;
  height: 1rem;
  background-color: red;
}

推奨しません：

HTMLコード：

<!-- We should not introduce an additional element just to solve a design problem  -->
<span class="text-box">
  <span class="square"></span>
  See the square next to me?
</span>

CSSコード：

.text-box > .square {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  background-color: red;
}

特殊記号はエスケープする必要があります

シンボル	説明	エスケープ
	ブランク	` `
<	以下	`<`
>	より大きい	`>`
＆	と	`&`
"	引用符	`"`

ピュアデジタル入力ボックス

=「TEL」の代わりのタイプは=「番号」タイプを使用します

<input type="tel">

Typeプロパティ

HTML5は、デフォルトで含まれ、JSは、type属性を指定し、CSSする必要はありません。

推奨：

<link rel="stylesheet" href="" >
<script src=""></script>

推奨しません：

<link rel="stylesheet" type="text/css" href="" >
<script type="text/javascript" src="" ></script>

ノート仕様

単一行コメント

いくつかの州に記載され、および他の特性が記載されているように、一般に、簡単な説明のために使用
行のコード自体にコメントの上に位置する各注釈コンテンツ前後の空白文字、コメント、

推奨：

<!-- Comment Text -->
<div>...</div>

推奨しません：

<div>...</div><!-- Comment Text -->

<div><!-- Comment Text -->
    ...
</div>

モジュールの備考

各スペースの文字コンテンツ前後のノート
ブロック開始
モジュールとモジュールとの間の線によって分離されたブロックの端、
内側の入れ子モジュール注釈モジュールに注意し、

推奨：

<!-- S Comment Text A -->
<div class="mod_a">

    <div class="mod_b">
        ...
    </div>
    <!-- /mod_b -->

    <div class="mod_c">
        ...
    </div>
    <!-- /mod_c -->

</div>
<!-- E Comment Text A -->

<!-- S Comment Text D -->
<div class="mod_d">
    ...
</div>
<!-- E Comment Text D -->

セマンティック

CSS、HTMLは、セマンティックシステムの代わりに、UIシステムではありません
一般的に、各意味ラベルが全てです
セマンティックHTML構造は、多くの人々は一方で一緒に作業するときに（検索エンジン）は、理解するマシンは、開発者が迅速意図を理解することができますことができます
マルチページのdivと意味タグではなく、ページ全体を構成して使用することをお勧めします

一般的な意味タグ：

タグ	セマンティック
`<p>`	段落
`<hn>`	タイトル（H1〜H6）
`<ul>`	順序なしリスト
`<ol>`	順序付きリスト
`<nav>`	ナビゲーションマークは、グループだけの使用で重要なリンクを文書化
`<main>`	ページの主な内容は、ページが一度だけ使用することができます。Webアプリケーションならば、それはその主な機能に囲まれて
`<article>`	外部定義のコンテンツ、コンテンツはドキュメントの残りの部分とは独立しています
`<section>`	文書のセクション（セクション、セクション）で定義されています。そのような他の章、ヘッダ、フッタ、または文書など。
`<aside>`	これは、その内容外のコンテンツを定義します。こうしたサイドバーなどの一連のリンク、記事、広告、リンク、関連製品のリスト
`<header>`	ヘッダーは通常、サイトのロゴ、メインナビゲーション、サイト全体のリンクや検索ボックスを含み
`<footer>`	フッターは、親が体である場合にのみ、ページ全体がフッターです
`<figure>`	別々のストリームコンテンツ（画像、図表、写真、コード等）の規定は、（デフォルトでは40ピクセルのマージンについてがあります）

シンボル	説明	エスケープ
	ブランク	` `
<	以下	`<`
>	より大きい	`>`
＆	と	`&`
"	引用符	`"`

シンボル	説明	エスケープ
	ブランク	` `
<	以下	`<`
>	より大きい	`>`
＆	と	`&`
"	引用符	`"`