XHTML+css,web标准学习笔记１——DOCTYPE声明

最新推荐文章于 2025-12-02 22:03:53 发布
转载 最新推荐文章于 2025-12-02 22:03:53 发布 · 671 阅读 · 0
文章标签：

#xhtml #css #web #html #文档 #框架

本文介绍了DOCTYPE声明在XHTML文档中的重要性，以及如何选择合适的DTD。详细解释了三种DTD的区别：过渡的、严格的和框架的。

开始制作符合标准的站点，第一件事情就是声明符合自己需要的DOCTYPE。
查看网页首页原代码，可以看到第一行就是：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">打开一些符合标准的站点，例如著名web设计软件开发商Macromedia，设计大师Zeldman的个人网站，会发现同样的代码。
那么这些代码有什么含义？一定要放置吗？
什么是DOCTYPE
上面这些代码我们称做DOCTYPE声明。DOCTYPE是document type(文档类型)的简写，用来说明你用的XHTML或者HTML是什么版本。
其中的DTD(例如上例中的xhtml1-transitional.dtd)叫文档类型定义，里面包含了文档的规则，浏览器就根据你定义的DTD来解释你页面的标识，并展现出来。
要建立符合标准的网页，DOCTYPE声明是必不可少的关键组成部分；除非你的XHTML确定了一个正确的DOCTYPE，否则你的标识和CSS都不会生效。
XHTML 1.0 提供了三种DTD声明可供选择：
1、过渡的(Transitional):要求非常宽松的DTD，它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)。完整代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2、严格的(Strict):要求严格的DTD，你不能使用任何表现层的标识和属性，例如<br>。完整代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
3、框架的(Frameset):专门针对框架页面设计使用的DTD，如果你的页面中包含有框架，需要采用这种DTD。完整代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
我们选择什么样的DOCTYPE
理 想情况当然是严格的DTD，但对于我们大多数刚接触web标准的设计师来说，过渡的DTD(XHTML 1.0 Transitional)是目前理想选择(包括本站，使用的也是过渡型DTD)。因为这种DTD还允许我们使用表现层的标识、元素和属性，也比较容易通 过W3C的代码校验。
注：上面说的"表现层的标识、属性"是指那些纯粹用来控制表现的tag，例如用于排版的表格、背景颜色标识等。在XHTML中标识是用来表示结构的，而不是用来实现表现形式，我们过渡的目的是最终实现数据和表现相分离。
打个比方：人体模特换衣服。模特就好比数据，衣服则是表现形式，模特和衣服是分离的，这样你就可以随意换衣服。而原来HTML4中，数据和表现是混杂在一起的，要一次性换个表现形式非常困难。呵呵，有点抽象了，这个概念需要我们在应用过程中逐步领会。
补充
DOCTYPE声明必须放在每一个XHTML文档最顶部，在所有代码和标识之上。

