html5

发表于 | 分类于


什么是HTML5

广义概念：HTML5代表浏览器端技术的一个发展阶段, 2009年推出，14年定稿。在这个阶段，浏览器的呈现技术得到了飞跃发展和广泛支持，它包括：HTML的升级版、CSS的升级版、JavaScript API的升级版。

兼容性

IE8 及以下版本的浏览器不支持 H5 和 CSS3。解决办法：引入html5shiv.js文件。

1
2
3
4
5
6
7
8
9
<!--  条件注释 只有ie能够识别-->
<!--[if lte ie 8]>
    <script src="html5shiv.min.js"></script>
<![endif]-->

l：less 更小
t：than 比
e：equal等于
g：great 更大

JS API

常用
0、添加自定义属性：以data-开头
1、新的选择器：querySelector()、querySelectorAll()
2、element.classList
3、访问历史API
4、全屏API
5、网页存储：application, Cache, localStorage, sessionStorage, WebSQL, indexedDB
6、设备信息访问：网络状态，硬件访问，设备访问，地理围栏
7、文件：文件系统API，fileReader
8、网络访问：XMLHttpRequest, fetch, WebSocket
9、多线程
10、桌面通知

标签语义化

1、能够便于开发者阅读和写出更优雅的代码。
2、同时让浏览器或是网络爬虫可以很好地解析，从而更好分析其中的内容。
3、更好地搜索引擎优化。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// 传统网页布局
<!-- 头部 -->
<div class="header">
  <ul class="nav"></ul>
</div>
<!-- 主体部分 -->
<div class="main">
  <!-- 文章 -->
  <div class="article"></div>
  <!-- 侧边栏 -->
  <div class="aside"></div>
</div>
<!-- 底部 -->
<div class="footer"></div>

// H5布局
<!-- 头部 -->
<header>
    <nav></nav>
</header>
<!-- 主体部分 -->
<div class="main">
  <!-- 文章 -->
  <article></article>
  <!-- 侧边栏 -->
  <aside></aside>
</div>
<!-- 底部 -->
<footer></footer>
html5常用新语义标签
1
2
3
4
5
6
7
8
<nav> 表示导航
<header> 表示页眉
<footer> 表示页脚
<section> 表示区块
<article> 表示文章。如文章、评论、帖子、博客
<aside> 表示侧边栏 如文章的侧栏
<figure> 表示媒介内容分组。
<time> 表示日期
html5新增表单

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
type类型：
email 只能输入email格式。自动带有验证功能。
tel 手机号码。
url 只能输入url格式。
number 只能输入数字。
search 搜索框
range 滑动条
color 拾色器
time	时间
date 日期。
--datetime 时间日期
month 月份
week 星期

属性：
placeholder 占位符（提示文字）
autofocus 自动获取焦点
multiple 文件上传多选或多个邮箱地址
autocomplete 自动完成（填充的）。on 开启（默认），off 取消。用于表单元素，也可用于表单自身(on/off)
form 指定表单项属于哪个form，处理复杂表单时会需要
novalidate 关闭默认的验证功能（只能加给form）
required 表示必填项
pattern 自定义正则，验证表单。例如

多媒体

在HTML5之前，在网页上播放音频/视频的通用方法是利用Flash来播放。但是大多情况下，并非所有用户的浏览器都安装了Flash插件。
并且移动设备的浏览器并不支持Flash插件。
HTML5通过

1
2
<audio src="music/yinyue.mp3" autoplay controls> </audio>
<video src="video/movie.mp4" controls autoplay></video>

自定义属性
1
2
3
<div class="box" title="盒子" data-my-name="smyhvae" data-content="我是一个div">div</div>
document.querySelector('.box').dataset('content')
document.querySelector('.box').dataset('myName')