前端三剑客 —— HTML (下)

news2024/11/25 2:41:51

目录

HTML

多媒体标签

Img***

a标签***

第一种用法:超链接

第二种用法:锚点

audio标签

video标签

表格标签

带标题的表格

跨行跨列标签

表格嵌套

列表标签

ul --- 它是无序列表标签

ol --- 它是有序列表

dl --- 它是数据列表

表单标签***

form标签

Input

Select --- 下拉菜单

textarea


HTML

HTML是Hyper Text Markup Language(超文本标记语言),它可以支持超链接、图片、视频、音乐等元素,然后使用不用的标签来对这些元素进行标记。

多媒体标签

Img***

这个标签的作用是在页面中引入图片

标签属性说明:

src:这个属性非常重要,用于指定图片显示的路径,可以是相对路径在链接中以https://是绝对路径(简单来说,在windows中带了盘符,在Linux中以/开头的路径就是绝对路径,其他都是相对路径,相对路径的参考点就是这个对象本身。)

width:用于指定图片显示的宽度,如果指定宽,则会根据宽度来等比例缩放

height:用于指定图片显示的高度,如果指定高,则会根据高度来等比例缩放。注意width和height两个属性不要同时指定,容易变形失帧

border:用于指定图片显示的边框粗细默认是无边框

alt:图片无法正常显示是才会显示该文字内容

title:当鼠标移动到图片上显示时显示的提示信息一般用于引擎优化

a标签***

这个标签是用作链接的标签

第一种用法:超链接

属性说明:

第二种用法:锚点

Demo1.html

Demo2.html

audio标签

这个标签是用于播放音乐的标签,常用支持格式为mp3格式

标签属性说明:

1.controls:用户对播放器进行控制器的,即显示播放按钮

2.src:用于指定音频文件的路径

3.autoplay:指定是否自动播放

4.loop:指定是否循环播放

video标签

标签属性说明:

1.src:指定要播放的视频课程,可以是相对路径,也可以是绝对路径。这个标签所支持的视频格式不多,目前只把持mg4、ogg两张格式

2.controls:显示播放按钮

3.autoplay:自动播放

4.loop:自动循环

5.width:设置播放器的宽度

6.height:设置播放器的高度

表格标签

在我们进行数据展示时,很多时候都会用到表格,特殊是在后台进行数据管理时,或者显示列表数据时,就会用到表格。

要使用表格就需要用到table标签,而表格由行和列组成。

表格的属性说明:

table:用于绘制表格

tr:用于绘制表格的行

td:用于绘制表格的列(单元格)

width:指定表格的宽度,也可以是td的属性

border:指定表格边框的粗细

cellspacing:指定单元格之间的间距

cellpadding:指定单元格边框与单元格中内容的距离

align:用于指定表格的对齐方式:

--- left:左对齐,默认值

--- center居中对齐

--- right:右对齐

align属性可以是table,也可以是tr、td的,如果table的,表示对整个表格有效,如果是tr的,表示对当前行有效;如果是td的,表示只对当前的单元格有效

带标题的表格

使用caption来指定表格的标题,使用thead标签来指定表格的头tbody来指定表格的数据区tfoot指定表格的尾部

td和th的区别:

1.td中的内容是普通格式,而th中的内容是加粗的格式

2.td中的内容是左对齐,而th的内容是居中对齐

<!-- -->   ---   注释标签

跨行跨列标签

相关代码如下:

相关属性说明:

1.colspan:用于指定跨多少,它的值是一个数字

2.rowspan:用于指定跨多少,它的值是一个数字

表格嵌套

代码中,被画了横线的,即为该版本不适用了,淘汰该种写法了。

列表标签

在HTML中,列表标签有以下几种:

ul --- 它是无序列表标签

标签属性说明

ul:用于指定无序列表

li:指定列表中的某一项

type:指定无序列表的格式,有以下几个值(了解):

---disc实心圆形,默认值

---square实心方形

---circle空心圆形

ol --- 它是有序列表

页面显示效果如下:

type属性有以下值:

1.数字,默认值

2.a,以小写字母a开始

3.A,以大写字母A开始

4.i,以罗马字开始

dl --- 它是数据列表

表单标签***

form标签

这个标签是用于表单提交的标签,一般在用户交互时就会用到form标签

页面显示效果如下:

标签属性说明:

1.name:用于给这个表单取一个唯一的名称,便于后续使用js来操作这个表单

2.action 表单提交的地址

3.method 表单提交的方式,有以下两个值:

--- get:表单以get方式提交

--- post:表单以post方式提交