houcheng10
关注
html+css+js 学习笔记之css篇
优快云@YuanDaiMa2048的博客
08-16 160
第二部分 持续记录学习html5+css3+js时的一些课程笔记
html标记学习(符合xhtml标准的标记)
挨踢笔记
07-21 1231
html标记学习(符合xhtml标准的标记)tt,kbd等宽,sup+sub,select+option+optgroup,noscript,img.usemap="#编号"+map+area,fieldset+legend+ul列表,label.for,ins,del,i,em,big,b,address,acronym,dfn,code,cite,cente
DIV+CSS学习笔记总结篇
2401_84618790的博客
06-15 767
资料过多，篇幅有限自古成功在尝试。不尝试永远都不会成功。勇敢的尝试是成功的一半。left;}`标题栏样式,使用"类别+功能"的方式命名,如一律小写;尽量用英文;不加中杠和下划线;尽量不缩写，除非一看就明白的单词.推荐的CSS显示属性displaylist-stylepositionfloatclear自身属性widthheightmarginpaddingborderbackground文本属性colorfonttext-alignother textcontent。
XHTML+css,web标准学习笔记２——名字空间
houcheng10的专栏
11-21 667
DOCTYPE声明好以后，接下来的代码是：http://www.w3.org/1999/xhtml" lang="gb2312"> 通常我们HTML4.0的代码只是，这里的"xmlns"是什么呢？这个"xmlns"是XHTML namespace的缩写，叫做"名字空间"声明。名字空间是什么作用呢？由于xml允许你自己定义自己的标识，你定义的标识和其他人定义的标识有可能相同，但表示不同的意义。当文件
html+css+js 学习笔记之html篇
优快云@YuanDaiMa2048的博客
08-14 111
第一部分 持续记录学习html5+css3+js时的一些课程笔记
【学习笔记】前端三件套——HTML和CSS
ubanXia的博客
08-02 2341
它们是两种编程语言，一般情况下它们需要搭配使用，是作为网站开发的基础语言，网站的编程语言。
HTML学习笔记4——CSS3
qq_45569406的博客
08-01 177
HTML学习笔记4——CSS3
Html5+Css3学习笔记
never1624的博客
07-10 1147
css: Cascading Style Sheet ( 级联样式表)作用：美化网页。
HTML5+CSS3+移动web 前端开发入门笔记（一）
shaozheng0503的博客
10-06 886
不同浏览器使用不同的渲染引擎，如WebKit（Safari和Chrome使用）、Gecko（Firefox使用）和Blink（Opera和新版Chrome使用）。JavaScript 引擎会解释并执行 JavaScript 代码，根据 JavaScript 代码修改文档对象模型（DOM），以及更新渲染树（Render Tree）和网页的呈现。新华网藏语频道，使用的是UTF-8，保证字符集的数量。最常用的Unicode编码方案是UTF-8，它使用可变长度的编码方式，根据字符的不同而使用不同长度的字节序列。
韩顺平《轻松搞定网页设计HTML+CSS+JAVASCRIPT》HTML学习笔记.pdf
10-05
根据韩顺平的《轻松搞定网页设计HTML+CSS+JAVASCRIPT》HTML学习笔记.pdf，我们可以总结出以下HTML基础知识点： 1. HTML基本结构：HTML文档的基本结构包括、、三部分，其中是根元素，用于存放元数据，用于存放页面...
web前端零基础html5 +css3+前端项目视频教程笔记、源码第一章初识HTML
11-12
DOCTYPE>声明、根元素、和标签等。 2. 文本、图像和链接：掌握如何插入文本、添加图片以及创建超链接，这些都是网页基本内容的构成元素。 3. 标题和段落：学习使用至定义不同级别的标题，以及标签来创建段落。 4. ...
css网站布局实录学习笔记第二部分XHTML与CSS基础
12-13
第二章 XHTML与CSS基础 2.1 XHTML基础 XHTML是网页代码的核心内容，标准XHTML代码如下： 复制代码代码如下:<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “<a>...
HTML - 换行标签的 3 种写法（＜br＞、＜br/＞、＜br /＞）
weixin_52173250的博客
11-05 311
HTML - 换行标签的 3 种写法（<br>、<br/>、<br />）
CSS 网页布局：技术基础与实践技巧
最新发布
csbysj2020的博客
12-02 383
CSS网页布局是前端开发中的核心技术之一，掌握CSS布局的基础知识和实践技巧对于成为一名优秀的前端开发者至关重要。本文介绍了CSS布局的基础知识、布局模型、实践技巧以及响应式布局，希望对读者有所帮助。
css 父节点设置display: flex； align-items: center；，子节点如何跟随其他子节点撑高的高度
PrimaryColor
12-02 57
父节点设置display: flex;，子节点如何跟随其他子节点撑高的高度？如果子节点设置了height，那么需要取消height的属性，让height为auto。
主题切换（1）：css变量的使用（:root）
Z_Wonderful的博客
12-01 347
:root 是一个伪类选择器，它匹配文档的根元素（即 <html> 元素）。使用 :root 定义 CSS 变量（自定义属性）可以让变量具有全局作用域，方便在整个项目中统一管理和动态调整样式
HTML/CSS 核心考点详解（字节跳动 ToB 中台场景）
2402_87628679的博客
12-01 757
语义化 HTML 就是用有明确含义的标签（如<header><nav><main>）替代无意义的通用标签<div>，让 HTML 结构 “自解释”—— 不用看 CSS/JS，就能看懂页面各部分的功能。块级格式化上下文，是一个 “独立的渲染区域”，区域内的元素布局不受外部影响，同时也不会影响外部元素。可以理解为：BFC 是一个 “隔离的盒子”，盒子里的元素怎么布局，都和盒子外的元素没关系。知识点核心考点实战场景语义化 HTML常用语义标签、结构合理性系统页面布局、模块划分Flex 布局。
[Vue]AntV1.7表格自带筛选确定和重置按钮位置交换
萌狼蓝天の技术栈
12-01 335
原来： 修改后：代码如下： 贴上AI的笔记(因为这个问题就是交给AI解决的 —— 感谢Kiro)需要自定义 Ant Design Vue 表格筛选器下拉框中的按钮样式：由于筛选器下拉框是通过 Portal 渲染到 body 下的，scoped 样式无法生效，需要添加一个不带 的 标签。 2. 关键技术点 2.1 Flexbox 布局控制顺序 使用 启用弹性布局 使用 属性控制元素顺序( 在前， 在后) 使用 让按钮分别靠左右两边 2.2 选择器精确度 使用完整的类名链： 2.3 样式优先级
html css js网页制作成品——鹿晗html+css+js 4页附源码
卡拉米
12-01 548
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值