你重构过自己的页面吗？——DOCTYPE的魔咒！（上）

 

前言：如果您知道我有多么辛苦、多么用心的写着这篇文字，出于同情，您或许会捎上一眼。想要将自己的文字发布在园子的首页上，就必须用心去写，上班时白天在公司用着一台实际上只有480MB可用内存的台机，在IE7的窗口中敲打着这篇文字，当我插入了“1.1代码示例”之后，明显感觉所有浏览器窗口就如同当机时一般无法动弹，内存瞬间被吃200MB+，我想是无法继续在IE7下工作了，想把这篇文字迅速编辑完成的梦想顿时破灭了。存稿，关闭IE7，打开Chrome，嗯，还不错，至少内存没被吃太多，编辑器窗口的滚动条还能拖动，我又可以工作了。我的天啊，插入图片，上传按钮失效，老天你不能这样对我，于是，我又切换到Firefox，OK，终于可以插入图片了，却Firefox下，似乎也不是那么顺畅，于是我在几个浏览器之间寻求平衡与协作。周末了，终于我熬了两个通宵，花费了很多本该休息的时间，完成了一个“上篇”，真不知道“下篇”还会耗费我多少不再年轻的“青春”呢？如果您，是一个有点爱心的人，给我点鼓励吧，呵呵。


      不知道您是否阅读过 Jeffrey Zeldman 的大作《网站重构——应用Web标准进行设计》（第二版） 这本书，即使您没有翻阅过此书，那么您也应该或多或少听说过 W3C 这个词汇吧，当然《网站重构》这本书并非 W3C官方出品，也非官方代言书籍，但是书中所渗透出的思想却是对 W3C 标准和规范的阐释，什么是 Web 标准，如何利用标准进行设计，正是Zeldman在书中用了大量生动的实例所阐述的。

       Zeldman 在他的著作中说过：“……许多设计师和开发者都认为 Web 标准只是一个梦想，许多人甚至放弃了正确实现他们的努力。这并不难理解，理解需要多年才能形成。”

       在当今这个花花的 Web 世界里，没有一种浏览器是完美的，每种浏览器在使用标准和可访问性上都各有所长。我一直很喜欢IE 在字体上的呈现度上，从我的眼睛看去同样的字体下 IE 总是比其他浏览器更为丰满些，看起来更舒服些，当然这仅仅是我的观点。至于从实现 W3C 标准和规范的角度来说，非 IE 系列的现代浏览器都有着非常良好的表现，当然 IE7+ 也并非一无是处，其对于标准和规范的理解及实现只是稍有欠缺罢了。

       说了这么多，我是被《网站重构》鼓动了的心思，可拿什么页面来尝试一下重构乐趣呢？这不，公司首页改版，外包给美工的静态页面交付完工了，某领导最初的设想是让我按照以前其他同事的方式写几个 aspx 页面，然后通过iframe 将这些“动态”显示的数据嵌入到静态的首页中去，我很反感这样做，于是以理抗争说服了领导同志按照我的想法直接将首页改为了 aspx 页面。我的工作终于由分别写几个 aspx 页面，变成了专注于写一个 aspx 页面，貌似轻松不少。一百来行服务器端代码，哗哗啦啦的一个小时不到就写完了，可我花在研究 aspx 页面中 HTML 代码上的时间却不少，如何将动态读取到的数据“安静、不唐突、悄悄的”复原到静态的模板页上，应该采用何种服务器端数据控件动态显示从数据库中读取的数据等。在思考中我浪费了不少时间读取那糟糕的 HTML 源码，Table 布局带给我的视觉冲击就是大量的 <table><tr><td>[……]</td></tr></table> 伴随着数不清的 HTML 标签属性，以及少量使用 style 属性抒写的样式规则。我的天啊，这忽然让我想起了两年前第一次尝试用 Table 布局来组织一个页面时的痛苦，不知道什么地方会千奇百怪多出来的一个像素，整个 Table 或许会无缘无故的膨胀了起来，那些曾经的痛苦都留在记忆。

　　是的，在忍受了 Table 带给我的痛苦不久后，接触了 CSS 这个神奇的家伙，我囫囵吞枣的了解基本规则，对着中国同胞整理的 CSS2.1 手册，开始自己的第一次“DIV之旅”。那时我只是一味的将所有的 Table 全部替换成了“DIV + 绝对定位”，那种对页面上内容的控制欲让我成为了一个十足的“多 div 症”患者。如今回首，那时的我只做了一件事：尝试用 div 重建自己原来的表格结构。用一套不必要（或不合理）的标签替换了另一套不必要（或不合理）的标签。

       您或许会觉得我的旁白有点过于啰嗦，如果您不是早已麻木到遗忘地步，那您肯定没有经历过与我类似的痛苦，也没有动手尝试过像一位 divitis 患者一样重构过自己设计过的页面。那就来吧，和我一起经历一次又何妨。

       首先，请您来看看根据静态页面按照要求修改而成的 aspx 的页面源码，请您注意 HTML 结构部分我未作任何修改，在您打开折叠的示例代码前，我友善的提醒一下您，做好心理准备，看一眼就可以重新折叠上代码了，因为我怕您“梦回2001”（2001年开始大量使用CSS来表现样式的页面出现，其结构和布局类似于下列代码中所见），但是很感谢您坐在2009年当下的电脑屏幕前认真地阅读我的文字。

　　百克网（这里建议您直接访问我公司首页，看看页面的效果，您或许会发现，嗨，还不错啊，页面设计的很简朴啊，恭喜您使用的是 IE 系列浏览器；如果您看见了什么奇怪异样的页面，那么恭喜您使用的应该是 Chrome 浏览器；如果您发现正在使用的浏览器下页面的表现和 IE 下 看起来只有少许异样，那么您或许使用的是 Mozilla 系列浏览器。如果您正在使用非 IE 系列浏览器阅读该篇文字，那么可以通过浏览器点击源码阅读。）首页 aspx 源码如下：

