一、HTML网页的介绍

HTML，即超文本标记语言（HyperText Markup Language），它不是一种编程语言，而是一种标记语言，用于描述网页的结构。HTML 通过一系列标签来定义网页中的各种元素，如文本、图片、链接、表格等，浏览器会解读这些标签，将其渲染成我们看到的网页模样。​

一个基本的 HTML 文档由文档类型声明、html 标签、head 标签和 body 标签组成。文档类型声明<!DOCTYPE html>告诉浏览器这是一个 HTML5 文档；<html>标签是整个 HTML 文档的根元素；<head>标签用于包含文档的元数据，如标题、字符集等；<body>标签则包含了网页中所有可见的内容，如文本、图片、链接等

示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>这里是标题</title>
</head>
<body>
在这里填入正文
</body>
</html>

二、常用标签

1.标题标签

在HTML网页中，<h1>到<h6>：用于定义标题，<h1>是最大的标题，<h6>是最小的标题。例如：<h1>这是一级标题</h1>。

示例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<h1>我是标题1</h1>
<h2>我是标题2</h2>
<h3>我是标题3</h3>
<h4>我是标题4</h4>
<h5>我是标题4</h5>
<h6>我是标题6</h6>
</body>
</html>

2.段落标签

在HTML网页中，<p>：用于定义段落，会在段落前后自动添加换行和间距。如：<p>这是一个段落内容</p>。

示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<h1>我是标题1</h1>
<p>写入段落的文字内容</p>
</body>
</html>

3.超链接标签

在HTML网页中，超链接标签<a>：用于创建链接，通过href属性指定链接的目标地址。例如：<a href="https://www.example.com">访问示例网站</a>。

示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<h1>我是标题1</h1>
<p>写入段落的文字内容</p>
<a href="https://www.bilibili.com/">链接到b站</a>
</body>
</html>

4.注释标签

在HTML网页中，用<!-- ->和<!-->来进行注释，不会被文件中的代码执行，是开发人员对HTML网页的解释或备注。

示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<h1>我是标题1</h1>
<p>写入段落的文字内容</p>
<!--下面的内容被注释掉了->
<a href="https://www.bilibili.com/">链接到b站</a>
<! -->
</body>
</html>

5.标签属性

HTML 标签属性是用于扩展 HTML 元素功能、提供附加信息或修改元素行为的键值对。它们位于 HTML 标签的开始标签中，以属性名="属性值"的形式存在。

基本语法

属性必须包含在标签的开始部分，格式为：

<标签名 属性1="值1" 属性2="值2">内容</标签名>

属性名和属性值之间用等号连接。

属性值通常用双引号（""）或单引号（''）包裹，但某些布尔属性（如disabled）可以省略值。

三、设置字体格式

在 HTML 中，可以通过一些标签和属性来设置字体的格式。

1.设置字体的字形与效果

给字体设置粗体格式使用<b>标签

示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<h1>我是标题1</h1>
<p>写入<b>段落的文字内容</b></p>
</body>
</html>

给字体设置斜体格式使用<i>标签，设置上标格式使用<sup>标签，设置下标格式使用<sub>标签，设置下划线格式使用<u>标签。

示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<h1><i>我是</i><sup>标</sup><sub>题</sub>1</h1>
<p>写入<b>段落</b>的<u>文字内容</u></p>
</body>
</html>

2.设置字体颜色

使用color属性为元素指定文本颜色，支持多种颜色表示方式：

<p style="color: 颜色值;">文本内容</p>
(1) 颜色名称

直接使用预定义的颜色名称（如red、blue）：

(2) 十六进制值（Hex）

使用#RRGGBB或#RGB格式：

(3) RGB 值

使用rgb(红, 绿, 蓝)格式，每个值范围 0-255：

(4) RGBA 值（含透明度）

使用rgba(红, 绿, 蓝, 透明度)，透明度范围 0.0-1.0：

