Html 5 新特性之本地存储

在HTML5中对本地离线存储有了更好的支持,它提供了两种在客户端存储数据的新方法,即localStorage和sessionStorage

localStorage

localStorage是没有时间限制的数据存储

使用方式:

<script type="text/javascript">
    if (localStorage.pagecount) {
        localStorage.pagecount = Number(localStorage.pagecount) + 1;
    } else {
        localStorage.pagecount = 1;
    }
    document.write("Visits: " + localStorage.pagecount + " time(s).");
</script>

刷新页面,数字增长。就算关闭浏览器窗口,再打开,数字还是在继续增长,而没有回到1。

删除存储的数据代码:

1	localStorage.removeItem("pagecount");

sessionStorage

sessionStorage是针对一个 session 的数据存储

使用方式:

<script type="text/javascript">
    if (sessionStorage.pagecount) {
        sessionStorage.pagecount = Number(sessionStorage.pagecount) + 1;
    } else {
        sessionStorage.pagecount = 1;
    }
    document.write("Visits " + sessionStorage.pagecount + " time(s) this session.");
</script>

刷新页面,数字增长。当关闭浏览器窗口,再打开,数字回到初始值1。

Github参考代码
W3C school的HTML5教程

2016-09-30

Html 5 新标签之Media

趁着自己还有空闲的时间,仔细的重新回顾了一下html5

HTML5

HTML5,目前被广泛使用中,对比前一个4.01版本,新加入了很多功能,其中就有很多新的标签,给前端开发带来了极大的便利。

HTML5 新特性

用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持
新的特殊内容元素，比如 article、footer、header、nav、section
新的表单控件，比如 calendar、date、time、email、url、search

新标签之视频和音频

HTML5中加入了video和audio的标签,可以支持在html文件中加载音视频。

video元素支持的视频格式:

Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件 (仅支持Firefox3.5+,Opera10.5+,Chrome5.0+)
MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件 (仅支持IE9.0+,Chrome5.0+,Safari3.0+)
WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件 (仅支持Firefox4.0+,Opera10.6+,Chrome6.0+)
更多视频格式内容

HTML5使用方法:

<video width="320" height="240" controls="controls" id="video1">
    <source src="http://www.w3school.com.cn/i/movie.ogg" type="video/ogg">
    <source src="http://www.w3school.com.cn/i/movie.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>

视频资源来自w3school,浏览器会找source列表中的视频,并使用第一个格式适配的资源,如果两种格式都不适配,则显示文字内容。
controls属性的设置为controls,可以显示播放、暂停和音量控件
autoplay属性设置值为autoplay,则视频在就绪后马上播放。
height属性设置为200pixels表示视频播放器的高度为200pixels;同理用width设置视频播放器的宽度。
loop属性设置为loop,则当媒介文件完成播放后再次开始播放。
preload属性设置为preload,则视频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。
src属性中设置的是视频资源的url。

使用DOM控制视频元素

不仅可以通过视频自带的控制按钮来控制视频,还可以通过DOM来操控视频

<button onclick="playPause()">播放/暂停</button>
<script type="text/javascript">
    var myVideo = document.getElementById("video1");
    function playPause() {
        if (myVideo.paused)
            myVideo.play();
        else
            myVideo.pause();
    }
</script>

当点击按钮的时候,视频如果是停止的,会继续播放,播放的会停止。

audio元素的音频格式及支持它的浏览器

audio 元素支持三种音频格式：
Ogg Vorbis(Firefox 3.5, Opera 10.5, Chrome 3.0)
MP3(IE 9, Chrome 3.0, Safari 3.0)
Wav (Firefox 3.5, Opera 10.5, Safari 3.0)

audio使用方式

<audio controls="controls">
    <source src="/i/song.ogg" type="audio/ogg">
    <source src="/i/song.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
</audio>

audio中的属性和值与video 类似

Github参考代码
W3C school的HTML5教程

2016-09-30

Github Page - 搭建自己的个人页面

第一次自己尝试去建立Github的个人页面,以下是自己一步一步摸索出来的。

工具准备

Git
Github
Hexo

Github

在Github上建立一个新的Repository,名字是特定的:[你的Github账号名].github.io

Hexo

安装Hexo

在命令行中执行以下命令

1	$ npm install -g hexo

新建Hexo

在自己的电脑中新建文件夹,名字为Hexo,然后在命令行中执行以下命令

1	$ hexo init

Hexo会自动在目标文件夹建立网站所需要的所有文件。

运行Hexo

1 2	$ hexo g # 或者hexo generate $ hexo s # 或者hexo server

可以在http://localhost:4000/ 查看

hexo基本命令:
hexo generate (hexo g) 生成静态文件，会在当前目录下生成一个新的叫做public的文件夹
hexo server (hexo s) 启动本地web服务，用于博客的预览
hexo deploy (hexo d) 部署播客到远端（比如github, heroku等平台）
hexo new “name” 新建一个blog

部署Hexo,与Github关联

先修改Hexo文件夹中的_config.yml文件
修改deploy的内容如下:

deploy:
type: git
repo: git@github.com:[你的Github账号名]/[你的Github账号名].github.io.git
branch: master

在我们正式部署之前先安装一个扩展:

1	$ npm install hexo-deployer-git --save

然后执行以下命令:

1	$ hexo d # 或者hexo deploy

当你出现Permission denied (publickey)的错误时,记得设置Github的public key

在本机生成public key:

1	$ ssh-keygen -t rsa -C "[你的邮箱]"

执行玩后,在~/.ssh目录下会生成两个文件，id_rsa.pub和id_rsa.

1	$ pbcopy < ~/.ssh/id_rsa.pub

拷贝ssh key的内容,登陆Github网站，在SSH设置页面添加上刚才的public key文件也就是我们已经拷贝的id_rsa.pub的内容,只要粘贴就可以了。

使用以下命令查看ssh key设置是否成功:

1	$ ssh -T git@github.com

PS:如果你有多个ssh key要设置,参考管理git生成的多个ssh key

成功以后,再次执行以下命令:

1	$ hexo d # 或者hexo deploy

最后的最后,打开网址https://[你的Github账号名].github.io/,这就是你的个人页面啦~

更多内容参考https://hexo.io/docs/deployment.html

其他参考博客
手把手教你搭博客
 如何搭建一个独立博客——简明Github Pages与Hexo教程

2016-09-30

Hello World

身为一个程序媛, 好好学习,天天向上
不删的Hexo默认页,纪念一下我的开始

Quick Start

Create a new post

1	$ hexo new "My New Post"

More info: Writing

Run server

1	$ hexo server

More info: Server

Generate static files

1	$ hexo generate

More info: Generating

Deploy to remote sites

1	$ hexo deploy

More info: Deployment

2016-09-29