html5

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_40016948/article/details/78419007

html5

语言标签

header header标记一般放置在页面的顶部,或者页面中某个区块元素的顶部,包含整个页面或区块的标题、简介等信息。
footer footer标记一般放置在页面的底部,或者页面中某个区块元素的底部。
nav nav标记表示页面的导航,可以通过导航连接到网站的其它页面,或当前页面的其它部分。
aside aside包含的内容不是页面的主要内容,具有独立性,是对页面内容的补充。
article article标记表示包含于一个文档、页面、或网站中的一段独立的内容。它能够独立的被发布或重新使用。
section section表示一个主题性的内容分组,通常包含一个头部(header),可能还会有一个尾部(footer)
figure figure表示页面中的插图,通常结合figcaption一起使用。
time time表示一个日期、时间,或日期和时间值。

智能表单

HTML5为了方便排版,可以使Form中的表单元素脱离Form的嵌套

<form action="" method="post" id="register" >
</form>
<input  type="text" name="user" form="register" />
<select name="year" form="register" >
    <option value="1999"></option>
</select>
<textarea name="ext" form="register" ></textarea>
<button type="submit" form="register" >提交</button>

新增input表单元素类型

Type=”email” 限制用户输入必须为Email类型
Type=”url” 限制用户输入必须为URL类型
Type=”date” 限制用户输入必须为日期类型
Type=”time” 限制用户输入必须为时间类型
Type=”month” 限制用户输入必须为月类型
Type=”week” 限制用户输入必须为周类型
Type=”number” 限制用户输入必须为数字类型
Type=”range” 产生一个滑动条的表单
Type=”search” 产生一个搜索意义的表单
Type=”color” 生成一个颜色选择表单

新增表单元素属性

属性 说明
Required required 表单拥有该属性表示其内容不能为空,必填
placeholder 提示文本 表单的提示信息,存在默认值将不显示
Autofocus autofocus 自动聚焦属性,页面加载完成自动聚焦到指定表单
Pattern 正则表达式 输入的内容必须匹配到指定正则

API

Canvas

HTML5 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成. 标签只是图形容器,您必须使用脚本来绘制图形。

选择器API

querySelector方法获取满足第一个条件的DOM元素

querySelectorAll方法获取满足条件的所有DOM元素

    //querySelector只能获取第一个满足条件的元素,语法和jQuery相同
        var mydivs = document.querySelectorAll('[class="d1"]')    //类名
        var mydivs = document.querySelectorAll('#dl')             //id名
        var mydivs = document.querySelectorAll('div')           //标签

Web存储

早些时候,本地存储使用的是 cookie。但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上,但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据,而不影响网站的性能.数据以 键/值 对存在, web网页的数据只允许该网页访问使用。

客户端存储数据的两个对象为:

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

  • sessionStorage - 针对一个 session(会话) 的数据存储

    不管是 localStorage,还是 sessionStorage,可使用的API都相同,常用的有如下几个(以localStorage为例):

  • 保存数据:localStorage.setItem(key,value);

  • 读取数据:localStorage.getItem(key);
  • 删除单个数据:localStorage.removeItem(key);
  • 删除所有数据:localStorage.clear();
  • 得到某个索引的key:localStorage.key(index);

提示: 键/值对通常以字符串存储,你可以按自己的需要转换该格式。

localStorage存储**

localStorage 对象存储的数据没有时间限制。第二天、第二周或下一年之后,数据依然可用。

// 存储
localStorage.sitename = "菜鸟教程";        //设置建及值
// 查找
document.getElementById("result").innerHTML = localStorage.sitename;  //读取值

sessionStorage存储

sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后,数据会被删除。


if (sessionStorage.clickcount)
{
    sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;
}
else
{
    sessionStorage.clickcount=1;
}
document.getElementById("result").innerHTML="在这个会话中你已经点击了该按钮 " + sessionStorage.clickcount + " 次 ";

应用程序缓存

HTML5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问。

离线应用程序原理是建立一个URL列表清单,当应用和服务器建立联系时,浏览器将在本地缓存列表清单中的资源文件;当离线时,浏览器将调用缓存来支撑Web应用离线缓存机制的关键是Cache Manifest文件

缓存文件是一个文本文件,后缀名是manifest

CACHE MANIFEST
#version  0.0.0
CACHE:
#需要缓存的资源文件
css/style.css
Image/head.jpg
NETWORK:
#在线访问的资源文件
Index.jsp

FileReader对象

文件读取对象常用方法

readAsDataURL:读取图片文件

readAsText:读取文本文件

常用的事件

事件名 描述
onloadstart 当读取数据开始时触发
onprogress 当正在读取数据时触发
onerror 当读取数据失败时触发
onload 当数据读取成功时触发
onloadend 当数据读取结束时触发,不论是否成功
var  reader = new FileReader();
reader.onload = function(e){
    //通过e.target.result获取文件内容
}
reader.readAsDataURL(file);
//reader.readAsText(file);
使用FileReader实现前端图片预览
<input type="file"><br>
<img src="" height="200" alt="Image preview area..." title="preview-img">


var fileInput = document.querySelector('input[type=file]');
var previewImg = document.querySelector('img');
fileInput.addEventListener('change', function () {
    var file = this.files[0];
    var reader = new FileReader();
    reader.addEventListener('load', function () {
        previewImg.src = reader.result;
    }, false);
    reader.readAsDataURL(file);
}, false);
阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页