(5) HSL/HSLA 值

使用色相 (Hue)、饱和度 (Saturation)、亮度 (Lightness)：

示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<h1 style="color: rgb(255, 0, 0);">我是标题1</h1>
<p style="color: red;">红色文本</p>
<p style="color: #FF0000;">红色文本</p>
<h2 style="background: LightSeaGreen ; color:blue">我是标题2</h2>
</body>
</html>

3.设置字体大小

使用font-size属性为元素指定文本大小，支持多种单位：

<p style="font-size: 大小值;">文本内容</p>
(1) 固定单位

像素（px）：固定大小，常用于精确控制。

点（pt）：常用于打印（1pt ≈ 1/72 英寸）。

(2) 相对单位（推荐）

em：相对于父元素的字体大小。

rem：相对于根元素（<html>）的字体大小。

(3) 关键字

示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<h1 style="font-size:38pt">我是标题1</h1>
<p style="font-size:1cm">我们一起学习python吧</p>
</body>
</html>

四、添加多媒体

在网页中添加多媒体元素可以让网页更加生动丰富，HTML 支持添加图片、音频和视频等多媒体。​

1.添加网页图片

在HTML网页中，使用<img>标签添加图片，还可以通过设置width和height属性来调整图片的大小，如<img src="image.jpg" alt="示例图片" width="300" height="200">。

​基础语法

<img src="图片路径" alt="图片描述文本">

示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>图片</title>
</head>
<body>
<h1 >标题1</h1>
<img src="图片的路径"alt="图片丢失了"width="200px"> 
</body>
</html>

2.添加网页音频

在HTML网页中，使用<audio>标签来添加音频，src属性指定音频文件的路径，controls属性可以显示音频控制按钮。例如：<audio src="music.mp3" controls></audio>。​

基础语法

<video src="视频路径" controls width="640" height="360"></video>

示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>音频</title>
</head>
<body>
<h1 >标题1</h1>
<audio controls="controls" src="音频路径"></audio> 
</body>
</html>

3.添加网页视频

在HTML网页中，使用<video>标签来添加视频，src属性指定视频文件的路径，controls属性显示视频控制按钮，还可以设置width和height调整视频大小。例如：<video src="video.mp4" controls width="600" height="400"></video>。

基础语法

<audio src="音频路径" controls></audio>

示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>视频</title>
</head>
<body>
<h1 >标题1</h1>
<video src="视频的路径" controls="controls"></video> 
</body>
</html>

五、获取网页资源

在制作网页时，常常需要获取各种资源，如图片、音频、视频、脚本文件等。​

本地资源：如果资源存储在本地计算机中，可以直接使用相对路径或绝对路径来引用。相对路径是相对于当前 HTML 文件的位置，例如images/image.jpg表示当前文件所在目录下的 images 文件夹中的 image.jpg 文件；绝对路径是资源在计算机中的完整路径，如C:/website/images/image.jpg。​

网络资源：可以通过资源的 URL 来引用网络上的资源，例如引用一张网络图片：<img src="https://www.example.com/images/image.jpg" alt="网络图片">。

六、创建容器

容器标签用于对网页中的元素进行分组和布局，常用的容器标签有<div>和<span>。

1.<div>标签

<div>标签：是一个块级容器，会独占一行，可以包含多个元素，常用于页面的整体布局，如头部、主体、底部等。例如：

<div id="header"><h1>网站标题</h1>
</div>
<div id="content"><p>网页内容</p>
</div>

 2.布局

<div style="width:容器宽度;height:容器高度;float:容器位置"></div>

