一些关于html5和css3的笔记

1.1 认识HTML5

HTML5并不只仅只是作为HTML标记语言的一个最新版本，更重要的是它制定了Web应用开发的一系列标准，成为第一个将Web作为应用开发平台的HTML语言。

HTML5定义了一系列新元素，如新语义标签、智能表单、多媒体标签等，能够帮助开发者建立富互联网应用，还提供了一些Javascript API，如地理定位、重力感应、硬件访问等，能够在浏览器内实现类原生应用，甚至结合Canvas咱们可开发网页版游戏。

  

咱们平常讨论的H5其实指的是一个范称，它是由HTML5 + CSS3 + Javascript等技术组合而成的一个应用开发平台。

1.2 语法规范

随着Web技术的更新，HTML也前后经历了HTML 4.01、XHTML 1.0、HTML5几个重要的版本，在版本的演变过程当中新增或废弃了一些属性，同时对语法规范也作了一些调整，为了可以保证浏览器能够兼容不一样版本语法规范的，咱们可使用<!DOCTYPE>指示浏览器应该如何处理。

HTML5在语法规范上也作了比较大的调整，去除了许多冗余的内容，书写规则更加简洁、清晰。

见代码实例

 

特色：

1、更简洁

2、更宽松

实际开发中应规范书写，不建议太随意 ！

如今基本全部网站都采用了HTML5的<!DOCTYPE>

W3C验证地址

https://validator.w3.org/

第2章语义标签

语义标签对于咱们并不陌生，如<p>表示一个段落、<ul>表示一个无序列表<h1> ~ <h6>表示一系列标题等，在此基础上HTML5增长了大量更有意义的语义标签，更有利于搜索引擎或辅助设备来理解HTML页面内容。

传统的作法咱们或许经过增长类名如class="header"、class="footer"，使HTML页面具备语义性，可是不具备通用性。

HTML5则是经过新增语义标签的形式来解决这个问题，例如<header></header>、<footer></footer>等，这样就可使其具备通用性。

此章节学习目的为了解增长语义标签的目的，以及各语义标签所表达的意义，在网页布局中可以合理使用标签。

2.1 经常使用新语义标签

<nav> 表示导航

<header> 表示页眉

<footer> 表示页脚

<section> 表示区块

<article> 表示文章 如文章、评论、帖子、博客

<aside> 表示侧边栏 如文章的侧栏

<figure> 表示媒介内容分组 与 ul > li 作个比较

<mark> 表示标记 (带用“UI”，不怎么用，能够重写样式)

<progress> 表示进度 (带用“UI”，不怎么用，不可重写样式)

<time> 表示日期

<hgroup> 标题列表 (听说已废弃)

<details>

<bdi>

<command>

<summary>

<rp>

<rt>

<ruby>

本质上新语义标签与<div>、<span>没有区别，只是其具备表意性，使用时除了在HTML结构上须要注意外，其它和普通标签的使用无任何差异，能够理解成<div class="nav"> 至关于 <nav>。不要好奇，它只是一个标签！

尽可能避免全局使用header、footer、aside等语义标签。

2.2 兼容处理

在不支持HTML5新标签的浏览器里，会将这些新的标签解析成行内元素(inline)对待，因此咱们只须要将其转换成块元素(block)便可使用，可是在IE9版本如下，并不能正常解析这些新标签，可是却能够识别经过document.createElement('tagName')建立的自定义标签，因而咱们的解决方案就是将HTML5的新标签所有经过document.createElement('tagName')来建立一遍，这样IE低版本也能正常解析HTML5新标签了，在实际开发中咱们更多采用的是经过检测IE浏览器的版原本加载第三方的一个JS库来解决兼容问题。

第3章表单

伴随着互联网富应用以及移动开发的兴起，传统的Web表单已经愈来愈不能知足开发的需求，因此HTML5在Web表单方向也作了很大的改进，如拾色器、日期/时间组件等，使表单处理更加高效。

