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

HTML-标签之文字排版、图片、链接、音视频

news 2026/2/9 15:01:15

1、标签语法

HTML超文本标记语言——HyperText Markup Language

超文本是链接
标记也叫标签，带尖括号的文本

2、HTML基本骨架

HTML基本骨架是网页模板

html：整个网页
head：网页头部，存放给浏览器看的代码，例如CSS
body：网页主体，存放给用户看的代码，例如图片、文字
title：网页标题

VS Code快速生成骨架：在HTML文件（.html）中，!（英文）配合Enter/Tab键

3、标签的关系

作用：明确代码的书写位置

父子关系（嵌套关系）
兄弟关系（并列）

向后缩进：Tab

向前缩进：Shift+Tab

4、注释

注释就是对代码的解释和说明，其目的是能够更加轻松地了解代码。注释是编写程序时，写程序的人给一个语句、程序段、函数等的解释或提示，能提高程序代码的可读性。

<!-...->注释标签用来在源文档中插入注释，注释不会在浏览器中显示

在VS Code中，添加/删除注释的快捷键：Ctrl + /

5、标题标签

一般用在新闻标题、文章标题、网页区域名称、产品名称等等。

标签名：h1~h6（双标签）

显示特点：

文字加粗
字号逐渐减小
独占一行（换行）

经验分析：

h1标签在一个网页中只能用一次，用来放新闻标题或网页的logo
h2~h6没有使用次数的限制

6、段落标签

一般用在新闻段落、文章段落、产品描述信息等等。

标签名：p（双标签）

如上图，有三个段落

显示特点：

独占一行
段落之间存在间隙

7、换行与水平线标签

换行：<br> （单标签）

水平线：<hr> （单标签）

8、文本格式化标签

作用：为文本添加特殊格式，以突出重点。常见的文本格式：加粗、倾斜、下划线、删除线等。

都是双标签

9、图形标签

作用：在网页中插入图片

src用于指定图像的位置和名称，是<img>的必须属性。建议以./开头，VS Code有提示功能

9.1 图像标签-属性

属性	作用	说明
alt	替换文本	图片无法显示的时候显示的文字
title	提示文本	鼠标悬停在图片上面的时候显示的文字
width	图片的宽度	值为数字，没有单位
height	图片的高度	值为数字，没有单位

属性名=“属性值”
属性写在尖括号里面，标签名后面，标签名和属性之间用空格隔开，不区分先后顺序

10、路径

路径是指查找文件时，从起点到终点经历的路线。

相对路径：从当前文件位置出发查找目标文件
绝对路径：从盘符出发查找目标文件
- windows电脑从盘符出发
- Mac电脑从根目录出发

10.1 相对路径

10.2 绝对路径

Windows电脑从盘符出发
Mac电脑从根目录（/）出发

Windows默认是 \，其他系统是 /，建议统一写为 /
文件的在线网址：https://www.itheima.com/images/logo.png
绝对路径的应用场景：友情链接

11、超链接

作用：点击跳转到其他页面

href属性值是跳转地址，是超链接的必须属性。

不确定跳转地址，可以使用 # 空链接

target="_blank"属性作用：在新窗口打开页面。

12、音频标签

常见属性

属性	作用	特殊说明
src（必须属性）	音频URL	支持格式：MP3、Ogg、Wav
controls	显示音频控制面板
loop	循环播放
autoplay	自动播放	为了提升用户体验，浏览器一般会禁用自动播放功能

13、视频标签

属性	作用	特殊说明
src（必须属性）	视频URL	支持格式：MP4、WebM、Ogg
controls	显示视频控制面板
loop	循环播放
muted	静音播放
autoplay	自动播放	为了提升用户体验，浏览器支持在静音状态自动播放

综合案例一

网页制作思路：从上到下，先整体再局部，逐步分析制作