示例： 

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>Div布局示例</title>
<head>
<body><h1>Div布局技术示例</h1><!-- 浮动布局 --><h2>浮动布局</h2><div class="float-container"><div class="float-left">左侧内容</div><div class="float-right">右侧内容</div></div><!-- Flexbox布局 --><h2>Flexbox布局</h2><div class="flex-container"><div class="flex-item">Flex项目1</div><div class="flex-item">Flex项目2</div><div class="flex-item">Flex项目3</div></div><!-- Grid布局 --><h2>Grid布局</h2><div class="grid-container"><div class="grid-item">Grid项目1</div><div class="grid-item">Grid项目2</div><div class="grid-item">Grid项目3</div><div class="grid-item">Grid项目4</div></div>
</body>
</html>

七、创建表格

表格在网页中常用于展示结构化的数据，使用<table>标签来创建表格，相关的标签还有<tr>（表格行）、<td>（表格单元格）、<th>（表头单元格）等。

1.表格标签

在HTML网页中，使用表格标签<table>创建表格，其中表格的行数由<tr>标签的个数决定，表格的列数由<tr>标签中<td>标签的个数决定。

示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><h1>创建表格</h1><table border="2"><tr><td>第1行中的第1格</td><td>第1行中的第2格</td></tr><tr><td>第2行中的第1格</td><td>第2行中的第2格</td></tr></table>
</body>

2.添加表格表头

 如果需要在表格中插入表头，可使用<th>标签来实现。

示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><h1>创建表格</h1><table border="2"><th colspan="2">我是表格表头内容</th><tr><td>第1行中的第1格</td><td>第1行中的第2格</td></tr><tr><td>第2行中的第1格</td><td>第2行中的第2格</td></tr></table>
</body>
</html>

3.添加表格标题

创建表格标题可以使用标签<caption>来实现。使用形式如下：

<caption>我是表格标题</caption>

示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><h1>创建表格</h1><table border="2"><caption>我是表格标题</caption><th colspan="2">我是表格表头内容</th><tr><td>第1行中的第1格</td><td>第1行中的第2格</td></tr><tr><td>第2行中的第1格</td><td>第2行中的第2格</td></tr></table>
</body>
</html>

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.pswp.cn/bicheng/89084.shtml
繁体地址，请注明出处：http://hk.pswp.cn/bicheng/89084.shtml
英文地址，请注明出处：http://en.pswp.cn/bicheng/89084.shtml

如若内容造成侵权/违法违规/事实不符，请联系英文站点网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Django--03视图和模板

Django--03视图和模板

Django–03视图和模板 Part 3: Views and templates 本教程承接第二部分&#xff0c;我们将继续开发投票应用&#xff0c;重点介绍 Django 的表单处理和通用视图。 文章目录Django--03视图和模板前言概述一、编写更多视图二、编写实际执行操作的视图三、快捷方式&#xff1a;r…
阅读更多...
《每日AI-人工智能-编程日报》--2025年7月15日

《每日AI-人工智能-编程日报》--2025年7月15日

介绍&#xff1a;AI &#xff1a;英伟达恢复向中国销售 H20 并推出新 GPU&#xff1a;7 月 15 日&#xff0c;英伟达官宣将恢复向中国销售 H20&#xff0c;并推出全新的 NVIDIA RTX PRO GPU&#xff0c;其中 B30 性能约为 H20 的 75%&#xff0c;定价在 6500 至 8000 美元之间&…
阅读更多...
C++STL-list

C++STL-list

一.基础概念相当于数据结构里面的双向链表二.基础操作1.list对象创建1. 默认构造函数list<int> l1;2. 初始化列表list<int> l2_1 { 9,8,7,6,5 };list<int> l2_2({ 9, 8, 7, 1, 5 });3. 迭代器list <int> l3(l2_1.begin(), l2_1.end());4. 全0初始化li…
阅读更多...
【PTA数据结构 | C语言版】字符串插入操作

【PTA数据结构 | C语言版】字符串插入操作

本专栏持续输出数据结构题目集&#xff0c;欢迎订阅。 文章目录题目代码题目 请编写程序&#xff0c;将给定字符串 t 插入到另一个给定字符串 s 的第 pos 个字符的位置。 输入格式&#xff1a; 输入先后给出主串 s 和待插入的字符串 t&#xff0c;每个非空字符串占一行&#…
阅读更多...
Postman + Newman + Jenkins 接口自动化测试

