你不可不知的HTML优化技巧_html/css_WEB-ITnose-html教學-PHP中文網

首頁 web前端 html教學你不可不知的HTML优化技巧_html/css_WEB-ITnose

你不可不知的HTML优化技巧_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 21, 2016 am 08:59 AM

如何提升Web页面的性能，很多开发人员从多个方面来下手如JavaScript、图像优化、服务器配置，文件压缩或是调整CSS。

很显然HTML 已经达到了一个瓶颈，尽管它是开发Web 界面必备的核心语言。HTML页面的负载也是越来越重。大多数页面平均需要40K的空间,像一些大型网站会包含数以千计的HTML 元素，页面Size会更大。

如何有效的降低HTML 代码的复杂度和页面元素的数量，本文主要解决了这个问题，从多个方面介绍了如何编写简练，清晰的HTML 代码，能够使得页面加载更为迅速，且能在多种设备中运行良好。

在设计和开发过程中需要遵循以下原则：

结构分离：使用HTML 增加结构，而不是样式内容；

保持整洁：为工作流添加代码验证工具；使用工具或样式向导维护代码结构和格式

学习新语言：获取元素结构和语义标记。

确保可访问：使用ARIA 属性和Fallback 属性等

测试：使网站在多种设备中能够良好运行，可使用emulators和性能工具。

HTML,CSS 和JavaScript三者的关系

HTML 是用于调整页面结构和内容的标记语言。HTML 不能用于修饰样式内容，也不能在头标签中输入文本内容，使代码变得冗长和复杂，相反使用CSS 来修饰布局元素和外观比较合适。HTML元素默认的外观是由浏览器默认的样式表定义的，如在Chrome中h1标签元素会渲染成32px的Times 粗体。

三条通用设计规则：

使用HTML 来构造页面结构，CSS修饰页面呈现，JavaScript实现页面功能。CSS ZenGarden 很好地展示了行为分离。

如果能用CSS或JavaScript实现就少用HTML代码。

将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('#foo');fooButton.onclick = handleFoo();
登入後複製

验证

优化网页的一种方法就是浏览器可处理非法的HTML 代码。合法的HTML代码很容易调试，且占内存少，耗费资源少，易于解析和渲染运行起来更快。非法的HTML代码让实现响应式设计变得异常艰难。

当使用模板时，合法的HTML代码显得异常重要，经常会发生模板单独运行良好，当与其他模块集成时就报各种各样的错误，因此一定要保证HTML代码的质量，可采取以下措施：

在工作流中添加验证功能：使用验证插件如HTMLHint或SublineLinter帮助你检测代码错误。

使用HTML5文档类型

确保HTML的层次结构易于维护，要避免元素嵌套处于左开状态。

保证添加各元素的结束标签。

删除不必要的代码；没有必要为自关闭的元素添加结束标签；Boolean 属性不需要赋值，如果存在则为True;

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

代码格式

格式一致性使得HTML代码易于阅读，理解，优化，调试。

语义标记

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

选择合适的元素来编写代码可保证代码的易读性：

使用
(
,
…)表示标题，
或
实现列表

注意使用
标签之前应添加
标签；

选择合适的HTML5语义元素如
，
,
,
;

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

使用和标签替代和标签。

使用元素，输入类型，占位符及其他属性来强制验证。

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

例如：

<div>Name: <input type="text" id="name"></div>
登入後複製

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

1: <div>
登入後複製

2: <label for="name">Name:</label><input type="text" id="name">
登入後複製

3: </div>
登入後複製

<br />
登入後複製

布局

要提高HTML代码的性能，要遵循HTML 代码以实现功能和为目标，而不是样式。

使用

元素修饰文本，而不是布局；默认

是自动提供边缘，而且其他样式也是浏览器默认提供的。

避免使用
分行，可以使用block元素或CSS显示属性来代替。

避免使用

来添加水平线，可使用CSS的border-bottom 来代替。

