html5新增特性

对于这行代码,要写在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 连接就建立起来了,双方就可以通过这个连接通道自由的传递信息,并且这个连接会持续存在直到客户端或者服务器端的某一方主动的关闭连接。

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

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

相关文章

Vue系列之指令 v-once

文章の目录 1、介绍2、用法3、作用写在最后 1、介绍 v-once 指令可以用于任何元素或组件&#xff0c;并在绑定数据后&#xff0c;将其内容标记为一次性的&#xff0c;不再响应数据的更新。v-once 是一个不需要表达式的指令。 2、用法 <span v-once>{{ message }}</…

【JavaWeb学习笔记】11 - WEB工程路径专题

一、工程路径问题 1.引入该问题 通过这几个去访问很麻烦 二、工程路径解决方案 1.相对路径 1.说明:使用相对路径来解决&#xff0c;一 个非常重要的规则:页面所有的相对路径&#xff0c;在默认情况下&#xff0c;都会参考当前浏览器地址栏的路径http:/ /ip:port/工程名/来进…

Go集成elasticsearch8极简demo,光速入门

Go集成elasticsearch8极简demo,光速入门 配置go环境创件go mod工程代码实现配置go环境 编辑器添加goproxy GO111MODULE=on;GOPROXY=https://mirrors.wps.cn/go/,https://goproxy.cn,direct;GOSUMDB=off创件go mod工程 mkdir demo cd demo go mod init demo代码实现 在demo…

JMESPath语言

JMESPath&#xff08;JSON Matching Expression Path&#xff09; 一种查询语言。 主要用于从JSON文档中检索和过滤数据。 通过写表达式提取和处理JSON数据&#xff0c;而无需编写复杂的代码。 功能&#xff1a;数据提取、过滤、转换、排序。 场景&#xff1a;处理API响应…

CentOS7安装Docker及添加阿里云镜像加速详细教程

Docker官方安装教程网站&#xff1a;Install Docker Engine on CentOS | Docker Docs 具体流程如下&#xff1a; 1.确定你是CentOS7及以上版本 cat /etc/redhat-release 2.yum安装gcc相关 yum -y install gcc yum -y install gcc-c 3.安装需要的软件包 3.1安装docker引擎…

如何在Windows上安装 PHP?

安装 PHP 的步骤会根据你使用的操作系统而有所不同。以下是在一些主流操作系统上安装 PHP 的基本指南&#xff1a; 在 Windows 上安装 PHP&#xff1a; 下载 PHP&#xff1a; 访问 PHP for Windows 网站。 下载你需要的 PHP 版本&#xff08;通常是线程安全版本&#xff09;。…

MetaSploit工具的使用

在命令行输入&#xff1a;msfconsole 启动msf msfconsole 另外的方式 msfdb init msfdb run 查看数据库连接状态 db_status 扫描端口并存储 db_nmap 查看扫描到的数据信息 services MSF常用的模式和命令 搜索模块 search 模块名字 使用模块 use 编号 查看模块使用 sho…

leetcode 572. 另一颗树的子树

这道题重在思路&#xff0c;默认大家会判断两个树是否完全相同 我会把一些基础的简单的&#xff08;包括 判断两个树是否完全相同 和之前的 求结点个数 &#xff09;单独出博客&#xff0c;或者放在介绍堆和树的知识点里面 572. 另一颗树的子树 题目 给你两棵二叉树 root 和…

对偶问题笔记(1)

