前端三剑客 —— HTML (下)

目录

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:用于指定这个文本框的高度

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

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

相关文章

51单片机学习笔记13 红外遥控接收

51单片机学习笔记13 红外遥控接收 一、红外遥控1. **发射原理**2. **接收原理**3. **发射、接收示例** 二、编码、解码1. **编码方式分类**&#xff1a;&#xff08;1&#xff09;Pulse Distance Modulation (PDM) 脉冲距离调制&#xff1a;&#xff08;2&#xff09;Pulse Wid…

python coding with ChatGPT 专题2| 全解递归算法

文章目录 递归与栈的关系如何思考递归汉诺塔 经典题目入门&#xff1a;斐波那契数列分治法&#xff1a;归并排序树的递归遍历组合问题&#xff1a;子集搜索问题&#xff1a;N皇后 拓展阶乘的迭代法斐波那契数列迭代法青蛙跳 参考文献 掌握递归是解决许多编程问题的关键&#xf…

VBA数据库解决方案第九讲:把数据库的内容在工作表中显示

《VBA数据库解决方案》教程&#xff08;版权10090845&#xff09;是我推出的第二套教程&#xff0c;目前已经是第二版修订了。这套教程定位于中级&#xff0c;是学完字典后的另一个专题讲解。数据库是数据处理的利器&#xff0c;教程中详细介绍了利用ADO连接ACCDB和EXCEL的方法…

如何使用极狐GitLab 启用自动备份功能

本文作者&#xff1a;徐晓伟 GitLab 是一个全球知名的一体化 DevOps 平台&#xff0c;很多人都通过私有化部署 GitLab 来进行源代码托管。极狐GitLab 是 GitLab 在中国的发行版&#xff0c;专门为中国程序员服务。可以一键式部署极狐GitLab。 本文主要讲述了如何极狐GitLab 自…

HarmonyOS 和 OpenHarmony

HarmonyOS 和 OpenHarmony 支持的 shell 命令不同&#xff0c;因此有时候需要做一做区分&#xff0c;目前有些文档上没有标注&#xff0c;因此可能产生歧义。 HarmonyOS 支持 getprop&#xff1a; getprop hw_sc.build.os.apiversion # 查看API版本OpenHarmony 上支持 param…

2024年NAND价格市场继续上涨

TrendForce发布了最新的NAND闪存市场价格走势预测。根据其报告&#xff0c;在2024年第二季度&#xff0c;NAND闪存合同价格将进一步呈现两位数的增长&#xff0c;叠加前一季度的增长。不过&#xff0c;客户端SSD的价格涨幅预计在第二季度将不超过15%&#xff0c;相比于2024年第…

破解密码:掌握2024年的营销归因

Cracking the Code: Mastering Marketing Attribution in 2024 营销归因是识别哪些营销渠道和触及点有助于销售或转化的过程。随着消费者继续通过多个渠道与品牌互动&#xff0c;掌握营销归因对企业来说变得越来越重要。在这篇文章中&#xff0c;我们将探讨破解代码和有效衡量…

PW1503限流芯片:可达3A限流,保障USB电源管理安全高效

在电源管理领域&#xff0c;开关的性能直接关系到设备的稳定性和安全性。今天&#xff0c;我们将详细解析一款备受关注的超低RDS&#xff08;ON&#xff09;开关——PW1503。它不仅具有可编程的电流限制功能&#xff0c;还集成了多项保护机制&#xff0c;为各类电子设备提供了高…

vue两个特性和什么是MVVM

一、什么是vue 1.构建用户界面 用vue往html页面中填充数据&#xff0c;非常的方便 2.框架 框架是一套线成的解决方案 vue的指令、组件&#xff08;是对ui结构的复用&#xff09;、路由、vuex 二、vue的特性 1.数据驱动视图 2.双向数据绑定 1.数据驱动视图 数据的变化会驱动…

基于tensorflow和kereas的孪生网络推理图片相似性

一、环境搭建 基础环境&#xff1a;cuda 11.2 python3.8.13 linux ubuntu18.04 pip install tensorflow-gpu2.11.0 验证&#xff1a;# 查看tensorflow版本 import tensorflow as tf tf.__version__ # 是否能够成功启动GPU from tensorflow.python.client import device_lib pr…

