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

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

news 2026/1/25 11:51:07

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

在软件开发中正确使用MySQL日期时间类型的深度解析

在日常软件开发场景中，时间信息的存储是底层且核心的需求。从金融交易的精确记账时间、用户操作的行为日志，到供应链系统的物流节点时间戳，时间数据的准确性直接决定业务逻辑的可靠性。MySQL作为主流关系型数据库，其日期时间类型的…...

编程新知 2025/10/16 13:22:06

【网络】每天掌握一个Linux命令 - iftop

在Linux系统中，iftop是网络管理的得力助手，能实时监控网络流量、连接情况等，帮助排查网络异常。接下来从多方面详细介绍它。目录【网络】每天掌握一个Linux命令 - iftop工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景…...

编程新知 2025/10/10 17:03:53

ssc377d修改flash分区大小

1、flash的分区默认分配16M、 / # df -h Filesystem Size Used Available Use% Mounted on /dev/root 1.9M 1.9M 0 100% / /dev/mtdblock4 3.0M...

编程新知 2025/12/21 20:15:17

论文浅尝 | 基于判别指令微调生成式大语言模型的知识图谱补全方法（ISWC2024）

笔记整理：刘治强，浙江大学硕士生，研究方向为知识图谱表示学习，大语言模型论文链接：http://arxiv.org/abs/2407.16127 发表会议：ISWC 2024 1. 动机传统的知识图谱补全（KGC）模型通过…...

编程新知 2026/1/15 5:00:52

自然语言处理——循环神经网络

自然语言处理——循环神经网络循环神经网络应用到基于机器学习的自然语言处理任务序列到类别同步的序列到序列模式异步的序列到序列模式参数学习和长程依赖问题基于门控的循环神经网络门控循环单元（GRU）长短期记忆神经网络（LSTM&#xff09…...

编程新知 2026/1/15 5:00:22

推荐 github 项目:GeminiImageApp(图片生成方向，可以做一定的素材)

推荐 github 项目:GeminiImageApp(图片生成方向，可以做一定的素材) 这个项目能干嘛? 使用 gemini 2.0 的 api 和 google 其他的 api 来做衍生处理简化和优化了文生图和图生图的行为(我的最主要) 并且有一些目标检测和切割(我用不到) 视频和 imagefx 因为没 a…...

编程新知 2026/1/25 10:41:07

处理vxe-table 表尾数据是单独一个接口，表格tableData数据更新后，需要点击两下，表尾才是正确的

修改bug思路： 分别把 tabledata 和表尾相关数据 console.log() 发现更新数据先后顺序不对 settimeout延迟查询表格接口 ——测试可行升级↑：async await 等接口返回后再开始下一个接口查询 ________________________________________________________…...

编程新知 2026/1/25 6:16:49