设置文字标注标记： <ruby> 当代最可爱的人 <rt> 志愿军 </rt></ruby>
确定文字上下标：x<sup>2</sup>-3x+2=0<br> 解：x<sub>1</sub>=1; x<sub>2</sub>=1<br>
设置地址文字：<address>E-mail:market@phei.com.cn</address>
居中显示文字：<center>需要对齐的内容</center>
设置段落缩进：<blockquote>需要缩进的内容</blockquote>
忽略HTML标记：<xmp > 功夫不负<br>有心人 </xmp>
插入定义列表：<dl> <dt>联系人<dd>XXX <dt>联系地址<dd>北京市丰台区 <dt>邮政编码<dd>100036 </dl>
无序列表：<ul> <li>联系人：</li>xxx <li>联系地址：</li>北京市丰台区 <li>邮政编码：</li>100036 </ul>
目录列表:<dir> <li>联系人：xxx</li> <li>联系地址：北京市丰台区</li> <li>邮政编码：100036</li> </dir>
菜单列表:<menu> <li>联系人 <li>联系地址 <li>邮政编码 </menu>
有序列表: <ol> <li>联系人：xxx</li> <li>联系地址：北京市丰台区</li> <li>邮政编码：100036</li> </ol>
有序列表:<ol Type ="a"> <li>联系人：xxx</li> <li>联系地址：北京市丰台区</li> <li>邮政编码：100036</li> </ol>
嵌套定义列表:<dl><dt>网页三剑客 <dd>Dreamweaver<dd>Flash<dd>Fireworks<dt>编程三剑客 <dd>VB<dd>VF<dd>VC</dl>
嵌套有序列表与无序列表:<ul><li>体育三大球类</li><ol type="i"> <li>足球</li><li>篮球 </li><li>排球</li></ol>
<li>音乐风格</li><ol type="a"> <li>民族音乐</li><li>流行音乐</li><li>古典音乐</li></ol></ul>
<li>音乐风格</li><ol type="a"> <li>民族音乐</li><li>流行音乐</li><li>古典音乐</li></ol></ul>
onUnload事件:<body onUnload=confirm("真的要退出页面，请单击确定")>
添加滚动文字:<marquee> <font face="隶书" size=5>这里的文字是滚动的效果</font> </marquee>
设置滚动文字背景颜色:<marquee bgcolor="00ffff"> 春晓<br> 春眠不觉晓，<br> 处处闻啼鸟。<br> </marquee>
设置滚动方向:<marquee direction="up"> 春晓<br> 春眠不觉晓，<br> </marquee>
设置滚动速度:<marquee scrollamount=20> 我是最快的！ </marquee>
<marquee scrollamount=10> 我是三个中的第二名，速度还可以。 </marquee>
设置滚动延迟:<marquee scrolldelay=50> 我一直在走，没有停下来。 </marquee>
设置滚动范围:<marquee bgcolor="#00ff00" width=200 height=50> 我的滚动范围就在这 </marquee>
设置滚动空白空间:<marquee bgcolor="#00ff00" hspace=20 vspace=10> 空白空间水平为20像素，垂直为10像素。 </marquee>
设置滚动循环:<marquee behavior="alternate" loop="3"> 春晓<br> 春眠不觉晓，<br> </marquee>
插入多媒体文件:<embed src="19-3-1.swf" width="300" > </embed>
插入音频文件: <embed src="中国人.mp3" autostart=true loop=true> </embed>
添加背景音乐:<bgsound src="明月几时有.mp3" loop=5> <font face="隶书" size=5 color=navy> 明月几时有？把酒问青天。<br></font>
1.第一个HTML、CSS、JavaScript实例代码（用CSS定义背景图片的位置、标题2和段落的格式，用JavaScript编写文字随鼠标旋转的特效）
<html>
<head>
<title>第一个实例</title>
<style type=text/css>
<!--
<head>
<title>第一个实例</title>
<style type=text/css>
<!--
//1-4-1.jpg是图片的路径
body{background-image:url(1-4-1.jpg);background- attachment:scroll;background-position:100% 100%;
background-repeat:no-repeat}
h2{font-family:黑体;font-size:22pt;color:red}
.p1{font-size:20px;color:#000000;text-align:left}
-->
</style>
body{background-image:url(1-4-1.jpg);background- attachment:scroll;background-position:100% 100%;
background-repeat:no-repeat}
h2{font-family:黑体;font-size:22pt;color:red}
.p1{font-size:20px;color:#000000;text-align:left}
-->
</style>
</head>
<body>
<center>
<h2>第一个HTML、CSS、JavaScript实例</h2>
</center>
<hr>
<p class=p1>1.HTML是网页架构基础。</p>
<p class=p1>2.用CSS定义背景图片的位置、标题2和段落的格式。</p>
<p class=p1>3.用JavaScript编写文字随鼠标旋转的特效。</p>
<body>
<center>
<h2>第一个HTML、CSS、JavaScript实例</h2>
</center>
<hr>
<p class=p1>1.HTML是网页架构基础。</p>
<p class=p1>2.用CSS定义背景图片的位置、标题2和段落的格式。</p>
<p class=p1>3.用JavaScript编写文字随鼠标旋转的特效。</p>
<strike>添加了删除线的文字</strike>
<SCRIPT LANGUAGE="JavaScript">
if (document.all) {
yourLogo = "第一个HTML、CSS、JavaScript实例";
logoFont = "黑体";
logoFont = "Arial";
logoColor = "ff0000";
yourLogo = yourLogo.split('');
L = yourLogo.length;
TrigSplit = 360 / L;
Sz = new Array()
logoWidth = 100;
logoHeight = -30;
ypos = 0;
xpos = 0;
step = 0.03;
currStep = 0;
document.write('<div id="outer" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i = 0; i < L; i++) {
document.write('<div id="ie" style="position:absolute;top:0px;left:0px;'
+'width:20px;height:20px;font-family:'+logoFont+';font-size:100px;'
+'color:'+logoColor+';text-align:center">'+yourLogo[i]+'</div>');
}
document.write('</div></div>');
function Mouse() {
ypos = event.y;
xpos = event.x - 5;
}
document.οnmοusemοve=Mouse;
function animateLogo() {
outer.style.pixelTop = document.body.scrollTop;
for (i = 0; i < L; i++) {
ie[i].style.top = ypos + logoHeight * Math.sin(currStep + i * TrigSplit * Math.PI / 180);
ie[i].style.left = xpos + logoWidth * Math.cos(currStep + i * TrigSplit * Math.PI / 180);
Sz[i] = ie[i].style.pixelTop - ypos;
if (Sz[i] < 5) Sz[i] = 5;
ie[i].style.fontSize = Sz[i] / 0.9;
}
currStep -= step;
setTimeout('animateLogo()', 20);
}
window.onload = animateLogo;
}
</script>
if (document.all) {
yourLogo = "第一个HTML、CSS、JavaScript实例";
logoFont = "黑体";
logoFont = "Arial";
logoColor = "ff0000";
yourLogo = yourLogo.split('');
L = yourLogo.length;
TrigSplit = 360 / L;
Sz = new Array()
logoWidth = 100;
logoHeight = -30;
ypos = 0;
xpos = 0;
step = 0.03;
currStep = 0;
document.write('<div id="outer" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i = 0; i < L; i++) {
document.write('<div id="ie" style="position:absolute;top:0px;left:0px;'
+'width:20px;height:20px;font-family:'+logoFont+';font-size:100px;'
+'color:'+logoColor+';text-align:center">'+yourLogo[i]+'</div>');
}
document.write('</div></div>');
function Mouse() {
ypos = event.y;
xpos = event.x - 5;
}
document.οnmοusemοve=Mouse;
function animateLogo() {
outer.style.pixelTop = document.body.scrollTop;
for (i = 0; i < L; i++) {
ie[i].style.top = ypos + logoHeight * Math.sin(currStep + i * TrigSplit * Math.PI / 180);
ie[i].style.left = xpos + logoWidth * Math.cos(currStep + i * TrigSplit * Math.PI / 180);
Sz[i] = ie[i].style.pixelTop - ypos;
if (Sz[i] < 5) Sz[i] = 5;
ie[i].style.fontSize = Sz[i] / 0.9;
}
currStep -= step;
setTimeout('animateLogo()', 20);
}
window.onload = animateLogo;
}
</script>
</body>
</html>
</html>
2.综合设置图片和多媒体实例：
<html>
<head>
<title>综合设置图片和多媒体</title>
</head>
<body>
<center>
<h2>综合设置图片和多媒体</h2>
</center>
<hr>
<bgcolor src="天涯.mp3" loop=3>
<marquee bgcolor="#87cefa" direction="up"
width=290 height=130 scrollamount=4>
<font face="隶书" size=4 >
江山如此多娇，引无数英雄竞折腰。<br>
惜秦皇汉武，略输文采；<br>
唐宗宋祖，稍逊风骚。<br>
</font>
</marquee>
<img src="19-5-1.jpg" align=top>
<marquee bgcolor="#339933" direction="up"
width=330 height=120 hspace="20" scrolldelay=120>
<font face="隶书" size=4 color=white>
一代天骄，成吉思汗，只识弯弓射大雕。<br>
俱往矣，数风流人物，还看今朝。<br>
</font>
</marquee>
<img src="19-5-2.jpg" >
</body>
</html>
<head>
<title>综合设置图片和多媒体</title>
</head>
<body>
<center>
<h2>综合设置图片和多媒体</h2>
</center>
<hr>
<bgcolor src="天涯.mp3" loop=3>
<marquee bgcolor="#87cefa" direction="up"
width=290 height=130 scrollamount=4>
<font face="隶书" size=4 >
江山如此多娇，引无数英雄竞折腰。<br>
惜秦皇汉武，略输文采；<br>
唐宗宋祖，稍逊风骚。<br>
</font>
</marquee>
<img src="19-5-1.jpg" align=top>
<marquee bgcolor="#339933" direction="up"
width=330 height=120 hspace="20" scrolldelay=120>
<font face="隶书" size=4 color=white>
一代天骄，成吉思汗，只识弯弓射大雕。<br>
俱往矣，数风流人物，还看今朝。<br>
</font>
</marquee>
<img src="19-5-2.jpg" >
</body>
</html>
3.设置列表图像实例：
<html>
<head>
<title>设置列表图像</title>
<style type=text/css>
<!--
h2{font-family:黑体;font-size:18pt}
.p1{font-size:16pt;list-style-image:url(20-1-2.gif)}
-->
</style>
</head>
<body>
<center>
<h2>博文视点精品书目</h2>
</center>
<hr>
<ul class=p1>
<li>代码大全（第2版）
<li>解析极限编程
<li>交互设计之路
<li>……
</ul>
</body>
</html>
<head>
<title>设置列表图像</title>
<style type=text/css>
<!--
h2{font-family:黑体;font-size:18pt}
.p1{font-size:16pt;list-style-image:url(20-1-2.gif)}
-->
</style>
</head>
<body>
<center>
<h2>博文视点精品书目</h2>
</center>
<hr>
<ul class=p1>
<li>代码大全（第2版）
<li>解析极限编程
<li>交互设计之路
<li>……
</ul>
</body>
</html>
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
