IT博客汇 | 给HTML初学者的30条最佳实践

给HTML初学者的30条最佳实践

颜海镜发表于 2013-12-23 00:00:00

Nettuts +运营最困难的方面是为很多技能水平不同的用户提供服务。如果我们发布太多高级教程，我的新手用户将无法从中受益。相反也是如此。我们尽我们最大的努力，但如果你觉得你被忽略了请联系我们。这个网站是为你服务的，所以说出来！如此说来，今天的教程是专为那些刚刚进入web开发领域的人准备的。如果你的经验是一年或更少，希望在这里列出的一些技巧将帮助你成为更好、更高效的开发者!

闲话少说，让我们回顾三十个创建标记的最佳实践。

1.保持标签闭合

以前，经常见到类似下面的代码（译注：这是多久以前啊……）：

Some text here.  
Some new text here.  
You get the idea.

注意外面包裹的UL/OL标签被遗漏了（谁知是故意还是无意的），而且还忘记了关闭LI标签。按今天的标准来看，这是很明显的糟糕做法，应该100%避免。总之，保持闭合标签。否则，你验证html标签的时候可能遇到问题。

更好的方式

  
  Some text here.   
  Some new text here.   
  You get the idea.

2.声明正确的文档类型

声明正确的文档类型

笔者早先曾加入过许多CSS论坛，每当用户遇到问题，我们会建议他首先做两件事：

验证CSS文件，保证没有错误。
确认添加了正确的doctype

DOCTYPE 出现在HTML标签之前，它告诉浏览器这个页面包含的是HTML，XHTML，还是两者混合，这样浏览器才能正确解析。

通常有四种文档类型可供选择：

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
</code></pre>

<p>关于该使用什么样的文档类型声明，一直有不同的说法。通常认为使用最严格的声明是最佳选择，但研究表明，大部分浏览器会使用普通的方式解析这种声明，所以很多人选择使用HTML4.01标准。选择声明的底线是，它是不是真的适合你，所以你要综合考虑来选择适合你得项目的声明。</p>

<h2 id="section-2">3.永远不要使用内联样式</h2>

<p>当你在埋头写代码时，可能会经常顺手或偷懒的加上一点行内css代码，就像这样：</p>

<pre><code><p style="color: red;">I'm going to make this text red so that it really stands out and makes people take notice! </p> 
</code></pre>

<p>这样看起来即方便又没有问题。然而，这在你的编码实践中是个错误。</p>

<p>在你写代码时，在内容结构完成之前最好不要加入样式代码。</p>

<blockquote>
  <p>这样的编码方式就像打游击，是一种很山寨的做法。——Chris Coyier</p>
</blockquote>

<p>更好的做法是，完成标签部分后，再把这个P的样式定义在外部样式表文件里。</p>

<p><strong>建议</strong></p>

<pre><code>#someElement > p {  
  color: red;  
}
</code></pre>

<h2 id="csshead">4.将所有外部css文件放入head标签内</h2>

<p>理论上讲，你可以在任何位置引入CSS样式表，但HTML规范建议在网页的head标记中引入，这样可以加快页面的渲染速度。</p>

<blockquote>
  <p>雅虎的开发过程中，我们发现，在head标签中引入样式表，会加快网页加载速度，因为这样可以使页面逐步渲染。 —— ySlow团队</p>
</blockquote>

<pre><code><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>  
</code></pre>

<h2 id="javascript">5.javascript文件放在底部</h2>

<p><img alt="javascript文件放在底部" src="/blog/29.png"  /></p>

<p>要记住一个原则，就是让页面以最快的速度呈现在用户面前。当加载一个脚本时，页面会暂停加载，直到脚本完全载入并执行完成。因此会浪费用户更多的时间。</p>

<p>如果你的JS文件只是要实现某些功能，（比如点击按钮事件），那就放心的在body底部引入它，这绝对是最佳的方法。</p>

<p><strong>建议</strong></p>

<pre><code><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> 
</code></pre>

<h2 id="javascript1996">6.永远不要使用内联javascript。现在不是1996年了！</h2>

