ホームページ > 記事 > ウェブフロントエンド > HTMLコードの書き方提案まとめ_HTML/Xhtml_Webページ制作
HTMLコードの書き方提案まとめ_HTML/Xhtml_Webページ制作
- WBOYオリジナル
- 2016-05-16 16:36:071580ブラウズ
リソースファイルを省略するプロトコル
画像、メディア ファイル、スタイル、スクリプトの URL ではプロトコル部分 (http:、https:) を省略することをお勧めします。プロトコル部分を省略すると、リソース ファイルはページ URL のプロトコルを継承します。コンテンツが混在する問題を回避できるだけでなく、ページのサイズを小さくすることもできます。たとえば、JavaScript ファイルの参照は、次の推奨方法で記述できます。
h4、h5、h6 タグがほとんど使用されないのはなぜですか?
タイトルタグには h1 から h6 が含まれます。h1、h2、h3 はよく使用されますが、h4、h5、h6 はほとんど使用されません。
合理的にセマンティックであり、あえて裸で (レイアウトに CSS を使用せずに) 実行する Web サイトでは、タイトル タグはセマンティックであることに加えて、ある程度のスタイル効果もあります。しかし、CSS が普及している今日では、h1 と h6 を使用するとスタイル効果が得られます。実際には大きな違いはありませんが、違うのは見た目がカジュアルに使えることです。
title タグとしては、より強力な機能を持っています。title 要素は、ページ内での重みが高いキーワードを意味するため、h4、h5、h6 の重みを付けるために h1、h2、h3 がよく使用されます。値が高くなく、strong や em ほどではないため、使用されることはほとんどないと考えられます。
h2>h3>h4>h6
thead、tbody、または tfoot をいつ使用するか?
私は当初、thad はテーブルのタイトル単位を保持するためのテーブルヘッダとして使用され、tbody はテーブルの内容を保持するために使用され、tfoot はテーブルの説明であると考えていました。実際、私の理解は完全ではありませんでした。正しいです。これらのタグは実際には必要ありません。
ブラウザは通常、表示を開始する前にテーブル全体をダウンロードする必要があり、テーブル レイアウトの時代ではユーザーの読み取りに影響を与えるため、これらのタグはテーブルを複数のテーブル部分に分割し、ダウンロードするために使用されます。また、長いフォームを印刷する場合、各ページにヘッダーとフッターを表示できます。
オプションのタグを省略します
- <html>
- <頭>
- 頭>
- <ボディ>
- ボディ>
- html>
これらのオプションのタグを削除すると、見た目は奇妙になりますが、ページは正常に表示され、W3C 検出を通過できます。ただし、ページを書き込む場合は、注意すべき点が 1 つあります。 XHTML の場合は、ステートメントとして次のコードが必要なため、HTML タグを保持してください。
- <html xmlns="http://www .w3.org/1999/xhtml">
b 標籤和 i 標籤
很多人以為b 標籤和i 標籤的命運和u 標籤一樣, 被W3C 歸類為"不推薦使用標籤". 但HTML5 規範中, 這兩個標籤還是推薦使用的. 這一點我一直清楚,還跟朋友為這事爭執過. 但我一直不明白HTML5 中如何定義它們.
hr 標籤
hr 是一條線, 分割內容的橫線. 我一直認為hr 是個蹩腳的東西, 畫出來的線用CSS 好不好處理, 毫無用處. 其實hr 在語義上是文章的分割線, 將文章上下文完全分割開, 讓它們毫無關係.
其作用就像很多日誌類博客文章裡面出現的下圖的分割線, 只不過 hr 在語義上也是如此, 爬蟲也能理解.
為什麼我們習慣用 a 標籤做按鈕?
不是input type="button" 可以理解, 因為低版本的IE 上看不到hover 效果. 但為什麼或者span, 而是a 標籤? a 標籤做成按鈕, 不帶href, 這種做法是對的嗎? 我還沒想好, 以前這麼做就像是條件反射一樣.
後話
Google 的HTML/CSS 代碼風格指南是一個短小精悍的建議性代碼編寫手冊, 很有用, 但請不要迷信. 像裡面有一項, 建議使用兩個空格作為縮進, 在很多團隊可能不具有可行性, 我們團隊現在用的還是tab.
手冊中很多HTML 建議都是針對HTML5 的, 但這裡是用HTML 風格而非XHTML 風格, 很多地方為了省略代碼實際上削弱了代碼的可讀性, 大家應該對其取捨有所判斷.