HTML5新标签

news2024/12/25 9:21:14

HTML5

特点

image-20200714110820316

新标签

<header>...<header> 头部标签

<footer>...<footer> 尾部标签

<section>...<section> 内容区块

<article>...,article> 表示页面中的独立内容

<aside>...<aside> 标签定义其所处内容之外的内容

<nav>...<nav> 导航

  • <nav>里面可以直接写<li></li>
    
  • <nav>
    	<li></li>
    </nav>
    
    

<figure>...<figure>表示一段独立的流内容,一般表示文档主体流内容中的一个独立单元。规定独立的流内容(图像、
图表、照片、代码等等)。使用figcaption元素为figure元素添加标题。
◆ figure 是一种元素的组合,带有可选 标题。用来表示网页上一块独立的内容。figure 元素的内容
应该与主内容相关,但如果被删除,则不应对文档流产生影响

<embed>...<embed> embed标签用于定义嵌套的内容,包括各种媒体

<mark>...<mark>高亮显示

  • 可以改变其高亮颜色

<video>...<video>

<video src="song.mp3" controls="controls" autoplay=autoplay>
</video>

image-20200714144235272

image-20200714144409091

image-20200714144707737

  • src是视频路径
  • autoplay 设置自动播放
  • controls (controls=“controls”)向用户展示控件 ,例如播放按钮
  • loop循环播放
  • preload 视频在页面加载时进行加载,并预备播放

<audio>...<audio> 音频标签

<audio src="song.mp4" controls="controls" autoplay=:autoplay>
</audio>

image-20200714145625761

  • src是视频路径
  • autoplay 设置自动播放
  • controls (controls=“controls”)向用户展示控件 ,例如播放按钮

<datalist>...<datalist> 智能列表 供其选择

<p>
    /* list里的id要和datalist里的id一致 */
    <input type="text" nmae="a1" list="text">   
</p>

<datalist id="text">
    <option>大班</option>
    <option>班级</option>
    <option>班班</option>
</datalist>

<canvas>...<canvas>canvas可以完成动画、游戏、图表、图像处理等原来需要Flash完成的一些功能

<hgroup>...<hgroup> 标签被用来对标题元素进行分组。
当标题有多个层级(副标题)时,<hgroup> 元素被用来对一系列 <h1> - <h6> 元素进行分组。

表单元素

type=email 控制input输入框中的类型 具有multiple属性,它
允许在该文本框中输入一串以逗号分隔的email地址

  • required="required"表示字段的验证内容不能为空

type=url 控制input输入框内的类型为网址

type=number 控制input输入框的类型为数字

  • value设置默认值
  • min设置最小值
  • max设置最大值
  • step设置递增的值

type="range"滑块

  • value设置默认值
  • min设置最小值,自己也算第一步
  • max设置最大值,自己也算第一步
  • step设置递增的值,自己也算第一步

date pickers type=" "

  • datetime-local 本地时间

placeholder 文本框处于未输入状态时文本框中显示的输入提示

autofocus="autofocus" 自动聚焦功能
焦点,一个页面只能有一个聚焦

autocomplete 输入自动填充完成

maxlength最大长度

novalidate取消验证

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

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

相关文章

掌控未来:用决策树算法揭秘胜利者的必胜策略!

掌控未来&#xff1a;用决策树算法揭秘胜利者的必胜策略&#xff01; 一、引言1.1. 决策树的定义1.2. 发展历程1.3. 当前应用概况1.4. 本文内容安排 二、决策树的基本概念2.1 节点和叶节点2.2 决策树的结构结构图示不同结构的决策树 三、决策树的算法原理3.1 基本思想3.2 核心算…

使用 Nstbrowser 管理多个帐户 - 2024 年最佳反检测浏览器

每个人一定都看过那些房间里全是窃听器的老间谍电影&#xff0c;对吧&#xff1f;现在这些电影可能看起来有点好笑&#xff0c;但互联网并没有好到哪里去&#xff01; 事实上&#xff0c;每个你打开的页面在你浏览时都在被监控&#xff01;此外&#xff0c;当你管理多个账户时…

