实验报告html标记,web前端开发技术实验报告 实验一-

长 春 大 学

20 15 — 2016学年第 二 学期

Web前端开发技术 课程

实 验 报 告

学 院： 计算机科学技术 专 业： 软件工程 班 级： 软件14402 学 号： 041440211 姓 名： 武嘉琪

任课教师： 车 娜

实验一 构建HTML页面

一、实验目的

熟悉HTML制作网页的基础知识，并能熟练运用学过的内容制作、设计图文 混排的网页。

二、内容及要求

运用学过的代码设计一个图文混排网页，满足如下要求： 1.既有图像又有文字，并且呈左右排列。

2.文字部分由标题和段落文本组成，它们的字体和字号不同。

3.在段落文本中，段落前有2字符留白，一些文字以特殊的颜色加以突出显示。

三、实验原理

文本：font可以跟color、size、face等属性根据不同的值对文本进行修

改；

图片：img标记可以跟border、height、width、align、vspace、hspace

等属性根据不同的值对滚动字进行设置； 其他相关内容：各级标签、标题设置、背景图等。

四、实验步骤

1、确立自己的网页主题

选择传智博客设计学院作为本次网页设计的主题。

2、网页基本设计

(1) 应用h2标记设计标题样式。

(2) 应用font标记及其face、size、color等属性设计文本字体样式。 (3) 应用p标记设计文本段落格式。

(4) 应用img标记及其src、alt、align、hspace、height、width 等属性设计图片排版样式。

五、实验代码及网页效果图

1．搭建基本结构

使用

标记插入图像。使用

标记和

标记分别设置标题和段 落文本。并对< img />标记应用align属性和hspace属性实现图像居左文 字居右、且图像和文字之间有一定距离的排列效果。

关键代码如下：

2

传智播客设计学院

传智播客设计学院 效果如图1-1所示。

图1-1 效果图

2.设置文本样式和首行缩进效果

使用文本样式标记控制标题和段落文本的样式。并通过color、size属性设置颜色和粗细。最后使用首行缩进两个字符实现留白效果。 关键代码如下：