目录

一、添加多媒体

1.添加网页图片

2.添加网页音频

3.添加网页视频

二、创建容器

1.

标签

2.布局

三、创建表格

1.表格标签

2.添加表格表头

3.添加表格标题


一、添加多媒体

在 HTML 网页中可以轻松地使用标签来添加图片、音频、视频等多媒体,而这些多媒体并不需要读者获取到实际的文件或上传到网页中,只需要找到它们的网址(url)即可。

1.添加网页图片

在网页中插入图片可以使用<img>标签(<img>是单标签,即在整个网页中只需要 1 个<img>标签)来实现。其使用形式如下:

<img src="网址" alt="文字" width="304px" height="226px">

<img>标签中存在多个属性,这里列举了常见的srcaltwidthheight属性。
属性src:指必须填入的属性,表明插入的图片的 url。
属性alt:指当src链接的图片 url 失效了或因其他原因无法显示图片时出现的提示性文字。
属性widthheight:表示图片的宽度和高度,其单位为px,表示像素。当只填入一个参数时,默认按原尺寸比例自动缩放。

示例代码:

<body><h1 >我是标题1</h1><img src="https://cdn.ptpress.cn/uploadimg/Material/978-7-115-41773-2/72jpg/41773_s300.jpg" alt="图片丢失了" width="200px">
</body>

运行结果: 

第 3 行代码链接了人民邮电出版社官网中某一本书的封面图片,在实验时一定要找到图片的网络源地址(即 url),图片的 url 一般带有图片的格式后缀,例如以上代码中图片网址的后缀为.jpg。属性width="200px"表示将图片的宽度设置为 200 像素,图片的高度会随着宽度值的变化而按原尺寸比例缩放。

保存代码文件并使用浏览器打开后的网页显示效果如图所示。如果将第 3 行代码中图片的 url 修改为一个错误的 url,图片将无法显示在网页中,而且会出现属性alt的内容 “图片丢失了”,如图所示,即当图片 url 错误或失效时都会显示 “图片丢失了”。


2.添加网页音频

在 HTML 中可以使用<audio>标签实现在网页中插入音频。其使用形式如下:

<audio controls='controls' src="音频地址.mp3" type="音频类型">当浏览器不支持播放时的提示信息</audio>

属性controls:为网页音频播放提供控件,例如暂停、播放、音量调节等。
属性src:用于链接音频文件的地址。音频文件的地址一般以.mp3.wav等为后缀。读者需要找到一个纯音频的网址,而不是网页中包含音频和其他元素信息的网址。
属性type:表示音频文件的类型。通常情况下.mp3格式为audio/mpeg.ogg格式为audio/ogg.wav格式为audio/wav

<audio>标签中包含文字信息。某些浏览器不支持<audio>标签,因此当浏览器无法播放音频时,网页会显示文字 “当浏览器不支持播放时的提示信息”。

示例代码:

<body>
<h1 >我是标题1</h1>
<audio controls="controls" src="音乐.mp3">音乐丢失了</audio>
</body>

运行结果: 

第 3 行代码使用了<audio>标签,并通过属性controls设置在网页中显示播放控件,通过属性src链接音频url。由于网址随时会更新,为避免网址被恶意更新导致进入非法网站的可能,编者不给出具体的音频网址,读者可以通过搜索引擎找到一个音频网址来进行实验。


3.添加网页视频

在 HTML 中可以使用<video>标签实现在网页中插入视频。其使用形式如下:

<video src="视频网址" controls="controls" width="宽度值" height="高度值" autoplay loop muted> </video>

属性src:需要播放的视频的 url。视频文件的链接地址一般以.mp4为后缀。读者需要找到一个纯视频网址,而不是网页中包含视频和其他元素信息的网址。
属性controls:为网页视频播放提供控件,例如暂停、播放、音量调节等。
属性widthheight:用于设置视频的宽度和高度,单位为px,即像素。
属性autoplay:表示一旦通过 url 链接到视频文件便会自动播放视频。
属性loop:设置视频循环播放。
属性muted:设置视频播放时默认静音。

示例代码:

<body><h1 >播放视频啦</h1><video src="https://视频网址.mp4" controls="controls" width="500"></video>
</body>

运行结果:

 

第 3 行代码中插入了视频标签,并通过属性controls设置在网页中显示播放控件。由于网址会更新,为避免网址更新导致进入恶意网站的可能,编者暂不给出具体的视频网址,读者可以通过搜索引擎找到一个纯视频网址来进行实验。


