前端三剑客 —— 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:用于指定这个文本框的高度

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

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

相关文章

java学习之路-数组定义与使用

目录 ​编辑 1.什么是数组 2.数组的创建及其初始化 2.1数组的创建 2.2数组的初始化 3.数组的使用 3.1数组元素访问 3.2遍历数组 4.数组是引用类型 4.1jvm的内存分布 4.2基本类型变量与引用类型变量的区别 4.3引用变量详解 4.4 null 5.数组的使用场景 5.1存储数据 5…

3.30学习日志

数值稳定性 神经网络的梯度 t表示层&#xff0c;h^t是隐藏层&#xff0c;y是要优化的目标函数&#xff0c;不是预测还包括了损失函数 损失函数l关于参数Wt的梯度&#xff1a;由链式法则&#xff0c;损失函数l关于最后一层隐藏层求导*最后一层隐藏层对倒数第二层隐藏层求导*……

游戏引擎中的物理系统

一、物理对象与形状 1.1 对象 Actor 一般来说&#xff0c;游戏中的对象&#xff08;Actor&#xff09;分为以下四类&#xff1a; 静态对象 Static Actor动态对象 Dynamic Actor ---- 可能受到力/扭矩/冲量的影响检测器 TriggerKinematic Actor 运动学对象 ---- 忽略物理法则…

【一天一坑系列】系统接口调用过程中,Hystrix居然“莫名其妙”的熔断降级到了fallback方法,并且无法恢复

1、异常描述 近期做了一个功能模块的限流熔断处理&#xff0c;使用的是hystrix来做熔断处理。具体的配置如下&#xff1a; DefaultProperties(defaultFallback "customFallBackMethod",commandProperties {HystrixProperty(name "circuitBreaker.enabled&q…

Java | Leetcode Java题解之第5题最长回文子串

题目&#xff1a; 题解&#xff1a; class Solution {public String longestPalindrome(String s) {int start 0, end -1;StringBuffer t new StringBuffer("#");for (int i 0; i < s.length(); i) {t.append(s.charAt(i));t.append(#);}t.append(#);s t.to…

深入理解Java内存模型及其作用

目录 1.前言 2.为什么要有 Java 内存模型&#xff1f; 2.1 一致性问题 2.2 重排序问题 3.Java 内存模型的定义 4.规范内容 4.1 主内存和工作内存交互规范 4.2 什么是 happens-before 原则&#xff1f; 1.前言 当问到 Java 内存模型的时候&#xff0c;一定要注意&#…

Docker 哲学 - push 本机镜像 到 dockerhub

注意事项&#xff1a; 1、 登录 docker 账号 docker login 2、docker images 查看本地镜像 3、注意的是 push镜像时 镜像的tag 需要与 dockerhub的用户名保持一致 eg&#xff1a;本地镜像 express:1 直接 docker push express:1 无法成功 原因docker不能识别 push到哪里 …

磁盘如何分配数据数据

&#x1f4dd;个人主页&#xff1a;五敷有你 &#x1f525;系列专栏&#xff1a;算法分析与设计 ⛺️稳中求进&#xff0c;晒太阳 磁盘如何分配数据 数据切割&#xff1a; 按照固定长度进行切割---》编码翻译&#xff08;常用&#xff09; 计算机要求按照8bit(字节)进…

MySQL 8.0.13安装配置教程

写个博客记录一下&#xff0c;省得下次换设备换系统还要到处翻教程&#xff0c;直接匹配自己常用的8.0.13版本 1.MySQL包解压到某个路径 2.将bin的路径加到系统环境变量Path下 3.在安装根目录下新建my.ini配置文件&#xff0c;并用编辑器写入如下数据 [mysqld] [client] port…

01 Python进阶:正则表达式

re.match函数 使用 Python 中的 re 模块时&#xff0c;可以通过 re.match() 函数来尝试从字符串的开头匹配一个模式。以下是一个简单的详解和举例&#xff1a; import re# 定义一个正则表达式模式 pattern r^[a-z] # 匹配开头的小写字母序列# 要匹配的字符串 text "h…

【HTML】标签学习(下.2)

