前端狗轨迹的博客

个人学习经验的总结

html5

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);
阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_40016948/article/details/78419007
想对作者说点什么? 我来说一句

html5 教程 html5 教程

2011年08月09日 334KB 下载

HTML5入门HTML5入门

2011年08月05日 843KB 下载

HTML5 俄罗斯方块

2011年10月23日 170KB 下载

HTML5游戏开发

2011年09月28日 2.91MB 下载

html5教程和手册

2011年10月11日 473KB 下载

HTML5 入门

2013年01月07日 1.39MB 下载

html5中文参考手册

2011年04月07日 188KB 下载

HTML5入门教程

2013年08月30日 1.17MB 下载

html5游戏,跨平台

2011年08月11日 22KB 下载

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

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