Postman + Newman + Jenkins 接口自动化测试

💖亲爱的技术爱好者们，热烈欢迎来到 Kant2048 的博客！我是 Thomas Kant，很开心能在CSDN上与你们相遇～💖 本博客的精华专栏： 【自动化测试】 【测试经验】 【人工智能】 【Python】 </
阅读更多...
CAS单点登录架构详解

CAS单点登录架构详解

目录 概述核心概念 TGC (Ticket Granting Cookie)TGT (Ticket Granting Ticket)ST (Service Ticket) 架构设计 整体架构存储架构安全机制 工作流程 完整登录时序流程步骤详解 技术实现 会话管理数据同步问题最佳实践 参考资料 概述 CAS (Central Authentication Service) 是…
阅读更多...
C++中正则表达式详解和实战示例

C++中正则表达式详解和实战示例

C 中的正则表达式&#xff08;Regular Expression&#xff09;主要通过标准库 <regex> 提供&#xff0c;能够用于字符串匹配、查找、替换、验证格式等。它在 C11 中首次引入&#xff0c;并在 C14 和 C17 中逐步完善。一、头文件和命名空间 #include <regex> #inclu…
阅读更多...
深入解析Avro、Protobuf与JSON：序列化技术的选择与应用

深入解析Avro、Protobuf与JSON：序列化技术的选择与应用

在现代分布式系统和数据交换场景中&#xff0c;序列化技术是数据存储、传输和通信的核心。本文深入探讨三种主流序列化技术&#xff1a;Avro、Protobuf 和 JSON&#xff0c;从背景、特点、示例代码&#xff08;Python&#xff09;、优势及最佳实践等多个维度进行对比分析&#…
阅读更多...
Vue 中 effectScope() 的全面解析与实战应用

Vue 中 effectScope() 的全面解析与实战应用

一、effectScope 概述1.1 什么是 effectScopeeffectScope() 是 Vue 3.2 引入的核心 API&#xff0c;用于创建副作用作用域容器。它能够将多个响应式副作用&#xff08;如 watch、watchEffect 和 computed&#xff09;组织在一起&#xff0c;实现统一的生命周期管理。1.2 核心价…
阅读更多...
嵌入式面试八股文（十六）·一文搞懂嵌入式常用名词IC、ASIC、CPU、MPU、MCU、SoC、SoPC、GPU、DSP

嵌入式面试八股文（十六）·一文搞懂嵌入式常用名词IC、ASIC、CPU、MPU、MCU、SoC、SoPC、GPU、DSP

目录 1. IC&#xff08;Integrated Circuit&#xff0c;集成电路&#xff09; 2. ASIC&#xff08;Application-Specific Integrated Circuit&#xff0c;专用集成电路&#xff09; 3. CPU&#xff08;Central Processing Unit&#xff0c;中央处理器&#xff09; 4. M…
阅读更多...
安全参綉25暑假第一次作业

安全参綉25暑假第一次作业

第一天 1.首先讲了d0cker的部署&#xff0c; 这个是第一个Vulhub漏洞环境。所有环境都使用D0cker容器化&#xff0c;使其易于部署和隔离测试。 其中&#xff0c;国内的阿里用不了&#xff0c;你得搞个代理&#xff0c;下国外的&#xff1a;入门指南 | Vulhub 然后按这个…
阅读更多...
RocketMQ源码级实现原理-消息消费总览

RocketMQ源码级实现原理-消息消费总览

Overview可以看到&#xff0c;pull message和consume message实际上是两个过程&#xff0c;但是对于用户是透明的 注意这三个Offset的含义&#xff0c;physical offset就是commitLog中的全局偏移量分发dispatch如上图&#xff0c;Topic的每个queue&#xff0c;都绑定了唯一的一…
阅读更多...
linux打包固件shell脚本

