操作HTML網頁

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