html5

在H5中，所有以data- 开头自定义属性，都会被包装到一个dataset对象中，dataset也是元素一个属性
<div id="box" data-id="3" data-age="18" data-my-name="ls"><div>

console.log(div.dataset)     =====打印的是一个对象{id:3,age:18,myName:"ls"}

autofocus  自动聚焦         

autocomplete   自动完成，默认值为：on  ,,为off  关闭自动提示功能

 

 

# HTML5 基础

## HTML5 的发展(了解)

    1-HTML  的历史：
        1993 年 HTML 首次以因特网草案的形式发布，然后经历了 2.0、3.2 和 4.0，直到 1999 年的 HTML 4.01 版本稳定下来。 后来逐渐被更加严格的 XHTML 取代。

    2-XHTML 的兴衰史：
        自从 HTML 4.01 版本之后，掌握着 HTML 规范的万维网联网（W3C）组织没有再发布新的标准，而是围绕着 XHTML 1.0 以及之后的 XHTML 2.0 展开工作。XHTML 是基于 XML 、致力于实现更加严格并且统一的编码规范的 HTML 版本，解决之前的 HTML 4.01 版本时，由于编码不规范导致浏览器的各种古怪行为。对于开发者来说，XHTML 极大的好处，就是强迫开发者养成良好的编码习惯，放弃 HTML 的凌乱写法，最终降低了浏览器解析页面的难度，方便移植到更多平台。
        但是XHTML 带来的确实毁灭性的灾难，XHTML 2.0 规范了更严格的错误处理规则，强制要求浏览器拒绝无效的 XHTML 2 页面，强制 Web 开发者写出绝对正确规范的代码，同时不得向下兼容，这将意味着，之前已经写好的数亿的页面将无法兼容，并且Web开发者的难度又被加大，最终被抛弃了哦！

    3-HTML 5 的到来：
        2008 年 W3C 发布了 HTML 5 的工作草案，2009 年停止了 XHTML 2 计划。随着时间推移，HTML 5 规范进一步解决了诸多非常实际的问题，各大浏览器厂商开始对旗下的产品进行升级，以便支持 HTML 5 。HTML 5 规范得到了持续的进步和完善，从而迅速融入到 Web 平台的实质性改进中。
        和 XHTML 2.0 不同，制定 HTML 5 规范的并不想挑出以往 HTML 的各种毛病为其改正，而是尽可能的补全 Web 开发者急需的各种功能。这些功能包括更强大的 CSS3、表单验证、音频视频、本地存储、地理定位、绘画（Canvas）、Web 通信等等。

## HTML5 的概念

​ **狭义概念**： 是 html4 的升级版,新增了标签，对标签进行了优化。

​ **广义概念**：HTML5 代表浏览器端技术的一个发展阶段。在这个阶段，浏览器呈现技术得到了一个飞跃发展和广泛支持，它包括：HTML5，CSS3，Javascript，API 在内的一套技术组合。

## **语法规范**

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

​ 1、更简洁

​ 2、更宽松

​ 单标签不用写关闭符号
​ 双标签省略结束标签

html、head、body、tbody 可以完全省略

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

## 新增语义标签及兼容

```html
<header>
    表示页眉
    <footer>
        表示页脚
        <section>
            表示区块
            <article>
                表示文章 如文章、评论、帖子、博客
                <aside>
                    表示侧边栏 如文章的侧栏 本质上新语义标签与
                    <div>、<span>没有区别，只是其具有表意性</span></div>
                </aside>
            </article>
        </section>
    </footer>
</header>
```

H5 的相关知识在 IE9 以下浏览器普遍存在兼容问题：

​ 对于 html5 的语义标签的兼容问题，可以通过引入 htmlshiv.min.js 来解决；

```html
<!-- 为了解决ie9以下的浏览器不支持语义标签-->
<!-- 条件注释 ：满足条件则引入问题 如果不满足就是一个普通的注释 只有ie能够识别 -->
<!--
        less  小于
        equal 等于
        great 大于
        than  比较
    -->

<!--[if lt IE 9]>
    <script src="html5shiv.min.js"></script>
<![endif]-->
```

## 表单

![](.\img\form.png)

表单类型

| 类型         | 使用示例                | 含义                 |
| ------------ | ----------------------- | -------------------- |
| **email**    | <input type="email">    | 输入邮箱格式         |
| **tel**      | <input type="tel">      | 输入手机号码格式     |
| **url**      | <input type="url">      | 输入 url 格式        |
| **number**   | <input type="number">   | 输入数字格式         |
| **search**   | <input type="search">   | 搜索框（体现语义化） |
| **range**    | <input type="range">    | 自由拖动滑块         |
| **color**    | <input type="color">    | 拾色器               |
| **time**     | <input type="time">     | 时间                 |
| **date**     | <input type="date">     | 日期                 |
| **datetime** | <input type="datetime"> | 日期时间             |
| **month**    | <input type="month">    | 月份                 |
| **week**     | <input type="week">     | 周                   |

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

表单属性：

