笔记-HTML5入门教程（MSDN） - 好知网-重拾学习乐趣-Powered By Howzhi

同学笔记最热最新

Canvas对象你的画布的笔记

http://www.w3.org/TR/css3-color颜色定义

by 童心和童话 0 0
引入多媒体对象的笔记

http://dev.w3.org/csswg/css3-mediaqueriescss格式化播放输出样式media

by 童心和童话 0 0
新的页面组织标记的笔记

he

by 我捡了一个土豆 0 0
引入多媒体对象的笔记

引入多媒体对象：1、Ffmpeg将.flv的转换成HTML5直接可以播放的视频可以通过格式工厂2、VLC3、firefoog二、1）制定视频播放地址<video width="320" height="280" controls="controls"> <source src="movie.ogg" type="video/ogg" /> <source src="movie.mp4" type="video/mp4" /> your browser dose not support the video tag. </video>备注：内嵌元素，若不支持可以显示别的

by 水木年华0611 1 1
新的页面组织标记的笔记

新的页面组织标记 header 标记：区域标签。可以用来表示html页面内容头部内容的标记hgroup 标记：块标签。可以用于页面头部具体内容（如位置）的标记article 标记：区域标签，可以用来表示大块文章内容的标记，里面可以放img标签、h型标题类标签、表示地址的address标签、以及表示时间的time标签。section 标记：块标签。aside 标记：是区域类标签。可以用于表示侧边栏的标记，footer 标记：区域标签。很明显，用来表示底部版权部分的标记，里面可以放img、nav、h、div、a整体布局两类控件figurefigcaption汉字元素ruby 可以显示不同编码的字体日期类控件time

by vlonsir 1 1
独立数据存储的笔记

1.为什么需要独立数据存储-cookies不给力（大小限制：8k,明文存储：信息泄漏）-应用日趋复杂-需要新的独立存储方案2.独立存储-storage接口（哈希表-[key]返回value）sessionStorage-针对cookies不足-cookies对站点绑定，多个浏览器实例共享一个，安全性非常低-sessionStorage对浏览器、标签绑定localStorage针对协议、域名、端口、类似于全局应用3.离线应用-json和xml的优缺-现在使用.appcache保存（1、utf-8编码，使用CACHE MANIFEST开头2、各个标签详解：network:文件需要从网络访问；fallback：本地没有要访问的页面，指向统一的某个页面；cache：真正缓存的内容3、判定离线状态：window.applicationCache-addEventListener离线监听事件4、强制更新缓存方法-updata() 和 swapCache()-SetInterval()5、检测是否在线：window.navigator.online只是检测连接是否正常，不检测路由和服务器。）

by 薇薇安 0 0
HTML5中的地理应用的笔记

地理信息系统介绍-SGS84-LBS:（基于地理系统的服务）1.Google map service(提供了html5接口)2.Bing map service(提供了html5接口)3.Baidu map service-地图应用1.移动应用,街旁、foursquare、切客2.整合现有应用微博、点评地理位置信息获取：-Gps-AGps Geolocation API工作方式demo讲解{1.js异步(非阻塞)加载2.navigator.geolocation对象（！important）访问物力信息需要授权}官方API地址-http://dev.w3.org/geo/api/spec-source-v2

by 薇薇安 0 0
新的页面组织标记的笔记

headerhgroupfooternavasidesectionaddresstimearticle

by 水上浮铁 0 0
新Web设计标准HTML5的历史与回顾的笔记

特点：离线存储二维绘图媒体播放通信网络微数据地图

by 水上浮铁 0 0
扩展图形标记的笔记

内嵌图像1、绘制图形：drawImage可以截取图片然后贴到另一张图片上（叠放）2、绘制像素：getImageData返截取图片元素回一数组存储结构为r,g,b,aputImageData回写createImageData创建（需说明维度）以上可实现滤镜功能3、合成影像（重叠绘制）globalCompositeOperation：source：-over、-in、-out、-atopdestination：-over、-in、-out、-atoplighter、copy、xor 4、creatPattern类似于drawImage将内容保存下来然后在其他地方使用

by 薇薇安 0 0
智能表单设计的笔记

·新输入类型表单类型1.交互：使用http协议在客户端和服务器端传输数据，使用get，post等方法提交数据。2.代替js客户端校验：html5提供了新的输入类型：email，number,……使用方法:①email<input type="email" name="user_email" />②urlurl类型会以get方式提交（即附在浏览器地址后方）③numbermax-最大值，min-最小值，step-步进修改值 value-初始值（后两个效果有待试验）<input type="number" name="points" min="1" max="10" />④range 同number，效果为滑块⑤date pickers(需要格式化输入规范) <input type="date" name="user_date"/>效果代替了js日历插件（其他属性不一一列举，编写时可查询html5手册）⑥color提供色块选择（只有少数浏览器支持）备注:使用效果会弹出悬浮提示框（跟具不同浏览器会返回不同效果）表单属性①Autofocus：使某个控件获得焦点<input type=search name=query autofocus>（不写引号不写结束符很不习惯……）②Placeholder：文本框内灰色提示字体(点击失去)<input type=email name=email placeholder="user@host.com">③Required：必填项……实在太多了不一个一个写了，看手册吧 ·新元素①meter：为了显示进度，就是进度条<meter value="0.6">0.6</meter>②progress:同meter③datalist：自动实现下拉选择输入<input list="cars"/><datalist id="cars"><option value="a"><option value="b"></datalist>④pattern：正则表达式⑤keygen:加密传输数据Encryption:<keygen name="security"/>keytype属性，rsa也可以是其他加密方式（这里没看懂）⑥Output：自动提交计算结果<input name="numa" type="number">+<input name="numb" type="number">=<output name="result" onforminput="value=numa.valueAsNumber+numb.valueAsNumber"></output> ·客户端校验①Required：必填项②checkValidity()：校验函数<input type=email name=email onchange="this.chekcValidity();">③setCustomValidity():自定义校验函数！ = = html简化了一堆js，以后前端怎么混……

