hello,各位大佬,我是泰戈尔,今天给h5新增的特性做一些总结

语义化标签:

header: 定义了文档的头部区域

footer:    定义了文档的页脚区域

section: 定义文档中的区段

nav: 定义文档的导航

aside: 定义页面的侧边栏内容

article: 定义页面独立的内容区域

增强型表单:(多个type类型)

主要是input框的多个type属性

email: 包含电子邮件地址的输入框

url: 链接的输入框

date: 从一个日期选择器选择一个日期

time: 选择一个时间

datetime: 选择一个日期(UTC 时间)

datetime-local: 年月日 本地时间

month: 选择一个月份

week: 选择周和年

number: 数值的输入框

range: 一定范围内数字值的输入域

tel: 电话输入框

search: 搜索框

color: 主要用于选取颜色

新增的表单元素

datalist: 定义选项列表,就是一个input框预先定义的选项列表,其中包含多个选项(值)供用户选择.

keygen: 定义表单的的密钥对 生成器字段,当表单提交时,私钥储存在本地,公钥发送到服务器,服务器通常将收到的数据进行加密处理,返回给浏览器端.

output: 定义了不同类型的输出的结果,比如执行js代码,(计算或者执行一些操作的结果)

新增的表单属性

placehoder: 在输入框内预先定义要提示用户的信息,用户在键入内容时消失

required: 是一个布尔类型的属性,要求该输入框必须键入内容

pattern: 利用正则表达式验证input元素的值

min和max: 设置最小值和最大值

step: 规定输入框的数字间隔

height和width: 用于image类型的input标签的图像高度和宽度

autofocus: 是一个布尔属性,规定了在页面加载完成时,是否自动获取输入框的焦点(定义光标是否定在输入框内)

multiple: 是一个布尔属性,规定input框中可以选择多个值

音视频标签等

video: 视频标签,在页面中插入一段视频

audio: 音频标签,在页面中插入一段音频

画布Canvas

中文意思是画布,此标签用于图形的渲染,通过js来完成,此标签只是一个存放图形的容器,必须使用js来书写.

地理定位

Geolocation API
允许调用设备的位置的api来定位获取当前位置

拖拽释放

用户可以利用鼠标等选择可拖动的元素,进行拖拽,释放到指定位置等操作,
(Drap and Drap) API ondrop

本地储存

cookie: 将数据始终在同源的http请求中携带(即使不需要)。即cookie在浏览器和服务器间来回传递,

localStorage: 仅在本地储存,不会主动向服务器发送数据,数据长期有效,浏览器关闭,数据不会丢失

sessionStorage: 仅在本地储存,不会主动向服务器发送数据,浏览器关闭数据丢失,

PS:(这三者是有区别的,具体会在浏览器的缓存文章中详解)

新增事件

onresize: 当调整窗口大小时触发事件

ondrag:    当拖动元素时触发事件

onscroll: 当滚动元素滚动元素的滚动条时触发事件

onmousewheel: 当转动鼠标滚轮时触发事件

onerror: 当错误发生时触发事件

onplay: 当媒介数据将要开始播放时触发事件

onpause: 当媒介数据暂停时触发事件

WebSocket

新的通信协议:

    WebSocket是HTML5提供的一种在单个TCP连接上进行全双工通讯的协议,WebSocket使得客户端和服务器之间数据交换变得更加简单,允许服务器主动向客户端推送数据,在WebSocket API中,浏览器和服务器只需要完成一次握手,两者之间就可以创建持久性的连接,并进行双向数据传输

自定义属性

语法:data-属性名

规则:1)通过data-开头;2)data-后必须至少有一个字符,多个单词之间用“-”;

建议:1)尽量使用小写字母命名;2)不要有任何特殊字符;3)名称不要纯数字。

2,如何来取值

使用dataset[data-后面的单词(但data-后面的单词必须使用骆驼命名法,否则可能获取不到值)]。

例如:<p data-blog-name="itcast">泰戈尔</p>

获取值:p.dataset["blogname"];
  
2.1 或者使用getAttribute/setAttribute来取值,

     通过名字就可以bai分析出:get 就是得到,set就是设置.
Attribute就是属性du的zhi意思!
所以你要的答案就是:getAttribute获得dao属性!
setAttribute就是设置属性!
举个例子:
对于session对象来说,我先设置其属性:
session.setAttribute("hello");
然后我可以在其它的页面当中通过,session.getAttribute(参数);得到我设置过的属性!

最后h5新增的特性就差不多这样啦,本萌新刚入这一行没多久,如果有补充或者纠错可以在下方评论系统中留言,我会及时回应,谢谢大家,

我说了,我真的不帅,这年头帅也是一种错吗
公众号噜噜科技君

最后修改:2021 年 10 月 01 日 04 : 43 PM
如果觉得我的文章对你有用,可以对我进行您主观即不限定金额大小的打赏。