&#xff08;大家好哇&#xff0c;今天我们将继续来学习HTML&#xff08;下.2&#xff09;的相关知识&#xff0c;大家可以在评论区进行互动答疑哦~加油&#xff01;&#x1f495;&#xff09; 目录 二.列表标签 2.1 无序列表(重点) 2.2有序列表(理解) 2.3 自定义列表(重点…

QT网络调试助手

QT网络调试助手 1.开发流程 2.QTtcp服务器   1.1 服务端数据读取   1.2 服务端发送数据-所有客户端   1.3 服务端自动刷新ip地址   1.4 服务端检测客户端断开状态   1.5 服务端发送数据-指定特定客户端发送数据   1.6 服务端停止监听和断开 3.QTtcp客户端 1…

mathematical-expression(MAE)数学表达式 数学函数 解析编译库,有效的快速和简单易用的数学和计算机的编译器

数学表达式 Switch to English Document 介绍 本框架是一种针对数学公式解析的有效工具&#xff0c;能够解析包含嵌套函数&#xff0c;包含函数&#xff0c;数列步长累加等数学公式&#xff0c;返回值是一个数值的结果对象&#xff0c;同时也可以进行比较运算的操作&#xf…

为什么蓝牙信道探测将引领高精度定位服务?

从蓝牙耳机到智能家居设备&#xff0c;蓝牙技术因其成熟的音频流和数据传输功能已成为我们生活中的一部分。一项新技术——蓝牙信道探测&#xff08;Bluetooth Channel Sounding&#xff09;正向高精度定位服务市场迈进。 本文信驰达&#xff08;RF-star&#xff09;将介绍蓝牙…

数码论坛系统的设计与实现|Springboot+ Mysql+Java+ B/S结构(可运行源码+数据库+设计文档)电子科技数码爱好者交流信息新闻畅聊讨论评价

本项目包含可运行源码数据库LW&#xff0c;文末可获取本项目的所有资料。 推荐阅读300套最新项目持续更新中..... 最新ssmjava项目文档视频演示可运行源码分享 最新jspjava项目文档视频演示可运行源码分享 最新Spring Boot项目文档视频演示可运行源码分享 2024年56套包含ja…

使用TCP协议就一定零丢包了吗?

简述数据包发送流程 为了简化模型&#xff0c;我们把中间的服务器给省略掉&#xff0c;假设这是个端到端的通信。且为了保证消息的可靠性&#xff0c;它们之间用的是TCP协议进行通信。 为了发送数据包&#xff0c;两端首先会通过三次握手&#xff0c;建立TCP连接。 一个数据包&…

Unity | Shader基础知识(第十一集:什么是Normal Map法线贴图)

目录 前言 一、图片是否有法线贴图的视觉区别 二、有视觉区别的原因 三、法线贴图的作用 四、信息是如何存进去的 五、自己写一个Shader用到法线贴图 六、注意事项 七、作者的话 前言 本小节会给大家解释&#xff0c;什么是法线贴图&#xff1f;为什么法线贴图会产生深…

Spring源码分析(BeanFactory)

文章目录 Spring源码分析&#xff08;BeanFactory&#xff09;一、BeanFactory二、ApplicationContext 的父系1、HierarchicalBeanFactory2、ListableBeanFactory3、EnvironmentCapable4、ApplicationEventPublisher5、MessageSource6、ResourcePatternResolver 三、Applicatio…

了解这些技术:Flutter应用顺利登陆iOS平台的步骤与方法

引言 &#x1f680; Flutter作为一种跨平台的移动应用程序开发框架&#xff0c;为开发者提供了便利&#xff0c;使他们能够通过单一的代码库构建出高性能、高保真度的应用程序&#xff0c;同时支持Android和iOS两个平台。然而&#xff0c;完成Flutter应用程序的开发只是第一步…

【鹅厂摸鱼日记(一)】(工作篇)认识八大技术架构

&#x1f493;博主CSDN主页:杭电码农-NEO&#x1f493;   ⏩专栏分类:重生之我在鹅厂摸鱼⏪   &#x1f69a;代码仓库:NEO的学习日记&#x1f69a;   &#x1f339;关注我&#x1faf5;带你学习更多知识   &#x1f51d;&#x1f51d; 认识八大架构 1. 前言2. 架构简介&…