不到关键时刻不要使用div标签。

尽量少用Tables来布局。

可以多使用Flex Box

使用CSS 来调整边距等。

CSS

虽然本文讲解的是如何优化HTML，下面介绍了一些使用css的基本技能：

避免内联css

最多使用ID类一次

当涉及多个元素时，可使用Class来实现。

以上就是本文介绍的优化HTML代码的技巧，一个高质量高性能的网站，往往取决于对细节的处理，因此我们在日常开发中，能够考虑到用户体验，后期维护等方面，则会产生更高效的开发。

本網站聲明

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

熱AI工具

Undresser.AI Undress

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

AI Clothes Remover

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

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

AI Hentai Generator

免費產生 AI 無盡。

顯示更多

熱門文章

R.E.P.O.能量晶體解釋及其做什麼（黃色晶體）
4 週前 By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O.最佳圖形設置
4 週前 By 尊渡假赌尊渡假赌尊渡假赌

刺客信條陰影：貝殼謎語解決方案
2 週前 By DDD

R.E.P.O.如果您聽不到任何人，如何修復音頻
4 週前 By 尊渡假赌尊渡假赌尊渡假赌

WWE 2K25：如何解鎖Myrise中的所有內容
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌

顯示更多

熱工具

記事本++7.3.1

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

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

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

顯示更多

熱門話題

gmail信箱登陸入口在哪裡

7504

15

CakePHP 教程

1378

52

steam的賬戶名稱是什麼格式

78

11

win11激活密鑰永久

52

19

NYT連接提示和答案

19

54

顯示更多

Related knowledge

＆gt; gt;的目的是什麼元素？ Mar 21, 2025 pm 12:34 PM
本文討論了HTML＆lt; Progress＆gt;元素，其目的，樣式和與＆lt; meter＆gt;元素。主要重點是使用＆lt; progress＆gt;為了完成任務和LT;儀表＆gt;對於stati

＆lt; datalist＆gt;的目的是什麼。元素？ Mar 21, 2025 pm 12:33 PM
本文討論了html＆lt; datalist＆gt;元素，通過提供自動完整建議，改善用戶體驗並減少錯誤來增強表格。Character計數：159

HTML5中跨瀏覽器兼容性的最佳實踐是什麼？ Mar 17, 2025 pm 12:20 PM
文章討論了確保HTML5跨瀏覽器兼容性的最佳實踐，重點是特徵檢測，進行性增強和測試方法。

＆lt; meter＆gt;的目的是什麼。元素？ Mar 21, 2025 pm 12:35 PM
本文討論了HTML＆lt; meter＆gt;元素，用於在一個範圍內顯示標量或分數值及其在Web開發中的常見應用。它區分了＆lt; meter＆gt;從＆lt; progress＆gt;和前

 如何使用HTML5表單驗證屬性來驗證用戶輸入？ Mar 17, 2025 pm 12:27 PM
本文討論了使用HTML5表單驗證屬性，例如必需的，圖案，最小，最大和長度限制，以直接在瀏覽器中驗證用戶輸入。

視口元標籤是什麼？為什麼對響應式設計很重要？ Mar 20, 2025 pm 05:56 PM
本文討論了視口元標籤，這對於移動設備上的響應式Web設計至關重要。它解釋瞭如何正確使用確保最佳的內容縮放和用戶交互，而濫用可能會導致設計和可訪問性問題。

＆lt; iframe＆gt;的目的是什麼。標籤？使用時的安全考慮是什麼？ Mar 20, 2025 pm 06:05 PM
本文討論了＆lt; iframe＆gt;將外部內容嵌入網頁，其常見用途，安全風險以及諸如對象標籤和API等替代方案的目的。

Gitee Pages靜態網站部署失敗：單個文件404錯誤如何排查和解決？ Apr 04, 2025 pm 11:54 PM
GiteePages靜態網站部署失敗：404錯誤排查與解決在使用Gitee...

See all articles