HTML模板和CSS基准样式（一）

最新推荐文章于 2021-07-02 15:51:04 发布

steely816

最新推荐文章于 2021-07-02 15:51:04 发布

阅读量180

点赞数

分类专栏： web前端文章标签： HTML CSS XHTML Dreamweaver XML

本文链接：https://blog.csdn.net/steely816/article/details/83844983

版权

web前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

我经常写网页。

很多人喜欢用Dreamweaver，但是我的习惯是直接手写代码。虽然那样看上去很原始，但是能够做到对网页最精确的控制，并且减少了不必要的冗余代码。

手写代码最麻烦的地方在于，每次都必须写一些重复性的代码，比如<head>和<body>这样的标签。所以，这两天我就在做一个模板，将那些重复性的代码都事先写好，以后写网页的时候，只要直接写内容部分就可以了。

下面就是我制作模板的过程，也顺便整理了一下相关的HTML和CSS知识。我想对需要自己设计网页的朋友，应该都是有用的。

因为内容比较多，需要分三次才能贴完。今天是第一部分"HTML模板"。

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

一个标准的网页模板，应该看上去是下面这样的：

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

<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编码。