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

HTML基础教程：创建双十一购物狂欢节网页

news 来源：原创 2025/8/21 21:50:49

页面概况：
在这里插入图片描述

在这篇技术博客中，我将详细讲解如何使用HTML基础标签创建一个简单而美观的双十一购物狂欢节主题网页。我们将逐步分析代码结构，了解每个HTML元素的作用，以及如何通过HTML属性控制页面布局和样式。

页面整体结构

首先，让我们看一下网页的基本框架：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>双十一购物狂欢节</title></head><body><!-- 页面内容放在这里 --></body>
</html>

这是一个标准的HTML5文档结构：

<!DOCTYPE html> 声明使用HTML5标准
<html> 标签是所有HTML元素的容器
<head> 包含元数据，如字符集和页面标题
<meta charset=“utf-8”> 指定使用UTF-8字符编码，确保正确显示中文
<title> 设置浏览器标签页显示的标题
<body> 包含所有可见的网页内容

创建标题区域

<h2 align="center">电商的大型活动———<font size="6" color="red">双十一购物狂欢节</font></h2>

这行代码创建了一个二级标题（h2），并使用了以下技术：

align=“center” 属性使标题居中对齐
<font> 标签用于修改文本样式（注意：虽然在此示例中使用，但在现代HTML中，标签已被弃用，应该使用CSS代替）
size=“6” 设置字体大小
color=“red” 将"双十一购物狂欢节"文字设置为红色，突出主题

<img src="img/双11.png" alt="双十一狂欢购物节" align="left" hspace="30"/>

图片是网页视觉呈现的重要元素，这行代码使用标签插入了一张双十一主题图片：

src=“img/双11.png” 指定图片的路径和文件名
alt=“双十一狂欢购物节” 提供图片的替代文本，对网页访问性和SEO很重要
align=“left” 将图片靠左对齐，文字将环绕在图片右侧
hspace=“30” 设置图片的水平外边距为30像素，使文字与图片之间有适当间距

<p><font color="#515151">&nbsp;&nbsp;&nbsp;&nbsp;双十一购物狂欢节，是指每年11月11日的网络促销日，源于淘宝商城（天猫）2009年11月11日举办的网络促销活动，当时参与的商家数量和促销力度有限，但营业额远超预想的效果，于是11月11日成为天猫举办大规模促销活动的固定日期。双十一已成为中国电子商务行业的年度盛事，并且逐渐影响到国际电子商务行业。</font>
</p>

页面的主要内容使用

标签创建段落：

标签定义一个段落
将文本颜色设置为灰色（十六进制颜色代码#515151）
  是不间断空格(non-breaking space)的HTML实体，这里连用四个创建段落首行缩进效果

<p align="right"><font color="green"><strong><em>2025年11月11日</em></strong></font></p>

在内容底部添加日期署名：

align=“right” 将日期靠右对齐
<font color=“green”> 设置文本为绿色
<strong> 标签使文本加粗
<em> 标签使文本倾斜（斜体）
这些标签的嵌套使用展示了HTML元素的组合能力

分隔线

<hr size="3" color="#959698"/>

页面底部添加水平分隔线：

<hr> 标签创建一条水平线
size=“3” 设置线条粗细为3像素
color=“#959698” 设置线条颜色为灰色

HTML属性的使用总结

在这个示例中，我们使用了多种HTML属性来控制页面元素的呈现：

文本对齐属性：

align=“center” - 居中对齐标题
align=“left” - 靠左对齐图片
align=“right” - 靠右对齐日期

颜色控制：

color=“red” - 红色标题
color=“#515151” - 灰色正文
color=“green” - 绿色日期
color=“#959698” - 灰色分隔线

间距和大小：

hspace=“30” - 设置图片水平边距
size=“6” - 设置字体大小
size=“3” - 设置分隔线粗细

文本格式化：

<strong> - 加粗文本
<em> - 斜体文本
  - 空格字符

注意事项

