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

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

news 文章来源：https://blog.csdn.net/m0_74865737/article/details/134885988 2025/4/5 14:38:38

写在前面

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

李宏毅bert记录

一、自监督学习&#xff08;Self-supervised Learning&#xff09; 在监督学习中&#xff0c;模型的输入为x&#xff0c;若期望输出是y&#xff0c;则在训练的时候需要给模型的期望输出y以判断其误差——有输入和输出标签才能训练监督学习的模型。 自监督学习在没有标注的训练…...

编程日记 2023/12/11 11:39:17

.Net6.0 Microsoft.AspNetCore.Http.Abstractions 2.20 已弃用

您想要升级 Microsoft.AspNetCore.Http.Abstractions 包&#xff0c;您需要注意以下几点&#xff1a; Microsoft.AspNetCore.Http.Abstractions 包在 ASP.NET Core 2.2 版本后已经被标记为过时&#xff0c;因为它已经被包含在 Microsoft.AspNetCore.App 框架引用中12。因此&am…...

编程日记 2023/12/11 11:38:16

c2-C语言--指针

1.用一级指针遍历一维数组 结论 buf[i]<>*(buf i) <> *(p i)<> p[i] #include <stdio.h>int main(){int buf[5] {10,20 ,30 ,40,50}; //buf[0] --- int // buf --&buf[0] ----int *int *p buf;//&buf[0] --- &*(buf0)printf(&quo…...

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

kafka入门(四)：消费者

消费者 (Consumer ) 消费者 订阅 Kafka 中的主题 (Topic) &#xff0c;并 拉取消息。 消费者群组&#xff08; Consumer Group&#xff09; 每一个消费者都有一个对应的 消费者群组。 一个群组里的消费者订阅的是同一个主题&#xff0c;每个消费者接收主题的一部分分区的消息…...

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

DFS、BFS求解leetcode图像渲染问题（Java）

目录 leetcode733题.图像渲染 DFS BFS leetcode733题.图像渲染 733. 图像渲染 - 力扣&#xff08;LeetCode&#xff09; 有一幅以 m x n 的二维整数数组表示的图画 image &#xff0c;其中 image[i][j] 表示该图画的像素值大小。 你也被给予三个整数 sr , sc 和 newColor …...

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

0基础学习云计算难吗？

很多人经常会问云计算是什么&#xff1f;云计算能干什么&#xff1f;学习云计算能做什么工作&#xff1f;其实我们有很多人并不知道云计算是什么&#xff0c;小知今天来给大家讲讲学习云计算能做什么。 中国的云计算行业目前正处于快速发展阶段&#xff0c;随着互联网和数字化…...

编程日记 2023/12/11 11:33:11

【RabbitMQ高级功能详解以及常用插件实战】

文章目录 队列1 、Classic经典队列2、Quorum仲裁队列3、Stream流式队列4、如何使用不同类型的队列 二、死信队列 队列 classic经典队列&#xff0c;Quorum仲裁队列&#xff0c;Stream流式队列 1 、Classic经典队列 这是RabbitMQ最为经典的队列类型。在单机环境中&#xff0c…...

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

开源的数据流技术，该选择Redpanda还是Apache Kafka？

本文将比较Apache Kafka和Redpanda两种开源的数据流技术&#xff0c;在云原生实时处理能力上的不同&#xff0c;以及如何在项目中做出选择。 目前&#xff0c;Apache Kafka不但成为了数据流处理领域事实上的标准&#xff0c;而且带动了同类产品的出现。Redpanda就是其中之一…...

编程日记 2023/12/11 11:27:06

720度vr虚拟家居展厅提升客户的参观兴致

VR虚拟展厅线上3D交互展示的优势有以下几点&#xff1a; 打破了场馆的展示限制&#xff0c;可展示危险性制品、珍贵稀有物品、超大型设备等&#xff0c;同时提供了更大的展示空间和更丰富的展示内容。 可提供企业真实环境的实时VR全景参观&#xff0c;提升潜在客户信任度。 提供…...

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

mysql中的DQL查询

表格为&#xff1a; DQL 基础查询 语法&#xff1a;select 查询列表 from 表名&#xff1a;&#xff08;查询的结果是一个虚拟表格&#xff09; -- 查询指定的列 SELECT NAME,birthday,phone FROM student -- 查询所有的列 * 所有的列&#xff0c; 查询结果是虚拟的表格&am…...

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