html5知识整理

原创 2017年12月08日 18:07:15

新增标签

  • <nav> 导航
  • <header> 页眉
  • <footer>页脚
  • <section> 区块
  • <article> 文章
  • <aside> 侧边栏
  • <progress> 进度条
    兼容处理
    这里写图片描述

微数据
微数据是在如 span、div 的标签内添加属性,让机器(如搜索引擎)识别其含义,某些特定类型的信息,例如评论、人物信息或事件都有相应的属性,用来描述其含义,可以理解成新语义标签的一种补充。

张鑫旭的微数据

表单新增

  • email <input type="email"> 输入邮箱格式
  • tel <input type="tel"> 输入手机号码格式
  • url <input type="url"> 输入url格式
  • number<input type="number"> 输入数字格式
  • search <input type="search"> 搜索框(体现语义化)
  • range <input type="range"> 自由拖动滑块
  • color <input type="color"> 拾色器
  • time <input type="time">
  • date <input type="date">
  • datetime <input type="datetime">
  • month <input type="month">
  • week <input type="week">

表单元素
- <datalist> 数据列表
datalist 元素规定输入域的选项列表。
列表是通过 datalist 内的 option 元素创建的。
如需把 datalist 绑定到输入域,请用输入域的 list 属性引用 datalist 的 id:


Webpage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3School" value="http://www.W3School.com.cn" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>
  • <keygen> 生成加密字符串
兼容不好,不常使用。
<form action="demo_form.asp" method="get">
Username: <input type="text" name="usr_name" />
Encryption: <keygen name="security" />
<input type="submit" />
</form>
  • <output> 输出结果
  • <meter> 度量器

表单属性
placeholder <input type="text" placeholder="请输入用户名"> 占位符
autofocus <input type="text" autofocus> 自动获得焦点
multiple <input type="file" multiple>多文件上传
autocomplete <input type="text" autocomplete="off"> 自动完成
form <input type="text" form="某表单ID">
novalidate <form novalidate></form> 关闭验证
required <input type="text" required> 必填项
pattern <input type="text" pattern="\d"> 自定义验证
音频
1.HTML5通过标签来解决音频播放的问题。

<audio src="./music/1.mp3"></audio> 

属性:
autoplay 自动播放
controls 是否显不默认播放控件
loop 循环播放

多浏览器支持的方案,如下图

