当前位置： 首页 > news >正文

html5新增特性

news 2025/7/7 23:20:05

对于这行代码，要写在html页面的最前端：

<!DOCTYPE html>

为什么要写在前面？

这是声明，是html5的新特性

对于html4来说，它有三种声明格式，而html5只需要统一声明，用来告诉浏览器文档使用哪一种HTML或者XHYML规范的。

语义化标签

新增<header>,<nav>,<section>,<article>,<aside>,<footer>标签

更好的描述和组织网页内容，使搜索引擎和浏览器可以更好的理解和处理页面结构，爬虫可以爬取更多有效信息。

增强型表单

新的表单类型
  • 邮箱验证——<input type="email">
  • 数值输入——<input type="number" min="9" max="12">
  • 文件导入——<input type="file" id="myFile" multiple>
  • 颜色选择——<input type="color">
  • 图片按钮——<input type="image" src="#" width=750 alt="">
  • 搜索框——<input type="search">
  • 手机号输入——<input type="tel">
  • 选择日期——<input type="date">，<input type="datetime-local">
  • 网址输入框——<input type="url">
新的表单属性
  • placeholder——文本占位符，提示信息
  • required——这个属性的值为bool，默认是true，输入不能为空
  • autofocus——自动聚焦到需要填写的textarea
  • autocomplete——属性有两个值，应该是on（默认），另一个是off。提示已经写过的信息（要和name="username"一起用，不然不生效）
  • min，max——限定输入的最少字数和最多字数，以字符个数计数

视频和音频

audio，video audio 和 video标签都很容易输出音频或视频流，提供便利的获取文件信息的API

Canvas绘图

提供一个通过JavaScript和HTML的canvas元素来绘制图形的方式。可以用于动画，数据可视化，图片编辑等

SVG绘图

用xml描述2d图形的语言，xml用来传输和存储数据

SVG比canvas绘图好用，SVG不容易失帧，更稳定。它比较容易编辑，只需要从描述中移除元素就可以了

地理位置

可以识别定位，并且与别人共享地理信息

获取地理位置：通过ip地址；电脑上的位置信息定位

拖放API

这只元素为可拖放，默认属性是false

<img draggable = "true">

设置了之后用setData()或者ondragstart

WebStorage

HTML4中用cookie，在用户端保存用户数据。但是他的存储内存不大，而且是携带在http请求头中，造成资源浪费，操作cookie麻烦。

在HTML5用WebStorage在客户端本地保存用户数据

WebWorker

js是单线程执行模式，所有任务只能在一个线程上执行，一次只做一件事情。

现在的计算机大多数是多核的，不能发挥CPU计算的价值。

而WebWorker为js创造了多线程环境，js在主线执行，new一个子线程在后台执行，worker完成计算的任务给主线程，主线程中的代码执行会导致浏览器响应阻塞，而子线程代码执行不会。主线程和子线程两者互补干扰，独立执行。

主流浏览器对WebWorker兼容性不高

WebSocket

WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

在WebSocket API中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。当你获取 Web Socket 连接后，你可以通过 send() 方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据。WebSocket 协议本质上是一个基于 TCP 的协议。为了建立一个 WebSocket 连接，客户端浏览器首先要向服务器发起一个 HTTP 请求，这个请求和通常的 HTTP 请求不同，包含了一些附加头信息，其中附加头信息"Upgrade: WebSocket"表明这是一个申请协议升级的 HTTP 请求，服务器端解析这些附加的头信息然后产生应答信息返回给客户端，客户端和服务器端的 WebSocket 连接就建立起来了，双方就可以通过这个连接通道自由的传递信息，并且这个连接会持续存在直到客户端或者服务器端的某一方主动的关闭连接。

相关文章：

html5新增特性

对于这行代码&#xff0c;要写在html页面的最前端&#xff1a; <!DOCTYPE html> 为什么要写在前面&#xff1f; 这是声明&#xff0c;是html5的新特性 对于html4来说&#xff0c;它有三种声明格式&#xff0c;而html5只需要统一声明&#xff0c;用来告诉浏览器文档使用…...

编程日记 2023/12/19 3:00:52

4、APScheduler: 详解Scheduler种类用法、常见错误与解决方法【Python3测试任务管理总结】

