1.总是使用结束标签
以前，经常见到类似下面的代码
<li>Some text here.
<li>Some new text here.
<li>You get the idea.
LI的结束标签被忽略掉了，按照今天的标准，这是一种很不好的实践，所以应该总是避免这样做。应该总是使用结束标签，否则你可能会遇到验证问题。
更好的方式
<ul>
<li>Some text here. </li>
<li>Some new text here. </li>
<li>You get the idea. </li>
</ul>
2.声明正确的文档类型(DOC type)
DOCTYPE出现在html标签之前，文档的顶部，它告诉浏览器该页面包含HTML、XHTML或者两者的混合，以便浏览器能够正确的解释标签。
在创建新的网站时我们从4个不同的doctype中选择一个
-
<!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">
关于选择哪一个是正确的存在很大的争论，一种观点是使用XHML strict是最佳实践。但是，通过一些研究发现，大多浏览器在解释时把它们恢复成HTML，所以，你可能会选择HTML 4.01 Strict。
3.永远不要使用内嵌样式（inline styles）
在编写页面时，有时你可能写出如下的代码
<p style="color: red;">I'm going to make this text red so that it really stands out and makes people take
notice! </p>
当然，这样做看起来没任何问题，但是他违反了下面的编码实践：
“当创建标签时，甚至不用考虑样式，当页面编码完成时再添加样式。”
所以，先写完标签，然后再从外部样式表中引用标签
#someElement > p {
color: red;
}
4.把所有的外部样式表文件放置在Head标签内
从技术上来说，你可以把外部样式表放置在任何你想放置的位置上，但是HTML规范推荐把他们放置在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
直接把JS代码嵌入到标签中在以前是很常见的，例如把onclick事件直接嵌入到标签中，事件的处理函数在外部JS文件中。但是，这是一种很不好的实践，永远不要把JS嵌入到标签中，而是放到外部JS文件中，使用addEventListener/attachEvent添加事件处理函数。如果使用jQuery的话，直接使用click方法。
$('a#moreCornInfoLink').click(function() {
alert('Want to learn more about corn?');
});
7.持续验证
经常验证你的HTML和CSS是否符合规范，可以使用W3C的验证工具。
8.下载firebug
如果你使用firefox浏览器，一定要下载firebug插件，该插件可以使你方便的调试JS代码，而且它还提供了很多其他有用的东西。
9.使用firebug
很多人只用到了firebug20%左右的功能，花一些时间学习firebug的使用可以使你事半功倍，可以参考firebug官方网站。
10.标签名称使用小写形式
从技术上来说，你可以使用使用标签名称的大写形式
<DIV>
<P>Here's an interesting fact about corn. </P>
</DIV>
但是请不要这样做，因为这样会使代码看起来不舒服，坚持使用小写形式。
更好的方式：
<div>
<p>Here's an interesting fact about corn. </p>
</div>
11.使用H1 - H6标签
为了提高搜索引擎查找你的网站的几率，请在页面中使用H1-H6标签
12.如果创建Blog网站，在文章标题中使用H1标签
同样是搜索引擎的缘故。
13.下载ySlow
雅虎的ySlow可以分析你的网站运行缓慢的原因并给出合适的建议，尽管有时候它的规则过于严格，但是对于优化网站还是很有用处的。
14.用Unordered List包裹导航菜单
每个网站都有某种类型的导航，你当然可以以下面的方式定义它
<div id="nav">
<a href="#">Home </a>
<a href="#">About </a>
<a href="#">Contact </a>
</div>
但是不鼓励采用这种方法，而应该采用更好的方式，如下
view plaincopy to clipboardprint?
<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、JS兼容性方面确实存在很多问题，那么对于CSS文件怎么处理IE的问题呢？
首先，在你完成了主要的CSS编码后，建立一个独立的CSS文件ie.css，如果用户使用的是IE浏览器，就在其中引用该文件。
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" media="screen" href="path/to/ie.css" />
<![endif]-->
16.选择一个好用的代码编辑器
选择一个好的代码编辑器可以极大的提高你的编码效率，并且能够减少出错的几率，一下是一些比较好的代码编辑器
- InType
- E-Text Editor
- Notepad++
- Aptana
- Dreamweaver CS4
17.网站开发完成后，压缩它
通过压缩CSS和JavaScript文件，你可以显著的减小每个文件的大小，从而可以节约一部分带宽，并能加快网站的加载速度。你可以使用在线压缩工具，下面是其中的一些：
JavaScript压缩服务
CSS压缩服务
18.裁剪、裁剪、裁剪
当你写完标签后，请检查是否可以减少页面中的元素个数，把没必要使用的元素删除掉。
19.所有的图片标签img都需要alt属性
很容易忽略掉img标签的alt属性，但是为了可访问性和验证的缘故，请在你的img标签中加上alt属性。
不好的例子
<IMG SRC="cornImage.jpg" />
好的例子
<img src="cornImage.jpg" alt="A corn field I visited." />
20.熬到很晚
作为程序员，熬夜是经常的事，很多时候一些灵感正是从熬夜中得到的，如果你还没有体验过熬到很晚的滋味，just do it。
21.查看源文件
怎么样学习别人好的网站编码和设计，查看页面源代码吧。
22.给所有的元素增加样式
设计客户端应用程序时，给所有的元素增加样式很重要，否则的话你的程序在浏览器端的表现可能不一致。
23.使用Twitter
24.学习Photoshop
对于搞网站设计的人来说，Photoshop的重要性不言而喻，如果你学会了HTML和CSS，那么多学习PS吧。
25.学习每一个HTML标签
有很多HTML标签你在平时没有遇到，但这并不意味着你不需要学习他们，每个标签都有它适合的场合，通过HTML规范手册学习每个标签的用法。
26.参与社区
交流是很好的学习方式。
27.使用CSS重新设置样式
为页面中的每个元素重新设置样式。
28.安排页面元素的位置
把页面中的元素安排到合适的位置，采用很好的对齐方式等。
29.把PS文件转化成网站设计
30.不要使用框架
对于初学者，最好不要使用框架。
分享到：
相关推荐
主要为HTML初学者推荐了适用的三十条最佳实践，感兴趣的小伙伴们可以参考一下
html+css css中那个鼠标移动到a标签上改样式，不需要用到js。真是又学到了
初学者可以在了解PHP和MySQL语法之后，从头至尾学习，对于其中难以理解的部分可以查阅相关资料。对于企业应用类的开发还需要具有一定的JavaScript、CSS等语言基础。有经验的微信公众平台开发人员可以根据自己的需要...
简化新 Express.js 应用程序的创建该项目旨在简化遵循最佳实践的新 Express.js 项目的创建。 当您在项目中使用 express-easy 时，它使用约定来使用通用默认值预先配置您的应用程序，从而使您的应用程序配置更少。 一...
初学者可以在了解PHP和MySQL语法之后，从头至尾学习，对于其中难以理解的部分可以查阅相关资料。对于企业应用类的开发还需要具有一定的JavaScript、CSS等语言基础。有经验的微信公众平台开发人员可以根据自己的需要...
《高性能HTML5》适合于想创建自己网站的初学者，同样也适用于资深网站开发者用于优化已有网站。 Jay Bryant:横跨两个不同的领域：写作和编程。在过去的20 年中，他一直致力于帮助GE（通用电气）、Motorola（摩托罗拉...
不管您是期待编写第一个网页的初学者，还是急需提升编程技能的资深程序员，都会发现对这些基本语言的实践指导，以及有经验的Web专家使用的重要提示和技术。, , 点击链接进入英文版：, Beginning HTML, XHTML, CSS, ...
另请注意，由于这些教程是由初学者编写的，因此它们可能不一定遵循最佳实践。 我欢迎通过对本文档进行任何更改。 这些教程将引导您完成 Umbraco 7 的设置，然后创建一个简单的自定义表单，将数据提交到 Umbraco ...
该HTML和CSS教程介绍了现代技术，这些现代技术现在已被专业Web开发人员视为最佳实践。 无论您是完全的初学者还是专职的Web开发人员，仅想了解行业状况，这些章节都适合您。 弹性盒 响应式设计 响应式图像 语义HTML ...
对于初学者，本书是了解HTML 5的很好的入门材料；而对于想要了解HTML 5知识和应用的有经验的Web开发者，阅读本书更是轻车熟路，能进一步加深对Web开发和HTML 5的理解。 编辑本段 作者简介 Bruce Lawson是Opera...
这是一本少有的、颇具特色的、能为初学者提供捷径的JavaScript实践指南，它由资深Web前端工程师撰写，以渐进增强的开发方式系统讲解了JavaScript的各项最新技术、开发技巧、最佳实践，以及编码风格，通过大量清晰...
一个功能齐全的博客。 包括文章，点赞，评论，登陆注册，排行。 版本 0.2version 已经对前端页面进行了重构，新添响应式js，动画css，新版见 0.1version 没有使用框架，以后可能会重构 主要使用了： JSP-SERVLET-...
本书第6版涵盖了 html5 和 ecmascript 5，很多章节完全重写，增加了当今 web 开发的最佳实践的内容，新增的章节包括 jquery 、服务器端 javascript、图形编程以及javascript式的面向对象。本书不仅适合初学者系统...
过去的经验告诉我们，对于Web开发初学者来说，从一开始就学习最新技术和最佳实践，既可以节省时间，也有利于培养良好的编码习惯（因为避免了那些过时的编码方式和陈旧的技术手段的干扰）本书是HTML与CSS经典入门教程...
无论您是初学者还是资深开发者，无论您是在校学生还是职场人士，本系列资料都将是您学习SSM的得力助手。适用于Java Web开发、企业级应用开发、个人项目实践等多个领域。 四、使用建议 系统学习：按照资料提供的...
无论您是初学者还是有经验的开发人员，这个资料包都是一个宝贵的资源，可以帮助您更好地理解和应用JSP技术。通过学习这些资源，您将能够创建出功能强大、性能优越的Web应用程序，满足不同行业和领域的需求。总之，...
示例代码适合Nuxt3初学者学习和实践，资深者快速参考，爱好者持续跟踪新功能和最佳实践。包括：约定引用组件,动态引用组件,自定义布局,模块化代码,页面路径,动态路由,通配路由,嵌套路由,自定义路由,全局路由中间件...