HTML5新特性总结

2021-05-31 分类：网站建设

HTML5属于上一代HTML的新迭代语言，设计HTML5最主要的目的是为了在移动设备上支持多媒体！！！

例如： video 标签和 audio 及 canvas 标记

新特性：

1. 取消了过时的显示效果标记 <font></font> 和 <center></center>等...

2. 新语义标签的引入

3. 新表单元素引入

4. canvas标签（图形设计）

5. 本地数据库（本地存储）

6. 一些API

好处：跨平台

例如：比如你开发了一款HTML5的游戏，你可以很轻易地移植到UC的开放平台、Opera的游戏中心、Facebook应用平台，甚至可以通过封装的技术发放到App Store或Google Play上，所以它的跨平台性非常强大，这也是大多数人对HTML5有兴趣的主要原因。

缺点：

pc端浏览器支持不是特别友好，造成用户体验不佳(随着移动端的发展不断扩大和win10（ie10）的大量推广，这一缺点将被无限缩小)

HTML5新语义标签

HTML5新标签的数量在25个左右具体也没有找到详细的资料来查看（每个网站显示的数量都不一样）

虽然新增的标签很多但是实际上用到的应该只有十个左右MDN上有一句话“HTML 使用“标记”来注明文本、图片和其他内容，以便于在 Web 浏览器中显示。HTML 标记包含一些特殊“元素”如 <head>，<title>，<body>，<header>，<footer>，<article>，<section>，<p>，<div>，<span>，<img> 等等。” 这其中大部分有HTML5以前的标签也有HTML5的而这些刚好就是我们常用的标签，不常用的也许不必太过了解布局DIV也可以不是么？

另外推荐大家在使用新语义标签的时候尽量每个独立的页面只使用一个标签作为包裹，语义化的作用就是seo（具体可百度），就是让搜索引擎知道网上到底有些什么，如header 、main、footer标签等等，当然你也可以写100个！

以下总结出HTML5常用的标签：

“header” “nav” “main”“article” “address”“section”“aside” “footer”

如果忘记了这些标签的意思可以访问 MDN、W3C、或者CSND,当然博客园上搜搜可能会更快

以下为菜鸟教程对html5新标签的注解 http://www.runoob.com/html/html5-new-element.html

HTML5的重点标签之video和audio

<video></video> 视频

属性：controls 显示控制栏

属性：autoplay 自动播放

属性：loop 设置循环播放

<audio></audio> 音频

属性：controls 显示控制栏

属性：autoplay 自动播放

属性：loop 设置循环播放

video标签支持的格式 http://www.w3school.com.cn/html5/html_5_video.asp

多媒体标签在网页中的兼容效果方式（每个浏览器支持的情况不同所以需要做兼容性处理）（以下source属性只会生效一个即 if = true 之后就不执行了）

<video>

</video>

HTML5中的智能表单控件

type值 ={

email: 输入合法的邮箱地址

url：输入合法的网址

number：只能输入数字

range：滑块

color：拾色器

date：显示日期

month：显示月份

week ：显示第几周

time：显示时间

}

（智能表单，会自动对输入的内容做基本校验，内容不符合基本校验则拒绝提交请求

表单属性

◆form属性：

autocomplete=on | off 自动完成

novalidate=true | false 是否关闭校验

◆ input属性：

autofocus ：自动获取焦点

</datalist>

multiple：实现多选效果

placeholder ：占位符（提示信息）

required：必填项

HTML5中新的一些API

以前获取节点通过

document.getElementById("ID名称")这些还有className，name，tagname等等方式获取返回当前节点

H5新增的节点获取方法只有两个

document.querySelector("选择器")；返回节点

document.querySelectorAll("选择器"); 返回数组

可以好的代替以前或者节点的方式，如果无需兼容ie10以下的话

H5中对class的操作

classList.add("类名")

添加class类名不返回任何值如果你把它赋值给一个变量得到结果是undefined

classList.remove("类名"); 删除

classList.contains("类名");

检查has className 是否存在返回布尔值即true and false

classList.toggle("active");

查询active 是否存在，存在就删除，不存在就添加，省去了if判断！返回布尔值如果执行多条即 true false true false.

自定义属性（小案例分析体验自定义属性） data-自定义属性名

获取自定义属性 Dom.dataset 返回的是一个对象

Dom.dataset.属性名或者 Dom.dataset[属性名]

注：属性名无需加data如自定义属性名 = data-canvas 那么获取的时候直接dataset.canvas即可设置同理

设置自定义属性

Dom.dataset.自定义属性名=值或者 Dom.dataset[自定义属性名]=值；

文件读取 FileReader

FileReader 接口有3个用来读取文件方法返回结果在result中

readAsBinaryString ---将文件读取为二进制编码

readAsText ---将文件读取为文本

readAsDataURL ---将文件读取为DataURL

FileReader 提供的事件模型

onabort 中断时触发

onerror 出错时触发

onload 文件读取成功完成时触发

onloadend 读取完成触发，无论成功或失败

onloadstart 读取开始时触发

onprogress 读取中

获取当前网络状态

window.navigator.onLine 返回一个布尔值网没问题返回true否则返回false

网络状态事件（大部分为不支持和废弃状态也许移动端用的比较多）

window.ononline

window.onoffline

获取地理定位

获取一次当前位置

window.navigator.geolocation.getCurrentPosition(success,error);

success成功之后获取位置信息否则抛出错误，比如获取位置信息被拒绝

coords.latitude 维度

coords.longitude 经度

实时获取当前位置

window.navigator.geolocation.watchPosition(success,error);

本地存储随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，传统方式我们以document.cookie来进行存储的，但是由于其存储大小只有4k左右，并且解析也相当的复杂，给开发带来诸多不便，HTML5规范则提出解决方案，使用sessionStorage和localStorage存储数据。

localStorage：

永久生效

多窗口共享

容量大约为20M

◆window.localStorage.setItem(key,value) 设置存储内容

◆window.localStorage.getItem(key) 获取内容

◆window.localStorage.removeItem(key) 删除内容

◆window.localStorage.clear() 清空内容

sessionStorage：

生命周期为关闭当前浏览器窗口

可以在同一个窗口下访问

数据大小为5M左右

◆window.sessionStorage.setItem(key,value)

◆window.sessionStorage.getItem(key)

◆window.sessionStorage.removeItem(key)

◆window.sessionStorage.clear()

required如何修改默认提示选项

需要两个几个参数

placeholder = 默认提示用户输入

oninvalid事件 = 当用户输入不符合规则的时候提示的内容随意改setCustomValidity 就是用来修改 requered值的函数

oninput事件 = 约等于chuange事件立即执行

console.log('Hello World')

网页题目：HTML5新特性总结
链接地址：/news8/115808.html

成都网站建设公司_创新互联，为您提供网页设计公司、网站改版、微信小程序、App设计、外贸网站建设、网站收录

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容