实验一 HTML5基本标签实验.docVIP

信息工程学院

实验报告用纸

实验名称:HTML5基本标签实验姓名:刘波实验场地:产教A111同组者：

第页

实验名称：HTML5基本标签实验

1、实验目的

（1）掌握运用HTML5语法

（2）掌握文本控制标记

（3）掌握图像标记以及超链接标记。

2、实验要求

请结合给出的素材，运用HTML5页面元素及属性实现图2-1所示的“心灵

小屋美文”效果。

图2-1“心灵小屋美文”效果展示

3、实验环境

（1）硬件：PC机

（2）软件：XP、WIN11系统，Web浏览器，HBuilder

4、实验操作步骤

1．搭建页面基本结构，代码如4-1图所示

图4-1搭建页面基本结构

2．制作头部信息，保存并运行实践案例代码，效果如4-2图所示。

图4-2制作头部信息效果图

3．制作头部信息，代码如4-3图所示。

图4-3制作头部信息代码

保存并刷新实践案例代码，效果如4-4图所示。

图4-4搭建页面基本结构

4．制作文章内容区域，代码如4-5图所示。

图4-5搭建页面基本结构

保存并刷新实践案例代码，效果如4-6图所示。

图4-6搭建页面基本结构

当点击“显示更多”后效果如4-7图所示。

图4-7搭建页面基本结构

5．制底部信息，效果如4-8图所示。

图4-8搭建页面基本结构

保存并刷新实践案例代码，效