<p>许多年以前，还存在一种这样的方式，就是直接将JS代码加入到HTML标签中。尤其是在简单的图片相册中非常常见。本质上讲，一个“onclick”事件是附加在 标签上的，其效果等同于一些JS代码。不需要讨论太多，非常不应该使用这样的方式，应该把代码转移到一个外部JS文件中，然后使用“ addEventListener / attachEvent ”加入事件监听器。或者使用<a href="http://jquery.com/">jquery</a>等框架，只需要使用“click”方法。</p>

<pre><code>$('a#moreCornInfoLink').click(function() {  
  alert('Want to learn more about corn?');  
}); 
</code></pre>

<h2 id="section-3">7.边开发，边验证</h2>

<p><img alt="" src="/blog/30.png"  /></p>

<p>很多人并不真正理解标准验证的意义和价值，笔者在一篇博客中详细分析了这个问题。一句话，验证是为你服务的，不是给你找麻烦的。</p>

<p>如果你刚开始从事网页制作，那强烈建议你下载<a href="https://addons.mozilla.org/en-US/firefox/addon/60">Web Developer Toolbar</a>（chrome用户请自行在应用商店搜索，ie用户可能就杯具了） ，并在编码过程中随时使用”HTML标准验证”和“CSS标准验证”。如果你认为CSS是一种非常好学的语言，那么它会把你整的死去活来。你不严谨的代码会让你的页面漏洞百出，问题不断，一个好的方法就是—— 验证，验证，再验证。</p>

<h2 id="firebug">8.下载firebug</h2>

<p><img alt="" src="/blog/31.png"  /></p>

<p>Firebug是当之无愧的网页开发最佳插件，它不但可以调试JavaScript，还可以直观的让你了解页面标记的属性和位置。不用多说， <a href="https://addons.mozilla.org/en-US/firefox/addon/1843">下载</a>！</p>

<h2 id="firebug-1">9.使用firebug</h2>

<p><img alt="" src="/blog/32.png"  /></p>

<p>据笔者观察，大部分的使用者仅仅使用了Firebug 20%的功能，那真是太浪费了，你不妨花几个小时的时间来系统学习这个工具，相信会让你事半功倍。</p>

<p><strong>资源</strong></p>

<ul>
  <li><a href="http://michaelsync.net/2007/09/08/firebug-tutorial-overview-of-firebug">Overview of Firebug</a></li>
  <li><a href="http://www.digitalmediaminute.com/screencast/firebug-js/">Debug Javascript With Firebug – video tutorial</a></li>
</ul>

<h2 id="section-4">10.保持标签名小写</h2>

<p>理论上讲，html不区分大小写，你可以随意书写，例如：</p>

<pre><code><DIV>  
<P>Here's an interesting fact about corn. </P>  
</DIV>
</code></pre>

<p>但最好不要这样写，费力气输入大些字母没有任何用处，并且会让代码很难看.</p>

<p><strong>建议</strong></p>

<pre><code><div>  
　　<p>Here's an interesting fact about corn. </p>  
</div> 
</code></pre>

<h2 id="h1-h6">11.使用H1-H6标签</h2>

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

<pre><code><h1>This is a really important corn fact! </h1>  
<h6>Small, but still significant corn fact goes here. </h6>
</code></pre>

<h2 id="h1">12.写博客时，请将H1留给文章标题</h2>

<p><img alt="" src="/blog/33.jpg"  /></p>

<p>今天笔者在<a href="http://www.twitter.com/nettuts">Twitter</a>上发起一次讨论：是该把H1定义到LOGO上还是定义到文章标题上，有80%的人选择了后者。</p>

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

<h2 id="yslow">13.下载ySlow</h2>

<p><img alt="" src="/blog/34.png"  /></p>

<p>在过去几年里，雅虎的团队在前端开发领域做了许多伟大的工作。前不久，它们发布了一个叫ySlow的Firebug扩展，它会分析你的网页，并返回 一个“成绩单”，上面细致分析了这个网页的方方面面，提出需要改进的地方，虽然它有点苛刻，但它绝对会对你有所帮助，强烈推荐—— <a href="http://developer.yahoo.com/yslow/">ySlow</a>！</p>

<h2 id="ul">14.使用无序列表（UL）包裹导航菜单</h2>

<p><img alt="" src="/blog/35.png"  /> </p>

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

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

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

