H5主要新特性

最新推荐文章于 2024-06-24 14:21:19 发布

ALonelyLemon

最新推荐文章于 2024-06-24 14:21:19 发布

阅读量3.7k

点赞数 6

分类专栏： HTML 文章标签： HTML5

本文链接：https://blog.csdn.net/lemon_yu/article/details/98451447

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章目录

HTML5
五个主要新特性

HTML5

html5标准于2014年10月由万维网联盟（W3C）完成标准制定。

设计目的是为了在移动设备上支持多媒体，在之前这项任务通常要由flash插件来完成，HTML5 的到来给我们最明显的感受是各大厂都不再支持flash了

flash

Flash作为html5出现前的救火队员曾经肩负着显示网页中动画、图标、游戏等功能，功能强大但效率低下，安全性低，稳定性差。充斥屏幕的flash压榨着移动设备的电量和电脑的性能。

移动互联网的发展，迫使厂商需要更为高效的工具取代flash

五个主要新特性

一、图形容器 canvas

canvas非常强大但实际绘图过程复杂，我们通常会借助框架完成

<canvas> 标签通过脚本（通常是 JavaScript）来绘制图形，使得绘图可以直接由 JavaScript来完成不再需要使用 JavaScript和flash交互来绘图

canvas的坐标系与前端习惯相同，以左上方为零点，我们可以通过width与height定义一个矩形范围，在范围内随意绘制

<canvas id="test-canvas" width="20" height="10"></canvas>

使用canvas首先我们要获取canvas的dom，以及创建context对象

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
//ctx有很多方法用于图形文字的绘制

可用于绘制图形、文字、颜色渐变、放入图像等

二、video&audio

现在可以简单的在网页中播放视频(video)与音频 (audio) 。

网页并不存在一个视频和音频的播放标准，之前大多数视频和音频是通过flash播放

以视频为例（音频基本相同）

<video src="movie/movie.ogv" width="320" height="240" controls="controls"></video>

我们甚至只需要指定文件位置，为图像添加一个控制器就可以完成视频的播放，同时我们可以指定多个格式的文件，浏览器会选择第一个可以识别的格式进行播放，建议为MP4格式

<video width="320" height="240" controls="controls">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

其他属性

属性	描述
autoplay	自动播放
controls	显示控件
loop	循环播放
preload	预加载，会被自动播放忽略

HTML5 DOM 为 <audio> 和<video> 元素提供了方法、属性和事件。

这些方法、属性和事件允许使用 JavaScript 来操作<audio> 和 <video> 元素，构建自己控件

视频和音频dom手册

三、语义化元素

新语义化块元素header, section, footer, aside, nav, main, article, figure

我们可以添加自己的元素如<OVO> </OVO>

优点

易于用户阅读，样式丢失的时候能让页面呈现清晰的结构。
有利于爬虫，搜索引擎根据标签来确定上下文和各个关键字的权重。
方便其他设备解析，
有利于开发和维护，语义化更具可读性，代码更好维护，与CSS3关系更和谐。

     <style>
        *{
        margin: 0;
        padding: 0;
        }
        .center>header{
            color: red;
        }
        .center>.header{
            color: blue;
        }

        
    </style>


<div class="center">
                <header>
                    head1
                </header>


                <div class="header">
                    head2
                </div>
    </div>

实际上查看大厂（BAT）网页语义化标签使用并不多？

像使用react框架开发，使用的组件<Head>最终会被渲染成<div class=“Head”>实际上语义化标签并不多

四、对本地离线存储的更好的支持

数据存储

之前，在客户端储存数据是由 cookie 完成的。但是 cookie 不适合大量数据的存储

HTML5 使用 JavaScript 来存储和访问数据。

HTML5 提供了两种在客户端存储数据的新方法：(一个永久有效，一个仅本次会话有效)

localStorage - 没有时间限制的数据存储

localStorage生命周期是永久，除非主动清除localStorage信息，否则这些信息将永远存在。存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信。

        var storage=window.localStorage;
		// 1、保存数据到本地
        // 第一个参数是保存的变量名，第二个是赋给变量的值
        storage.setItem('Author', 'local');
        // 2、从本地存储获取数据
        storage.getItem('Author');
        //3.从本地存储修改数据
        storage.Author='location'
        // 4、从本地存储删除某个已保存的数据
        storage.removeItem('Author');
        // 5、清除所有保存的数据
        storage.clear();

sessionStorage - 针对一个 session 的数据存储

