第五十二天

         HTML5

●MathML 是数学标记语言,是一种基于XML(标准通用标记语言的子集)的标准,用来在互联网上书写数学符号和公式的置标语言。

●拖放

拖放是一种常见的特性,即抓取对象以后拖到另一个位置。

在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放

●<video> 元素提供了 播放、暂停和音量控件来控制视频。

 也提供了 width 和 height 属性控制视频的尺寸。如果设置的高度和宽度,所需的视频空间会在页面加载时保留。如果没有设置这些属性,页面就会根据原始视频的大小而改变。

<video> 与</video> 标签之间插入的内容是提供给不支持 video 元素的浏览器显示的。

<video> 元素支持多个 <source> 元素. <source> 元素可以链接不同的视频文件。

●<video> 和 <audio> 元素同样拥有方法、属性和事件。

<video> 和 <audio>元素的方法、属性和事件可以使用JavaScript进行控制.

其中的方法用于播放、暂停以及加载等。其中的属性(比如时长、音量等)可以被读取或设置。其中的 DOM 事件能够通知,比方说,<video> 元素开始播放、已暂停,已停止,等等。

●control 属性供添加播放、暂停和音量控件。

在<audio> 与 </audio> 之间你需要插入浏览器不支持的<audio>元素的提示文本 。

<audio> 元素允许使用多个 <source> 元素。

<source> 元素可以链接不同的音频文件。

●HTML5 新的表单元素

HTML5 有以下新的表单元素:

<datalist>

<keygen>

<output>

注意:不是所有的浏览器都支持HTML5 新的表单元素,但是可以在使用它们,即使浏览器不支持表单属性,仍然可以显示为常规的表单元素。

● <datalist> 元素

<datalist> 元素规定输入域的选项列表。

<datalist> 属性规定 form 或 input 域应该拥有自动完成功能。

● <keygen> 元素

<keygen> 元素的作用是提供一种验证用户的可靠方法。

<keygen>标签规定用于表单的密钥对生成器字段。

当提交表单时,会生成两个键,一个是私钥,一个公钥。

私钥(private key)存储于客户端,公钥(public key)则被发送到服务器。公钥可用于之后验证用户的客户端证书(client certificate)。

● <output> 元素

<output> 元素用于不同类型的输出。

●HTML5新的表单属性

<form> 和<input>标签添加了新属性

•<form> / <input> autocomplete 属性

autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。

当用户在自动完成域中开始输入时,浏览器应该在该域中显示填写的选项。

autocomplete 属性有可能在 form元素中是开启的,而在input元素中是关闭的。

注: autocomplete 适用于 <form> 标签,以及以下类型的 <input> 标签:text, search, url, telephone, email, password, datepickers, range 以及 color。

•<form>    novalidate 属性

novalidate 是一个布尔(true 或 false)属性。

novalidate 属性是 HTML 表单元素的一个布尔属性,用于设置浏览器不对表单进行验证。

当该属性被添加到 <form> 元素上时,浏览器将不会执行默认的表单验证,不会检查输入字段是否符合指定的验证规则。

•<input> autofocus 属性

autofocus 属性是一个布尔属性,规定在页面加载时,域自动地获得焦点。

•<input> form 属性

form 属性规定输入域所属的一个或多个表单,如需引用一个以上的表单,请使用空格分隔的列表。

•<input> formaction 属性

The formaction 属性用于描述表单提交的URL地址,会覆盖<form> 元素中的action属性.

注: The formaction 属性用于 type="submit" 和 type="image"。

•<input> formenctype 属性

formenctype 属性描述了表单提交到服务器的数据编码 (只对form表单中 method="post" 表单),覆盖 form 元素的 enctype 属性。

与 type="submit" 和 type="image" 配合使用。

•<input> formmethod 属性

   formmethod 属性定义了表单提交的方式,覆盖了 <form> 元素的 method 属性。

•<input> formnovalidate 属性

    novalidate 属性是一个 boolean 属性,描述了 <input> 元素在表单提交时无需被验证,会覆盖 <form> 元素的novalidate属性。

与 type="submit" 一起使用

•<input> formtarget 属性

    formtarget 属性指定一个名称或一个关键字来指明表单提交数据接收后的展示,覆盖 <form>元素的target属性。

•<input> height 和 width 属性

height 和 width 属性规定用于 image 类型的 <input> 标签的图像高度和宽度。

注意: height 和 width 属性只适用于 image 类型的<input> 标签。

•<input> list 属性

list 属性规定输入域的 datalist。datalist 是输入域的选项列表。

•<input> multiple 属性