分析内容 ---> 写代码 ---> 保存 --->刷新浏览器，看效果

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><h1>今日话题</h1><hr><p>IT之家 11 月 29 日消息，在今日晚间的 Redmi 十周年暨 K70 系列手机新品发布会上，Redmi K70 系列新机正式发布，本文主要介绍标准版机型，该机定位“新一代旗舰性能新标杆”，售价 2499 元起<a href="./综合案例二.html">vue</a>，<a href="https://item.jd.com/100078020142.html?cu=true&utm_source=www.ithome.com&utm_medium=jingfen&utm_campaign=t_236375426_RV_kuIDkuZY&utm_term=7fabefaf6b9746d4ba0aeb4a43e67255">查看详情</a>   </p><img src="https://img.ithome.com/newsuploadfiles/2023/11/65fc0457-6d41-4b83-b863-041587971b95.jpg?x-bce-process=image/format,f_auto" alt="这是Redmi K70系列手机图片" title="Redmi K70" height="300"><h2>性能方面</h2><p>Redmi K70 <strong>搭载第二代骁龙 8</strong>，综合跑分超 171 万，辅以LPDDR5X 内存，UFS 4.0 闪存，支持狂暴引擎 3.0、5000mm² 环形冷泵 VC 液冷散热。<ins>我很喜欢，你喜欢不</ins></p><p>Redmi K70 拥有 Pro 版同款屏幕、影像、充电配置，具体来说，该机采用 6.67 英寸 3200×1400 华星光电 C8 OLED 柔性直屏，手动最高亮度 700nit、全屏激发 1200nit、局部峰值亮度 4000nit，支持 120Hz 刷新率，480Hz 触控采样率（瞬时 2160Hz），3840Hz 高频 PWM 调光，12bit 色深，JNCD ≈ 0.35；</p><h2>影像方面</h2><p>该机前置 16MP（豪威 OV16A1Q），后置 50MP 主摄（光影猎人 800，1/1.55"，OIS）+8MP 超广角（豪威 OV08D10）+2MP 微距（思特威 SC202PCS）三摄；续航方面，Redmi K70 搭载 5000mAh 电池，支持120W 快充，搭载自研快充芯片澎湃 P2 + 自研电源管理芯片澎湃 G1。</p><h2>其它方面</h2><p>该机支持 NFC、红外遥控、屏幕光学指纹、0809 X 轴线性马达，搭载 1012+1216 立体声双扬声器，通过双 Hi-Res 认证，搭载小米澎湃 OS 系统。</p>
</body>
</html>

综合案例二

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><h1>今日话题</h1><hr><p>IT之家 11 月 29 日消息，在今日晚间的 Redmi 十周年暨 K70 系列手机新品发布会上，Redmi K70 系列新机正式发布，本文主要介绍标准版机型，该机定位“新一代旗舰性能新标杆”，售价 2499 元起<a href="./综合案例二.html">vue</a>，<a href="https://item.jd.com/100078020142.html?cu=true&utm_source=www.ithome.com&utm_medium=jingfen&utm_campaign=t_236375426_RV_kuIDkuZY&utm_term=7fabefaf6b9746d4ba0aeb4a43e67255">查看详情</a>   </p><img src="https://img.ithome.com/newsuploadfiles/2023/11/65fc0457-6d41-4b83-b863-041587971b95.jpg?x-bce-process=image/format,f_auto" alt="这是Redmi K70系列手机图片" title="Redmi K70" height="300"><h2>性能方面</h2><p>Redmi K70 <strong>搭载第二代骁龙 8</strong>，综合跑分超 171 万，辅以LPDDR5X 内存，UFS 4.0 闪存，支持狂暴引擎 3.0、5000mm² 环形冷泵 VC 液冷散热。<ins>我很喜欢，你喜欢不</ins></p><p>Redmi K70 拥有 Pro 版同款屏幕、影像、充电配置，具体来说，该机采用 6.67 英寸 3200×1400 华星光电 C8 OLED 柔性直屏，手动最高亮度 700nit、全屏激发 1200nit、局部峰值亮度 4000nit，支持 120Hz 刷新率，480Hz 触控采样率（瞬时 2160Hz），3840Hz 高频 PWM 调光，12bit 色深，JNCD ≈ 0.35；</p><h2>影像方面</h2><p>该机前置 16MP（豪威 OV16A1Q），后置 50MP 主摄（光影猎人 800，1/1.55"，OIS）+8MP 超广角（豪威 OV08D10）+2MP 微距（思特威 SC202PCS）三摄；续航方面，Redmi K70 搭载 5000mAh 电池，支持120W 快充，搭载自研快充芯片澎湃 P2 + 自研电源管理芯片澎湃 G1。</p><h2>其它方面</h2><p>该机支持 NFC、红外遥控、屏幕光学指纹、0809 X 轴线性马达，搭载 1012+1216 立体声双扬声器，通过双 Hi-Res 认证，搭载小米澎湃 OS 系统。</p>
</body>
</html>