二、创建容器

为了让网页的布局更加美观,HTML 提供了容器的概念,即在网页中占用一块区域,在此区域内可以添加多种标签,且这些标签只会在该区域内显示,使得标签有了各自的容器,能在各自的区域内显示内容。

1.<div> 标签

在 HTML 中使用<div>标签来建立一个容器。其使用形式如下:

<div>其他标签</div>

<div>标签所包含的标签都隶属于同一个容器,当使用<div>标签设置属性样式(即style通用样式)时,整个容器都会显示此样式。

示例代码:

<body><h1 >我是标题1</h1><div style="background: antiquewhite"><h2>我是标题2</h2><p>我这里可以输入一个段落</p></div>
</body>

运行结果: 

第 2 行代码设置了标题标签,此标签并不在容器内,因此不受容器样式的影响。
第 3 行代码使用<div>标签创建了一个容器,并设置了背景颜色。
第 4 行和第 5 行代码分别创建了<h2><p>标签,这两个标签都包含在同一个容器中。


2.布局

当需要对网页页面进行布局时,需要设置<div>标签的相应属性。例如以下使用形式:

<div style="width:容器宽度; height:容器高度;float:容器位置"></div>

参数widthheight:表示容器的宽度和高度,长度单位为px,即像素。
参数float:表示容器的位置,值可以为right(靠右侧)、left(靠左侧)、bottom(靠底部)、top(靠顶部)。

示例代码:

<body><h1 >我是标题1</h1><div style="background: antiquewhite; width: 500px;height: 400px" ><h2>我是标题2</h2><div style="background: brown; width: 200px; height:300px;float: left"><p>我这里可以输入一个段落</p><p>python <span style="color:blue">大</span> 学习</p></div><div style="background:darkcyan; width:300px;height:300px;float:right"><h3>我是标题3</h3></div><p>最后一段内容</p></div>
</body>

运行结果: 

该代码中包含 3 个<div>容器标签,其中第 1 个容器标签中包含另外两个容器标签。

第 3 行代码创建了第 1 个容器(容器 1),并设置容器的宽度为500px,高度为400px,背景颜色为antiquewhite

第 5 行代码创建了第 2 个容器(容器 2),第 9 行代码创建了第 3 个容器(容器 3),这两个容器都隶属于第 1 个容器。且容器 2 的宽度为200px,高度为300px,位置为靠左侧。容器 3 由于位置是靠右侧,因此会紧靠容器 2。容器 2 的右边还剩余大量空间,因此容器 3 位于容器 2 的右边。若容器 2 右边剩余空间不够容纳容器 3,则会换到容器 2 下面的位置,并且超出容器 1 的边界。


三、创建表格

在 HTML 网页中能比较方便地创建表格,通常来说表格也可以作为网页页面的布局。

1.表格标签

在 HTML 中可以使用表格标签<table>创建表格,其中表格的行数由<tr>标签的个数决定,表格的列数由<tr>标签中<td>标签的个数决定。

示例代码:

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

运行结果: 

第 3 行代码使用<table>标签创建了表格,其中属性border表示表格的边框样式,其数据类型为数值类型。<table>标签中包含两个<tr>标签,表示表格一共有两行。在两个<tr>标签中都各自包含两个<td>标签,表示每一行有两个单元格。单元格中将显示<td>标签对之间的内容。


2.添加表格表头

如果需要在表格中插入表头,可以使用<th>标签来实现。其使用形式如下:

<th colspan='2'>表格表头内容</th>

属性colspan:表示表头单元格可横跨的列数。也可以使用rowspan属性,表示表头单元格可横跨的行数。

示例代码:

<body>
<h1 >我是标题1</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>

运行结果:

第 4 行代码设置表头的内容为 “我是表格表头内容”,表头单元格可横跨的列数为 2。


3.添加表格标题

创建表格标题可以使用标签<caption>来实现。其使用形式如下:

<caption>标题内容</caption>

<caption>标签必须位于<table>标签内,且每个表格只能定义一个标题,默认标题位于表格的上方,且居中对齐。

示例代码:

<body>
<h1 >添加表格标题</h1>
<table border="2"><caption>我是表格标题</caption><tr><td>第1行中的第1格</td><td>第1行中的第2格</td></tr><tr><td>第2行中的第1格</td><td>第2行中的第2格</td></tr>
</table>
</body>

运行结果: 