虽然本例展示了HTML的基本用法，但需要注意一些重要点：

现代最佳实践：本例中使用的一些元素和属性（如标签、align属性）在HTML5中已被弃用，现代网页开发应使用CSS控制样式。
响应式设计：示例中的页面布局没有考虑移动设备，现代网页应当采用响应式设计。
语义化HTML：为了更好的可访问性和SEO，应该使用更多语义化标签，如<header>、<article>、<section>等。

结论

通过这个简单的双十一购物狂欢节页面，我们学习了HTML的基础结构和常用标签的应用。虽然这是一个基础示例，但它展示了HTML作为网页"骨架"的重要性。在实际开发中，我们会结合CSS和JavaScript创建更加复杂和交互性强的页面。
希望这篇教程对你学习HTML基础有所帮助。

HTML基础教程：创建双十一购物狂欢节网页

页面概况： 在这篇技术博客中，我将详细讲解如何使用HTML基础标签创建一个简单而美观的双十一购物狂欢节主题网页。我们将逐步分析代码结构，了解每个HTML元素的作用，以及如何通过HTML属性控制页面布局和样式。页面整体结构首先&…...

编程日记 2025/8/21 21:50:49

ES6 新增特性箭头函数

简述： ECMAScript 6（简称ES6）是于2015年6月正式发布的JavaScript语言的标准，正式名为ECMAScript 2015（ES2015）。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语…...

编程日记 2025/8/22 19:23:26

【C++算法】49.分治_归并_计算右侧小于当前元素的个数

文章目录题目链接：题目描述：解法C 算法代码：图解题目链接： 315. 计算右侧小于当前元素的个数题目描述： 解法归并排序（分治） 当前元素的后面，有多少个比我小。（降序&…...

编程日记 2025/8/21 9:19:14

Multi-class N-pair Loss论文理解

一、N-pair loss 对比 Triplet loss 对于N-pair loss来说，当N2时，与triplet loss是很相似的。对anchor-positive pair，都只有一个negative sample。而且，N-pair loss（N2时）为triplet loss的平滑近似Softpl…...

编程日记 2025/8/22 8:34:05

uniapp微信小程序地图marker自定义气泡 customCallout偶尔显示不全解决办法

这个天坑问题，在微信开发工具上是不会显示出来的,只有在真机上才会偶尔出现随机样式偏移/裁剪/宽长偏移，询问社区也只是让你提交代码片段，并无解决办法。一开始我怀疑是地图组件加载出现了问题，于是给地图加了一个v-if"reL…...

编程日记 2025/8/22 14:23:39

蓝桥杯嵌入式总结

1.lcd显示和led引脚冲突在lcd使用到的函数中加入两行代码 uint16_t temp GPIOC->ODR; GPIOC->ODR temp; 2.关于PA15,PB4pwm波输入捕获首先pwm输入捕获中断使用 HAL_TIM_IC_Start_IT(&htim2,TIM_CHANNEL_1); 再在输入捕获中断回调函数中使用 void HAL…...

编程日记 2025/8/21 21:40:05

C#的反射机制

C#反射机制详解什么是反射？ 反射(Reflection)是C#中的一项强大功能，它允许程序在运行时动态获取类型信息、访问和操作对象成员。简单来说，反射使程序可以在不预先知道类型的情况下，查看、使用和修改程序集中的代码。常见反射…...

编程日记 2025/8/22 1:47:11

Java并发编程高频面试题

一、基础概念 1. 并行与并发的区别？ 并行：多个任务在多个CPU核心上同时执行（物理上同时）。并发：多个任务在单CPU核心上交替执行（逻辑上同时）。类比：并行是多个窗口同时服务&#x…...

编程日记 2025/8/22 6:02:41

Invalid bound statement (not found)

前言： 通过实践而发现真理，又通过实践而证实真理和发展真理。从感性认识而能动地发展到理性认识，又从理性认识而能动地指导革命实践，改造主观世界和客观世界。实践、认识、再实践、再认识，这种形式，循环往…...

