浏览器渲染机制之DTD、DOCTYPE详解

最新推荐文章于 2021-12-08 20:27:46 发布

VIctor_Ye

最新推荐文章于 2021-12-08 20:27:46 发布

阅读量320

点赞数 1

分类专栏： HTML 渲染过程文章标签： HTML

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/victoryzn/article/details/82949672

版权

HTML 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

2 篇文章 0 订阅

订阅专栏

很多初为全段工程师的小伙伴们会发现，平常可以熟练地做很多web应用，驰骋在由HTML解析而来的DOM树之间，但是对于一些司空见惯的标准或规范，却鲜有人能答得上来。

比如，什么是DTD？什么是Doctype？常见的DOCTYPE有哪些？

很多人会觉得，这不是很简单么？但是又有多少人能讲清楚呢？

什么是DTD？

DTD，是Document Type Definition的简称，是一系列标记语言语法的规则，用来定义XML或者(X)HTML的文档类型。

浏览器会根据DTD规范来判断文档类型，决定使用何种语法规则来解析该文档。

什么是DOCTYPE?

DOCTYPE是用来声明文档类型和DTD规范的，用来指示浏览器关于页面使用哪个 HTML 版本进行解析。

另一个主要用途就是合法性验证，如果文件代码不合法，那么浏览器解析时便会出一些错。

常见的DOCTYPE有哪些？

H5
<!DOCTYPE html>

Html4.0.1 strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

该DTD规范包括所有的HTML元素和属性，但不包括展示性或者弃用的元素（font）

Html4.0.1 transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

该DTD规范包括所有的HTML元素和属性，含展示性或者弃用的元素（font）

更多文章请查阅：

浏览器渲染机制之渲染过程

浏览器渲染机制之重排reflow

浏览器渲染机制之repaint

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

VIctor_Ye CSDN认证博客专家 CSDN认证企业博客

码龄13年

38: 原创

13万+: 周排名

203万+: 总排名

33万+: 访问

: 等级

2801: 积分

64: 粉丝

188: 获赞

29: 评论

0: 收藏

私信

关注

热门文章

分类专栏

最新评论

HTTP协议之multipart/form-data请求分析
buyaolan: 请问这是什么软件，怎么查看请求体？
JS实现鼠标中心放大图片功能原理及实例演示
NouCamp_FCBfa: 个人笔记最后感谢大佬（VIctor_Ye）的分享！！
JS实现鼠标中心放大图片功能原理及实例演示
NouCamp_FCBfa: [code=java] //代码五页 public static void main(String[] args) { // 主方法 File pictureFolder = new File("E:\\ＬＥｎｏＶｏ"); // E 盘的图片文件夹的路径，注意“\\”或“/” new 鼠标中心放大图片功能原理及实例演示(pictureFolder); // new 构造方法 } } [/code]
JS实现鼠标中心放大图片功能原理及实例演示
NouCamp_FCBfa: [code=java] //代码四页 if (e.getWheelRotation() == -1) { // 滚轮向外滚 oldImgWidth = icon.getIconWidth(); oldImgHeight = icon.getIconHeight(); imgWidth = icon.getIconWidth(); imgHeight = icon.getIconHeight(); double num = imgWidth / imgHeight; imgWidth -= 100; // 缩小 imgHeight -= (int) (100 / num);// 缩小 if (imgWidth > getWidth() / 5) { // 宽度大于窗体 1/5 执行 icon = new ImageIcon(files[c].getAbsolutePath()); icon = new ImageIcon(icon.getImage().getScaledInstance(imgWidth, imgHeight, Image.SCALE_DEFAULT)); setLayout(); double douzoomRatio = Math.sqrt(imgWidth * imgWidth + imgHeight * imgHeight) / Math.sqrt(oldImgWidth * oldImgWidth + oldImgHeight * oldImgHeight); x3 = (1 - douzoomRatio) * (getMousePosition().x - jl.getBounds().x) + jl.getBounds().x; y3 = (1 - douzoomRatio) * (getMousePosition().y - jl.getBounds().y) + jl.getBounds().y; jl.setLocation((int) x3, (int) (y3)); repaint(); validate(); } } [/code]
JS实现鼠标中心放大图片功能原理及实例演示
NouCamp_FCBfa: [code=java] //代码三页 imgWidth += 100; // 设置放大的宽 imgHeight += (int) (100 / num);// 设置放大的高 if (imgWidth < getWidth() * 10) { // 宽度小于窗体10倍执行 icon = new ImageIcon(files[c].getAbsolutePath()); // new icon，避免丢失像素 icon = new ImageIcon(icon.getImage().getScaledInstance(imgWidth, imgHeight, Image.SCALE_DEFAULT)); // 放大 setLayout(); // 重新布局 /* * douzoomRatio 缩放比（ new icon ）：（ old icon）这样可以用，反过来就有问题了。 x3,y3 * 扒了（CSDN）大佬（VIctor_Ye）的算法用的,非常感谢！！！ */ double douzoomRatio = Math.sqrt(imgWidth * imgWidth + imgHeight * imgHeight) / Math.sqrt(oldImgWidth * oldImgWidth + oldImgHeight * oldImgHeight); x3 = (1 - douzoomRatio) * (getMousePosition().x - jl.getBounds().x) + jl.getBounds().x; y3 = (1 - douzoomRatio) * (getMousePosition().y - jl.getBounds().y) + jl.getBounds().y; jl.setLocation((int) x3, (int) (y3));// 设置 jl 的位置 repaint(); // 刷新 validate(); // 刷新 } } [/code]

最新文章

目录

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

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