目次
設計と開発のプロセスでは、次の原則に従う必要があります:
HTML、CSS、JavaScriptの関係
ドキュメント構造は次のように最適化することもできます:
Pesto
语义标记

Name: 

ログイン後にコピー




布局" >,

…)表示标题,
      实现列表

    1. 注意使用

      标签之前应添加

      标签;

    2. 选择合适的HTML5语义元素如

      ,
    3. 使用

      描述Body 文本,HTML5 语义元素可以形成内容,反之不成立。

    4. 使用标签替代标签。

    5. 使用

    6. 将文本和元素混合,并作为另一元素的子元素,会导致布局错误,

例如:

Name: 

ログイン後にコピー


换种写法会更好:
ログイン後にコピー


   1:  

ログイン後にコピー
   2:    Name:
ログイン後にコピー
   3:  

ログイン後にコピー


 
ログイン後にコピー

布局

CSS
ホームページ ウェブフロントエンド htmlチュートリアル 知っておくべきHTML最適化のヒント

知っておくべきHTML最適化のヒント

Mar 12, 2017 pm 05:18 PM
html

Web ページのパフォーマンスを向上させる方法について、多くの開発者は、JavaScript、画像の最適化、サーバー構成、ファイル圧縮、CSS の調整など、さまざまな側面から始めます。

HTML は、Web インターフェイスの開発に不可欠なコア言語であるにもかかわらず、ボトルネックに達していることは明らかです。 HTML ページの負荷もますます重くなっています。ほとんどのページには平均 40K のスペースが必要です。たとえば、大規模な Web サイトには数千の HTML 要素が含まれており、ページ サイズはさらに大きくなります。

HTML コードの複雑さとページ要素の数を効果的に減らすにはどうすればよいですか? この記事では、主にこの問題を解決し、ページの読み込みを高速化し、次のことを可能にする簡潔で明確な HTML コードを記述する方法を紹介します。さまざまなデバイスでうまく動作します。

設計と開発のプロセスでは、次の原則に従う必要があります:

  • 構造の分離: コンテンツのスタイルではなく、HTML を使用して構造を追加します。

  • クリーンに保ちます: ワークフローにコード検証ツールを追加します。 ; ツールを使用するか、スタイル ウィザードでコード構造と書式設定を維持します

  • 新しい言語を学びましょう: 要素構造とセマンティック マークアップを取得します。

  • アクセシビリティの確保: ARIA 属性やフォールバック属性などを使用します。

  • テスト: Web サイトを複数のデバイスで適切に実行できるようにし、エミュレーターやパフォーマンス ツールを使用します。

知っておくべきHTML最適化のヒント

HTML、CSS、JavaScriptの関係

HTMLは、ページの構造とコンテンツを調整するために使用されるマークアップ言語です。 HTML を使用してスタイル コンテンツを変更したり、ヘッダー タグにテキスト コンテンツを入力したりすることはできないため、コードが長く複雑になります。代わりに、CSS を使用してレイアウト要素と外観を変更する方が適切です。 HTML 要素 デフォルトの外観はブラウザのデフォルトのスタイルシートによって定義されます。たとえば、Chrome では、h1 タグ要素は 32 ピクセル倍の太字フォントでレンダリングされます。

3 つの一般的なデザイン ルール:

  1. HTML を使用してページ構造を構築し、CSS を使用してページのプレゼンテーションを変更し、JavaScript を使用してページ機能を実装します。 CSS ZenGarden は動作の分離を非常にうまく示しています。

  2. CSS または JavaScript で実装できる場合は、使用する HTML コードを減らします。

  3. CSS ファイルと JavaScript ファイルを HTML とは別に保存します。これは、キャッシュデバッグに役立ちます。

ドキュメント構造は次のように最適化することもできます:

  • HTML5 ドキュメントタイプを使用します。以下は空のファイルです:

<!DOCTYPE html>
<html>

<head>
 <title>Recipes: pesto</title>
</head>

<body>

  <h1 id="Pesto">Pesto</h1>

  <p>Pesto is good!</p>

</body>
</html>
ログイン後にコピー


  • ドキュメント内開始位置参照 CSS ファイルは次のとおりです:

<head>
  <title>My pesto recipe</title>

  <link rel="stylesheet" href="/css/global.css">
  <link rel="stylesheet" href="css/local.css">

</head>
ログイン後にコピー


