首页 前端知识 成都工业学院Web技术基础(WEB)实验一:HTML5排版标签使用

成都工业学院Web技术基础(WEB)实验一:HTML5排版标签使用

2024-02-27 11:02:41 前端知识 前端哥 919 999 我要收藏

写在前面

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

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

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

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

运行环境

window11家庭版

WebStorm 2023.2.2

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

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

 

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

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

2)通过<h3>标签创建标题。

3)通过<hr>标签绘制横线。

4)通过<p>标签完成每行文字的输入。

5)通过<sub>创建下标,通过<sup>创建上标。

6)特殊字符:空格为&nbsp;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h3>欢迎来到我的主页</h3>
    <hr>
    <p>我是计算机工程学院2022级学生</p>
    <p>我的学号是220600xxxxx</p>
    <p>姓名:xxx</p>
    <p>
        我的特长是数学:5<sup>2</sup>+4<sup>2</sup>=41
    </p>
</body>
</html>

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

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

2)通过<hn>标签创建列表的标题。

3)通过<ul>标记实现无序列表的创建。 

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

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

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

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

图1-2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <img src="images/headerimg.png" alt="Logo">
    <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">目录</a></li>
        <li><a href="#">关于我们</a></li>
        <li><a href="#">联系我们</a></li>
    </ul>
    <h2>地球日</h2>
    <img src="images/greenery.png" alt="地球日图像">
    <p>介绍地球日文字的内容</p>
    <h4>目录</h4>
    <ul>
        <li><a href="#">活动影响</a></li>
        <li><a href="#">创始人</a></li>
        <li><a href="#">历年主题</a></li>
        <li><a href="#">历年国内活动</a></li>
    </ul>
    <h4>做什么</h4>
    <ul>
        <li><a href="#">倡导低碳生活</a></li>
        <li><a href="#">从身边的小事做起</a></li>
        <li><a href="#">从节约资源做起</a></li>
        <li><a href="#">科学发展</a></li>
        <li><a href="#">公众参与</a></li>
        <li><a href="#">防治有毒化学品污染</a></li>
    </ul>
    <p>@2018,我们的地球日</p>
</body>
</html>

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文件中采用<a>标记创建链接。

3)在ex3-1b.html文件中采用<p>标记和<br/>,<hn>标记创建文档内容。

4)链接定位到锚点的语法为<a href=”#锚点名称”></a>。

Experiment1_3_1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <h1>红楼梦</h1>
    <p>红楼梦介绍</p>
    <ul>
        <li><a href="Experiment1_3_2.html#first">第一回:xxx</a></li>
        <li><a href="Experiment1_3_2.html#second">第二回:xxx</a></li>
        <li><a href="Experiment1_3_2.html#third">第三回:xxx</a></li>
    </ul>
    <details>
        <summary>更多章节</summary>
        <li><a href="#">第四回:xxx</a></li>
        <li><a href="#">第五回:xxx</a></li>
        <li><a href="#">第六回:xxx</a></li>
    </details>
</body>
</html>

Experiment1_3_2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <a name="first">
        <h2>第一回</h2>
        <p>第一回内容</p>
    </a>
    <a name="second">
        <h2>第二回</h2>
        <p>第二回内容</p>
    </a>
    <a name="third">
        <h2>第三回</h2>
        <p>第三回内容</p>
    </a>
</body>
</html>

点击第一回链接前

点击第一回链接后

转载请注明出处或者链接地址:https://www.qianduange.cn//article/2812.html
标签
评论
发布的文章

前端大屏适配几种方案

2024-01-29 13:01:44

JQ效果—展开和收起

2024-03-13 00:03:45

JQuery事件的基本使用

2024-03-13 00:03:39

「jQuery系列」jQuery 事件

2024-03-13 00:03:36

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!