diff --git a/08-HTML5和CSS3/07-CSS3属性详解：Web字体.md b/08-HTML5和CSS3/07-CSS3属性详解：Web字体.md index 239e4c0..3141fc0 100644 --- a/08-HTML5和CSS3/07-CSS3属性详解：Web字体.md +++ b/08-HTML5和CSS3/07-CSS3属性详解：Web字体.md @@ -4,7 +4,7 @@ ## 前言 -开发人员可以为自已的网页指定特殊的字体（将指定字体提前下载到站点中），无需考虑用户电脑上是否安装了此特殊字体。从此，把特殊字体处理成图片的方式便成为了过去。 +开发人员可以为自已的网页指定特殊的字体（将指定字体提前下载到站点中），无需考虑用户电脑上是否安装了此特殊字体。从此，把特殊字体处理成图片的方式便成为了过去。 支持程度比较好，甚至 IE 低版本的浏览器也能支持。 @@ -156,13 +156,13 @@ woff字体是Web字体中最佳格式，他是一个开放的TrueType/OpenType - [2018-02-20-WebFont举例.zip](http://download.csdn.net/download/smyhvae/10253565) -## 字体图标 +## 字体图标（阿里的 iconfont 网站举例） 我们其实可以把图片制作成字体。常见的做法是：把网页中一些小的图标，借助工具生成一个字体包，然后就可以像使用文字一样使用图标了。这样做的优点是： -- 将所有图标打包成字体库，减少请求； +- 将所有图标打包成字体库，减少请求； -- 具有矢量性，可保证清晰度； +- 具有矢量性，可保证清晰度； - 使用灵活，便于维护。 @@ -315,6 +315,7 @@ SVG素材： + ## 360浏览器网站案例 暂略。 @@ -326,11 +327,47 @@ SVG素材： - 相关说明:http://www.dowebok.com/77.html - - - - - +## 使用 Bootstrap 网站的图标字体 + +打开如下网站：。 + +20180223_2100.png + +如上图所示，下载字体后，进行解压： + +20180223_2105.png + +使用步骤如下： + +（1）如图只是想要字体的话，可以把`css`和`font`这两个文件夹拷贝到项目里。 + +（2）在html文档中的 标签里，引入 font-awesome.min.css 文件： + +```html + +``` + +（3）想在哪个标签里用这个图标，直接在这个标签里加className就行（className都在[网站](http://www.bootcss.com/p/font-awesome/)上列出来了）。 + + +完整版代码如下： + +```html + + + + + Title + + + + + 播放 + + +``` diff --git a/08-HTML5和CSS3/08-HTML5举例：简单的视频播放器.md b/08-HTML5和CSS3/08-HTML5举例：简单的视频播放器.md new file mode 100644 index 0000000..5ca25ac --- /dev/null +++ b/08-HTML5和CSS3/08-HTML5举例：简单的视频播放器.md @@ -0,0 +1,266 @@ + + +我们采用 Bootstrap 网站的图标字体，作为播放器的按钮图标。 + +index.html的代码如下： + +```html + + + + + + + + + + + +
+ +
视频案例
+
+ + +
+ + +
+ +
+
+ +
+ 00:00:00/00:00:00 +
+ + +
+ +
+
+ + + + +``` + + + + + +工程文件： + +- 2018-02-23-H5多媒体播放器.rar + + diff --git a/08-HTML5和CSS3/09-HTML5详解（二）.md b/08-HTML5和CSS3/09-HTML5详解（二）.md new file mode 100644 index 0000000..ed6f34d --- /dev/null +++ b/08-HTML5和CSS3/09-HTML5详解（二）.md @@ -0,0 +1,624 @@ + + +## 本文主要内容 + +- 拖拽 + +- 历史 + +- 地理位置 + +- 全屏 + +## 拖拽 + +20180223_2130.gif + +如上图所示，我们可以拖拽博客园网站里的图片和超链接。 + +在HTML5的规范中，我们可以通过为元素增加 `draggable="true"` 来设置此元素是否可以进行拖拽操作，其中图片、链接默认是开启拖拽的。 + +### 1、拖拽元素 + +页面中设置了 `draggable="true"` 属性的元素。 + +举例如下： + +```html + + + + + Title + + + + + +
+ + +``` + +效果如下： + +20180223_2140.gif + +上图中，我们给 box1 增加了`draggable="true"` 属性之后，发现 box1 是可以拖拽的。但是拖拽之后要做什么事情呢？这就涉及到**事件监听**。 + + +**拖拽元素的事件监听**：（应用于拖拽元素） + +- `ondragstart`当拖拽开始时调用 + +- `ondragleave` 当**鼠标离开拖拽元素时**调用 + +- `ondragend` 当拖拽结束时调用 + +- `ondrag` 整个拖拽过程都会调用 + + +代码演示： + +```html + + + + + + + + +
+ + + + +``` + + +效果如下： + +20180223_2201.gif + +打印结果： + +20180223_2213.png + + +### 2、目标元素 + +比如说，你想把元素A拖拽到元素B里，那么元素B就是目标元素。 + +页面中任何一个元素都可以成为目标元素。 + +**目标元素的事件监听**：（应用于目标元素） + +- `ondragenter` 当拖拽元素进入时调用 + +- `ondragover` 当拖拽元素停留在目标元素上时，就会连续一直触发（不管拖拽元素此时是移动还是不动的状态） + +- `ondrop` 当在目标元素上松开鼠标时调用 + +- `ondragleave` 当鼠标离开目标元素时调用 + + +代码演示： + +```html + + + + + + + + +
+
+ + + + +``` + + +效果演示： + +20180223_2240.gif + +注意，上方代码中，我们加了`event.preventDefault()`这个方法。如果没有这个方法，后面ondrop()方法无法触发。如下图所示： + +20180223_2245.gif + +如上图所示，连光标的形状都提示我们，无法在目标元素里继续操作了。 + +**总结**：如果想让拖拽元素在目标元素里做点事情，就必须要在 `ondragover()` 里加`event.preventDefault()`这一行代码。 + + +**案例：拖拽练习** + +完整版代码： + +```html + + + + + + + + +
+
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
+
+ + + + +``` + +效果如下： + +20180224_2050.gif + +## 历史 + +界面上的所有JS操作不会被浏览器记住，就无法回到之前的状态。 + +在HTML5中可以通过 `window.history` 操作访问历史状态，让一个页面可以有多个历史状态 + +`window.history`对象可以让我们管理历史记录，可用于单页面应用，Single Page Application，可以无刷新改变网页内容。 + +1. window.history.forward(); // 前进 +2. window.history.back(); // 后退 +3. window.history.go(); // 刷新 +4. 通过JS可以加入一个访问状态 +5. history.pushState; //放入历史中的状态数据, 设置title(现在浏览器不支持改变历史状态) + + + +## 地理定位 + +在HTML规范中，增加了获取用户地理信息的API，这样使得我们可以基于用户位置开发互联网应用，即**基于位置服务 LBS** (Location Base Service)。 + + + +### 获取地理信息的方式 + +#### 1、IP地址 + + +#### 2、三维坐标： + + +（1）**GPS**（Global Positioning System，全球定位系统）。 + +目前世界上在用或在建的第2代全球卫星导航系统（GNSS）有： + +- 1.美国 Global Positioning System （全球定位系统） 简称GPS； + +- 2.苏联/俄罗斯 GLOBAL NAVIGATION SATELLITE SYSTEM （全球卫星导航系统）简称GLONASS（格洛纳斯）； + +- 3.欧盟（欧洲是不准确的说法，包括中国在内的诸多国家也参与其中）Galileo satellite navigation system（伽利略卫星导航系统） 简称GALILEO（伽利略）； + +- 4.中国 BeiDou(COMPASS) Navigation Satellite System（北斗卫星导航系统）简称 BDS ； + +- 5.日本 Quasi-Zenith Satellite System （准天顶卫星系统） 简称QZSS ； + +- 6.印度 India Regional Navigation Satellite System（印度区域卫星导航系统）简称IRNSS。 + +以上6个系统中国都能使用。 + +（2）**Wi-Fi**定位：仅限于室内。 + +（3）**手机信号**定位：通过运营商的信号塔定位。 + + +### 3、用户自定义数据： + +对不同获取方式的优缺点进行了比较，浏览器会**自动以最优方式**去获取用户地理信息： + +20180224_2110.png + + +### 隐私 + +HTML5 Geolocation(地理位置定位) 规范提供了一套保护用户隐私的机制。必须先得到用户明确许可，才能获取用户的位置信息。 + + +### API详解 + +- navigator.getCurrentPosition(successCallback, errorCallback, options) 获取当前地理信息 + +- navigator.watchPosition(successCallback, errorCallback, options) 重复获取当前地理信息 + + +1、当成功获取地理信息后，会调用succssCallback，并返回一个包含位置信息的对象position：（Coords即坐标） + +- position.coords.latitude纬度 + +- position.coords.longitude经度 + + +2、当获取地理信息失败后，会调用errorCallback，并返回错误信息error。 + + +3、可选参数 options 对象可以调整位置信息数据收集方式 + + +地理位置的 api 代码演示： + +```html + + + + + + + + + + +``` + + +百度地图api举例： + +```html + + + + 普通地图&全景图 + + + + + + +
+ + + + +``` + +## 全屏 + +> HTML5规范允许用户自定义网页上**任一元素**全屏显示。 + +### 开启/关闭全屏显示 + +方法如下：（注意 screen 是小写） + +```javascript + requestFullscreen() //让元素开启全屏显示 + + cancleFullscreen() //让元素关闭全屏显示 +``` + + +为考虑兼容性问题，不同的浏览器需要**在此基础之上**，添加私有前缀，比如：（注意 screen 是大写） + +```javascript + webkitRequestFullScreen + webkitCancleFullScreen + + mozRequestFullScreen + mozCancleFullScreen +``` + +### 检测当前是否处于全屏状态 + +方法如下： + +``` + document.fullScreen +``` + + +不同浏览器需要加私有前缀，比如： + +```javascript + document.webkitIsFullScreen + + document.mozFullScreen +``` + + +### 全屏的伪类 + +- :full-screen .box {} + +- :-webkit-full-screen {} + +- :moz-full-screen {} + +比如说，当元素处于全屏状态时，改变它的样式。这时就可以用到伪类。 + +### 代码举例 + +```html + + + + + + + + +
+ + + + +``` + +效果如下： + +20180224_2130.gif + + + + + diff --git a/08-HTML5和CSS3/10-HTML5详解（三）.md b/08-HTML5和CSS3/10-HTML5详解（三）.md new file mode 100644 index 0000000..0da0dac --- /dev/null +++ b/08-HTML5和CSS3/10-HTML5详解（三）.md @@ -0,0 +1,370 @@ + + +## Web 存储 + +随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，传统方式我们以document.cookie来进行存储的，但是由于其存储大小只有4k左右，并且解析也相当的复杂，给开发带来诸多不便，HTML5规范则提出解决方案。 + +### H5 中有两种存储的方式 + +1、**`window.sessionStorage` 会话存储：** + +- 保存在内存中。 + +- **生命周期**为关闭浏览器窗口。也就是说，当窗口关闭时数据销毁。 + +- 在同一个窗口下数据可以共享。 + + +2、**`window.localStorage` 本地存储**： + +- 有可能保存在浏览器内存里，有可能在硬盘里。 + +- 永久生效，除非手动删除（比如清理垃圾的时候）。 + +- 可以多窗口共享。 + + +### Web 存储的特性 + +（1）设置、读取方便。 + +（2）容量较大，sessionStorage 约5M、localStorage 约20M。 + +（3）只能存储字符串，可以将对象 JSON.stringify() 编码后存储。 + + +### 常见 API + +设置存储内容： + +```javascript + setItem(key, value); +``` + +PS：可以新增一个 item，也可以更新一个 item。 + +读取存储内容： + +```javascript + getItem(key); +``` + +根据键，删除存储内容： + +```javascript + removeItem(key); +``` + + +清空所有存储内容： + +```javascript + clear(); +``` + +根据索引值来获取存储内容： + + +```javascript + key(n); +``` + + +sessionStorage 的 API 举例： + +```html + + + + + + + + + + + + + + + + +``` + +效果如下： + +20180224_2200.gif + +如上图所示，我们可以在 Storage 选项卡中查看 Session Storage 和Local Storage。 + +**localStorage 的 API 举例：** + + +```html + + + + + + + + + + + + + + + + + +``` + + +### 案例：记住用户名和密码 + +代码： + +```html + + + + + + + + +