multiple 属性是一个 boolean 属性.

multiple 属性规定<input> 元素中可选择多个值。

注意: multiple 属性适用于以下类型的 <input> 标签:email 和 file

上传多个文件:

Select images: <input type="file" name="img" multiple>

•<input> pattern 属性

pattern 属性描述了一个正则表达式用于验证 <input> 元素的值。

用来全局 title 属性来描述模式。

•<input> placeholder 属性

placeholder 属性提供一种提示(hint),描述输入域所期待的值。

简短的提示在用户输入值前会显示在输入域上。

•<input> required 属性

required 属性是一个 boolean 属性,规定必须在提交之前填写输入域(不能为空)。

•<input> step 属性

step 属性为输入域规定合法的数字间隔。

如果 step="3",则合法的数是 -3,0,3,6 等

 step 属性可以与 max 和 min 属性创建一个区域值。

 

 

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

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

相关文章

YAMLException: java.nio.charset.MalformedInputException: Input length = 1

springboot项目启动的时候提示这个错误&#xff1a;YAMLException: java.nio.charset.MalformedInputException: Input length 1 根据异常信息提示&#xff0c;是YAML文件有问题。 原因是yml配置文件的编码有问题。 需要修改项目的编码格式&#xff0c;一般统一为UTF-8。 或…

分别用python和go语言来实现的风靡一时的2048 游戏,包含完整代码

目录 1、Python实现2、Go实现 2048 游戏实现主要包括以下几个步骤&#xff1a; 创建一个棋盘&#xff0c;通常使用二维列表表示。实现棋子的移动规则&#xff0c;左移、右移、上移、下移。判断游戏是否结束&#xff0c;即棋盘是否已满或者无空位可移动。实现游戏界面的显示。 …

【Android】ViewBinding+DataBinding+MVVM新手快速上手

为什么写这篇博客 网上大部分博客&#xff0c;代码量都比较大&#xff0c;把实际的业务都代入进去了 这篇博客的目的&#xff0c;就是为了讲解基本原理和使用思路&#xff0c;然后给出一个最简单的Demo 这里不讲解具体用法&#xff0c;那样篇幅会太长&#xff0c;直接看Demo…

TENNECO EDI 项目——X12与XML之间的转换

近期为了帮助广大用户更好地使用 EDI 系统&#xff0c;我们根据以往的项目实施经验&#xff0c;将成熟的 EDI 项目进行开源。用户安装好知行之桥EDI系统之后&#xff0c;只需要下载我们整理好的示例代码&#xff0c;并放置在知行之桥指定的工作区中&#xff0c;即可开始使用。 …

YOLOv5入门实践(3)— 手把手教你如何去划分数据集

前言&#xff1a;Hello大家好&#xff0c;我是小哥谈。数据集标注完成之后&#xff0c;下一步就是对这些数据集进行划分了。面对繁杂的数据集&#xff0c;如果手动划分的话&#xff0c;不仅麻烦而且不能保持随机性。本节课就给大家介绍一种方法&#xff0c;即使用代码去划分数据…

Xcode升级导致关联库报错

想办法找到对应的库 然后到 Build Phases -- LinkBinary With Libraries中点击&#xff0c;选择对应的framework即可&#xff0c;就像我工程的报错 Undefined symbol: _OBJC_CLASS_$_ADClient _OBJC_CLASS_$_ASIdentifierManager 缺失的库是AdSupport.framework 添加后再次编…

Elasticsearch6.x和7.x的区别

Elasticsearch6.x和7.x的区别 1、查找方面的区别 在增删改方面&#xff0c;6.x和7.x是一样的&#xff0c;在查找方面&#xff08;分为普通查找和有高亮的查找&#xff09;&#xff0c;6.x和7.x有区别。 在7.x的es中&#xff1a; org.springframework.data.elasticsearch.cor…

Styled-components,另一种css in js的方案

介绍 Styled-components是一种流行的CSS-in-JS库&#xff0c;它为React和React Native应用程序提供了一种优雅的方式来管理组件的样式。它的设计理念是将CSS样式与组件逻辑紧密绑定在一起&#xff0c;从而使样式在组件层级中作用更加清晰和可维护 使用 安装Styled-components…

【C语言】操作符详解

目录 一、算数操作符 二、移位操作符 1.左移操作符 2.右移操作符 (1) 逻辑右移 (2) 算术右移 (3)小总结 三、位操作符 四、赋值操作符 五、单目操作符 六、关系操作符 七、逻辑操作符 八、 条件操作符 九、逗号表达式 十、下标引用、函数调用和结构成员 1. [ ]下…

