///************实验一**************///
<html>
<head><title>实验一</title></head>
<body>
<font face=黑体 size=5>实验内容一<hn>标记的使用</font>
<!--<br>称为换行标记,作用:令其后的内容在下一行显示-->
<!--<hr>称为水平线,作用:插入一条水平线-->
<!--<p>称为段落标记。作用:留一空白行-->
<!--<CENTER>称为居中标记。作用:令置中对齐。-->
<!--<PRE>称为预设格式标记。作用:令文字按照原代码的方式显示。-->
<!--<DIV>称为定位标记。作用:设定文字表格等摆放位置。-->
<DIV align="center">Chris''s First Homepage
<br>My profile
</DIV>
<br><h1>第2章 HTML语言基础</h1>
<h2>2.1 设定文字大小、颜色与字型</h2>
<h3>2.2.1 文字的大小设定</h3>
<hr>
<p>字体color属性 :<font face=宋体 size=5 color=red>本行文字为宋体,5号字体,红色</font>
<br>
<font face=黑体 size=5>实验内容二 有序列表的使用</font>
<h1>文学园地</h1>
<p><big><big><strong>目录</strong></big></big>
<ol>
<li>古典文学 </li>
<ol type="A"><li>西游记<li>三国演义</ol>
<li>武侠天地 </li>
<ol><li>寻秦记</ol>
<li>现代文学 </li>
<li>科幻文学 </li>
<li>创作园地 </li>
</ol>
<hr>
</body>
</html>
///************实验二**************///
<html>
<head>
<title>实验一 (续)</title>
<bgsound src="" loop="infinite">
</head>
<body link="#00FF00" vlink="#0000FF" alink="#FFFF00">
<h2 align=center><a NAME="top">第二个实验内容:图像与超链接</a></h2>
<center>
<a HREF="#h-1" >图片标记的使用</a>
<a HREF="#h-2" >页内链接</a>
<a HREF="#h-3" >页面链接</a>
<hr>
</center>
<center><h2><a name="h-1">图片标记的使用</a></h2></center>
<br>1 设置图片的水平对齐方式
<p align=left><img src="du.jpg " alt="这是张图片" width=80 height=60>局左</p>
<p align=center><img src="du.jpg" width=80 height=60>局中</p>
<p align=right><img src="du.jpg" width=80 height=60>局右</p>
<hr>
<br>2 设置图片与同一行文本间的垂直对齐
<img src="du.jpg" width=80 height=60 align=top>顶部对齐
<img src="du.jpg" width=80 height=60 align="middle">中央对齐
<img src="du.jpg" width=80 height=60 align="bottom">底部对齐
<br clear="all">
<!--给图像加外框-->
<br>3 设置文本环绕图片 设定图形的外框 把文本排到图像下面<br>
<img src="du.jpg" alt="这是张图片" border="10">
<br clear="all">
利用〈img〉标记align属性的left和right属性值,可以实现文本环绕图片。
Align=left 图片居左,文本在图片的右边 ;Align=right 图片居右,文本在图片的左边。
如果想取消文本环绕图片,可使用〈br clear=left或right或all〉,其后的文本将不再环绕图片。而是在图像的下面另起一行。
<center><h2><a name="h-2">页内链接如上</a></h2></center>
<center><h2><a name="h-3">页面链接使用</a></h2></center>
<p><a href="Linter.htm">友好网站</a></p>
<p><a href="Linter.htm" Target=_blank>新品预告</a></p>
<p><a href="Linter.htm" Target=_parent>精品回廓</a></p>
<p><a href="Linter.htm" Target=_top>答用户问</a></p>
<center><a href="#top">返回目录</a> <a href="mailto:lulu201@sina.com.cn">联系我们</a></center>
</body>
</html>