子页面要向父页面传值，只要在document前面加window.opener即可
window.opener 的用法
window.opener 返回的是创建当前窗口的那个父窗口的引用，比如点击了a.htm上的一个链接而打开了b.htm，然后我们打算在b.htm上输入一个值然后赋予a.htm上的一个id为“name”的textbox中，就可以写为：indow.opener.document.getElementById("name").value = "输入的数据";
opener 属性是一个可读可写的属性，可返回对创建该窗口的 Window 对象的引用。
当使用window.open()打开一个窗口，您可以使用此属性返回来自目标窗口源（父）窗口的详细信息。
代码提示： window.opener.close()将关闭源（父）窗口。
前端组件整理 https://cloud.tencent.com/developer/article/1195353
一、cookie：
在网站中，http请求是无状态的。也就是说即使第一次和服务器连接后并且登录成功后，第二次请求服务器依然不能知道当前请求是哪个用户。cookie的出现就是为了解决这个问题，第一次登录后服务器返回一些数据（cookie）给浏览器，然后浏览器保存在本地，当该用户发送第二次请求的时候，就会自动的把上次请求存储的cookie数据自动的携带给服务器，服务器通过浏览器携带的数据就能判断当前用户是哪个了。cookie存储的数据量有限，不同的浏览器有不同的存储大小，但一般不超过4KB。因此使用cookie只能存储一些小量的数据。
二、session:
session和cookie的作用有点类似，都是为了存储用户相关的信息。不同的是，cookie是存储在本地浏览器，而session存储在服务器。存储在服务器的数据会更加的安全，不容易被窃取。但存储在服务器也有一定的弊端，就是会占用服务器的资源，但现在服务器已经发展至今，一些session信息还是绰绰有余的。
三、cookie和session结合使用：
web开发发展至今，cookie和session的使用已经出现了一些非常成熟的方案。在如今的市场或者企业里，一般有两种存储方式：
1、存储在服务端：通过cookie存储一个session_id，然后具体的数据则是保存在session中。如果用户已经登录，则服务器会在cookie中保存一个session_id，下次再次请求的时候，会把该session_id携带上来，服务器根据session_id在session库中获取用户的session数据。就能知道该用户到底是谁，以及之前保存的一些状态信息。这种专业术语叫做server side session。
2、将session数据加密，然后存储在cookie中。这种专业术语叫做client side session。flask采用的就是这种方式，但是也可以替换成其他形式。
1、简化的文档类型和字符集
（1）文档类型
| 1 |
|
之所以如此简单，是因为HTML5不再是SGML（ Standard Generalized Markup language，标准通用标记语言）的一部分，而是独立的标记语言，不需要再考虑文档类型
（2）字符集
| 1 |
|
只需要utf-8即可
2、富有语义化的新结构元素
| 1 |
|
| 1 2 3 4 |
|
section元素 可以认为div是section元素,一个普通的分块元素，可用来定义网站中的特定的可区别的区域
header元素包括标题，logo，导航和其他页眉的内容，可以在网站上加多个header，就像给内容加多个标题
hgroup元素 即将标题进行分组的元素
footer元素版权声明和作者信息,包涵一些链接
nav元素主要用于主导航菜单
article元素独立成文且以其他格式重用的内容应该置于一个article元素中
aside元素用途包涵内容周围的相关内容
3、新增的内联元素
| 1 2 3 4 |
|
figure元素一个典型用途是包含图像,代码和其他内容对主要内容进行说明，删除不会影响主内容
figcaption元素主要用于figure的标题
mark元素突出显示以表示引用的内容，或者突出显示与用户当前活动相关的内容，他不同于en或strong元素
time元素，当需要在内容中显示时间或者日期时，则建议使用time元素
time元素可以包涵两个属性，一个datetime表示在元素中指定的确切日期和世家，pubdate表示文章或者整个文档发布时time元素所指定的日期和时间
meter元素用于定义度量衡，规定最大最小宽高，通常要结合css一起作用，效果如下：
progress元素用于定义一个进度条，有max（完成值）和value（进度条当前值）两个属性。
4、支持动态页面
1）菜单<menu>
用于表单中组织控件列表，常用属性如下：
定义一个选择列表的例子：
| 1 2 3 4 5 6 7 |
|
2）右键菜单<menitem>
3）在<script>标签中使用async属性
用于指定异步执行的脚本
4）<detail>元素
用于描述文档或文档某个部分的细节
| 1 2 3 4 |
|
效果：
展开后：
5、全新的表单设计
HTML5 新的 Input 类型
HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。
- url
- number
- range
- Date pickers (date, month, week, time, datetime, datetime-local)
- search
- color
HTML5 的新的表单元素：
- datalist
- keygen
- output
新的 form 属性：
- autocomplete
- novalidate
新的 input 属性：
- autocomplete
- autofocus
- form
- form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)
- height 和 width
- list
- min, max 和 step
- multiple
- pattern (regexp)
- placeholder
- required
autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。
当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项：
实例：
| 1 |
|
结果：
6、强大的绘图功能和多媒体功能
1）canvas 可以动态地绘制各种效果精美的图形，结合js就能让网页图形动起来
2）SVG 绘制可伸缩的矢量图形
3）audio和 video 可以不依赖任何插件播放音频和视频
7、打造桌面应用的一系列新功能
离线缓存 Web Storage（为HTML5开发移动应用提供了基础）
传统的web应用程序中，数据处理都由服务器处理，html只负责展示数据，cookie只能存储少量的数据，跨域通信只能通过web服务器。
HTML5扩充了文件存储的能力，多达5MB，支持WebSQL等轻量级数据库，可以开发支持离线web应用程序。
HTML5 Web Storage API可以看做是加强版的cookie，不受数据大小限制，有更好的弹性以及架构，可以将数据写入到本机的ROM中，还可以在关闭浏览器后再次打开时恢复数据，以减少网络流量。
同时，这个功能算得上是另一个方向的后台“操作记录”，而不占用任何后台资源，减轻设备硬件压力，增加运行流畅性。
8、获取地理位置信息
新增Geolocation API，可以通过浏览器获取用户的地理位置，不再需要借助第三方地址数据库或专业的开发包，提供很大的方便。
9、支持多线程
新增Web Worker对象，可以在后台运行js脚本，也就是支持多线程，从而提高了页面加载效率。
10、废弃的标签
1.表现性元素
2.框架类元素
3.属性类
4.其他类
页面缓存指的还是有网络状态下，而离线web应用指的是在没有网络状态可以运行应用
2.本地存储
h5提供了sessionStorage、localStorage和indexedDB加强本地存储。使用之前应该先判断支持情况
if(window.sessionStorage){
//浏览器支持sessionStorage
}
if(window.localStorage){
//浏览器支持localStorage
}
localStorage和sessionStorage的区别在于sessionStorage基于会话，关闭浏览器之后存储消失。localStorage在各浏览器中上限不同，最低的是2.6MB, 所以开发上限为2.6MB, 当然这比cookie强太多，如果还是不够的话只能借助indexedDB, indexedDB上限是250MB。
localStorage和cookie另一个区别是没有过期时间，不过这个可以在localStorage中加一个时间字段轻松解决这个问题。
存取localStorage可能遇到的坑是跨域问题，因为localStorage是域内安全，也就是同一个域才能对localStorage进行存储，可以通过postMessage来解决。以下是它的常用应用场景
var userData = {
name : 'sysuzhyupeng',
age: 24
}
localStorage.setItem('userDate', JSON.stringify(userData));
var newUserData = JSON.parse(localStorage.getItem('userData'));
另外，浏览器提供了storage事件来监听存储
window.addEventListener('storage', showStorageEvent, true)
3.离线web应用
页面缓存指的还是有网络状态下，而离线web应用指的是在没有网络状态可以运行应用
if(window.applicationCache){
//支持离线应用
}
manifest文件是核心，记录着哪些资源文件需要离线应用缓存，要使用manifest，只需要在html标签中添加属性
<html manifest="cache.manifest">
cache.manifest的文件格式如下
CACHE MANIFEST
#缓存的文件
index.html
test.js
#不做缓存
NETWORK
/images/
FALLBACK
offline.html index.html
#缓存的文件下面是当网络不可用时，文件直接从本地缓存读取，#NETWORK下面的文件无论是否已经缓存，都要从网络中下载。FALLBACK后面，当无法获取到offline.html，则转到index.html。
4.表单新增功能
以往input中的name和value要随着form表单一起提交，form表单必须包裹input , 而现在可以通过input的form属性綁定
<form id="testform">
<input type="text" />
</form>
<input form=testform />
placeholder屬性
<input type="text" placeholder="请输入密码" />
autofocus属性，页面只能有一个
<input type="text" autofocus />
还有type为email、number等，但是实际项目中一般使用自定义，所以这里不提。
5. CSS3
CSS3提供了更多的选择器，before、after、first-child、nth-child。提供的效果包括box-shadow、text-shadow、background-size，以background-size为例, 在具体语法不同浏览器有所区别，所以要使用以下写法
background-size: 10px 5px
-webkit-background-size: 10px 5px
还可以使用media-query实现响应式布局
@media (max-width: 1190px) {
...
}
6.地理定位
h5提供了Geolocation API访问地理位置，即通过window.navigator.geolocation来实现访问。这个对象有三个方法：
getCurrentPosition()
watchPosition()
clearWatch
页面第一次使用这个api需要获得用户许可, watchPosition可以对位置变化事件进行监听。
2778
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