编程日记 2025/8/21 3:24:10

【Vue-路由】学习笔记

目录 <<回到导览路由1.单页应用和多页面2.路由基本使用2.1.路由的含义2.2.VueRouter插件2.3.配置路由规则和导航2.4.组件目录存放2.5.路由模块封装 3.rounter3.1.router-link实现高亮3.2.自定义匹配类名3.3.声明式导航3.3.1.查询参数传参3.3.2.动态路由传参3.3.3.总结 3.…...

编程日记 2025/8/21 19:24:56

前端服务配置详解：从入门到实战

前端服务配置详解：从入门到实战一、环境配置文件（.env） 1.1 基础结构在项目根目录创建 .env 文件： # 开发环境 VUE_APP_API_BASE_URL http://localhost:3000/api VUE_APP_VERSION 1.0.0# 生产环境（.env.produc…...

编程日记 2025/8/22 10:03:28

Java安全管理器 - SecurityManager

什么是Java安全管理器？ Java安全管理器是Java提供的保护JVM和程序安全的机制，它能限制用户的代码对文件、内存、资源、网络的操作和访问，防止恶意代码入侵程序。常用来控制用户提交的代码对各种资源的访问权限，防止用户恶意提交代…...

编程日记 2025/8/19 13:26:44

Arrays操作工具 Lambda表达式集合迭代器数据结构泛型 set集合 list集合

Arrays操作工具自己定义的排序规则简单理解如果是：o1 - o2 升序排列 o2 - o1 降序排列 Lambda表达式函数式编程函数式编程（Functional programming）是一种思想特点。面向对象：先去找对象，让对象做事情。。函数式…...

编程日记 2025/8/19 1:39:01

ORM、Mybatis和Hibernate、Mybatis使用教程、parameterType、resultType、级联查询案例、resultMap映射

DAY21.1 Java核心基础 ORM Object Relationship Mapping 对象关系映射面向对象的程序到—关系型数据库的映射比如java – MySQL的映射 ORM框架就是实现这个映射的框架 Hibernate、Mybatis、MybatisPlus、Spring Data JPA、Spring JDBC Spring Data JPA的底层就是Hiber…...

编程日记 2025/8/22 12:04:31

《Java八股文の文艺复兴》第十一篇：量子永生架构——对象池的混沌边缘（终极试炼·完全体）

Tags: - Java高并发 - 量子架构 - 混沌工程 - 赛博修真 - 三体防御目录： 卷首语：蝴蝶振翅引发的量子海啸第一章：混沌初开——对象池的量子涅槃（深度扩展） 第二章：混沌计算——对象复活的降维打击&…...

编程日记 2025/8/21 10:36:30

蓝桥杯备赛---真题训练之15届蓝桥杯找回连接之旅

题目介绍在网络世界中，突然间失去了所有的连接。作为勇敢的冒险者，你将踏上一段惊险刺激的旅程，穿越充满谜题和挑战的网络景观，与神秘的网络幽灵对抗，解开断网之谜，找回失去的连接，带领人们重…...

编程日记 2025/8/22 4:55:57

PowerApps MDA-模版-文档模版无法下载和上传Word模版

Power Apps的高级设置-模版中，文档模版目前只能看到新建和上传Excel模版，看不到Word模版这是一个已知bug, 什么时候能修复不好说，解决办法也很简单，先上传一个Excel模版，随便任何一个实体就行，为的是视图列…...

编程日记 2025/8/22 8:15:27

全国大学生数学建模竞赛赛题深度分析报告（2010-2024）

全国大学生数学建模竞赛赛题深度分析报告（2010-2024） 全国大学生数学建模竞赛(CUMCM)是中国最具影响力的大学生科技竞赛之一，本报告将对2010-2024年间的赛题进行全面统计分析，包括题目类型、领域分布、模型方法等多个维度&#x…...

编程日记 2025/8/22 19:17:02

