HTML5新特性总结

新增语义化标签

新增了很多语义化标签,如headerfooternavarticlesection(页面中的某段文字,或文章中的某段文字)、asidemain

其中article标签里可以包含多个section;

section强调的是分段或分块,若想将一块内容分成几段的时候,可以使用section标签;

article比section更强调独立性,一块内容如果比较独立或完整,则应该使用article标签;

新增状态标签

新增了一些状态标签,如meter标签与progress标签,

meter:定义已知范围内的标量测量,可以用来表示用量等;

常用属性:

        high(高值)、low(低值)、max(最大值)、min(最小值)、optimum(最优值)、value(当前值)

<meter high="100" low="40" value="30" min="20" max="120" optimum="70"></meter>
<meter high="100" low="40" value="70" min="20" max="120" optimum="70"></meter>
<meter high="100" low="40" value="110" min="20" max="120" optimum="70"></meter>

progress:用于表示进度

常用属性:

        max:目标进度值

        value:当前值 

<progress max="100" value="40"></progress>

新增列表标签

新增了多个列表标签,如datalist、details与summary

datalist:用于搜索框的关键字提示

<input type="text" list="datas">
<datalist id="datas">
  <option value="唱歌">唱歌</option>
  <option value="跳舞">跳舞</option>
  <option value="倾听">倾听</option>
  <option value="spa">spa</option>
</datalist>

details:用于展示问题和答案,或对专有名词进行解释,配合summary使用;

summary:写在details的里面,用于指向问题或专有名词

<details>
  <summary>如何过好自己的一生?</summary>
  <span>保持热忱,努力去爱</span>
</details>

   

新增文本标签

ruby:用于包裹需要被注音的文本,配合rt标签使用;

rt:写在ruby标签内部,用于写注音;

<ruby>
  羴
  <rt>shān</rt>
  犇
  <rt>bēn</rt>
</ruby>

mark;用于标记文本 

<span>分手快乐,祝你<mark>快乐</mark></span>

新增表单属性

placeholder:表单提示文字

required:必填

autofocus:自动获取焦点

autocomplete:自动完成,可选项有on与off;

pattern:表达式,需要与required配合使用,否则校验不到 

novalidate:若设置该属性,表示不会提交表单时不会再对表单进行校验~

input新增type属性值

email:邮件类型输入

url:url类型的输入

number:数字类型的输入

search:搜索类型的输入

tel:电话类型的输入

range:范围类型的输入,默认是50

color:颜色类型的输入

date:日期选择框

month:月份选择框

week:周选择框

time:时间选择框

datetime-loca:日期+时间选择框

上述所有类型的input标签,在表单提交时都会校验格式~ 

 新增音视频标签

audio:定义音频

常用属性有:

        src:url地址,表示音频地址;

        controls:显示音频控件(用户可控制开关等按钮)

        autoplay:自动播放

        muted:音频静音

        loop:循环播放

        preload:预加载,属性值有auto/metadata(加载音频基本信息,如音频长度)/none

video:定义视频

常用属性有:

        src:url地址,表示视频地址;

        width:播放器宽度

        height:播放器高度

        controls:显示视频控件(用户可控制开关等按钮)

        muted:视频静音

        autoplay:自动播放

        poster:视频封面

        loop:循环播放

        preload:预加载,属性值有auto/metadata/none 

新增全局属性

contenteditable:表示元素是否可被编辑,属性值有true和false

<span contenteditable="true">分手快乐,祝你<mark>快乐</mark></span>

<span contenteditable="false">分手快乐,祝你<mark>快乐</mark></span>

draggable:表示元素是否可被拖动,属性值有true和false,配合拖动事件可以实现一些功能

<div draggable="true" ondragend="alert('分手快乐~')">分手快乐,祝你<mark>快乐</mark></div>

hidden:用于隐藏元素 

<div hidden>分手快乐,祝你<mark>快乐</mark></div>

spellcheck:表示是否对元素进行拼写和语法检查,属性值有true和false 

 <div spellcheck>Loreme ipsum dolor sit amet.</div>