目录 1 从 Lagrange 函数引入对偶问题2. 强对偶性与 KKT 条件3. 对偶性的鞍点特征 1 从 Lagrange 函数引入对偶问题 考虑如下优化问题 { min ⁡ f 0 ( x ) s . t f i ( x ) ≤ 0 , i 1 , ⋯ , p , h j ( x ) 0 , j 1 , ⋯ , q , x ∈ Ω , \begin{align} \begin{cases}\min…

比 Spring Cloud Zuul 更好用的 API 网关

推荐一个 比 spring cloud 更好用的 API 网关。它是一个低代码 API 网关。 https://github.com/fiber-net-gateway/fiber-net-gateway 特性 同样是使用 java 开发&#xff0c;相比与 SpringCloud Zuul&#xff0c;它有很多 鲜明的特点。 低代码 它实现了一个灵活好用的脚本…

《从晨到夜:在日常繁忙中寻找成长与平衡的艺术》

早上8点11分&#xff0c;我睁开眼睛&#xff0c;开始了新的一天。不到半小时&#xff0c;我匆匆出门&#xff0c;开始了日常的“搬砖”工作。从9点15分到公司&#xff0c;到下午6点15分结束工作&#xff0c;我的一天被紧凑的工作安排填满。我在完成技术任务的同时&#xff0c;也…

Redis系列之事务机制

什么是Redis事务 学习mysql数据库的时候&#xff0c;我们知道了事务的ACID特性&#xff0c;Redis也是支持事务的&#xff0c;不过和数据库的事务又有什么区别&#xff1f;在mysql数据库中&#xff0c;我们使用begin开启事务&#xff0c;提交是commit&#xff0c;回滚是rollbac…

在linux上基于shell自动部署Java项目

一&#xff0c;安装git yum list git 列出git安装包 yum install git 在线安装git 使用 git -varsion 查看是否安装成功 安装成功 二&#xff0c; Git克隆代码 git clone 远程仓库地址 三&#xff0c;创建shell脚本 touch shell.sh shell脚本 #!/bin/sh echo echo 自动…

健康手表数据洞察台

健康手表数据洞察台 1. 背景介绍2. 数据获取与处理3. Django平台搭建4. 数据可视化5. 整体数据分析6. 数据监控与紧急警报7. 用户界面优化8. 创新点结语 1. 背景介绍 在当今健康意识不断提升的社会&#xff0c;人们越来越关注身体健康。本文将介绍如何使用Pandas进行数据分析&…

NTC和温度的关系

一、NTC介绍 NTC&#xff08;nagative temperature coefficient&#xff09;负温度系数的热敏电阻。随着温度的升高&#xff0c;电阻越来越小 二、NTC和温度的关系 生产NTC的厂家会提供一个RT表格&#xff0c;里面记录了温度和电阻的关系&#xff0c;他们的关系是一一对应的…

C# 使用FluentHttpClient请求WebApi

写在前面 FluentHttpClient 是一个REST API 异步调用 HTTP 客户端&#xff0c;调用过程非常便捷&#xff0c;采用流式编程&#xff0c;可以将所有请求所需的参数一次性发送&#xff0c;并直接获取序列化后的结果。 老规矩从NuGet上安装该类库&#xff1a; 这边一定要认准是 P…

React系列:配置@别名路径并配置联想

&#x1f341; 作者&#xff1a;知识浅谈&#xff0c;CSDN签约讲师&#xff0c;CSDN博客专家&#xff0c;华为云云享专家&#xff0c;阿里云专家博主 &#x1f4cc; 擅长领域&#xff1a;全栈工程师、爬虫、ACM算法 &#x1f492; 公众号&#xff1a;知识浅谈 &#x1f525;网站…

读写分离之同步延迟测试

背景 读写分离是快速提高数据库性能的手段&#xff0c;主库只负责写入&#xff0c;从库负责查询。但在性能得到提升的同时&#xff0c;编程的复杂度就会提升。由其碰到主从同步延迟的情况&#xff0c;在数据写入后&#xff0c;在从库无法读取到最新数据&#xff0c;会对业务逻…

汽车火花塞行业分析:全球市场需求量约为26.3亿个

在汽车日常保养里,更换火花塞算是比较常见的一种,爱车懂车的车主们都非常清楚火花塞对于汽车的重要性,可以说火花塞直接影响到发动机的运作,决定了汽车能否顺利启程。 火花塞(sparkplug)&#xff0c;俗称火咀&#xff0c;它的作用是把高压导线(火嘴线)送来的脉冲高压电放电&…

zkSend — — 在Sui上发红包像发电子邮件一样简单

*12月14日&#xff0c;知名区块链媒体平台The Block发表了这篇关于对Mysten Labs联合创始人Adeniyi Abiodun的采访&#xff0c;文中“我们”指代该媒体&#xff0c;数据均为截止撰写文章时数据&#xff0c;以下是正文。 两年前&#xff0c;当五名前Facebook工程师创立Mysten L…