HTML5

第一章 HTML5概述

H5是下一代的web开发的基础.

1.1 web技术发展时间线

1991 HTML 就是用标记表示一些比普通文本更丰富的文本,文本的超集,有多个版本,没有图片传递。
1994 HTML2 作为HTML1(+)的后续发展,但从未成为标准
1995 HTML3 提供了很多新特性,例如文字环绕,表格,但是由于兼容性问题停止开发.
1996 CSS+Javascript 用层叠样式表修改样式最基本的交互alert
1997 HTML4 把一些标签标记为废弃互联网公司的博弈
1998 CSS2 Web技术停滞 1999 ES3
2000 环境混乱,提出 XHTML 更严格的HTML 去除大写的标签不闭合的标签等是XML的实现 (2001 ie6)
2002 Tableless Web Design 表格布局
2005 AJAX 中国到2006年还没有使用ajax的技术
2009 HTML5 移动端的推动
2014 HTML5 Finalized

1.2 HTML5概念

HTML5并不是单纯的超文本的第五次版本,而是定义为Web Application,改变web开发的传统模式.

W3C将H5定义为HTML,CSS,Javascript API的升级语言,是新一代开发Web富客户端应用的整体解决方案.

1.3 应用场景

网页应用程序
- PC端: iCloud , 百度脑图 ,Office365...
- APP端:淘宝 , 京东 ,美团
- WeChat端：微信小程序，淘宝，京东等
混合本地式应用
- PC端:网易云音乐 , 有道词典
- APP端:淘宝,手机百度,京东
简单的游戏

1.4 HTML5新增特性

HTML:

标签
- 语义化标签
- 应用程序标签
属性
- 链接关系描述
- 结构数据标记
- ARIA
- 自定义属性
智能表单
- 新的表单类型
- 虚拟键盘配置
网页多媒体
- 音频
- 视频
- 字幕
Canvas
- 2D
- 3D (WebGL)
SVG

Javascript API:

核心平台提升
- 新的选择器 QuerySelector
- 访问历史
- 全屏
网页存储
- Application Cache
- localStorage
- sessionStorage
- WebSql
- indexedDB
设备信息访问
- 网络状态
- 硬件访问
- 设备方向
- 地理围栏
拖放操作
- 网页内拖放
- 桌面拖入
- 桌面拖出
文件
- 文件系统API
- FileReader
网络访问
- Ajax
- WebSocket
多线程
桌面通知

CSS :

一些CSS3的新特性

第二章语义化标签

语义化标签能够让HTML代码更符合内容的结构化,标签的语义化

以前我们可能是这样的:

以后我们肯定是这样的:

形成统一的规范,更易于人和机器的无障碍读取网页内容.

语义化标签能够便于开发者阅读和写出更优雅的代码
能够让浏览器或者网络爬虫可以更好的进行解释，从而更好的分析其中的内容，更好的搜索引擎优化

切记
HTML的职责是描述一块区域的内容或意义是什么,而不是它长得是什么样子,网页的外观应该由CSS来决定

一些常见的语义化标签 http://blog.csdn.net/coco379/article/details/52938071

HTML5的新的语义化标签 http://www.cnblogs.com/zjf-1992/archive/2016/12/16/6182406.html

第三章应用程序标签

应用程序标签主要由 DataList(数据列表),Progress(进度条),Meter(数值显示器),Menu(右键菜单),Detail(明细)等组成,其中后两种标签兼容性不好,我们只对前三种进行讨论.

HTML 标签 http://www.w3school.com.cn/tags/tag_doctype.asp

DataList

是input标签的一种补充,类似于自动完成的一种样式,帮助我们匹配查找列表中的内容

文档格式无法访问,需要HTTP形式访问

    数据列表呈现需要一个载体 input

不仅可以呈现列表,还可以进行自动匹配查找

不能修改样式,基本上用jquery

进度条

进度条默认长度是1,可以用value和max控制

progress

当我们修改进度条的颜色的时候,发现并不是我们所期待的颜色,并且我们不能对进度和总体样式进行修改.

