html4strict 高级转至TOP链接
此示例显示如何使用JavaScript和HTML锚点创建高级“Go to Top”链接... <br/>您将注意到此方法不会向URL添加#top。
<span style="color: #009900;"><span style="color: #808080; font-style: italic;"><!------></span></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/script.html"><span style="color: #000000; font-weight: bold;"><script</span></a> <span style="color: #000066;">type</span>=<span style="color: #ff0000;">"text/javascript"</span><span style="color: #000000; font-weight: bold;">></span></span>
function init(){
document.getElementById('gtop').onclick = function(){
window.scrollTo(0,0);
return false;
}
}
onload=init;
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></script></span></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/a.html"><span style="color: #000000; font-weight: bold;"><a</span></a> <span style="color: #000066;">name</span>=<span style="color: #ff0000;">"top"</span><span style="color: #000000; font-weight: bold;">></span></span><span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></a></span></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/h1.html"><span style="color: #000000; font-weight: bold;"><h1></span></a></span>Top position<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></h1></span></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/p.html"><span style="color: #000000; font-weight: bold;"><p></span></a></span>
A long text ....<span style="color: #009900;"><a href="http://december.com/html/4/element/br.html"><span style="color: #000000; font-weight: bold;"><br</span></a>/<span style="color: #000000; font-weight: bold;">></span></span>
A long text ....<span style="color: #009900;"><a href="http://december.com/html/4/element/br.html"><span style="color: #000000; font-weight: bold;"><br</span></a>/<span style="color: #000000; font-weight: bold;">></span></span>
A long text ....<span style="color: #009900;"><a href="http://december.com/html/4/element/br.html"><span style="color: #000000; font-weight: bold;"><br</span></a>/<span style="color: #000000; font-weight: bold;">></span></span>
A long text ....<span style="color: #009900;"><a href="http://december.com/html/4/element/br.html"><span style="color: #000000; font-weight: bold;"><br</span></a>/<span style="color: #000000; font-weight: bold;">></span></span>
A long text ....<span style="color: #009900;"><a href="http://december.com/html/4/element/br.html"><span style="color: #000000; font-weight: bold;"><br</span></a>/<span style="color: #000000; font-weight: bold;">></span></span>
A long text ....<span style="color: #009900;"><a href="http://december.com/html/4/element/br.html"><span style="color: #000000; font-weight: bold;"><br</span></a>/<span style="color: #000000; font-weight: bold;">></span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></p></span></span>
<span style="color: #009900;"><span style="color: #808080; font-style: italic;"><!-- create a long page --></span></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/br.html"><span style="color: #000000; font-weight: bold;"><br</span></a>/<span style="color: #000000; font-weight: bold;">></span></span><span style="color: #009900;"><a href="http://december.com/html/4/element/br.html"><span style="color: #000000; font-weight: bold;"><br</span></a>/<span style="color: #000000; font-weight: bold;">></span></span><span style="color: #009900;"><a href="http://december.com/html/4/element/br.html"><span style="color: #000000; font-weight: bold;"><br</span></a>/<span style="color: #000000; font-weight: bold;">></span></span><span style="color: #009900;"><a href="http://december.com/html/4/element/br.html"><span style="color: #000000; font-weight: bold;"><br</span></a>/<span style="color: #000000; font-weight: bold;">></span></span><span style="color: #009900;"><a href="http://december.com/html/4/element/br.html"><span style="color: #000000; font-weight: bold;"><br</span></a>/<span style="color: #000000; font-weight: bold;">></span></span><span style="color: #009900;"><a href="http://december.com/html/4/element/br.html"><span style="color: #000000; font-weight: bold;"><br</span></a>/<span style="color: #000000; font-weight: bold;">></span></span><span style="color: #009900;"><a href="http://december.com/html/4/element/br.html"><span style="color: #000000; font-weight: bold;"><br</span></a>/<span style="color: #000000; font-weight: bold;">></span></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/br.html"><span style="color: #000000; font-weight: bold;"><br</span></a>/<span style="color: #000000; font-weight: bold;">></span></span><span style="color: #009900;"><a href="http://december.com/html/4/element/br.html"><span style="color: #000000; font-weight: bold;"><br</span></a>/<span style="color: #000000; font-weight: bold;">></span></span><span style="color: #009900;"><a href="http://december.com/html/4/element/br.html"><span style="color: #000000; font-weight: bold;"><br</span></a>/<span style="color: #000000; font-weight: bold;">></span></span><span style="color: #009900;"><a href="http://december.com/html/4/element/br.html"><span style="color: #000000; font-weight: bold;"><br</span></a>/<span style="color: #000000; font-weight: bold;">></span></span><span style="color: #009900;"><a href="http://december.com/html/4/element/br.html"><span style="color: #000000; font-weight: bold;"><br</span></a>/<span style="color: #000000; font-weight: bold;">></span></span><span style="color: #009900;"><a href="http://december.com/html/4/element/br.html"><span style="color: #000000; font-weight: bold;"><br</span></a>/<span style="color: #000000; font-weight: bold;">></span></span><span style="color: #009900;"><a href="http://december.com/html/4/element/br.html"><span style="color: #000000; font-weight: bold;"><br</span></a>/<span style="color: #000000; font-weight: bold;">></span></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/p.html"><span style="color: #000000; font-weight: bold;"><p></span></a></span>
Last paragraph.
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></p></span></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/br.html"><span style="color: #000000; font-weight: bold;"><br</span></a>/<span style="color: #000000; font-weight: bold;">></span></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/br.html"><span style="color: #000000; font-weight: bold;"><br</span></a>/<span style="color: #000000; font-weight: bold;">></span></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/a.html"><span style="color: #000000; font-weight: bold;"><a</span></a> <span style="color: #000066;">href</span>=<span style="color: #ff0000;">"#top"</span> <span style="color: #000066;">id</span>=<span style="color: #ff0000;">"gtop"</span><span style="color: #000000; font-weight: bold;">></span></span>Go to top<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></a></span></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/br.html"><span style="color: #000000; font-weight: bold;"><br</span></a>/<span style="color: #000000; font-weight: bold;">></span></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/br.html"><span style="color: #000000; font-weight: bold;"><br</span></a>/<span style="color: #000000; font-weight: bold;">></span></span>
html4strict Firefox,IE和Opera的CSS透明度
为HTML元素添加一些透明度的简单方法。
<span style="color: #009900;"><span style="color: #808080; font-style: italic;"><!------></span></span>
<span style="color: #009900;"><span style="color: #808080; font-style: italic;"><!-- a little bit css here: --></span></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/style.html"><span style="color: #000000; font-weight: bold;"><style</span></a> <span style="color: #000066;">type</span>=<span style="color: #ff0000;">"text/css"</span> <span style="color: #000066;">media</span>=<span style="color: #ff0000;">"all"</span><span style="color: #000000; font-weight: bold;">></span></span>
td { vertical-align: top; }
#table {
margin: 0 auto;
width: 300px;
}
.red_box {
width: 100px;
height: 100px;
background-color: #7A1417;
}
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></style></span></span>
<span style="color: #009900;"><span style="color: #808080; font-style: italic;"><!-- a table with some images and divs --></span></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/table.html"><span style="color: #000000; font-weight: bold;"><table</span></a> <span style="color: #000066;">border</span>=<span style="color: #ff0000;">"0"</span> <span style="color: #000066;">cellpadding</span>=<span style="color: #ff0000;">"5"</span> <span style="color: #000066;">cellspacing</span>=<span style="color: #ff0000;">"2"</span> <span style="color: #000066;">id</span>=<span style="color: #ff0000;">"table"</span><span style="color: #000000; font-weight: bold;">></span></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/tr.html"><span style="color: #000000; font-weight: bold;"><tr></span></a></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/td.html"><span style="color: #000000; font-weight: bold;"><td</span></a> <span style="color: #000066;">valign</span>=<span style="color: #ff0000;">"top"</span><span style="color: #000000; font-weight: bold;">></span></span>
90 % opacity<span style="color: #009900;"><a href="http://december.com/html/4/element/br.html"><span style="color: #000000; font-weight: bold;"><br</span></a>/<span style="color: #000000; font-weight: bold;">></span></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/img.html"><span style="color: #000000; font-weight: bold;"><img</span></a> <span style="color: #000066;">src</span>=<span style="color: #ff0000;">"http://www.jonasjohn.de/lab/context_free/t008.png"</span>
<span style="color: #000066;">style</span>=<span style="color: #ff0000;">"filter: Alpha(opacity=90); opacity: .9;"</span> /<span style="color: #000000; font-weight: bold;">></span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></td></span></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/td.html"><span style="color: #000000; font-weight: bold;"><td></span></a></span>
50 % opacity<span style="color: #009900;"><a href="http://december.com/html/4/element/br.html"><span style="color: #000000; font-weight: bold;"><br</span></a>/<span style="color: #000000; font-weight: bold;">></span></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/img.html"><span style="color: #000000; font-weight: bold;"><img</span></a> <span style="color: #000066;">src</span>=<span style="color: #ff0000;">"http://www.jonasjohn.de/lab/context_free/t008.png"</span>
<span style="color: #000066;">style</span>=<span style="color: #ff0000;">"filter: Alpha(opacity=50); opacity: .5;"</span> /<span style="color: #000000; font-weight: bold;">></span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></td></span></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/td.html"><span style="color: #000000; font-weight: bold;"><td></span></a></span>
20 % opacity<span style="color: #009900;"><a href="http://december.com/html/4/element/br.html"><span style="color: #000000; font-weight: bold;"><br</span></a>/<span style="color: #000000; font-weight: bold;">></span></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/img.html"><span style="color: #000000; font-weight: bold;"><img</span></a> <span style="color: #000066;">src</span>=<span style="color: #ff0000;">"http://www.jonasjohn.de/lab/context_free/t008.png"</span>
<span style="color: #000066;">style</span>=<span style="color: #ff0000;">"filter: Alpha(opacity=20); opacity: .2;"</span> /<span style="color: #000000; font-weight: bold;">></span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></td></span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></tr></span></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/tr.html"><span style="color: #000000; font-weight: bold;"><tr></span></a></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/td.html"><span style="color: #000000; font-weight: bold;"><td></span></a></span>
90 % opacity<span style="color: #009900;"><a href="http://december.com/html/4/element/br.html"><span style="color: #000000; font-weight: bold;"><br</span></a>/<span style="color: #000000; font-weight: bold;">></span></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;"><div</span></a> <span style="color: #000066;">class</span>=<span style="color: #ff0000;">"red_box"</span>
<span style="color: #000066;">style</span>=<span style="color: #ff0000;">"filter: Alpha(opacity=90); opacity: .9;"</span> /<span style="color: #000000; font-weight: bold;">></span></span><span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></div></span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></td></span></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/td.html"><span style="color: #000000; font-weight: bold;"><td></span></a></span>
50 % opacity<span style="color: #009900;"><a href="http://december.com/html/4/element/br.html"><span style="color: #000000; font-weight: bold;"><br</span></a>/<span style="color: #000000; font-weight: bold;">></span></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;"><div</span></a> <span style="color: #000066;">class</span>=<span style="color: #ff0000;">"red_box"</span>
<span style="color: #000066;">style</span>=<span style="color: #ff0000;">"filter: Alpha(opacity=50); opacity: .5;"</span> /<span style="color: #000000; font-weight: bold;">></span></span><span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></div></span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></td></span></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/td.html"><span style="color: #000000; font-weight: bold;"><td></span></a></span>
20 % opacity<span style="color: #009900;"><a href="http://december.com/html/4/element/br.html"><span style="color: #000000; font-weight: bold;"><br</span></a>/<span style="color: #000000; font-weight: bold;">></span></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;"><div</span></a> <span style="color: #000066;">class</span>=<span style="color: #ff0000;">"red_box"</span>
<span style="color: #000066;">style</span>=<span style="color: #ff0000;">"filter: Alpha(opacity=20); opacity: .2;"</span> /<span style="color: #000000; font-weight: bold;">></span></span><span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></div></span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></td></span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></tr></span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></table></span></span>
html4strict CSS Pagebreak示例
演示如何使用CSS将分页命令添加到网页。<br/> <br/>查看示例页面的打印预览。
<span style="color: #009900;"><span style="color: #808080; font-style: italic;"><!------></span></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/style.html"><span style="color: #000000; font-weight: bold;"><style</span></a> <span style="color: #000066;">type</span>=<span style="color: #ff0000;">"text/css"</span><span style="color: #000000; font-weight: bold;">></span></span>
/* this is the important part (should be used in HTML head): */
.pagebreak {
page-break-after: always;
}
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></style></span></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/h1.html"><span style="color: #000000; font-weight: bold;"><h1></span></a></span>First page<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></h1></span></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/p.html"><span style="color: #000000; font-weight: bold;"><p></span></a></span>Some text<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></p></span></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/br.html"><span style="color: #000000; font-weight: bold;"><br</span></a> <span style="color: #000066;">class</span>=<span style="color: #ff0000;">"pagebreak"</span> /<span style="color: #000000; font-weight: bold;">></span></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/h1.html"><span style="color: #000000; font-weight: bold;"><h1></span></a></span>Second page<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></h1></span></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/p.html"><span style="color: #000000; font-weight: bold;"><p></span></a></span>Some more text<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></p></span></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/br.html"><span style="color: #000000; font-weight: bold;"><br</span></a> <span style="color: #000066;">class</span>=<span style="color: #ff0000;">"pagebreak"</span> /<span style="color: #000000; font-weight: bold;">></span></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/h1.html"><span style="color: #000000; font-weight: bold;"><h1></span></a></span>Third page<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></h1></span></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/p.html"><span style="color: #000000; font-weight: bold;"><p></span></a></span>And again some text<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></p></span></span>
html4strict 有效的XHTML 1.0 - 框架集示例
此示例显示了有效的XHTML框架集的外观。<br/> BTW:我不经常使用框架,但有时它们可能非常有用。
<span style="color: #009900;"><span style="color: #808080; font-style: italic;"><!------></span></span>
<span style="color: #00bbdd;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "DTD/xhtml1-frameset.dtd"></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/html.html"><span style="color: #000000; font-weight: bold;"><html</span></a> xmlns=<span style="color: #ff0000;">"http://www.w3.org/1999/xhtml"</span> xml:<span style="color: #000066;">lang</span>=<span style="color: #ff0000;">"en"</span> <span style="color: #000066;">lang</span>=<span style="color: #ff0000;">"en"</span><span style="color: #000000; font-weight: bold;">></span></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/head.html"><span style="color: #000000; font-weight: bold;"><head></span></a></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/title.html"><span style="color: #000000; font-weight: bold;"><title></span></a></span>Example frameset<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></title></span></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/meta.html"><span style="color: #000000; font-weight: bold;"><meta</span></a> <span style="color: #000066;">http-equiv</span>=<span style="color: #ff0000;">"Content-Type"</span> <span style="color: #000066;">content</span>=<span style="color: #ff0000;">"text/html; charset=iso-8859-1"</span> /<span style="color: #000000; font-weight: bold;">></span></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/meta.html"><span style="color: #000000; font-weight: bold;"><meta</span></a> <span style="color: #000066;">http-equiv</span>=<span style="color: #ff0000;">"Content-Language"</span> <span style="color: #000066;">content</span>=<span style="color: #ff0000;">"en"</span> /<span style="color: #000000; font-weight: bold;">></span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></head></span></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/frameset.html"><span style="color: #000000; font-weight: bold;"><frameset</span></a> <span style="color: #000066;">cols</span>=<span style="color: #ff0000;">"250,*"</span><span style="color: #000000; font-weight: bold;">></span></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/frame.html"><span style="color: #000000; font-weight: bold;"><frame</span></a> <span style="color: #000066;">name</span>=<span style="color: #ff0000;">"left_nav"</span> <span style="color: #000066;">src</span>=<span style="color: #ff0000;">"left_nav.htm"</span> <span style="color: #000066;">frameborder</span>=<span style="color: #ff0000;">"0"</span> <span style="color: #000066;">scrolling</span>=<span style="color: #ff0000;">"no"</span> /<span style="color: #000000; font-weight: bold;">></span></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/frame.html"><span style="color: #000000; font-weight: bold;"><frame</span></a> <span style="color: #000066;">name</span>=<span style="color: #ff0000;">"main"</span> <span style="color: #000066;">src</span>=<span style="color: #ff0000;">"main.htm"</span> <span style="color: #000066;">frameborder</span>=<span style="color: #ff0000;">"1"</span> /<span style="color: #000000; font-weight: bold;">></span></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/noframes.html"><span style="color: #000000; font-weight: bold;"><noframes></span></a></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/body.html"><span style="color: #000000; font-weight: bold;"><body></span></a></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/p.html"><span style="color: #000000; font-weight: bold;"><p></span></a></span>
This page uses frames, but your browser
does not support them.
<span style="color: #009900;"><a href="http://december.com/html/4/element/br.html"><span style="color: #000000; font-weight: bold;"><br</span></a>/<span style="color: #000000; font-weight: bold;">></span></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/br.html"><span style="color: #000000; font-weight: bold;"><br</span></a>/<span style="color: #000000; font-weight: bold;">></span></span>
Frames:
<span style="color: #009900;"><a href="http://december.com/html/4/element/a.html"><span style="color: #000000; font-weight: bold;"><a</span></a> <span style="color: #000066;">href</span>=<span style="color: #ff0000;">"left_nav.htm"</span><span style="color: #000000; font-weight: bold;">></span></span>Navigation<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></a></span></span>,
<span style="color: #009900;"><a href="http://december.com/html/4/element/a.html"><span style="color: #000000; font-weight: bold;"><a</span></a> <span style="color: #000066;">href</span>=<span style="color: #ff0000;">"main.htm"</span><span style="color: #000000; font-weight: bold;">></span></span>Content<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></a></span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></p></span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></body></span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></noframes></span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></frameset></span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></html></span></span>
html4strict 选择文字
显示如何在textarea中选择文本
<span style="color: #009900;"><span style="color: #808080; font-style: italic;"><!------></span></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/script.html"><span style="color: #000000; font-weight: bold;"><script</span></a> <span style="color: #000066;">type</span>=<span style="color: #ff0000;">"text/javascript"</span><span style="color: #000000; font-weight: bold;">></span></span>
function select_field(id){
document.getElementById(id).focus();
document.getElementById(id).select();
}
function init(){
select_field('text1');
}
onload=init;
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></script></span></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/form.html"><span style="color: #000000; font-weight: bold;"><form></span></a></span>
This field gets selected onload:<span style="color: #009900;"><a href="http://december.com/html/4/element/br.html"><span style="color: #000000; font-weight: bold;"><br</span></a>/<span style="color: #000000; font-weight: bold;">></span></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/input.html"><span style="color: #000000; font-weight: bold;"><input</span></a> <span style="color: #000066;">type</span>=<span style="color: #ff0000;">"text"</span> <span style="color: #000066;">name</span>=<span style="color: #ff0000;">"text1"</span> <span style="color: #000066;">id</span>=<span style="color: #ff0000;">"text1"</span> <span style="color: #000066;">value</span>=<span style="color: #ff0000;">"some text"</span> /<span style="color: #000000; font-weight: bold;">></span></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/br.html"><span style="color: #000000; font-weight: bold;"><br</span></a>/<span style="color: #000000; font-weight: bold;">></span></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/textarea.html"><span style="color: #000000; font-weight: bold;"><textarea</span></a> <span style="color: #000066;">name</span>=<span style="color: #ff0000;">"textarea1"</span> <span style="color: #000066;">id</span>=<span style="color: #ff0000;">"textarea1"</span> <span style="color: #000066;">rows</span>=<span style="color: #ff0000;">"9"</span> <span style="color: #000066;">cols</span>=<span style="color: #ff0000;">"50"</span> wrap=<span style="color: #ff0000;">"off"</span><span style="color: #000000; font-weight: bold;">></span></span>Some long
content in here.
abcd efgh abcd efgh abcd efgh
abcd efgh abcd efgh abcd efgh
abcd efgh abcd efgh abcd efgh
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></textarea></span></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/br.html"><span style="color: #000000; font-weight: bold;"><br</span></a>/<span style="color: #000000; font-weight: bold;">></span></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/input.html"><span style="color: #000000; font-weight: bold;"><input</span></a> <span style="color: #000066;">type</span>=<span style="color: #ff0000;">"button"</span> <span style="color: #000066;">value</span>=<span style="color: #ff0000;">"Select text"</span> <span style="color: #000066;">onclick</span>=<span style="color: #ff0000;">"select_field('textarea1')"</span><span style="color: #000000; font-weight: bold;">></span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></form></span></span>
html4strict 导航信息
演示如何访问导航器。*变量。
<span style="color: #009900;"><span style="color: #808080; font-style: italic;"><!------></span></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/script.html"><span style="color: #000000; font-weight: bold;"><script</span></a> <span style="color: #000066;">type</span>=<span style="color: #ff0000;">"text/javaScript"</span><span style="color: #000000; font-weight: bold;">></span></span>
<span style="color: #009900;"><span style="color: #808080; font-style: italic;"><!--
// dw() is just a alias for document.write()
// to make the code shorter
function dw(s){
document.write(s);
}
/*
** navigator.* values
*/
dw('<h2></span>
</span>navigator.*:<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></h2></span></span>');
dw('navigator.appName: ' + navigator.appName);
dw('<span style="color: #009900;"><a href="http://december.com/html/4/element/br.html"><span style="color: #000000; font-weight: bold;"><br</span></a>/<span style="color: #000000; font-weight: bold;">></span></span>');
dw('navigator.appVersion: ' + navigator.appVersion);
dw('<span style="color: #009900;"><a href="http://december.com/html/4/element/br.html"><span style="color: #000000; font-weight: bold;"><br</span></a>/<span style="color: #000000; font-weight: bold;">></span></span>');
dw('navigator.userAgent: ' + navigator.userAgent);
dw('<span style="color: #009900;"><a href="http://december.com/html/4/element/br.html"><span style="color: #000000; font-weight: bold;"><br</span></a>/<span style="color: #000000; font-weight: bold;">></span></span>');
dw('navigator.appCodeName: ' + navigator.appCodeName);
dw('<span style="color: #009900;"><a href="http://december.com/html/4/element/br.html"><span style="color: #000000; font-weight: bold;"><br</span></a>/<span style="color: #000000; font-weight: bold;">></span></span>');
dw('navigator.platform: ' + navigator.platform);
dw('<span style="color: #009900;"><a href="http://december.com/html/4/element/br.html"><span style="color: #000000; font-weight: bold;"><br</span></a>/<span style="color: #000000; font-weight: bold;">></span></span>');
dw('navigator.cookieEnabled: ' + navigator.cookieEnabled);
dw('<span style="color: #009900;"><a href="http://december.com/html/4/element/br.html"><span style="color: #000000; font-weight: bold;"><br</span></a>/<span style="color: #000000; font-weight: bold;">></span></span>');
dw('navigator.javaEnabled(): ' + navigator.javaEnabled());
dw('<span style="color: #009900;"><a href="http://december.com/html/4/element/br.html"><span style="color: #000000; font-weight: bold;"><br</span></a>/<span style="color: #000000; font-weight: bold;">></span></span>');
/*
** Internet Explorer only
** ( these just work in IE )
*/
dw('<span style="color: #009900;"><a href="http://december.com/html/4/element/h2.html"><span style="color: #000000; font-weight: bold;"><h2></span></a></span>Internet Explorer only:<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></h2></span></span>');
dw('navigator.userLanguage: ');
if (navigator.userLanguage){ dw(navigator.userLanguage); }
else { dw('-'); }
dw('<span style="color: #009900;"><a href="http://december.com/html/4/element/br.html"><span style="color: #000000; font-weight: bold;"><br</span></a>/<span style="color: #000000; font-weight: bold;">></span></span>');
dw('navigator.systemLanguage: ');
if (navigator.systemLanguage){ dw(navigator.systemLanguage); }
else { dw('-'); }
dw('<span style="color: #009900;"><a href="http://december.com/html/4/element/br.html"><span style="color: #000000; font-weight: bold;"><br</span></a>/<span style="color: #000000; font-weight: bold;">></span></span>');
dw('navigator.browserLanguage: ');
if (navigator.browserLanguage){ dw(navigator.browserLanguage); }
else { dw('-'); }
dw('<span style="color: #009900;"><a href="http://december.com/html/4/element/br.html"><span style="color: #000000; font-weight: bold;"><br</span></a>/<span style="color: #000000; font-weight: bold;">></span></span>');
/*
** Other values
*/
dw('<span style="color: #009900;"><a href="http://december.com/html/4/element/h2.html"><span style="color: #000000; font-weight: bold;"><h2></span></a></span>Other values:<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></h2></span></span>');
dw('history.length: ' + history.length + '<span style="color: #009900;"><a href="http://december.com/html/4/element/br.html"><span style="color: #000000; font-weight: bold;"><br</span></a>/<span style="color: #000000; font-weight: bold;">></span></span>');
dw('Screen Resolution: '+ screen.width+'x'+screen.height+'<span style="color: #009900;"><a href="http://december.com/html/4/element/br.html"><span style="color: #000000; font-weight: bold;"><br</span></a>/<span style="color: #000000; font-weight: bold;">></span></span>');
/*
** Values that only work in Firefox
*/
dw('<span style="color: #009900;"><a href="http://december.com/html/4/element/h2.html"><span style="color: #000000; font-weight: bold;"><h2></span></a></span>Firefox only:<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></h2></span></span>');
dw('navigator.language: ');
if (navigator.language){ dw(navigator.language); }
else { dw('-'); }
dw('<span style="color: #009900;"><a href="http://december.com/html/4/element/br.html"><span style="color: #000000; font-weight: bold;"><br</span></a>/<span style="color: #000000; font-weight: bold;">></span></span>');
/*
** Plugins (navigator.plugins -- Firefox only)
*/
dw('<span style="color: #009900;"><a href="http://december.com/html/4/element/h2.html"><span style="color: #000000; font-weight: bold;"><h2></span></a></span>Plugins:<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></h2></span></span>');
if (navigator.userAgent.indexOf('Firefox') != -1){
dw('<span style="color: #009900;"><a href="http://december.com/html/4/element/table.html"><span style="color: #000000; font-weight: bold;"><table</span></a> <span style="color: #000066;">border</span>=<span style="color: #ff0000;">"1"</span><span style="color: #000000; font-weight: bold;">></span></span>');
for (var i = 0; i <span style="color: #009900;"><span style="color: #000000; font-weight: bold;"><</span> navigator.plugins.length; i++<span style="color: #66cc66;">)</span> <span style="color: #66cc66;">{</span>
dw<span style="color: #66cc66;">(</span><span style="color: #ff0000;">"<tr></span>");
dw("<span style="color: #009900;"><td></span>" + navigator.plugins[i].name + "<span style="color: #009900;"></td></span>");
dw("<span style="color: #009900;"><td></span>" + navigator.plugins[i].description + "<span style="color: #009900;"></td></span>");
dw("<span style="color: #009900;"><td></span>" + navigator.plugins[i].filename + "<span style="color: #009900;"></td></span>");
dw("<span style="color: #009900;"></tr></span>");
}
dw("<span style="color: #009900;"></table></span>");
}
else {
dw('( Firefox only )');
}
//-->
<span style="color: #009900;"></script></span></span>
html4strict 切换复选框
一个简短的javascript函数来切换复选框
<span style="color: #009900;"><span style="color: #808080; font-style: italic;"><!------></span></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/script.html"><span style="color: #000000; font-weight: bold;"><script</span></a> <span style="color: #000066;">type</span>=<span style="color: #ff0000;">"text/javascript"</span><span style="color: #000000; font-weight: bold;">></span></span>
function toggle_checkboxes(id) {
if (!document.getElementById){ return; }
if (!document.getElementsByTagName){ return; }
var inputs = document.getElementById(id).getElementsByTagName("input");
for(var x=0; x <span style="color: #009900;"><span style="color: #000000; font-weight: bold;"><</span> inputs.length; x++<span style="color: #66cc66;">)</span> <span style="color: #66cc66;">{</span>
if <span style="color: #66cc66;">(</span>inputs<span style="color: #66cc66;">[</span>x<span style="color: #66cc66;">]</span>.<span style="color: #000066;">type</span> == <span style="color: #ff0000;">'checkbox'</span><span style="color: #66cc66;">)</span><span style="color: #66cc66;">{</span>
inputs<span style="color: #66cc66;">[</span>x<span style="color: #66cc66;">]</span>.<span style="color: #000066;">checked</span> = !inputs<span style="color: #66cc66;">[</span>x<span style="color: #66cc66;">]</span>.<span style="color: #000066;">checked</span>;
<span style="color: #66cc66;">}</span>
<span style="color: #66cc66;">}</span>
<span style="color: #66cc66;">}</span>
<span style="color: #000000; font-weight: bold;"></script></span></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;"><div</span></a> <span style="color: #000066;">id</span>=<span style="color: #ff0000;">"parent_box"</span><span style="color: #000000; font-weight: bold;">></span></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/input.html"><span style="color: #000000; font-weight: bold;"><input</span></a> <span style="color: #000066;">type</span>=<span style="color: #ff0000;">"checkbox"</span> <span style="color: #000066;">name</span>=<span style="color: #ff0000;">"foo"</span> <span style="color: #000066;">value</span>=<span style="color: #ff0000;">"1"</span> /<span style="color: #000000; font-weight: bold;">></span></span> 1<span style="color: #009900;"><a href="http://december.com/html/4/element/br.html"><span style="color: #000000; font-weight: bold;"><br</span></a>/<span style="color: #000000; font-weight: bold;">></span></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/input.html"><span style="color: #000000; font-weight: bold;"><input</span></a> <span style="color: #000066;">type</span>=<span style="color: #ff0000;">"checkbox"</span> <span style="color: #000066;">name</span>=<span style="color: #ff0000;">"foo"</span> <span style="color: #000066;">value</span>=<span style="color: #ff0000;">"2"</span> <span style="color: #000066;">checked</span>=<span style="color: #ff0000;">"checked"</span> /<span style="color: #000000; font-weight: bold;">></span></span> 2<span style="color: #009900;"><a href="http://december.com/html/4/element/br.html"><span style="color: #000000; font-weight: bold;"><br</span></a>/<span style="color: #000000; font-weight: bold;">></span></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/input.html"><span style="color: #000000; font-weight: bold;"><input</span></a> <span style="color: #000066;">type</span>=<span style="color: #ff0000;">"checkbox"</span> <span style="color: #000066;">name</span>=<span style="color: #ff0000;">"foo"</span> <span style="color: #000066;">value</span>=<span style="color: #ff0000;">"3"</span> <span style="color: #000066;">checked</span>=<span style="color: #ff0000;">"checked"</span> /<span style="color: #000000; font-weight: bold;">></span></span> 3<span style="color: #009900;"><a href="http://december.com/html/4/element/br.html"><span style="color: #000000; font-weight: bold;"><br</span></a>/<span style="color: #000000; font-weight: bold;">></span></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/br.html"><span style="color: #000000; font-weight: bold;"><br</span></a>/<span style="color: #000000; font-weight: bold;">></span></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/input.html"><span style="color: #000000; font-weight: bold;"><input</span></a> <span style="color: #000066;">type</span>=<span style="color: #ff0000;">"button"</span> <span style="color: #000066;">value</span>=<span style="color: #ff0000;">"Toggle checkboxes"</span>
<span style="color: #000066;">onclick</span>=<span style="color: #ff0000;">"toggle_checkboxes('parent_box')"</span> /<span style="color: #000000; font-weight: bold;">></span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></div></span></span>
html4strict iframe例子
IFrame的例子
<span style="color: #009900;"><span style="color: #808080; font-style: italic;"><!------></span></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/iframe.html"><span style="color: #000000; font-weight: bold;"><iframe</span></a> <span style="color: #000066;">name</span>=<span style="color: #ff0000;">"iframe_name"</span> <span style="color: #000066;">src</span>=<span style="color: #ff0000;">"http://www.jonasjohn.de/"</span> <span style="color: #000066;">width</span>=<span style="color: #ff0000;">"99%"</span>
<span style="color: #000066;">height</span>=<span style="color: #ff0000;">"280"</span> <span style="color: #000066;">frameborder</span>=<span style="color: #ff0000;">"0"</span><span style="color: #000000; font-weight: bold;">></span></span>
The iframe could not be shown.<span style="color: #009900;"><a href="http://december.com/html/4/element/br.html"><span style="color: #000000; font-weight: bold;"><br</span></a>/<span style="color: #000000; font-weight: bold;">></span></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/a.html"><span style="color: #000000; font-weight: bold;"><a</span></a> <span style="color: #000066;">href</span>=<span style="color: #ff0000;">"http://www.jonasjohn.de/"</span><span style="color: #000000; font-weight: bold;">></span></span>Click here<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></a></span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></iframe></span></span>
html4strict 以DIV为中心
演示如何在两个浏览器(Firefox和IE)中居中DIV
<span style="color: #009900;"><span style="color: #808080; font-style: italic;"><!------></span></span>
<span style="color: #00bbdd;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"</span>
<span style="color: #00bbdd;"> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/html.html"><span style="color: #000000; font-weight: bold;"><html</span></a> xmlns=<span style="color: #ff0000;">"http://www.w3.org/1999/xhtml"</span> xml:<span style="color: #000066;">lang</span>=<span style="color: #ff0000;">"en"</span> <span style="color: #000066;">lang</span>=<span style="color: #ff0000;">"en"</span><span style="color: #000000; font-weight: bold;">></span></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/head.html"><span style="color: #000000; font-weight: bold;"><head></span></a></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/title.html"><span style="color: #000000; font-weight: bold;"><title></span></a></span>example page<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></title></span></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/style.html"><span style="color: #000000; font-weight: bold;"><style</span></a> <span style="color: #000066;">type</span>=<span style="color: #ff0000;">"text/css"</span> <span style="color: #000066;">media</span>=<span style="color: #ff0000;">"all"</span><span style="color: #000000; font-weight: bold;">></span></span>
body {
background-color: #ffffff;
/* for IE: */
text-align: center;
}
#page {
background: #eeeeee;
/* for firefox, etc: */
margin-left: auto;
margin-right: auto;
text-align: left;
width: 70%;
}
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></style></span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></head></span></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/body.html"><span style="color: #000000; font-weight: bold;"><body></span></a></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;"><div</span></a> <span style="color: #000066;">id</span>=<span style="color: #ff0000;">"page"</span><span style="color: #000000; font-weight: bold;">></span></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/h1.html"><span style="color: #000000; font-weight: bold;"><h1></span></a></span>Title<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></h1></span></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/p.html"><span style="color: #000000; font-weight: bold;"><p></span></a></span>
This content should be centered :-)
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></p></span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></div></span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></body></span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></html></span></span>
html4strict 如何触发表单按钮
此示例显示如何通过java脚本触发表单按钮。
<span style="color: #009900;"><span style="color: #808080; font-style: italic;"><!------></span></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/script.html"><span style="color: #000000; font-weight: bold;"><script</span></a> <span style="color: #000066;">type</span>=<span style="color: #ff0000;">"text/javascript"</span><span style="color: #000000; font-weight: bold;">></span></span>
function init(){
document.getElementById('button1').click();
}
onload=init;
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></script></span></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/h1.html"><span style="color: #000000; font-weight: bold;"><h1></span></a></span>Test form<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></h1></span></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/br.html"><span style="color: #000000; font-weight: bold;"><br</span></a>/<span style="color: #000000; font-weight: bold;">></span></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/form.html"><span style="color: #000000; font-weight: bold;"><form</span></a> <span style="color: #000066;">method</span>=<span style="color: #ff0000;">"post"</span> <span style="color: #000066;">onsubmit</span>=<span style="color: #ff0000;">"alert('You submitted the form!'); return false;"</span><span style="color: #000000; font-weight: bold;">></span></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/input.html"><span style="color: #000000; font-weight: bold;"><input</span></a> <span style="color: #000066;">type</span>=<span style="color: #ff0000;">"hidden"</span> <span style="color: #000066;">name</span>=<span style="color: #ff0000;">"test"</span> <span style="color: #000066;">value</span>=<span style="color: #ff0000;">"1"</span> /<span style="color: #000000; font-weight: bold;">></span></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/input.html"><span style="color: #000000; font-weight: bold;"><input</span></a> <span style="color: #000066;">type</span>=<span style="color: #ff0000;">"text"</span> <span style="color: #000066;">name</span>=<span style="color: #ff0000;">"testvalue"</span> <span style="color: #000066;">value</span>=<span style="color: #ff0000;">"foobar"</span> /<span style="color: #000000; font-weight: bold;">></span></span>
<span style="color: #009900;"><a href="http://december.com/html/4/element/input.html"><span style="color: #000000; font-weight: bold;"><input</span></a> <span style="color: #000066;">type</span>=<span style="color: #ff0000;">"submit"</span> <span style="color: #000066;">name</span>=<span style="color: #ff0000;">"button1"</span> <span style="color: #000066;">id</span>=<span style="color: #ff0000;">"button1"</span> <span style="color: #000066;">value</span>=<span style="color: #ff0000;">"Submit"</span> /<span style="color: #000000; font-weight: bold;">></span></span>
<span style="color: #009900;"><span style="color: #000000; font-weight: bold;"></form></span></span>