これら 2 つの方法を使用して、ブラウザは HTML コードを解析する前に CSS 情報を準備します。これは、ページ読み込みパフォーマンスの向上に役立ちます。

JavaScript コードをページの下部にある終了 body タグの前に入力すると、ブラウザは JavaScript コードを解析する前にページを読み込むため、ページの読み込み速度が向上します。

<body>

  ...

  <script src="/js/global.js">
  <script src="js/local.js">

</body>
ログイン後にコピー


Defer および async 属性を使用する async 属性を持つ Script 要素は、順番に実行されることが保証されません。

ハンドラーは JavaScript コードに追加できます。たとえば、次のコードはエラーが発生しやすく、保守が難しいため、絶対に追加しないでください。

<head>
  
  ...

  <script src="js/local.js">

</head>

<body onload="init()">

  ...

  <button onclick="handleFoo()">Foo</button>

  ...

</body>
ログイン後にコピー

js/local.js:

<head>

  ...

</head>

<body>

  ...

  <button id="foo">Foo</button>

  ...

  <script src="js/local.js">

</body>
ログイン後にコピー


Verification

Web ページを最適化する 1 つの方法は、ブラウザーが不正な HTML コードを処理できるようにすることです。合法的な HTML コードはデバッグが簡単で、メモリ使用量やリソース消費量が少なく、解析しやすく、レンダリングや実行が高速です。違法な HTML コードがあると、レスポンシブ デザインの実装が非常に困難になります。

テンプレートを使用する場合、適切な HTML コードは非常に重要です。テンプレートだけでは正常に動作することがよくありますが、他のモジュールと統合すると、さまざまなエラーが報告されるため、次のような品質を確保する必要があります。ステップ アクション:


ワークフローに検証機能を追加します。HTMLHint や SublineLinter などの検証プラグインを使用して、コード エラーの検出に役立てます。 <br/>

HTML5 ドキュメント タイプ

を使用して、HTML 階層を維持しやすくし、開いたままの状態でネストされた要素を回避します
  • 各要素の終了タグを必ず追加してください。
  • 不要なコードを削除します。自己終了要素の終了タグを追加する必要はありません。ブール属性には値を割り当てる必要はなく、存在する場合は True になります。
  • コード形式

  • HTML コードを読みやすくし、理解し、最適化し、デバッグしやすくします。
  • 语义标记

    语义指意义相关的事物,HTML 可从页面内容中看出语义:元素和属性的命名一定程度上表达了内容的角色和功能。HTML5 引入了新的语义元素,如

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

HTMLの表の境界線 HTMLの表の境界線 Sep 04, 2024 pm 04:49 PM

HTML の表の境界線に関するガイド。ここでは、HTML でのテーブルの境界線の例を示しながら、テーブル境界線を定義する複数の方法について説明します。

HTML 左マージン HTML 左マージン Sep 04, 2024 pm 04:48 PM

HTML マージン左のガイド。ここでは、HTML margin-left の概要とその例、およびそのコード実装について説明します。

HTML のネストされたテーブル HTML のネストされたテーブル Sep 04, 2024 pm 04:49 PM

これは、HTML でのネストされたテーブルのガイドです。ここでは、テーブル内にテーブルを作成する方法をそれぞれの例とともに説明します。

HTML テーブルのレイアウト HTML テーブルのレイアウト Sep 04, 2024 pm 04:54 PM

HTML テーブル レイアウトのガイド。ここでは、HTML テーブル レイアウトの値と例および出力について詳しく説明します。

HTML入力プレースホルダー HTML入力プレースホルダー Sep 04, 2024 pm 04:54 PM

HTML 入力プレースホルダーのガイド。ここでは、コードと出力とともに HTML 入力プレースホルダーの例について説明します。

HTML 順序付きリスト HTML 順序付きリスト Sep 04, 2024 pm 04:43 PM

HTML 順序付きリストのガイド。ここでは、HTML 順序付きリストと型の導入とその例についても説明します。

HTML 内のテキストの移動 HTML 内のテキストの移動 Sep 04, 2024 pm 04:45 PM

HTML でのテキストの移動に関するガイド。ここでは、概要、マーキー タグが構文でどのように機能するか、および実装例について説明します。

HTML の onclick ボタン HTML の onclick ボタン Sep 04, 2024 pm 04:49 PM

HTML オンクリック ボタンのガイド。ここでは、それらの紹介、動作、例、およびさまざまなイベントでの onclick イベントについてそれぞれ説明します。

See all articles