Navicat for MySQL 15免费注册方法

一、效果图如下&#xff1a; 注&#xff1a;此方法仅用于非商业用途&#xff0c;请勿传播&#xff0c;否则后果自负。 二、下载安装 下载安装包&#xff0c;分为32位和6位&#xff0c;下载文件名&#xff1a;Navicat for MySQL 15.zip&#xff08;https://download.csdn.net/…

Prometheus+grafana环境搭建redis(docker+二进制两种方式安装)(四)

由于所有组件写一篇幅过长&#xff0c;所以每个组件分一篇方便查看&#xff0c;前三篇 Prometheusgrafana环境搭建方法及流程两种方式(docker和源码包)(一)-CSDN博客 Prometheusgrafana环境搭建rabbitmq(docker二进制两种方式安装)(二)-CSDN博客 Prometheusgrafana环境搭建m…

Nginx反向代理和缓存

一、Nginx反向代理 1.调度和代理的区别&#xff1a; 1.调度基于内核层面&#xff0c;代理基于应用层面 2.代理必须实现一手托两家 3.调度不需要监听任何端口&#xff0c;不需要工作任何应用程序&#xff0c;代理需要工作和上游服务器一模一样的进程 4.调度没有并发上限&am…

CentOS7安装flink1.17完全分布式

前提条件 准备三台CenOS7机器&#xff0c;主机名称&#xff0c;例如&#xff1a;node2&#xff0c;node3&#xff0c;node4 三台机器安装好jdk8&#xff0c;通常情况下&#xff0c;flink需要结合hadoop处理大数据问题&#xff0c;建议先安装hadoop&#xff0c;可参考 hadoop安…

nslookup查询网站是否支持IPV6

nslookup是一种网络管理命令行工具&#xff0c;可用于查询DNS域名和IP地址输入指令nslookup默认服务器和Address是当前上网所用的DNS服务器域名和地址A记录A&#xff08;Address&#xff09;记录指的是用来指定主机名或域名对应的IP记录。

java数据结构与算法刷题-----LeetCode547. 省份数量

java数据结构与算法刷题目录&#xff08;剑指Offer、LeetCode、ACM&#xff09;-----主目录-----持续更新(进不去说明我没写完)&#xff1a;https://blog.csdn.net/grd_java/article/details/123063846 文章目录 深度优先遍历广度优先遍历 本题考察图的连通分量个数。也就是所有…

24/04/02总结

API: bigdecima: 方法名 说明 public static BigDecimal valueof( double val) 静态获取对象 public BigDecimal add(BigDecimal val) 加法 public BigDecimal subtract(BigDecimal val…

JavaScript库,编写$()和getElementsByClassName()方法

背景: JavaScript库是一组预先编写好的JavaScript代码集合&#xff0c;旨在简化常见的网页开发任务。这些库通常包含了许多函数和方法&#xff0c;可以帮助开发人员处理各种任务&#xff0c;比如DOM操作、事件处理、动画效果、AJAX请求等等。使用JavaScript库可以节省开发时间…

Python 与机器学习,在服务器使用过程中,常用的 Linux 命令包括哪些?

&#x1f349; CSDN 叶庭云&#xff1a;https://yetingyun.blog.csdn.net/ 本博客旨在分享在实际开发过程中&#xff0c;开发者需要了解并熟练运用的 Linux 操作系统常用命令。Linux 作为一种操作系统&#xff0c;与 Windows 或 MacOS 并驾齐驱&#xff0c;尤其在服务器和开发环…

Redis缓存设计与性能优化【缓存和数据库不一致问题,解决方案:1.加过期时间这样可以一段时间后自动刷新 2.分布式的读写锁】

Redis缓存设计与性能优化 缓存与数据库双写不一致 缓存与数据库双写不一致 在大并发下&#xff0c;同时操作数据库与缓存会存在数据不一致性问题 1、双写不一致情况 2、读写并发不一致 解决方案&#xff1a; 1、对于并发几率很小的数据(如个人维度的订单数据、用户数据等)&a…