此章节学习目的，了解HTML5表单的新增的特性，以及PC和移动设备间的差别，其兼容性较差。

3.1 输入类型

email 输入email格式

tel 手机号码

url 只能输入url格式

number 只能输入数字

search 搜索框

range 范围

color 拾色器

time 时间

date 日期 不是绝对的

datetime 时间日期

month 月份

week 星期

部分类型是针对移动设备生效的，且具备必定的兼容性，在实际应用当中可选择性的使用。

 

3.2 表单元素（标签）

<datalist> 下拉选项，使用中文时要注意

<keygen> 生成加密字符串

<output> 不可当作数据提交？

<meter> 表示度量器，不建议用做进度条

3.3 表单属性

placeholder 占位符

autofocus 获取焦点

multiple 文件上传多选或多个邮箱地址

autocomplete 自动完成，用于form元素，也可用于部分input，默认值on

form 指定表单项属于哪一个form，处理复杂表单时会须要

novalidate 关闭验证，可用于<form>标签，（只适应用form）

required 验证条件，必填项

pattern 正则表达式 自定义验证规则

表单重写没有说起，自行验证，共包含

formaction、formenctype、formtarget、formmethod、formnovalidate

应用于提交按钮上，如：<input type="submit" formaction="xxx.php">

3.4 表单事件

oninput 用户输入内容时触发，可用于移动端输入字数统计

oninvalid 验证不经过时触发

第4章多媒体

在HTML5以前，在网页上播放音频/视频的通用方法是利用Flash来播放，可是大多状况下，并不是全部用户的浏览器都安装了Flash插件，由此使得处理音频/视频播放变的很是复杂，而且移动设备的浏览器并不支持Flash插件。

此章节学习目的，了解如何经过HTML5播放音频/视频，以及针对不一样浏览器所支持的格式，作多浏览器兼容处理。

4.1 音频

HTML5经过<audio>标签来解决音频播放的问题。

使用至关简单，以下图所示

 

而且能够经过附加属性能够更友好控制音频的播放，如：

autoplay 自动播放

controls 是否显不默认播放控件

loop 循环播放

preload 预加载 同时设置autoplay时些属性失效

因为版权等缘由，不一样的浏览器可支持播放的格式是不同的

 

多浏览器支持的方案，以下图

 

4.2 视频

HTML5经过<video>标签来解决音频播放的问题。

同音频播放同样，<video>使用也至关简单，以下图

 

一样，经过附加属性能够更友好的控制视频的播放

autoplay 自动播放

controls 是否显示默认播放控件

loop 循环播放

preload 预加载，同时设置了autoplay，此属性将失效

width 设置播放窗口宽度

height 设置播放窗口的高度

因为版权等缘由，不一样的浏览器可支持播放的格式是不同的

 

第5章微数据

1、微数据

http://kayosite.com/html5-microdata.html

能够理解成新语义标签的一种补充

2、ARIA

http://www.zhangxinxu.com/wordpress/2012/03/wai-aria-%E6%97%A0%E9%9A%9C%E7%A2%8D%E9%98%85%E8%AF%BB/#ariaRole

第6章DOM扩展

6.1 获取元素

1、document.getElementsByClassName ('class') 经过类名获取元素，以类数组形式存在。

2、document.querySelector('selector') 经过CSS选择器获取元素，符合匹配条件的第1个元素。

3、document.querySelectorAll('selector') 经过CSS选择器获取元素，以类数组形式存在。

6.2 类名操做

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节点，是一个通称。

6.3 自定义属性

在HTML5中咱们能够自定义属性，其格式以下data-*=""，例如

data-info="我是自定义属性"，经过Node.dataset['info'] 咱们即可以获取到自定义的属性值。

Node.dataset是以对象形式存在的

当咱们以下格式设置时，则须要以驼峰格式才能正确获取

data-my-name="itcast"，获取Node.dataset['myName']

6.4 案例练习

Tab切换

第7章新增API

7.1 拖拽

