DOCTYPE对网页效果的影响

简介:     最近在页面中使用padding控制div的样式时,其中一个页面无论怎么修改padding都不能起到应有的作用,代码如下:    测试信息       和其他页面比较,代码几乎没有差别,但是还是有一点不起眼的差异,那就是两个文件开头的doctype声明不一样:出现效果的页面的doctype是:   ,而另外一个:   将后者改为和前者一致时,就出现了需要的效果。

    最近在页面中使用padding控制div的样式时,其中一个页面无论怎么修改padding都不能起到应有的作用,代码如下:
<div style="width:300px;height:300px;padding:10 10 10 10;border:1px solid #000;">
    <div style="border:1px solid #CC5500;">测试信息</div>
  </div> 

   和其他页面比较,代码几乎没有差别,但是还是有一点不起眼的差异,那就是两个文件开头的doctype声明不一样:
出现效果的页面的doctype是:
   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">,
而另外一个:
   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
      "http://www.w3.org/TR/html4/loose.dtd">
将后者改为和前者一致时,就出现了需要的效果。
    页面上的doctype声明往往容易被忽视,但在遵循标准的任何web文档中,它都是一项必需的元素。doctype会影响代码验证,并决定了浏览器最终如何显示你的web文档。 doctype的作用doctype声明指出阅读程序应该用什么规则集来解释文档中的标记。在web文档的情况下,“阅读程序”通常是浏览器或者校验器这样的一个程序,“规则”则是w3c所发布的一个文档类型定义(dtd)中包含的规则。 每个dtd都包括一系列标记、attributes和properties,它们用于标记web文档的内容;此外还包括一些规则,它们规定了哪些标记能出现在其他哪些标记中。每个web建议标准(比如html 4 frameset和xhtml 1.0 transitional)都有自己的dtd。 假如文档中的标记不遵循doctype声明所指定的dtd,这个文档除了不能通过代码校验之外,还有可能无法在浏览器中正确显示。对于标记不一致的问题,浏览器相较于校验器来说更宽容。但是,不正确的doctype声明经常导致网页不正确显示,或者导致它们根本不能显示。
    代码中的“padding:10 10 10 10”其实是一种不正确的写法,将其改为“padding:10px 10px 10px 10px”就不会存在由于doctype不同而导致样式不起作用的问题了。

 
目录
相关文章
|
3月前
<!doctype html>放在页面最前面的用途
<!doctype html>放在页面最前面的用途
|
1月前
|
存储 移动开发 前端开发
|
3月前
|
缓存 前端开发 JavaScript
html最大限度提高加载速度
要提高HTML页面的加载速度,可以采用多种策略:优化HTML结构,精简标签和合并文件;使用异步加载资源,如添加`async`或`defer`属性;压缩文件,利用HTMLMinifier减小文件大小;优化图片,采用合适格式和尺寸;利用CDN托管静态资源;设置HTTP缓存头以利用浏览器缓存;减少HTTP请求,合并文件;启用Gzip压缩;优化服务器响应时间;使用优雅降级和渐进增强确保兼容性。综合应用这些方法能显著提升加载速度和用户体验。
|
7月前
|
移动开发 JavaScript 前端开发
如何处理html5新标签的浏览器兼容问题?
如何处理html5新标签的浏览器兼容问题?
82 0
|
7月前
|
小程序 前端开发 容器
(详细,及遇到的问题)将html网页小程序变成灰色
(详细,及遇到的问题)将html网页小程序变成灰色
128 0
|
Web App开发 存储 移动开发
|
移动开发 HTML5
HTML中DOCTYPE的作用,以及混杂模式的介绍
HTML中DOCTYPE的作用,以及混杂模式的介绍
106 0
李询同款动态爱心html代码(可以直接使用)
直接在vscode或者其他软件里面复制粘贴过去,保存点击运行就可以了
716 0
李询同款动态爱心html代码(可以直接使用)
|
移动开发 HTML5
浏览器HTML5支持程度测试
/********************************************************************* * 浏览器HTML5支持程度测试 * 说明: * 想知道对HTML5的支持只是浏览器的工作,和系统平台、硬件平台没有 * 太大的关系,当然如果要说渲染速度,那跟着两个又有关系,但仅仅站在 * HTML5的使用的角度来说,只需要关注浏览器对HTML5的支持程度就差不多了。
1185 0
|
移动开发 HTML5
HTML5 学习1.网页基本信息
HTML5 学习1.网页基本信息