调度器（Scheduler）是将其他组件绑在一起的关键。通常在应用程序中只运行一个调度器。应用程序开发者通常不直接处理作业存储（job stores）、执行器（executors）或触发器（triggers）。相反，调度器提供了适当的接口来处理所有这些。通过调度器配置作业存储和执行器，以及添…...

编程日记 2023/12/19 2:59:50

微服务实战系列之ZooKeeper（实践篇）

前言 关于ZooKeeper&#xff0c;博主已完整的通过庖丁解牛式的“解法”&#xff0c;完成了概述。我想掌握了这些基础原理和概念后&#xff0c;工作的问题自然迎刃而解&#xff0c;甚至offer也可能手到擒来&#xff0c;真实一举两得&#xff0c;美极了。 为了更有直观的体验&a…...

编程日记 2023/12/19 2:58:49

C++ 开发中为什么要使用继承

为何继承 实验介绍 继承是 C++ 中的特性之一，使用继承能够有效减轻工作量，使得开发更加高效。 知识点 什么是继承为何继承继承的内容权限关键字什么是继承 生活中继承是指孩子继承父亲的财产等。C++ 使用了这一思想，却又与生活中的继承不一样。 在使用继承时，派生类是…...

编程日记 2023/12/19 2:48:41

2020蓝桥杯c组纸张大小

题目名字 纸张大小 题目链接 题意 给一张纸&#xff0c;通过不断折叠&#xff0c;求最终长宽&#xff0c;给十个数字&#xff0c;输入哪个数字就求哪次折叠的长宽&#xff0c;其实就是&#xff0c;每次折叠后长度的一半变为宽度&#xff0c;原来的宽度变成长度 思路 因为数字…...

编程日记 2023/12/19 2:47:41

【Image】图像处理

计算机视觉 CV Perception 如自动驾驶领域。 只要是从所谓的图像当中去抽取信息的过程&#xff0c;我们都叫做Perception。 视觉检测可以涵盖二维检测&#xff0c;如车辆、人和信号灯的检测。另外&#xff0c;还可以控制三维信息&#xff0c;直接在三维空间中操作数据。 SL…...

编程日记 2023/12/19 2:46:40

JAVA对文档加密

当 Word 文档中包含无法公开的机密信息时&#xff0c;我们可以对其进行加密&#xff0c;使其在没有密码的情况下无法打开。本文将向您介绍如何使用 Spire.Doc for Java 加密 Word 文档和移除 Word 密码保护。 加密 Word 文档删除 Word 密码保护 安装 Spire.Doc for Java 首先…...

编程日记 2023/12/19 2:43:37

EmbedAI：一个可以上传文件训练自己ChatGPT的AI工具，妈妈再也不用担心我的GPT不会回答问题

功能介绍&#xff1a; 个性化定制&#xff1a;提供灵活的训练选项&#xff0c;用户能够通过文件、网站、Notion文档甚至YouTube等多种数据源对ChatGPT进行训练&#xff0c;以满足不同领域和需求的个性化定制。广泛应用场景&#xff1a;ChatGPT支持多种用例&#xff0c;包括智能…...

编程日记 2023/12/19 2:42:36

runCatching异常捕获onSuccess/onFailure返回函数，Kotlin

runCatching异常捕获onSuccess/onFailure返回函数&#xff0c;Kotlin fun test(a: Int, b: Int) {runCatching {a / b}.onSuccess {println("onSuccess: $it")return ok(it)}.onFailure {println("onFailure: $it")return fail(it)} }fun ok(o: Any) {prin…...

编程日记 2023/12/19 2:40:34

IDEA报错处理

问题1 IDEA 新建 Maven 项目没有文件结构 pom 文件为空 将JDK换成1.8后解决。 网络说法&#xff1a;别用 java18&#xff0c;换成 java17 或者 java1.8 都可以&#xff0c;因为 java18 不是 LTS 版本&#xff0c;有着各种各样的问题。。...

编程日记 2023/12/19 2:39:33

使用动画曲线编辑器打造炫酷的3D可视化ACE

前言 在制作3D可视化看板时&#xff0c;除了精细的模型结构外&#xff0c;炫酷的动画效果也是必不可少的。无论是复杂的还是简单的动画效果&#xff0c;要实现100%的自然平滑都是具有挑战性的工作。这涉及到物理引擎的计算和对动画效果的数学建模分析。一般来说&#xff0c;只…...

编程日记 2023/12/19 2:36:29

