いくつかの HTML コード記述スタイルの提案のまとめ-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

いくつかの HTML コード記述スタイルの提案のまとめ

高洛峰

Feb 21, 2017 pm 01:43 PM

html 仕様スタイル

リソースファイルのプロトコルを省略する

画像、メディアファイル、スタイル、スクリプトのURL内のプロトコル部分(http:、https:)を省略することをお勧めします。プロトコル部分を省略すると、リソースファイルは次のようになります。ページ URL のプロトコルを継承すると、コンテンツが混在する問題を防ぐことができるだけでなく、ページのサイズを減らすこともできます。たとえば、JavaScript ファイルの参照は次の方法で記述できます。 h4、h5、h6 タグはめったに使用されませんか?

タイトルタグには h1、h2、h3 が含まれますが、h4、h5、h6 はほとんど使用されません。

(レイアウトに CSS を使用せずに) 裸で実行するには、title タグはセマンティックであるだけでなく、いくつかのスタイル効果も備えています。しかし、CSS が普及している今日では、h1 を使用する場合と h6 を使用する場合に大きな違いはありません。気軽に適用できます

title 要素はページ内での重みが高いキーワードを意味するため、キーワードの重み付けには h1、h2、h3 がよく使用されます。 h6 は、strong や em ほどではないため、使用されることはほとんどありません。

h2 > em > h4 > h5 > h6

いつ thead、tbody、または tfoot を使用するのですか?

私は当初、tbody がテーブルを保持するのに対し、thead はテーブルのタイトル単位を保持するために使用されると考えていました。コンテンツ、tfoot はテーブルの説明です。実際、これらのタグは実際には必要ありません。ブラウザは通常、表示を開始する前にテーブル全体をダウンロードする必要があるためです。表レイアウトの時代では、これらのタグは表を複数の表部分に分割して表示するために使用されます。また、長い帳票を印刷するときにヘッダーとフッターを表示することもできます。各ページに

オプションのタグは省略します

Dreamwaveを使ったことがある学生ならHTMLファイルを作成するとデフォルトで以下のようなコードが入っている印象があるはずです

<html>  
 <head>  
 </head>  
    
 <body>  
 </body>  
</html>

ログイン後にコピー

タイトルを入れていきます、head領域に外部CSSとJavaScript参照、bodyにページに表示される内容が配置されますが、実はhtml、head、bodyは全て省略可能なタグです

これらの省略可能なタグを削除すると見た目がおかしくなりますただし、ページは正常に表示され、W3C の検出は通過します。ただし、XHTML でページを書きたい場合は、注意すべき点が 1 つあります。ステートメントとして次のコードが必要です

<html xmlns="http://www.w3.org/1999/xhtml">

ログイン後にコピー

b タグと i タグ

多くの人は、b タグと i タグは u タグと同じ運命を持ち、W3C によって「ではない」と分類されていると考えています。しかし、HTML5 仕様では、この 2 つのタグの使用が依然として推奨されています。私はこれについて常々認識しており、これについて友人と議論したこともあります。しかし、HTML5 でこれら 2 つのタグをどのように定義すればよいのか、まったく理解できませんでした。 HTML5.

hr というタグは、コンテンツを区切る線、つまり hr は CSS で処理できるかどうかに関係なく、役に立たないものだと常々思っていました。実際、hr は意味的には記事のコンテキストを完全に分離しており、関係がありません
その機能は、hr を除いて、多くのブログ投稿に表示される下の図の分割線と似ています。も意味的には同じであり、クローラーもそれを理解できます

なぜ私たちはボタンを作成するためにタグを使用することに慣れていますか?
いくつかの HTML コード記述スタイルの提案のまとめ

それは、IE の以前のバージョンでは input type="button" ではないため、当然です。ホバー効果が見えません。しかし、なぜタグの代わりにタグが作成されるのでしょうか?これはまだ考えていませんが、これは条件反射のようなものでした。

詳細は後ほど

いくつかの HTML コード記述スタイルの提案のまとめ Google の HTML/CSS コードスタイルガイドは、短く簡潔なコード記述ガイドです。ただし、迷信に陥らないでください。その中には、インデントとして 2 つのスペースを使用することを推奨する項目があります。多くのチームではこれは実現不可能かもしれません。私たちのチームは現在でもタブを使用しています。マニュアル内の多くの HTML 提案は HTML5 用ですが、ここでは XHTML スタイルではなく HTML スタイルが使用されています。実際、コードはコードの可読性を弱めます。選択については各自で判断してください。