contextmenu:规定元素的上下文菜单,在用户鼠标右键点击时显示,需配合menu标签使用,与menu标签中的id属性值保持一致

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

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

相关文章

【Vscode】解决 An SSH installation couldn‘t be found

【Vscode】解决 An SSH installation couldn‘t be found 背景描述&#xff1a;在vscode中使用ssh进行连接到时候&#xff0c;已经安装了ssh romote的plugin插件&#xff0c;但是在输入了ssh连接命令之后&#xff0c;仍然出现报错&#xff1a;an ssh installation could not be…

OpenCV 入门教程:中值滤波和双边滤波

OpenCV 入门教程&#xff1a;中值滤波和双边滤波 导语一、中值滤波二、双边滤波三、示例应用3.1 图像去噪3.2 图像平滑 总结 导语 在图像处理和计算机视觉领域&#xff0c;中值滤波和双边滤波是两种常见的滤波方法&#xff0c;用于平滑图像、去除噪声等。 OpenCV 提供了中值滤…

sap abap,forms,smartforms 导出pdf

4种方法&#xff1a; 1.安装pdf程序&#xff0c;Foxit Reader,先敲回车 自动带出&#xff0c;如下图&#xff1a; 直接打印就会弹出保存pdf文档路径&#xff0c;点保存。这种方式是最简单的&#xff0c;可 forms 和 smartforms 。 2. forms 和 smartforms 打印到spool 中&…

Maven工程开发中的继承与聚合

1. 聚合工程概念 设置一个空的maven工程&#xff0c;工程里面只有pom文件&#xff0c;另外将这个工程的打包方式设置为pom。 在聚合工程里面添加聚合工程里面管理的模块 2.聚合总结 3.继承 例如下面02工程继承上面的01工程&#xff0c;在02工程的pom文件中要配置要继承的父工…

保护你的JavaScript代码:深入了解JS混淆加密及其特点

当涉及到JavaScript代码的保护和隐藏时&#xff0c;混淆加密是一种常见的技术。它通过对代码进行转换和重组&#xff0c;使其难以理解和逆向工程。以下是JS混淆加密的几个特点以及它们各自的优缺点&#xff1a; 变量和函数名压缩&#xff1a; 特点&#xff1a;将代码中的变量和…

Hystrix熔断器

雪崩 当山坡积雪内部的内聚力抗拒不了它所受到的重力拉引时&#xff0c;积雪便向下滑动&#xff0c;引起⼤量雪体崩塌&#xff0c;人们把这种自然现象称作雪崩 微服务中&#xff0c;一个请求可能需要多个微服务接口才能实现&#xff0c;会形成复杂的调用链路 …

Holoens证书过期

1. 删除Assets\WSATestCertificate.pfx证书文件。 2. 在Player Settings的Publishing Settings下找到Certificate,选择一个有效的证书。 3. 如果没有其他有效证书,需要生成一个新的测试证书: - Windows: MakeCert.exe -r -pe -n "CNTemporary Certificate" -ss MY …

Linux--操作系统进程的状态

【Linux】进程概念 —— 进程状态_linux d状态进程_Hello_World_213的博客-CSDN博客 新建&#xff1a;字面意思&#xff0c;将你的task_struct创建出来并且还未入队列 运行&#xff1a;task_struct结构体在运行队列中排队&#xff0c;就叫做运行态 阻塞&#xff1a; 等待非C…

GPT(Generative Pre-Training)论文解读及实现(一)

1 GPT Framework 1.1 Unsupervised pre-training Given an unsupervised corpus of tokens U {u1, . . . , un}, we use a standard language modeling objective to maximize the following likelihood: 在给定语料上下文环境下&#xff0c;目标时最大化下面的语言模型&…

OpenCV 图像处理算法和技术的应用实践

OpenCV 图像处理算法和技术的应用实践 导语一、图像滤波算法二、图像分割技术三、特征提取与描述算法四、实践示例&#xff1a;图像风格转换总结 导语 图像处理算法和技术在计算机视觉和图像处理领域发挥着重要作用&#xff0c;通过对图像进行分析、增强和转换&#xff0c;可以…