| **属性**         | **用法**                                       | **含义**     |
| ---------------- | ---------------------------------------------- | ------------ |
| **placeholder**  | <input type="text" placeholder="请输入用户名"> | 占位符       |
| **autofocus**    | <input type="text" autofocus>                  | 自动获得焦点 |
| **multiple**     | <input type="file" multiple>                   | 多文件上传   |
| **autocomplete** | <input type="text" autocomplete="off">         | 自动完成     |
| **required**     | <input type="text" required>                   | 必填项       |

## DOM 扩展

### 获取元素的新方法

```javascript
//通过css选择器获取元素，返回符合要求的第一个元素,注意返回结果是对象
document.querySelector(“css选择器”)

//通过css选择器获取元素，返回伪数组
document.querySelectorAll(“css选择器”)
```

### 类名操作

```javascript
//添加类
node.classList.add(“classname”);
//移除类
node.classList.remove(“classname”);
//切换类
node.classList.toggle(“classname”);
//判断是否包含指定的类
node.classList.contains(“classname”);
```

注意：H5 新增的 API，IE8 以下的浏览器有兼容问题。

###自定义属性

​ 在 HTML5 中我们可以自定义属性，其格式如下 data-\*=""，例如 data-info="自定义属性"，

通过 Node.dataset['info'] 我们便可以获取到自定义的属性值。

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

```html
<div data-name="zs"></div>
<script>
    //获取data-name属性的值
    var divName = document.querySelector('div').dataset['name'];
</script>
```

# CSS3

​ 如同人类的的进化一样，CSS3 是 CSS2 的“进化”版本，在 CSS2 基础上，增强或新增了许多特性， 弥补了 CSS2 的众多不足之处，使得 Web 开发变得更为高效和便捷。

### CSS3 的现状

1、浏览器支持程度比较好，需要添加私有前缀

2、移动端支持优于 PC 端

### **如何对待**

1、遵循 渐进增强 原则

渐进增强： 让低版本浏览器 可以使用最基本的功能，高版本的浏览器具有更好的用户体验

2、考虑用户群体

3、遵照产品的方案

4、听 Boss 的

# 选择器

### 关系选择器

![](img/s1.png)

### 属性选择器

![](img/s2.png)

```
^ 开始  $ 结束 * 包含
属性选择器   属性  []
div[title] 选中页面中带有title属性的div
div[title="aa"] 选中页面中带有title属性的div,并且title属性取值为aa

div[title^="aa"] 选中页面中带有title属性的div,并且title属性取值以aa开始
div[title$="aa"] 选中页面中带有title属性的div,并且title属性取值以aa结尾
div[title*="aa"] 选中页面中带有title属性的div,并且title属性取值包含aa
```

### 伪类选择器

![](img/s3.png)

```
/*结构 伪类选择器   符号：一个冒号
  :hover  :active   可以一种状态
  结构伪类 通过结构进行筛选的一种伪类
  li:first-child:选中li的父盒子下面的第一个子盒子
  li:last-child:选中li的父盒子下面的最后一个子盒子
  li:nth-child(n):选中li的父盒子下面的第n个子盒子
  li:nth-last-child(n): 从后向前选中第n个子元素
  n 是从0开始正整数 0,1,2,3,4,5....  n小于1是无效的

  偶数： 2n  even   奇数：2n+1 2n-1  odd
  -n+5 选中前5个
*/
```

### 其他选择器

```
:focus    查找获取到焦点的文本框
:checked 获得选中的checkbox
:disabled 获得不可用的框
:enabled 获得可用的框
:not(selector)选择不匹配selector的那些元素
:target  获取当前活跃的锚点链接
```

### 伪元素选择器

```
E::before  E::after
注意事项：
//1.    必须指定content属性，可以在content属性中写入文本内容，但是通常为空字符串。
//2.    默认是行内元素，无法设置宽高，需要指定display:block或者position:absolute
E::before :在元素子节点的最前面添加一个内容。
E::after  :在元素子节点的最后面添加一个内容。

E::first-line 选中第一行
E::first-letter 选中第一个字
E::selection 被选中的区域
```

# 盒子模型(box-sizing)

> CSS3 中可以通过 box-sizing 来指定盒子模型，即可指定为 content-box、border-box，这样我们计算盒子大小的方式就发生了改变。

可以分成两种情况：

1、box-sizing: border-box   盒子大小为 width

2、box-sizing: content-box   盒子大小为 width + padding + border

![](img/box.png)

# 背景

> 在 css2 中已经有 background 属性了，用于设置盒子的背景相关的一些样式，在 CSS3 中新增加了几个背景相关的几个属性。

## background-size

> 用户设置背景图片的尺寸大小

```javascript
//注意：这两种设置方式会导致图片失真。
/*background-size:设置背景图片的大小*/
background-size: 600px 400px;

/* 百分比是相对于盒子自身的宽度和高度 */
background-size: 100% 100%;
```

不失真的设置方式（等比例缩放）

