web前端html笔记2

新增状态标签<meter><progress>

<meter>

属性

描述

high

数值

规定高值

low

数值

规定低值

max

数值

规定最大值

min

数值

规定最小值

optimum

数值

规定最优值

value

数值

规定当前值

<body>

<meter high="50" low="30" value="" max="80" min="0"></meter>

</body>

<progress>

属性

描述

max

数值

规定目标值

value

数值

规定当前值

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

新增列表标签

标签名

语义

单/双标签

datalist

用于搜索框的关键字提示

details

用于展示问题和答案,或对专用名词进行解释

summary

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

<input type="text" list="mydata">

<datalist id="mydata">

<option value="周冬雨”>周冬雨</option>

<option value="周杰伦">周杰伦</option>

<option value="温兆伦”>温兆伦</option>

<option value="马冬梅">马冬梅</option>

</datalist>

<details>

<summary>如何走上人生巅峰? </summary>

<p>一步一步走呗</p>

</details>

新增文本标签

文本注音

标签名

语义

单/双标签

ruby

包含需要注音的文字

rt

写注音,rt标签写在ruby的里面

<ruby>

<span>你好</span>

<rt>ni hao</rt>

</ruby>

文本标记

标签名

语义

单/双标签

mark

标记(建议用mark用于标记搜索结果中的关键字

W3C建议mark用于标记搜索结果中的关键词

新增表单控件

<body>

<audio id="music”src="./小曲.mp3"controls></audio>

<div class="mask” id="mask">

<div class="dialog">

<span>点我登录</span>

<span οnclick="go()">随便听听</span>

</div>

</div>

<script>

function go (){

music.play()

mask.style.display = 'none}

</script>

</body>

<draggable>需要和JS配合使用

<spellcheck>需打开浏览器的拼写检查

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

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

相关文章

鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之TextInput输入框组件

鸿蒙&#xff08;HarmonyOS&#xff09;项目方舟框架&#xff08;ArkUI&#xff09;之TextInput输入框组件 一、操作环境 操作系统: Windows 10 专业版 IDE:DevEco Studio 3.1 SDK:HarmonyOS 3.1 二、TextInput 接口 TextInput(value?:{placeholder?: ResourceStr, tex…

NIO的实战教程(简单且高效)

1. 参考 建议按顺序阅读以下三篇文章 为什么NIO被称为同步非阻塞&#xff1f; Java IO 与 NIO&#xff1a;高效的输入输出操作探究 【Java.NIO】Selector&#xff0c;及SelectionKey 2. 实战 我们将模拟一个简单的HTTP服务器&#xff0c;它将响应客户端请求并返回一个固定的…

【EI会议征稿】2024年光电信息与光学工程国际学术会议(OIOE 2024)

2024年光电信息与光学工程国际学术会议&#xff08;OIOE 2024&#xff09; 2024 International Conference on Optoelectronic Information and Optical Engineering 光电信息技术和光学工程技术广泛应用于国民经济和国防建设的各行各业。近年来&#xff0c;随着相关产业的迅…

AcWing算法提高课-1.4.2股票买卖 IV

算法提高课整理 CSDN个人主页&#xff1a;更好的阅读体验 原题链接 题目描述 给定一个长度为 n n n 的数组&#xff0c;数组中的第 i i i 个数字表示一个给定股票在第 i i i 天的价格。 设计一个算法来计算你所能获取的最大利润&#xff0c;你最多可以完成 k k k 笔交易…

2024年你的年度目标OKR制定好了吗?

标题2023年余额见底&#xff0c;2024年的FLAG都制定好了吗&#xff1f; 目标很明确&#xff0c;计划很丰满&#xff0c;执行起来又处处透着一点点乏力&#xff0c;怎么办&#xff1f; 2024年可以尝试用OKR制定目标。 OKR目标管理方法&#xff0c;既适用于企业&#xff0c;也…

智能优化算法应用:基于卷尾猴算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于卷尾猴算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于卷尾猴算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.卷尾猴算法4.实验参数设定5.算法结果6.参考文…

前端案例—antdDesign的Select多选框组件加上全选功能

前端案例—antdDesign的Select多选框组件加上全选功能。 实现效果如下&#xff1a; Select 组件里有这个属性&#xff0c;可以利用这个对下拉菜单进行自定义。 const handleChange (e, value) > {setSelectState(e.target.checked)let arr productOptions?productOption…

嵌入式系统复习--ARM指令集(二)

文章目录 上一篇ARM指令详细介绍数据处理指令Load/Store指令转移指令异常中断指令协处理器指令下一篇 上一篇 嵌入式系统复习–ARM指令集&#xff08;一&#xff09; ARM指令详细介绍 分类 数据传送指令算术运算指令逻辑运算指令比较指令测试指令乘法指令 二进制编码格式 #…

Ubuntu 22.04 禁用(彻底移除)Snap

什么是Snaps Snaps 是 Ubuntu 的母公司 Canonical 于 2016 年 4 月发布 Ubuntu 16.04 LTS&#xff08;Long Term Support&#xff0c;长期支持版&#xff09;时引入的一种容器化的软件包格式。自 Ubuntu 16.04 LTS 起&#xff0c;Ubuntu 操作系统可以同时支持 Snap 及 Debian …

Python之Django项目的功能配置

1.创建Django项目 进入项目管理目录&#xff0c;比如&#xff1a;D盘 执行命令&#xff1a;diango-admin startproject demo1 创建项目 如果提示diango命令不存在&#xff0c;搜索diango-admin程序的位置&#xff0c;然后加入到环境变量path中。 进入项目&#xff0c;cd demo…

了解XSS、CSRF攻击这一篇就够了

目录 XSS攻击XSS概念XSS案例XSS攻击类型反射型存储型 总结 CSRFCSRF概念CSRF防御方式一&#xff1a;跨域禁止携带cookie方式二&#xff1a;设置SameSite属性为Strict方式三&#xff1a;验证Referer字段&#xff08;利用浏览器功能&#xff09;方式四&#xff1a;Token XSS攻击 …

深入理解 JavaScript 函数:提升编程技能的必备知识(中)

&#x1f90d; 前端开发工程师&#xff08;主业&#xff09;、技术博主&#xff08;副业&#xff09;、已过CET6 &#x1f368; 阿珊和她的猫_CSDN个人主页 &#x1f560; 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 &#x1f35a; 蓝桥云课签约作者、已在蓝桥云…

WPF组合控件TreeView+DataGrid之DataGrid封装

&#xff08;关注博主后&#xff0c;在“粉丝专栏”&#xff0c;可免费阅读此文&#xff09; wpf的功能非常强大&#xff0c;很多控件都是原生的&#xff0c;但是要使用TreeViewDataGrid的组合&#xff0c;就需要我们自己去封装实现。 我们需要的效果如图所示&#x…

【MAC、IOS】charles抓包配置教程,亲测有效

&#x1f4e2;专注于分享软件测试干货内容&#xff0c;欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; 如有错误敬请指正&#xff01;&#x1f4e2;交流讨论&#xff1a;欢迎加入我们一起学习&#xff01;&#x1f4e2;资源分享&#xff1a;耗时200小时精选的「软件测试」资…

4.3【共享源】克隆实战开发之截屏(一)

一,Screen截屏介绍 Screen的截屏是指从源读取像素,然后复制到缓冲区。然后可以根据需要操纵缓冲区;它可以简单地写入文件,也可以在其他窗口或显示器中使用。 Screen API从源中读取像素,并将其复制到提供的缓冲区中以捕获截屏。缓冲区可以是pixmap或窗口缓冲区,但必须设…

UE5 Landscape 制作GIS卫星图地形

1. 总体想法&#xff1a; 制作GIS地形&#xff0c;使用Landscaping MapBox是一个好方法&#xff0c;但是区域过大&#xff0c;会占用很多内存 https://blog.csdn.net/qq_17523181/article/details/135029614 如果采用QGis&#xff0c;导出卫星图&#xff0c;在UE5里拼合出地形…

趁网站还在!用python把次元岛COS小姐姐图集批量下载~

嗨喽&#xff0c;大家好呀~这里是爱看美女的茜茜呐 开发环境: Python 3.10 Pycharm 模块使用: requests >>> 数据请求模块 re >>> 匹配提取数据 os >>> 自动创建文件夹 如何安装python第三方模块: win R 输入 cmd 点击确定, 输入安装命令 p…

Codeforces Round 862 (Div. 2)

Problem - A - Codeforces AC代码: #include<bits/stdc.h> #define endl \n //#define int long long using namespace std; const int N1e310; int a[N]; int n; void solve() {cin>>n;int ans0;for(int i1;i<n;i) cin>>a[i],ans^a[i];if(n%21){for(in…

SQL布尔盲注 (Blind)基本原理及使用burpsuite进行暴力猜解

SQL布尔型盲注入是一种SQL注入攻击方式&#xff0c; 根据某个条件是否成立&#xff0c;来判断返回结果的真假&#xff0c;通过布尔型盲注&#xff0c;攻击者可以逐个字符地推断出数据库中存储的信息&#xff0c;如用户名、密码等&#xff0c;从而获取敏感信息或者执行非法操作。…

【EI会议征稿】第三届算法、微芯片与网络应用国际会议(AMNA 2024)

第三届算法、微芯片与网络应用国际会议&#xff08;AMNA 2024&#xff09; 2024 3rd International Conference on Algorithms, Microchips and Network Applications 第三届算法、微芯片与网络应用国际会议(AMNA 2024) 将于2024年3月8-10日在中国西安召开, AMNA 2024将围绕 …