在HTML5的规范中，咱们能够经过为元素增长draggable="true"来设置此元素是否能够进行拖拽操做，其中图片、连接默认是开启的。

7.1.1 拖拽元素

页面中设置了draggable="true"属性的元素

7.1.2 目标元素

页面中任何一个元素均可以成为目标元素

7.1.3 事件监听

拖拽元素

ondrag 应用于拖拽元素，整个拖拽过程都会调用

ondragstart 应用于拖拽元素，当拖拽开始时调用

ondragleave 应用于拖拽元素，当鼠标离开拖拽元素时调用

ondragend 应用于拖拽元素，当拖拽结束时调用

目标元素

ondragenter 应用于目标元素，当拖拽元素进入时调用

ondragover 应用于目标元素，当停留在目标元素上时调用

ondrop 应用于目标元素，当在目标元素上松开鼠标时调用

ondragleave 应用于目标元素，当鼠标离开目标元素时调用

数据传递

ev.dataTransfer.setData() 设置数据

ev.dataTransfer.getData() 读取数据

7.2 历史管理

提供window.history，对象咱们能够管理历史记录，可用于单页面应用，Single Page Application，能够无刷新改变网页内容。

7.2.1 旧版本

history.back() 回退

history.forward() 前进

history.go(n) 前进/后退n步，正值前进，负值后退

history.length历史记录条数

7.2.2 新增方法

1、pushState(data, title, url) 追加一条历史记录

data用于存储自定义数据，一般设为null

title网页标题，基本上没有被支持，通常设为空

url 以当前域为基础增长一条历史记录，不可跨域设置

2、replaceState(data, title, url) 与pushState()基本相同，不一样之处在于replaceState()，只是替换当前url，不会增长/减小历史记录。

Single Page Application单页面应用

7.2.3 事件监听

onpopstate事件，当前进或后退时则触发，经过事件对象ev.state能够读取到存储的数据，监听是要给window。

7.3 地理定位

在HTML规范中，增长了获取用户地理信息的API，这样使得咱们能够基于用户位置开发互联网应用，即基于位置服务 (Location Base Service)

7.3.1 获取地理信息方式

1、IP地址

2、三维坐标

GPS（Global Positioning System，全球定位系统）

Wi-Fi

手机信号

3、用户自定义数据

以下图对不一样获取方式的优缺点进行了比较，浏览器会自动以最优方式去获取用户地理信息。

 

7.3.2 隐私

HTML5 Geolocation 规范提供了一套保护用户隐私的机制。必须先获得用户明确许可，才能获取用户的位置信息。

7.3.3 API详解

navigator.getCurrentPosition(successCallback, errorCallback, options) 获取当前地理信息

navigator.watchPosition(successCallback, errorCallback, options) 重复获取当前地理信息

1、当成功获取地理信息后，会调用succssCallback，并返回一个包含位置信息的对象position。

position.coords.latitude纬度

position.coords.longitude经度

position.coords.accuracy精度

position.coords.altitude海拔高度

2、当获取地理信息失败后，会调用errorCallback，并返回错误信息error

3、可选参数 options 对象能够调整位置信息数据收集方式

a) enableHighAccuracy 高精度模式

b) timeout 超时设置，单位为ms

c) maximumAge表示浏览器从新获取位置信息的时间间隔，单位为ms

7.4 Web存储

随着互联网的快速发展，基于网页的应用愈来愈广泛，同时也变的愈来愈复杂，为了知足各类各样的需求，会常常性在本地存储大量的数据，传统方式咱们以document.cookie来进行存储的，可是因为其存储大小只有4k左右，而且解析也至关的复杂，给开发带来诸多不便，HTML5规范则提出解决方案。

7.4.1 特性

1、设置、读取方便

2、容量较大，sessionStorage约5M、localStorage约20M

4、只能存储字符串，能够将对象JSON.stringify() 编码后存储

7.4.2 window.sessionStorage

1、生命周期为关闭浏览器窗口