QT-如何使用RS232进行读写通讯

以下是一个使用Qt进行RS232通讯的具体示例&#xff0c;包括读取和写入数据的操作&#xff1a; #include <QCoreApplication> #include <QDebug> #include <QSerialPort> #include <QTimer>QSerialPort serial; // 串口对象void readData() {QByteArra…

GO学习之 微框架(Gin)

GO系列 1、GO学习之Hello World 2、GO学习之入门语法 3、GO学习之切片操作 4、GO学习之 Map 操作 5、GO学习之 结构体 操作 6、GO学习之 通道(Channel) 7、GO学习之 多线程(goroutine) 8、GO学习之 函数(Function) 9、GO学习之 接口(Interface) 10、GO学习之 网络通信(Net/Htt…

UDS的DID(Data identification)

引言 DID是UDS中的一个重要概念&#xff0c;它代表着特定的数据标识符。DID用于标识和获取ECU中的特定参数数据&#xff0c;如传感器数据、状态信息等。通过使用DID&#xff0c;诊断工具可以准确地获取所需的数据&#xff0c;从而帮助诊断人员更好地了解车辆的状态和性能。 D…

开发者必知:.gitignore 文件的魔法,助你管理项目文件如虎添翼!

前言&#xff1a; 在软件开发的世界中&#xff0c;版本控制是一个至关重要的环节。而 Git 作为目前最流行的分布式版本控制系统之一&#xff0c;已经成为开发者不可或缺的工具。然而&#xff0c;在日常的开发过程中&#xff0c;有些文件是不适合被纳入版本控制的&#xff0c;比…

leetcode242. 有效的字母异位词

题目&#xff1a;leetcode242. 有效的字母异位词 描述&#xff1a; 给定两个字符串 s 和 t &#xff0c;编写一个函数来判断 t 是否是 s 的字母异位词。 注意&#xff1a;若 s 和 t 中每个字符出现的次数都相同&#xff0c;则称 s 和 t 互为字母异位词。 示例 1: 输入: s “…

【React | 前端】在React的前端页面中,判断某个变量值是否被定义?根据是否定义显示不同的内容?

问题描述 在React的前端页面中&#xff0c;判断某个变量值是否被定义&#xff1f;根据是否定义显示不同的内容&#xff1f; 问题场景 假如&#xff0c;现在有一个需求是设计一个新功能&#xff0c;新功能中要求新增一个之前没有的变量&#xff0c;假设是计算某一个数组的长度…

基于Java+SpringBoot+Vue的数码论坛系统设计与实现(源码+LW+部署文档等)

博主介绍&#xff1a; 大家好&#xff0c;我是一名在Java圈混迹十余年的程序员&#xff0c;精通Java编程语言&#xff0c;同时也熟练掌握微信小程序、Python和Android等技术&#xff0c;能够为大家提供全方位的技术支持和交流。 我擅长在JavaWeb、SSH、SSM、SpringBoot等框架…

【C语言】深度剖析数据在内存中的存储

一、数据类型详细介绍 1、数据类型介绍 &#xff08;1&#xff09;基本的内置类型 //内置类型就是C语言自带的类型char //字符数据类型 short //短整型 int //整形 long //长整型 long long //更长的整形 float //单精度浮点数 double …

微信小程序使用rich-text解析富文本字符串的时候,遇到image标签图片很大超过屏幕

场景&#xff1a; 使用uniapp开发微信小程序&#xff0c;解析富文本文章需求 用到的组件&#xff1a; u-view2.0的u-parse uniapp提供的rich-text 以上两种组件都是解析富文本的作用&#xff0c;一般用于富文本解析场景&#xff0c;比如解析文章内容&#xff0c;商品详情&am…

桶排序-1184:明明的随机数

【题目描述】 明明想在学校中请一些同学一起做一项问卷调查&#xff0c;为了实验的客观性&#xff0c;他先用计算机生成了N个1到1000之间的随机整数&#xff08;N≤100&#xff09;&#xff0c;对于其中重复的数字&#xff0c;只保留一个&#xff0c;把其余相同的数去掉&#x…

安防监控视频汇聚平台EasyCVR分发的FLV视频流在VLC中无法播放是什么原因?

众所周知&#xff0c;TSINGSEE青犀视频汇聚平台EasyCVR可支持多协议方式接入&#xff0c;包括主流标准协议国标GB28181、RTSP/Onvif、RTMP等&#xff0c;以及厂家私有协议与SDK接入&#xff0c;包括海康Ehome、海大宇等设备的SDK等。在视频流的处理与分发上&#xff0c;视频监控…