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

HTML5新增用法

新增语义化标签

并无特殊含义,是语义!语义!语义!

<header>	头部区域
<nav> 		导航区域
<main>		主体区域
<article>	内部标签
<section>	块级标签
<aside>		侧边栏标签
<footer>	尾部标签
<dialog>	对话框/窗口
<time>		时间

新增多媒体标签

<audio>		音频
<video>		视频
<source>	定义<audio>和<video>中资源的来源

新增表单元素

<datalist>

<datalist>		预定义选项,当在input中输入时,会提示预定义选项,需要搭配input的list属性使用
实例
<input list="browsers">
<datalist id="browsers"><option value="Internet Explorer"><option value="Firefox"><option value="Chrome"><option value="Opera"><option value="Safari">
</datalist> 

<keygen>


新增input类型

<input type="">date				日期选择
datetime			时间日期
datetime-local		本地时间
month				选择月份
week				选择周
time				时间选择
number				数字输入框,有加减
range				拖动条,调节范围
search				搜索框
tel					电话框
url					地址框,自动验证,不是正确格式的url无法submit
color				选择颜色
email				邮箱地址输入框,自动验证,不是邮箱地址无法submit

新增的input属性

autocomplete		属性规定表单或输入字段是否应该自动填充,自动填充上一次的值
autofocus			布尔类型,自动获取焦点
form				可以在<form>标签之外使用<input>,通过此属性指定<form>的id,此<input>属于指定<form>
formaction			适用于type=submit,当有多个submit,可以通过此属性指定不同的请求url
formenctype			当把表单数据(form-data)提交至服务器时如何对其进行编码,仅针对 method="post" 的表单formenctype 属性覆盖 <form> 元素的 enctype 属性。
formmethod			适用于type=submit,定义请求方式,会覆盖<form>中的method,可以在有多个submit时使用
formnovalidate		规定在提交表单时不对 <input> 元素进行验证
formtarget			相当于<a>的target属性,是否打开新的页面
height 和 width		宽高尺寸,仅适用于type="image"
list				引用<datalist>,一个单独的<datalist>不会显示
min 和 max		   规定value的最大、最小值,适用于number、range、date、datetime、datetime-local、month、time 以及 week
multiple			布尔类型,允许用户在 <input> 元素中输入一个以上的值,适用于type=file和email
pattern (regexp)	规定用于检查 <input> 元素值的正则表达式
placeholder			预期提示文字
required			是否必填/必选
step				规定合法数字间隔,适用于number、range、date、datetime、datetime-local、month、time 以及 week

新增图像

<canvas>		JS绘制
<svg>			SVG绘制

本地存储

浏览器对数据进行本地存储。

在 HTML5 之前,应用程序数据只能存储在 cookie 中,包括每个服务器请求。本地存储则更安全,并且可在不影响网站性能的前提下将大量数据存储于本地。

与 cookie 不同,存储限制要大得多(至少5MB),并且信息不会被传输到服务器。

HTML 本地存储对象

HTML 本地存储提供了两个在客户端存储数据的对象:

  • window.localStorage - 存储没有截止日期的数据
  • window.sessionStorage - 针对一个 session 来存储数据(当关闭浏览器标签页时数据会丢失)

localStorage

localStorage 对象存储的是没有截止日期的数据。当浏览器被关闭时数据不会被删除

以键值对的形式存储数据

// 存储
localStorage.setItem("lastname", "Gates");
// 取回
var data = localStorage.getItem("lastname");
// 或
var obj = localStorage.lastname// 删除数据
localStorage.removeItem("lastname")
//

sessionStorage

顾名思义,这个对象存储本次会话的内容,当浏览器关闭,代表本次会话关闭,数据就会消失。

sessionStorage与localStorage的使用是相同的,唯一不同的是sessionStorage的数据会在浏览器关闭时被清除。

http://www.lryc.cn/news/12175.html

相关文章:

  • 富足金字塔:人的努力是为了扩大选择的范围
  • C++类基础(十七)
  • LeetCode刷题复盘笔记—一文搞懂贪心算法之56. 合并区间(贪心算法系列第十四篇)
  • Andriod入门级开发
  • DCL 数据控制语言
  • 全网超详细的下载与安装VMware虚拟机以及为什么要安装VMware虚拟机
  • Python获取zabbix问题触发器
  • 原型链污染
  • ClickHouse详解
  • 02_Docker 安装
  • K8S集群将Docker切换到Containerd
  • Kubernetes03:kubernetes 功能和架构
  • LabVIEW中CPU和内存使用情况在NI分布式系统管理器中不可见
  • buu [NPUCTF2020]Classical Cipher 1
  • 分享96个HTML体育竞技模板,总有一款适合您
  • Python pandas「原有或者新建」Excel中「追加新或者新建」sheet
  • 程序员必备的软技能- CPU“没有灵魂的躯体”
  • 基于微信小程序的青少年生理健康知识小助手
  • 【scl】博图程序的导入和导出
  • 【C语言】指针进阶
  • 18:CTK 总结篇(FAQ)
  • 概论_第7章_参数估计_真题__求置信区间
  • Go 1.21的2个语言变化
  • Mysql(一)架构、存储引擎、数据结构
  • php 项目网站怎么实现负载均衡?
  • win11+pytorch1.7.0+python3.8(也可以是python3.7)+cuda11.0
  • 基于jeecgboot的flowable流程设计器的几个bug修复
  • SAP MM 配置变式物料
  • Quartz与SpringBoot 搞定任务调度
  • SciencePlots绘图