Web应用安全测试-防护功能缺失

Web应用安全测试-防护功能缺失 1、Cookie属性问题 漏洞描述&#xff1a; Cookie属性缺乏相关的安全属性&#xff0c;如Secure属性、HttpOnly属性、Domain属性、Path属性、Expires属性等。 测试方法&#xff1a; 通过用web扫描工具进行对网站的扫描&#xff0c;如果存在相关…

成都某展厅2套2x2透明OLED拼接屏项目

成都某展厅的2套2x2透明OLED拼接屏展示设计具有独特的技术魅力和视觉效果。以下是关于这一展示设计的详细介绍&#xff1a; 1.产品规格 类型&#xff1a;透明OLED拼接屏 尺寸与配置&#xff1a;每套为2x2拼接&#xff0c;即每套由4块屏幕组成。 2.应用场景 成都某展厅&#…

实战 | 基于YOLOv10的车辆追踪与测速实战【附源码+步骤详解】

《博主简介》 小伙伴们好&#xff0c;我是阿旭。专注于人工智能、AIGC、python、计算机视觉相关分享研究。 ✌更多学习资源&#xff0c;可关注公-仲-hao:【阿旭算法与机器学习】&#xff0c;共同学习交流~ &#x1f44d;感谢小伙伴们点赞、关注&#xff01; 《------往期经典推…

linux部署运维3——centos7.9离线安装部署配置涛思taos2.6时序数据库TDengine以及java项目链接问题处理(二)

上一篇讲了centos7.9如何安装涛思taos2.6时序数据库的操作步骤和方案&#xff0c;本篇主要讲解taos数据库的初始化&#xff0c;相关配置说明&#xff0c;数据库和表的创建问题以及java项目连接问题。 centos7.9如何离线安装taos2.6&#xff0c;请点击下方链接详细查看&#xf…

zotero style最新(可全文翻译)

问题&#xff1a;在下载zotero style的时候&#xff0c;总会出现各种奇奇怪怪的问题&#xff0c;不是期刊没有级别&#xff0c;就是没有IF之类的&#xff1b; 解决&#xff1a;https://github.com/MuiseDestiny/zotero-style/releases 在这里下载最新的版本 若要使用全文翻译…

【IPython使用技巧整理】内省功能历史命令执行Shell命令运行脚本导出为其他格式

