HTML初学者可用的105条最好实践活动

下列便是HTML初学者可用的310条最好实践活动，共享给大伙儿供大伙儿参照，实际內容以下

1.维持标识闭合

之前，常常见到相近下面的编码（译注：这是多久之前啊……）：

XML/HTML Code拷贝內容到剪贴板
  1. <li>Some text here.     
  2. <li>Some new text here.     
  3. <li>You get the idea.   

留意外面包裹的UL/OL标识被忽略了（谁知是有意還是不经意的），并且还忘掉了关掉LI标识。按今日的规范看来，这是很显著的不尽人意做法，应当100%防止。总而言之，维持闭合标识。不然，你认证html标识的情况下将会遇到难题。

更好的方法

XML/HTML Code拷贝內容到剪贴板
  1. <ul>     
  2.   <li>Some text here. </li>     
  3.   <li>Some new text here. </li>     
  4.   <li>You get the idea. </li>     
  5. </ul>    

2.申明正确的文本文档种类

笔者以前曾添加过很多CSS论坛，每当客户遇到难题，大家会提议他最先做两件事：

1. 认证CSS文档，确保沒有不正确。

2. 确定加上了正确的doctype

DOCTYPE 出現在HTML标识以前，它告知访问器这个网页页面包括的是HTML，XHTML，還是二者混和，这样访问器才可以正确分析。

一般有4种文本文档种类可供挑选：

XML/HTML Code拷贝內容到剪贴板
  1. <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>  
  2.   
  3.   
  4. <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>  
  5.   
  6.   
  7. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>  
  8.   
  9.   
  10. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>  
  11.   

有关该应用甚么样的文本文档种类申明，1直有不一样的说法。一般觉得应用最严苛的申明是最好挑选，但科学研究说明，绝大多数访问器会应用一般的方法分析这类申明，因此许多人挑选应用HTML4.01规范。挑选申明的底线是，它是否真的合适你，因此你要综合性考虑到来挑选合适你得新项目的申明。

3.始终不必应用内联款式

当你在低头写编码时，将会会常常随手或偷懒的再加1点行内css编码，就像这样：

XML/HTML Code拷贝內容到剪贴板
  1. <p style="color: red;">I'm going to make this text red so that it really stands out and makes people take notice! </p>     

这样看起来即便捷又沒有难题。但是，这在你的编号实践活动中是个不正确。

在你写编码时，在內容构造进行以前最好是不必添加款式编码。

这样的编号方法就像打游击，是1种很山寨的做法。——Chris Coyier

更好的做法是，进行标识一部分后，再把这个P的款式界定出外部款式表文档里。

提议

XML/HTML Code拷贝內容到剪贴板
  1. #someElement > p {     
  2.   color: red;     
  3. }  

4.将全部外界css文档放入head标识内

基础理论上讲，你能够在任何部位引进CSS款式表，但HTML标准提议在网页页面的head标识中引进，这样能够加速网页页面的3D渲染速率。

yahoo的开发设计全过程中，大家发现，在head标识中引进款式表，会加速网页页面载入速率，由于这样可使网页页面逐渐3D渲染。 —— ySlow精英团队

XML/HTML Code拷贝內容到剪贴板
  1. <head>     
  2. <title>My Favorites Kinds of Corn</title>     
  3. <link rel="stylesheet" type="text/css" media="screen" href="path/to/file.css" />     
  4. <link rel="stylesheet" type="text/css" media="screen" href="path/to/anotherFile.css" />     
  5. </head>    

5.javascript文档放在底部

要记牢1个标准，便是让网页页面以最快的速率展现在客户眼前。当载入1个脚本制作时，网页页面会中止载入，直至脚本制作彻底加载并实行进行。因而会消耗客户更多的時间。

假如你的JS文档只是要完成一些作用，（例如点一下按钮恶性事件），那就安心的在body底部引进它，这肯定是最好的方式。

提议

JavaScript Code拷贝內容到剪贴板
  1. <p>And now you know my favorite kinds of corn. </p>     
  2. <script type="text/javascript" src="path/to/file.js"></script>     
  3. <script type="text/javascript" src="path/to/anotherFile.js"></script>     
  4. </body>     
  5. </html>    

