当前位置：首页 > news >正文

成都工业学院Web技术基础（WEB）实验一：HTML5排版标签使用

news 2026/4/2 8:04:10

写在前面

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）特殊字符：空格为 

<!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>

点击第一回链接前

点击第一回链接后

成都工业学院Web技术基础（WEB）实验一：HTML5排版标签使用

写在前面 1、基于2022级计算机大类实验指导书 2、代码仅提供参考，前端变化比较大，按照要求，只能做到像，不能做到一模一样 3、图片和文字仅为示例，需要自行替换 4、如果代码不满足你的要求，请寻求其他的…...

编程日记 2023/12/11 12:08:41

OpenAI承认ChatGPT变懒惰，正在修复该问题

OpenAI旗下的官方ChatGPT账号在社交平台表示，已经收到了大量用户关于GPT-4变懒惰的反馈。这是因为自11月11日以来，OpenAI就没有更新过该模型。当然这不是故意的，大模型的行为是不可预测的，正在研究修复该问题。外界猜测&#x…...

编程日记 2023/12/11 12:04:37

归并排序与自然归并排序

归并排序归并排序(merge - sort)是建立在归并操作上的一种有效的排序算法,该算法是采用分治法的一个非常典型的应用.将已有的子序列合并,得到完全有序的序列;即先使每个子序列有序,再使子序列段间有序.若将两个有序表合并成一个有序表,成为二路归并. 核心步骤讲解归并排序的…...

编程日记 2023/12/11 12:03:37

22款奔驰GLS450升级HUD抬头显示告别低头

随着科技飞速地发展，从汽车领域就可以看出，尤其是汽车的抬头显示器，一经推出就吸引了很多的车主。星骏汇小许Xjh15863 升级HUD抬头显示，HUD与汽车系统进行完整的数据信息连接，整合成大数据，然后将一些重要信…...

编程日记 2023/12/11 12:01:35

报错：Property delegate must have a ‘getValue(SecurityCheckView, KProperty*>)’ method. None of the following functions are suitable 解决方案：就是在根目录的build.gradle中改变 kotlin的插件版本 classpath “org.jetbrains.kotlin:kotli…...

编程日记 2023/12/11 12:00:34

HarmonyOS4.0从零开始的开发教程11给您的应用添加弹窗

HarmonyOS（十）给您的应用添加弹窗概述在我们日常使用应用的时候，可能会进行一些敏感的操作，比如删除联系人，这时候我们给应用添加弹窗来提示用户是否需要执行该操作，如下图所示： 弹窗是一种…...

编程日记 2023/12/11 11:57:32

js 同步任务和异步任务

同步任务和异步任务同步任务同步任务就是没有被引擎挂起、在主线程上排队执行的任务。只有前一个任务执行完，才会执行下一个任务。同步任务具有堵塞效果。异步任务异步任务是被引擎放在一边，不进入主线程进入任务队列的任务。只有引擎认为某个异步任…...

编程日记 2023/12/11 11:55:31

【小白专用】Sql Server 连接Mysql 更新23.12.09

目标已知mysql连接参数（地址和用户），期望通过Microsoft Sql Server Management Studio （以下简称MSSSMS）连接Mysql，在MSSSMS中直接查询或修改Mysql中的数据。一般是选最新的版本下载。选64位还是32位&a…...

编程日记 2023/12/11 11:54:30

DIP——边缘提取与分割

1.使用canny算法进行边缘提取本实验比较简单，基本思路是对原图像进行一个高斯模糊处理，用于去噪，之后转换为灰度图，直接调用cv库中的canny记性边缘提取。若想直接得到彩色边缘，则通过按位与操作，将原始彩色…...

编程日记 2023/12/11 11:53:29

低代码开发：现实挑战与发展前景

低代码开发是近年来迅速崛起的软件开发方法，让编写应用程序变得更快、更简单。有人说它是美味的膳食，让开发过程高效而满足，但也有人质疑它是垃圾食品，缺乏定制性与深度。一、什么是低代码低代码开发是一种基于图形用户界面&…...

编程日记 2023/12/11 11:52:28

大数据技术7：基于StarRocks统一OALP实时数仓

前言： 大家对StarRocks 的了解可能不及 ClickHouse或者是远不及 ClickHouse 。但是大家可能听说过 Doris ，而 StarRocks 实际上原名叫做 Doris DB ，他相当于是一个加强版的也就是一个 Doris ,也就是说 Doris 所有的功能 StarRocks 都是有的&a…...

编程日记 2023/12/11 11:50:26

C# WPF上位机开发（网络程序界面开发）

编程日记 2023/12/11 11:49:25

卡码网语言基础课 | 20. 排队取奶茶