1.1代码示例

　　您如果看过页面的 HTML 源码后，有什么感触，是否有被电到的感觉呢？呵呵，其实网络上充斥着这样的页面代码很多，而且运行良好，维护似乎看起来也很方便，在当今宽带当道的网络世界，小小的一个首页浪费的流量算得了什么，ISP 服务商提供的是不限制流量的服务，大家尽情的访问吧，不会对网站的经营者增加什么额外“超流量”费用。当然在特定环境下，也不大会让自己的顾客因为无法忍受网页显示速度慢(大多数页面打开缓慢的原因还是根源于网速的问题，不是客户的就是服务商的网速)而关闭浏览器窗口。

　　好了，有点耐心，跟着我来一次有点“龌龊”的重构，“龌龊”从何而来，看完整篇文字您或许也会有所体味。

　　下面要展示两幅图片，图片1是公司某位领导构想的新首页布局，在这位领导强硬的态度下，经过几次无谓的修改后，老总终于妥协了，将这张图交付给外包的美工手中，不久就出图并制作好了静态页面。


你重构过自己的页面吗？——DOCTYPE的魔咒！（上）_第1张图片
　　 　　 　　 　　 　　 　　 图片1

　　又过了两天，按照领导布置给我的要求经过部分加工，并做些简单的测试，例如每个链接是否有效，在 IE 系列浏览器上是否正常显示布局等，终于如您点击百克网所看到的，也正是下面图片2这样截图所展示的一般：你重构过自己的页面吗？——DOCTYPE的魔咒！（上）_第2张图片

　　 　　 　　 　　 　　 　　 　　 　　 图片2

　　

     不得不说，从图片2中可以清晰看出美工非常忠实的实现了图片1中的布局，并且沿袭了公司上一个首页版本中的很多元素，依然选择暖色调“橙色”作为主色调，在上海这个甚似冬天的春天里，让人觉得多了一丝暖意。

　　OK，来吧，是该动手的时候了，否则您一定会不耐烦的离开，因为我们似乎离“重构页面”的设想越走越远，上面说了那么多无非是想让您和我一样有“重构”的冲动罢了，不知道是否能如愿呢？

　　请仔细看看图片1吧，抽出最重要的部分，您勾勒出的是一个什么样的布局框架呢？是的，下图就是我从图片1中所抽象出的布局：


你重构过自己的页面吗？——DOCTYPE的魔咒！（上）_第3张图片
                                                      图片3

　　对，上图是一个典型的三列布局的框架图（图中尺寸标注有少许错误，1000px应该改为1002px，周一会上传更正后的新图片），重构就从这里开始吧，从实现一个简单的三列布局开始。

　　其实，早在拿到图片1时，我就私下开始尝试自己的“实现”，只可惜自己的平面设计能力停滞在10年前大学生活的那段历史里，我只能想着如何忠实还原图片1中的一切，于是在显示器的实际分辨率为 1024*786 的情况下按照 800*600 的分辨率情况开始了布局设计，其 HTML 结构如下：
800*600分辨率下三列布局HTML代码示例


     HTML 代码中外部导入的样式表 indexStyle.css 的源码如下：

三列布局的样式表示例

　　
     好的，非常好，我从 Andy Budd 那里学到的三列布局技巧终于派上了用场，我迫不及待的在 IE7+、Chrome1.0、Firefox3.0+、Opera9.5+、Navigator9.0+等现代浏览器上测试了一番，结果如预期一般，在非 IE 浏览器中我获得了几乎一直的三列布局效果，结果就是非 IE 浏览器们很好的解析了我编写的 CSS，页面上看起来丝毫不差可谓相当满意。这不，唯独在 IE7 下，页面看起来稍微有点别扭，不，是残缺，您来和我一起看看 IE7 如何表现的吧！截图如下：
你重构过自己的页面吗？——DOCTYPE的魔咒！（上）_第4张图片

　　　　　　　　　　　　　　　　　　　　　　　　图片4

　　如果您只是一名 HTML 和 CSS 方面的新手，不怕麻烦，建议您花上少许的时间，把示例中的 HTML 代码和CSS 代码分别拷贝到记事本中，然后分别将拷贝了 HTML 代码的记事本文件改名为 index.html，将拷贝了 CSS 代码的记事本文件更名为 indexStyle.css，并将更名后的两个文件放置于同一个文件夹内，其后您可以通过点击 index.html 文件，就可以看到如图片4中一般的画面了（如果是以 IE7 为默认浏览器的话）。如果您是一名熟练的老手了，是否已看出问题所在了呢？

　　来吧，看看我当时遇见问题时的简单分析，还原我最初的思考，希望您不曾遇见过如此讨厌的情景。

　　当您无法改变自己身处的环境时候，您就得去适应它，而我，就是那个必须去适应自己所处环境的人之一。公司网站的开发基于.NET 1.1，使用的 IDE 理所当然的就是 VS2003 了，而这却埋下了图片4中奇怪现象的种子。我曾经习惯在不去关注 aspx 页面中的 DOCTYPE，在没有进入目前的这家公司之前我使用的 IDE 是 VS2005，其 aspx 页面的 DOCTYPE 都是 XHTML，那是一种无论如何都能和 Web 标准攀上亲戚的 DOCTYPE，是具有良好的标准特性的文档类型，当然能以一种符合标准的模式来解析页面上 HTML 的结构和 CSS 所表现的样式。如果不幸的是由于VS2003自动生成的 aspx 页面中的 DOCTYPE 为：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">。按照 Web 标准的 CSS2.1 对页面进行三列布局，无论如何都无法做到在 IE7+ 下与 Chrome、Firefox3.0+ 和 Opera9.5+等现代浏览器下获得几乎一致的表现结果，这其中究竟又是如何呢？

