我经常写网页。
很多人喜欢用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编码。
<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设置和布局设置，我将在后面的文章中介绍。并且在全文结尾处，我会提供完整的模板下载。
（完）
相关推荐
在这个“HTML5_CSS3多颜色柱状图表 带基准数据线”的压缩包中，我们可以深入探讨如何使用这两种技术来创建具有多颜色柱状图的可视化数据展示，并且带有基准数据线，这是一种在数据分析和信息传达中非常常见的图表...
标题中的“480_HTML手机电脑网站_网页源码移动端前端_H5模板_自适应响应式源码 (2).zip”表明这是一个适用于手机和电脑的HTML网页源码压缩包，其中包含了H5（HTML5）模板，且这些模板是自适应和响应式的，意味着它们...
总的来说，这个压缩包提供了一个利用CSS3 3D效果实现的滑动开关按钮模板，可以用于提升网页的用户体验和视觉吸引力。学习和理解其中的CSS3技术，对于网页设计师和前端开发者来说，不仅可以提升他们的技能，也能为...
"PC移动兼容页面模板"是一个专门设计的解决方案，旨在处理PC端和移动端的页面适配问题。这个模板利用了灵活的布局策略和CSS技术，尤其是对`font-size`的调整，来实现跨平台的兼容性。下面我们将深入探讨这一主题。 ...
在这个案例中，可能包含了一整套完整的HTML文件、图像资源、CSS样式表和其他必要的Web文件，用户可以直接下载并按照说明进行安装和修改，以便快速建立自己的企业网站。 总的来说，企业主机模板是一种便捷的网页设计...
特拉福德网站风格基准 用于 Trafford Council 网页和附属网站的基线样式。 Trafford 委员会基于 CMS 的新网站和设计于 2013 年 10 月上线。该设计最初是使用平面 css ... main：标准的 html 模板、css 和 JavaScript。
模板可能包含HTML结构示例、CSS样式表、JavaScript代码和Bootstrap的定制版本，所有这些都是为了实现灵活、可扩展和兼容性强的前端解决方案。通过深入理解并运用这些技术，开发者能够创建出既美观又实用的响应式网站...
2. **styled-components**：这是一个流行的CSS-in-JS库，它允许你使用模板字符串定义样式，并直接与React组件结合使用。 3. **JSS**：这是一个JavaScript样式库，可以用于创建可复用的样式，支持服务器端渲染和热...
综合以上，我们可以看出这个压缩包提供了构建一个基本网站所需的要素，包括结构（HTML）、样式（CSS）和视觉元素（图像）。开发者可以根据这些资源来定制自己的网站，也可以学习和理解网页设计的基本原理和技术。...
2. **CSS3**：层叠样式表第三版，是用于描述HTML文档外观和格式的一种语言。CSS3引入了许多新特性，比如圆角、阴影、动画等，使得开发者能够更加轻松地创建出美观且功能丰富的网站界面。 #### 四、关键技术实现 1....
5. **前端框架**：如Bootstrap、Vue.js、React或Angular等，提供了预设的样式、组件和工具，加速开发进程。这些框架往往包含响应式网格系统、导航、模态框、表单控件等，使得开发者能够快速构建符合现代标准的自适应...
- **功能**：定义文档中所有文本的基本字体，但在HTML5中已被废弃，推荐使用CSS样式。 - **版本**：仅在HTML4中支持。 ##### 15. `<bdo>` - **功能**：定义文本显示的方向，例如从右向左。 - **版本**：自HTML4...
它通过一系列的元素来组织内容，如文本、图片、视频等，使得内容能以结构化的方式展现，并且可以通过CSS和JavaScript进一步美化与增强交互性。 #### HTML的基础组成部分 1. **注释** - **语法**：`<!---->` - **...
"ducking-octo-wallhack" 是一个项目模板，主要用于日常开发工作中，它可能是用于快速启动新项目或者作为代码组织的基准。从标题来看，这个模板可能包含了多种实用功能，帮助开发者更高效地进行日常工作。描述中提到...
- **全局样式**：覆盖了浏览器的默认样式，为页面提供了一个统一的基准。 - **默认的栅格系统**：Bootstrap的栅格系统基于12列布局，允许开发者创建复杂的布局结构。 - **基本栅格HTML**：演示如何使用栅格类将页面...
这个压缩包可能包含一个或多个文件，如JavaScript源代码文件、HTML模板、CSS样式表，甚至可能有示例图片。在网页中，当用户滚动鼠标时，图片能够根据预设规则等比例缩放，为用户提供一种互动且视觉上吸引人的体验。 ...
同时，样式和模板的定制也是关键，用户可以通过CSS样式表控制报表的外观。 在预览阶段，你可以实时查看报表效果，调整布局和样式，确保满足需求。Jaspersoft Studio还支持导出报表为多种格式，如PDF、HTML、Excel等...
2. 在HTML模板中，使用base_url()函数来修改引用JS和CSS文件的路径： ```html <!-- 在HTML头部使用base标签指定基础路径 --> (); ?>"> <!-- 在引用CSS或JS文件时使用base_url()函数 --> (); ?>resource/aaa.js...
母版通常指的是模板或者基准，用于统一和规范系统的视觉样式、布局和功能，而系统目录则涉及文件和数据的组织结构，便于管理和访问。在此，我们将深入探讨这两个概念，并结合"使用必看.txt"可能提供的指南，来理解...
在过去的年代，前端开发者可能只需处理IE6的兼容性问题和跨浏览器的样式一致性就能被视为专家。然而，随着互联网技术的飞速发展，前端开发的角色已经发生了显著变化，现在的高级开发者需要掌握更为广泛且深入的知识...