社群
學習
工具庫
AI工具
休閒
搜尋
繁体中文
目錄
在設計與開發過程中需要遵循以下原則：
HTML,CSS 和JavaScript三者的關係
 
文件結構方面也可以進行最佳化，如下：
Pesto
驗證
程式碼格式
语义标记 
Name: 
登入後複製


换种写法会更好：
登入後複製


   1:  
登入後複製
   2:    Name:
登入後複製
   3:  
登入後複製


 
登入後複製

布局" >,

…)表示标题，
    或
      实现列表

    1. 注意使用

      标签之前应添加

      标签；

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

      ，
      ,

    3. 使用

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

    4. 使用和标签替代和标签。

    5. 使用

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

例如：

Name: 
登入後複製


换种写法会更好：
登入後複製


   1:  
登入後複製
   2:    Name:
登入後複製
   3:  
登入後複製


 
登入後複製

布局

CSS
首頁 web前端 html教學 你該知道的HTML優化技巧

你該知道的HTML優化技巧

高洛峰
高洛峰
Mar 12, 2017 pm 05:18 PM
html

如何提升Web頁面的效能，許多開發人員從多個面向來下手如JavaScript、影像最佳化、伺服器配置，檔案壓縮或調整CSS。

很顯然HTML 已經達到了一個瓶頸，儘管它是開發Web 介面必備的核心語言。 HTML頁面的負載也是越來越重。大多數頁面平均需要40K的空間,像一些大型網站會包含數以千計的HTML 元素，頁面Size會更大。

如何有效的降低HTML 程式碼的複雜度和頁面元素的數量，本文主要解決了這個問題，從多個方面介紹瞭如何編寫簡練，清晰的HTML 程式碼，能夠使得頁面加載更為迅速，且能在多種設備中運作良好。

 

在設計與開發過程中需要遵循以下原則：

  • 結構分離：使用HTML 增加結構，而不是樣式內容；

  • 保持整齊：為工作流程新增程式碼驗證工具；使用工具或樣式精靈維護程式碼結構和格式

  • 學習新語言：取得元素結構和語義標記。

  • 確保可存取： 使用ARIA 屬性和Fallback 屬性等

  • 測試： 使網站在多種裝置中能夠良好運行，可使用emulators和性能工具。

你該知道的HTML優化技巧

HTML,CSS 和JavaScript三者的關係

HTML 是用來調整頁面結構和內容的標記語言。 HTML 不能用於修飾樣式內容，也不能在頭標籤中輸入文字內容，使程式碼變得冗長和複雜，相反地使用CSS 來修飾佈局元素和外觀比較合適。 HTML元素預設的外觀是由瀏覽器預設的樣式表定義的，如在Chrome中h1標籤元素會渲染成32px的Times 粗體。

三個通用設計規則：

  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>
登入後複製


 

使用這兩種方法，瀏覽器會在解析HTML程式碼之前將CSS資訊準備好。因此有助於提升頁面載入效能。

在頁面底部body結束標籤之前輸入JavaScript程式碼，這有助於提升頁面載入的速度，因為瀏覽器在解析JavaScript程式碼之前將頁面載入完成，使用JavaScript會對頁面元素產生正面的影響。 

<body>

  ...

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

</body>
登入後複製


使用Defer和async屬性，腳本元素具有async 屬性無法保證會依序執行。

可在JavaScript程式碼中新增Handlers。千萬別加到HTML內聯程式碼中，例如下面的程式碼則容易導致錯誤且不易於維護：

#index.html:

<head>
  
  ...

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

</head>

<body onload="init()">

  ...

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

  ...

</body>
登入後複製

 

#下面的寫法比較好：

index.html:


#
<head>

  ...

</head>

<body>

  ...

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

  ...

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

</body>
登入後複製

js/local.js: 


init();
var fooButton =
    document.querySelector(&#39;#foo&#39;);
fooButton.onclick = handleFoo();
登入後複製


驗證

優化網頁的一種方法是瀏覽器可處理非法的HTML 程式碼。合法的HTML程式碼很容易調試，且佔記憶體少，耗費資源少，易於解析和渲染運行起來更快。非法的HTML程式碼讓實作響應式設計變得異常困難。

當使用模板時，合法的HTML代碼顯得異常重要，經常會發生模板單獨運行良好，當與其他模組集成時就報各種各樣的錯誤，因此一定要保證HTML代碼的質量，可採取以下措施：

  • 在工作流程中新增驗證功能：使用驗證外掛程式如HTMLHint或SublineLinter幫助你偵測程式碼錯誤。

  • 使用HTML5文件類型

  • 確保HTML的層次結構易於維護，並且避免元素巢狀處於左開狀態。

  • 保證新增各元素的結束標籤。

  • 刪除不必要的程式碼；沒有必要為自關閉的元素添加結束標籤；Boolean 屬性不需要賦值，如果存在則為True;

<video src="foo.webm" autoplay controls>
登入後複製

程式碼格式

格式一致性使得HTML程式碼易於閱讀，理解，最佳化，除錯。

语义标记

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

，
及
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

顯示更多

熱門文章

刺客信條陰影：貝殼謎語解決方案
1 個月前 By DDD
Windows 11 KB5054979中的新功能以及如何解決更新問題
3 週前 By DDD
在哪裡可以找到原子中的起重機控制鑰匙卡
1 個月前 By DDD
如何修復KB5055523無法在Windows 11中安裝？
2 週前 By DDD
Inzoi：如何申請學校和大學
3 週前 By DDD
顯示更多

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

顯示更多

熱門話題

gmail信箱登陸入口在哪裡
7781
15
Java教學
1644
14
CakePHP 教程
1399
52
Laravel 教程
1296
25
PHP教程
1234
29
顯示更多
Related knowledge
HTML 中的表格邊框 HTML 中的表格邊框 Sep 04, 2024 pm 04:49 PM

HTML 表格邊框指南。在這裡，我們以 HTML 中的表格邊框為例，討論定義表格邊框的多種方法。

HTML 中的巢狀表 HTML 中的巢狀表 Sep 04, 2024 pm 04:49 PM

這是 HTML 中巢狀表的指南。這裡我們討論如何在表中建立表格以及對應的範例。

HTML 左邊距 HTML 左邊距 Sep 04, 2024 pm 04:48 PM

HTML 左邊距指南。在這裡，我們討論 HTML margin-left 的簡要概述及其範例及其程式碼實作。

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 中的文字移動指南。在這裡我們討論一下marquee標籤如何使用語法和實作範例。

HTML onclick 按鈕 HTML onclick 按鈕 Sep 04, 2024 pm 04:49 PM

HTML onclick 按鈕指南。這裡我們分別討論它們的介紹、工作原理、範例以及各個事件中的onclick事件。

See all articles