理解DOCTYPE声明与XHTML1.0的三种DTD

需积分: 3 47 浏览量更新于2024-08-01 收藏 192KB DOC 举报

"循序渐进12天学会div+css布局" 在网页设计领域，`div+css`布局是构建现代网页布局的基础。这个12天的学习计划旨在帮助初学者逐步掌握这一技能，从而能够有效地利用`div`元素和`CSS`样式进行网页布局设计。在开始学习之前，了解DOCTYPE的含义和作用至关重要。 DOCTYPE是HTML或XHTML文档的开头声明，它告诉浏览器文档遵循的特定版本的HTML或XHTML规范。在`div+css`布局中，DOCTYPE声明确保浏览器按照正确的方式解析和渲染页面，这对于保持跨浏览器兼容性极其重要。不正确的DOCTYPE可能导致页面在不同浏览器中显示不一致。 XHTML1.0提供了三种DOCTYPE声明： 1. 过渡的(Transitional)：这是一种较为宽松的DTD，允许开发者使用HTML4.01的元素，同时鼓励向XHTML的语法规则过渡。这种DOCTYPE适用于仍需使用某些传统HTML元素但希望逐步向XHTML规范靠拢的网站。示例： ```html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ``` 2. 严格的(Strict)：这种DTD不允许使用任何表现层（presentation）的HTML元素，如`<center>`、`<font>`等，鼓励开发者完全依赖CSS进行样式控制，以实现结构与表现的分离。示例： ```html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> ``` 3. 帧集(Frameset)：适用于包含框架的页面，不允许在文档中直接使用`<body>`元素，而是由多个`<frame>`元素组成。示例： ```html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> ``` 在学习`div+css`布局时，你需要理解如何使用`div`元素作为容器来组织页面内容，以及如何通过CSS来控制这些容器的布局。`div`元素是一个无语义的块级元素，常用于构建网页的布局结构。CSS（层叠样式表）则负责定义这些`div`元素的外观和位置，包括颜色、字体、尺寸、位置等属性。在接下来的12天学习中，你将逐步学习如何创建和定位`div`元素，如何使用CSS选择器，掌握盒模型、浮动、定位等关键概念，以及如何处理浏览器之间的兼容性问题。通过实践，你将能够运用这些知识创建出响应式、易维护的网页布局。记得，实践是学习的关键，尝试创建自己的项目，不断调整和优化，才能真正掌握`div+css`布局的精髓。

这些技巧主要讲 meta 标签设置的，其实与符合 web 标准关系不大，只要注意在最后加"/"关闭标签就可以，但是既然是入门

教程，就写得详细一点吧。

收藏夹小图标

如果你将本站加入收藏夹，可以看到在收藏夹网址之前的 IE 图标变成了本站特别的图标。要实现这样效果很简单，首先制

作一个 16x16 的 icon 图标，命名为 favicon.ico，放在根目录下。然后将下面的代码嵌入 head 区：

为搜索引擎准备的内容

代码如下，替换成你自己站点的内容就可以：

 允许搜索机器人搜索站内所有链接。如果你想某些页面不被搜索，推荐采用 robots.txt 方法

 设置站点作者信息

 设置站点版权信息

 站点的简要介绍(推荐)

 站点的关键词(推荐)

ccessibility, w3c, w3, w3cn, ajie" name="keywords" />

先介绍这么多。补充说明，前面花了 5 节都是讲 head 区的代码，实际页面内容还一字未提，呵呵，不要急，其实 head 区是

非常重要的，看一个页面的 head 的代码就可以知道设计师是否够专业。

剩余26页未读，继续阅读

chang19881025

粉丝: 0
资源: 1

理解DOCTYPE声明与XHTML1.0的三种DTD

DIVCSS布局大全---12天学会DIV+CSS教程

div+css布局大全

WEB2.0 DIV+CSS 布局 循序渐进

div+css页面布局，新手入门教材，2天学会div+css

十天学会DIV+CSS(WEB标准).十天学会DIV+CSS(WEB标准)

DIV+CSS网页布局教程DIV+CSS网页布局技巧如何实现DIV+CSS网页布局.pdf

2天学会DIV+CSS布局实战教程

循序渐进学习DIV+CSS：从基础到整体布局

div+css布局制作箭头步骤流程样式 - div+css教程

十天学会DIV+CSS

最新资源

WEB2.0 DIV+CSS 布局循序渐进