实验一 HTML练习
一、 实验目的及任务
1、学会HTML文档的创建以及简单HTML标记的应用。
2、掌握超链接、表格、表单元素等的应用。
二、 实验环境
主机操作系统为Windows操作系统。
三、 实验步骤
第一部分：
请在dreamweaver等网页编辑软件中编写如下网页（使用表格布局，在表格上面加上标题“学生注册表”），并将HTML文档内容写在实验报告中。注：无需考虑具体样式，只考虑网页元素。
第二部分：
请在dreamweaver等网页编辑软件中编写如下网页，保存为feedback,html，并将HTML文档内容写在实验报告中。（注意使用HTML5中的新控件）
第三部分：
请在dreamweaver等网页编辑软件中输入如下代码，并在浏览器中打开相应的HTML文件，观察其效果，自己结合后面学的CSS内容，美化该页面。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>蛋糕物语</title>
<style>
img{ width:300px;
height:200px;
}
</style>
</head>
<body>
<h1 style="font-family:楷体,宋体; color:#F0F">蛋糕大全</h1>
<p><img src="images/cake1.jpg"/><br/>
双莓水果乳酪蛋糕</p>
<hr/>
<p><img src="images/cake2.jpg"/><br/>
哆啦A梦卡通乳酪蛋糕</p>
<hr/>
<p><img src="images/cake3.jpg"/><br/>
浪漫粉色乳酪蛋糕</p>
<hr/>
<p><img src="images/cake4.jpg"/><br/>
心形白巧克力乳酪蛋糕</p>
<hr/>
</body>
</html>
四、 实验报告内容
1、将第一部分的HTML代码写下来。
2、将第二部分的HTML代码写下来。
第二篇：实验1 HTML基本标记的练习
实验1 HTML基本标记的练习
【实验目的】
熟练掌握HTML语言中各种基本标记的使用方法。
【实验要求】
⑴ 利用记事本编写简单的html程序；
⑵ 练习使用各种文档标记及其常用属性；
⑶ 练习使用各种排版标记、文本格式标记及其常用属性；
⑷ 练习使用图像标记及其常用属性。
【实验步骤】
1．编写简单的HTML文档
⑴ 在D盘或E盘上建立以自己名字命名的文件夹；
⑵ 启动记事本程序，输入下列内容：
<html>
<head>
<title>白居易的诗</title>
</head>
<body bgcolor="yellow" text=rgb(255,0,0)>
<P align="center">
<B>钱塘湖春行 </B></P><Hr>
<p align="center">
孤山寺北贾亭西，水面初平云脚低。<br>
几处早莺争暖树，谁家新燕啄春泥。<br>
乱花渐欲迷人眼，浅草才能没马蹄。<br>
最爱西湖行不足，绿扬荫里白沙堤。</p>
<P>
【说明】此诗为作者任杭州刺史时作。写西湖的山光水色、花草亭树，加上早莺、新燕生机盎然，旖旎动人。是摹写西湖秋色名篇。</P>
</body>
</html>
⑶ 将上述内容以“Poem.html”为文件名存储在自己的文件夹中；
⑷ 运行上述文件，观察文件执行的结果，体会各种文档标记及排版标记的使用方法；
⑸ 在上述HTML程序中，去掉<body>中的bgcolor属性，增加background属性，使网页的背景变成一幅风景图片（图片文件自定），然后存盘并刷新页面观察结果；
⑹ 为上述网页增加一个背景音乐，即在文档中再增加一个<bgsound src="音乐文件名">标记，然后存盘并刷新页面用耳机听听效果。
2、练习使用文本格式标记及其常用属性
在上述实验的基础上，修改文档中文字的显示属性，即在适当的位置增加<font></font>、<B></B>、<I></I>、<U></U>、<SUB></SUB>、<SUP></SUP>等标记，使网页的输出效果如下图所示：
3．练习使用图像标记及其常用属性
在自己的文件夹中新建一个名为“Image.html”的HTML文档，在该文档中主要练习插入图片文件及相关的文字，即练习使用<img src="图片路径及文件名" >标记，并熟悉该标记中以下属性的使用：
(1) Alt ：图像不能下载时用以替代的文字，如：alt="济南大学"；
(2) Align：对齐方式。取值可以是文本对齐：top、bottom、middle；图形对齐：left、right，任选其一，如：Align= right 或Align=middle；
(3) Border：图像的边框。可取≥0的整数，如：Border=3；
(4) Width和Height：图像的高和宽；如：Width=300 Height=200；
(5) Hspace和Vspace：图片的水平位置和垂直位置，如：Hspace=300 Vspace=100；
注意上述属性除src为必选外，其它属性可全选，可选择其中的几个，也可不选，另外图片文件的扩展名不能省略，如：
<img src="picture\L4.jpg" Align= right Width=300 Height=200 Hspace=300 Vspace=100>
同学们可以自己搜集选择图片，仿照下图练习图像标记及其常用属性的使用方法。
【实验报告】
上述实验完成后，要求写出实验报告，可按如下格式书写：
实验名称：HTML基本标记的练习
实验目的：熟练掌握HTML语言中各种基本标记的使用方法。
实验题目：
1、利用记事本编写简单的html程序；
2、练习使用各种文档标记及其常用属性；
3、练习使用各种排版标记、文本格式标记及其常用属性；
4、练习使用图像标记及其常用属性。
预习报告：
写出前两个实验步骤中最终编写的html程序。
调试过程：
根据自己的情况填写。程序不会是一次就能运行成功的，一开始肯定会有错误的（比如漏了标记符号<、>，或者双引号和< >错输成了中文状态的＜＞等等），不断的修改错误然后不断地重新运行的这个过程就叫做“调试过程”，把有关这方面的内容适当写一些即可。
运行结果：简单描述一下你所做网页的最终显示情况。