语义化标签 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 查看更多
因为没有新增 css 类别,所以关于css 的东西暂时归类到了 Html5
今天干活遇到的几个问题,下班前和大家分享
透明遮罩层
居中内容不透明
居中div显示内容
因为我的html5页面只在手机端展示,所以不考虑万恶的IE低版本浏览器
并且我把单独的css内容直接定义在html 标签里,这样你们看起来更加直观
透明遮罩层
<div id="nav_img_ios" style="display:none;height:100%; width:100%;
position:fixed; _position:absolute; top:0; z-index:10
html5 查看更多
初学css 的同学很难分清 margin 和 padding 真正所表达的意思.很早之前我们知道 padding 表示内边距, margin 表示外边距.这个定义让人迷惑.按照上面的盒子模型,可能理解起来更好一点.这个图里有一个盒子,就是除去最外层黄色部分.这时你独立看剩下的这个盒子,padding 表示content 距离盒子上下,左右边的距离(不包括border本身距离)所以 padding 是指盒子内容相对盒子本身上下左右各边的距离.当然也可以 单独通过 padding-top,padding-right,padding-bottom,padding-left 来分别制定不同方向的边框.
html5 查看更多
找准自己的位置很重要.页面也是一样.设计师出手的psd是这样的结果施工后的效果是这样的:这样的结果相信PO喝完酒也不会验收成功吧.页面在设计时的层次,羽化,字体,大小,边距,背景等.这些都不是随便堆砌起来的.所以切页面的时候要完全按照设计师的psd 效果来实施,才不会让最后的产品和设计相差甚远.其中,比较难的是层的定位.所以今天大概说一下 position 属性相关的一点点知识分享.position 属性包含如下几个值:relative 相对的 (这个属性值有参照物)absolute 绝对的 (这个绝对其实也是有一个参照物的)fixed 固定的(就像钉子钉在那里一样)static 静止的 (这
html5 查看更多
我就要当一次标题党了。这里的黑科技其实就是一些CSS中不怎么为人所知但在解决某些问题的时候很溜的属性。border-radius很多开发者估计都没有正确认识这个border-radius，因为基本上很多人都是这么用的：.box{border-radius:4px;}稍微高端一点的是这样的：.box{border-radius:4px6px6px4px;}然而，终极黑科技是这样用的：.box{border-radius:5px5px3px2px/5px5px1px3px;}对，它可以赋8个值，没见过？不着急，具体的解释是这样的：斜线前面的影响的是水平方向，斜线后面影响的是垂直方向，各个数字就分别
html5 查看更多
传统的页面制作中,当你遇到css2 的时候,如何来显示一张背景图呢?拉伸 (无节操的拉伸,容器长宽完全超出背景图的长宽)重复展示(用无数张同样的图片来铺满容器的背景面积)x轴 /y轴 重复展示(纵向拉伸不重复 / 横向拉伸不重复 )background-repeat 这个货看下它的值:repeat 默认。背景图像将在垂直方向和水平方向重复。repeat-x 背景图像将在水平方向重复。repeat-y 背景图像将在垂直方向重复。no-repeat 背景图像将仅显示一次(无节操拉伸)。inherit 规定应该从父元素继承 background-repeat 属性的设置。很明显,上面的 css2 满
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页面时,有没有遇到过,你设置的样式,在ios 设备里面面目全非了.尤其是和安卓设备对比后,会让你有种不相信css 的感觉.其实在 ios设备中使用 Safari 浏览器时.你页面里面的 input ,button ,submit ,reset 等元素都会被载入系统默认的css 来控制.那么问题来了,如果默认禁止浏览器载入这些默认样式呢?在你的css 样式中引入如下:input[type="submit"],
input[type="reset"],
input[type="button"],
button{
-
html5 查看更多
最近在做一个html5的小项目,虽然很小,但是考虑到用户网络制式,流量,甚至海外访问的速度优先保证.所以对于一些功能的实现不再考虑依赖任何第三方的包.今天和大家分享的是 html5 页面下拉到最底部时实现自动刷新加载新数据.当然,也不一定是html5下适用,web页面都适用.首先要清楚3个定义:文档高度这是整个页面的高度可视窗口高度这是你看到的浏览器可视屏幕高度滚动条滚动高度滚动条下滑过的高度所以, 当 文档高度 = 可视窗口高度 + 滚动条高度 时,滚动条正好到底.那我们就来定义三个不同的方法,分别获取上面3个高度值//文档高度
functiongetDocumentTop(){
varsc
html5 查看更多
移动H5前端性能优化指南概述1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点，首屏加载3秒完成或使用Loading4. 基于联通3G网络平均338KB/s(2.71Mb/s)，所以首屏资源不应超过1014KB5. Mobile侧因手机配置原因，除加载外渲染速度也是优化重点6. 基于第五点，要合理处理代码减少渲染损耗7. 基于第二、第五点，所有影响首屏加载和渲染的代码应在处理逻辑中后置8. 加载完成后用户交互使用时也需注意性能优化指南[加载优化]加载过程是最为耗时的过程，可能会占到总耗时的80%时间，因此是优化的重点· 减少HTTP请
html5 查看更多
html中的加粗/加重 在网页制作过程中,难免要遇到针对文本的加粗,加重等情况.
但是html中有好几个可以把文本加粗加重的标签,尤其HTML5出现后,
我们常见的加粗/加重标签有:
strong
em
i
b
strong strong 加粗加重显示,
要比 em 更加强调一些,
比如全文要突出的关键词,
可以让用户一眼就看到的重点内容,
它更加强调的是重要突出的关键词的内容,而不仅仅是针对样式上的加粗需求.
strong 全局强调关键词
em em 默认斜体不加粗显示,
一般着重要表示的内容,
它字体没有 strong 粗黑,
所以一般用户不会一眼注意到em 标签的内容.
em 局部
html5 查看更多