标签 html5 下的文章

viewport 是用户网页的可视区域。如果把移动设备的浏览器(也有可能是app中的webview) ,当做相框的话，viewport就相当于相框中的画,可能会比相框小,可能会比相框大,最好是一样大。该属性最早是苹果公司在Safari中推出用来解决移动设备的viewport问题的.后来被各大安卓以及浏览器厂商效仿,所以说这个属性真的是非常有用的。
语法设置：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

标签值：

  • width:设置layout viewport 的宽度，为一个正整数，或字符串"width-device"。
  • initial-scale:设置页面的初始缩放值，为一个数字，可以带小数。
  • minimum-scale:允许用户的最小缩放值，为一个数字，可以带小数。
  • maximum-scale:允许用户的最大缩放值，为一个数字，可以带小数。
  • height:设置layout viewport 的高度，这个属性对我们并不重要，很少使用。
  • user-scalable:是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许。

Emmet语法中，输入meta:vp,然后按tab键，会自动生成viewport的代码。

HTML5中我们可以轻松的构建一个离线（无网络状态）应用，只需要创建一个cache manifest文件。

优势
1、可配置需要缓存的资源
2、网络无连接应用仍可用
3、本地读取缓存资源，提升访问速度，增强用户体验
4、减少请求，缓解服务器负担

缓存清单
一个普通文本文件，其中列出了浏览器应缓存以供离线访问的资源，推荐使用.appcache为后缀名，添加MIME类型
AddType text/cache-manifest .appcache
例如我们创建了一个名为demo.appcache的文件，然后在需要应用缓存在页面的根元素(html)添加属性manifest="demo.appcache"，路径要保证正确。

manifest文件格式
1、顶行写CACHE MANIFEST
2、CACHE: 换行 指定我们需要缓存的静态资源，如.css、image、js等
3、NETWORK: 换行 指定需要在线访问的资源，可使用通配符
4、FALLBACK: 当前页面无法访问时退回的页面(回退;  后退)
换行 当被缓存的文件找不到时的备用资源 可自行查阅资料

其它

1、CACHE: 可以省略，这种情况下将需要缓存的资源写在CACHE MANIFEST
2、可以指定多个CACHE: NETWORK: FALLBACK:，无顺序限制

CACHE:需要缓存那些资源.
NETWORK:不需要缓存那些资源，必须在网络下面才能访问.
FALLBACK:当访问不到某个资源时，自动由另外一个资源替换.

CACHE MANIFEST

   CACHE:
   #此部分是需要缓存的资源

   NETWORK:
   #不需要缓存那些资源，必须在网络下面才能访问
    FALLBACK:
   #当前页面无法访问时退回的页面(回退;  后退)

3、#表示注释，只有当demo.appcache文件内容发生改变时或者手动清除缓存后，才会重新缓存。
4、chrome 可以通过chrome://appcache-internals/工具和离线（offline）模式来调试管理应用缓存

通过window.onLine来检测，用户当前的网络状况，返回一个布尔值
window.online用户网络连接时被调用
window.offline用户网络断开时被调用

window.addEventListener("online",function(){
         alert("已经建立了网络连接")
    })
window.addEventListener("offline",function(){
         alert("已经失去了网络连接")
})

HTML5规范允许用户自定义网页上任一元素全屏显示。
requestFullscreen() 开启全屏显示
cancleFullscreen() 关闭全屏显示
不同浏览器需要添加前缀如：

 webkitRequestFullScreen、mozRequestFullScreen
 webkitCancleFullScreen、mozCancleFullScreen

通过document.fullScreen检测当前是否处于全屏
不同浏览器需要添加前缀
document.webkitIsFullScreen、document.mozFullScreen
全屏伪类

:full-screen .box {}、:-webkit-full-screen {}、:moz-full-screen {}
var docElm = document.documentElement;
    if (docElm.requestFullscreen) {
       docElm.requestFullscreen();
    }
    else if (docElm.mozRequestFullScreen) {
       docElm.mozRequestFullScreen();
    }
    else if (docElm.webkitRequestFullScreen) {
       docElm.webkitRequestFullScreen();
    }

用户如果选择"记住密码”，系统会自动将密码保存在localStorage，不选择就会自动清除。
代码实现：
html


    <label for="">
        用户名： <input type="text" class="userName"/>
    </label>
    <br/><br/>
    <label for="">
        密　码： <input type="password" class="pwd"/>
    </label>
    <br/><br/>
    <label for="">
        <input type="checkbox" class="ckb"/>
        记住密码
    </label>
    <br/><br/>
    <button>登录</button>

javascript

<script>
    var userName=document.querySelector('.userName');
    var pwd=document.querySelector('.pwd');
    var sub=document.querySelector('button');
    var ckb=document.querySelector('.ckb');

    sub.onclick=function(){
//        如果记住密码 被选中存储，用户信息
        if(ckb.checked){
            window.localStorage.setItem('userName',userName.value);
            window.localStorage.setItem('pwd',pwd.value);
        }else{
            window.localStorage.removeItem('userName');
            window.localStorage.removeItem('pwd');
        }
//        否则清除用户信息
    }

    window.onload=function(){
//        当页面加载完成后，获取用户名，密码，填充表单
        userName.value=window.localStorage.getItem('userName');
        pwd.value=window.localStorage.getItem('pwd');
    }
