编写html之创建良好标记

我们编写HTML文档都力求文档结构良好,只要HTML文档结构良好,将很容易通过添加一层CSS作为修饰,让文档样式变得更加漂亮。那么我们如何设计来编写出正确、合理的文档结构呢?在这里主要讲“创建良好的标记”的结构、内容。

见下面HTML文档代码与注释

<!-- 
选择DOCTYPE 
这个是健壮文档所必需的,目的是告诉浏览器或者其他用户代理知道你要使用的HTML语言的类型
在编写HTML时要做的第一件事 From "the zen of CSS desgin" ; 1.1.2 ; P11
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- 
指定语言和字符集
将HTML文档指定为某一种人类的语言。Google和其他搜索引擎会根据搜索请求的语言来过滤搜索结果,
可以使得搜索引擎带来的流量。
-->
<!-- 设置文档的XML语言,这里设置为简体中文的ISO代码zh-cn -->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">
	<!-- html 部分 -->
<head>
	<!-- 设置文档的字符集,这里为utf-8-->
	<!--
    utf-8是一种Unicode,Unicode则是一种流行的国际性编码方案,所带来的好处就是不同字符集的多种语言,
    将能够共存在同一张页面中,目前唯一阻碍utf-8在web中广泛使用的就是,一些古老的,没有考虑
    到国际化需求的服务器软件以及页面开发工具并不支持uft-8.目前各种浏览器在处理utf-8时都没有
    任何问题,所以在用户端这边并不是问题,问题出现在服务器端。若文档的主要语言是中文,那么
    指定一个更加明确的字符集可能更好些。
  	-->
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<!--以下3个meta不是必须的,作用是一些说明以及增加搜索引擎带来的流量-->
	<meta name="author" content="Spy"/>
	<meta name="keywords" content="design, css , web"/>
	<meta name="description" content="some description"/>
	<!--
	指定标题
  	title的作用就是用来描述页面内容,当访客保存至收藏夹时,内容作为描述同样
  	保存在浏览器中;搜索引擎也对title元素中包含的关键字格外感兴趣,因此可以明显提高
  	页面在搜索引擎中的排名,标题极具描述性地概括该页面的内容。
  	-->
	<title>这是个示例</title>
</head>
<body>
<!-- 这里编写web文档的内容 -->
</body>
</html>

在W3C Qualiyu Assurance上的一篇文章Recommended list of Doctype declarations中就列出了一份推荐的,具有完整、精简、良好结构的HTML文档。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>An XHTML 1.0 Strict standard template</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
</head>
<body>
     <p>… Your HTML content here …</p>
</body>
</html>

DOCTYPE

在HTML的最开始部分声明DOCTYPE是有必要的,其主要有两大作用:

  1. Web浏览器会根据它来决定应该哪一种渲染模式来渲染页面。
  2. 标记验证器会根据它确定哪些规则来检查文档。

DOCTYPE语法

更多请看dev.opera的Choosing the right doctype for your HTML documents.

注 : 渲染模式不是只有”strict”,还有”Transitional”(过渡模式)和”Frameset”(框架模式),每个模式都不一样。

Spy 17 June 2013