<blockquote>
  <p>为什么要用UL布局导航菜单？ ——因为UL生来就是为定义列表准备的</p>
</blockquote>

<p>最好这样定义：</p>

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

<h2 id="ie">15.学习如何应对IE</h2>

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

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

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

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

<h2 id="ide">16.选择合适的IDE</h2>

<p><img alt="" src="/blog/36.png"  /> </p>

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

<p>Mac 用户</p>

<ul>
  <li><a href="http://www.panic.com/coda">Coda</a></li>
  <li><a href="http://macrabbit.com/espresso/">Espresso</a></li>
  <li><a href="http://macromates.com/">TextMate</a></li>
  <li><a href="http://www.aptana.com/">Aptana</a></li>
  <li>
    <p><a href="http://www.adobe.com/products/dreamweaver/">DreamWeaver CS4</a>
PC 用户</p>
  </li>
  <li><a href="http://intype.info/home/index.php">InType</a></li>
  <li><a href="http://www.e-texteditor.com/">E-Text Editor</a></li>
  <li><a href="http://notepad-plus.sourceforge.net/uk/site.htm">Notepad++</a></li>
  <li><a href="http://www.aptana.com/">Aptana</a></li>
  <li><a href="http://www.adobe.com/products/dreamweaver/">Dreamweaver CS4</a></li>
</ul>

<h2 id="section-5">17.上线前，压缩代码</h2>

<p><img alt="" src="/blog/37.png"  />  </p>

<p>通过压缩您的CSS和Javascript文件，您可以减少总大小的25%左右，但在开发过程中不必压缩，然而，一旦网站完成后，利用一些网络压缩程序或多或少节省一些带宽。下面列出一些工具。</p>

<p><strong>Javascript 压缩服务</strong></p>

<ul>
  <li><a href="http://javascriptcompressor.com/">Javascript Compressor</a></li>
  <li><a href="http://www.xmlforasp.net/JSCompressor.aspx">JS Compressor</a></li>
</ul>

<p><strong>CSS Compression Services</strong></p>

<ul>
  <li><a href="http://www.cssoptimiser.com/">CSS Optimiser</a></li>
  <li><a href="http://www.cssdrive.com/index.php/main/csscompressor/">CSS Compressor</a></li>
  <li><a href="http://www.cleancss.com/">Clean CSS</a></li>
</ul>

<h2 id="section-6">18.精简，精简，在精简</h2>

<p><img alt="" src="/blog/38.jpg"  /></p>

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

<blockquote>
  <p>网页写完后，一定要多次回头检查，尽量的减少元素的数量。 能用UL布局的列表就不要用一个个的DIV去布局。</p>
</blockquote>

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

<h2 id="alt">19.给所有图片加上“alt”属性</h2>

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

<p><strong>糟糕的做法</strong></p>

<pre><code><IMG SRC="cornImage.jpg"  /> 
</code></pre>

<p><strong>更好的做法</strong></p>

<pre><code><img src="cornImage.jpg" alt="A corn field I visited."  />  
</code></pre>

<h2 id="section-7">20.通宵达旦</h2>

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

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

<h2 id="section-8">21.查看源代码</h2>

<p><img alt="" src="/blog/39.png"  /> </p>

<p>没有什么比模仿你的偶像能让你更快的学习HTML。起初，我们都要甘做复印机，然后慢慢得发展自己的风格。研究你喜欢的网站页面代码，看看他们是怎么实现的。这是高手的必经之路，你一定要试一下。注意：只是学习和模仿他们的编码风格，而不是抄袭和照搬！</p>

<p>留意网络上各种炫酷的JavaScript效果，如果看上去是使用了插件，那根据它源码中head标签内的文件名，就可以找到这个插件名称，然后就可以学习它据为己用。</p>

<h2 id="section-9">22.为所有的元素定义样式</h2>

<p>这一条在你制作其他公司企业网站时尤为必要。你自己不使用blockquote标记？那用户可能会用，你自己不使用OL？用户也可能会。花时间做一个页面，显示出ul, ol, p, h1-h6, blockquotes, 等等元素的样式，检查一下是否有遗漏。</p>

<h2 id="section-10">23.使用第三方服务</h2>