</script>

随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，传统方式我们以document.cookie来进行存储的，但是由于其存储大小只有4k左右，并且解析也相当的复杂，给开发带来诸多不便，HTML5规范则提出解决方案。
Storage 存储
window.sessionStorage
window.localStorage

特性

  • 设置、读取方便
  • 容量较大，sessionStorage约5M、localStorage约20M

  • 只能存储字符串，可以将对象JSON.stringify() 编码后存储

    window.sessionStorage

    1、生命周期为关闭浏览器窗口
    2、在同一个窗口下数据可以共享

    window.localStorage

    1、永久生效，除非手动删除
    2、可以多窗口共享
    方法详解

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

常见获取地理信息的方式有：IP地址，三维坐标（GPS，wifi，手机信号）用户自定义数据）浏览器会自动以最优方式去获取用户地理信息。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 对象可以调整位置信息数据收集方式

附录：获取位置的代码

<script>
    if (navigator.geolocation){
        navigator.geolocation.getCurrentPosition(successCallback,errorCallback);
    }else {
        console.log('浏览器不支持定位');
    }
    function successCallback(position) {
        var wd = position.coords.latitude;
        var jd = position.coords.longitude;

        console.log("获取用户信息成功");
        console.log(wd+'--'+jd);

    }
    function errorCallback(error) {
        console.log(error);
        console.log('获取用户位置失败');
    }
</script>

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

目标元素：页面中任何一个元素都可以成为目标元素
事件监听
拖拽元素

  • ondrag 应用于拖拽元素，整个拖拽过程都会调用
  • ondragstart 应用于拖拽元素，当拖拽开始时调用
  • ondragleave 应用于拖拽元素，当鼠标离开拖拽元素时调用
  • ondragend 应用于拖拽元素，当拖拽结束时调用
    目标元素
  • ondragenter 应用于目标元素，当拖拽元素进入时调用
  • ondragover 应用于目标元素，当停留在目标元素上时调用
  • ondrop 应用于目标元素，当在目标元素上松开鼠标时调用
  • ondragleave 应用于目标元素，当鼠标离开目标元素时调用- `

CSS3中可以通过box-sizing 来指定盒模型，即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。
box-sizing 有两个值:content-box，border-box
可以分成两种情况：

  • content-box:对象的实际宽度等于设置的width值和border、padding之和
  • border-box： 对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 ( Element width = width )
    我们把这种方式叫做盒模型， 兼容性比较好

附录：私有化前缀：
浏览器私有化前缀：
-webkit-: 谷歌 苹果
-moz-:火狐
-ms-：ie
-o-：欧朋

描述：每一段的第一个字变大下沉，每一段的第一行的文字颜色发生改变，无论屏幕多大，每一行显示多少文字，都是第一行文字颜色发生改变。鼠标选中文字之后，文字的样式发生改变。
示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首字下沉，第一行文字变色，选中文字样式</title>
    <style>
        body, ul, dl, dt, dd {
            margin: 0;
            padding: 0;
        }

        body {
            font-family: '微软雅黑';
            background-color: #F7F7F7;
            color: #666;
        }

        .content {
            width: 960px;
            margin: 0 auto;
            font-size: 20px;
        }

        p {
            text-indent: 40px;
            line-height: 1.5;
        }

        p:first-child {
            text-indent: 0;
        }

        p:first-letter{
            font-size:40px;
            float: left;
            color:red;
        }

        p::first-line{
            color:blue;
        }
        /* ::selection 表示当前选中的区域 ， 通过设置 color  background*/
        p::selection{
            background-color: rgba(255,0,0,0.3);
            color:green;
        }
    </style>
</head>
<body>
<div class="content">
    <p>格物致知是中国古代儒家思想中的一个重要概念，源于《礼记‧大学》八目─格物、致知、诚意、正心、修身、齐家、治国、平天下─所论述的『欲诚其意者，先致其知；致知在格物。物格而后知至，知至而后意诚』此段。致知即获得知识而获得知识的途径在于在于认识。研究万事万物。致知在格物。 格物的意思是认识，研究万事万物的道理，通过对万事万物的认识，研究后才能获得知识，即格物而后知至。致知在格物，格物而后知至强调了格物，致知二着相辅相成，相得益彰的关系。</p>
    <p>美籍华裔物理学家，丁肇中先生的报告中的一篇漫谈式的议论文。作者先阐明格物致知精神在今天的重要性，而后揭示格物致知的真正意义。他曾在论文中提到。现代学术的基础就是实地的探察，就是现在所谓的实验。他在一系列论述中有着重提到科学进展的历史告诉我们，新的知识只能通过实地实验而得到。</p>
</div>
</body>
</html>
  1. 1
  2. 2