补充get和post提交的区别:

1.get提交的数据会以参数的形式体现在浏览器地址栏中,而post提交1的数据是在请求头中

2.get请求方式提交的数据不能超过4K大小,而post请求提交方式理论上是没有大小限制的

Input

这是表单元素中非常重要一组标称,它有很多类型:

text:最常见的类型,用于提交文本字符串内容

 password:用于提交密码数据

 radio单选按钮

 checkbox多选按钮

 submit提交按钮

 button普通按钮

 image图片按钮

 file文件上传域

Select --- 下拉菜单

标签属性说明

name:表单提交时要获取对应元素值是所需要的属性

value:指定select中每一个元素的值

size:指定select可以看到的元素个数,默认值是1

multiple:表示可以多选

textarea

这个标签是用于输入大文本内容的标签。

标签属性说明:

name:用于获取元素值的属性

cols:用于指定这个文本框的宽度

rows:用于指定这个文本框的高度

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

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

相关文章

2024.3.30学习笔记

今日学习韩顺平java0200_韩顺平Java_对象机制练习_哔哩哔哩_bilibili 今日学习p295-p314 super关键字 super代表父类的引用&#xff0c;用于访问父类的属性、方法、构造器 super细节和语法 访问父类的属性&#xff0c;但不能访问父类的private属性 super.属性名 访问父类的…

暴力破解pdf文档密码

首先安装pdfcrack工具包 apt install pdfcrack 默认密码字典存储在/usr/share/wordlists里&#xff0c;是gz文件&#xff0c;将它解压并copy到pdf目录 然后使用pdfcrack破解 密码在最后一行user-password的单引号里

最优算法100例之17- 环形连续子数组的最大和

专栏主页:计算机专业基础知识总结(适用于期末复习考研刷题求职面试)系列文章https://blog.csdn.net/seeker1994/category_12585732.html 题目描述 给定一个长度为 nn 的环形整数数组,请你求出该数组的 非空 连续子数组 的最大可能和 。 环形数组 意味着数组的末端将会与开…

Linux重点思考(下)--shell脚本使用以及内核开发