by 薇薇安 0 0
引入多媒体对象的笔记

H.264 编码格式。高清视频AAC音频格式。用于数字广播 WEBM格式，用VP8影片轨和Ogg Vorbis 音频轨是google公司开发的一个免费开放的视频格式

by 搁浅 0 0
新Web设计标准HTML5的历史与回顾的笔记

HTML5网页设计初窥新web设计标准HTML5历史与回顾HTML发展史及现状什么是HTMLHTML4W3C为什么需要HTML5技术方面的诉求浏览器厂家的呼声用户方面的需求新标记典型现代网站应用的必须标记新的API实时二维绘图定时媒体播放离线存储数据库通信/网络微数据（自定义散标签）地理信息系统（LBS）总结结合IE9的HTML5势在必行

by xiaojie 0 0
新Web设计标准HTML5的历史与回顾的笔记

1、移动终端开发注意能量消耗问题2、html5：（ie9）实时二维绘图定时媒体播放离线存储数据库通信/网络微数据（自定义散标签）地理信息系统（lbs）

by 薇薇安 0 0
Canvas对象你的画布的笔记

一、绘制图形1、svg矢量图绘制模式2、控件生成图像法-效率低，灵活性差html5实现上述功能：<canvas width="" height=""></canvas>二、具体填充内容使用js实现步骤1、获得canvas对象2、获得2d绘制上下文对象3、指定填充的区域，模式，效果三、paths-context.beginPath();开始绘制-context.moveTo(300,700);移动至某点-contest.lineTo(600,100);连接到-context.stroke();实现绘制绘制抛物线：（直角坐标、极坐标-参数不同）context.quadraticCurveTo()贝塞尔曲线：context.bezierCurveTp()利用画图工具可做圆角叠加效果：true/false-显示背景色（待实践）

by 薇薇安 0 0
引入多媒体对象的笔记

一、视频格式：1.视频编码（按照指定方式压缩）3.音频编码3.容器格式（保证音画同步）二、html5支持的格式：1.mp4（MPEG-4/avc）：avc音频编码 +H.264视频编码2.vp8格式3.Vorbis格式格式工具:Ffmpeg、VLC、firefogg三、html5视频播放：<video><source src="" type=""/></video>

by 薇薇安 0 0
新的页面组织标记的笔记

html5为搜索引擎提供了便利内容布局标签：1、header->hgroup->h#头部标记header可以嵌套但不能嵌套到address,footer中2、article->address->time（可自定义格式）大块文章-一个板块的内容（html4中对应div class=content）3、section囊括一组有关系的标签4、aside表示和某一个区域块的邻近关系5、footer6、汉字元素：Ruby：当本地没有该文字字库时可以用来显示文字7、与布局无关的标签：figure,figcaption 添加与去掉对整体流式布局无影响

by 薇薇安 2 2
新的页面组织标记的笔记

header:hgroup: 在header宝贝内容格式：<header> <img> <hgroup> <h1> <h2> </hgroup></header> <article> 大块文章 <img> <h2> <address>用来制作人部分信息封闭标签 <time></article> <footer> <p> <nav> <h3> <div> <a> </div></footer>//区域与块aside 显示在它身边的一个东西section 汉字元素<RUby></RUby>

by 谢飞宇 0 0
引入多媒体对象的笔记

视频对象：视频编码、音频编码、容器格式

by cynthiawh88 0 0
新的页面组织标记的笔记

<article>作用：大块文章里面可以用图片<address>是用户的地址信息<time>时间和日期的显示信息-格式化输出<time datetime="2008-02-03"><footer>!---告诉我们:页面中脚(但不一定就在最下面)<aside>!---显示的是在它旁边的一个东西<section>!---显示一个完整逻辑的整体布局:内容控件\功能控件

by etry 0 0

你感兴趣的课程

原创

开始学习

编程开发零基础Html入门视频课程

2万+浏览/ 92学员/ 5评分

免费

开始学习

网页设计 oeasy教你玩转网页设计

1万+浏览/ 377学员/ 5评分

免费

开始学习

编程开发高老师讲编程之HTML5

1万+浏览/ 662学员/ 4.6评分

免费

学员动态

aupt 加入课程 HTML5入门教程（MSDN）

火雨飘零加入课程 HTML5入门教程（MSDN）

好知识121 加入课程 HTML5入门教程（MSDN）

ES1708157255 开始学习课时新Web设计标准HTML5的历...

ES1708157255 加入课程 HTML5入门教程（MSDN）

课程最新笔记

Canvas对象你的画布的笔记
http://www.w3.org/TR/css3-color颜色定义
引入多媒体对象的笔记
http://dev.w3.org/csswg/css3-mediaqueriescss格式化播放输出样式media
新的页面组织标记的笔记
he
引入多媒体对象的笔记
引入多媒体对象：1、Ffmpeg将.flv的转换成HTML5直接可以播放的视频可以通过格式工厂2、VLC3、firefoog二、1）制定视频播放地址<video width="320" height="280" controls="controls"> <source src="movie.ogg" type="video/ogg" /> <source src="movie.mp4" type="video/mp4" /> your browser dose not support the video tag. </video>备注：内嵌元素，若不支持可以显示别的

课程最新问题

求课程源码下载地址！