重构技巧四：谁动了我的!DOCTYPE！！！！！

最新推荐文章于 2024-10-30 17:47:19 发布
最新推荐文章于 2024-10-30 17:47:19 发布
阅读量373 收藏
点赞数
分类专栏： html5 文章标签： html5 重构 css 浏览器 怪异模式
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_16074807/article/details/39230291
版权

part1： 加不加<!doctype html>，有区别

几乎所有的网页，现在的，最顶上，在html之前，还有一行代码：<!doctype html>

 噢，它真的很重要。

如果一个html没有定义文档类型，浏览器会不顾W3C的规定，极可能用自己的规则去解析html，出现奇奇怪怪的现象，还有很多兼容性问题。参考文档： http://www.quirksmode.org/css/quirksmode.html#link2

 例1： 标准盒子模型的实际高度=height+padding+border，怪异模式不会。 


 例2：标准模式没有单位的值会被忽略，怪异模式会自己加默认单位px。

 

还有很多例子，加不加<!DYCEOYRPE html>的代码初始状态区别还是有所区别的。

再例，一个默认的span是inline的，其width设置是没意思的，但在IE的quirks模式会生效。

 

嗯，果然是有区别的。

 

part2,：加哪种声明比较好？

嗯，除了加不加有区别，加什么也有区别。

关于选个何种Doctype，也是很有讲究的。

第一种：符合XHTML1.0的transitional模式，过渡型，放在以前，绝对首选。

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

第二种：符合XHTML1.0的Strict模式。

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

第三种：符合XHTML1.0的frameset模式。是专门针对框架页面设计使用的DTD。

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

第四种：适用于手机浏览器的DTD。

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

 

还有呢， WAP1.0和2.0的页面的DTD又不一样，

还有HTML的三种模式。

就不写了吧，太多了，就是DTD不一样而已。

 

最后呢，请尝试这种写法：

<!DOCTYPE html>
<html>
<head></head>
<body></body>
</html>
是的，我们已经定义了doctype，虽然没有指定DTD，但是浏览器已经会用标准模式去渲染页面。
不用担心，html5的doctype就是这样写的，最重要的是，它向后兼容，再先进的浏览器都认识它。

结语，给你的html加上<!DOCTYPE html>

本人已经数次经历因上面这句话没加而产生的bug了。事实上，当发生了一个问题的时候，第一步肯定是去看问题本身，去解决一个span，一段p的问题，而当我们发现原因是浏览器的怪异模式引起的时候，它已经莫名消耗了一个不懂的人的若干时间，和一个懂但是还需要定位到此问题的若干时间。
嗯，共勉。