<p><img alt="" src="/blog/40.gif"  /> </p>

<p>现在互联网上流行着许多可以免费加在网页中的API，这些工具非常强大。它可以帮你实现许多巧妙的功能，更重要的是可以帮你宣传网站。</p>

<p>24.掌握Photoshop</p>

<p><img alt="" src="/blog/41.png"  />  </p>

<p>Photoshop是前端工程师的一个重要工具，如果你已经熟练掌握HTML和CSS，那不妨多学习一下Photshop。</p>

<ol>
  <li>观看Psdtuts+上的<a href="http://psd.tutsplus.com/category/videos/">视频课程</a>。</li>
  <li>花费每月25$注册成为<a href="http://www.lynda.com/">Lynda.com</a>的会员，海量精品课程。</li>
  <li>推荐“<a href="http://www.mydamnchannel.com/You_Suck_at_Photoshop/Season_1/1DistortWarpandLayerEffects_1373.aspx">You Suck at Photoshop</a>”系列</li>
  <li>花费几个小时记住尽可能多的PS快捷键。</li>
</ol>

<h2 id="html">25.学习每一个HTML标签</h2>

<p>虽然有些HTML标签很少用到，但你依然应该了解他们。比如“abbr”、“cite”等，你必须学习它们以备不时之需。</p>

<p>顺便说下，如果你不熟悉上面两个标签，可以看下下面的解释：</p>

<ul>
  <li><strong>abbr</strong> 和你估计的差不多，它是abbreviation的缩写（英语差的估计不到），“Blvd”能用<code><abbr></code>标签包裹，因为他是“boulevard”的缩写。（喜大普奔也可以喽）。</li>
  <li><strong>cite</strong> 被用来作为引用内容的标题（blockquote）。例如，如果你在你的博客中引用本篇文章，你可以将“给HTML初学者的三十条最佳实践”用<code><cite></code>包裹，注意它不应该被用来包裹引用的作者，这是常见的误区。</li>
</ul>

<h2 id="section-11">26.参与社区讨论</h2>

<p>网络上有许许多多优秀的资源，而社区中也隐藏着许多高手，这里你既可以自学，也能请教经验丰富的开发者。</p>

<h2 id="resetcss">27.使用reset.css</h2>

<p>Css Reset也就Reset Css ,就是重置一些HTML标签样式，或者说默认的样式。</p>

<p>关于是否应该使用CSS Reset，网上也有激烈的争论，笔者是建议使用的。你可以先选用一些成熟的CSS Reset，然后慢慢演变成适合自己的。</p>

<pre><code>html, body, div, span,   
h1, h2, h3, h4, h5, h6, p, blockquote, pre,  
a, abbr, acronym, address, big, cite, code,  
img, ins, kbd, q, s, samp,  
small, strike, strong,   
dl, dt, dd, ol, ul, li,  
fieldset, form, label, legend,  
table, caption, tbody, tfoot, thead, tr, th, td {  
    margin: 0;  
    padding: 0;  
    border: 0;  
    outline: 0;  
    font-size: 100%;  
    vertical-align: baselinebaseline;  
    background: transparent;  
}  
body {  
    line-height: 1;  
}  
ol, ul {  
    list-style: none;  
}  
blockquote, q {  
    quotes: none;  
}  
blockquote:before, blockquote:after,  
q:before, q:after {  
    content: '';  
    content: none;  
}  
  
table {  
    border-collapse: collapse;  
    border-spacing: 0;  
}
</code></pre>

<h2 id="section-12">28.对齐元素</h2>

<p><img alt="" src="/blog/42.png"  /></p>

<p>简单来说，你应该尽可能的对齐你的网页元素。可以观察一下你喜欢的网站，它们的LOGO、标题、图表、段落肯定是对得非常整齐的。否则就会显得混乱和不专业。</p>

<h2 id="psd">29.关于PSD切片</h2>

<p><img alt="" src="/blog/43.jpg"  /></p>

<p>现在你已经掌握了HTML、CSS、Photoshop知识，那么你还需要学习如何把PSD转换为网页上的图片和背景，下面有两个不错的教程：</p>

