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>

效果:

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

爬取博客的图片并且将它存储到响应的目录

目录 前言 思想 注意 不多说解释了&#xff0c;贴代码吧 config.json Get_blog_img.py 把之前的写的代码也贴上 Get_blog_id.py 主函数 main.py 运行结果 前言 在上一篇博客中我们介绍了如何爬取博客链接 利用python爬取本站的所有博客链接-CSDN博客文章浏览阅读74…

Docker使用数据卷自定义镜像Dockerfile

文章目录 一、数据卷二、Dockerfile自定义centos 一、数据卷 数据卷(Data Volumes)是一个可供一个或多个容器使用的特殊目录&#xff0c;它将主机操作系统目录直接映射进容器&#xff0c;它可以提供很多有用的特性&#xff1a; 1.数据卷 可以在容器之间共享和重用 2.对数据卷的…

React富文本编辑器开发(二)

我们接着上一节的示例内容&#xff0c;现在有如下需求&#xff0c;我们希望当我们按下某个按键时编辑器有所反应。这就需要我们对编辑器添加事件功能onKeyDown, 我们给 Editor添加事件&#xff1a; SDocor.jsx import { useState } from react; import { createEditor } from…

蓝桥杯练习系统(算法训练)ALGO-993 RP大冒险

资源限制 内存限制&#xff1a;64.0MB C/C时间限制&#xff1a;200ms Java时间限制&#xff1a;600ms Python时间限制&#xff1a;1.0s 问题描述 请尽情使用各种各样的函数来测试你的RP吧~~~ 输入格式 一个数N表示测点编号。 输出格式 一个0~9的数。 样例输入 0 样…

小乌龟操作Git

1、选择小乌龟作为git客户端 最近使用idea来操作git的时候频频出现问题&#xff0c;要么是提交代码的时候少了某些文件&#xff0c;导致克隆下来无法运行&#xff0c;要么是提交速度太慢。 反正是在idea中操作git体验非常不好&#xff0c;所以决定来换一种方式来操作git。从网…

利用FFMPEG 将RTSP流的音频G711 转码为AAC 并 推流到RTMP

之前我们的视频转码项目中 是没有加入音频的 现在 需要加入音频 &#xff0c;由于RTMP只支持AAC的 音频流 而有的RTSP流的音频编码并不是AAC 大多数都是G711编码 还分为G711A 和G711U 之前用ffmpeg命令行可以直接 完成转码 并推送到RTMP 但是考虑到无法获取更详细的状…

4.Java---方法+重载

方法 方法的调用是需要开辟内存的,方法调用结束内存就被销毁了. 下面将介绍一个经典的错误标准的0分的示意! 我们日常中写交换两个数字的代码的时候都会用如下的方法进行描述: 你是不是觉得自己写的特别对!终于可以独立写一个小小的函数了? 下面运行一下看看结果 哦莫!怎么…

解决ODOO12 恢复数据库提示内存不够报错

1. 现象 点击 ‘restore database’ 控制台报错&#xff1a; 2. 解决措施 a. 进入启动脚本的文件夹 cd odoo/odoo-12.0/输入命令 ./odoo-bin --addons-pathaddons --databaseodoo --db_userodoo --db_passwordodoo --db_hostlocalhost --db_port5432 -i INITb. 刷新页面…

【airtest】自动化入门教程(三)Poco操作

目录 一、准备工作 1、创建一个pthon脚本 2、光标位置 2、选择Android 3、选择yes 二、定位元素 三、poco基于设备/屏幕 方式 1、poco.click( (x,y))基于屏幕点击相对坐标为x&#xff0c;y的位置 2、poco.get_screen_size() 3、poco.swipe(v1,v2)基于屏幕从v1位置滑到…

图论 - 最短路(Dijkstra、Bellman-Ford、SPFA、Floyd)

文章目录 前言Part 1&#xff1a;朴素Dijkstra算法一、Dijkstra求最短路 I1.问题描述输入格式输出格式数据范围输入样例&#xff1a;输出样例&#xff1a; 2.算法 Part 2&#xff1a;堆优化Dijkstra算法一、Dijkstra求最短路 II1.题目描述输入格式输出格式数据范围输入样例&…