本人详解 作者:王文峰,参加过 CSDN 2020年度博客之星,《Java王大师王天师》 公众号:JAVA开发王大师,专注于天道酬勤的 Java 开发问题中国国学、传统文化和代码爱好者的程序人生,期待你的关注和支持!本人外号:神秘小峯 山峯 转载说明:务必注明来源(注明:作者:王文峰…

最佳Google Chrome扩展和Mozilla Firefox扩展自动解决验证码

在这个信息爆炸的时代&#xff0c;我们每天都要处理大量的在线内容&#xff0c;验证码已成为不可避免的挑战。尽管它们旨在保护网站安全&#xff0c;但也常常成为我们获取信息的障碍。那么&#xff0c;有没有更简单的方法绕过这些验证码呢&#xff1f;答案是肯定的。通过使用一…

本地安装nightingale监控分析服务并发布公网详细流程

文章目录 前言1. Linux 部署Nightingale2. 本地访问测试3. Linux 安装cpolar4. 配置Nightingale公网访问地址5. 公网远程访问Nightingale管理界面6. 固定Nightingale公网地址 前言 本文主要介绍如何在本地Linux系统部署 Nightingale 夜莺监控并结合cpolar内网穿透工具实现远程…

Linux——ansible里的变量

在ansible里&#xff0c;变量干嘛用的 本身&#xff0c;ansible就是致力于&#xff0c;用尽可能“通用”的剧本&#xff0c;干所有场合的工作…… ansible里的变量怎么写 字母开头&#xff0c;包括&#xff1a;字母数字下划线 变量怎么定义&#xff08;声明&#xff09; 1.…

看完这篇希喂、扑呀、MEOW主食冻干测评,100预算也能养出貌美小猫

对于许多宠物主人来说&#xff0c;一到挑选主食冻干就头疼。尽管主食冻干为猫咪带来的益处远超过普通猫粮&#xff0c;但其价格也相对较高。因此&#xff0c;许多宠物主人担心高价购买的主食冻干营养价值并不高。实际上&#xff0c;除了营养&#xff0c;安全性和配方也是选购时…

IEPL专线和IPLC专线有什么区别?

IEPL和IPLC是两种广泛用于国际通信的专线服务&#xff0c;IEPL是一种以太网专线服务&#xff0c;IPLC是一种传统的专线服务&#xff0c;它们在某些方面有相似之处&#xff0c;但也存在一些关键的区别。下面是IEPL和IPLC的主要区别: 1.技术和定义: IEPL: 技术: IEPL是一种以太…

基于Springboot框架班级综合测评管理系统的设计与实现

开头语&#xff1a;你好呀&#xff0c;我是计算机学姐码农小野&#xff01;如果有相关需求&#xff0c;可以私信联系我。 开发语言&#xff1a;Java 数据库&#xff1a;MySQL 技术&#xff1a;Springboot框架&#xff0c;B/S模式 工具&#xff1a;MyEclipse 系统展示 首页…

第9章 类

第9章 类 9.1 创建和使用类9.1.1 创建 Dog 类9.1.2 根据类创建实例 9.2 使用类和实例9.2.1 Car 类9.2.2 给属性指定默认值9.2.3 修改属性的值 9.3 继承9.3.1 子类的方法__init__()9.3.2 给子类定义属性和方法9.3.3 重写父类的方法9.3.4 将实例用作属性9.3.5 模拟实物 9.4 导入类…

深入探索Java开发世界:Java基础~类型分析大揭秘

文章目录 一、基本数据类型二、封装类型三、类型转换四、集合类型五、并发类型 Java基础知识&#xff0c;类型知识点梳理~ 一、基本数据类型 Java的基本数据类型是语言的基础&#xff0c;它们直接存储在栈内存中&#xff0c;具有固定的大小和不变的行为。 八种基本数据类型的具…

数据预处理之基于聚类的TOD异常值检测#matlab

1.基于聚类的异常值检测方法 物以类聚——相似的对象聚合在一起&#xff0c;基于聚类的异常点检测方法有两个共同特点&#xff1a; (1)先采用特殊的聚类算法处理输入数据而得到聚类&#xff0c;再在聚类的基础上来检测异常。 (2)只需要扫描数据集若干次&#xff0c;效率较高…

考试系统提供源码能做什么?

考试系统提供源码&#xff0c;无疑为现代教育领域注入了新的活力。源码&#xff0c;作为软件开发的基石&#xff0c;其开放与共享的特性使得考试系统具备了前所未有的灵活性和可定制性。那么&#xff0c;考试系统提供源码究竟能做什么呢&#xff1f;本文将详细探讨其多重功能与…

钡铼BL101网关助力智慧城市路灯远程智能管控

在迈向智慧城市的征途中&#xff0c;基础设施的智能化改造是关键一环&#xff0c;而路灯作为城市脉络的照明灯塔&#xff0c;其智能化升级对于节能减排、提升城市管理效率具有重要意义。钡铼BL101网关&#xff0c;作为Modbus转MQTT的专业桥梁&#xff0c;正以其卓越的性能和广泛…

如何安装Android程序

1.登录下载 Android Studio 和应用工具 - Android 开发者 | Android DevelopersAndroid Studio 提供了一些应用构建器以及一个已针对 Android 应用进行优化的集成式开发环境 (IDE)。立即下载 Android Studio。https://developer.android.google.cn/studio/网站下载电脑对应的…