+ +

+ +

+ + + + + +``` + +## 网络状态 + +我们可以通过 `window.onLine` 来检测用户当前的网络状况，返回一个布尔值。另外： + +- window.online：用户网络连接时被调用。 + +- window.offline：用户网络断开时被调用（拔掉网线或者禁用以太网）。 + +网络状态监听的代码举例： + +```html + + + + + + + + + + +``` + + +## 应用缓存 + +HTML5中我们可以轻松的构建一个离线（无网络状态）应用，只需要创建一个 `cache manifest` 缓存清单文件。 + + +### 优势 + +1、可配置需要缓存的资源； + +2、网络无连接应用仍可用； + +3、本地读取缓存资源，提升访问速度，增强用户体验； + +4、减少请求，缓解服务器负担。 + + + + + +### `cache manifest` 缓存清单文件 + + + +缓存清单文件中列出了浏览器应缓存，以供离线访问的资源。推荐使用 `.appcache`作为后缀名，另外还要添加MIME类型。 + +**缓存清单文件里的内容怎样写：** + +（1）顶行写CACHE MANIFEST。 + +（2）CACHE: 换行 指定我们需要缓存的静态资源，如.css、image、js等。 + +（3）NETWORK: 换行 指定需要在线访问的资源，可使用通配符（也就是：不需要缓存的、必须在网络下面才能访问的资源）。 + +（4）FALLBACK: 换行 当被缓存的文件找不到时的备用资源（当访问不到某个资源时，自动由另外一个资源替换）。 + +格式举例1： + +20180224_2240.png + +格式举例2： + +```bash +CACHE MANIFEST + +#要缓存的文件 +CACHE: + images/img1.jpg + images/img2.jpg + + +#指定必须联网才能访问的文件 +NETWORK: + images/img3.jpg + images/img4.jpg + + +#当前页面无法访问是回退的页面 +FALLBACK: + 404.html + +``` + + +**缓存清单文件怎么用：** + +（1）例如我们创建一个名为 `demo.appcache`的文件。例如： + +demo.appcache： + +```bash +CACHE MANIFEST + +# 注释以#开头 +#下面是要缓存的文件 +CACHE: + http://img.smyhvae.com/2016040101.jpg +``` + + +（2）在需要应用缓存在页面的根元素(html)里，添加属性manifest="demo.appcache"。路径要保证正确。例如： + + +```html + + + + + + + + + + +``` + + +