```javascript
/*containe保证等比例缩放,但是会出现留白*/
background-size: contain;

/*cover保证等比例缩放,并且不会留白，但是出现有一部分图片不显示*/
background-size: cover;
```

## background-clip(了解)

> 设置背景区域的大小

```javascript
/*盒子的背景区域是整个盒子，包括边框和padding*/
/*默认值，设置背景区域包括了边框*/
background-clip: border-box;

/*背景区域只包含padding和content*/
background-clip: padding-box;

/*背景区域只包含content*/
background-clip: content-box;
```

## background-origin(了解)

> 设置背景图片的原点的位置，默认是 padding 的地方开始

```javascript
background-image: url(images/bg.jpg);
/*设置原点从border开始*/
background-origin: border-box;

/*设置原点从padding开始,默认值*/
background-origin: padding-box;

/*设置原点从content开始*/
background-origin: content-box;
```

## 多重背景

> background 设置背景的时候，可以设置多个背景图片，使用逗号隔开。注意颜色只能设置一次，并且通常来说，颜色都是在最后面进行设置。
>
> background 是一个合写的属性，如果在 background 之前设置了 background 相关的样式，会被覆盖掉。

```css
background: url(images/mn1.jpg) no-repeat top left, url('images/mn2.jpg') no-repeat right bottom, pink;
```

# 渐变

## 线性渐变

> linear-gradient 指沿着某条直线朝一个方向产生的渐变效果。

![](img/line.png)

```javascript
//注意：渐变实际上相当与一张图片，因为需要加给background-image才会生效
//渐变的两个要求：有区间，有颜色变化。
//最简单的渐变
background-image: linear-gradient(red, green);
//设定渐变的方向
background-image: linear-gradient(to right, red, green);
//也可以设定渐变的角度
background-image: linear-gradient(45deg, red, green);
//设定渐变的范围
background-image: linear-gradient(to right, red 20%, green 80%)
//每一个区间表示渐变颜色的范围
background-image: linear-gradient(to right, red 20%, green 20%)
```

渐变方向：

![](img/fx.png)

## 径向渐变

> radial-gradient 指从一个中心点开始沿着四周产生渐变效果

![](img/radius.png)

```javasript
/*1. 最简单的渐变*/
background-image: radial-gradient(red, green);

/*2. 指定圆的半径和圆心*/
background-image: radial-gradient(200px at center, red, green);

/*3. 指定椭圆*/
background-image: radial-gradient(200px 80px at center, red, green);

/*4. 指定范围*/
background-image: radial-gradient(200px at center, green 50%, red 50%);
```

## 圆角

border-radius     每个角可以设置两个值 ，x 值，y 值

圆角处理时，脑中要形成圆、圆心、横轴、纵轴的概念，正圆是椭圆的一种特殊情况。如下图

可分别设置长、短半径，以“/”进行分隔，遵循“1，2，3，4”规则，“/”前面的 1~4 个用来设置横轴半径（分别对应横轴 1、2、3、4 位置 ），“/”后面 1~4 个参数用来设置纵轴半径（分别对应纵轴 1、2、3、4 位置 ）

![img](img/bd.jpg)

# 阴影

###盒子阴影：

    box-shadow :阴影的水平位移  垂直位移 模糊程度 阴影大小 阴影颜色 inset（内阴影）
      默认是外阴影

### 文字阴影：

    text-shadow :阴影的水平位移  垂直位移 模糊程度 阴影颜色

# 颜色

​ 新增了 RGBA、HSLA 模式，其中的 A  表示透明度通道，即可以设置颜色值的透明度，相较 opacity，它们不具有继承性，即不会影响子元素的透明度。

​ RGBA: Red、Green、Blue、Alpha

​ HLSA: Hue、Saturation、Lightness、Alpha

​ H 色调   取值范围 0~360，0/360 表示红色、120 表示绿色、240 表示蓝色

​ S 饱和度   取值范围 0%~100%

​ L 亮度   取值范围 0%~100%

​ A 透明度   取值范围 0~1

![](img/sepan.jpg)

# 过渡

> transition：过渡是 CSS3 中具有颠覆性的特征之一，可以实现元素不同状态间的平滑过渡（补间动画），经常用来制作动画效果。

关于补间动画与帧动画