　　Chrome 与 Firefox3.0+ 等浏览器所获得布局结果表现几乎一致，能够完美的按照设想的表现来布局，可在 IE7 下，总是表现很怪异，从图片4中，细心的您是可以找出 IE7 下布局表现的结果与其它非 IE 浏览器不一样的地方，您是否发现 sideContent 这块区域的左边框线消失在了屏幕上，而且 secondaryContent 整块块区域通过目测应该向左偏移了3px以上的距离。这一切都根源于当前的 IE7 在解析盒模型时，对设置了“空白边 ”(margin)的“块级元素”（div）并没有将div的边框宽度计算在其 width 和 height 之中，而在 Chrome 与 Firefox3.0 等浏览器下，按照标准的盒模型解析时候，设置了 margin 的 div 元素的边框宽度均计算在内了。

　　想了很多办法，甚至想过是否能够找到某些 HACK 方法，在创建一个 id 选择器所对应的样式时，让 IE7 解析到专门为其设置好的margin值，然后紧跟其后是一条让 IE7 无法解读的属性规则（该规则是符合CSS标准的），这样IE7就不再继续阅读之后定义属性规则，从而做到能够按照我设想的那样在 IE7 上进行布局。同事，在那一条 IE7 无法解读的属性规则下，我再设置一个 margin 值，当在Chrome 和 firefox3.0 等对 Web 标准实现更完美的浏览器下，能够顺利阅读那条“无法解读的属性规则”的话，就会将后一个 margin 值覆盖前一个专为 IE7 设置的 margin 值。

很可惜，上面这一切，我并没有实现，我的尝试失败了，因为 IE7 不是 IE6/IE5.x，她能够识别很多她的前辈们无法阅读的规则属性。我甚至想过，利用 IE浏览器专有的“有条件注释”，为 IE7+ 浏览器写一个专有的样式表，然后通过下列规则导入样式表: <!-- [if gte IE 7.000] <style type="text/css"> @import("ie7up.css");</style> -->。可这是解决问题的最终之道吗？招数、专有，这些打上标签的名词是在我们“走投无路”时才会想起的救命稻草，可此时我还没有走到山穷水尽的地步，不是吗？为什么只会在 IE7+ 下表现如此怪异，而在 IE6/IE5.x 下布局完全变得的支离破碎呢，却又在非 IE 浏览器下完美之至呢？

    既然 IE7 下表现是那么怪异，加上上面那些分析，其解析盒模型的方式如此接近 IE6/IE5.x又不完全是，我忽然想到了一词，一个非常贴切用于形容此刻浏览器所表现出来的状态的词汇——怪异模式（quirks mode）。OK，就是它在作弄我们，忽然想起曾经在 Andy Budd 的大作中学习过 DOCTYPE 声明的另一个重要作用，就是切换浏览器的表现模式，一般来说浏览器都存在两种表现模式：标准模式和怪异模式（quirks mode）。顾名思义，在标准模式中，浏览器根据 Web 标准的规范表现页面；在怪异模式中，页面以一种比较宽松的向后兼容的方式显示。怪异模式通常模拟老式浏览器的行为，最显著的例子当然就是 Windows 上 IE 专有的盒模型。在 IE6 中，在标准模式中使用正确的盒模型，在怪异模式中使用老式的专有盒模型。

    为验证上面的概述是否也适合 IE7 浏览器呢，三列布局中所呈现的怪异结果，是否因为 IE7 浏览器的怪异模式下工作所致呢？于是乎，我迫不及待的将 aspx 页面中的DOCTYPE声明简单的修改HTML 4.01 Transitional + URI的形式，即：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">，您猜怎么着，果不其然，IE7 下怪异的布局消失了，其展现出的结果与Firefox、Chrome等现代浏览器一致完美，看来问题的根结就起源于浏览器的怪异模式。

 

 

那么，如何判断浏览器会采用那种模式工作，一个大致的原则如下：如果 XHTML 文档包含形式完整的DOCTYPE，那么一般以标准模式表现。对于 HTML4.01 文档，包含严格 DTD 的 DOCTYPE 常常也会导致页面以标准模式表现。包含过度 DTD 和URI 的 DOCTYPE 也导致页面以标准模式表现，但是有过度 DTD 而没有 URI 会导致页面以怪异模式表现（正是我所展示的aspx 页面最初的状态，缺少URI）。DOCTYPE 不存在或形式不正确也会导致 HTML 和 XHTML 文档以怪异模式表现。

在这方面的深入研究，CSS 大师 Eric Meyer 制作的一张图表，这张图表中说明不同的浏览器如何根据 DOCTYPE 声明选择表示方式的。如果您觉得去研究这种图片很麻烦，也不大原因去记忆我上面给出的那些通用准则的话，在这我可以教您一个最简单的办法，来观察您的浏览器当前处于何种模式下工作。实施这个方法的前提是，您必须安装一款 Firefox 系列的浏览器（最好为简体中文），然后将鼠标放在您浏览的当前页面上，点击鼠标右键——查看页面信息——渲染模式。对了，我们要找的就是这个渲染模式，如果您看见其后写着“混杂模式”，那就是表示当前浏览器处在“quirks mode”了。

在了解我设计中遇见的“怪异”问题后，请大家切记：无论是否编写了有效且符合标准的CSS，如果您选择了错误的DOCTYPE，那么页面就有可能以怪异模式表现，其表现就可能会有错误或不可预测存在。当然，这些不可预测会像折磨我一样折磨这你，不是吗？