这里写图片描述
目前支持mp3 wav,ogg三种格式
这里写图片描述
`视频

<vedio src="./vedio/1.mp4" controls="controls"></vedio>

同样,通过附加属性可以更友好的控制视频的播放
autoplay 自动播放
controls 是否显示默认播放控件
loop 循环播放
width 设置播放窗口宽度
height 设置播放窗口的高度

这里写图片描述

vedio兼容

<vedio  controls="controls">
<source src="./vedio/movie.ogg">
<source src="./vedio/movie.mp4">
你的浏览器不支持html的视频播放。
</vedio>

dom扩展
1、document.getElementsByClassName (‘class’) 通过类名获取元素,以伪数组形式存在。
2、document.querySelector(‘selector’) 通过CSS选择器获取元素,符合匹配条件的第1个元素。
3、document.querySelectorAll(‘selector’) 通过CSS选择器获取元素,以
类名的操作
1、Node.classList.add(‘class’) 添加class
2、Node.classList.remove(‘class’) 移除class
3、Node.classList.toggle(‘class’) 切换class,有则移除,无则添加
4、Node.classList.contains(‘class’) 检测是否存在class
Node指一个有效的DOM节点,是一个通称。
5.3 自定义属性
在HTML5中我们可以自定义属性,其格式如下data-*=”“,例如
data-info=”我是自定义属性”,通过Node.dataset[‘info’] 我们便可以获取到自定义的属性值。
Node.dataset是以对象形式存在的,当我们为同一个DOM节点指定了多个自定义属性时,Node.dataset则存储了所有的自定义属性的值。

假设某元素 <div id="demo" data-name="itcast" data-age="10">
var demo = document.querySelector('#demo');
1、读取 demo.dataset['name'] 或者 demo.dataset['age']
2、设置demo.dataset['name'] = 'web developer'

注:当我们如下格式设置时,则需要以驼峰格式才能正确获取

这样获取Node.dataset[‘myName’] **新增api之网络状况** 我们可以通过window.onLine来检测,用户当前的网络状况,返回一个布尔值 window.online用户网络连接时被调用 window.offline用户网络断开时被调用 **全屏** HTML5规范允许用户自定义网页上任一元素全屏显示。 1、Node.requestFullScreen() 开启全屏显示 2、Node.cancelFullScreen() 关闭全屏显示 由于其兼容性原因,不同浏览器需要添加前缀如: webkit内核浏览器:webkitRequestFullScreen、webkitCancelFullScreen,如chrome浏览器。 Gecko内核浏览器:mozRequestFullScreen、mozCancelFullScreen,如火狐浏览器。 3、document.fullScreen检测当前是否处于全屏 不同浏览器需要添加前缀 document.webkitIsFullScreen、document.mozFullScreen 全屏伪类选择器 :full-screen .box {}、:-webkit-full-screen {}、:moz-full-screen {} **文件读取** 1.FileList对象 由于HTML5中我们可以通过为表单元素添加multiple属性,因此我们通过``上传文件后得到的是一个FileList对象 HTML5新增内建对象,可以读取本地文件内容。 var reader = new FileReader; 可以实例化一个对象 实例方法 1、readAsDataURL() 以DataURL形式读取文件 事件监听 onload 当文读取完成时调用 文件预览例子
<!doctype html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<title>Image preview example</title>
<script type="text/javascript">
oFReader = new FileReader(), rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;

oFReader.onload = function (oFREvent) {
  document.getElementById("uploadPreview").src = oFREvent.target.result;
};

function loadImageFile() {
  if (document.getElementById("uploadImage").files.length === 0) { return; }
  var oFile = document.getElementById("uploadImage").files[0];
  if (!rFilter.test(oFile.type)) { alert("You must select a valid image file!"); return; }
  oFReader.readAsDataURL(oFile);
}
</script>
</head>

<body onload="loadImageFile();">
  <form name="uploadForm">
    <table>
      <tbody>
        <tr>
          <td><img id="uploadPreview" style="width: 100px; height: 100px;" src="data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%3F%3E%0A%3Csvg%20width%3D%22153%22%20height%3D%22153%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%20%3Cg%3E%0A%20%20%3Ctitle%3ENo%20image%3C/title%3E%0A%20%20%3Crect%20id%3D%22externRect%22%20height%3D%22150%22%20width%3D%22150%22%20y%3D%221.5%22%20x%3D%221.500024%22%20stroke-width%3D%223%22%20stroke%3D%22%23666666%22%20fill%3D%22%23e1e1e1%22/%3E%0A%20%20%3Ctext%20transform%3D%22matrix%286.66667%2C%200%2C%200%2C%206.66667%2C%20-960.5%2C%20-1099.33%29%22%20xml%3Aspace%3D%22preserve%22%20text-anchor%3D%22middle%22%20font-family%3D%22Fantasy%22%20font-size%3D%2214%22%20id%3D%22questionMark%22%20y%3D%22181.249569%22%20x%3D%22155.549819%22%20stroke-width%3D%220%22%20stroke%3D%22%23666666%22%20fill%3D%22%23000000%22%3E%3F%3C/text%3E%0A%20%3C/g%3E%0A%3C/svg%3E" alt="Image preview" /></td>
          <td><input id="uploadImage" type="file" name="myPhoto" onchange="loadImageFile();" /></td>
        </tr>
      </tbody>
    </table>

    <p><input type="submit" value="Send" /></p>
  </form>
</body>
</html>

地理定位
在HTML规范中,增加了获取用户地理信息的API,这样使得我们可以基于用户位置开发互联网应用,即基于位置服务 (Location Base Service)
1.API详解
1、获取当前地理信息
navigator.geolocation.getCurrentPosition(successCallback, errorCallback)
2.重复获取当前地理信息
navigator. geolocation.watchPosition(successCallback, errorCallback)
当成功获取地理信息后,会调用succssCallback,并返回一个包含位置信息的对象position。
position.coords.latitude纬度
position.coords.longitude经度
position.coords.accuracy精度
position.coords.altitude海拔高度
当获取地理信息失败后,会调用errorCallback,并返回错误信息error
3 应用
在现实开发中,通过调用第三方API(如百度地图)来实现地理定位信息,这些API都是基于用户当前位置的,并将用位置位置(经/纬度)当做参数传递,就可以实现相应的功能。

历史管理
提供window.history,对象我们可以管理历史记录,可用于单页面应用,Single Page Application,可以无刷新改变网页内容。
1.方法

1、pushState(data, title, url) 追加一条历史记录
    data用于存储自定义数据,通常设为null
    title网页标题,基本上没有被支持,一般设为空
    url 以当前域为基础增加一条历史记录,不可跨域设置
2、replaceState(data, title, url) 与pushState()基本相同,不同之处在于replaceState(),只是替换当前url,不会增加/减少历史记录。

2.事件监听
onpopstate事件,当前进或后退时则触发,通过事件对象ev.state可以读取到存储的数据。

Web存储

1 特性

  • 1、设置、读取方便
  • 2、容量较大,sessionStorage约5M、localStorage约20M
  • 4、只能存储字符串,可以将对象JSON.stringify() 编码后存储

2 window.sessionStorage

  • 1、生命周期为关闭浏览器窗口
  • 2、在同一个窗口下数据可以共享

3 window.localStorage

  • 1、永久生效,除非手动删除(服务器方式访问然后清除缓存)
  • 2、可以多窗口共享

4 方法详解

  • setItem(key, value) 设置存储内容
  • getItem(key) 读取存储内容
  • removeItem(key) 删除键值为key的存储内容
  • clear() 清空所有存储内容

应用缓存

HTML5中我们可以轻松的构建一个离线(无网络状态)应用,只需要创建一个cache manifest文件。

1 优势

  • 1、可配置需要缓存的资源
  • 2、网络无连接应用仍可用
  • 3、本地读取缓存资源,提升访问速度,增强用户体验
  • 4、减少请求,缓解服务器负担

2 缓存清单

一个普通文本文件,其中列出了浏览器应缓存以供离线访问的资源,推荐使用.appcache为后缀名
例如我们创建了一个名为demo.appcache的文件,然后在需要应用缓存在页面的根元素(html)添加属性manifest=”demo.appcache”,路径要保证正确。

3 manifest文件格式

  • 1、顶行写CACHE MANIFEST
  • 2、CACHE: 换行 指定我们需要缓存的静态资源,如.css、image、js等
  • 3、NETWORK: 换行 指定需要在线访问的资源,可使用通配符
  • 4、FALLBACK: 换行 当被缓存的文件找不到时的备用资源

4 其它

  • 1、CACHE: 可以省略,这种情况下将需要缓存的资源写在CACHE MANIFEST
  • 2、可以指定多个CACHE: NETWORK: FALLBACK:,无顺序限制
  • 3、#表示注释,只有当demo.appcache文件内容发生改变时或者手动清除缓存后,才会重新缓存。
  • 4、chrome 可以通过chrome://appcache-internals/工具和离线(offline)模式来调试管理应用缓存
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/isxixi/article/details/78754360

HTML个人资料界面

好久都没有写博客了,仿佛什么都没有学一般。 考试前为了挑战杯项目赶出来的界面,新接触了HTML,仿照CSDN上的风格。下学期就要学HTML了算是一种提前预习吧。因为不会用,所以特别的冗杂,没有将格...
  • Sequin_YF
  • Sequin_YF
  • 2017年01月15日 15:10
  • 8259

系统端口详解

http://www.cnblogs.com/websocket/p/4763357.html # # Mon Dec 20 05:40:51 2004 UTC # # Th...
  • isuker
  • isuker
  • 2016年08月05日 09:51
  • 8214

知识整理提纲

下面是最近学习的知识的整理首先是一些字符串处理函数。由于没有使用正确的字符串处理函数,自己走了一些弯路。然后是LPSTR,LPCSTR,LPWSTR,LPWCSTR,PSTR的区别。然后是获得Unic...
  • ThinkingAboutLife
  • ThinkingAboutLife
  • 2008年05月25日 20:51
  • 412

HTML5常用代码片段整理:D

感谢http://www.w3school.com.cn/index.html教学,下面是我自己的分类总结: 搜索分类关键词:多媒体类、文字段落类、导航列表表单类,按钮事件绘图类,页面结构缓存类 ...
  • ns2250225
  • ns2250225
  • 2013年10月30日 10:47
  • 2183

VC++调试技巧学习总结

VC6.0调试方法 有时候,我们编写好一个程序后,希望通过调试来知道变量值的变化情况,下面我和大家分享一下怎么利用VC6.0来查看变量值变化情况。 工具/原料 VC6.0软件、待测试程序...
  • bcbobo21cn
  • bcbobo21cn
  • 2017年03月27日 15:34
  • 1326

腾讯互动直播基于独立模式的流程解析

本章内容 基于独立模式的流程 代码分享 存留问题 基于独立模式的流程好吧,感谢腾讯云带来的服务的同时吐槽下腾讯云的坑….不言中… 言归正传,我的项目是基于独立模式开发的,使用的是腾讯云1.7互动直播...
  • cjh_android
  • cjh_android
  • 2016年05月22日 15:57
  • 4510

HTML5知识

 一、新特性 1.  Doctype更简单 2.  简单的编码类型 3.  大小写都可  4.  布尔值     5.  可以省略引号   6.  可以进行省略的标签 ...
  • wieyi
  • wieyi
  • 2016年07月08日 21:45
  • 458

java知识体系整理

工作也好几年了,平时工作比较杂(公司部门业务本身跨度就很大,从dsp、mcu、arm、qt、移动开发、一直到服务器),先将java部分总结下,感觉java的知识体系还是比较完整的,从事java开发(偏...
  • lpch1987
  • lpch1987
  • 2016年10月24日 10:34
  • 1016

myeclipse中遇到代码run as后只有run configurations的情况

开始的时候写了一段代码,目的是想看看java的类能不能在自己的的main()函数中实例化出自己本身的对象。并调用自己的方法,再将结果打印到控制台。 public class Read { in...
  • zhuliping1993
  • zhuliping1993
  • 2016年06月09日 13:43
  • 3698

chrome扩展开发:[10]消息传递

转自: 工具/原料 chrome浏览器 文本编辑器 概述 1 前面几篇文章我们介绍了browser ...
  • talking12391239
  • talking12391239
  • 2014年10月24日 19:49
  • 3300
收藏助手
不良信息举报
您举报文章:html5知识整理
举报原因:
原因补充:

(最多只允许输入30个字)