职坐标解析自动驾驶技术发展新趋势

内容概要作为智能交通革命的核心驱动力，自动驾驶技术正以惊人的速度重塑出行生态。2023年，行业在多传感器融合与AI算法优化两大领域实现突破性进展：激光雷达、摄像头与毫米波雷达的协同精度提升至厘米级，而深度学习模型的实时决…...

编程日记 2025/8/21 12:53:38

快速入手-前后端分离Python权限系统基于Django5+DRF+Vue3.2+Element Plus+Jwt

引用：打造前后端分离Python权限系统基于Django5DRFVue3.2Element PlusJwt 视频教程 （火爆连载更新中..）_哔哩哔哩_bibili 说明：1、结合个人DRF基础和该视频去根据自己的项目进行开发。 2、引用该视频中作者的思路去升华自身的项…...

编程日记 2025/8/22 14:16:34

HTTP 协议详解

HTTP 协议 HTTP（HyperText Transfer Protocol，超文本传输协议）是互联网上应用最广泛的协议之一，用于在客户端（如浏览器）和服务器之间传输超文本（如网页）。 HTTP 是万维网&#xff…...

编程日记 2025/8/19 1:42:23

巧记英语四级单词 Unit1-4【晓艳老师版】

tain—take拿着、sus 下面，只有sur表示上面、ob表示方向、de往下，分开 retain v.保持 re-重复，tain—take拿着，重复的拿着maintain v. 维持，维修，保养 main主要的，主要的东西都拿着的那个人维…...

编程日记 2025/8/22 6:34:33

Transformers without Normalization论文翻译

论文信息： 作者：Jiachen Zhu, Xinlei Chen, Kaiming He, Yann LeCun, Zhuang Liu 论文地址：arxiv.org/pdf/2503.10622 代码仓库：jiachenzhu/DyT: Code release for DynamicTanh (DyT) 摘要归一化层在现代神经网络中无处不在…...

编程日记 2025/8/22 1:29:18

Ollama

目录定义与核心功能应用场景Ollama与Llama的关系安装与使用 Ollama是一个开源的本地大语言模型（LLM）运行框架，专为在本地机器上便捷部署和运行大型语言模型而设计。以下是关于Ollama的全面介绍： 定义与核心功能多种预训练语言模…...

编程日记 2025/8/22 12:09:21

社交app圈子模块0到1实现

一、逻辑分析用户相关用户需要能够创建圈子，这涉及到用户身份验证，确保只有注册用户可以进行创建操作。每个圈子有创建者，创建者对圈子有一定的管理权限，如设置圈子规则、邀请成员等。圈子信息圈子需要有名称、简介、头像等基…...

编程日记 2025/8/21 13:29:52

OpenCV--图像边缘检测

在计算机视觉和图像处理领域，边缘检测是极为关键的技术。边缘作为图像中像素值发生急剧变化的区域，承载了图像的重要结构信息，在物体识别、图像分割、目标跟踪等众多应用场景中发挥着核心作用。OpenCV 作为强大的计算机视觉库，提供…...

编程日记 2025/8/20 20:18:25

批量压缩 jpg/png 等格式照片|批量调整图片的宽高尺寸

图片格式种类非常的多，并且不同的图片由于像素、尺寸不一样，可能占用的空间也会不一样。文件太大会占用较多的磁盘空间，传输及上传系统都非常不方便，可能会收到限制，因此我们经常会碰到需要对图片进行压缩的需求。如何…...

编程日记 2025/8/21 6:26:21

[Linux系统编程]多线程

多线程 1. 线程1.1 线程的概念1.2 进程与线程对比1.3 轻量级进程 2. Linux线程控制2.1 POSIX 线程（pthread）2.2 线程ID、pthread_t、和进程地址空间的关系2.2.1 pthread_self2.2.2 pthread_create2.2.3 pthread_join2.2.4 线程终止的三种方式2.2.5 pthre…...