sessionStorage仅在当前会话下有效，关闭页面或浏览器后被清除。存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信。

        // 1、保存数据到本地
        // 第一个参数是保存的变量名，第二个是赋给变量的值
        sessionStorage.setItem('Author', 'session');
        // 2、从本地存储获取数据
        sessionStorage.getItem('Author');
        // 3、从本地存储删除某个已保存的数据
        sessionStorage.removeItem('Author');
        // 4、清除所有保存的数据
        sessionStorage.clear();

========

1.仅支持字符串格式

2.以字典（或伪数组？）的形式存储数据

Storage {amd: "som", cur: "tom", user: "pater", length: 3}

3.不支持对象和伪数组

var storage = window.localStorage;
        storage.setItem("cur","tom");
        console.log(storage);
        storage.setItem("amd",{a:"a",b:"b"});

        var user={
            username:"wang",
            userpwd:1221212
        }
        storage.setItem("user",user);
        

//Storage {amd: "[object Object]", cur: "tom", user: "[object Object]", length: 3}

4.支持json

        var u =JSON.stringify(user);
        storage.setItem("u",u);
        console.log(storage);
        console.log(storage.u);
//Storage { u: "{"username":"wang","userpwd":1221212}", length: 1}
// {"username":"wang","userpwd":1221212}

5.因为仅支持string，读取出来要进行转换

        var uu =storage.getItem("u");   //不进行转换的话是一个字符串
        console.log(uu);         
        uu = JSON.parse(uu);			//转换后才是对象
        console.log(uu);

web缓存

HTML5 引入了应用程序缓存，使得 web 应用可进行缓存，并可在没有因特网连接时进行访问。

使得页面可以离线浏览
缓存资源加快了加载速度
减轻了服务器压力

HTML标签中的manifest可以指定缓存页面，建议缓存文件的扩展名为.appcache

<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>

manifest 文件需在 web 服务器上进行配置。

manifest 文件可分为三个部分：

CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）

五、新的表单控件与属性

1表单控件

新的表单控件，比如 calendar、date、time、email、url、search

email

E-mail: <input type="email" name="user_email" />

在提交表单时，会自动验证 email 域的格式。（仅验证是否含有"@“和”.com"）,方便，但改写样式困难相关资料网上很少，我们不能通过css和js对其进行改写,可见企业开发大家应该都不会使用

同样的问题存在于其他控件

url

Homepage: <input type="url" name="user_url" />

在提交表单时，会自动验证 url 域的值。

number

Points: <input type="number" name="points" min="1" max="10" />

number 类型用于应该包含数值的输入域。

range

<input type="range" name="points" min="1" max="10" />

range 类型用于应该包含一定范围内数字值的输入域。

range 类型显示为滑动条。

Date Pickers

Date: <input type="date" name="user_date" />

HTML5 拥有多个可供选取日期和时间的新输入类型

类似的表单属性

required

输入不为空

Name: <input type="text" name="usr_name" required="required" />

pattern

配合正则表达式自定义验证

Country code: <input type="text" name="country_code"
pattern="[A-z]{3}" title="Three letter country code" />

2表单属性

autocomplete

<form action="demo_form.asp" method="get" autocomplete="on">
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" autocomplete="off" /><br />
<input type="submit" />
</form>

表单提交后再次回到表单，填写内容不会清空

autofocus

User name: <input type="text" name="user_name"  autofocus="autofocus" />

autofocus 属性规定在页面加载时，域自动地获得焦点

form

为输入域指定表单，输入域不需要一定在<form>标签内更加灵活

保证form属性值相同与formID相同

<form action="demo_form.asp" method="get" id="user_form">
First name:<input type="text" name="fname" />
<input type="submit" />
</form>
Last name: <input type="text" name="lname" form="user_form" />

list

list 属性规定输入域的 datalist（选项列表）

Webpage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3Schools" value="http://www.w3school.com.cn" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>

multiple

添加multipe属性可以选中多个文件上传

Select images: <input type="file" name="img" multiple="multiple" />

placeholder
在输入域为空时出现，获得焦点后消失，起到提示作用

<style>
input::-webkit-input-placeholder {
  color: green;
}
</style>

<input type="search" name="user_search"  placeholder="Search W3School" />

ALonelyLemon

关注

6
点赞
踩
56

收藏

觉得还不错? 一键收藏
0
评论
H5主要新特性

文章目录HTML5五个主要新特性一、图形容器 canvas二、video&audio三、语义化元素四、对本地离线存储的更好的支持数据存储web缓存五、新的表单控件与属性1表单控件2表单属性HTML5html5标准于2014年10月由万维网联盟（W3C）完成标准制定。设计目的是为了在移动设备上支持多媒体，在之前这项任务通常要由flash插件来完成，HTML5 的到来给我们最明显的感受...
复制链接

扫一扫

专栏目录