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

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

news 2026/2/6 1:40:36

写在前面

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>

点击第一回链接前

点击第一回链接后

相关文章：

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

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

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

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

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

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

归并排序与自然归并排序

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

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

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

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

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

关于kotlin的属性委托，报错的，实际原因剖析

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

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

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

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

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

js 同步任务和异步任务

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

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

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

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

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

DIP——边缘提取与分割

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

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

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

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

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

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

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

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

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

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 之前我们讨论过&#xff0c;设备之间通讯的方式很多。但是&#xff0c;不知道大家有没有注意&#xff0c;前面谈到的这些通讯方式都需要上位机电脑…...

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

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

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

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

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

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

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

vue2 cron表达式组件

vue2 cron表达式组件 1. 先上图 2. 代码目录 3. 直接上代码 &#xff08;组件代码太多&#xff0c;直接上压缩包&#xff0c;解压后直接用&#xff0c;压缩包再博客顶部&#xff09; 4. 使用注&#xff1a;示例代码中使用了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 中&#xff0c;标记存储库历史记录中特定提交的一种方式。t…...

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

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

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

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

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

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

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

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

1、如何保证架构的质量 -- 稳定性和健壮性 2、正确的选择是良好的开端 -- 架构前期准备 ① 架构师分类&#xff1a;系统架构师、应用架构师、业务架构师 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报文类型 &#xff08;1&#xff09;请求报文 …...

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

简易版抽奖活动的设计技术方案

1.前言 本技术方案旨在设计一套完整且可靠的抽奖活动逻辑，确保抽奖活动能够公平、公正、公开地进行，同时满足高并发访问、数据安全存储与高效处理等需求，为用户提供流畅的抽奖体验，助力业务顺利开展。本方案将涵盖抽奖活动的整体架构设计、核心流程逻辑、关键功能实现以及…...

编程新知 2026/1/26 20:20:15

深入理解JavaScript设计模式之单例模式

目录 什么是单例模式为什么需要单例模式常见应用场景包括 单例模式实现透明单例模式实现不透明单例模式用代理实现单例模式javaScript中的单例模式使用命名空间使用闭包封装私有变量 惰性单例通用的惰性单例 结语 什么是单例模式 单例模式&#xff08;Singleton Pattern&#…...

编程新知 2026/1/31 17:09:43

BCS 2025｜百度副总裁陈洋：智能体在安全领域的应用实践

6月5日&#xff0c;2025全球数字经济大会数字安全主论坛暨北京网络安全大会在国家会议中心隆重开幕。百度副总裁陈洋受邀出席&#xff0c;并作《智能体在安全领域的应用实践》主题演讲&#xff0c;分享了在智能体在安全领域的突破性实践。他指出&#xff0c;百度通过将安全能力…...

编程新知 2026/2/1 11:33:19

SpringCloudGateway 自定义局部过滤器

场景&#xff1a; 将所有请求转化为同一路径请求&#xff08;方便穿网配置&#xff09;在请求头内标识原来路径&#xff0c;然后在将请求分发给不同服务 AllToOneGatewayFilterFactory import lombok.Getter; import lombok.Setter; import lombok.extern.slf4j.Slf4j; impor…...

编程新知 2026/2/1 4:53:36

python执行测试用例，allure报乱码且未成功生成报告

allure执行测试用例时显示乱码&#xff1a;‘allure’ &#xfffd;&#xfffd;&#xfffd;&#xfffd;&#xfffd;ڲ&#xfffd;&#xfffd;&#xfffd;&#xfffd;ⲿ&#xfffd;&#xfffd;&#xfffd;Ҳ&#xfffd;&#xfffd;&#xfffd;ǿ&#xfffd;&am…...

编程新知 2026/2/3 19:45:13

如何在网页里填写 PDF 表格？

有时候&#xff0c;你可能希望用户能在你的网站上填写 PDF 表单。然而&#xff0c;这件事并不简单&#xff0c;因为 PDF 并不是一种原生的网页格式。虽然浏览器可以显示 PDF 文件&#xff0c;但原生并不支持编辑或填写它们。更糟的是&#xff0c;如果你想收集表单数据&#xff…...

编程新知 2026/1/23 11:38:37

Java线上CPU飙高问题排查全指南

一、引言 在Java应用的线上运行环境中&#xff0c;CPU飙高是一个常见且棘手的性能问题。当系统出现CPU飙高时&#xff0c;通常会导致应用响应缓慢&#xff0c;甚至服务不可用&#xff0c;严重影响用户体验和业务运行。因此&#xff0c;掌握一套科学有效的CPU飙高问题排查方法&…...

编程新知 2025/11/2 5:30:15

Git常用命令完全指南：从入门到精通

Git常用命令完全指南&#xff1a;从入门到精通 一、基础配置命令 1. 用户信息配置 # 设置全局用户名 git config --global user.name "你的名字"# 设置全局邮箱 git config --global user.email "你的邮箱example.com"# 查看所有配置 git config --list…...

编程新知 2025/10/3 0:40:01

windows系统MySQL安装文档

概览&#xff1a;本文讨论了MySQL的安装、使用过程中涉及的解压、配置、初始化、注册服务、启动、修改密码、登录、退出以及卸载等相关内容&#xff0c;为学习者提供全面的操作指导。关键要点包括&#xff1a; 解压 &#xff1a;下载完成后解压压缩包&#xff0c;得到MySQL 8.…...

编程新知 2026/2/5 4:21:19

Xela矩阵三轴触觉传感器的工作原理解析与应用场景

Xela矩阵三轴触觉传感器通过先进技术模拟人类触觉感知&#xff0c;帮助设备实现精确的力测量与位移监测。其核心功能基于磁性三维力测量与空间位移测量&#xff0c;能够捕捉多维触觉信息。该传感器的设计不仅提升了触觉感知的精度&#xff0c;还为机器人、医疗设备和制造业的智…...

编程新知 2026/1/18 23:42:16