HTML 程式碼所寫的30個技巧-html教學-PHP中文網

首頁

web前端

html教學

HTML 程式碼所寫的30個技巧

PHPz

May 16, 2016 pm 04:42 PM

html程式碼編寫

HTML 程式碼所寫的30個技巧

1. 一定要閉合HTML標籤

在以往的頁面原始碼裡，常常看到這樣的語句：

<li>Some text here.
<li>Some new text here.
<li>You get the idea.

也許過去我們可以容忍這樣的非閉合HTML標籤，但在今天的標準來看，這是非常不可取的，是必須百分之百避免的。一定要注意閉合你的HTML標籤，否則將無法通過驗證，並且容易出現一些難以預見的問題。

最好使用這樣的形式：

<ul>
<li>Some text here. </li>
<li>Some new text here. </li>
<li>You get the idea. </li>
</ul>

2. 聲明正確的文檔類型( DocType )

CSS論壇，在那裡，如果有用戶遇到問題，我們會建議他先做兩件事：

1.驗證CSS文件，解決所有可見的錯誤
2 .加上文件類型Doctype

DOCTYPE 定義在HTML標籤出現之前，它告訴瀏覽器這個頁麵包含的是HTML，XHTML，還是兩者混合出現，這樣瀏覽器才能正確的解析標記。

通常有四種文件類型可供選擇：

1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

關於該使用什麼樣的文件類型聲明，一直有不同的說法。通常認為使用最嚴格的聲明是最佳選擇，但研究表明，大部分瀏覽器會使用普通的方式解析這種聲明，所以很多人選擇使用HTML4.01標準。選擇聲明的底線是，它是不是真的適合你，所以你要綜合考慮來選擇適合你得項目的聲明。

3. 不要使用嵌入式CSS樣式

當你在埋頭寫程式碼時，可能會經常順手或偷懶的加上一點嵌入式css程式碼，就像這樣：

<p style="color: red;">脚本之家</p>

這樣看起來即方便又沒有問題，但是它會在你得代碼中產生問題。

當你開始寫程式碼時，最好是在內容結構完成之後再開始加入樣式程式碼。

這樣的編碼方式就像打遊擊，是一種很山寨的做法。 ——Chris Coyier

更好的做法是，把這個P的樣式定義在樣式表檔裡：

someElement > p {
color: red;
}

4. 在頁head標籤中引入所有的樣式表檔案

理論上講，你可以在任何位置引入CSS樣式表，但HTML規範建議在網頁的head標記中引入，這樣可以加快頁面的渲染速度。

在雅虎的開發過程中，我們發現，在head標籤中引入樣式表，會加快網頁載入速度，
因為這樣可以讓頁面逐步渲染。 —— ySlow團隊

<head>
<title>My Favorites Kinds of Corn</title>
<link rel="stylesheet" type="text/css" media="screen" href="path/to/file.css" />
<link rel="stylesheet" type="text/css" media="screen" href="path/to/anotherFile.css" />
</head>

5. 在頁面底部引入JavaScript檔案

要記住一個原則，就是讓頁面以最快的速度呈現在使用者面前。當載入一個腳本時，頁面會暫停加載，直到腳本完全載入。所以會浪費用戶更多的時間。

如果你的JS檔案只是要實現某些功能，（例如點擊按鈕事件），那就放心的在body底部引入它，這絕對是最佳的方法。

舉例：

<p>And now you know my favorite kinds of corn. </p>
<script type="text/javascript" src="path/to/file.js"></script>
<script type="text/javascript" src="path/to/anotherFile.js"></script>
</body>
</html>

6. 不要使用嵌入式JavaScript，這都21世紀了！

許多年以前，還有一種這樣的方式，就是直接將JS程式碼加入HTML標籤中。尤其是在簡單的圖片相簿中非常常見。本質上講，一個“ 標籤上的，其效果等同於一些JS代碼。不需要討論太多，非常不應該使用這樣的方式，應該把程式碼轉移到一個外部JS檔案中，然後使用“ addEventListener / attachEvent 」加入時間偵聽器。或使用jQuery等框架，之需要使用其「clock」方法。

$(&#39;a#moreCornInfoLink&#39;).click(function() {
alert(&#39;Want to learn more about corn?&#39;);
});

7. 開發中隨時進行標準標準驗證

很多人並不真正理解標準驗證的意義和價值，筆者在一篇博客中詳細分析了這個問題。麻煩的。驗證」和「CSS標準驗證」。如果你認為CSS是一種非常好學的語言，那麼它會把你整的死去活來。你的不嚴謹的程式碼會讓你的頁面漏洞百出，問題不斷，一個好的方法就是－驗證，驗證，再驗證。可以直觀的讓你了解頁面標記的屬性和位置。

Firebug官網宣布已停止繼續開發、更新維護Firebug 的通知，邀請大家使用Firefox 內建工具DevTools。