第 4 行代码在表格中添加了表格标题标签<caption>,且其内容为 “我是表格标题”。如果不使用表格标题标签,而是用文本标签实现将内容设置在表格的上方,会导致表格无法跟着文本标签内容的移动而移动。 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.pswp.cn/diannao/91446.shtml
繁体地址,请注明出处:http://hk.pswp.cn/diannao/91446.shtml
英文地址,请注明出处:http://en.pswp.cn/diannao/91446.shtml

如若内容造成侵权/违法违规/事实不符,请联系英文站点网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

微服务架构中实现跨服务的字段级权限统一控制

结合集中式权限管理、分布式上下文传递、动态策略执行等技术 ​​一、核心架构设计​​ ​​1. 分层控制模型​​ ​​网关层​​:统一校验用户身份与基础权限,拦截非法请求。 ​​服务层​​:基于用户权限动态过滤数据字段,实现业务级控制。 ​​策略中心​​:集中管理权…

【实现100个unity特效之27】使用unity的ShaderGraph实现一个带裁剪边缘光的裁剪效果(2d3d通用)

文章目录普通裁剪效果1、创建一个Lit Shader Graph2、ShaderGraph前置配置3、添加节点4、效果5、修改裁剪方向带边缘色的裁剪1、在裁剪的基础上添加裁剪边缘光2、边缘的亮度3、修改裁剪方向4、效果5、我们可以代码控制它的变化&#xff0c;如下2D3D游戏通用专栏推荐完结普通裁剪…

Android Scoped Storage适配完全指南

Android Scoped Storage适配完全指南关键词&#xff1a;Android、Scoped Storage、适配、存储权限、文件访问摘要&#xff1a;本文将全面介绍Android Scoped Storage的相关知识&#xff0c;从背景出发&#xff0c;详细解释核心概念&#xff0c;阐述其原理和架构&#xff0c;给出…

Typecho集成PHPMailer实现邮件订阅功能完整指南

文章目录 Typecho使用PHPMailer实现文章推送订阅功能详解 1. 背景与需求分析 1.1 为什么选择PHPMailer 1.2 功能需求 2. 环境准备与配置 2.1 安装PHPMailer 2.2 数据库设计 3. 核心功能实现 3.1 邮件服务封装类 3.2 订阅功能实现 3.2.1 订阅表单处理 3.2.2 确认订阅处理 3.3 文…

无线-二层组网-直接转发

文章目录无线二层组网直接转发&#x1f3e1;作者主页&#xff1a;点击&#xff01; &#x1f916;Datacom专栏&#xff1a;点击&#xff01; ⏰️创作时间&#xff1a;2025年07月16日08点00分 无线二层组网 直接转发 本地转发中所有的沿途都需要配置对应VLAN的通过&#xff…

gin go-kratos go-zero框架对比

Gin、Go-Kratos 和 Go-Zero 是 Go 语言中三种常见的服务框架&#xff0c;它们在定位、设计理念、复杂度和适用场景上差异较大。下面我们从功能定位、设计理念、优劣对比、使用建议等维度进行深入对比。&#x1f9ed; 一句话总结框架定位Gin轻量级、高性能的 HTTP 路由框架Go-Kr…

4G模块 A7670发送英文短信到手机

命令说明ATi显示产品的标志信息 ATCIMI查询IMSI ATCICCID从SIM卡读取ICCID ATCGSN查询产品序列号 ATCPIN查询卡状态 ATCSQ查询信号强度 ATCGATT查询当前PS域状态 ATCREG查询GPRS注册状态 ATCEREG查询4G注册状态 ATCGPADDR查询PDP地址 ATCMGF选择短信格式 ATCMGS发送短信流程第一…

归并排序递归法和非递归法的简单简单介绍

基本思想&#xff1a; 归并排序&#xff08;MERGE-SORT&#xff09;是建立在归并操作上的一种有效的排序算法,该算法是采用分治法&#xff08;Divide and Conquer&#xff09;的一个非常典型的应用。将已有序的子序列合并&#xff0c;得到完全有序的序列&#xff1b;即先使每个…

webrtc之子带分割下——SplittingFilter源码分析

文章目录前言一、频带分割过程1.SplittingFilter的创建2.频带分割整体流程1&#xff09;分割时机2&#xff09;分割规则3&#xff09;分割核心代码3.频带合并二、算法实现1.实现原理介绍2.All pass QMF系统源码1&#xff09;提高精度2&#xff09;经过串联全通滤波器3&#xff…

Java运维之Tomcat升级