写到这里，我的上篇就此告一段落了，编辑、排版、插图实在很辛苦，一个非常简单的问题，往往会折腾了大半天。当然，如果您看到这里，真诚的感谢您，陪着我一起受累了，如果您对我所描述的这些文字有那么一点点感兴趣，同时我所描述的内容能给您带来一点点受益，我就很满足了。

当然，真正的重构才刚刚开始，如果您有兴趣，那么就尽请期待我的下篇吧，谢谢您的光临！


　　 　　 　　 　　 　　 　　 　　 　　 　　 rainnoless 2009.03.09 5:28 

 


 

 

你可能感兴趣的:(DOCTYPE)

  • 大前端面试题集锦——HTML篇 Midshar.top 前端html
    HTML篇1.什么是DOCTYPE,有何作用?DOCTYPE是用来声明HTML文档应当使用哪种版本来进行解析如果不使用DOCTYPE告知浏览器应当使用哪种版本解析文档,那么浏览器将会开启最大兼容模式来解析文档,一般称为怪异模式.在怪异模式下,可能会产生一些预想不到的bug2.说说对HTML语义化的理解?HTML的语义化指的是在合适的地方使用合适的标签,让人能够根据标签进而大致知晓标签内容语义化使得
  • 350页前端校招面试题直击大厂：前端基础、前端核心、计算机基础、项目、Hr面 2401_86400095 前端
    **1.HTML2.CSS3.前端基础4.前端核心5.前端进阶6.移动端开发7.计算机基础8.算法与数据结构9.设计模式10.项目11.职业发展12.Hr面**正文HTML1.浏览器页面有哪三层构成，分别是什么，作用是什么?2.HTML5的优点与缺点？3.Doctype作用?严格模式与混杂模式如何区分？它们有何意义?4.HTML5有哪些新特性、移除了哪些元素？5.你做的网页在哪些浏览器测试过,这些
  • HTML标签大合集入门指南 稿子不爱 前端html
    欢迎来到HTML标签的入门指南！在这里，我们将通过一种结构化的方式来介绍HTML的基本标签和它们的用法。无论你是新手还是想要回顾基础知识，这篇文章都将为你提供有用的信息。HTML文档结构在开始编写HTML文档之前，我们需要了解其基本结构。网页的基本结构HTML标签大合集入门欢迎来到HTML标签大合集入门指南DOCTYPE:是声明页面标准的标签。html:主文档标签。head:包含页面的头部信息，如
  • 【HTML】DOCTYPE作用 全宇宙最最帅气的哆啦A梦小怪兽 html前端
    DOCTYPE是documenttype（文档类型）的缩写。是HTML5中一种标准通用标记语言的文档类型声明，告诉浏览器文档的类型，便于解析文档。不同渲染模式会影响浏览器对CSS代码甚至JS脚本的解析。它必须声明在第一行。DOCTYPE不存在或者形式不正确会导致HTML或XHTML文档以混杂模式呈现，就是把如何渲染html页面的权利交给浏览器。有多少浏览器就会有多少种展示方式，因此要提高浏览器兼容
  • 前端基础部分习题 琼花霰 htmlcssjsvue小程序
    1/HTML1.DOCTYPE的作用是什么？标准模式与兼容模式各有什么区别?声明文档的解析类型(document.compatMode)，避免浏览器的怪异模式。!DOCTYPE是一种标准通用标记语言的文档类型声明，它的目的是要告诉浏览器它应该使用什么样的文档类型定义（DTD）来解析文档。标准模式，浏览器按照W3C的标准解析渲染页面，这样一来，你的页面在所有的浏览器里显示的就都是一个样子了。标准模式
  • 2024前端面试准备之HTML篇 前端fighter 前端面试html
    全文链接1.doctype的作用是什么DOCTYPE是html5标准网页声明，且必须声明在HTML⽂档的第⼀⾏。来告知浏览器的解析器⽤什么⽂档标准解析这个⽂档，不同的渲染模式会影响到浏览器对于CSS代码甚⾄JavaScript脚本的解析⽂档解析类型有：BackCompat：怪异模式，浏览器使⽤⾃⼰的怪异模式解析渲染⻚⾯。（如果没有声明DOCTYPE，默认就是这个模式）CSS1Compat：标准模式
  • 2019-03-24 xyxzs3
    标准盒模型和怪异盒模型的区别及box-sizing的使用场景CSS中Boxmodel是分为两种::W3C标准和IE标准盒子模型。大多数浏览器采用W3C标准模型，而IE中则采用Microsoft自己的标准。怪异模式是“部分浏览器在支持W3C标准的同时还保留了原来的解析模式”，怪异模式主要表现在IE内核的浏览器。当不对doctype进行定义时，会触发怪异模式。在标准模式下，一个块的总宽度=width+
  • doctype是什么,举例常见doctype及特点 兔子不打地鼠打代码
    doctype是什么?1.位置：声明必须处于HTML文档的头部，在标签之前，HTML5中不区分其大小写2.指令：声明不是一个HTML标签，是一个用于告诉浏览器当前HTML版本的指令3.决定渲染模式：现代浏览器的html布局引擎通过检查doctype决定使用兼容模式还是标准模式对文档进行渲染，一些浏览器有一个接近标准模型。在HTML4.01中声明指向一个DTD(文档类型定义)，由于HTML4.01基
  • Web前端常见面试题 蓑衣居士 html+cssweb大前端html+css
    Web前端常见面试题1,是什么？有什么作用？决定浏览器渲染方式：告知浏览器当前的HTML或XML文档是哪一个版本.Doctype是一条声明,而不是一个标签;也可以把它叫做“文档类型声明”,或简称为"DTD".：用HTML5的doctype声明文件包含HTML5标记2,什么是语义化？语义化的作用？简单讲就是根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的
  • 网页前端学习-03 Leoma_ 前端学习笔记前端学习html网络
    HTML基础知识021.vscode书写骨架里些许代码的解释666①、这一行指令可以理解为不是html代码的部分，它充当的作用是告诉浏览器我们需要书写的html版本，如上述代码第一行则代表的是我们要书写的是html5这个版本，DOCTYPE是文档类型声明标签。②、用来强调是中文网站还是英文网站，en代表英文的缩写，zh-CN指的是中文。③、charset是字符集的含义，后面的utf-8是万国码，这
  • HTML面试题 MissXu666 前端面经&面试题html前端
    1、DOCTYPE是什么，有什么作用DOCTYPE一般放在文档的开头，告诉浏览器页面使用的HTML或XHTML的版本，让浏览器按照相应的规则解析页面。如果不写DOCTYPE，那么浏览器会按照自己的规则解析页面，这不利于维护网页的兼容性2、XML、HTML、XHTML的区别xml可拓展标记语言，主要用于数据和结构存储，曾用于数据传输，现在已经被JSON数据取代html超文本标记语言，语法较为松散xh
  • 学习前端之HTML5中的`＜!DOCTYPE＞`声明有什么意义 洛洛31 前端html5前端html
    HTML5中的``声明是用来告诉浏览器当前页面使用的是哪个HTML版本。它在HTML文档的最开始位置，放在``标签之前。``声明的意义是：1.确定浏览器使用正确的解析模式：不同版本的HTML有不同的解析规则，浏览器可以根据声明来选择使用适当的解析模式来渲染页面。2.提供给浏览器和开发者的信息：``声明中的具体值可以告诉浏览器和开发者当前页面所使用的HTML规范和版本。3.保证页面的向后兼容性：通过
  • 前端面试HTML常考问题总结 turbo夏日漱石 前端前端面试前端html
    目录标签head，body，！Doctype的作用分别是什么？!DOCTYPE（文档类型）标签：head：body:H5新特性伪类和伪元素伪类：伪元素：html5语义化标签常用语义化标签：其它语义化标签：语义化标签优点：src和href的区别src（同步加载执行）href（异步加载执行）script标签中defer和async的区别行内元素有哪些？块级元素有哪些？空(void)元素有那些？标签he
  • HTML基础 什么时间能闲下来打篮球啊 JavaWebhtml前端
    HTMLHyperTextMarkupLanguage（超文本标记语言）超文本：文字、图片、音频、视频、动画等（不需要Flash）标签等成对的标签，分别叫开发标签和闭合标签。单独呈现的标签（空元素），如，用/来关闭空元素，叫自闭合标签其他内容DOCTYPE：告诉浏览器，我们需要使用什么规范，默认也是htmlhead标签：代表网页头部body标签：代表网页主体title：网页标题meta：描述性标签
  • HTML CSS xmind总结 .冯上 HTMLCSS总结htmlcsscss3html5经验分享
    HTMLCSSHTML【第1章初识HTML】基本骨架-!DOCTYPE：声明文档类型供浏览器解读-html：HTML标签-lang：语言，定义语言为英语：en，中文：zh-CN-head：文档的头部-base-可以统一添加属性--meta：charset-字符集是多个字符的集合。-计算机要准确处理各种字符集文字，需要进行字符编码，以便计算机能够识别和存储各种文字。-utf-8包含全世界所有国家需要
  • 前端经典面试题 hao_0413 Vuejavascriptes6javascript前端
    第一章面试题基础篇1.1HTML面试题面试题：Doctype作用?严格模式与混杂模式如何区分？它们有何意义?（1）、声明位于文档中的最前面，处于标签之前。告知浏览器以何种模式来渲染文档。（2）、严格模式的排版和JS运作模式是以该浏览器支持的最高标准运行。（3）、在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。（4）、DOCTYPE不存在或格式不正确会导致文档以
  • DTD 零下的雨
    DTD（文档类型定义）的作用是定义XML文档的合法构建模块。它使用一系列的合法元素来定义文档结构XSD是结构定义，DTD是文档类型定义，都是用xml格式写的。文档类型定义（DTD）可定义合法的XML文档构建模块。它使用一系列合法的元素来定义文档的结构。DTD可被成行地声明于XML文档中，也可作为一个外部引用。内部的DOCTYPE声明假如DTD被包含在您的XML源文件中，它应当通过下面的语法包装在一
  • 浏览器渲染机制触发重排和重绘 前端_酒館
    什么是Doctype及作用？DTD（documenttypedefinition，文档类型定义）是一系列的语法规则，用来定义XML或（X）HTML的文件类型。浏览器会使用它来判断文档类型，决定使用何种协议来解析，以及切换浏览器模式；DOCTYPE是用来声明文档类型和DTD规范的，一个主要的用途便是文件的合法性验证。如果文件代码不合法，那么浏览器解析时便会出一些差错；HTML4.01有个严格模式和传
  • Html5 复习笔记 来学睡无钱 笔记html5前端
    01_DOCTYPEDOCTYPE，或者称为DocumentTypeDeclaration（文档类型声明，缩写DTD）通常情况下，DOCTYPE位于一个HTML文档的最前面的位置，位于根元素HTML的起始标签之前。浏览器必须在解析HTML文档正文之前就确定当前文档的类型，以决定其需要采用的渲染模式，不同的渲染模式会影响到浏览器对于CSS代码甚至JavaScript脚本的解析到目前为止，各浏览器主要
  • ChatGPT给出的前端面试考点（html+css+JS） 正宗咸豆花 前端面试html
    ChatGPT给出的前端面试考点（html+css+JS）HTMLHTML是什么，它的主要作用是什么？什么是DOCTYPE，为什么在HTML文档中使用它？HTML5相对于之前的HTML版本有哪些主要的新特性？解释语义化HTML的概念。为什么要使用语义化标签？如何在HTML中嵌入JavaScript和CSS？什么是表单，如何在HTML中创建一个表单？什么是响应式图片，如何在HTML中实现？解释HTM
  • 标准CSS盒子模型和ie低版本盒子模型的区别 vivianXIa
    两种模型1：标准盒子模型（w3c盒子模型）宽度=内容+边框+margin+padding2：怪异盒子模型（ie盒子模型）IE8及其以下版本浏览器，未声明DOCTYPE，内容宽高会包含内填充和边框，称为怪异盒模型(IE盒模型)宽度=内容(已经包含了border和padding)+margin盒模型组成：content,border,margin,padding标准浏览器可以通过设置box-sizin
  • 重学前端 h多大 / 网页内容（html，body，head）/ element.style（第一天） PBitW 重学前端1HTMLhtmlelement.stylehtml页面内容详解DOCTYPE详解html浏览器详解
    文章目录一、p和h注意：二、网页的内容htmlbodyheadelement.style一、p和h菜鸟突发奇想看了一下h1，h2，h3相当于p标签的什么？h1=加粗+32pxh2=加粗+24pxh3=加粗+18.5px你们可以在自己的浏览器运行看看：Document我的第一个标题我的第一个标题我的第二个标题我的第二个标题我的第三个标题我的第三个标题注意：二、网页的内容标签DOCTYPE声明了文档类
  • 移动端淘宝授权 花铛 移动端移动端
    文档地址：https://open.m.taobao.com/doc.htm?spm=a219a.7386653.0.0.c549669anDR2sm#?treeId=420&docId=105590&docType=1&platformId=12。拼接用户授权需要访问的url：https://oauth.taobao.com/authorize?response_type=code&client
  • HTML笔记 Code6E htmlhtml前端
    目录网站与网页Web标准第一个前端程序两步完成一个网页程序HTML5简介与基础骨架HTML5介绍HTML5的DOCTYPE声明HTML5基本骨架html标签head标签body标签title标签meta标签标签之标题标题介绍与应用标签之段落、换行、水平线标签之段落换行水平线``与``目录文件夹和根目录标签之图片网站中最多的元素图片路径详解绝对路径相对路径网络路径标签之超文本链接超链接描述超链接属性
  • 前端面试题集合四（html） 啃火龙果的兔子 web面试HTML前端html
    HTML面试知识点总结本部分主要是笔者在复习HTML相关知识和一些相关面试题时所做的笔记，如果出现错误，希望大家指出！目录1.DOCTYPE的作用是什么？2.标准模式与兼容模式各有什么区别？3.HTML5为什么只需要写，而不需要引入DTD？4.SGML、HTML、XML和XHTML的区别？5.DTD介绍6.行内元素定义7.块级元素定义8.行内元素与块级元素的区别？9.HTML5元素的分类10.空元
  • 01-03常用标签 Zyangxsir html
    HTML入门DOCTYPE常用标签表格table表单formHTML入门软件大致分为两种：CS架构软件和BS架构的软件C/S和B/SC/S架构是指客户端/服务器【Client/Server】架构，桌面应用程序采用的多是这种结构，比如我们使用的QQ、Foxmail等B/S结构是浏览器/服务器【Browser/Server】的简称，通过浏览器就可以访问，比如我们使用淘宝、京东、百度等BS/CS的优缺点
  • 前端面试（html+css）相关问题 工匠四点零
    简单地做了下总结！也是工作上比较经常使用的对自己也是有些帮助！有什么问题也可以留言一起探讨下！！！谢谢html一.html1.xhtml和html的区别(1)头部doctype生命不同，xhtml的头部必须按照规定XHTMLDTD(2)html元素必须正确嵌套，不能乱(3)属性必须是小写的(4)属性值必须加引号(5)标签必须有结束2.html块级元素和行内元素块级元素和行内元素区别块级元素：div
  • 企业公司宣传网站（HTML静态网页项目实战）附源码【从0开始入门到精通】小白向（大学生毕设）大作业 ＜!DOCTYPE html＞ ＜html lang=“en“＞ ＜head＞ ＜ 酸奶公园 毕业设计酸奶的java笔记html课程设计前端
    企业公司宣传网站（HTML静态网页项目实战）附源码【从0开始入门到精通】小白向（大学生毕设）大作业Business首页服务博客关于事件联系我们企业服务您的营销一个早已确立的事实是，当出现以下情况时，读者会被页面的可读内容分散注意力关于我们联系我们企业服务您的营销一个早已确立的事实是，当出现以下情况时，读者会被页面的可读内容分散注意力关于我们联系我们企业服务您的营销一个早已确立的事实是，当出现以下情
  • web性能优化-面试篇 sweetBoy_9126
    分析一个网站从用户按回车的一瞬间经历了哪些跟前端相关的过程先判断页面的缓存DNS查询建立TCP连接发送HTTP请求接收响应接收完成得到一个HTML查看DOCTYPE根据你的DOCTYPE去选择是用html/xml逐行解析（阅读）看到标签看到css(下载css然后继续往下看还有没有css，如果还有旧同时下载第二个，第三个....最ie可以同时下载4个，当超过4个的时候剩下的就得排队，等到其中哪一个下
  • document对象详解 1995小哥哥的博客 前端知识点
    document对象概述：document对象是文档的根节点，只要浏览器开始载入HTML文档，这个对象就开始存在了，它作为一个入口去操作网页内容，可以直接调用。document的属性和方法非常多，下面我做了一些基本归类，对于更详细的属性和方法查询该网址。第一类（获得节点的属性）：属性说明document.doctype第一个子节点，表示文档类型。对于html5文档来说，该节点就代表document
  • java线程的无限循环和退出 3213213333332132 java
    最近想写一个游戏，然后碰到有关线程的问题，网上查了好多资料都没满足。 突然想起了前段时间看的有关线程的视频，于是信手拈来写了一个线程的代码片段。 希望帮助刚学java线程的童鞋 package thread; import java.text.SimpleDateFormat; import java.util.Calendar; import java.util.Date
  • tomcat 容器 BlueSkator tomcatWebservlet
    Tomcat的组成部分 1、server A Server element represents the entire Catalina servlet container. (Singleton) 2、service service包括多个connector以及一个engine，其职责为处理由connector获得的客户请求。   3、connector 一个connector
  • php递归,静态变量,匿名函数使用 dcj3sjt126com PHP递归函数匿名函数静态变量引用传参
      <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Current To-Do List</title> </head> <body>
  • 属性颜色字体变化 周华华 JavaScript
    function changSize(className){ var diva=byId("fot") diva.className=className; } </script> <style type="text/css"> .max{ background: #900; color:#039;
  • 将properties内容放置到map中 g21121 properties
    代码比较简单： private static Map<Object, Object> map; private static Properties p; static { //读取properties文件 InputStream is = XXX.class.getClassLoader().getResourceAsStream("xxx.properti
  • [简单]拼接字符串 53873039oycg 字符串
             工作中遇到需要从Map里面取值拼接字符串的情况，自己写了个，不是很好，欢迎提出更优雅的写法，代码如下：           import java.util.HashMap; import java.uti
  • Struts2学习 云端月影
    最近开始关注struts2的新特性，从这个版本开始，Struts开始使用convention-plugin代替codebehind-plugin来实现struts的零配置。 配置文件精简了，的确是简便了开发过程，但是，我们熟悉的配置突然disappear了，真是一下很不适应。跟着潮流走吧，看看该怎样来搞定convention-plugin。 使用Convention插件，你需要将其JAR文件放
  • Java新手入门的30个基本概念二 aijuans java新手java 入门
    基本概念:　　1.OOP中唯一关系的是对象的接口是什么,就像计算机的销售商她不管电源内部结构是怎样的,他只关系能否给你提供电就行了,也就是只要知道can or not而不是how and why.所有的程序是由一定的属性和行为对象组成的,不同的对象的访问通过函数调用来完成,对象间所有的交流都是通过方法调用,通过对封装对象数据,很大限度上提高复用率。　　2.OOP中最重要的思想是类,类是模板是蓝图,
  • jedis 简单使用 antlove javarediscachecommandjedis
    jedis.RedisOperationCollection.java package jedis; import org.apache.log4j.Logger; import redis.clients.jedis.Jedis; import java.util.List; import java.util.Map; import java.util.Set; pub
  • PL/SQL的函数和包体的基础 百合不是茶 PL/SQL编程函数包体显示包的具体数据包
    由于明天举要上课,所以刚刚将代码敲了一遍PL/SQL的函数和包体的实现(单例模式过几天好好的总结下再发出来);以便明天能更好的学习PL/SQL的循环,今天太累了,所以早点睡觉,明天继续PL/SQL总有一天我会将你永远的记载在心里,,,   函数; 函数:PL/SQL中的函数相当于java中的方法;函数有返回值 定义函数的 --输入姓名找到该姓名的年薪 create or re
  • Mockito(二)--实例篇 bijian1013 持续集成mockito单元测试
            学习了基本知识后，就可以实战了，Mockito的实际使用还是比较麻烦的。因为在实际使用中，最常遇到的就是需要模拟第三方类库的行为。         比如现在有一个类FTPFileTransfer，实现了向FTP传输文件的功能。这个类中使用了a
  • 精通Oracle10编程SQL(7)编写控制结构 bijian1013 oracle数据库plsql
    /* *编写控制结构 */ --条件分支语句 --简单条件判断 DECLARE v_sal NUMBER(6,2); BEGIN select sal into v_sal from emp where lower(ename)=lower('&name'); if v_sal<2000 then update emp set
  • 【Log4j二】Log4j属性文件配置详解 bit1129 log4j
    如下是一个log4j.properties的配置   log4j.rootCategory=INFO, stdout , R log4j.appender.stdout=org.apache.log4j.ConsoleAppender log4j.appender.stdout.layout=org.apache.log4j.PatternLayout log4j.appe
  • java集合排序笔记 白糖_ java
    public class CollectionDemo implements Serializable,Comparable<CollectionDemo>{ private static final long serialVersionUID = -2958090810811192128L; private int id; private String nam
  • java导致linux负载过高的定位方法 ronin47
    定位java进程ID 可以使用top或ps -ef |grep java ![图片描述][1] 根据进程ID找到最消耗资源的java pid 比如第一步找到的进程ID为5431 执行 top -p 5431 -H ![图片描述][2] 打印java栈信息 $ jstack -l 5431 > 5431.log 在栈信息中定位具体问题 将消耗资源的Java PID转
  • 给定能随机生成整数1到5的函数，写出能随机生成整数1到7的函数 bylijinnan 函数
    import java.util.ArrayList; import java.util.List; import java.util.Random; public class RandNFromRand5 { /** 题目：给定能随机生成整数1到5的函数，写出能随机生成整数1到7的函数。 解法1： f(k) = (x0-1)*5^0+(x1-
  • PL/SQL Developer保存布局 Kai_Ge
          近日由于项目需要，数据库从DB2迁移到ORCAL，因此数据库连接客户端选择了PL/SQL Developer。由于软件运用不熟悉，造成了很多麻烦，最主要的就是进入后，左边列表有很多选项，自己删除了一些选项卡，布局很满意了，下次进入后又恢复了以前的布局，很是苦恼。在众多PL/SQL Developer使用技巧中找到如下这段：   &n
  • [未来战士计划]超能查派[剧透,慎入] comsci 计划
           非常好看,超能查派,这部电影......为我们这些热爱人工智能的工程技术人员提供一些参考意见和思想........        虽然电影里面的人物形象不是非常的可爱....但是非常的贴近现实生活....    &nbs
  • Google Map API V2 dai_lm google map
    以后如果要开发包含google map的程序就更麻烦咯 http://www.cnblogs.com/mengdd/archive/2013/01/01/2841390.html 找到篇不错的文章，大家可以参考一下 http://blog.sina.com.cn/s/blog_c2839d410101jahv.html 1. 创建Android工程 由于v2的key需要G
  • java数据计算层的几种解决方法2 datamachine javasql集算器
    2、SQL     SQL/SP/JDBC在这里属于一类，这是老牌的数据计算层，性能和灵活性是它的优势。但随着新情况的不断出现，单纯用SQL已经难以满足需求，比如： JAVA开发规模的扩大，数据量的剧增，复杂计算问题的涌现。虽然SQL得高分的指标不多，但都是权重最高的。     成熟度：5星。最成熟的。   
  • Linux下Telnet的安装与运行 dcj3sjt126com linuxtelnet
    Linux下Telnet的安装与运行   linux默认是使用SSH服务的 而不安装telnet服务  如果要使用telnet 就必须先安装相应的软件包  即使安装了软件包 默认的设置telnet 服务也是不运行的 需要手工进行设置 如果是redhat9，则在第三张光盘中找到 telnet-server-0.17-25.i386.rpm
  • PHP中钩子函数的实现与认识 dcj3sjt126com PHP
    假如有这么一段程序： function fun(){ fun1(); fun2(); }   首先程序执行完fun1()之后执行fun2()然后fun()结束。   但是，假如我们想对函数做一些变化。比如说，fun是一个解析函数，我们希望后期可以提供丰富的解析函数，而究竟用哪个函数解析，我们希望在配置文件中配置。这个时候就可以发挥钩子的力量了。   我们可以在fu
  • EOS中的WorkSpace密码修改 蕃薯耀 修改WorkSpace密码
    EOS中BPS的WorkSpace密码修改 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 蕃薯耀 201
  • SpringMVC4零配置--SpringSecurity相关配置【SpringSecurityConfig】 hanqunfeng SpringSecurity
     SpringSecurity的配置相对来说有些复杂，如果是完整的bean配置，则需要配置大量的bean，所以xml配置时使用了命名空间来简化配置，同样，spring为我们提供了一个抽象类WebSecurityConfigurerAdapter和一个注解@EnableWebMvcSecurity，达到同样减少bean配置的目的，如下：   applicationContex
  • ie 9 kendo ui中ajax跨域的问题 jackyrong AJAX跨域
    这两天遇到个问题，kendo ui的datagrid，根据json去读取数据，然后前端通过kendo ui的datagrid去渲染，但很奇怪的是，在ie 10,ie 11,chrome,firefox等浏览器中，同样的程序， 浏览起来是没问题的，但把应用放到公网上的一台服务器， 却发现如下情况： 1） ie 9下，不能出现任何数据，但用IE 9浏览器浏览本机的应用，却没任何问题
  • 不要让别人笑你不能成为程序员 lampcy 编程程序员
    在经历六个月的编程集训之后，我刚刚完成了我的第一次一对一的编码评估。但是事情并没有如我所想的那般顺利。 说实话，我感觉我的脑细胞像被轰炸过一样。 手慢慢地离开键盘，心里很压抑。不禁默默祈祷：一切都会进展顺利的，对吧？至少有些地方我的回答应该是没有遗漏的，是不是？ 难道我选择编程真的是一个巨大的错误吗——我真的永远也成不了程序员吗？ 我需要一点点安慰。在自我怀疑，不安全感和脆弱等等像龙卷风一
  • 马皇后的贤德 nannan408
       马皇后不怕朱元璋的坏脾气，并敢理直气壮地吹耳边风。众所周知，朱元璋不喜欢女人干政，他认为“后妃虽母仪天下，然不可使干政事”，因为“宠之太过，则骄恣犯分，上下失序”，因此还特地命人纂述《女诫》，以示警诫。但马皇后是个例外。 　　有一次，马皇后问朱元璋道：“如今天下老百姓安居乐业了吗？”朱元璋不高兴地回答：“这不是你应该问的。”马皇后振振有词地回敬道：“陛下是天下之父，
  • 选择某个属性值最大的那条记录（不仅仅包含指定属性，而是想要什么属性都可以） Rainbow702 sqlgroup by最大值max最大的那条记录
    好久好久不写SQL了，技能退化严重啊！！！   直入主题： 比如我有一张表，file_info， 它有两个属性（但实际不只，我这里只是作说明用）： file_code, file_version 同一个code可能对应多个version 现在，我想针对每一个code，取得它相关的记录中，version 值 最大的那条记录， SQL如下： select *
  • VBScript脚本语言 tntxia VBScript
      VBScript 是基于VB的脚本语言。主要用于Asp和Excel的编程。   VB家族语言简介   Visual Basic 6.0           源于BASIC语言。           由微软公司开发的包含协助开发环境的事
  • java中枚举类型的使用 xiao1zhao2 javaenum枚举1.5新特性
    枚举类型是j2se在1.5引入的新的类型,通过关键字enum来定义,常用来存储一些常量.   1.定义一个简单的枚举类型 public enum Sex { MAN, WOMAN }   枚举类型本质是类,编译此段代码会生成.class文件.通过Sex.MAN来访问Sex中的成员,其返回值是Sex类型.   2.常用方法 静态的values()方
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他