HTML教程(3)——常用标签(1)

一、图片标签

1.场景:在网页中显示图片

2.基本写法:

<img src="">

3.特点:单标签,img标签需要展示对应的效果,需要借助其属性进行设置

4常用属性:

  • src:其属性值为目标图片的路径,图片标签中必须写入该属性并赋予其属性值,才会有相应的效果;
  • alt:其属性值为替换文本,当图片加载失败时,才会显示alt中的文本,反之则不会显示;
  • title:其属性值为提示文本,当鼠标悬停时,才会显示的文本;

二、音频标签和视频标签的介绍

1.场景:在页面中插入视频或音频

2.基本写法:

  • 音频:
    <audio src="" controls></audio>
  • 视频:

    <video src="" controls></video>

3.常见属性:

  • src:属性值为视频音频的路径(音频标签目前支持MP3、Wav、Ogg三种,视频标签目前支持MP4、WebM、Ogg三种格式);
  • controls:该属性没有属性值,作用是显示播放的插件;
  • autoplay:,该属性没有属性值,作用是自动播放(部分浏览器不支持);
  • loop:该属性没有属性值,作用是自动播放;

三、超链接标签

1.场景:需要从一个页面跳转到另一个页面;

2.基本写法:

<a href=""></a>

3.常见属性:

  • href:该属性的属性值是一个地址,也可以填一个”#“标识空链接;
  • target:该属性的作用是指定一个网页的打开形式,其属性值为”_self“(默认值)时,在当前窗口中跳转;其属性值为”_blank“时,在新窗口中跳转,保留原网页;

四、列表

1.无序列表

(1)场景:在网页中表示一组无顺序之分的列表;

(2)标签组成:ul表示无序列表的整体,用于包裹li标签;li表示无序列表的每一项,用于包裹每一行的内容;

(3)基本写法:

<ul><li>内容1</li><li>内容2</li><li>内容3</li>
</ul>

效果:

  • 内容1
  • 内容2
  • 内容3

(4)注意点:列表的每一项前默认显示圆点标识。

2.有序列表

(1)场景:在网页中表示一组有顺序之分的列表;

(2)标签组成:ol表示有序列的整体,用于包裹li标签;li表示有序列表的每一项,用于包裹每一行的内容;

(3)基本写法:

<ol><li>内容1</li><li>内容2</li><li>内容3</li>
</ol>

效果:

  1. 内容1
  2. 内容2
  3. 内容3

3.自定义列表

(1)场景:在网页的底部导航中通常会使用自定义列表实现

(2)标签组成:dl表示自定义列表的整体,用于包裹dt/dd的标签;dt表示自定义列表的主题;dd表示的自定义列表的针对主题的每一项内容;

(3)注意点:dd前会默认显示缩进效果;dl标签中只允许包含dt/dd的标签;

(4)基本写法:

<dl><dt>主题一</dt><dd>内容1</dd><dd>内容2</dd><dd>内容3</dd><dt>主题二</dt><dd>内容1</dd><dd>内容2</dd><dd>内容3</dd>
</dl>

效果:

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

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

相关文章

【框架】Spring 框架重点解析

Spring 框架重点解析 1. Spring 框架中的单例 bean 是线程安全的吗&#xff1f; 不是线程安全的 Spring 框架中有一个 Scope 注解&#xff0c;默认的值是 singleton&#xff0c;即单例的&#xff1b;因为一般在 Spring 的 bean 对象都是无状态的&#xff08;在生命周期中不被…

解决Mybatis报Type interface *.*Mapper is not known to the MapperRegis

解决Mybatis报Type interface *.*Mapper is not known to the MapperRegis 问题发现问题解决方法一&#xff1a;检查Mapper文件的namespace路径是否正确方法二&#xff1a;使用其他方法是否正确 问题发现 在学习MyBatis框架的时候&#xff0c;不使用 XML 构建 SqlSessionFacto…

Project_Euler-44 题解

Project_Euler-44 题解 题目 思路 题目给出了一个性质&#xff0c;让我在对应性质的数据中找出目标值&#xff0c;这种问题首先想到的就是枚举。 我们可以枚举 P k P_k Pk​ &#xff0c;对于每一个 P k P_k Pk​ &#xff0c;我们再枚举 P j P_j Pj​&#xff0c; P j P_…

【ue5】滑铲系统蓝图笔记

大致逻辑如下&#xff1a; 一、导入动画 滑铲蹲待机蹲行走 导入到文件夹中 可以右键设置颜色&#xff0c;便于区分。 二、调整动画 1.启动根运动 启动根运动后&#xff0c;人物才可以位移&#xff0c;不然只能在原地。 打开动画序列&#xff0c;勾选启用根运动Enabled…

用node或者vscode开启一个简单的本地server服务器,加载html网页

使用Live Server 想要加载本地html页面可以快速能让它在你本地浏览器中打开&#xff0c;可以有好多种方式&#xff0c;如果你有使用vscode&#xff0c;可以安装一个插件&#xff1a;Live Server&#xff0c;然后直接在vscode中直接右键就可以开启这个服务&#xff1a; 安装好之…

C++基于多设计模式下的同步异步日志系统day2

&#x1f4df;作者主页&#xff1a;慢热的陕西人 &#x1f334;专栏链接&#xff1a;C基于多设计模式下的同步&异步日志系统 &#x1f4e3;欢迎各位大佬&#x1f44d;点赞&#x1f525;关注&#x1f693;收藏&#xff0c;&#x1f349;留言 主要内容实现了日志代码设计的实…

select,poll和epoll有什么区别