相关推荐：Firebug Alternatives: 10 Best JavaScript Debugging Tools>(Firebug替代品:10个最好的JavaScript调试工具)

9. 使用 Firefox 内置工具 DevTools！

DevTools下载地址：https://developer.mozilla.org/en-US/docs/Tools

10. 使用小写的标记

理论上讲，你可以像这样随性的书写标记：

<DIV>
<P>Here&#39;s an interesting fact about corn. </P>
</DIV>

最好不要这样写，费力气输入大些字母没有任何用处，并且会让代码很难看，这样子就很好：

<DIV>
<P>Here&#39;s an interesting fact about corn. </P>
</DIV>

11.使用H1-H6标签

笔者建议你在网页中使用其中全部六种标记，虽然大部分人只会用到前四个，但使用最多的H会有很多好处，比如设备友好、搜索引擎友好等，不妨把你的P标签都替换成H6。

12. 如果是博客，那把H1留给文章标题

今天笔者在Twitter上发起一次讨论：是该把H1定义到LOGO上还是定义到文章标题上，有80%的人选择了后者。

当然具体如何使用要看你的需求，但我建议你在建立博客的时候，将文章题目定为H1，这对搜索引擎优化(SEO)是非常有好处的。

13. 下载ySlow

在过去几年里，雅虎的团队在前端开发领域做了许多伟大的工作。前不久，它们发布了一个叫ySlow的Firebug扩展，它会分析你的ySlow！

14. 使用UL列表布局导航菜单

通常网站都会有导航菜单，你可以用这样的方式定义：

<div id="nav">
<a href="#">Home </a>
<a href="#">About </a>
<a href="#">Contact </a>
</div>

如果你想书写优美的代码，那最好不要用这种方式，

为什么要用UL布局导航菜单？

——因为UL生来就是为定义列表准备的

最好这样定义：

<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>

15. 学会怎样对付IE

IE一直以来都是前端开发人员的噩梦！

如果你的CSS样式表基本定型了，那么可以为IE单独建立一个样式表，然后这样仅对IE生效：

<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" media="screen" href="path/to/ie.css" />
<![endif]-->

这些代码的意思是：如果用户浏览器是IE6及以下，那这段代码才会生效。如果你想把IE7也包含进来，那么就把“[if lt IE 7]”改为“[if lte IE 7]”。

16. 使用一个好的代码编辑器

不论你是Windows还是Mac用户，这里都有很多优秀的编辑器供你选择：

Mac 用户

Coda
Espresso
TextMate
Aptana
DreamWeaver CS4

PC 用户

InType
E-Text Editor
Notepad++
Aptana
Dreamweaver CS4

17. 压缩前端代码！

Javascript 压缩服务

Javascript Compressor
JS Compressor

CSS Compression Services

CSS Optimiser
CSS Compressor
Clean CSS

18. 缩减，缩减，缩减

回望我们大多数人写的第一个页面，一定会发现严重的 “DIV癖”( divitis )，通常初学者的本能就是把一个段落用DIV包起来，然后为了控制定位而套上更多的DIV。—— 其实这是一种低效而有害的做法。

网页写完后，一定要多次回头检查，尽量的减少元素的数量。

能用UL布局的列表就不要用一个个的DIV去布局。

正如写文章的关键是“缩减，缩减，缩减”一样，写页面也要遵循这个标准。

19. 为所有的图片加上Alt属性

为图片加上alt属性的好处是不言而喻的 —— 这样可以让禁用图片或者使用特殊设备的用户无障碍得了解你的王爷信息，并且对图像搜索引擎友好。

Firefox不支持显示图像Alt属性，可以加入title属性：

<img src="/static/imghwm/default1.png"  data-src="cornImage.jpg"  class="lazy"   alt="脚本之家" title="脚本之家" />

20. 学会熬夜

我经常不知不觉的学习工作到凌晨，我认为这是个很好的状况。

我的“啊～哈！”时间（ “AH-HA” moments，指柳暗花明或豁然开朗的时刻）通常都发生在深夜，比如我彻底理解JavaScript的“闭包”概念，就是在这样一种情况下。如果你还没有感受过这种奇妙的时刻，那就马上试试吧！

21. 查看源代码

沒有什麼比模仿你的偶像能讓你更快的學習HTML。起初，我們都要甘做影印機，然後慢慢得發展出自己的風格。研究你喜歡的網站頁面程式碼，看看他們是怎麼實現的。這是高手的必經之路，你一定要試試看。注意：只是學習和模仿他們的編碼風格，而不是抄襲和照搬！

留意網路上各種酷炫的JavaScript效果，如果看上去是使用了插件，那根據它源碼中head標籤內的文件名，就可以找到這個插件名稱，然後就可以學習它據為己用。

22. 為所有的元素定義樣式