目录一、队列的基本认识二、队列的操作 2.1 引入头文件 2.2 创建队列 2.3 队列的常见操作三、解题通过本次练习，将会学习到以下C知识点： 队列的基本概念（队头、队尾）和特点（先入先出）入队、出队…...

编程日记 2023/12/11 11:48:25

Angular 进阶之四：SSR 应用场景与局限

应用场景内容丰富，复杂交互的动态网页，对首屏加载有要求的项目，对 seo 有要求的项目（因为服务端第一次渲染的时候，已经把关键字和标题渲染到响应的 html 中了，爬虫能够抓取到此静态内容，因此更…...

编程日记 2023/12/11 11:47:24

vue2 cron表达式组件

vue2 cron表达式组件 1. 先上图 2. 代码目录 3. 直接上代码 （组件代码太多，直接上压缩包，解压后直接用，压缩包再博客顶部） 4. 使用注：示例代码中使用了element-ui // HomeView.vue<template><…...

编程日记 2023/12/11 11:46:23

git-vscode

git-vscode ctrlshiftp 创建分支 create branch 直接切到新的分支了切换分支直接点左下角自己选择 vscode中配置仓库 https://blog.csdn.net/zora_55/article/details/129709251 推送tag tag作用就是在 Git 中，标记存储库历史记录中特定提交的一种方式。t…...

编程日记 2023/12/11 11:45:22

【C++11(三)】智能指针详解--RAII思想循环引用问题

💓博主CSDN主页:杭电码农-NEO💓 ⏩专栏分类:C从入门到精通⏪ 🚚代码仓库:NEO的学习日记🚚 🌹关注我🫵带你学习C 🔝🔝 C11 1. 前言2. 为什么要有智能指针?3. RAII思想…...

编程日记 2023/12/11 11:44:21

佳明(Garmin) fēnix 7X 增加小睡检测功能

文章目录 （一）零星小睡（二）小睡检测（三）吐槽佳明（3.1）心率检测（3.2）光线感应器（3.3）手表重量（3.4）手表续航 &a…...

编程日记 2023/12/11 11:43:20

二、如何保证架构的质量、架构前期准备、技术填补与崩溃预防、系统重构

1、如何保证架构的质量 -- 稳定性和健壮性 2、正确的选择是良好的开端 -- 架构前期准备 ① 架构师分类：系统架构师、应用架构师、业务架构师 3、技术填补与崩溃预防 4、系统重构...

编程日记 2023/12/11 11:42:20

14、SQL注入——HTTP文件头注入

文章目录一、HTTP Header概述1.1 HTTP工作原理1.2 HTTP报文类型1.3 较重要的HTTP Header内容二、HTTP Header注入2.1 HTTP Header注入的前提条件2.2 常见的HTTP Header注入类型一、HTTP Header概述 1.1 HTTP工作原理 1.2 HTTP报文类型 （1）请求报文 …...

编程日记 2023/12/11 11:41:19

FlowState Lab 日志分析与性能调优实战

FlowState Lab 日志分析与性能调优实战 1. 为什么需要关注模型服务性能当你把FlowState Lab模型部署上线后，可能会遇到这样的情况：请求量一大，响应就开始变慢，甚至出现超时。这时候就需要关注服务的性能表现。性能调优不是玄学…...

编程新知 2026/4/2 7:31:14

2026年3月Github开源项目精选Top10

📅统计周期：2026-02-28 ~ 2026-03-29 🌋数据来源：www.ffgithub.com 📚数据更新：2026-03-29 Top1. 666ghj/MiroFish 🔺 总星标数量：43670⭐🔺 周增长数量：63…...

编程新知 2026/4/2 7:21:07

opencode令牌分析插件使用：API调用监控部署教程

opencode令牌分析插件使用：API调用监控部署教程 1. 引言：为什么需要API调用监控？ 当你使用AI编程助手时，是否曾经遇到过这些问题：不知道模型调用了多少次API、不清楚每次调用消耗了多少token、无法监控API调用的性能…...

编程新知 2026/4/2 6:38:39

Mojo结构体直传Python内存视图：零序列化跨语言数据流实现（附GDB内存布局验证截图）

第一章：Mojo结构体直传Python内存视图：零序列化跨语言数据流实现（附GDB内存布局验证截图）Mojo 通过其底层 value 和 parameter 机制，允许结构体在不触发拷贝或序列化的情况下，直接暴露为 Python 的 memoryv…...

编程新知 2026/4/2 5:41:50

NASM调试指南：如何高效定位和修复汇编错误

NASM调试指南：如何高效定位和修复汇编错误【免费下载链接】nasm A cross-platform x86 assembler with an Intel-like syntax 项目地址: https://gitcode.com/gh_mirrors/na/nasm NASM（Netwide Assembler）作为一款跨平台的x86汇编器&…...

编程新知 2026/4/2 5:05:44