HTML-标签之文字排版、图片、链接、音视频

1、标签语法 HTML超文本标记语言——HyperText Markup Language 超文本是链接标记也叫标签，带尖括号的文本 2、HTML基本骨架 HTML基本骨架是网页模板 html：整个网页head：网页头部，存放给浏览器看的代码，例如CSSbody…...

编程日记 2023/12/7 23:30:46

圣诞将至—C语言圣诞树代码来啦

文章目录圣诞将至—C实现语言圣诞树源码圣诞将至—C实现语言圣诞树圣诞树源码 #define _CRT_SECURE_NO_WARNINGS#include <stdio.h> #include <math.h> #include <stdlib.h> #include <windows.h> #include <time.h> #define PI 3.14159265…...

编程日记 2023/12/7 23:23:38

Git常用命令#merge分支合并

要查看所有分支，包括本地和远程仓库的分支，可以使用以下命令： 1.查看分支 1.1 查看本地分支 git branch这个命令会列出本地所有的分支，当前所在的分支会有 * 标记。 1.2 查看远程分支 git branch -r这个命令会列出远程仓库的分…...

编程日记 2023/12/7 23:20:35

Windows server 2019 域环境部署

环境准备准备3台服务器，配置都是8g2核，50g硬盘，操作系统版本Windows Server 2019 Datacenter 域服务器：adc，192.168.56.120服务器1：server1:，192.168.56.121服务器2：server2&…...

编程日记 2023/12/7 23:18:33

Cocos Creator加入图片没有被识别

原因，需要更换类型，选择下图中的类型...

编程日记 2023/12/7 23:17:32