它们都是NIO中多路复用的三种实现机制&#xff0c;是由linux操作系统提供的。 用户空间和内核空间&#xff1a;操作系统为了保证系统安全&#xff0c;将内核分为两个部分&#xff0c;一个是用户空间&#xff0c;一个是内核空间。用户空间不能直接访问底层的硬件设备&#xff0…

IT廉连看——Uniapp——配置文件pages

IT廉连看——Uniapp——配置文件pages [IT廉连看] 本堂课主要为大家介绍pages.json这个配置文件 一、打开官网查看pages.json可以配置哪些属性。 下面边写边讲解 新建一个home页面理解一下这句话。 以下一些页面的通用配置 通用设置里我们可以对导航栏和状态栏进行一些设…

Android修行手册-集成Python开发环境

Unity3D特效百例案例项目实战源码Android-Unity实战问题汇总游戏脚本-辅助自动化Android控件全解手册再战Android系列Scratch编程案例软考全系列Unity3D学习专栏蓝桥系列ChatGPT和AIGC &#x1f449;关于作者 专注于Android/Unity和各种游戏开发技巧&#xff0c;以及各种资源分…

Apache Flink连载(三十五):Flink基于Kubernetes部署(5)-Kubernetes 集群搭建-1

🏡 个人主页:IT贫道-CSDN博客 🚩 私聊博主:私聊博主加WX好友,获取更多资料哦~ 🔔 博主个人B栈地址:豹哥教你学编程的个人空间-豹哥教你学编程个人主页-哔哩哔哩视频 目录 ​编辑

Python爬虫——Urllib库-2

编解码 问题引入 例如&#xff1a; https://www.baidu.com/s?wd章若楠 https://www.baidu.com/s?wd%E7%AB%A0%E8%8B%A5%E6%A5%A0 第二部分的一串乱码就是章若楠 如果这里是写的章若楠就会 产生这样的错误 所以我们就可以使用get请求方式的quote方法了 get请求方式的q…

laravel ApiResponse接口统一响应封装

一&#xff0c;新增接口返回码配置文件 在config中新增配置文件apicode.php <?phpreturn [ apicodes>[/*** Message("OK")* 对成功的 GET、PUT、PATCH 或 DELETE 操作进行响应。也可以被用在不创建新资源的 POST 操作上*/HTTP_OK > 200,/*** Message(&qu…

使用el-form之表单校验自动定位到报错位置问题,,提升用户体验

需求描述 由于需要填写的表单项太多&#xff0c;提交的时候校验不通过&#xff0c; 如果没填写的表单项在最上面&#xff0c;用户看不到不知道发生了啥&#xff0c; 所以需要将页面滚动定位到第一个报错的表单项位置&#xff0c;提升用户体验实现步骤 1. 给form表单添加ref …

数据中心GPU集群高性能组网技术分析

数据中心GPU集群组网技术是指将多个GPU设备连接在一起&#xff0c;形成一个高性能计算的集群系统。通过集群组网技术&#xff0c;可以实现多个GPU设备之间的协同计算&#xff0c;提供更大规模的计算能力&#xff0c;适用于需要大规模并行计算的应用场景。 常用的组网技术&…

1209. 带分数 刷题笔记

思路 暴力匹配 读入目标数 n 看n是否与ab/c相等 因为c里面的除法是整除 我们将 nab/c 转换为 c*na*cb 那么如何获得a,b&#xff0c;c 依题意 a&#xff0c;b&#xff0c;c三个数由1-9九个数字组成 且每个数字只能出现一次 由此 我们可以搜出123456789的全部排列方式…

我做的app上架应用市场一天,快破400下载量,0差评

上集说到&#xff0c;我做了一个叫QB音乐的安卓app&#xff0c;经过一段时间的自我使用与测试终于算发布了。我昨天顺便把它上架了奇妙应用市场&#xff0c;截止目前3月1号过去了一天&#xff0c;下载量快到400&#xff0c;0差评。看来还是能正常使用的。 一、为什么做这个ap…

CleanMyMac X2024免费Mac电脑清理和优化工具

CleanMyMac X是一款专业的 Mac 清理和优化工具&#xff0c;它具备一系列强大的功能&#xff0c;可以帮助用户轻松管理和维护他们的 Mac 电脑。以下是一些关于 CleanMyMac X 的主要功能和特点&#xff1a; 智能清理&#xff1a;CleanMyMac X 能够智能识别并清理 Mac 上的无用文件…

深入剖析k8s-Pod篇

为什么需要Pod&#xff1f; 进程是以进程组的方式组织在一起。受限制容器的“单进程模型”&#xff0c; 成组调用没有被妥善处理&#xff08;资源调用有限&#xff09;&#xff0c;使用资源囤积则导致复杂度上升。 在k8s项目中&#xff0c;Pod的实现需要使用一个中间容器——…

css【详解】—— 圣杯布局 vs 双飞翼布局 (含手写清除浮动 clearfix)

两者功能效果相同&#xff0c;实现方式不同 效果预览 两侧宽度固定&#xff0c;中间宽度自适应&#xff08;三栏布局&#xff09;中间部分优先渲染允许三列中的任意一列成为最高列 圣杯布局 通过左右栏填充容器的左右 padding 实现&#xff0c;更多细节详见注释。 <!DOCTYP…

《无线网络技术》考试版笔记

第一章 无线网络介绍 什么是多径效应&#xff0c;如何去克服&#xff1a; 在发射机和接收机之间没有明显的直线路径时&#xff0c;就会产生多径传播。如果两个信号彼此叠加&#xff0c;那么接收设备就无法正确解调信号&#xff0c;无法还原为它的原始数据形式。 可以稍微调整接…