在谷歌开发者工具中可以打开Show user agent shadow DOM选项

在控制台可以看到progress的具体配置

自定义进度条样式 http://www.hongkiat.com/blog/html5-progress-bar/

shadow-dom http://www.cnblogs.com/coco1s/p/5711795.html

meter

    定义的是数值,不是进度,例如销量等.

http://www.w3school.com.cn/tags/tag_meter.asp meter标签

第四章链接关系

对于一些链接,残障人士可能无法识别链接的语意,并且爬虫在检索数据的时候,光靠href是不够的

上一页
下一页
→
next

通过链接关系属性声明连入的链接和当前文档之间的关系.

上一页

在link头中我们也经常看到rel,指明了文档的类型.

如果rel不对或者href链接的文档不对,css都无法正常引入.






...

old posts
tutorial
license
wannabe
games posts

alternate 文档的可选版本（例如打印页、翻译页或镜像）
stylesheet 文档的外部样式表
prefetch 预加载
import 文档引入
start 集合中的第一个文档
next 集合中的下一个文档
prev 集合中的前一个文档
contents 文档目录
index 文档索引
glossary 文档中所用字词的术语表或解释
copyright 包含版权信息的文档
chapter 文档的章
section 文档的节
subsection 文档的子段
appendix 文档附录
help 帮助文档
bookmark 相关文档
nofollow 用于指定 Google 搜索引擎不要跟踪链接
licence 一般用于文献，表示许可证的含义
tag 标签集合
friend 友情链接

对于rel属性,有些写错了也不会报错,只是不读取.所以rel属性可以完美的过度.

第五章数据结构

随着互联网网站和应用的增多,爬虫的负担也变得越来越大,数据结构标签即是帮助爬虫快速提取和检索网站信息的新增标记,需要特定的工具


  我叫whitsats。
  
    我养了一条叫
    旺财的
    金毛犬。

是一个包含键值对信息的html代码块,便于抓取.因为对于'我养了一条叫'这些字段对于我们来说是没有意义的.

https://search.google.com/structured-data/testing-tool 谷歌的结构数据读取工具

第六章 ARIA

全称为Accessible Rich Internet Application (无障碍富互联网应用程序)
主要针对于屏幕阅读设备(e.g. NVDA)，更快更好地理解网页.更多的是面对残障人士对网页进行阅读.

但是,ARIA属性不仅仅为了盲人用户,更多的还是为了语义化.

例如,在文本框的书写过程中,我们一般使用label包裹


    请输入:

如何让残障人士知道当前浏览的区域是网站主导航?

  
    新闻
    视频
    娱乐

如何让残障人士知道当li标签是select的选项?

  
    选择提示问题
    
      我妈妈的名字是？
      我爸爸的名字是？
      我爱人的名字是？

对于残障人士,页面的一些隐藏内容我们也不需要使用屏幕阅读器来进行读取.

现如今国内对于残障人士用户的重视程度相比国外还远远不够

http://www.zhangxinxu.com/wordpress/2012/03/wai-aria-%E6%97%A0%E9%9A%9C%E7%A2%8D%E9%98%85%E8%AF%BB/ WAI-ARIA无障碍网页应用属性完全展示

第七章自定义属性

HTML5 增加了一项新功能是自定义数据属性，也就是 data-*自定义属性。在HTML5中我们可以使用以 data-为前缀来设置我们需要的自定义属性，来进行一些数据的存放.

我们当然可以用JS中的attribute方法存取data-自定义属性的值

此方法能在所有的现代浏览器中正常工作，但它不是HTML5的自定义 data-*属性被使用目的，不然和我们以前使用的自定义属性就没有什么区别了.我们单纯的不使用data-前缀也能完成上述的功能.

在H5中的data-属性和我们自定义属性有很大的不同:

dataset属性存取data-*自定义属性的值

这种方式通过访问一个元素的dataset属性来存取data-*自定义属性的值。这个dataset 属性是HTML5 JavaScript API的一部分，用来返回一个所有选择元素data- 属性的DOMStringMap对象。

使用这种方法存取数据时，不是使用完整的属性名，如data-uid来存取数据，应该去掉data- 前缀。

