语义化标签 HTML 5的革新之一：语义化标签.
在HTML 5出来之前，我们用div来表示页面章节，但是这些div都没有实际意义。（即使我们用css样式的id和class形容这块内容的意义）。这些标签只是我们提供给浏览器的指令，只是定义一个网页的某些部分。但现在，那些之前没“意义”的标签因为因为html5的出现消失了，这就是我们平时说的“语义”
如上图那个页面结构没有一个div，都是采用html5语义标签.
但是也不要因为html5新标签的出现，而随意用之，错误的使用肯定会事与愿违;
所以有些地方还是要用div的，就是因为div没有任何意义的元素，他只是一个标签，仅仅是用来构建外观和结构
html5 查看更多
Html5 的扩展极大的方便了web开发.
比如视频播放,在Html5 之前,全部依赖 flash / 银光 这样的插件.
video 元素 Html5 的 video 元素扩展出来非常多的方法,属性,事件 等.
我们可以直接在此控件上播放,暂停 等操作.
现在，Safari 3以上、Firefox 4以上、Opera 10以上，以及Chrome 3.0以上的浏览器都实现了对video元素和audio元素的支持
表现形式:
<video widht="500" height="300" src="http://wwww.devdo.net/demo/test.mp4>
html5 查看更多
什么是m3u
m3u是一个纯文本文件,虽然我们平时看到播放器首先加载了此文件,但是它并不是一个音频文件。
播放器并不是播放它，而是根据它的记录找到网络地址进行在线播放
什么是m3u8
m3u8 是在 m3u 格式下扩展出来的,
可以播流或者点播形式，目的是实现时实性及保密性它会不让你获取它的视频所在地址
浏览器使用的是 m3u8 文件。
m3u8 跟音频列表格式 m3u 很像，可以简单的认为 m3u8 就是包含多个 ts 文件的播放列表。
播放器按顺序逐个播放，全部放完再请求一下 m3u8 文件，获得包含最新 ts 文件的播放列表继续播，周而复始。
整个直播过程就是依靠一个不断更新
html5 查看更多
上一篇博文介绍了 html5 file api
html5 提供了一套可以操作本地文件的 api ,但是有一定的局限性
必须由用户发起一个事件,所以你不要妄想着用户浏览器加载某个站点时,主动去读取他本地硬盘的资料....不可能的.
你的浏览器必须支持 html5 的 file api ,所以你也不要妄想去兼容IE6
用户发起行为比如: file upload 操作, 文件拖拽 等.
最近遇到一个需求
1.本地上传视频要保存到七牛服务器
2.提交切割视频任务 (大文件切割成多份)
3.返回视频截图 (按视频长短截取图片,供管理员审核视频内容)
七牛这边提供的有 j
html5 查看更多
javascript 访问本地文件,已经成为可能.
HTML5 file api
该规范主要定义了以下数据结构：
File
FileList
Blob
HTML5 访问文件和大部分语言是一致的,先获取文件句柄，然后调用文件访问接口，打开文件句柄，读取文件!
选择文件
首先检测一下当前浏览器是否支持File Api：
function isSupportFileApi() {
if(window.File && window.FileList && window.FileReader && window.Blob
html5 查看更多
关于Html5 的一些定义 及旧的Html 规定有何区别
html 头的定义
html4 及 以下版本
<!DOCTYPE HTML PUBLIC "-W3CDTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
html5
'`
DOCTYPE 这个定义在Html 页面头部的参数告诉浏览器,你当前的内容是什么类型,需要如何渲染解析
那如果你把 html4 解析的页面定义成了 html5 个规范,会发生什么情况呢?
答案是 什么情况都没有
W3C标准已经像地球所有人
html5 查看更多
现在的移动端开发页面已经离不开<meta name="viewport"> 元素的支持了.viewport 标签对移动端设备浏览器的宽,高,缩放等属性做了相应的控制:<metaname="viewport"content="width=device-width,initial-scale=1,maximum-scale=1">现在我们来看下 content包括哪些属性的定义:width=device-width默认页面宽度等于 设备浏览器宽度 (device-width)height=device-height
html5 查看更多
最近在做一个html5的小项目,虽然很小,但是考虑到用户网络制式,流量,甚至海外访问的速度优先保证.所以对于一些功能的实现不再考虑依赖任何第三方的包.今天和大家分享的是 html5 页面下拉到最底部时实现自动刷新加载新数据.当然,也不一定是html5下适用,web页面都适用.首先要清楚3个定义:文档高度这是整个页面的高度可视窗口高度这是你看到的浏览器可视屏幕高度滚动条滚动高度滚动条下滑过的高度所以, 当 文档高度 = 可视窗口高度 + 滚动条高度 时,滚动条正好到底.那我们就来定义三个不同的方法,分别获取上面3个高度值//文档高度
functiongetDocumentTop(){
varsc
html5 查看更多
使用html5 开发一个手机端页面如何能像app一样实现下拉刷新,或者上推刷新.我们试图用html5+css+javascript 来实现一下,没有用到任何第三方插件或者开源js包.先看下效果:这是微信内置浏览器打开后的效果,再看下从顶部按住下拉刷新的效果首先有一个目标div这个 div 用来监听 touchstart ,touchmove ,touchend 三个事件.这3个 事件分别表示 手指触摸屏幕开始, 手指在屏幕移动 , 手指触摸结束那么这个 目标div 一旦被监听后,你的手指放在此div内,就会触发上面的事件. 2. 当触发某个事件时,我们希望看到上面一个下拉的拉伸效果,并且提示
javascript 查看更多
html中的加粗/加重 在网页制作过程中,难免要遇到针对文本的加粗,加重等情况.
但是html中有好几个可以把文本加粗加重的标签,尤其HTML5出现后,
我们常见的加粗/加重标签有:
strong
em
i
b
strong strong 加粗加重显示,
要比 em 更加强调一些,
比如全文要突出的关键词,
可以让用户一眼就看到的重点内容,
它更加强调的是重要突出的关键词的内容,而不仅仅是针对样式上的加粗需求.
strong 全局强调关键词
em em 默认斜体不加粗显示,
一般着重要表示的内容,
它字体没有 strong 粗黑,
所以一般用户不会一眼注意到em 标签的内容.
em 局部
html5 查看更多