HTML符号化はAndがどのようにより良い符号化を提案するか

11969 ワード
html
HTMLコードのいくつかを整理して、これはすでに多くの人に言われたことを考慮して、私はここで総括しましょう、後ろの部分はいくつか自分の言いたいことを追加します.1、は、ブラウザが自分でレンダリングページの基準を選択できるようにするとともに、未来2、ページ文字コードを定義するために、コンパクトなコード、同様の効果3、スタイルファイルを頭に置き、導入するファイル数をできるだけ減らす
<head>

        <!--CSS -->

        <link rel="stylesheet" href="xxx.min.css" />

</head>

4、スクリプトファイルは底に置いて、プロジェクトを発表する時できるだけ圧縮して合併する
 <body>

     <!--JS -->

     <script src="xxx.min.js"></script>

</body>

5、ページにコメントを追加する
 <!-- header-->

<header></header>



<!-- header-->     

<div class="content"></content>



<!-- Footer-->

<footer></footer>

6、インデントと改行は4つのスペースをインデントレベルとして使用します.多くの場合、開発ツールはこの内容を完了するのに役立ちます.
//  

<ul><li><a href="#"></a></li><li><a href="#"></a></li></ul>



//  

<ul>

        <li><a href="#"></a></li>

        <li><a href="#"></a></li>

</ul>

7、ラベル閉鎖
//  

<br >

<p> xxxx

<p>xxxx

     

//  

<br />

<p>xxx</p>

<p>xxx</p>

 
8、ラベル名小文字、ラベル属性値に二重引用符を付ける
//  

<P data-id=p1></P>

     

//  

<p data-id="p1"></p>

9、CSSを使用してページに画像を追加するもちろんページ上のダイナミックな内容はラベルの10を使用する必要があります.画像ラベルにaltとtitle属性を追加します.画像のsrc属性は空ではありません.
  
<img alt="" title="" src="#" />

 
11.ページ内のブロック構造の下部に空白行を追加する
<header>

        <h1>w3cfuns</h1>

</header>



<div class="content">

        // something

</div>



<footer>

        <p class="copyRight"></p>

</footer>

12、スタイルリファレンスとスクリプトリファレンスのtype属性を除去する13、ラベルの意味化
  • 構造要素:p:段落を表し、インライン要素のみを含み、ブロックレベル要素divを含むことはできない:独自のダンスの特殊な意味で、レイアウトに使用することができ、ほとんど任意の要素brを含むことができる:改行文字hrを表す:水平区切り記号h 1-h 6を表す:タイトルを表す.ここで、h 1は現在のページの最も重要な内容を表すタイトルに用いられ、各ページに1つのH 1ラベルblockquoteしかないことを提案する:参照を表し、複数の段落を含むことができる.単純にインデントのためにblockquoteを使用しないでください.ほとんどのブラウザはデフォルトでblockquoteを左右のインデントpreでレンダリングします.フォーマットされたテキスト
    • を表します.
  • ヘッダ要素:title:各ページにtitle要素baseが1つしかない必要があります.使用可能なシーン--トップページ、チャンネルなどのほとんどのリンクが新しいウィンドウに開いているページlink:CSSリソースを導入する場合、mediaとtype属性styleを省くことができます.typeはデフォルトでtext/cssで、script:type属性を省くことができます.langプロパティの使用に賛成しません.古いを使わないでくださいこのhackスクリプトは、第1世代ブラウザがスクリプトを文字に表示することを阻止するために使用されます.
  • リスト要素:ul:リストolを必要としないことを示す:順序付きリストを表し、ランキングなどに使用できる.Li:リスト項目を表し、ol/ulのサブ要素dlでなければならない:関連リストを表し、ddはdtに対する解釈である.dtとddの対応関係は比較的勝手である:1つのdtは複数のddに対応し、複数のdtは1つのddに対応し、複数のdtは複数のddに対応し、いずれも合法である.名前単語の解釈、スケジュールリスト、サイトディレクトリに使用できます.
  • テキスト要素:a:href属性が存在する場合はリンクを表し、href属性がないがname属性がアンカーemを表し、strong,i,b:文意強調を表し、加算しないと意味の変化を引き起こし、異なる気持ちやイントネーションを表すことができる.strongは重要性強調を表し、局所的またはグローバルに使用することができ、strongは重要性を強調し、文の意味を変えることはありません.abbr:略称subを表し、sup:主に数学と化学の公式に用いられ、supはまた脚注spanに用いることができる:自身のダンスの特殊な意味ins、del:それぞれ文書から
    • 増加(挿入)と削除を表す
  • フォーム要素:inputの代わりにbuttonを使用することを推奨しますが、type属性推奨fieldsetを使用することを宣言する必要があります.legend組織フォームのnameはaction、enctype、method、novalidate、target、submitに設定できません.
     
    上記は基本的なことですが、開発過程で習慣を身につければいいのではなく、Webページの性能最適化のため、チーム間のメンテナンス性のためです.以下はHTMLの开発过程の中で私自身の考えを分かち合ってみんなに参考にします.まず、HTMLタグとそれに対応する各タグの意味と付加的な属性を暗記して、それぞれのHTMLタグの意味を把握してこそ、私たちはもっと合理的に彼らを私たちのページに応用することができて、万丈のビルが平らになって、これらはとても基礎的なもので、时には私たちが崩壊して、着実にこれらを理解して、本当に重要です.彼らが日常の仕事に適任であることをよく知らないが、この道を長く歩きたいなら、彼らに慣れることをお勧めします.これはあまり時間がかからないはずです.次に、他の人のサイトのソースコードを読んで、真似をして、優秀なサイトのソースコードをたくさん見て、ページのコンポーネントに対して構造コードを書いた場合を理解します.例えば、ドロップダウンボックス、タブ、横方向の画像の放送、滝の流れ、伝言板、商品の選別、商品のリストと商品の詳細などを比較して、それらの間の違いを比較して、違いはどこにあるのか、同じ点はどこにあるのか、自分で消化してから私のために使うことができます.もちろん、この仕事は普段はしなくてもいいです.デザイナーが作った効果図を手に入れたとき、もっと動力があるはずです.次はページのフレームワークを作ることです.私は強く抗議して、1枚のページのHTML構造コードが書き終わらない前に、CSSスタイルを書き始めます.必ずページ全体のHTMLコード構造を定義してから、CSSスタイルシートを書きます.CSSスタイルシートの作成を開始する前に、ブラウザで確認して、スタイルシートがないときに、文章を読むように、どこがタイトルなのか、どこがリストなのか、どこが段落なのか、どこが重複しているのかを知ることができます.次にCSSスタイルシートの作成を開始し、ページの中の多重化可能な部分を見つけ、classクラス名を定義し、一歩一歩作成し、最後にプロジェクトがあまり終わらないときは、CSSスタイルファイルを最適化し、多重化可能な部分を抽出し、簡素化することができます.フロントエンドのプロジェクトファイル構造ディレクトリについてのいくつかの見解は、次の機会に話しましょう.もしあなたが良い仕事の方法があれば、美しいプロジェクトドキュメント構造案も共有できます.
    参考資料:
    https://github.com/fex-team/styleguide/blob/master/html.md
    http://docs.kissyui.com/1.3/docs/html/tutorials/style-guide/html-coding-style.html
    http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml
     
    回転元:http://www.w3cfuns.com/blog-5435321-5402088.html
    • TIL 20.12.22
    BOJ 1276-架橋