编程日记 2025/8/22 5:10:32

进程状态(运行阻塞僵尸)及其场景分析

【Linux学习笔记】Linux基本指令及其分析 🔥个人主页：大白的编程日记 🔥专栏：Linux学习笔记前言哈喽，各位小伙伴大家好!上期我们讲了进程PCB 今天我们讲的是进程状态(运行阻塞僵尸)及其场景分析。话不多说&#…...

编程日记 2025/8/21 23:21:07

程序化广告行业（67/89）：DMP系统标签制作与人群拓展深度解析

程序化广告行业（67/89）：DMP系统标签制作与人群拓展深度解析大家好！在之前的分享中，我们对程序化广告的多个关键环节进行了探讨。今天，咱们继续深入了解程序化广告中的DMP系统，聚焦于标签制作和…...

编程日记 2025/8/21 23:50:26

【QT】QPixmap QImage QBitmap QPicture

文章目录 **1. QPixmap****特点****典型应用场景****示例** **2. QImage****特点****典型应用场景****示例** **3. QBitmap****特点****示例** **4. 三者的主要区别****5. 如何选择？****使用 QPixmap 的情况****使用 QImage 的情况****使用 QBitmap 的情况** **6. 相…...

编程日记 2025/8/22 10:04:56

如何开通google Free Tier长期免费云服务器(1C/1G)

Google宣布的一项政策，为标准层级的网络提供每地域200G的免费流量。两项政策结合，于是便可以得到一台1核心、1G内存、30G磁盘、200G流量的小云服务器，可玩性大大提高。这篇文章就分享一下如何正确开机，避免产生额外的费用。免费…...

编程日记 2025/8/22 2:23:33

Kaggle房价预测

实战 Kaggle 比赛：预测房价这里李沐老师讲的比较的细致，我根据提供的代码汇总了一下： import hashlib import os import tarfile import zipfile import requests import numpy as np import pandas as pd import torch from matplotlib i…...

编程日记 2025/8/20 18:37:25

4.7学习总结 java集合进阶

集合进阶泛型 //没有泛型的时候，集合如何存储数据 //结论: //如果我们没有给集合指定类型，默认认为所有的数据类型都是object类型 //此时可以往集合添加任意的数据类型。 //带来一个坏处:我们在获取数据的时候，无法使用他的特有行为。 //此…...

编程日记 2025/8/21 2:41:16

设计模式 - 代理模式Proxy

设计思想： 举个通俗的例子，你想找某局长帮你做一件事情，但局长官位显赫，你又不能轻易见着，你就想到了找他的秘书，通过她传话给局长，这样你就等于请他的秘书帮你办成了那件事。秘书为什么就可以…...

编程日记 2025/8/21 16:52:41

计算机网络体系结构（一）

1.计算机网络概述 1.1计算机网络的概念计算机网络是由相互连接的计算机及其周边设备构成的系统，这些计算机和设备通过各种通信介质实现数据和资源的共享。计算机网络的主要目的是为了增强信息传递的效率、便利性和可靠性。以下是一些计算机网络的关键概念&#xf…...

编程日记 2025/8/21 22:01:44

数据结构与算法-数学-基础数学2（扩展欧几里得算法，组合数问题）

六：扩展欧几里得算法同余： 若 a≡b(modm)，则 m 整除 a−b，即 abkm（k 为整数）。扩展欧几里得算法扩展欧几里得算法可用于求解 axbygcd(a,b) 的一组整数解。 #include <iostream> using namesp…...

编程日记 2025/8/21 2:41:23

【力扣hot100题】（072）柱状图中的最大矩阵

这绝对是我做过印象最深的算法题之一。（还有是那道盛水最多的贪心题） 当初不知道想了多少个日日夜夜，所幸这道题已经深深的烙印在了我的脑海里。现在看来也没那么可怕（）不过初见确实非常难想到单调栈。方法如下&a…...

编程日记 2025/8/21 2:37:20