还有一点特别注意的是,data-属性名如果包含了连字符，例如date-of-birth ，连字符将被去掉，并转换为驼峰式的命名，前面的属性名转换后应该是dateOfBirth。

第八章智能表单

HTML5在原有的表单基础上新增了一些新的标签和属性

原有标签type类型:file,text,password,radio,checkbox,button,submit,reset

新增表单类型:http://www.runoob.com/html/html5-form-input-types.html

我们挑选一些兼容性较好的属性和类型进行讲解.

日期和时间
PC端的样式不可控,常用于移动端


    
        日期:
        
    
    

    
        日期和时间:
        生日 (日期和时间): 
    
    

    
        月份:
       
    
    

    
        时间：
        
    
    
        选择周:

颜色


    选择你喜欢的颜色:

自动验证email输入是否符合格式


    E-mail:

range

表示一个数值的取值范围，可以通过一些属性定义

* max - 规定允许的最大值
* min - 规定允许的最小值
* step - 规定合法的数字间隔
* value - 规定默认值


 范围 ：

number

number 类型用于应该包含数值的输入域,并且我们还可以对期进行设置


    数量 ( 1 到 5 之间 ):

属性

input元素的新增属性：

Autocomplete：自动完成功能.记录用户之前输入的内容，并在下次输入时自动提示完成输入
- 属性值： on/off
- 可以在form表单上使用，对整张表单的所有控件进行自动完成的开关
- 也可以在input上使用，对特定输入框进行修改。
- 绝大部分浏览器，默认开启。
require 表单中必须填写的部分
novalidate 属性:属性规定在提交表单时不应该验证 form 或 input 域。
- 对于input框测试无效
pattern属性:pattern 属性描述了一个正则表达式用于验证input元素的值。

第九章网页多媒体

在H5出现之前，网页上的音乐和视频播放器基本都是基于第三方插件，例如flash。由浏览器内部实现video和audio。

音频播放

默认情况下，audio标签支持mp3，ogg和wav格式的音频文件。并且不显示控制条。

因为不同浏览器对音频格式的支持不一致，为了能够让浏览器正常播放音频文件，我们通常准备三种格式的音频，存放于source标签下，浏览器将识别第一个支持的格式,而对于不支持音频标签的浏览器（通常是ie8以下），将显示标签内的文字。

https://www.runoob.com/tags/tag-audio.html

audio标签有一些属性提供给我们进行设置：

controls ：显示控制条 controls = 'controls'
loop : 歌曲循环默认是false
autoplay : 自动播放默认值为false

我们当然可以使用shadow-root来对控制条进行样式上的设置,但是自定义起来更为方便,在H5中的audio标签提供了一些DOM对象的属性和方法供我们自定义音频播放

属性:

currentTime 获取当前播放时间
duration 获取歌曲的总时间
paused 是否暂停返回true/false
volume 设置或返回音频的音量最大为1
- muted 静音播放

方法:

play() 播放歌曲
pause() 暂停歌曲
load()重新加载歌曲

事件:

play 播放事件
pause 暂停事件
timeupdate 播放位置更改
volumechange 音量更改
loadstart，durationchange，loadeddata，progress，canplay，canplaythrough等




    
    Document


    网页多媒体

视频播放

视频播放使用的是video标签

https://www.runoob.com/tags/tag-video.html

video标签默认不会播放,显示黑屏,并且大小为原大小.

同样,video视频资源也可以写在source标签下,支持三种格式:MP4, WebM, 和 Ogg.对于ie8同样不支持.

video标签的属性和audio类似

autoplay
controls
width
height
loop
muted 静音播放
poster 载入时的图像

方法:

play()
pause()
load()

事件:

play 播放事件
pause 暂停事件
timeupdate 播放位置更改
volumechange 音量更改
loadstart，durationchange，loadeddata，progress，canplay，canplaythrough等

字幕

对于视频文件,我们可以使用track标签携带字幕,但是浏览器基本不支持,现在的解决方案一般是内嵌字幕

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

第十章 QuerySelector

第十一章 classList