使用 React 和 ECharts 创建地球模拟扩散和飞线效果

在本博客中&#xff0c;我们将学习如何使用 React 和 ECharts 创建一个酷炫的地球模拟扩散效果。我们将使用 ECharts 作为可视化库&#xff0c;以及 React 来构建我们的应用。地球贴图在文章的结尾。 最终效果 准备工作 首先&#xff0c;确保你已经安装了 React&#xff0c;并…...

编程日记 2023/12/19 2:35:28

http状态码(一)400报错

一 400报错汇总 ① 综述 一、4xx状态码报错说明&#xff1a; 客户端行为导致的报错二、通用的4xxHTTP报错1) 4002) 4013) 4034) 4045) 405 --> 不允许方法&#xff0c;可能跨域或者nginx限制请求方法6) 4087) 4138) 419三、ngin自身定义的4xx报错495、496、497、498、4…...

编程日记 2023/12/19 2:32:26

【深度学习目标检测】五、基于深度学习的安全帽识别（python，目标检测）

深度学习目标检测方法则是利用深度神经网络模型进行目标检测&#xff0c;主要有以下几种&#xff1a; R-CNN系列&#xff1a;包括R-CNN、Fast R-CNN、Faster R-CNN等&#xff0c;通过候选区域法生成候选目标区域&#xff0c;然后使用卷积神经网络提取特征&#xff0c;并通过分类…...

编程日记 2023/12/19 2:31:25

芒果RT-DETR改进实验：深度集成版目标检测 RT-DETR 热力图来了！支持自定义数据集训练出来的模型

💡该教程为改进RT-DETR指南，属于《芒果书》📚系列，包含大量的原创改进方式🚀 💡🚀🚀🚀内含改进源代码 按步骤操作运行改进后的代码即可💡更方便的统计更多实验数据，方便写作 芒果RT-DETR改进实验：深度集成版目标检测 RT-DETR 热力图来了！支持自定义数据集…...

编程日记 2023/12/19 2:29:23

c语言实验八

实验1&#xff1a;在主函数中输入num个字符串&#xff0c;写一个函数&#xff0c;从传入的num个字符串中找出最长的一个字符串&#xff0c;并通过形参指针max传回该串地址&#xff0c;在主函数中输出。&#xff08;注意&#xff1a;用****作为结束输入的标志。&#xff09; #i…...

编程日记 2023/12/19 2:23:17

ArcGIS Pro SDK文件选择对话框

文件保存对话框 // 获取默认数据库var gdbPath Project.Current.DefaultGeodatabasePath;//设置文件的保存路径SaveItemDialog saveLayerFileDialog new SaveItemDialog(){Title "Save Layer File",OverwritePrompt true,//获取或设置当同名文件已存在时是否出现…...

编程日记 2023/12/19 2:21:15

ACT、NAT、NATPT和EASY-IP

目录 一、ACL 1.ACL 2.ACL的两种应用匹配机制 3.ACL的基本类型 4.ACL命令操作 5.ACL实验&#xff1a; 4.ACL的应用原则&#xff1a; 5.匹配原则&#xff1a; 二、NAT 1.NAT的原理及作用&#xff1a; 2.NAT分类 3.NAT配置 三、EASY-ip实验 四、NATPT 五、通配符 …...

编程日记 2023/12/19 2:11:06

HTML实现每天单词积累