linux打包固件shell脚本

不打包 pack.sh解压后无父目录&#xff08;直接是文件&#xff09;生成 checksum.txt&#xff08;包含所有文件的 SHA256&#xff09;打包后 .tar.gz 移动到上级目录#!/bin/bash# 检查是否传入版本号参数 if [ -z "$1" ]; thenecho "Usage: $0 <version> …
阅读更多...
用uniapp开发鸿蒙应用（暂停更新-根据项目更新，现在项目未开始）

用uniapp开发鸿蒙应用（暂停更新-根据项目更新，现在项目未开始）

1.根据博客生成.hap文件 【鸿蒙HarmonyOS开发技巧&#xff1a;如何不依赖华为商店直接安装uniapp生成的app文件&#xff1f;一键转换app至hap格式教程详解】_entry-default-signed.hap-CSDN博客 根据网络查询鸿蒙手机安装测试app&#xff0c;需要电脑命令安装 在鸿蒙HarmonyOS手…
阅读更多...
Linux 文件系统实现层详解：原理、结构与驱动衔接

Linux 文件系统实现层详解：原理、结构与驱动衔接

&#x1f4c2; Linux 文件系统实现层详解&#xff1a;原理、结构与驱动衔接 &#x1f3ac; 推荐搭配视频学习&#xff1a;Linux 文件系统子系统&#xff1a;三层架构全面掌握 一、为什么要重点理解文件系统实现层&#xff1f; 文件系统实现层是 Linux 文件系统的“地基”&…
阅读更多...
区块链应用场景深度解读：金融领域的革新与突破

区块链应用场景深度解读：金融领域的革新与突破

引言&#xff1a;区块链技术的演进与金融领域的变革区块链技术自2008年诞生以来&#xff0c;以其去中心化、不可篡改、可追溯等特性&#xff0c;在全球范围内引发了金融领域的深刻变革。从最初的数字货币实验&#xff0c;到如今在跨境支付、证券交易、供应链金融等领域的广泛应…
阅读更多...
redisson tryLock

redisson tryLock

应用场景RLock rLock redissonClient.getLock(Constant_LOCK request.getId()); try {boolean isLocked rLock.tryLock();if (!isLocked) {throw new ServiceException(ErrConstant.OPERATION_FAILED, "请勿重复提交");}源码public interface RLock extends Lock,…
阅读更多...
前端docx库实现将html页面导出word

前端docx库实现将html页面导出word

前言&#xff1a;最近遇到一个需求&#xff0c;需要将页面的html导出为word文档&#xff0c;并且包含横向和竖向页面&#xff0c;并且可以进行混合方向导出。经过一段时间的实验&#xff0c;发现只有docx这个库满足这个要求。在这里记录一下实现思路以及代码。 docx官网 一、…
阅读更多...
虚拟主机CPU占用100导致打不开的一次处理

虚拟主机CPU占用100导致打不开的一次处理

背景 突然有一天&#xff0c;有个客户网站打不开了&#xff0c;发来这样一张图片问题排查 打开阿里云虚拟主机控制面板&#xff0c;CPU 使用率已经达到了100%&#xff0c;这说明网站已经在高负荷运转。分析访问日志发现&#xff0c;网站出现了大量循环路径&#xff0c;其 UserA…
阅读更多...
设计模式之工厂模式：对象创建的智慧之道

设计模式之工厂模式：对象创建的智慧之道

工厂模式&#xff1a;对象创建的智慧之道 引言&#xff1a;为什么我们需要工厂模式&#xff1f; 在软件开发中&#xff0c;对象创建是最常见的操作之一。当代码中充满new关键字时&#xff0c;系统会面临三大痛点&#xff1a; 紧耦合&#xff1a;客户端代码直接依赖具体实现类扩…
阅读更多...
最新文章

Copyright @ 2022~2023