public static void main(String[] args) {double value9.100001;//保留两位小数String format String.format("%.2f", value);//去除多余的0String strValue new BigDecimal(format).stripTrailingZeros().toPlainString();System.out.println("strValue &q…...

编程日记 2023/12/7 23:16:30

C++学习寄录（九.多态）

1.多态基本概念先来看这样的代码，我的本意是想要输出“小猫在说话”，但实际输出的却是“动物在说话”。这是因为地址早绑定，在代码编译阶段就已经确定了函数地址；如果想要实现既定目标，那么这个dospeak（&…...

编程日记 2023/12/7 23:15:29

【Linux基础开发工具】yum生态vim的配置与使用

目录前言 1. Linux 软件包管理器 yum 1.1 什么是yum 1.2 快速上手yum 1.3 yum生态 2. Linux编辑器vim 2.1 vim的模式 2.2 vim使用技巧 3. vim编辑器辅助功能配置 3.1 配置 3.2 用户sudo权限配置总结前言 Linux基础指令与权限之后，Linux系统开发工具的使用…...

编程日记 2023/12/7 23:10:24

java-HashMap、TreeMap、LinkedHashMap、ArrayList、LinkedList使用笔记

背景 Map<String, Integer> unsortedMap new HashMap<>(); unsortedMap.put("One", 1); unsortedMap.put("Two", 2); unsortedMap.put("Three", 3); unsortedMap.put("Four", 4); 一、关于排序 TreeMap&#…...

编程日记 2023/12/7 23:09:24

Oracle中mybatis批量更新报错ORA-00933：SQL命令未正确结束

项目场景： 最近在开发项目的过程中遇见了这个问题：Oracle中批量更新的时候报错 ORA-00933：SQL命令未正确结束问题描述 mybatis批量更新报错ORA-00933：SQL命令未正确结束 <foreach item"item" index"index&q…...

编程日记 2023/12/7 23:05:20

Mysql综合案例练习＜1＞

MySql综合案例练习<1> 题目一题目二题目三题目四题目五题目六题目七题目八题目九题目十题目十一题目十二题目十三题目十四题目十五题目十六题目十七题目十八题目十九题目一创建数据库test01_library 创建表 books，表结构如下： CREATE DATABASE …...

编程日记 2023/12/7 23:04:19

Linux系统编程：线程总结

线程的概念基本概念所谓线程，通俗的说就是一个正在运行的函数。在Linux系统中，线程是程序运行的最小单位，也被视为进程内部的控制序列。同一进程下的多个线程共享进程的所有资源，包括进程环境变量、打开的文件描述符、信号量…...

编程日记 2023/12/7 23:03:18

activemq启动成功但web管理页面却无法访问

前提： 在linux启动activemq成功！本地能ping通linux 处理方案： 确定防火墙是否关闭， 有两种处理方案：第一种-关闭防火墙；第二种-暴漏8161和61616两个端口 netstat -lnpt查看8161和61616端口注意&#xf…...

编程日记 2023/12/7 23:01:16

【Flink on k8s】- 0 - Flink kubernetes operator 快速入门与实战

完整的课程，请点击链接。目录一、你将收获二、适用人群三、课程介绍...

编程日记 2023/12/7 22:59:14

毕设：《基于hive的音乐数据分析系统的设计与实现》

文章目录环境启动一、爬取数据1.1、歌单信息1.2、每首歌前20条评论1.3、排行榜二、搭建环境1.1、搭建JAVA1.2、配置hadoop1.3、配置Hadoop环境：YARN1.4、MYSQL1.5、HIVE(数据仓库)1.6、Sqoop（关系数据库数据迁移） 三、hadoop配置内存四、导…...

编程日记 2023/12/7 22:58:14

PHP使用HTTP代码示例模板

PHP是一种广泛用于服务器端的编程语言，它提供了许多内置的函数和扩展，以便开发人员能够轻松地处理HTTP请求和响应。在PHP中，您可以使用以下代码示例模板来处理HTTP请求和生成HTTP响应。 php复制代码 <?php // 处理GET请求 if ($…...

编程日记 2023/12/7 22:56:12

头歌题目-数组

任务描述题目描述:找出具有m行n列二维数组Array的“鞍点”，即该位置上的元素在该行上最大，在该列上最小，其中1<m,n<10。相关知识（略） 编程要求输入输入数据有多行，第一行有两个数m和n&#…...

编程日记 2023/12/7 22:54:10

C++ vector基本操作

目录一、介绍二、定义三、迭代器四、容量操作 1、size 2、capacity 3、empty 4、resize 5、reserve 总结（扩容机制） 五、增删查改 1、push_back & pop_back 2、find 3、insert 4、erase 5、swap 6、operator[] 一、介绍 vector…...

编程日记 2023/12/7 22:53:09

使用SLS日志服务采集Kong网关的日志

一、阿里云SLS 官方的接入文档已比较丰富了，本文不意重复说明此事。站在使用的角度，以采集Kong的日志为示例，说明我们应该如何治理日志。说白了，本文是想给你怎么省钱作一个建议，希望不会让你公司也“降本增笑”。…...

编程日记 2023/12/7 22:50:07

TA-Lib学习研究笔记（九）——Pattern Recognition （1）

TA-Lib学习研究笔记（九）——Pattern Recognition （1） 0.程序代码形态识别的函数的应用，通过使用A股实际的数据，验证形态识别函数，用K线显示出现标志的形态走势，由于入口参数基本上…...

编程日记 2023/12/7 22:49:07

基于算法竞赛的c++编程（28）结构体的进阶应用

结构体的嵌套与复杂数据组织在C中，结构体可以嵌套使用，形成更复杂的数据结构。例如，可以通过嵌套结构体描述多层级数据关系： struct Address {string city;string street;int zipCode; };struct Employee {string name;int id;…...

编程新知 2025/11/16 19:06:23

内存分配函数malloc kmalloc vmalloc

内存分配函数malloc kmalloc vmalloc malloc实现步骤： 1）请求大小调整：首先，malloc 需要调整用户请求的大小，以适应内部数据结构（例如，可能需要存储额外的元数据）。通常，这包括对齐调整，确保分配的内存地址满足特定硬件要求（如对齐到8字节或16字节边界）。 2）空闲…...

编程新知 2025/11/1 5:21:39

css实现圆环展示百分比，根据值动态展示所占比例

代码如下 <view class""><view class"circle-chart"><view v-if"!!num" class"pie-item" :style"{background: conic-gradient(var(--one-color) 0%,#E9E6F1 ${num}%),}"></view><view v-else …...

编程新知 2026/2/5 4:28:28

golang循环变量捕获问题

在 Go 语言中，当在循环中启动协程（goroutine）时，如果在协程闭包中直接引用循环变量，可能会遇到一个常见的陷阱 - 循环变量捕获问题。让我详细解释一下： 问题背景看这个代码片段： fo…...

编程新知 2026/1/21 14:29:57

【论文阅读28】-CNN-BiLSTM-Attention-（2024）

本文把滑坡位移序列拆开、筛优质因子，再用 CNN-BiLSTM-Attention 来动态预测每个子序列，最后重构出总位移，预测效果超越传统模型。文章目录 1 引言2 方法2.1 位移时间序列加性模型2.2 变分模态分解 (VMD) 具体步骤2.3.1 样本熵（S…...

编程新知 2026/2/2 3:06:53

全面解析各类VPN技术：GRE、IPsec、L2TP、SSL与MPLS VPN对比

目录引言 VPN技术概述 GRE VPN 3.1 GRE封装结构 3.2 GRE的应用场景 GRE over IPsec 4.1 GRE over IPsec封装结构 4.2 为什么使用GRE over IPsec？ IPsec VPN 5.1 IPsec传输模式（Transport Mode） 5.2 IPsec隧道模式（Tunne…...

编程新知 2025/11/3 0:44:41

关键领域软件测试的突围之路：如何破解安全与效率的平衡难题

在数字化浪潮席卷全球的今天，软件系统已成为国家关键领域的核心战斗力。不同于普通商业软件，这些承载着国家安全使命的软件系统面临着前所未有的质量挑战——如何在确保绝对安全的前提下，实现高效测试与快速迭代？这一命题正考验着…...

编程新知 2026/1/27 13:20:11

Hive 存储格式深度解析：从 TextFile 到 ORC，如何选对数据存储方案？

在大数据处理领域，Hive 作为 Hadoop 生态中重要的数据仓库工具，其存储格式的选择直接影响数据存储成本、查询效率和计算资源消耗。面对 TextFile、SequenceFile、Parquet、RCFile、ORC 等多种存储格式，很多开发者常常陷入选择困境。本文将从底…...

编程新知 2025/12/6 10:54:35

React---day11

14.4 react-redux第三方库提供connect、thunk之类的函数以获取一个banner数据为例子 store： 我们在使用异步的时候理应是要使用中间件的，但是configureStore 已经自动集成了 redux-thunk，注意action里面要返回函数 import { configureS…...

编程新知 2026/1/19 2:13:24

佰力博科技与您探讨热释电测量的几种方法

热释电的测量主要涉及热释电系数的测定，这是表征热释电材料性能的重要参数。热释电系数的测量方法主要包括静态法、动态法和积分电荷法。其中，积分电荷法最为常用，其原理是通过测量在电容器上积累的热释电电荷，从而确定热释电系数…...

编程新知 2026/1/23 11:53:19