Tomcat升级准备工作 下述所有过程中,包含了两种升级方式,一种是备份旧版本的 bin 和 lib,将新版本的 bin 和 lib 对旧版本进行覆盖;另一种是直接备份旧版本的Tomcat包,运行新版本,将旧版本的配置文件(conf/ * )和应用(webapps/ * )等同步到新版本。 1. 到官网下载指…

MySQL的可重复读隔离级别实现原理分析

MySQL 的 可重复读&#xff08;Repeatable Read, RR&#xff09; 隔离级别主要通过 多版本并发控制&#xff08;Multi-Version Concurrency Control, MVCC&#xff09; 和 锁机制&#xff08;特别是间隙锁&#xff09; 来实现的。其核心目标是&#xff1a;在一个事务内&#xf…

利用Java自定义格式,循环导出数据、图片到excel

利用Java自定义格式&#xff0c;循环导出数据、图片到excel1、自定义格式循环导出数据1.1.设置格式1.1.1、居中样式1.1.2、应用样式到合并区域1.1.3、合并单元格1.1.4、设置列宽1.2、写入数据1.2.1、创建标签头部1.2.2、写入标签内容2、自定义格式循环导出图片2.1、设置格式并插…

SAP学习笔记 - 开发45 - RAP开发 Managed App New Service Definition,Metadata Extension

上一章讲了在 Data Model View ( CDS View for BO Structure )基础上创建 Projection View ( CDS View for BO Projection )。 SAP学习笔记 - 开发44 - RAP开发 Managed App 建 Projection View&#xff0c;Provider Contract&#xff0c;用 redirected to 设定父子关系-CSDN博…

React强大且灵活hooks库——ahooks入门实践之高级类hook(advanced)详解

什么是 ahooks&#xff1f; ahooks 是一个 React Hooks 库&#xff0c;提供了大量实用的自定义 hooks&#xff0c;帮助开发者更高效地构建 React 应用。其中高级类 hooks 是 ahooks 的一个重要分类&#xff0c;专门用于处理一些高级场景&#xff0c;如受控值、事件发射器、性能…

计算机网络——数据链路层(25王道最新版)

数据链路层前言数据链路层的功能封装成帧&#xff08;组帧&#xff09;字符计数法字节填充法零比特填充法违规编码法小节差错控制检错编码奇偶校验码CRC校验码&#xff08;循环冗余校验码&#xff09;基本思想如何构造如何检错纠错纠错编码海明校验码设计思路求解步骤&#xff…

【PTA数据结构 | C语言版】字符串替换算法

本专栏持续输出数据结构题目集&#xff0c;欢迎订阅。 文章目录题目代码题目 请编写程序&#xff0c;将给定主串 s 中的子串 sub_s 替换成另一个给定字符串 t&#xff0c;再输出替换后的主串 s。 输入格式&#xff1a; 输入给出 3 个非空字符串&#xff0c;依次为&#xff1a…

事物生效,订单类内部更新订单

代码如下以下代码1不生效&#xff0c;2生效解决方案1&#xff0c;外层方法加注解&#xff0c;内层不加2&#xff0c;不要拆分方法&#xff0c;把更新订单操作放在带事物的大方法中3&#xff0c;拆方法&#xff08;内部&#xff09;&#xff0c;注入自己&#xff0c;用代理对象调…

非对称加密:RSA

文章目录 非对称加密:RSA 1、RSA 加解密 2、RSA 生成密钥对(公钥、私钥)、加解密 参考资料 非对称加密:RSA 1、RSA 加解密 <!-- RSA --><!-- 引入jsencrypt库 --><script src="https://cdn.bootcdn.net/ajax/libs/jsencrypt/3.3.2/jsencrypt.min.js&q…

MongoDB 数据库 启用访问控制

0. 最近服务器安装了 MongoDB 被勒索了 测试服务器安装了 MongoDB 等&#xff0c;开放了 27017 对所有 ip。 哈哈哈哈哈哈&#xff0c;问就是有点犯懒&#xff0c;之前都是只允许自己的 ip。 好家伙&#xff0c;然后没过几个小时&#xff0c;数据库集合被清空&#xff0c;只留…

【Unity Sprite属性拓展】

Unity Inspector 精灵图预览为 Unity 中的 Sprite 类型属性提供了​​增强版的 Inspector 显示​​&#xff0c;在保留标准精灵选择功能的基础上&#xff0c;添加了大型预览图和精灵名称显示功能代码 using UnityEngine; using UnityEditor;// 1️⃣ 告诉 Unity&#xff1a;所有…