网页上加上 页浮动广告的一段JS就不管用,是doctype的原因

网页上加上<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 页浮动广告的一段JS就不管用,是doctype的原因
doctype的作用
doctype声明指出阅读程序应该用什么规则集来解释文档中的标记。在web文档的情况下,“阅读程序”通常是浏览器或者校验器这样的一个程序,“规则”则是w3c所发布的一个文档类型定义(dtd)中包含的规则。

每个dtd都包括一系列标记、attributes和properties,它们用于标记web文档的内容;此外还包括一些规则,它们规定了哪些标记能出现在其他哪些标记中。每个web建议标准(比如html 4 frameset和xhtml 1.0 transitional)都有自己的dtd。

假如文档中的标记不遵循doctype声明所指定的dtd,这个文档除了不能通过代码校验之外,还有可能无法在浏览器中正确显示。对于标记不一致的问题,浏览器相较于校验器来说更宽容。但是,不正确的doctype声明经常导致网页不正确显示,或者导致它们根本不能显示。


选择正确的doctype
为了获得正确的doctype声明,关键就是让dtd与文档所遵循的标准对应。例如,假定文档遵循的是xhtml 1.0 strict标准,文档的doctype声明就应该引用相应的dtd。另一方面,如果doctype声明指定的是xhtml dtd,但文档包含的是旧式风格的html标记,就是不恰当的;类似地,如果doctype声明指定的是html dtd,但文档包含的是xhtml 1.0 strict标记,同样是不恰当的。

有的时候,也可以根本不使用一个doctype声明。如果没有指定有效的doctype声明,大多数浏览器都会使用一个内建的默认dtd。在这种情况下,浏览器会用内建的dtd来试着显示你所指定的标记。对于一些临时性的、匆忙拼凑的文档(这种文档有许多),你确实可以考虑省略doctype声明,并接受浏览器的默认显示。

完全可以从头编写一个doctype声明,并让它指向自己选择的一个dtd。然而,由于大多数web文档都需要遵循由w3c发布的某个国际公认的web标准,所以那些文档通常都要包含以下标准doctype声明之一:

html 2:

<!doctype html public "-/ietf/dtd html 2.0/en">

html 3.2:

<!doctype html public "-/w3c/dtd html 3.2 final/en">

html 4.01 strict:

<!doctype html public "-/w3c/dtd html 4.01/en"
"http://www.w3.org/tr/html4/strict.dtd">

html 4.01 transitional:

<!doctype html public "-/w3c/dtd html 4.01 transitional/en"
"http://www.w3.org/tr/html4/loose.dtd">

html 4.01 frameset:

<!doctype html public "-/w3c/dtd html 4.01 frameset/en"
"http://www.w3.org/tr/html4/frameset.dtd">

xhtml 1.0 strict:

<!doctype html public "-/w3c/dtd xhtml 1.0 strict/en"
"http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd">

xhtml 1.0 transitional:

<!doctype html public "-/w3c/dtd xhtml 1.0 transitional/en"
"http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">

xhtml 1.0 frameset:

<!doctype html public "-/w3c/dtd xhtml 1.0 frameset/en"
"http://www.w3.org/tr/xhtml1/dtd/xhtml1-frameset.dtd">

xhtml 1.1:

<!doctype html public "-/w3c/dtd xhtml 1.1/en"
"http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd">

xhtml 1.1 plus mathml plus svg:

<!doctype html public
"-/w3c/dtd xhtml 1.1 plus mathml 2.0 plus svg 1.1/en"
"http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd">

除了上面列出的doctype声明,具有特殊要求的一些文档还使用了其他几种声明。

doctype声明通常是文档的第一行,要在<html>标记以及其他文档内容之前。注意,在xhtml文档中,doctype的前面偶尔会出现一条xml处理指令(也称为xml prolog):

<@xml version="1.0" encoding="utf-8"@>

为了确保网页正确显示和顺利通过验证,使用正确的doctype是关键。与内容相反的、不正确的或者形式错误的doctype是大量问题的罪魁祸首。在未来的专栏文章中,我还会具体解释如何诊断及纠正这些问题。

用dw设计网页时,新建一个文件,看代码最前面总要出现一个下面的东东,
<!doctype html public "-/w3c/dtd html 4.01 transitional/en"
"http://www.w3.org/tr/html4/loose.dtd">
这个是dw自动在网页文件页增加了dtd信息.可以删.
删除后,浏览器会使用的默认dtd.

以下是一个简单的 HTML 面,带有一个浮动广告和一个可关闭的按钮: ```html <!DOCTYPE html> <html> <head> <title>浮动广告示例</title> <style> #floating-ad { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #fff; border: 1px solid #ccc; padding: 10px; box-shadow: 2px 2px 5px rgba(0,0,0,0.2); z-index: 9999; } #floating-ad img { max-width: 100%; display: block; } #close-btn { position: absolute; top: 0; right: 0; padding: 5px; background-color: #000; color: #fff; font-size: 16px; cursor: pointer; } </style> </head> <body> <div id="floating-ad"> <img src="https://example.com/advert.jpg" alt="广告"/> <div id="close-btn">X</div> </div> <p>这是一个浮动广告示例。Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sit amet blandit mauris. Nam vitae malesuada risus. Donec at nunc nec elit egestas interdum quis non nisl. Fusce sit amet erat vel eros hendrerit fringilla.</p> <script> document.getElementById("close-btn").addEventListener("click", function() { document.getElementById("floating-ad").style.display = "none"; }); </script> </body> </html> ``` 在这个示例中,我们使用了 CSS 的 `position` 属性来将广告固定在面上,并使用 `top` 和 `left` 属性将其放置在面的中心位置。我们还添加了一个黑色的关闭按钮,当用户点击它时,广告将消失。JavaScript 代码监听按钮的点击事件,并将广告的 `display` 属性设置为 `none`,从而隐藏它。 请注意,这只是一个简单的示例,实际的浮动广告可能需要更复杂的代码和样式来实现。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值