实验二 常用网络命令

文章目录 实验目的实验原理1. 通过 ping 命令检测网络故障2. ipconfig 命令3. arp 命令4. tracert 命令5. netstat 命令 实验内容1. ping命令2. ipconfig命令3. arp命令 实验总结 实验目的 了解常用网络命令及其使用方法。通过网络命令了解网络状态&#xff0c;并利用网络命令…

高速入门知识02:降低串扰和维持信号完整性的布线方法

文章目录 前言一、单端走线布线1.1.带有短截线的菊花链布线1.2.没有短截线的菊花链布线1.3.星型布线1.4.蛇型布线 二、差分走线布线 前言 串扰是并行走线间不需要的信号耦合。微带线和带状线正确的布线和叠层布局能够降低串扰。 双带线布局有两个靠近的信号层&#xff0c;为降…

Hbase drop 表卡住没有响应

在实际工作中遇到过重新创建一个hbase的hive外部表&#xff0c;在 disable table_name; drop table_name 在drop table_name卡住 最后有提示报错。 建议各位查看下表有无lock的情况&#xff0c; 查看和释放hbase lock可以通过如下方式来查看 pid获取&#xff1a; 在 Ma…

Python学习笔记-基于socket基础的http服务端程序

通过HTTP协议可以进行通信可以规范化的进行网络间通信。下面技术第一个http服务器小程序。简单的记录第一个试手程序。 1.http通信的基本流程 整个流程对应四层网络架构&#xff1a;应用层、传输层、网络层、链路层。有的部分已经封装&#xff0c;不需要我们再行处理。 2.服务…

轻松玩转Python正则表达式

引言 正则表达式是一种强大的文本匹配和处理工具&#xff0c;广泛应用于各种编程语言中。在Python中&#xff0c;我们可以使用内置的re模块来处理正则表达式。本文将带您从入门到精通&#xff0c;逐步介绍Python中的正则表达式用法&#xff0c;并提供实例演示。 1. 正则表达式…

JVM理论(二)类加载子系统

类加载流程 类加载流程 类加载器子系统负责从文件系统或者网络中加载class文件,class文件的文件头有特定的文件标识(CAFEBABE是JVM识别class文件是否合法的依据)classLoader只负责文件的加载,而执行引擎决定它是否被执行加载类的信息存放在运行时数据区的方法区中,方法区还包括…

VBA代码如何切换word和excel(3)

【分享成果&#xff0c;随喜正能量】人不能因为一件好事&#xff0c;高兴一整年&#xff0c;却能因为一个创伤&#xff0c;郁郁终生。痛苦给人的刺激&#xff0c;总是远远大于快乐。成年人的烦恼&#xff0c;和谁说都不合适&#xff0c;悲喜自渡&#xff0c;他人难悟。人最强大…

4-软件错误(BUG)

目录 1.什么是bug? 2.如何描述一个bug? ①发现问题的版本 ②问题出现的环境 ③错误重现的步骤 ④预期行为的描述 ⑤错误行为的描述 ⑥其他 ⑦不要把多个bug放到一起 PS&#xff1a;案例1 PS&#xff1a;案例2 3.如何定义bug的级别&#xff1f; ①Blocker&#x…

springboot+mysql财务管理系统

财务管理系统的开发运用java技术、springboot框架&#xff0c;MIS的总体思想&#xff0c;以及Mysql等技术的支持下共同完成了该系统的开发&#xff0c;实现了财务管理的信息化&#xff0c;使员工体验到更优秀的财务管理&#xff0c;管理员管理操作将更加方便&#xff0c;实现目…

10.3.2 【Linux】历史命令:history

[dmtsaistudy ~]$ alias hhistory 在正常的情况下&#xff0c;历史命令的读取与记录是这样的&#xff1a; 当我们以 bash 登陆 Linux 主机之后&#xff0c;系统会主动的由主文件夹的 ~/.bash_history 读取以前曾经下过的指令&#xff0c;那么 ~/.bash_history 会记录几笔数据呢…