h5笔记备忘2

dhtml 就是动态网页。
html5 = html + js + css

html5就是webapplication
新一代开发web富客户端应用程序的解决方案。
改变了前端的展示方式。

H5的应用场景

1.丰富的网页
2.网页应用程序
3.混合是本地应用
4.简单的游戏，3d游戏（效率不高，基本不用）

H5多了什么东西？

1.html
标签，属性，智能表单，网页多媒体，cavans，svg
2.js
桌面通知，文件操作，网络访问
3.css

语义话标签作用？
整个网页的内容统一了每一部分的格式，比如头部<header>有意义，方便机器爬虫
识别。同时大家都规定好共通的内容，更有意义，方便开发者阅读和写出更优雅的代码。

sublime -server 插件不要stop，直接退出

链接关系属性（rel）
链入的链接和当前页面的关系。便于机器理解文档结构

变量本地化，特别是在jQuery中效率很高。

H5自定义属性
data-*
通过dom存储于dom对象强相关的数据
<li data-id = '1',data-age = '18'>zhangsan</li>

每一个浏览器支持不同的视频格式，视频格式有版权，各个浏览器支持的视频格式不同。

加载字幕，字幕和歌词和像什么时间显示什么内容即可。

object标签向 HTML 代码添加一个对象
iframe标签会创建包含另外一个文档的内联框架（即行内框架）。
embed标签定义嵌入的内容，比如插件。

iframe
1. iframe的作用就是在网页中挖个坑，在这个坑里再展示一个页面
2. svg本身也是文档所以可以使用iframe的方式载入

H5第二天

新的选择器
var items = document.querySelector(selector);
返回第一个满足条件的元素，一个dom对象
document.querySelectorAll(selector)
返回所有的满足条件的元素，一个元素类型的dom数组

h5中支持jQuery中各种选择器（某一个元素下的子元素。）h5将常用的操作进行了一层包装

访问历史记录

以堆栈的方式存放历史记录。入栈pushState，出栈popstate

if (window.history && history.pushState) {
    // 支持历史状态操作
    history.pushState(this.dataset.title, 'title useless', '?t=' + this.dataset.title);
}

// 在历史状态中前进后退触发该事件
window.addEventListener('popstate', function(e) {
    console.log(e.state);
    contentent.innerHTML = data[e.state];
});

e.preventDefault();

webkitRequestFullScreen

JavaScript中可以通过调用requestFullScreen()方式实现指定元素的全屏显示
var element = document.querySelector('...');
element.requestFullScreen();

应用程序缓存（主要用在移动端）

如需启用应用程序缓存，请在文档的 <html> 标签中包含 manifest 属性：

<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>

书写manifest文件
manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。
manifest 文件可分为三个部分：
CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）

文件系统

文件拖拽drop，如果事件拖拽能够有效，必须阻止系统默认drop事件。

CSS3
浏览器支持较差，需要添加私有前缀？？？
移动端支持优于pc端
不断改进中，
应用广泛

如何对待？
渐进增强
考虑用户群体
遵照产品方案
听boss的

属性选择器

.attr1 a[href="./a.rmvb"] {
color: red;
}

.attr1 a[href="./b.rmvb"] {
color: pink;
}

/* E[attr~=val] 表示的一个单独的属性值这个属性值是以空格分隔的*/
.attr2 a[class~="download"] {
color: red;
}

/* E[attr|=val] 表示的要么一个单独的属性值要么这个属性值是以"-"分隔的*/
.attr3 a[class|="download"] {
color: red;
}

/* E[attr*=val] 表示的属性值里包含val字符并且在“任意”位置 /
.attr4 a[class="download"] {
color: red;
}

/* E[attr^=val] 表示的属性值里包含val字符并且在“开始”位置 */
.attr5 a[class^="download"] {
color: red;
}

/* E[attr $=val] 表示的属性值里包含val字符并且在“结束”位置 */ .attr6 a[class$ ="download"] {
color: red;
}

伪类

:nth-child(n) 其中n的值是>= 1,当n时一个算式的时候n可以等于0

伪类选择器
::开头

颜色，透明度
opacity：子元素会继承父元素的透明度
transparent：完全透明，类似玻璃一样。

HSL 颜色
HSL 指的是 hue（色调）、saturation（饱和度）、lightness（亮度） - 表示颜色柱面坐标表示法。
HSL 颜色值是这样规定的：hsl(hue, saturation, lightness)。
Hue 是色盘上的度数（从 0 到 360） - 0 (或 360) 是红色，120 是绿色，240 是蓝色。Saturation 是百分比值；0% 意味着灰色，而 100% 是全彩。Lightness 同样是百分比值；0% 是黑色，100% 是白色。
HSL颜色就是旋转多少度，代表对应的颜色。

文本换行
word-break：打断所有的地方
word-wrap：打断认为是单词的地方
word-spacing：设置字符之间的间距

white-space：处理文本元素内的空白

js相关

Object.prototype 属性表示对象 Object 的原型对象
由于JavaScript没有子类对象，原型是一种常用的方法，用于为某些表现为对象的函数创建一个“基类”对象。例如：

var Person = function() {
  this.canTalk = true;
  this.greet = function() {
    if (this.canTalk) {
      console.log('Hi, I\'m ' + this.name);
    }
  };
};

var Employee = function(name, title) {
  this.name = name;
  this.title = title;
  this.greet = function() {
    if (this.canTalk) {
      console.log("Hi, I'm " + this.name + ", the " + this.title);
    }
  };
};
Employee.prototype = new Person();

var Customer = function(name) {
  this.name = name;
};
Customer.prototype = new Person();

var Mime = function(name) {
  this.name = name;
  this.canTalk = false;
};
Mime.prototype = new Person();

var bob = new Employee('Bob', 'Builder');
var joe = new Customer('Joe');
var rg = new Employee('Red Green', 'Handyman');
var mike = new Customer('Mike');
var mime = new Mime('Mime');
bob.greet();
joe.greet();
rg.greet();
mike.greet();
mime.greet();

输出：

Hi, I'm Bob, the Builder
Hi, I'm Joe
Hi, I'm Red Green, the Handyman
Hi, I'm Mike

方便理解参考文档
http://www.jb51.net/article/40964.htm
http://www.jb51.net/article/11199.htm

h5笔记备忘2