在HTML5 API里，页面DOM里的每个节点上都有一个classList对象，程序员可以使用里面的方法新增、删除、修改节点上的CSS类。使用classList，程序员还可以用它来判断某个节点是否被赋予了某个CSS类。其实类似的方法已经在JQuery中实现了.

查看classList

DOMTokenList[3]
0: "a"
1: "b"
2: "c"
length: 3
value: "a b c"
__proto__: DOMTokenList

其实classList的本质就是DOMTokenList,DOM标记列表

classList的API

属性:

length 返回css类的个数

同时我们可以使用toString方法格式化classList

console.log(document.getElementsByTagName('div')[0].classList.toString())

等同于document.getElementsByTagName('div')[0].className

方法:

item() 支持一个参数,为类名的索引值,返回响应类名
add() 添加新的类名等同于jq中的addClass()
remove() 删除一个类名等同于jq中的removeClass()
toggle() 传递一个类名,如果对象中存在则删除,返回false,如果没有则添加,返回true 类似jq中的toggleClass()
contents() 判断是否存在该类名类似jq中的hasClass()

注意无论是添加或者删除,classList并不能一次执行操作多个类名,而JQuery仅仅只需要空格分隔即可

    $('div').addClass('d f');
    console.log($('div'));

第十二章历史记录

在HTML中可以通过window.history操作访问历史状态,只存在长度这一个可用值,前进后退不能改变历史记录,但是在H5之前,仅仅能做到前进后退,并不能更多的对历史记录进行操作.

首页
商品

window.history.forward(); // 前进
window.history.back(); // 后退
window.history.go(); // 刷新 location = location

界面上的所有JS操作不会被浏览器记住，就无法回到之前的状态,例如我们在利用Ajax技术进行翻页操作的时候,浏览器地址栏没有发生变化,就不会记住历史记录,我们一旦刷新页面,Ajax操作的翻页就会消失.原有的方法是记录页面的哈希值,但是没有现在方便.

HTML5新增了历史记录的API接口,新增了两个方法,提供了一个事件监听浏览器的前进和后退.帮助我们手动的添加历史记录.

当ajax进行翻页操作时,我们可以通过js将当前页面的信息记录到历史记录中.如果我们需要操作前进后退,可以用事件监听函数获取我们在历史记录中存储的页面信息,从而能够由后台获取所需的数据.

history.pushState(放入历史中的状态数据, 设置title(现在浏览器不支持)，改变历史状态)
history.replaceState(修改历史记录的状态数据, 设置title(现在浏览器不支持)，改变历史状态)
popstate 监听浏览器的前进后退操作

新闻
音乐

第十三章全屏

除了使用F11可以使网页全屏以外,HTML5提供了一个新的API接口帮助我们实现元素或者页面的全屏显示

requestFullScreen() 方法,直接在元素上进行调用

注意全屏API的兼容性问题,

webkitRequestFullScreen()
mozRequestFullScreen()


    ![](fate.jpg)

兼容性判断:

var elem = 需要全屏的元素;
if (elem.webkitRequestFullScreen) {
  elem.webkitRequestFullScreen();
} else if (elem.mozRequestFullScreen) {
  elem.mozRequestFullScreen();
} else if (elem.requestFullScreen){
  elem.requestFullScreen();
}

第十四章 Application Cache(废弃)

一个离线网络应用程序就是一个URL的列表——HTML,CSS,JavaScript,图片,或者其他类型
的资源。
把这些资源,在本地缓存下来,当你尝试在没有网络连接时访问网络应用程序,你的网络浏
览器将自动切换并使用本地代替。

本地缓存列表依赖于.manifest清单文件,文件规定了缓存的规则

CACHE MANIFEST
# 这一句必须存在,而且必须放在头部
CACHE
#这一句指明要缓存的内容
NETWORK#声明用于指定无需缓存的文件
FALLBACK
#这个声明允许你在资源不可用的情况下,将用户重定向到特定文件
#(当更新文件不成功时,默认使用原来的文件)

创建一个项目,使用http协议形式打开测试缓存是否成功

manifest