<ul>
  <li><a href="http://net.tutsplus.com/videos/screencasts/slice-and-dice-that-psd/">Slice and Dice that PSD</a></li>
  <li><a href="http://net.tutsplus.com/videos/screencasts/converting-a-design-from-psd-to-html/">From PSD to HTML/CSS</a></li>
</ul>

<h2 id="section-13">30.不要随意使用框架</h2>

<p>Javascript和CSS都有许多优秀的框架，但如果你是初学者，不要急于使用它们。如果你还没能熟练的驾驭CSS，使用框架会混淆你的知识体系。尽管你可能能会说javascript和jQuery是可以同事学习的，但这对css并不适合。我个人提倡960 CSS 网格框架，并且我经常使用它。还是那句话，如果你是css的初学者，学习框架只会让你更加困惑。</p>

<p>CSS框架是为熟练开发者设计的，这样会节省它们大量的时间。</p>

<h2 id="section-14">译者注</h2>

<p>这篇文章发表于2009年，弹指一挥间，4年时间已悄然溜走，文中有些知识已显得陈旧过时，但很多规则同样适用，下面是译者补充的关于已经过时的建议，如果你觉得哪里需要改进可以参与讨论。</p>

<p><strong>#1</strong></p>

<p>html5标准放宽了要求，允许标签不闭合，而且浏览器也能很好的修正这个问题，但这并不是你不闭合标签的理由，有时不闭合标签可能带来无法预知的错误。放宽标准其实是降低了开发的门槛，这本是web的真谛，人人可参与，其实xhtml规范要求页面有错误就停止渲染，这本身并不现实，而且浏览器也从来没有这么做过，毕竟用户宁愿看到有些错误的页面，也不愿看到白板一张。</p>

<p><strong>#8</strong></p>

<p>跨浏览器的firebug正在开发当中，然而发布之日却遥遥无期，chrome，safari，ie和opera都有自己的开发者工具，而且功能也不错，这里推荐chrome的开发者工具，大有后来者居上之风，其发展可谓一日千里，相信超越firebug指日可待。</p>

<p><strong>#9</strong></p>

<p><a href="http://www.ruanyifeng.com/blog/2008/06/firebug_tutorial.html">Firebug入门指南-阮一峰的博客</a></p>

<p><strong>#16</strong></p>

<p><a href="http://www.sublimetext.com/">sublime</a></p>

<p><strong>#20</strong></p>

<p>我以前也曾这样，确实学到不少知识，但自从看了曲黎敏副教授讲解的《黄帝内经》后，就不这样了，我也不建议你这样，11点是睡觉的最晚时间了</p>

<p><strong>#23</strong></p>

<p>英文原文标题为“使用twitter ”，这个在中国应该是微博么！！！</p>

<p><strong>#25</strong></p>

<p>address标签也容易被误用，你不见得知道哦！</p>

<p><strong>#27</strong></p>

<p>上面给出的代码可能已经更新，下面有地址，建议用normalize.css而非rerset.css</p>

<ul>
  <li><a href="http://meyerweb.com/eric/tools/css/reset/">meyer 的 reset.css</a></li>
  <li><a href="http://html5doctor.com/html-5-reset-stylesheet/">html5doctor的 reset.css</a></li>
  <li><a href="http://necolas.github.io/normalize.css/">normalize.css</a></li>
</ul>

<p><strong>#30</strong></p>

<p>现在<a href="http://www.bootcss.com/">bootstrap</a>或来着居上，本人提倡这个框架，发展很猛，当然还有好多框架都很不错哦。</p>

<p><strong>#31</strong></p>

<p>本文为翻译文章原文 “<a href="http://net.tutsplus.com/tutorials/html-css-techniques/30-html-best-practices-for-beginners/">30 html best practices for beginner</a>“，本文为本人整理，<a href="http://www.bitscn.com/school/HTMLCSS/201002/181730.html">原译文</a>在此 译文，在原译文基础上有所改动。</p>

<p>本系列文章有三篇，令两篇如下：</p>

<ul>
  <li><a href="http://yanhaijing.com/javascript/2013/12/11/24-JavaScript-best-practices-for-beginners">给javascript初学者的24条建议</a></li>
  <li><a href="http://yanhaijing.com/jquery/2013/12/05/writing-better-jquery-code">高效jQuery的奥秘</a></li>
</ul>