首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

HTML模板跟CSS基准样式(一)

2012-10-17 
HTML模板和CSS基准样式(一)htmlheadtitleHTML Template/titlemeta http-equivContent-Type co

HTML模板和CSS基准样式(一)

<html>

<head>

<title>HTML Template</title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />

<style type="text/css">
@import url(style.css );
</style>

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

<link rel="alternate" type="application/atom+xml" title="Atom" href="" />

</head>

<body>

</body>
</html>

它分成这样几个部分:

1. Doctype部分

这个部分声明网页的类型。我使用的是HTML 4.01 Strict。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

除此还可以选择HTML 4.01 Transitional、XHTML 1.0 Strict和XHTML 1.0 Transitional。相应的DOCTYPE分别为

<!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 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

这里需要注意,如果选择xhtml类型,那么第一行必须加入xml类型说明,而且<html>就是根元素,它后面必须注明文档的命名空间,要写成下面这样:

<?xml version="1.0" encoding="utf-8"?>
<!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" xml:lang="en" lang="en">

我个人还是推荐使用HTML 4,因为xHTML取消了一些标签,用起来不是很灵活。根据我的观察,一些大网站,比如Google和Yahoo!,主页都是使用HTML 4。更多DocTYPE类型,请访问W3C网站。

2. TITLE部分

这个部分最好写成“网站名称 - 网页描述”,或者“网页描述 - 网站名称”,有利于搜索引擎收入你的网页。

3. META部分

这个部分对网页进行说明。

第一行是必须要有的,对网页使用的语言编码进行说明。我在这里使用了UTF-8编码。

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

第二行对网页内容进行描述,第三行提供了网页的关键词。它们是选择性的,不一定要填写。

<meta name="description" content="" />
<meta name="keywords" content="" />

你还可以在这里加入更多的说明,比如网页生成的时间、作者、所用的软件、版权说明等等。

<meta name="date" content="" />
<meta name="author" content="" />
<meta name="generator" content="" />
<meta name="copyright" content="" />

4. Style部分

这个部分加入样式表。

我使用了import命令,此外还可以使用<link>标签,效果是一样的。

<link rel="stylesheet" href="" type="text/css" />

5. Favicon部分

这一行是加入网页的图标。

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

6. Feed部分

这一行是加入网页的Feed。

<link rel="alternate" type="application/atom+xml" title="Atom" href="" />

type类型除了上面的“application/atom+xml”,还可以写成“application/rss+xml”,这根据你的Feed格式而定。

======================

上面只是最基本的网页模板,还缺少起码的CSS设置和布局设置,我将在后面的文章中介绍。并且在全文结尾处,我会提供完整的模板下载。

(完)

热点排行