操作HTML网页

原创于 2025-07-15 20:49:40 发布 · 875 阅读

CC 4.0 BY-SA版权

文章标签：

一、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>