2、在同一个窗口下数据能够共享

7.4.3 window.localStorage

1、永久生效，除非手动删除

2、能够多窗口共享

7.4.4 方法详解

setItem(key, value) 设置存储内容

getItem(key) 读取存储内容

removeItem(key) 删除键值为key的存储内容

clear() 清空全部存储内容

key(n) 以索引值来获取存储内容

7.4.5 其它

WebSQL、IndexDB

7.5 全屏

HTML5规范容许用户自定义网页上任一元素全屏显示。

requestFullScreen() 开启全屏显示

cancelFullScreen() 关闭全屏显示

不一样浏览器须要添加前缀如：

webkitRequestFullScreen、mozRequestFullScreen

webkitCancelFullScreen、mozCancelFullScreen

规范容许全部元素能够取全屏，但实际测试结果关闭全屏只能添加到document元素上

经过document.fullScreen检测当前是否处于全屏状态

不一样浏览器须要添加前缀

document.webkitIsFullScreen、document.mozFullScreen

全屏伪类

:full-screen .box {}、:-webkit-full-screen {}、:moz-full-screen {}

7.6 网络状态

咱们能够经过window. navigator.onLine来检测，用户当前的网络情况，返回一个布尔值

addEventListener 进行绑定online用户网络链接时被调用

addEventListener 进行绑定.offline用户网络断开时被调用

事件是给window绑订的

7.7 应用缓存

HTML5中咱们能够轻松的构建一个离线（无网络状态）应用，只须要建立一个cache manifest文件。

7.7.1 优点

1、可配置须要缓存的资源

2、网络无链接应用仍可用

3、本地读取缓存资源，提高访问速度，加强用户体验

4、减小请求，缓解服务器负担

7.7.2 缓存清单

一个普通文本文件，其中列出了浏览器应缓存以供离线访问的资源，推荐使用.appcache为后缀名，添加MIME类型

AddType text/cache-manifest .appcache

例如咱们建立了一个名为demo.appcache的文件，而后在须要应用缓存在页面的根元素(html)添加属性manifest="demo.appcache"，路径要保证正确。

7.7.3 manifest文件格式

1、顶行写CACHE MANIFEST

2、CACHE: 换行 指定咱们须要缓存的静态资源，如.css、image、js等

3、NETWORK: 换行 指定须要在线访问的资源，可以使用通配符

4、FALLBACK: 换行 当被缓存的文件找不到时的备用资源

7.7.4 事件监听

可自行查阅资料

7.7.5 其它

1、CACHE: 能够省略，这种状况下将须要缓存的资源写在CACHE MANIFEST

2、能够指定多个CACHE:  NETWORK:  FALLBACK:，无顺序限制

3、#表示注释，只有当demo.appcache文件内容发生改变时或者手动清除缓存后，才会从新缓存。

4、chrome 能够经过chrome://appcache-internals/工具和离线（offline）模式来调试管理应用缓存

7.8 文件读取

经过FileReader对象咱们能够读取本地存储的文件，可使用 File 对象来指定所要读取的文件或数据。其中File对象能够是来自用户在一个 <input> 元素上选择文件后返回的FileList 对象，也能够来自由拖放操做生成的  DataTransfer

7.8.1 FileList对象

因为HTML5中咱们能够经过为表单元素添加multiple属性，所以咱们经过<input>上传文件后获得的是一个FileList对象（伪数组形式）。

7.8.2 FileReader对象

HTML5新增内建对象，能够读取本地文件内容。

var reader = new FileReader; 能够实例化一个对象

实例方法

1、readAsDataURL() 以DataURL形式读取文件

事件监听

onload 当文读取完成时调用

属性

result 文件读取结果

参考资料

https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader#toc

7.9 多媒体

方法：load()、play()、pause()

属性：currentSrc、currentTime、duration

事件：

参考文档

http://www.w3school.com.cn/tags/html_ref_audio_video_dom.asp

7.10 应用