html5知识整理

来源：互联网发布：梦想知乎编辑：程序博客网时间：2024/06/05 16:18

新增标签

<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）模式来调试管理应用缓存

阅读全文

0 0