這條在你製作其他公司企業網站時尤為必要。你自己不使用blockquote標記？那用戶可能會用，你自己不使用OL？用戶也可能會。花時間做一個頁面，顯示出ul, ol, p, h1-h6, blockquotes, 等等元素的樣式，檢查一下是否有遺漏。

23. 使用第三方服務

譯者註：英文原文標題為「使用Twitter」

現在網路上流行著許多可以免費加在網頁中的API，這些工具非常強大。它可以幫助你實現許多巧妙的功能，更重要的是可以幫你宣傳網站。

24. 學習Photoshop

Photoshop是前端工程師的重要工具，如果你已經熟練HTML和CSS，不妨多學習Photshop。

Psdtuts 上有許多英文的飾品教學：Videos section
Lynda.com 也有大量教程，不過要付$25美元
You Suck at Photoshop系列教學
花幾個小時的時間學習Photoshop的快捷鍵操作

25. 學習每一個HTML標籤

雖然有些HTML標籤很少用到，但你依然應該了解他們。例如「abbr」、「cite」等，你必須學習它們以備不時之需。

26. 參與社區討論

網路上有許許多多優秀的資源，而社區中也隱藏著許多高手，這裡你既可以自學，也能請教經驗豐富的開發者。

27. 使用CSS Reset

Css Reset也就Reset Css ,就是重置一些HTML標籤樣式，或者說預設的樣式。

關於是否應該使用CSS Reset，網路上也有激烈的爭論，筆者是建議使用的。你可以先選用一些成熟的CSS Reset，然後慢慢演變成適合自己的。

28. 對齊元素

簡單來說，你應該盡可能的對齊你的網頁元素。可以觀察一下你喜歡的網站，它們的LOGO、標題、圖表、段落肯定是對得非常整齊的。否則就會顯得混亂和不專業。

29. 關於PSD切片

現在你已經掌握了HTML、CSS、Photoshop知識，那麼你還需要學習如何把PSD轉換為網頁上的圖片和背景，以下有兩個不錯的教學：

Slice and Dice that PSD
From PSD to HTML/CSS

30.不要隨意使用框架

Javascript和CSS都有許多優秀的框架，但如果你是初學者，不要急於使用它們。如果你還沒能熟練的駕馭CSS，使用框架會混淆你的知識體系。

CSS框架是為熟練開發者設計的，這會節省它們大量的時間。

陳述

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

HTML超文本标记语言--超在那里？（文档分析）Aug 02, 2022 pm 06:04 PM

本篇文章带大家了解一下HTML（超文本标记语言），介绍一下HTML的本质，HTML文档的结构、HTML文档的基本标签和图像标签、列表、表格标签、媒体元素、表单，希望对大家有所帮助！

html和css算编程语言吗Sep 21, 2022 pm 04:09 PM

不算。html是一种用来告知浏览器如何组织页面的标记语言，而CSS是一种用来表现HTML或XML等文件样式的样式设计语言；html和css不具备很强的逻辑性和流程控制功能，缺乏灵活性，且html和css不能按照人类的设计对一件工作进行重复的循环，直至得到让人类满意的答案。

web前端笔试题库之HTML篇Apr 21, 2022 am 11:56 AM

总结了一些web前端面试（笔试）题分享给大家，本篇文章就先给大家分享HTML部分的笔试题（附答案），大家可以自己做做，看看能答对几个！

总结HTML中a标签的使用方法及跳转方式Aug 05, 2022 am 09:18 AM

本文给大家总结介绍a标签使用方法和跳转方式，希望对大家有所帮助！

HTML5中画布标签是什么May 18, 2022 pm 04:55 PM

HTML5中画布标签是“<canvas>”。canvas标签用于图形的绘制，它只是一个矩形的图形容器，绘制图形必须通过脚本（通常是JavaScript）来完成；开发者可利用多种js方法来在canvas中绘制路径、盒、圆、字符以及添加图像等。

html中document是什么Jun 17, 2022 pm 04:18 PM

在html中，document是文档对象的意思，代表浏览器窗口的文档；document对象是window对象的子对象，所以可通过“window.document”属性对其进行访问，每个载入浏览器的HTML文档都会成为Document对象。

html5废弃了哪个列表标签Jun 01, 2022 pm 06:32 PM

html5废弃了dir列表标签。dir标签被用来定义目录列表，一般和li标签配合使用，在dir标签对中通过li标签来设置列表项，语法“<dir><li>列表项值</li>...</dir>”。HTML5已经不支持dir，可使用ul标签取代。

Html5怎么取消td边框May 18, 2022 pm 06:57 PM

3种取消方法：1、给td元素添加“border:none”无边框样式即可，语法“td{border:none}”。2、给td元素添加“border:0”样式，语法“td{border:0;}”，将td边框的宽度设置为0即可。3、给td元素添加“border:transparent”样式，语法“td{border:transparent;}”，将td边框的颜色设置为透明即可。

See all articles