注册页面 <!DOCTYPE html> <html> <head><meta charset"UTF-8"><title>注册</title><style>body {font-family: Arial, sans-serif;background-color: #f5f5f5;}form {max-width: 500px;margin: 50px auto;padding: 40px…...

编程日记 2023/12/19 2:08:04

【ECMAScript笔记二】运算符分类，流程控制（顺序结构、分支结构、循环结构）

文章目录 4 运算符4.1 算术运算符4.2 递增和递减运算符4.3 比较运算符4.4 逻辑运算符4.5 赋值运算符4.6 运算优先级 5 流程控制5.1 顺序结构5.2 分支结构5.2.1 if 语句5.2.2 switch 语句 5.3 循环结构5.3.1 for循环5.3.2 while循环5.3.3 do while循环5.3.4 continue和break 5.4…...

编程日记 2023/12/19 2:06:02

【大模型RAG】拍照搜题技术架构速览：三层管道、两级检索、兜底大模型

摘要 拍照搜题系统采用“三层管道&#xff08;多模态 OCR → 语义检索 → 答案渲染&#xff09;、两级检索&#xff08;倒排 BM25 向量 HNSW&#xff09;并以大语言模型兜底”的整体框架&#xff1a; 多模态 OCR 层 将题目图片经过超分、去噪、倾斜校正后&#xff0c;分别用…...

编程新知 2025/7/7 17:33:09

蓝牙 BLE 扫描面试题大全(2)：进阶面试题与实战演练

前文覆盖了 BLE 扫描的基础概念与经典问题蓝牙 BLE 扫描面试题大全(1)&#xff1a;从基础到实战的深度解析-CSDN博客&#xff0c;但实际面试中&#xff0c;企业更关注候选人对复杂场景的应对能力&#xff08;如多设备并发扫描、低功耗与高发现率的平衡&#xff09;和前沿技术的…...

编程新知 2025/7/7 5:28:35

相机Camera日志分析之三十一：高通Camx HAL十种流程基础分析关键字汇总（后续持续更新中）

【关注我，后续持续新增专题博文，谢谢！！！】 上一篇我们讲了：有对最普通的场景进行各个日志注释讲解，但相机场景太多，日志差异也巨大。后面将展示各种场景下的日志。 通过notepad++打开场景下的日志，通过下列分类关键字搜索，即可清晰的分析不同场景的相机运行流程差异…...

编程新知 2025/6/15 13:22:13

Axios请求超时重发机制

Axios 超时重新请求实现方案 在 Axios 中实现超时重新请求可以通过以下几种方式&#xff1a; 1. 使用拦截器实现自动重试 import axios from axios;// 创建axios实例 const instance axios.create();// 设置超时时间 instance.defaults.timeout 5000;// 最大重试次数 cons…...

编程新知 2025/6/21 10:09:08

Python如何给视频添加音频和字幕

在Python中&#xff0c;给视频添加音频和字幕可以使用电影文件处理库MoviePy和字幕处理库Subtitles。下面将详细介绍如何使用这些库来实现视频的音频和字幕添加&#xff0c;包括必要的代码示例和详细解释。 环境准备 在开始之前&#xff0c;需要安装以下Python库&#xff1a;…...

编程新知 2025/6/20 22:43:59

拉力测试cuda pytorch 把 4070显卡拉满

import torch import timedef stress_test_gpu(matrix_size16384, duration300):"""对GPU进行压力测试&#xff0c;通过持续的矩阵乘法来最大化GPU利用率参数:matrix_size: 矩阵维度大小&#xff0c;增大可提高计算复杂度duration: 测试持续时间&#xff08;秒&…...

编程新知 2025/6/21 10:39:11

华为云Flexus+DeepSeek征文｜DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建

华为云FlexusDeepSeek征文&#xff5c;DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建 前言 如今大模型其性能出色&#xff0c;华为云 ModelArts Studio_MaaS大模型即服务平台华为云内置了大模型&#xff0c;能助力我们轻松驾驭 DeepSeek-V3/R1&#xff0c;本文中将分享如何…...

编程新知 2025/7/6 3:14:03

SpringTask-03.入门案例

一.入门案例 启动类&#xff1a; package com.sky;import lombok.extern.slf4j.Slf4j; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.cache.annotation.EnableCach…...

编程新知 2025/6/24 15:42:17

第 86 场周赛：矩阵中的幻方、钥匙和房间、将数组拆分成斐波那契序列、猜猜这个单词

Q1、[中等] 矩阵中的幻方 1、题目描述 3 x 3 的幻方是一个填充有 从 1 到 9 的不同数字的 3 x 3 矩阵&#xff0c;其中每行&#xff0c;每列以及两条对角线上的各数之和都相等。 给定一个由整数组成的row x col 的 grid&#xff0c;其中有多少个 3 3 的 “幻方” 子矩阵&am…...

编程新知 2025/7/7 1:43:33

HubSpot推出与ChatGPT的深度集成引发兴奋与担忧

上周三&#xff0c;HubSpot宣布已构建与ChatGPT的深度集成&#xff0c;这一消息在HubSpot用户和营销技术观察者中引发了极大的兴奋&#xff0c;但同时也存在一些关于数据安全的担忧。 许多网络声音声称&#xff0c;这对SaaS应用程序和人工智能而言是一场范式转变。 但向任何技…...

编程新知 2025/7/7 17:15:09