【学习笔记】Diffusion扩散模型

导读 Diffusion models是现在人工智能领域最火的方向之一&#xff0c;并引爆了AIGC领域&#xff0c;一大批创业公司随之诞生。 AIGC&#xff08;AI-Generated Content&#xff09;&#xff1a;人工智能创作内容的生产方式。 扩散模型Diffusion 扩散模型Duffison的训练过程 …

Redis【2】—— Redis特性 与 数据类型

Redis【2】—— Redis特性 与 数据类型 二、Redis 的基本介绍&#xff08;一&#xff09;关于 Redis1. 特性&#xff08;1&#xff09;在内存中存储数据&#xff08;2&#xff09;可编程&#xff08;3&#xff09;可扩展&#xff08;4&#xff09;持久化&#xff08;5&#xff…

场发射透射电子显微镜(FETEM)技术壁垒高 我国具备研制能力

场发射透射电子显微镜&#xff08;FETEM&#xff09;技术壁垒高 我国具备研制能力 场发射透射电子显微镜&#xff0c;简称场发射透射电镜&#xff0c;英文简称FETEM&#xff0c;产品主要由场发射电子枪、高压电源、照明透镜、偏转系统、物镜、投影镜、探测器、样品系统等组成。…

PlantUML简介

PlantUML简介 plantUML是一款开源的UML图绘制工具&#xff0c;支持通过文本来生成图形&#xff0c;使用起来非常高效。可以支持时序图、类图、对象图、活动图、思维导图等图形的绘制。你可以在IDEA中安装插件来使用PlantUML, 或者在Visual Studio Code中安装插件。 也可以在dra…

Nacos环境搭建 -- 服务注册与发现

为什么需要服务治理 在未引入服务治理模块之前&#xff0c;服务之间的通信是服务间直接发起并调用来实现的。只要知道了对应服务的服务名称、IP地址、端口号&#xff0c;就能够发起服务通信。比如A服务的IP地址为192.168.1.100:9000&#xff0c;B服务直接向该IP地址发起请求就…

超好看的下载页HTML源码分享

超好看的下载页HTML源码分享,源码由HTMLCSSJS组成&#xff0c;记事本打开源码文件可以进行内容文字之类的修改&#xff0c;双击html文件可以本地运行效果&#xff0c;也可以上传到服务器里面 下载地址&#xff1a;https://www.qqmu.com/2337.html

Java基于SpringBoot的网上租赁系统设计与实现论文

摘 要 本课题是根据用户的需要以及网络的优势建立的一个基于Spring Boot的网上租贸系统&#xff0c;来满足用户网络商品租赁的需求。 本网上租贸系统应用Java技术&#xff0c;MYSQL数据库存储数据&#xff0c;基于Spring Boot框架开发。在网站的整个开发过程中&#xff0c;首先…

NXP实战笔记(十一):32K3xx基于RTD-SDK在S32DS上配置LPSPI(同步、异步、DMA、主机、从机、中断、轮询)

目录 1、概述 2、RTD-SDK配置 2.1、配置目标 2.2、主、从机引脚配置 2.3、时钟配置 2.4、LPSPI配置 2.5、中断配置 2.6、DMA配置(使用DMA才会配置) 2、dma Logic Instance 2.7、RM配置(使用DMA的情况下必须配置此选项) 3、代码实现 1、概述 S32K3_低功耗LPSPI轮询…

Java基于微信小程序的房屋租赁、租房小程序,附源码

博主介绍&#xff1a;✌程序员徐师兄、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;…

《TCP/IP详解 卷一》第12章 TCP初步介绍

目录 12.1 引言 12.1.1 ARQ和重传 12.1.2 滑动窗口 12.1.3 变量窗口&#xff1a;流量控制和拥塞控制 12.1.4 设置重传的超时值 12.2 TCP的引入 12.2.1 TCP服务模型 12.2.2 TCP可靠性 12.3 TCP头部和封装 12.4 总结 12.1 引言 关于TCP详细内容&#xff0c;原书有5个章…