高パフォーマンスの HTML Web ページを作成する方法
Web ページのパフォーマンスを向上させるにはどうすればよいでしょうか?
ほとんどの開発者は、JavaScript と画像、サーバー設定、ファイルの圧縮とファイルの結合、さらには CSS の調整 (小さな画像の結合) を通じて最適化します。
貧弱な HTML は、常にインターネットの中核言語であるにもかかわらず、常に無視されます。
HTML はますます大きくなっています。上位 100 の Web サイトの HTML ページのほとんどは約 40K です。 Amazon と Yahoo は何千もの HTML ページを使用しています。 youtube.com のメイン ページには、3,500 もの HTML 要素があります。
HTML の複雑さとページ上の要素の数を減らしても、解析時間は大幅に改善されません。しかし、HTML は、非常に高速な Web ページを構築し、さまざまなデバイスに適応し、成功に影響を与える重要な要素です。
この記事では、簡潔できれいな HTML を書く方法を学び、迅速に読み込まれ、複数のデバイスをサポートし、デバッグと保守が容易な Web サイトを作成できるようにします。
コード、特に HTML を記述する唯一の方法はありません。これは一般的な経験にすぎませんが、これが唯一の正しい選択ではありません。
HTML、CSS、JavaScript
HTML は、構造とコンテンツを表現するために使用されるマークアップ言語です。
スタイルやスタイルの表示には HTML を使用しないでください。 「大きく」見せるためにタイトル タグ (h1 ～ h6) にテキストを入れたり、インデントのためだけにブロック引用符要素を使用したりしないでください。代わりに、CSS を使用して要素の外観とレイアウトを変更します。
HTML 要素のデフォルトの外観は、ブラウザのデフォルト スタイルによって実現されます。Firefox、Internet Explorer、Opera はすべて異なります。たとえば、Chrome では、h1 要素はデフォルトで 32 ピクセルのサイズでレンダリングされます。
3 つの基本原則:
HTML は構造を表現するために使用され、CSS はさまざまなスタイルやテーマを表現するために使用されます。ユーザーのアクションに応答する JavaScript。
必要に応じて HTML、CSS、必要に応じて JavaScript を使用します。例: 多くの場合、検証には HTML フォームを使用し、アニメーションには CSS または SVG を使用します。
CSS と JavaScript を HTML コードから分離します。キャッシュ可能にすると、コードのデバッグが容易になります。運用環境では、CSS と JavaScript は縮小して結合できるため、ビルド システムの一部として含める必要があります。 注* JavaScript構築(コンパイル)システムコンペティションを参照
ドキュメントのドキュメント構造
HTML5 ドキュメント タイプを使用します:
<!DOCTYPE html> <html> <head> <title>Recipes: pesto</title> </head> <body> <h1>Pesto</h1> <p>Pesto is good!</p> </body> </html>
ログイン後にコピー
head 要素など、ページの上部で CSS ファイルを引用します:
<head> <title>My pesto recipe</title> <link rel="/css/global.css"> <link rel="css/local.css"> </head>
ログイン後にコピー
このようにして、ブラウザーは、わかりにくいページ レイアウトをレンダリングすることなく、HTML を解析する前にスタイルをプリロードできます。
本文を閉じる前に、ページの一番下に JavaScript を配置します。これにより、JavaScript が読み込まれる前にブラウザがページをレンダリングできるため、ページのレンダリング時間が短縮されます:
<body> ... <script src="/js/global.js"> <script src="js/local.js"> </body>
ログイン後にコピー
JavaScript にイベント処理を追加します。 HTMLには追加しないでください。これは、次のように維持するのが非常に困難です:
index.html: <head> ... <script src="js/local.js"> </head> <body onload="init()"> ... <button onclick="handleFoo()">Foo</button> ... </body>
ログイン後にコピー
これはずっと良いです:
<head> ... </head> <body> ... <button id="foo">Foo</button> ... <script src="js/local.js"> </body>
ログイン後にコピー
js/local.js:
init();
var fooButton =
document.querySelector('#foo');
fooButton.onclick = handleFoo();ログイン後にコピー
法的な HTML
Web ページの成功の主な要因は、ブラウザが無効な HTML を処理できることです。ブラウザには、無効なコードを表示する方法に関する標準化されたルールもいくつかあります。
しかし、だからといってそれを手放す理由にはなりません。有効な HTML はデバッグが容易で、ファイル サイズが小さくなる傾向があり、高速で表示されるため、使用するリソースが少なくなります。 HTML が無効であると、レスポンシブ デザインの実装が困難になります。
テンプレートを使用する場合は、有効な HTML を記述することが特に重要です。
BUILD システムで HTML を検証する: HTMLHint や SublimeLinter などの検証プラグインを使用して、HTML の構文をチェックします。
HTML5 ドキュメント タイプを使用します。
HTML の階層を必ず維持してください。要素を正しくネストし、閉じられていない要素がないことを確認してください。デバッガーがコメントを追加するのに役立ちます。
りー非自己終了要素の後に必ず終了タグを追加してください。たとえば、
<p id="foobar"> ... </p> <!-- foobar ends -->
ログイン後にコピー
も機能します。 ただし、次の記述方法を使用すると、エラーを回避し、段落の階層をより明確にすることができます:
<p>Pesto is good to eat... <p>...and pesto is easy to make.
ログイン後にコピー
items 要素 (li) は閉じる必要はありません。ただし、非常に賢いプログラマーはこのように記述します。ただし、list 要素 (ul) は閉じる必要があります。
りー注意しなければならないのは、ビデオとオーディオの要素です。彼らは自己隔離していません:
<p>Pesto is good to eat...</p> <p>...and pesto is easy to make.</p>
ログイン後にコピー
逆に、不要なコードを削除することでHTMLページはよりきれいになります
img などの自己終了要素に「/」を追加する必要はありません
属性を追加しない場合 (この場合、自動的に再生されず、コントロールもありません)、属性の設定には値がありません。 動画、属性はありません
<ul> <li>Basil <li>Pine nuts <li>Garlic </ul>
ログイン後にコピー
次の2つの方が良いです
rreeeこちらのほうが読みやすいです
rreeeスタイレットとスクリプトのタグには type 属性は必要ありません。デフォルトは css と javascript です
。 プロトコルアドレスを最適化することをお勧めします（httpまたはhttpsの設定を削除すると、現在のプロトコルに従って自動的に設定されます）
<!-- 错误: liable to cause layout grief --> <video src="foo.webm" /> <!-- 正确 --> <video src="foo.webm"> <p>Video element not supported.</p> </video>
ログイン後にコピー
一見するとタイトルのように見えるなど、可読性を高めます
<h2><a href="/contact">Contact</a><h2>
ログイン後にコピー
而这种则像个链接
<a href="/contact"><h2>Contact</h1></a>
ログイン後にコピー
应该使用小写
<A HREF="/">Home</A>
ログイン後にコピー
大小写混合看上去更恶心
<H2>Pesto</h2>
ログイン後にコピー
语义标记
“语义”意思是跟含义相关
HTML应该标记有意义的内容：元素和描述的内容相符。
HTML5引入了一些新的‘语义元素’像
使用正确的元素表达正确的内容对于可访问性是有帮助的。
使用
,代表标题， 或代表lists
注意的标题应该以
使用,
使用
写正文
使用 和 代替 和 表示强调
表单使用
混合文字和元素会导至布局的问题
<p>Name: <input type="text"></p>
ログイン後にコピー
最好用下面的表示
<p><label>Name:</label><input type="text"></p>
ログイン後にコピー
布局
HTML应该使用有意义的组织结构，而不是通过样式来实现。
使用
元素代表文本，而不是用来布局。
避免使用
来换行，使用块级元素和CSS来代替。
避免使用水平分隔线
。使用CSS的border样式来控制。
不要使用不必要的p。W3C对p的定义是排序的是最后一个元素。
要了解哪些元素是块级元素，避免在p中放置不必要的块级元素。将一个list放到p中是没有必要的。
不要使用table来布局。
Flex box是被广泛推荐的，能用就用吧。
使用CSS的padding和margin，理解盒子模型。
CSS
这篇文章是关于HTML的，但是这里有一些基本的CSS小贴士。
避免内嵌的CSS。出于性能考虑，CSS可以在BUILD时内嵌到你的网页中。
避免ID出现重复。
如果你想对多个元素应用某个样式，那么请使用class，在父级元素上使用class比在子级上好：
<!-- 有点笨 :( -->
<ul>
<li class="ingredient">Basil</li>
<li class="ingredient">Pine nuts</li>
<li class="ingredient">Garlic</li>
</ul>
<!-- 更好 :) -->
<ul class="ingredients">
<li>Basil</li>
<li>Pine nuts</li>
<li>Garlic</li>
</ul>
ログイン後にコピー
可访问性
使用语义元素
提供向后兼容
在链接上添加title属性，而且应该避免与link文本出现相同的内容
在输入元素上添加type和placeholder属性
原文地址： samdutton.wordpress.com
以上が高パフォーマンスの HTML Web ページを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
代表标题， 或代表lists
注意的标题应该以
使用,
使用
写正文
使用 和 代替 和 表示强调
表单使用
混合文字和元素会导至布局的问题
<p>Name: <input type="text"></p>
ログイン後にコピー
最好用下面的表示
<p><label>Name:</label><input type="text"></p>
ログイン後にコピー
布局
HTML应该使用有意义的组织结构，而不是通过样式来实现。
使用
元素代表文本，而不是用来布局。
避免使用
来换行，使用块级元素和CSS来代替。
避免使用水平分隔线
。使用CSS的border样式来控制。
不要使用不必要的p。W3C对p的定义是排序的是最后一个元素。
要了解哪些元素是块级元素，避免在p中放置不必要的块级元素。将一个list放到p中是没有必要的。
不要使用table来布局。
Flex box是被广泛推荐的，能用就用吧。
使用CSS的padding和margin，理解盒子模型。
CSS
这篇文章是关于HTML的，但是这里有一些基本的CSS小贴士。
避免内嵌的CSS。出于性能考虑，CSS可以在BUILD时内嵌到你的网页中。
避免ID出现重复。
如果你想对多个元素应用某个样式，那么请使用class，在父级元素上使用class比在子级上好：
<!-- 有点笨 :( -->
<ul>
<li class="ingredient">Basil</li>
<li class="ingredient">Pine nuts</li>
<li class="ingredient">Garlic</li>
</ul>
<!-- 更好 :) -->
<ul class="ingredients">
<li>Basil</li>
<li>Pine nuts</li>
<li>Garlic</li>
</ul>
ログイン後にコピー
可访问性
使用语义元素
提供向后兼容
在链接上添加title属性，而且应该避免与link文本出现相同的内容
在输入元素上添加type和placeholder属性
原文地址： samdutton.wordpress.com
以上が高パフォーマンスの HTML Web ページを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
- 代表lists
注意
使用
使用
写正文
使用 和 代替 和 表示强调
表单使用
混合文字和元素会导至布局的问题
<p>Name: <input type="text"></p>
ログイン後にコピー
最好用下面的表示
<p><label>Name:</label><input type="text"></p>
ログイン後にコピー
布局
HTML应该使用有意义的组织结构，而不是通过样式来实现。
使用
元素代表文本，而不是用来布局。
避免使用
来换行，使用块级元素和CSS来代替。
避免使用水平分隔线
。使用CSS的border样式来控制。
不要使用不必要的p。W3C对p的定义是排序的是最后一个元素。
要了解哪些元素是块级元素，避免在p中放置不必要的块级元素。将一个list放到p中是没有必要的。
不要使用table来布局。
Flex box是被广泛推荐的，能用就用吧。
使用CSS的padding和margin，理解盒子模型。
CSS
这篇文章是关于HTML的，但是这里有一些基本的CSS小贴士。
避免内嵌的CSS。出于性能考虑，CSS可以在BUILD时内嵌到你的网页中。
避免ID出现重复。
如果你想对多个元素应用某个样式，那么请使用class，在父级元素上使用class比在子级上好：
<!-- 有点笨 :( --> <ul> <li class="ingredient">Basil</li> <li class="ingredient">Pine nuts</li> <li class="ingredient">Garlic</li> </ul> <!-- 更好 :) --> <ul class="ingredients"> <li>Basil</li> <li>Pine nuts</li> <li>Garlic</li> </ul>
ログイン後にコピー
可访问性
使用语义元素
提供向后兼容
在链接上添加title属性，而且应该避免与link文本出现相同的内容
在输入元素上添加type和placeholder属性
原文地址： samdutton.wordpress.com
以上が高パフォーマンスの HTML Web ページを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
アサシンのクリードシャドウズ：シーシェルリドルソリューション
3週間前
By DDD
Windows11 KB5054979の新しいものと更新の問題を修正する方法
2週間前
By DDD
Atomfallのクレーンコントロールキーカードを見つける場所
3週間前
By DDD
R.E.P.O.で節約説明した（そしてファイルを保存）
1 か月前
By 尊渡假赌尊渡假赌尊渡假赌
アサシンクリードシャドウ - 鍛冶屋を見つけて武器と鎧のカスタマイズを解除する方法
4週間前
By DDD
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
Gmailメールのログイン入り口はどこですか？
7563
15
7563
15
CakePHP チュートリアル
1385
52
1385
52
Steamのアカウント名の形式は何ですか
84
11
84
11
NYTの接続はヒントと回答です
28
99
28
99
＆lt; Progress＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:34 PM
この記事では、HTML＆lt; Progress＆gt;について説明します。要素、その目的、スタイリング、および＆lt; meter＆gt;との違い要素。主な焦点は、＆lt; Progress＆gt;を使用することです。タスクの完了と＆lt; Meter＆gt; statiの場合
＆lt; datalist＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:33 PM
この記事では、HTML＆lt; Datalist＆GT;について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。
＆lt; meter＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:35 PM
この記事では、html＆lt; meter＆gt;について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化＆lt; Meter＆gt; ＆lt; Progress＆gt;およびex
HTMLは初心者のために簡単に学ぶことができますか？
Apr 07, 2025 am 12:11 AM
HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。
ビューポートメタタグとは何ですか？レスポンシブデザインにとってなぜそれが重要なのですか？
Mar 20, 2025 pm 05:56 PM
この記事では、モバイルデバイスのレスポンシブWebデザインに不可欠なViewportメタタグについて説明します。適切な使用により、最適なコンテンツのスケーリングとユーザーの相互作用が保証され、誤用が設計とアクセシビリティの問題につながる可能性があることを説明しています。
＆lt; iframe＆gt;の目的は何ですか タグ？使用する際のセキュリティ上の考慮事項は何ですか？
Mar 20, 2025 pm 06:05 PM
この記事では、＆lt; iframe＆gt;外部コンテンツをWebページ、その一般的な用途、セキュリティリスク、およびオブジェクトタグやAPIなどの代替案に埋め込む際のタグの目的。
HTML、CSS、およびJavaScriptの役割：コアの責任
Apr 08, 2025 pm 07:05 PM
HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。
HTMLでの開始タグの例は何ですか？
Apr 06, 2025 am 12:04 AM
Anexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。
