标准的HTML代码指的是HTML代码符合W3C的最新标准。
1、验证代码是否符合标准
标准的页面的优点:
标准的页面会保证浏览器正确地渲染;
网页能更容易被搜索引擎搜寻,提高网站的搜索排名;
提高网站的易用性;
网页更好维护和扩展。
验证页面代码最直接的方式是用W3C提供的一项免费的验证服务W3C Validator。它提供三种验证方式:URL、文件上传、直接输入代码。
推荐使用HTML Validator,它是一个Firefox浏览器的插件。
2、标准的HTML页面结构
一个基本的HTML文档结构就是:
<!DOCTYPE html>
<html>
<head></head>
<body></body>
</html>
<!DOCTYPE html>为文档类型声明(HTML5中),使得HTML文档能兼容标准格式。
head部分包含文档的一些基本信息,如网站的编码格式、网站的标题、网站引用的样式和脚本等。
网站的标题:是作为站点的名称和简短描述显示在浏览器的标题栏上的。
<title>网站标题</title>
如果引用JavaScript和CSS外部文件,则需要把外部文件的链接添加到head部分
<link rel="stylesheet" type="text/css" href="my_style.css"/>
<script type="text/javascript" src="my_script.js"></script>
head部分还会包含一些必要的meta标签,是对HTML文档内容的描述,用来表明文档的编码、关键字、介绍、作者等信息。
<meta charset="utf-8">
<meta name="keywords" content="HTML,web">
<meta name="description" content="一个展示HTML页面的例子">
body部分则包含所有在浏览器上展示的内容,如文本、图片、表格、音视频等。
一个稍微完善的页面:
<!DOCTYPE html>
<html>
<head>
<title>网站标题</title>
<meta charset="utf-8">
<meta name="keywords" content="HTML,web">
<meta name="description" content="一个展示HTML页面的例子">
<link rel="stylesheet" type="text/css" href="my_style.css">
<script type="text/javascript" src="my_script.js"></script>
</head>
<body>
<h1>Sample page</h1>
<p>This is a <a href="demo.html">simple</a> page.</p>
<!-- This is a comment -->
</body>
</html>
3、正确闭合HTML标签
HTML中有一些元素是空元素,即不能包含任何内容,也称为自闭合标签。
HTML中的所有自闭合标签:area、base、br、col、command、embed、hr、img、input、keygen、link、param、source、track、wbr。
HTML多个版本的规范都规定了非自闭合标签必须有开始标签和结束标签,而自闭合标签没有闭合标签。
<!-- 非自闭合标签必须有开始标签和结束标签 -->
<a href="demo.html">simple</a>
<!-- 自闭合标签必须没有结束标签 -->
<img src="demo.png" alt="demo" />
有关自闭合标签中是否应该添加符号“/”,在XHTML的规范中最严格,必须添加“/”来表明标签的结束。在HTML4.01的规范中不推荐在自闭合标签中添加“/”来表明标签的结束。
在HTML5中是最宽松的,自闭合标签中添加“/”是可选的。
4、停止使用不标准的标签和属性,简化HTML代码
不推荐使用单纯设置样式的标签,如basefont、big、center、font等,应该通过CSS设置样式。
不推荐在HTML标签中添加样式属性,应该通过CSS样式来实现。
不推荐使用<blink>或<marquee>(闪动或滚动)。应该通过JavaScript代码来实现,可以使用jQuery Marquee插件。
不推荐使用不具语义的标签,如<b>和<i>显示黑体字和斜体,使用更具有语义的<strong>和<em>。
移除不常用的HTML标签,包括acronym、applet、dir等。
5、样式与结构分离
把CSS样式应用于HTML总共有4种方式:
(1)在HTML页面中链接一个CSS文件,做到了样式与结构的分离。(最佳实践的方式,推荐使用)
<link rel="stylesheet" type="text/css" href="my_style.css">
(2)在HTML页面中内嵌CSS样式。(在某些场合有选择地灵活使用)
<style type="text/css">
body {
margin: 0;
padding: 0;
}
</style>
(3)在HTML标签中添加内联CSS样式。(应避免在页面中直接使用)
<span style="color: green; background: transparent">green</span>
(4)在CSS样式文件中加载CSS样式文件。(在任何场合都应该避免使用)
@import "my_style.css";
@import url("my_style.css");
6、添加JavaScript禁用的提示信息
<noscript>标签是在当JavaScript被禁用或者不被支持时提供的一个代替方式,即<noscript>标签中的内容会在此时被浏览器解析。
<script>
//一些操作
</script>
<noscript>
<p>浏览器不支持JavaScript</p>
</noscript>
<noscript>不够灵活,有时JavaScript不可用并不是因为脚本被禁用导致的。因此最好不要使用<noscript>标签。
最佳的实践是:提示用户JavaScript已被禁用,并同时提供一个功能简单、不依赖于JavaScript的代替网站供用户继续浏览,做到平稳降级。
7、添加必要的<meta>标签
<meta>标签中基本上包含网站的一些描述信息,如简介、作者等。
<meta>元素有4个属性:name、http-equiv、content和charset。
<meta>可以分为三类:
(1)name属性和content属性的组合,构成名/值对,用于描述网站的信息。标准的<meta>名称包括:application-name、author、description、generator等。
<!-- 页面关键字 -->
<meta name="keywords" content="HTML,web">
(2)http-equiv属性和content属性的组合。设置特定的HTTP指令。
在HTML5的规范中,指令型meta总共有5种,其中content-type、default-style、refresh已经确定,content-language和set-cookie还未正式确定。
<!-- 页面加载5分钟后刷新 -->
<meta http-equiv="refresh" content="300">
(3)charset属性,设置页面字符编码。提供了一种保存和传输文档的编码格式。
<!-- 声明文档为UTF-8格式 -->
<meta charset="utf-8">
为了让浏览器能准确识别编码格式,务必在<title>标签之间设置charset,保证标题能正确显示。
W3C规范中允许自定义meta类型,但为了防止自定义的meta名称重复,所有的自定义meta应该事先注册。