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.hqwc.cn/news/503720.html

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

相关文章

Linux系统编程7--线程 写个测试脚本

Linux系统编程7–线程_写个测试脚本 参考博客&#xff1a; Linux多线程编程初探 - 峰子_仰望阳光 - 博客园 (cnblogs.com) 我的PC是8核*16进程&#xff0c;所以在固定的时间点&#xff0c;我可以同时运行8 * 16的进程&#xff0c;更多的线程&#xff08;任务管理器&#xff09;…

大数据和机器学习在气象预报中的应用-张平文院士

报告链接&#xff1a;张平文院士 -- 大数据和机器学习在气象预报中的应用_哔哩哔哩_bilibili

MATLAB R2022b 安装教程

MATLAB R2022b 安装教程 MathWorks 于2022年9月发布了 MATLAB 和 Simulink 产品系列的最新版本 Matlab R2022b版本 &#xff0c;加入两个新产品&#xff1a; Medical Imaging Toolbox — 可视化、配准、分割和标注二维及三维医学图像Simscape Battery — 设计和仿真电池和储能系…

ceph性能测试

查看集群状态 ceph -s查看osd情况 ceph osd tree创建pg_num为60的pool&#xff0c;名为test。 ceph osd pool create test 60rados bench用于测试rados存储池底层性能&#xff0c;该工具可以测试写、顺序读、随机读三种类型 rados bench -p <pool_name> <seconds&…

Linux网络编程——网络基础

Linux网络编程——网络基础 1. 网络结构模式1.1 C/S 结构1.2 B/S 结构 2. MAC 地址3. IP地址3.1 简介3.2 IP 地址编址方式 4. 端口4.1 简介4.2 端口类型 5. 网络模型5.1 OSI 七层参考模型5.2 TCP/IP 四层模型 6. 协议6.1 简介6.2 常见协议6.3 UDP 协议6.4 TCP 协议6.5 IP 协议6…

Linux中的动静态库

目录 一、静态库 &#xff08;1&#xff09;静态库的优缺点&#xff1a; &#xff08;2&#xff09;Linux下静态库的创建和执行 1.直接编译​编辑 2.指定路径和库名 3.用LIBRARY_PATH环境变量来配置路径 二、动态库 &#xff08;1&#xff09;动态库的优缺点 &#xff…

基于JAVA的生鲜超市销售系统 开源项目

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 商品档案模块2.2 商品进货模块2.3 商品销售模块2.4 供应商模块2.5 活动管理模块2.6 消息通知模块 三、系统展示四、核心代码4.1 查询商品4.2 商品入库4.3 商品出库4.4 查询商品类型4.5 查询店铺活动 五、免责说明 一、摘…

CloudCanal x Hive 构建高效的实时数仓

简述 CloudCanal 最近对于全周期数据流动进行了初步探索&#xff0c;打通了Hive 目标端的实时同步&#xff0c;为实时数仓的构建提供了支持&#xff0c;这篇文章简要做下分享。 基于临时表的增量合并方式基于 HDFS 文件写入方式临时表统一 Schema任务级的临时表 基于临时表的…

MWC 2024丨美格智能发布全新5G-A模组及FWA解决方案,将5.5G带入现实

2月26日&#xff0c;在MWC 2024世界移动通信大会上&#xff0c;美格智能正式宣布推出5G-A模组SRM817WE以及全新的5G-A FWA解决方案&#xff0c;包含5G-A CPE解决方案SRT858M、5G-A MiFi解决方案SRT878H和5G-A ODU解决方案SRT853MX&#xff0c;旨在进一步提升网络性能&#xff0…

持安科技孙维伯:零信任在攻防演练下的最佳实践|DISCConf 2023

近日&#xff0c;在2023数字身份安全技术大会上&#xff0c;持安科技联合创始人孙维伯应主办方的特别邀请&#xff0c;发表了主题为“零信任在攻防演练下的最佳实践”的演讲。 孙维伯在2023数字身份安全技术大会上发表演讲 以下为本次演讲实录&#xff1a; 我是持安科技的联合…

网络卡顿是怎么回事?

网络卡顿是指在网络通信过程中&#xff0c;数据传输出现延迟或中断&#xff0c;导致用户在使用网络时出现卡顿、延迟或不流畅的情况。例如&#xff1a;系统响应时间长&#xff0c;网页加载速度慢&#xff1b;视频或游戏掉帧&#xff0c;导致画面卡顿或不流畅&#xff1b;音视频…

基于springboot+vue的公寓报修管理系统

博主主页&#xff1a;猫头鹰源码 博主简介&#xff1a;Java领域优质创作者、CSDN博客专家、阿里云专家博主、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战&#xff0c;欢迎高校老师\讲师\同行交流合作 ​主要内容&#xff1a;毕业设计(Javaweb项目|小程序|Pyt…