CACHE MANIFEST
###
CACHE:
01.html
01.js
01.css
NETWORK:
fate.jpg
FALLBACK

01.html




    
    Document
    



    ![](fate.jpg)

你好

01.css

div{
    width: 200px;height: 150px;
}
img{
     width:100%; 
     height:100%
}

01.js

document.getElementsByTagName('img')[0].onclick = function(e){
    this.webkitRequestFullScreen();
    e.preventDefault()
}

访问一次之后查看控制台,关闭网络并刷新,发现图片并没有加载,其他元素正常显示

但是,当我们修改被缓存文件的内容时,更改并不能通过刷新获取,这是因为浏览器因为默认优先使用了缓存,所以,当我们写一个用于离线缓存的网页时,每一次修改必须修改manifest文件.

第十五章 Web Storage

JS在浏览器的生产环境中并不能操作本地文件,我们通常利用cookie来实现客户端的数据存储.
HTML5 提供了几种在客户端存储数据的新方法,即localStorage、sessionStorage、 WebSql Database。前面两个适用于存储较少的数据一般称为简单存储,而WebSql Database适用于存储大型的,复杂的数据;

简单存储与cookie的区别：

web存储安全性较高，在数据量上可以达到5M,而cookie最多也就4KB,或者20个key/value对.

localStorage/sessionStorage都有相同的API

localStorage.length 获得storage中的个数
localStorage .key(n) 获得storage中第n个键值对的键
localStorage.key = value
localStorage.setItem(key, value) 添加
localStorage.getItem(key)获取
localStorage.removeItem(key) 移除
localStorage.clear() 清除





    用户名:
    
    
 密码 :
    
    
 是否永久保存 :

第十六章 File

HTML5新增了文件API,提供客户端本地操作文件的可能.

我们可以通过file表单或拖放操作选择文件,还可以通过JavaScript读取文件的名称、大小、类型、和修改时间.

file类型的input表单新增了files属性,保存我们上传文件的信息,如果要实现多文件上传,可以设置input的multiple属性.

可以使用accept属性规定文件上传的MIME类型例如'image/jpeg'


        
            请选择文件

第一个第二个

one.ondrop = function(e) { e.preventDefault() var file = e.dataTransfer.files[0]; var formData = new FormData(); formData.append("aa", file); var xml = new XMLHttpRequest(); xml.open("post", url, false); xml.send(formData); }

HTML5

HTML5

第一章 HTML5概述

1.1 web技术发展时间线

1.2 HTML5概念

1.3 应用场景

1.4 HTML5新增特性

第二章语义化标签

第三章应用程序标签

DataList

进度条

第四章链接关系

第五章数据结构

第六章 ARIA

第七章自定义属性

dataset属性存取data-*自定义属性的值

第八章智能表单

属性

第九章网页多媒体

第十章 QuerySelector

第十一章 classList

第十二章历史记录

第十三章全屏

第十四章 Application Cache(废弃)

第十五章 Web Storage

第十六章 File

第十七章拖拽操作

17.1 页面内拖拽

7.2 拖拽上传

你可能感兴趣的:(HTML5)

HTML5

HTML5

第一章 HTML5概述

1.1 web技术发展时间线

1.2 HTML5概念

1.3 应用场景

1.4 HTML5新增特性

第二章 语义化标签

第三章 应用程序标签

DataList

进度条

第四章 链接关系

第五章 数据结构

第六章 ARIA

第七章 自定义属性

dataset属性存取data-*自定义属性的值

第八章 智能表单

属性

第九章 网页多媒体

第十章 QuerySelector

第十一章 classList

第十二章 历史记录

第十三章 全屏

第十四章 Application Cache(废弃)

第十五章 Web Storage

第十六章 File

第十七章 拖拽操作

17.1 页面内拖拽

7.2 拖拽上传

你可能感兴趣的:(HTML5)

第二章语义化标签

第三章应用程序标签

第四章链接关系

第五章数据结构

第七章自定义属性

第八章智能表单

第九章网页多媒体

第十二章历史记录

第十三章全屏

第十七章拖拽操作