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

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

news 2025/7/3 17:20:21

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

IDEA运行Tomcat出现乱码问题解决汇总

最近正值期末周&#xff0c;有很多同学在写期末Java web作业时&#xff0c;运行tomcat出现乱码问题&#xff0c;经过多次解决与研究&#xff0c;我做了如下整理&#xff1a; 原因&#xff1a; IDEA本身编码与tomcat的编码与Windows编码不同导致&#xff0c;Windows 系统控制台…...

编程新知 2025/7/1 21:15:25

AI-调查研究-01-正念冥想有用吗？对健康的影响及科学指南

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; &#x1f680; AI篇持续更新中&#xff01;&#xff08;长期更新&#xff09; 目前2025年06月05日更新到&#xff1a; AI炼丹日志-28 - Aud…...

编程新知 2025/6/30 11:49:08

生成xcframework

打包 XCFramework 的方法 XCFramework 是苹果推出的一种多平台二进制分发格式&#xff0c;可以包含多个架构和平台的代码。打包 XCFramework 通常用于分发库或框架。 使用 Xcode 命令行工具打包 通过 xcodebuild 命令可以打包 XCFramework。确保项目已经配置好需要支持的平台…...

编程新知 2025/6/20 13:53:42

Debian系统简介

目录 Debian系统介绍 Debian版本介绍 Debian软件源介绍 软件包管理工具dpkg dpkg核心指令详解 安装软件包 卸载软件包 查询软件包状态 验证软件包完整性 手动处理依赖关系 dpkg vs apt Debian系统介绍 Debian 和 Ubuntu 都是基于 Debian内核 的 Linux 发行版&#xff…...

编程新知 2025/7/1 11:28:05

Qt Http Server模块功能及架构

Qt Http Server 是 Qt 6.0 中引入的一个新模块&#xff0c;它提供了一个轻量级的 HTTP 服务器实现&#xff0c;主要用于构建基于 HTTP 的应用程序和服务。 功能介绍&#xff1a; 主要功能 HTTP服务器功能&#xff1a; 支持 HTTP/1.1 协议 简单的请求/响应处理模型 支持 GET…...

编程新知 2025/6/16 12:49:42

微服务商城-商品微服务

数据表 CREATE TABLE product (id bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT 商品id,cateid smallint(6) UNSIGNED NOT NULL DEFAULT 0 COMMENT 类别Id,name varchar(100) NOT NULL DEFAULT COMMENT 商品名称,subtitle varchar(200) NOT NULL DEFAULT COMMENT 商…...

编程新知 2025/6/21 16:15:28

uniapp微信小程序视频实时流+pc端预览方案

方案类型技术实现是否免费优点缺点适用场景延迟范围开发复杂度​WebSocket图片帧​定时拍照Base64传输✅ 完全免费无需服务器 纯前端实现高延迟高流量 帧率极低个人demo测试 超低频监控500ms-2s⭐⭐​RTMP推流​TRTC/即构SDK推流❌ 付费方案 &#xff08;部分有免费额度&#x…...

编程新知 2025/6/16 11:51:11

ardupilot 开发环境eclipse 中import 缺少C++

目录 文章目录 目录摘要1.修复过程摘要 本节主要解决ardupilot 开发环境eclipse 中import 缺少C++，无法导入ardupilot代码，会引起查看不方便的问题。如下图所示 1.修复过程 0.安装ubuntu 软件中自带的eclipse 1.打开eclipse—Help—install new software 2.在 Work with中…...

编程新知 2025/6/25 22:08:54

怎么让Comfyui导出的图像不包含工作流信息，

为了数据安全&#xff0c;让Comfyui导出的图像不包含工作流信息&#xff0c;导出的图像就不会拖到comfyui中加载出来工作流。 ComfyUI的目录下node.py 直接移除 pnginfo&#xff08;推荐&#xff09;​​ 在 save_images 方法中&#xff0c;​​删除或注释掉所有与 metadata …...

编程新知 2025/6/21 15:45:49

麒麟系统使用-进行.NET开发

文章目录 前言一、搭建dotnet环境1.获取相关资源2.配置dotnet 二、使用dotnet三、其他说明总结 前言 麒麟系统的内核是基于linux的&#xff0c;如果需要进行.NET开发&#xff0c;则需要安装特定的应用。由于NET Framework 是仅适用于 Windows 版本的 .NET&#xff0c;所以要进…...

编程新知 2025/6/27 9:04:28