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

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

news 2025/10/19 23:39:30

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 超文本是链接标记也叫标签&#xff0c;带尖括号的文本 2、HTML基本骨架 HTML基本骨架是网页模板 html&#xff1a;整个网页head&#xff1a;网页头部&#xff0c;存放给浏览器看的代码&#xff0c;例如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分支合并

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

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

Windows server 2019 域环境部署

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

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

Cocos Creator加入图片没有被识别

原因&#xff0c;需要更换类型&#xff0c;选择下图中的类型...

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

java double类型保留两位小数并去除后面多余的0

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.多态基本概念 先来看这样的代码&#xff0c;我的本意是想要输出“小猫在说话”&#xff0c;但实际输出的却是“动物在说话”。这是因为地址早绑定&#xff0c;在代码编译阶段就已经确定了函数地址&#xff1b;如果想要实现既定目标&#xff0c;那么这个dospeak&#xff08;&…...

编程日记 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基础指令与权限之后&#xff0c;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命令未正确结束

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

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

Mysql综合案例练习＜1＞

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

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

Linux系统编程：线程总结

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

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

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

前提&#xff1a; 在linux启动activemq成功&#xff01;本地能ping通linux 处理方案&#xff1a; 确定防火墙是否关闭&#xff0c; 有两种处理方案&#xff1a;第一种-关闭防火墙&#xff1b;第二种-暴漏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环境&#xff1a;YARN1.4、MYSQL1.5、HIVE(数据仓库)1.6、Sqoop&#xff08;关系数据库数据迁移&#xff09; 三、hadoop配置内存四、导…...

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

PHP使用HTTP代码示例模板

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

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

头歌题目-数组

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

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

C++ vector基本操作

目录 一、介绍 二、定义 三、迭代器 四、容量操作 1、size 2、capacity 3、empty 4、resize 5、reserve 总结&#xff08;扩容机制&#xff09; 五、增删查改 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 官方的接入文档已比较丰富了&#xff0c;本文不意重复说明此事。 站在使用的角度&#xff0c;以采集Kong的日志为示例&#xff0c;说明我们应该如何治理日志。 说白了&#xff0c;本文是想给你怎么省钱作一个建议&#xff0c;希望不会让你公司也“降本增笑”。…...

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

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

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

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

观成科技：隐蔽隧道工具Ligolo-ng加密流量分析

1.工具介绍 Ligolo-ng是一款由go编写的高效隧道工具&#xff0c;该工具基于TUN接口实现其功能&#xff0c;利用反向TCP/TLS连接建立一条隐蔽的通信信道&#xff0c;支持使用Let’s Encrypt自动生成证书。Ligolo-ng的通信隐蔽性体现在其支持多种连接方式&#xff0c;适应复杂网…...

编程新知 2025/10/17 9:08:13

[2025CVPR]DeepVideo-R1：基于难度感知回归GRPO的视频强化微调框架详解

突破视频大语言模型推理瓶颈，在多个视频基准上实现SOTA性能 一、核心问题与创新亮点 1.1 GRPO在视频任务中的两大挑战 ​安全措施依赖问题​ GRPO使用min和clip函数限制策略更新幅度，导致： 梯度抑制：当新旧策略差异过大时梯度消失收敛困难：策略无法充分优化# 传统GRPO的梯…...

编程新知 2025/8/19 23:46:57

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院挂号小程序

一、开发准备 ​​环境搭建​​&#xff1a; 安装DevEco Studio 3.0或更高版本配置HarmonyOS SDK申请开发者账号 ​​项目创建​​&#xff1a; File > New > Create Project > Application (选择"Empty Ability") 二、核心功能实现 1. 医院科室展示 /…...

编程新知 2025/9/5 12:16:40

全球首个30米分辨率湿地数据集(2000—2022)

数据简介 今天我们分享的数据是全球30米分辨率湿地数据集&#xff0c;包含8种湿地亚类&#xff0c;该数据以0.5X0.5的瓦片存储&#xff0c;我们整理了所有属于中国的瓦片名称与其对应省份&#xff0c;方便大家研究使用。 该数据集作为全球首个30米分辨率、覆盖2000–2022年时间…...

编程新知 2025/10/19 16:05:44

智能在线客服平台：数字化时代企业连接用户的 AI 中枢

随着互联网技术的飞速发展&#xff0c;消费者期望能够随时随地与企业进行交流。在线客服平台作为连接企业与客户的重要桥梁&#xff0c;不仅优化了客户体验&#xff0c;还提升了企业的服务效率和市场竞争力。本文将探讨在线客服平台的重要性、技术进展、实际应用&#xff0c;并…...

编程新知 2025/10/17 1:33:35

vue3 字体颜色设置的多种方式

在Vue 3中设置字体颜色可以通过多种方式实现&#xff0c;这取决于你是想在组件内部直接设置&#xff0c;还是在CSS/SCSS/LESS等样式文件中定义。以下是几种常见的方法&#xff1a; 1. 内联样式 你可以直接在模板中使用style绑定来设置字体颜色。 <template><div :s…...

编程新知 2025/10/6 20:49:11

在鸿蒙HarmonyOS 5中使用DevEco Studio实现录音机应用

1. 项目配置与权限设置 1.1 配置module.json5 {"module": {"requestPermissions": [{"name": "ohos.permission.MICROPHONE","reason": "录音需要麦克风权限"},{"name": "ohos.permission.WRITE…...

编程新知 2025/10/3 17:30:30

什么？连接服务器也能可视化显示界面？：基于X11 Forwarding + CentOS + MobaXterm实战指南

文章目录 什么是X11？环境准备实战步骤1️⃣ 服务器端配置（CentOS）2️⃣ 客户端配置（MobaXterm）3️⃣ 验证X11 Forwarding4️⃣ 运行自定义GUI程序(Python示例)5️⃣ 成功效果![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/55aefaea8a9f477e86d065227851fe3d.pn…...

编程新知 2025/10/2 17:12:14

SQL Server 触发器调用存储过程实现发送 HTTP 请求

文章目录 需求分析解决第 1 步：前置条件，启用 OLE 自动化方式 1：使用 SQL 实现启用 OLE 自动化方式 2：Sql Server 2005启动OLE自动化方式 3：Sql Server 2008启动OLE自动化第 2 步：创建存储过程第 3 步：创建触发器扩展 - 如何调试？第 1 步：登录 SQL Server 2008第 2 步…...

编程新知 2025/9/11 6:56:11

Docker、Wsl 打包迁移环境

电脑需要开启wsl2 可以使用wsl -v 查看当前的版本 wsl -v WSL 版本&#xff1a; 2.2.4.0 内核版本&#xff1a; 5.15.153.1-2 WSLg 版本&#xff1a; 1.0.61 MSRDC 版本&#xff1a; 1.2.5326 Direct3D 版本&#xff1a; 1.611.1-81528511 DXCore 版本&#xff1a; 10.0.2609…...

编程新知 2025/10/14 5:08:48