SongMM_HW
关注
专栏目录
jcbcrouch.github.io:我的个人网站
05-27
【标题】"jcbcrouch.github.io:我的个人网站" 暗示了这是一个基于GitHub Pages建立的个人网页，通常用于展示个人作品、博客或者简历。GitHub Pages是GitHub提供的一项服务，允许用户免费托管静态网站。 【描述】...
web前端期末大作业：美食网站设计与实现——HTML+CSS+JavaScript休闲美食餐饮公司网站静态模板(6个页面)
08-10
- **示例功能实现**：例如，可以通过添加一段简单的JavaScript代码来实现一个基本的轮播图功能，代码可能包括设置定时器来自动切换图片，以及通过点击按钮手动控制图片的切换。 ### 知识点四：网页编辑工具的选择 ...
面试大全-精华版-新-141页.docx
12-18
- **重构**：代码结构优化，保持代码的可读性和可维护性。 - **可维护性和易用性**：关注代码的可读性、可测试性和用户体验。 - **SEO**：搜索引擎优化策略，提高网站在搜索结果中的排名。 - **UED**：用户体验...
html英雄联盟
12-16
在本项目中，“html英雄联盟”是一个以HTML和CSS技术重构的英雄联盟官网网页示例。这个项目对于初学者来说，具有极高的学习价值，因为它提供了实际应用HTML基础知识的机会，同时也展示了如何通过CSS来实现丰富的视觉...
fcc-random-quote-machine-2021
05-22
这个项目可能是一个随机名言机，它在2021年进行了更新或重构。"fcc-random-quote-machine" 是 FCC 的一个初级项目，旨在帮助初学者实践前端开发技能，特别是使用HTML、CSS和JavaScript。 描述中的 "fcc-random-...
css+div定义的优先级
Song MM 的专栏
09-12 2780
一、ID选择器>>类选择器>>自有选择器 如：     //定义#idBlue:blue .classRed:red h2:grey         blablabla2      那么，会显示的是最近的id定义的blue，否则显示最近的class定义的red，否则往上（这里div）找，找到cyan并显示，否则如果上层上上层等找不到定义，就按最近的h2
重构技巧一：解说css3 @media实现网页自适应
Song MM 的专栏
09-12 945
@media all and (max-width:1080px) { html { font-size:62.5% } } @media all and (max-width:720px) { html { font-size:41.666% } } @media all and (max-width:480px) { html { font-s
重构技巧三：移动端文字截取后添加三个点的方法，多行处理方式
Song MM 的专栏
10-11 626
简单的一段文字，截取后只剩一行并添加三个点：运用还是很多的。兼容性相对还好。 overflow:hidden; text-overflow:ellipsis; -o-text-overflow:ellipsis; white-space:nowrap; 有难度的是：想要两行或者多行，超出部分添加...  先说纯css如何截取一长段文字为限定宽度并添加... [code lang
重构技巧二：解说css3 实现加载小动画。
Song MM 的专栏
09-12 477
只写了webkit内核的。 直接用weibkit内核的浏览器如可看，如chrome及大部分只能手机浏览器。
Chromium HTML5 新的 Input 类型url对应c++
杰克东的专栏
10-27 217
url 类型用于应该包含 URL 地址的输入域。在提交表单时，会自动验证 url 域的值。
Chromium HTML5 新的 Input 类型month对应c++
杰克东的专栏
10-27 273
month 类型允许你选择一个月份。 二、c++定义： third_party\blink\renderer\core\html\forms\month_input_type.hthird_party\blink\renderer\core\html\forms\month_input_type.cc
Chromium HTML5 新的 Input 类型range对应c++
杰克东的专栏
10-27 195
range 类型用于应该包含一定范围内数字值的输入域。range 类型显示为滑动条。 二、c++定义： third_party\blink\renderer\core\html\forms\range_input_type.hthird_party\blink\renderer\core\html\forms\range_input_type.cc
Chromium HTML5 新的 Input 类型number对应c++
杰克东的专栏
10-27 227
number 类型用于应该包含数值的输入域。您还能够设定对所接受的数字的限定： 二、c++定义： third_party\blink\renderer\core\html\forms\number_input_type.hthird_party\blink\renderer\core\html\forms\number_input_type.cc
python实现了对一个数据集（从csv文件读取）的数据预处理、异常值检测、数据重构以及使用多种机器学习模型进行评估和调优的功能
最新发布
huanghm88的专栏
10-30 169
总体而言，代码涵盖了数据处理、异常值检测、模型评估和调优等机器学习项目中的常见操作流程，用于分析和处理给定数据集以构建合适的预测模型。文件读取）的数据预处理、异常值检测、数据重构以及使用多种机器学习模型进行评估和调优的功能。这段代码主要实现了对一个数据集（从。代码主要实现了对一个数据集（从。
CSS简介
k_k_kkh的博客
10-25 1328
p>CSS可以将样式定义在HTML元素的style属性中，也可以将其定义在HTML文档的header部分，也可以将样式声明在一个专门的CSS文件中，以供HTML页面引用。另外，可以将相同样式的元素进行归类，使用同一个样式进行定义，也可以将某个样式应用到所有同名的HTML标签中，也可以将一个CSS样式指定到某个页面元素中。<p>在使用HTML定义页面效果的网站中，往往需要大量或重复的表格和font元素形成各种规格的文字样式，这样做的后果就是会产生大量的HTML标签，从而使页面文件的大小增加。
CSS综合案例——新闻详情
k_k_kkh的博客
10-24 1311
如今，一个多世纪过去，“泰坦尼克号”的制造商哈兰德-沃尔夫终究也敌不过时代的锈蚀，不断挣扎后宣告破产。平民小伙的逆袭 哈兰德-沃尔夫公司，正如它的名字所示，是由英国商人爱德华·哈兰德和他的助手、德裔英国人古斯塔夫·沃尔夫创立。<p>五年学徒工生涯结束后，哈兰德通过他叔叔的关系，结识了他此后的事业贵人、来自汉堡的德裔犹太商人施瓦贝。据哈兰德回忆，作为船厂的首席制图师，当时自己的周薪只有1英镑。他出生于英格兰约克郡的一个平民家庭，做医生的父亲在看病之余，还对工程发明有浓厚的兴趣，并拥有一项蒸汽动力车的专利。
探索 CSS Houdini：轻松构建酷炫的 3D 卡片翻转动画
一点一木
10-24 1343
本文通过构建一个 3D 翻卡动画深入探讨了 CSS Houdini 的强大功能，展示了如何通过 Worklets、自定义属性、Paint API 等扩展 CSS 的能力，实现高度灵活的动画效果。文章首先介绍了 Houdini 的核心概念与 API，并通过构建一个动态星空背景、圆形进度条以及交互式 3D 翻卡动画的实际示例，展示了如何利用 CSS Houdini 赋予网页设计更多创造力。最后，还演示了如何将这种 3D 翻卡效果集成到公司网站中，提升用户体验。
炫酷的登录框!(附源码)
m0_50864141的博客
10-29 1553
【代码】炫酷的登录框!(附源码)
HTML基础教程：常用标签与<!DOCTYPE>解析
DOCTYPE声明告诉浏览器应该按照哪个文档类型定义（DTD）来解析页面。例如，<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">声明文档使用XHTML 1.0...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值