Linux重点思考(下&#xff09;--shell脚本使用和组合拳 shell脚本的基础算法shell脚本写123...n的值&#xff0c;说思路Shell 脚本用于执行服务器性能测试的死循环Shell 脚本备份和定时清理垃圾文件 shell脚本的内核开发正向映射反向映射 shell脚本的基础算法 shell脚本写123……

解决MySQL幻读?可重复读隔离级别背后的工作原理

什么是当前读和快照读 当前读&#xff1a;又称为 "锁定读"&#xff0c;它会读取记录的最新版本&#xff08;也就是最新的提交结果&#xff09;&#xff0c;并对读取到的数据加锁&#xff0c;其它事务不能修改这些数据&#xff0c;直到当前事务提交或回滚。"sele…

linux服务器安装mysql8

1.下载MYSQL 近几天在linux服务器已安装过2次mysql8&#xff0c;亲测有效&#xff0c;没有遇到任何问题&#xff0c;文档已写的很清楚&#xff0c;按步骤来即可。如果按文档有遇到要使用yum命令的话&#xff0c;需要服务器开通外网。 1.1官网下载 进入官网下拉到最后&#x…

【查看显卡信息】如何查看nvidia-smi命令后的显卡信息

【查看显卡信息】如何查看nvidia-smi命令后的显卡信息 【先赞后看养成习惯】求点赞关注收藏&#xff01;&#xff01;&#xff01;&#x1f60a; 一般我们用nvidia-smi进行查看当前电脑或者服务器的显卡信息&#xff0c;出来一大堆内容&#xff0c;很多小白根本看不懂&#xf…

elementui 导航菜单栏和Breadcrumb 面包屑关联

系列文章目录 一、elementui 导航菜单栏和Breadcrumb 面包屑关联 文章目录 系列文章目录前言一、elementui 导航菜单栏和Breadcrumb 面包屑怎么关联&#xff1f;二、实现效果三、实现步骤1.本项目演示布局2.添加面包屑2.实现breadcrumbName方法3.监听方法4.路由指配5.路由配置…

大数据设计为何要分层,行业常规设计会有几层数据

大数据设计通常采用分层结构的原因是为了提高数据管理的效率、降低系统复杂度、增强数据质量和可维护性。这种分层结构能够将数据按照不同的处理和应用需求进行分类和管理&#xff0c;从而更好地满足不同层次的数据处理和分析需求。行业常规设计中&#xff0c;数据通常按照以下…

R语言颜色细分

1.如何对R语言中两种颜色之间进行细分 2.代码&#xff1a; x <- colorRampPalette(c("#FC8D62","#FDEAE6"))(12) #打印向量值 # 按字典顺序排序颜色值 x_sorted <- sort(x,decreasing TRUE)# 打印排序后的颜色值 print(x_sorted)#展示颜色 scales:…

websocket 局域网 webrtc 一对一 视频通话的实例

基本介绍 使用websocket来 WebRTC 建立连接时的 数据的传递和交换。 WebRTC 建立连接时&#xff0c;通常需要按照以下顺序执行一些步骤&#xff1a; 1.创建本地 PeerConnection 对象&#xff1a;使用 RTCPeerConnection 构造函数创建本地的 PeerConnection 对象&#xff0c;该…

springboot企业级抽奖项目业务四 (缓存预热)

缓存预热 为什么要做预热: 当活动真正开始时&#xff0c;需要超高的并发访问活动相关信息 必须把必要的数据提前加载进redis 预热的策略: 在msg中写一个定时任务 每分钟扫描一遍card_game表 把(开始时间 > 当前时间)&& (开始时间 < 当前时间1分钟)的活动及相…

(八)Gateway服务网关

Gateway服务网关 Spring Cloud Gateway 是 Spring Cloud 的一个全新项目&#xff0c;该项目是基于 Spring 5.0&#xff0c;Spring Boot 2.0 和 Project Reactor 等响应式编程和事件流技术开发的网关&#xff0c;它旨在为微服务架构提供一种简单有效的统一的 API 路由管理方式。…

day01-SpringCloud01(Eureka、Ribbon、Nacos)

视频地址: SpringCloudRabbitMQDockerRedis搜索分布式&#xff0c;系统详解springcloud微服务技术栈课程|黑马程序员Java微服务 学习资料地址: 百度网盘 提取码&#xff1a;1234 1. 认识微服务 1.1.单体架构 单体架构&#xff1a;将业务的所有功能集中在一个项目中开发&#x…

WebCopilot:一款功能强大的子域名枚举和安全漏洞扫描工具

关于WebCopilot WebCopilot是一款功能强大的子域名枚举和安全漏洞扫描工具&#xff0c;该工具能够枚举目标域名下的子域名&#xff0c;并使用不同的开源工具检测目标存在的安全漏洞。 工具运行机制 WebCopilot首先会使用assetsfinder、submaster、subfinder、accumt、finddom…

【2023】kafka在linux和docker安装(kafka-1)

目录&#x1f4bb; 一、linux安装kafka1. 安装jdk2. 上传解压到/usr/local目录下3、使用kafka 二、docker安装kafka1. 下载2. 安装zookeeper3. 安装kafka 一、linux安装kafka 环境主机 mac m2、虚拟机Ubuntu22.04.4 1. 安装jdk yum install -y java-1.8.0-openjdk.x86_64下载k…

Redis分布式锁红锁

Redisson实现分布式锁 lock()上锁解析&#xff1a; 1&#xff0c;hexist判断redis是否有这个锁 2&#xff0c;hset设置锁&#xff0c;hash类型&#xff0c;key为锁名字&#xff0c;value是一对kv&#xff0c;k是当前redisson1的id,v为计数器&#xff0c;表示当前锁持有次数&am…

【详细讲解语言模型的原理、实战与评估】

&#x1f308;个人主页:程序员不想敲代码啊&#x1f308; &#x1f3c6;CSDN优质创作者&#xff0c;CSDN实力新星&#xff0c;CSDN博客专家&#x1f3c6; &#x1f44d;点赞⭐评论⭐收藏 &#x1f91d;希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提…

【苹果MAC】苹果电脑 LOGI罗技鼠标设置左右切换全屏页面快捷键

首先键盘设置->键盘快捷键 调度中心 设置 f1 f2 为移动一个空间&#xff08;就可以快捷移动了&#xff09; 想要鼠标直接控制&#xff0c;就需要下载官方驱动&#xff0c;来设置按键快捷键&#xff0c;触发 F1 F2 安装 LOGI OPTIONS Logi Options 是一款功能强大且便于使用…

HarmonyOS 应用开发之Stage模型绑定FA模型ServiceAbility

本小节介绍Stage模型的两种应用组件如何绑定FA模型ServiceAbility组件。 UIAbility关联访问ServiceAbility UIAbility关联访问ServiceAbility和UIAbility关联访问ServiceExtensionAbility的方式完全相同。 import common from ohos.app.ability.common; import hilog from o…