-   帧动画：通过一帧一帧的画面按照固定顺序和速度播放。比如电影胶片
-   补间动画：补间动画只需要起始状态和终止状态，浏览器会自动完成中间的过渡。[http://mux.alimama.com/posts/1009](http://mu x.alimama.com/posts/1009)

## 过渡的属性

```javascript
//transition-property：设置过渡属性
//也可以是width,height
transition-property:all;

//transition-duration:设置过渡时间
transition-duration:1s;/*过渡的时间*/

//transition-delay：设置过渡延时
transition-delay:2s;/*2秒之后才进行动画*/

//transition-timing-function:设置过渡的速度
//linear，ease，ease-in，ease-out，ease-in-out， steps(10)
transition-timing-function:linear;

```

【演示】

## 属性合写

```javascript
/*属性 时间 延时 速度*/
transition: width 1s 3s linear, height 3s 1s ease;
```

过渡的注意点：

-   过渡必须要有两个状态的变化。
-   过渡可以写在 A 状态，也可以写在 B 状态，但是如果写在 B 状态，那么回来的时候，就没有过渡效果了。

# 2D 转换

> transform: 转换，是 CSS3 最具颠覆性的几个特性之一，既可以用于 2D 转换，也可以用于 3D 转换。
>
> transform：2D 转换，元素在平面上实现移动、旋转、缩放、斜切等操作

## scale 缩放

```javascript
transform: scaleX(0.5); //让宽度变化
transform: scaleY(0.5); //让高度变化，注意不能写多个transform，不然会覆盖。
transform: scale(0.5); //让宽度和高度同时变化
```

注意：

-   scale 接收的值是倍数，因此没有单位
-   scale 可以是一个值，如果是一个值，不是说仅仅缩放宽度，高度也会等比例的缩放。
-   可以通过 transform-origin 设定旋转原点

## translate 平移

```javascript
transform: translateX(100px);
transform: translateY(100px);
transform: translate(100px, 100px);
transform: translate(50%, 50%);
```

注意：

-   translate 的值可以是 px，也可以是百分比，如果是百分比，那么参照的是自身的宽高。
-   translate 移动的元素并不会影响其他盒子，类似于相对定位。

## rotate 旋转

```javascript
transform: rotate(360deg);//旋转360度
transform: rotate(-360deg);//逆时针旋转360度
```

注意：

-   单位是 deg，角度，不是 px
-   正值顺时针转，负值逆时针转
-   可以通过 transform-origin 设定旋转原点
-   转换原点写在 A 状态，不能写在 B 状态

![](img/rotate.png)

## skew 斜切

> skew 在实际开发中，是用的最少的一个属性。一般来说，x 和 y 只会倾斜其中的一个

```javascript
/*在水平方向倾斜30deg*/
transform: skewX(30deg);

/*在垂直方向倾斜30deg*/
transform: skewY(30deg);
```

![](img/skew.png)

## transform-origin 转换原点

> 通过 transform-origin 可以设置转换的中心原点。

```javascript
transform-origin: center center;
transform-origin: 40px 40px;
```

【案例：03-transform-origin 设置转换原点.html】

## 转换合写问题

```javascript
transform:translateX(800px) scale(1.5) rotate(360deg) ;
//1. transform属性只能写一个，如果写了多个会覆盖
//2. transform属性可以连写，但是顺序对效果影响的，因为它会在第一个效果的基础上执行第二个效果，然后执行第三个效果（通常会把rotate放后面）
//3. 如果对transform进行过度效果的时候，初始状态和结束状态一一对应
```

# 3D 转换

> transform:不仅可以 2D 转换，还可以进行 3D 转换。

思考：2D 与 3D 的区别？

## 坐标轴

> 用 X、Y、Z 分别表示空间的 3 个维度，三条轴互相垂直。**_注意+Y 是向下的。_**

![](img/xyz.png)

## rotate 旋转

```javascript
transform: rotate(45deg);// 让元素在平面2D中旋转
transform: rotateX(45deg);// 让元素沿着X轴转45度
transform: rotateY(45deg);// 让元素沿着Y轴转45度
transform: rotateZ(45deg);// 让元素沿着Z轴转45度
```

问题：看不出来怎么转的，为什么现实生活中能够看出来？

## translate 平移

```javascript
/*沿着X轴的正方向移动45px*/
transform: translateX(45px);
/*沿着Y轴的正方向移动45px*/
transform: translateY(45px);
/*沿着Y轴的正方向移动45px*/
transform: translateZ(45px);
```

## perspective 透视

> 电脑显示屏是一个 2D 的平面，因为我们看不出来旋转的方向，通过 perspective 属性，可以定义 3D 元素距视图的距离，单位是 px。
>
> 说白了，设置了 perspective 属性后，就有了进大远小的效果了，在视觉上，让我们能看出来 3d 的效果。

![](img/toushi.jpg)

> 注意：当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。

```javascript
perspective：500px;
```

关于近大远小

![](img/per.png)2

透视本质上设置的是用户的眼睛和屏幕的距离；

对于我们眼睛来说，离我们越近的房子，我们会感觉到这个房子越大，离我们越远的房子，就会感觉越小，其实房子的大小都是一样的，只是在视觉上的一种不同。

## ransform-style

> transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素。注意这个属性只能给父元素添加。

```javascript
flat:默认值，2d显示
preserve-3d: 3d显示
```

transform-style 与 perspective 的区别

```javascript
/*透视：透视只是相当于设置了一个距离，辅助我们查看3D效果的工具，*/
/*preserve-3d:给父盒子添加，让子元素保留3D的位置，说白了，只有设置了preserve-3d，这个元素才能被称之为3d元素。 */

//一个3d元素可以没有perspective，但是不能没有transform-style
```

![](img/preserve.png)

立方体：

![](img/three.png)

**注意：** 3D 变换中旋转 ，对着正方向去看，正值都是顺时针 负值是逆时针

## backface-visibility

```javascript
//指定元素背面面向用户时是否可见。
//visible： 指定元素背面可见，允许显示正面的镜像。
//hidden： 指定元素背面不可见

//注意：只有在3d的情况下，backface-visibility才会生效
```

# 动画

> 动画也是 CSS3 中具有颠覆性的特征之一，可以通过设置多个节点来精确控制一个或者一组动画，常用来实现复杂的动画效果。

动画与过渡的区别：

    1. 过渡必须触发，需要两个状态的改变。
    2. 动画可以一直运行下去，不需要触发。实现效果与过渡差不多

【01-动画初体验.html】
使用一个动画的基本步骤：

```javascript
//1.通过@keyframes指定动画序列
//2.通过百分比或者from/to将动画分割成多个节点
//3.在各个节点中分别定义动画属性
//4.通过animation将动画应用于相应的元素
```

【02-keyframes 详解.html】

## animation 详解

> animation 是一个复合属性，一共有 8 个参数

```javascript
animation-name:动画名称，由@keyframes定义的
animation-duration：动画的持续时间
animation-timing-function：动画的过渡类型
animation-delay：动画的延迟时间
animation-iteration-count：动画的循环次数
animation-direction：设置动画在循环中是否反向运动
animation-fill-mode：设置动画时间之外的状态
animattion-play-state:设置动画的状态。
```

## 动画库的使用

[https://isux.tencent.com/css3/index.html](https://isux.tencent.com/css3/index.html)

[https://daneden.github.io/animate.css/](https://daneden.github.io/animate.css/)

# web 字体

开发人员可以为自已的网页指定特殊的字体，无需考虑用户电脑上是否安装了此特殊字体，从此把特殊字体处理成图片的时代便成为了过去。

支持程度比较好，甚至 IE 低版本浏览器也能支持。

## web 字体（了解）

阿里妈妈：http://iconfont.cn/webfont/#!/webfont/index
有字库：http://www.youziku.com/

1. 第一步：使用 font-face 声明字体 2.第二步：定义使用 webfont 的样式 3.第三步：为文字加上对应的样式 4.在 CSS3 中，可以通过@font-face 定义新的字体。

## 字体图标（重点）

我们经常把网页常用的一些小的图标，做成精灵图，然后通过 background-position 去调整位置，但是这个需要引入图片，并且图片大小改变之后如果失真。在 CSS3 中可以使用字体图片，即使用图标跟使用文字一样。
优点：
1、将所有图标打包成字体库，减少请求；
2、具有矢量性，可保证清晰度；
3、使用灵活，便于维护；
Font Awesome 使用
http://fontawesome.dashgame.com/
阿里巴巴矢量图标：（可以自己定制）
http://www.iconfont.cn/plus/collections/index?type=1



# 切割轮播图

```javascript
//transitionend:过渡完成事件
```

# 弹性布局(伸缩布局)

> 布局：其实就是调整元素在水平和垂直方向上的布局方式。

CSS3 在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大的作用。

【演示：01-伸缩布局初体验.html】

当给一个盒子设置了 display：flex 之后，这个盒子就有了**_主轴_** 和**_侧轴_** 的概念。
主轴：Flex 容器的主轴主要用来配置 Flex 项目，默认是水平方向
侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向的
方向：默认**_主轴从左向右_** ，默认**_侧轴从上到下_**

> 主轴和侧轴并不是固定不变的，通过 flex-direction 可以互换。

![](img/flex.png)

## flex-direction

> flex-diretion 主要是用来调整主轴的方向的，默认是水平方向
>
> 了解即可，一般来说，很少调整主轴的方向。

可选值

```javascript
row：主轴方向为水平向右
column：主轴方向为竖直向下
row-reverse:主轴方向为水平向左
column-reverse:主轴方向是竖直向上。
```

## justify-content(重点)

> justify-content 主要用来设置**_主轴方向的对齐方式_** ，可选的值有：

可选值：

```javascript
flex-start: 弹性盒子元素将向起始位置对齐
flex-end: 弹性盒子元素将向结束位置对齐。
center: 弹性盒子元素将向行中间位置对齐
space-around: 弹性盒子元素会平均地分布在行里
space-between:第一个贴左边，最后一个贴右边，其他盒子均分，保证每个盒子之间的空隙是相等的。
```

## align-items(重点)

> align-items 用于调整**_侧轴的对其方式_** ，可选的值有：

```javascript
flex-start： 元素在侧轴的起始位置对其。
flex-end： 元素在侧轴的结束位置对其。
center： 元素在侧轴上居中对其。
stretch： 元素的高度会被拉伸到最大（不能给死高度）。
```

## flex-wrap

> flex-wrap 属性控制 flex 容器是单行或者多行,默认不换行

```javascript
nowrap： 不换行（默认），会压缩子盒子的宽度。
wrap： 当宽度不够的时候，会换行。
```

## align-content

> align-content 用来设置多行的 flex 容器的排列方式。

```javascript
flex-start： 各行向侧轴的起始位置堆叠。
flex-end： 各行向弹性盒容器的结束位置堆叠。
center： 各行向弹性盒容器的中间位置堆叠。
space-between： 各行在侧轴中平均分布。
space-around： 第一行贴上边，最后一个行贴下边,其他行在弹性盒容器中平均分布。
stretch：拉伸，不设置高度的情况下。
```

align-items 与 align-content 的区别

```javascript
align-items调整的是侧轴的对其方式，不换行一般用align-items
align-content:必须是多行才生效，如果单行，没有效果。换行了就用align-content。
```

## flex 属性

> **_上述讲的属性都是给父盒子设置的，接下来的几个属性是给子盒子设置的。_**
>
> flex 属性用来设置子盒子如何分配空间

```javascript
flex: 1;
```

## order 属性

> order 属性定义项目的排列顺序。数值越小，排列越靠前，默认为 0。

```javascript
order: 1;
```

阮一峰的博客[http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html](http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html)

# 携程旅行网

> flex 布局的应用。

# 360 浏览器

## fullpage 的使用

> fullPage.js 是一个基于 jQuery 的插件，它能够很方便、很轻松的制作出全屏网站。

参考文档 [http://www.dowebok.com/77.html](http://www.dowebok.com/77.html)

下载地址 [https://github.com/alvarotrigo/fullPage.js](http://www.dowebok.com/77.html)

### 基本使用

1. 引入 jQuery 文件，因为 fullpage 是 jquery 插件
2. 引入 fullpage 的 js 文件，**_不要引入 fullpage 的 css 文件，不然容易样式冲突。_**
3. 页面结构
4. 编写 js 代码

```html
<!-- 页面结构 -->
<div id="box">
    <!--每一个class为section的div都是一屏,section这个类是固定的-->
    <div class="section">我是内容1</div>
    <div class="section">我是内容2</div>
    <div class="section">我是内容3</div>
    <div class="section">我是内容4</div>
</div>
```

```javascript
//编写js代码
$(function() {
    $('#box').fullpage();
});
//背景颜色
//['#0da5d6', '#2AB561', '#DE8910', '#16BA9D', '#0DA5D6']
```

### 鼠标滚动事件(了解)

```javascript
<script>
    window.onload = function(){
        var count = 0;
        document.onmousewheel = function(e){
            /*鼠标滚动的量 下滚是负 上滚是正*/
            if(e.wheelDelta < 0){
                count ++;
            }else{
                count --;
            }
            console.log(count);
        }
    }
</script>
```

### 常用参数

| 属性名称                 | 描述                                                                                                                                                      |
| ------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **_sectionsColor_**      | 设置每一个 section 的背景颜色                                                                                                                             |
| controlArrows            | 定义是否使用箭头来控制幻灯片，默认 true                                                                                                                   |
| verticalCentered         | 设定每一个 section 的内容是否垂直居中，默认 true，                                                                                                        |
| resize                   | 设定字体是否随着窗口缩放而缩放，默认 false，一般不修改                                                                                                    |
| **_scrollingSpeed_**     | 设置滚动的速度，默认 700 毫秒                                                                                                                             |
| easing                   | 设置动画的方式，默认是 easeInOutCubic,如果想要修改此页，需要引入 jquery.easing.js                                                                         |
| css3                     | 是否使用 css3 transform 来实现滚动效果，默认 true，不用修改，CSS3 的动画效率比较 js 高。                                                                  |
| loopTop                  | 滚动到顶部后是否连续滚动到底部，默认 false                                                                                                                |
| loopBottom               | 滚动到底部后是否连续滚动到顶部，默认 false                                                                                                                |
| loopHorizontal           | 设置幻灯片是否循环滚动，默认 true                                                                                                                         |
| **_continuousVertical_** | 是否循环滚动，默认为 false，如果设置为 true，则页面会循环滚动，不会出现 loopTop 与 loopBottom 那样的跳动。                                                |
| autoScrolling            | 是否使用插件的滚动方式，默认 true，如果选择 false，会出现浏览器子代的滚动条，将不会按页滚动，按照滚动进行滚动。                                           |
| scrollBar                | 是否包含滚动条，默认 false，如果设置为 true，那么浏览器自定的滚动条会出现，这个时候，页面滚动还是按页滚动，但是浏览器也能滚动。不建议开启，不然会不同步。 |
| paddingTop/paddingBottom | 给每一个 section 设置一个 paddingTop 或者 paddingBottom,默认值为 0，如果需要给页面设置一个固定定位的头部菜单或者底部菜单的时候，可以使用这两个选项。      |
| keyboardScrolling        | 是否可以使用键盘方向键导航，默认 true                                                                                                                     |
| **_navigation_**         | 是否显示导航，默认为 false，设置为 true，会显示小圆点，作为导航                                                                                           |
| navigationPositon        | 导航小圆点的位置，设置 left 或者 right，默认是 right                                                                                                      |
| navigationTooltips       | 小圆点的提示信息，鼠标一上去能看到提示信息                                                                                                                |
| showActiveTooltip        | 是否显示当前页面的导航的 tooltip 信息，默认是 false                                                                                                       |
| slidesNavigation         | 是否显示横向幻灯片的导航，默认为 false                                                                                                                    |
| slidesNavPosition        | 设置横向幻灯片的位置，top 或者 bottom，默认 bottom                                                                                                        |
| sectionSelector          | section 的选择器，默认是.section                                                                                                                          |
| slideSelector            | slide 的选择器，默认是.slide                                                                                                                              |

### 常用回调函数

| 方法名                                                            | 描述                                                                                                                                                                                            |
| ----------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| afterLoad(anchorLink, index)                                      | 滚动到某一个 section,当滚动结束后，会触发一次这个回调函数，anchorLink 是锚链接的名称，index 从 1 开始计算                                                                                       |
| onLeave(index,nextIndex,diretion)                                 | 当我们离开一个 section 时，会触发这个函数，index 是离开的页面的序号，从 1 开始计算。 nextIndex 是滚动到的页面的序号，direction 是往上还是往下滚动，值是 up 或者 down. return false 可以取消滚动 |
| afterResize()                                                     | 窗口大小发生改变后会触发的回调函数                                                                                                                                                              |
| afterSlideLoad(anchor,index, slideAnchor,slideIndex)              | 页面滚动到某一个幻灯片的时候会触发这个回调函数                                                                                                                                                  |
| afterSlideLeave(anchor,index,slideIndex, diretion,nextSlideIndex) | 当离开某一个幻灯片的时候会触发一次这个回调函数。                                                                                                                                                |

#HTML5-API

# 网络状态

> 在移动端，我们经常需要检测设置是在线还是离线，HTML5 为此定义了一个 navigator.onLine 属性，这个属性用于检测设备是否联网。**_navigator.onLine_** 在不同浏览器中有细微的差别。

## 网络状态

【01.网络状态.html】

```javascript
navigator.onLine返回用户当前的网络状况，是一个布尔值
1. 如果浏览器连不上网(包括局域网)，就是离线状态，也就是脱机状态，会返回false
2. 否则就是在线状态，返回true
```

**_注意：返回 true 不一定就是说一定能访问互联网，因为有可能连接的是局域网。但是返回 false 则表示一定连不上网。_**

## 监听网络变化

【02-判断网络状态.html】

> 为了更好的确定网络是否连接，HTML5 还定义了两个事件，用于监听网络状态的变化。

```javascript
//网络连接时会被调用
window.addEventListener('online', function() {
    alert('online');
});
//网络断开时会被调用
window.addEventListener('offline', function() {
    alert('offline');
});
```

# 地理位置

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

## 隐私

HTML5 规范提供了一套保护用户隐私的机制。必须先得到用户明确许可，才能获取用户的位置信息。**_在获取地理位置之前，会询问用户，只有在获得许可之后，才能获取到用户的位置信息。_**

## 相关的方法

【03-获取地理位置.html】

```javascript
//successCallback:获取成功后会调用,并返回一个position对象，里面包含了地理位置信息
//获取失败了会调用，并返回error对象，里面包含了错误信息。
//获取当前的地理位置信息
navigator.geolocation.getCurrentPosition(successCallback, errorCallback);
//重复的获取当前的地理位置信息
navigator.geolocation.watchPosition(successCallback, errorCallback);
```

实例：

```javascript
navigator.geolocation.getCurrentPosition(
    function(position) {
        // 定位成功会调用该方法
        // position.coords.latitude 纬度
        // position.coords.longitude 经度
        // position.coords.accuracy 精度
        // position.coords.altitude 海拔高度
    },
    function(error) {
        // 定位失败会调用该方法
        // error 是错误信息
    }
);
```

**_在 iOS 10 中，苹果对 webkit 定位权限进行了修改，所有定位请求的页面必须是 https 协议的。_**

## 百度地图

> 仅仅获取到经纬度对于用户来说意义并不大，因为用户也不知道经度和纬度表示的是地球上的哪一个地方，因为我们可以结合百度地图，准确的将用户的位置显示出来。

百度地图官网：[http://lbsyun.baidu.com/](http://lbsyun.baidu.com/)

```javascript
1. 在开发中，找到javascript API
2. 直接查看示例demo
3. 复制相应的代码，替换掉秘钥就行，秘钥只需创建一个新的应用就可以了。
```

# web 存储

> 在代码执行的时候，数据都是存储在内存中的，当页面关闭或者浏览器关闭的时候，内存就被释放掉了。数据只有存储在硬盘上，才不会被释放。

【01-web 存储初体验.html】

```javascript
//存储在内存中，会被释放
var str = 'hello world';
console.log(str);

//存储在硬盘上，不会被释放
localStorage.setItem('name', '张三');
console.log(localStorage.getItem('name'));
```

## cookie(了解)

> 传统方式，我们以 document.cookie 进行存储，但是存储起来特别麻烦，并且，存储大小只有 4k，常用来做自动登录，即存储用户的账号和密码信息。每次请求都会带上 cookie

【02-cookie 存储.html】
cookie 是以字符串形式存在的，这个字符串有固定的格式：key=value;key1=value1;

在获取 cookie 内容时，一般需要通过正则或者字符串的方法进行处理，转换成对象，最终得到数据。

```javascript
document.cookie = 'name=zhangsan';
document.cookie = 'age=18';
document.cookie = 'sex=23';

//读取cookie
var result = document.cookie;
console.log(result);
```

使用原生 js 操作 cookie 太过麻烦，尤其是 cookie 的获取和删除操作，使用 jquery.cookie 插件，能够简化我们的操作。

【03-cookie 存储（jquery 插件）.html】

```javascript
//设置cookie
$.cookie('name', 'zs');
//获取cookie
console.log($.cookie('name'));
//删除cookie
$.removeCookie('name');
```

**使用 cookie：操作太麻烦，最多只能存储 4k ,每次请求都会带上 cookie，所以用户名和密码、还有 sessionID 会存储在 cookie 中**

## sessionStorage 与 localStorage

> HTML5 规范提出了解决方案，使用 sessionStorage 和 localStorage 存储数据。设置、读取、删除操作很方便

window.sessionStorage 的特点

```javascript
1. 声明周期为关闭浏览器窗口
2. 不能在多个窗口下共享数据。
3. 大小为5M
```

window.localStorage 的特点

```javascript
1. 永久生效，除非手动删除
2. 可以多个窗口共享
3. 大小为20M
```

window.sessionStorage 与 window.localStorage 的方法

```javascript
setItem(key, value); //设置存储内容
getItem(key); //读取存储内容
removeItem(key); //删除键值为key的存储内容
clear(); //清空所有存储内容
key(n); //以索引值来获取存储内容
```

【04-sessionStorage 与 localStorage 的用法.html】

【05-案例-换肤效果.html】

**面试题：请描述一下 cookies，sessionStorage 和 localStorage 的区别？**

# 自定义播放器

全屏切换 API：

```javascript
video.requestFullScreen();
```

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

```javascript
currentTime:当前时间
duration：总长时间
timeupdate:播放进度更改时触发
volume：控制音量
```

参考文档
http://www.w3school.com.cn/tags/html_ref_audio_video_dom.asp

**_主要目的是练习一下 video 的属性和方法，还有之前我们学过的 js_**

推荐网站：[https://www.awesomes.cn/](https://www.awesomes.cn/)

# 文件读取

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

## files

对于 file 类型的 input 框，在这个 DOM 对象中，存在一个 files 属性，这个属性是 FileList 对象，是一个伪数组，里面存储着上传的所有文件，当 input 框指定了 multiple 属性之后，就可以上传多个文件了。

也就是说，通过 files 这个属性，我们就可以获取到所有上传的文件。

## file 对象

File 对象中包含了文件的最后修改时间、文件名、文件类型等信息。

## FileReader 对象

FileReader 是一个 HTML5 新增的对象，用于读取文件。

```javascript
//创建一个fileReader对象
var fr = new FileReader();
//读取文件的两个方法
//readAsText() 以文本的方式读取文件 ,文本文件
//readAsDataURL() 以DataURL形式读取文件，图片，视频
//文件读取完成事件：
fr.onload = function() {};
//当文件读取完成，可以通过result属性获取结果
fr.result;
```

参考资料：
https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader#toc

案例：

```javascript
var file = document.getElementById('file');
var box = document.getElementById('box');

file.addEventListener('change', function() {
    console.dir(file);

    //files:里面存储了所有上传的文件
    //这个data就是我们上传的那个文件
    var data = file.files[0];

    //1. 创建一个文件读取器
    var fr = new FileReader();

    //2. 让文件读取器读取整个文件
    fr.readAsDataURL(data);

    //3. 等待文件读取完
    //onload：文件读取完成后，就会触发
    fr.onload = function() {
        var img = document.createElement('img');
        img.src = fr.result;
        box.innerHTML = '';
        box.appendChild(img);
    };
});
```

# 拖拽

在 HTML5 的规范中，我们可以通过为元素增加 draggable="true"来设置此元素是否可以进行拖拽操作，其中图片、链接默认是开启的。

## 拖拽元素

页面中设置了 draggable="true"属性的元素，其中`<img>`、`<a>`标签默认是可以被拖拽的

## 目标元素

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

## 事件监听

根据元素类型不同，需要设置不同的事件监听

```javascript
//1、拖拽元素
ondrag      应用于拖拽元素，整个拖拽过程都会调用
ondragstart 应用于拖拽元素，当拖拽开始时调用
ondragend   应用于拖拽元素，当拖拽结束时调用
//2、目标元素
ondragover  应用于目标元素，当停留在目标元素上时调用
ondrop      应用于目标元素，当在目标元素上松开鼠标时调用(浏览器默认不让拖拽，需要阻止的默认行为。)
```
posted @ 2020-03-23 05:07  爱唱歌的小胡子  阅读(231)  评论(0)  编辑  收藏  举报