写在前面

1、基于2022级计算机大类实验指导书

2、代码仅提供参考，前端变化比较大，按照要求，只能做到像，不能做到一模一样

3、图片和文字仅为示例，需要自行替换

4、如果代码不满足你的要求，请寻求其他的途径

运行环境

window11家庭版

WebStorm 2023.2.2

实验要求、源代码和运行结果

1、编写代码实现图中1-1所示的页面效果。

图1-1 实验内容效果示意图

1）新建html文档ex1-1.html。

2）通过

标签创建标题。

3）通过

---

标签绘制横线。

4）通过

标签完成每行文字的输入。

5）通过_{创建下标，通过^{创建上标。}}

6）特殊字符：空格为

欢迎来到我的主页
我是计算机工程学院2022级学生
我的学号是220600xxxxx
姓名：xxx
我的特长是数学：52+42=41

2、采用HBuilder编写代码，实现1-2所示的页面效果

1）新建html文档ex1-2.html。

2）通过标签创建列表的标题。

3）通过

标记实现无序列表的创建。

4）页头区域添加 logo图像，图像路径为images/headerimg.ing。

5）导航区4个列表项设为超链接，其中“首页”超链接地址为空链接#,“目录”超链接地址为空链接#，“关于我们”超链接地址为空链接#,“联系我们”超链接地址为空链接#。

6）内容区主体部分，在介绍地球日文字的后面添加图像,图像路径为images/greenery.png。

7）内容区边栏一“目录”的列表项设为链接到页面开始位置。内容区边栏二“做什么”的列表项设为链接，连接到当前位置。完成后页面显示效果如图1-2所示。



图1-2

首页
目录
关于我们
联系我们
地球日
介绍地球日文字的内容
目录
活动影响
创始人
历年主题
历年国内活动
做什么
倡导低碳生活
从身边的小事做起
从节约资源做起
科学发展
公众参与
防治有毒化学品污染
@2018,我们的地球日



3、采用HBuilder编写代码，实现图1-3所示的锚点定位，要求：

① 实例包括两个页面，ex1-3a.html和ex1-3b.html。

② 在ex3-1a.html文件中有章节标题链接。

③ 在ex3-1b.html文件中有三个小说章节内容，且每个章节标题都是H2标题标记。

④ 当点击ex3-1a.html文件中的章节标题链接时，自动定位到ex3-1b.html中对应的章节内容所在的锚点位置。

图1-3锚点定位示意图

1）分别创建ex3-1a.html和ex3-1b.html两个文档文件。

2）在ex3-1a.html文件中采用标记创建链接。

3）在ex3-1b.html文件中采用

标记和
,标记创建文档内容。

4）链接定位到锚点的语法为。

Experiment1_3_1.html

红楼梦
红楼梦介绍
第一回：xxx
第二回：xxx
第三回：xxx
更多章节
第四回：xxx
第五回：xxx
第六回：xxx

Experiment1_3_2.html

第一回
第一回内容
第二回
第二回内容
第三回
第三回内容

点击第一回链接前



点击第一回链接后