HTML代码优化实践-优快云博客

在讲解今天的知识点之前，我想先展示两个片段的代码，让大家看看这两段代码有哪些地方是值得以后的项目实践中需要注意的，需要去改进的。
片段一

1 < html >
2 < head >
3 < title >A&B&C </ title >
4 < style type ="text/css" >
5 body { background : pink ; }
6 </ style >
7 </ head >
8 < body >
9 < a href ="http://www.baidu.com" >< h1 >GotoBaiduwebsite. </ h1 ></ a >
10 < div id ="topNav" >
11 < ul id ="bigBarNavigation" >
12 < li >< a href ="/" >HOME </ a ></ li >
13 < li >< a href ="/" >HELPER </ a ></ li >
14 < li >< a href ="/" >ABOUTUS </ a ></ li >
15 </ ul >
16 </ div >
17 </ body >
18 </ html >

片段二

1 <! DOCTYPEhtml >
2 < html >
3 < head >
4 < meta charset ="utf-8" >
5 < title >A &B &C </ title >
6 < link rel ="stylesheet" type ="text/css" href ="test.css" />
7 </ head >
8 < body >
9 < h1 >< a href ="http://www.baidu.com" >GotoBaiduwebsite. </ a ></ h1 >
10 < ul id ="bigBarNavigation" >
11 < li >< a href ="/" >home </ a ></ li >
12 < li >< a href ="/" >helper </ a ></ li >
13 < li >< a href ="/" >aboutus </ a ></ li >
14 </ ul >
15 </ body >
16 </ html >

片段二是对片段一的改进，下面就改进点进行详细的讲解。

1. DOCTYPE的声明

片段二的第 1 行，添加了代码 <!DOCTYPEhtml>

编写HTML代码时，首先要使用"DOCTYPE"进行声明，这就像给你的代码以身份，HTML4.0.1或者XHTML1.0或者HTML5都有严格版本或者过度版本，这些都能很好的支持我们写的代码。我建议大家直接使用<!DOCTYPE html>，原因一方面是现在的布局基本舍弃了table布局，那么我们也就可以不考虑使用过渡型而使用严格型的"DOCTYPE"，另一方面考虑到向后兼容，我们可以直接使用HTML5的声明模式，即 <!DOCTYPE html>

2. 给页面设置字符集和编码字符

片段二中的第 4 行，添加了代码 <metacharset="utf-8">

片段二中的第 5 行，将片段一中的第 3 行中的 "&" 改为 "&"

在每个页面的开始中，我们都应该在 <head> 中设置了字符集，代码中我们一些特殊字符我们应该用字符编码来实现，大家可以在下面的网页进行查询 http://www.ascii-code.com/ 。

3. 正确的代码缩进

片段二中相对于片段一使用了代码缩进，这可以极大的增强代码的可读性。标准程序的缩进应该是一个制表符或几个空格，这里我推荐使用几个空格。

4. 使用外链的方式带入CSS样式和JavaScript

片段二中相对于片段一，将css样式封装到test.css文件中，然后使用<link> 导入。

对于JavaScript，我们同样需要使用外链的方式。

6. 使用标签嵌套要正确

片段二中的第 9 行，<h1><ahref="http://www.baidu.com">GotoBaiduwebsite.</a></h1>, 相对于片段一，我讲<h1>标签从<a>标签内部移至<a>标签外部。

<h1>是块元素，<a>是行内(inline)元素。我们不能将块元素放在行内(inline)元素