作业_HTML标记基本应用与网页设计

实验一 HTML标记基本应用与网页设计

一、实验目的

1.掌握Sublime Text 3或者editplus的安装与使用

2.掌握HTML常用标记的使用。

二、实习题目

运用所学知识，完成课本的练习与实验中的以下实验内容：

1.第2章（第40页） 实验2；

1.求知家园

求知家园

欢迎来到我们的求职家园

2.Google 搜索

Google 搜索

欢迎使用Google搜索



2.第3章（第60页） 实验3；

1.自荐信

New Document

自荐信

自荐信

尊敬的领导：

您好！

感谢您在百忙之中启阅我的自荐材料！相信此刻的停留不会让您失望！

我是计算机专业的本科毕业生。经过将近四年的大学学习和锻炼，与同龄人一样，我即将走上工作岗位，通过社会来证实自己的知识和能力。为了找到一份适合自己

特长和兴趣的工作，更好地发挥自己的才能，实现自己的人生价值，我冒昧地写下这封信，希望能得到您的认可，能为贵公司服务。

此致

敬礼！

</pre>

<hr size="3" color="red" width="100%"/>

<i align="center">联系E-mail:zhang@163.com</i>

2.数学方程式

New Document

h3{font - size:24px;color:red;text-align:center;}

font标记及文本标记的应用

数学方程式

2x2+3x=9

x1+x2=10

3.第4章（第72页） 实验4；

1.Windows操作系统

New Document

Windows不同版本

Windows 95

Windows 98

Windows NT

Windows NT Workstation

Windows NT Server

Windows 2000

Windows 2000 Professinoal

Windows 2000 Server

Windows 2000 Advance Server

4.第5章（第86页） 实验5；

1.apple网站

New Document

apple网站

apple网站

2.桂林山水

New Document

桂林山水风景图片

桂林山水风景图片

<a href="1.jpg"><img border="0" width="24%" heigth="200" src="1.jpg"/></a>
<a href="2.jpg"><img border="0" width="24%" heigth="200" src="2.jpg"/></a>
<a href="3.jpg"><img border="0"  width="24%" heigth="200" src="3.jpg"/></a>
<a href="4.jpg"><img border="0" width="24%" heigth="200" src="4.jpg"/></a>
<pre>桂林山水1                                         桂林山水2                                           桂林山水3                                             桂林山水4</pre>

5.第6章（第109页）实验6；

1.图像对齐方式

图像对齐方式

img{width:50px;height:50px;}

设置图像对齐方式

<h3>未设置对齐方式的图像:</h3>
<img src = "1.PNG">
<p>PNG.图像文件存储格式，其目的是试图（原来此处使用了“企图”）替代GIF和IFF文件格式，同时增加一些GIF文</p>
<p>件格式所不具备的特性。</p>
<p></p>
<h3>已设置对齐方式的图像</h3>
<p></p>
<p></p>
<p>PNG使用了从LZ77派生的一个非专利无失真压缩算法（名为deflation）。<img src="1.PNG" align = "bottom">这个算法对图像里的直线进行预测然</p>
<p>后存储颜色差值，这使得PNG经常能获得比原始图像甚至比GIF更大的压缩率。但也有一些软件不能适合的预测而造</p>
<p>成过分臃肿的PNG文件。</p>
<p></p>
<p></p>
<p>PNG使用了从LZ77派生的一个非专利无失真压缩算法（名为deflation）。<img src="1.PNG" align="middle">这个算法对图像里的直线进行预测然</p>
<p>后存储颜色差值，这使得PNG经常能获得比原始图像甚至比GIF更大的压缩率。但也有一些软件不能适合的预测而造</p>
<p>成过分臃肿的PNG文件。</p>
<img src="1.PNG" align="left">
<p>PNG使用了从LZ77派生的一个非专利无失真压缩算法（名为deflation）。这个算法对图像里的直线进行预测然</p>
<p>后存储颜色差值，这使得PNG经常能获得比原始图像甚至比GIF更大的压缩率。但也有一些软件不能适合的预测而造</p>
<p>成过分臃肿的PNG文件。</p>

2.图像滚动

图像画廊

img{width:100px;height:100px}

图像画廊

6.利用表格技术制作你的本学期的课程表；

7.

8.

9.

10. 课程表

11.

12.

13.

14.

15.

16.

17.

18.

19.

21.

22.

23.

24.

25.

26.

27.

28.

29.

30.

31.

32.

33.

34.

35.

36.

37.

38.

39.

40.

41.

42.

43.

44.

45.

46.

47.

48.

49.

50.

51.

52.

53.

54.

55.

56.

57.

58.

59.

60.

61.

62.

63.

64. 2017软件工程课程表

20.

节次	星期一	星期二	星期三	星期四	星期五
第一二节	java	c++	c	c#	数据结构
第三四节	java	c++	c	c#	数据结构
第五六节	java	c++	c	c#	数据结构
第七八节	java	c++	c	c#	数据结构

65.

7．第12章（第252页）实验12；

框架集的应用

浮动框架应用

a{width:300px;margin:0 10px;}

h3{font-size:28px;color:#0000ff;text-align:center;}

div{margin:0 auto;text-align:center;}

浮动框架中打开新页面

在左边浮动框架中打开百度

在右边浮动框架中打开腾讯
9634

8.第13章（第275页）实验13。

登录界面

fieldset{width:300px;height:300px;border:1px;padding-left:30px}

登录页面

姓名:

密码:

类型 管理员

普通用户

记住密码

自动登录

<input name="" type="submit" value="提交">
<input name="" type="reset" value="重置">
</fieldset>

应聘界面

希望工作地点:

北京

南京

东京

月薪要求:

要求提供过渡住房

清选择应聘行业:

计算机软件

计算机硬件

计算机服务

通信/电信/网络设备

互联网/电子商务

网络游戏

电子技术/半导体/集成电路

仪器仪表/工业自动化

本次实验我对书上的web设计有了很深的了解，经过我对是习题的书写，我对格式化文本与段落、列表、超链接、图像与媒体文件、CSS基础、DIV、CSS样式属性、表格、框架、表单有个更深入的了解。