6.始终不必应用内联javascript。如今并不是1996年了！

很多年之前，还存在1种这样的方法，便是立即将JS编码添加到HTML标识中。特别是在简易的照片相册中十分普遍。实质上讲，1个“onclick”恶性事件是额外在 标识上的，其实际效果等同于于1些JS编码。不必须探讨太多，十分不可该应用这样的方法，应当把编码迁移到1个外界JS文档中，随后应用“ addEventListener / attachEvent ”添加恶性事件监视器。或应用jquery等架构，只必须应用“click”方式。

JavaScript Code拷贝內容到剪贴板
  1. $('a#moreCornInfoLink').click(function() {     
  2.   alert('Want to learn more about corn?');     
  3. });    

7.边开发设计，边认证

假如你一开始从业网页页面制做，那明显提议你免费下载Web Developer Toolbar（chrome客户请自主在运用店铺检索，ie客户将会就杯具了） ，并在编号全过程中随时应用”HTML规范认证”和“CSS规范认证”。假如你觉得CSS是1种十分难学的語言，那末它会把你整的欲死欲仙。你不认真细致的编码会让你的网页页面系统漏洞百出，难题持续，1个好的方式便是—— 认证，认证，再认证。

8.免费下载firebug

Firebug是实至名归的网页页面开发设计最好软件，它不仅能够调节JavaScript，还能够直观的让你掌握网页页面标识的特性和部位。无需多说， 免费下载！

9.应用firebug

据笔者观查，绝大多数的应用者仅仅应用了Firebug 20%的作用，那简直太消耗了，你何不花几个小时的時间来系统软件学习培训这个专用工具，坚信会让你事倍功半。

10.维持标识名小写

基础理论上讲，html不区别尺寸写，你能够随便撰写，比如：

XML/HTML Code拷贝內容到剪贴板
  1. <DIV>     
  2. <P>Here's an interesting fact about corn. </P>     
  3. </DIV>  

但最好是不必这样写，费劲气键入大些字母沒有任何用途，而且会让编码很不好看.

提议

XML/HTML Code拷贝內容到剪贴板
  1. <div>     
  2. 　　<p>Here's an interesting fact about corn. </p>     
  3. </div>   

11.应用H1-H6标识

提议你在网页页面中应用在其中所有6种标识，尽管绝大多数人只会用到前4个，但应用数最多的H会有许多益处，例如机器设备友善、检索模块友善等，何不把你的P标识都更换成H6。

XML/HTML Code拷贝內容到剪贴板
  1. <h1>This is a really important corn fact! </h1>     
  2. <h6>Small, but still significant corn fact goes here. </h6>  

12.应用无编码序列表（UL）包裹导航栏菜单

一般网站都会有导航栏菜单，你能够用这样的方法界定：

XML/HTML Code拷贝內容到剪贴板
  1. <div id="nav">     
  2.  <a href="#">Home </a>     
  3.   <a href="#">About </a>     
  4.   <a href="#">Contact </a>     
  5. </div>  

假如你想撰写幽美的编码，那最好是不必用这类方法。

为何要用UL合理布局导航栏菜单？ ——由于UL生来便是为界定目录提前准备的

最好是这样界定：

XML/HTML Code拷贝內容到剪贴板
  1. <ul id="nav">     
  2.   <li><a href="#">Home</a></li>     
  3.   <li><a href="#">About</a></li>     
  4.   <li><a href="#">Contact</a></li>     
  5. </ul>    

15.学习培训怎样解决IE

IE1直以来全是前端开发开发设计人员的恶梦！

假如你的CSS款式表基础定型了，那末能够为IE独立创建1个款式表，随后这样仅对IE起效：

CSS Code拷贝內容到剪贴板
  1. <!--[if lt IE 7]>     
  2.    <link rel="stylesheet" type="text/css" media="screen" href="path/to/ie.css" />     
  3. <![endif]-->   

 这些编码的意思是：假如客户访问器是IE6及下列，那这段编码才会起效。假如你想把IE7也包括进来，那末就把“[if lt IE 7]”改成“[if lte IE 7]”。

以上便是本文的所有內容，期待对大伙儿学习培训有一定的协助。