T-SQL语言的压力测试

T-SQL语言的压力测试随着数据驱动技术的发展，数据库在现代应用中的角色愈加重要。而在数据库管理系统中，微软的SQL Server凭借其强大的功能和易用性，广泛应用于各行业。在这一环境中，T-SQL（Transact-SQL）…...

编程日记 2025/8/19 11:53:19

debian 系统gnome怎么关闭触摸屏三指滑动

ubuntu如何限制三指手势操作_ubuntu 手势-CSDN博客参考方案给上面了， kiosk模式就是专用模式，类似于广告机、售货机那种。方案在 Debian 系统的 GNOME 桌面环境中，可以通过以下方法关闭触摸屏三指滑动功能：安装 gnome-tweaks 工具：...

编程日记 2025/8/21 13:37:18

【9】搭建k8s集群系列（二进制部署）之安装work-node节点组件（kube-proxy）和网络组件calico

承接上一篇文章，继续安装工作节点的第二个组件：kube-proxy 一、创建配置文件 cat > /opt/kubernetes/cfg/kube-proxy.conf << EOF KUBE_PROXY_OPTS"--logtostderrfalse \\ --v2 \\ --log-dir/opt/kubernetes/logs \\ --config/opt/kubern…...

编程日记 2025/8/20 9:00:03

一、MongoDB安装及迁移 1、导入MongoDB GPG密钥 sudo rpm --import https://www.mongodb.org/static/pgp/server-5.0.asc 2、创建MongoDB 安装源配置文件 vi /etc/yum.repos.d/mongodb-org-5.0.repo，添加以下内容： [mongodb-org-5.0] nameMongoDB Repo…...

编程日记 2025/8/21 19:30:49

高效解读机器语言，profinet转ethernet ip网关烟草企业自动化升级案例分析

工业通信协议转换在烟草生产线的实践应用某中型烟草生产企业为提高自动化水平，引进了西门子S7-1500系列PLC控制系统和防爆型科氏力质量流量计。但在系统集成阶段，技术人员发现PLC支持的PROFINET协议与流量计采用的EtherNet/IP协议存在互操作障碍&#x…...

编程日记 2025/8/20 13:09:15

使用Scade实现神经网络算法

在ERTS2022中，ANSYS 发表了使用Scade实现神经网络AI算法的相关工作。论文题目为《Programming Neural Networks Inference in a Safety-Critical Simulation-based Framework》背景与挑战神经网络在安全关键系统中的应用：随着嵌入式系统中自主性的引入…...

编程日记 2025/8/22 4:32:48

rom定制系列------小米10pro机型定制解锁固件原生安卓15批量线刷固件操作解析与界面预览

注意;固件用于自己机型忘记密码或者手机号注销等出现设备锁过保修期售后无视的机型，勿用于非法途径目前有粉丝联系，自己的机型由于手机号注销导致手机更新系统后出现设备锁界面。另外也没有解锁bl。目前无法使用手机。经过询问是小米10pro机型。根据…...

编程日记 2025/8/22 13:13:11

2023年-全国大学生数学建模竞赛(CUMCM)试题速浏、分类及浅析

2023年-全国大学生数学建模竞赛(CUMCM)试题速浏、分类及浅析全国大学生数学建模竞赛（China Undergraduate Mathematical Contest in Modeling）是国家教委高教司和中国工业与应用数学学会共同主办的面向全国大学生的群众性科技活动，目的在于激…...

编程日记 2025/8/22 11:58:21

2014年-全国大学生数学建模竞赛(CUMCM)试题速浏、分类及浅析

2014年-全国大学生数学建模竞赛(CUMCM)试题速浏、分类及浅析全国大学生数学建模竞赛（China Undergraduate Mathematical Contest in Modeling）是国家教委高教司和中国工业与应用数学学会共同主办的面向全国大学生的群众性科技活动，目的在于激励学生学习数学的积极性，提高学…...

编程日记 2025/8/22 9:00:14