关于HTML5你必须知道的28个新特性,新技巧以及新技_H5之家

关于HTML5你必须知道的28个新特性,新技巧以及新技

去掉link和script标签里面的type属性 5. 加/不加括号 HTML5没有严格的要求属性必须加引号，闭合不闭合，但是建议加上引号和闭合标签 6. 让你的内容可编辑，只需要加一个contenteditable属性 7. Email

2016-09-01 18:01 [HTML5]

HTML5的新特性及技巧分享总结

Opera支持Theora和Vorbis编码的格式，当使用HTML5 video的时候，你必须都提供： <video controls preload> <source src="cohagenPhoneCall.ogv" type="video/ogg

2016-08-15 17:37 [HTML5]

JS 开发者必须知道的十个 ES6 新特性

最近我参加了一个在旧金山举行的HTML5开发者大会，听到的演讲半数都关于ES6（或者官方说法叫ECMAScript2015），我喜欢简洁的成为ES6。这篇文章会给你简单介绍一下ES6。如果你还不知道什么是ES6的话，它是JavaScript一个新的实现，如果你是一个忙碌的JavaScript

2016-07-27 23:40 [ECMAScript]

HTML5新特性

="controls"> 这里写一些关于不支持该标签的提示。 </video> 注意：记得加上type，不然，即使格式对了，也可能播放不了对本地离线存储的更好的支持 HTML5 提供了两种在客户端存储数据的新方法： localStorage - 没有

2014-01-24 16:22 [HTML5]

html5的新特性

刚刚完成了团购网的风格制作，赶紧来补习一些html5 的知识。 html5已经火了好久了，各大浏览器都纷纷支持html5。为了赶上时代的步伐，我也要学习这方面的知识了。虽然目前还没完全普及，但这个趋势还是不会变的。

2014-01-24 16:23 [HTML5]

HTML5语言的28个新特性学习

并没有给video指定一个特定的编码，所以浏览器去决定要支持哪些编码，导致了很多不一致。Safari和IE支持H.264编码的格式，Firefox和Opera支持Theora和Vorbis 编码的格式，当使用HTML5 video的时候，你必须都提供： <video controls

2015-08-26 20:54 [HTML5]

[你必须知道的异步编程]C# 5.0 新特性??Async和Await使异步

.NET 4.5 的推出，对于C#又有了新特性的增加??就是C#5.0中async和await两个关键字，这两个关键字简化了异步编程，之所以简化了，还是因为编译器给我们做了更多的工作，下面就具体看看编译器到底在背后帮我们做了哪些复杂的工作的。二、同步代码存在的问题对于同步的代码，大家

2014-01-22 18:34 [C#语言]

【菜鸟翻译日记】你必须知道的8个最好的HTML5工具

今天看到一篇文章，关于HTML5开发工具的介绍，借着HTML5的东风，给大伙推荐下这几个工具，希望对大家有帮助哦！现在HTML5在最近1~2年，一下子很火。当 HTML5发布，它便成为了众人讨论的话题，越来越多的web developer对这种“新”标记语言感到兴奋。主要的原因在于：它改变了传统的设计网站的理念，而且它提供了一些新特性，利用它，可以实现以前用单纯的html不能实现的web应用。而且由于它的易学，易读，新特性，这也促进了web developer的青睐~ 当然，学习一样东西，好的工具也是必不可少的，下面送上各个工具： 1）Switch to HTML5 2) Modernizr modernizr是一个开源的JS库，它帮助你实现具备HTML5和CSS3能力的应用。如果你使用HTML5和CSS3来设计你的网站，你必须考虑的浏览器的兼容；所以，modernizr 2是一个不错的选择，它可以帮助你开发跨浏览器的应用。 3) Cross Browser HTML 5 4) Wallaby wallaby，它可以把adobe flash professional（FLA） files里面的动画转换成HTML 5) HTML 5 Canvas Cheat Sheet 这个是针对canvas元素的，旨在发现那些隐藏的样式 6) Limejs 一个游戏框架，是为桌面浏览器和触屏浏览器开发快速本地运行的游戏 7) HTML 5 Reset 既然现代浏览器已经开始支持HTML5和CSS3，那为什么咱们不抓住这个优点，然而它就在这儿，当然，它决不是唯一一个方法，但是，它却为你起了个好头。 8 ) HMTL 5 Test 这个是查看你的浏览器对HTML5的支持，不过它评判一个分数给你，为你在多个浏览器中定性的比较提供依据 PS：本来才 PS：本人的目的在于分享这些工具，具体翻译部分只是自我学习，翻译过程难免会有疏漏，所以还望不吝赐教。另外，如果您也看到关于该文章的翻译，欢迎告诉我，正好我可以比较一下，我翻译的疏漏，学习进步！原文链接：html5-tools/

2014-01-23 18:17 [跨浏览器开发]

再普及一次HTML5基础，HTML5必须知道的那些事，HTML5扫盲。下一代

;wannabe</a><a href="">games posts</a>... 微数据 - Microdata <div itemscope itemtype=""> <p>My name is <span itemprop='name'>Neil</span>.</p> <p>My band is called <span itemprop='band'>Four Parts Water</span>.</p> <p>I am <span itemprop='nationality'>British</span>.</p></div> 无障碍富互联网应用程序属性 - ARIA attributes <ul id="tree1" role="tree" tabindex="0" aria-labelledby="label_1" > <li role="treeitem" tabindex="-1" aria-expanded="true">Fruits</li> <li role="group"> <ul> <li role="treeitem" tabindex="-1">Oranges</li> <li role="treeitem" tabindex="-1">Pineapples</li> ... </ul> </li> </ul> 新的表单元素类型增强已有元素 UI方面: <input type='range' min='0' max='50' value='0' /> <input results='10' type='search' /> <input type='text' placeholder='Search inside' /> 输入检查:(不符合条件的将显示红色背景)<style> :invalid { background-color: red; } </style><input type='color' /> <input type='number' /> <input type='email' /> <input type='tel' /> etc... 新增的元素 <meter><progress><output>etc... 音频 + 视频 - Audio + Video <audio src="sound.mp3" controls></audio>document.getElementById("audio").muted=false;<video src='movie.mp4' autoplay controls ></video>document.getElementById("video").play(); 图形绘制 - Canvas <canvas id="canvas" width="838" height="220"></canvas><script> var canvasContext = document.getElementById("canvas").getContext("2d"); canvasContext.fillRect(250, 25, 150, 100); canvasContext.beginPath(); canvasContext.arc(450, 110, 100, Math.PI * 1/2, Math.PI * 3/2); canvasContext.lineWidth = 15; canvasContext.lineCap = 'round'; canvasContext.strokeStyle = 'rgba(255, 127, 0, 0.5)'; canvasContext.stroke();</script> Canvas 3D (WebGL) <canvas id="canvas" width="838" height="220"></canvas><script> var gl = document.getElementById("canvas").getContext("experimental-webgl"); gl.viewport(0, 0, canvas.width, canvas.height); ...</script> HTML5中的SVG <html> <svg> <circle id="myCircle" class="important" cx="50%" cy="50%" r="100" fill="url(#myGradient)" onmousedown="alert('hello');"/> </svg></html> CSS 选择器奇/偶选择 .row:nth-child(even) { background: #dde;}.row:nth-child(odd) { background: white;} Image-like display div { display: inline-block;} 通过属性选择 input[type="text"] { background: #eee;} 反选 :not(.box) { color: #00c; } :not(span) { display: block; } 以及一些其它的选择方法 h2:first-child { ... }div.text > div { ... } h2 + header { ... } 显示本地没有的字体 @font-face { font-family: 'Junction'; src: url(Junction02.otf); }@font-face { font-family: 'LeagueGothic'; src: url(LeagueGothic.otf); }@font-face { font-family: 'GG250'; src: url(General250.otf); }header { font-family: 'LeagueGothic';} 文本溢出处理 div { text-overflow: ellipsis;} 分栏显示 -webkit-column-count: 2; -webkit-column-rule: 1px solid #bbb;-webkit-column-gap: 2em; 文本描边 div { -webkit-text-fill-color: black; -webkit-text-stroke-color: red; -webkit-text-stroke-width: 0.00px; } 透明效果 color: rgba(255, 0, 0, 0.75); background: rgba(0, 0, 255, 0.75); HSL(色相/饱和度/亮度)色彩模式 color: hsla( 128, 75%, 33%, 1.00); 圆角效果 border-radius: 0px; 渐变效果 background: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(white), color-stop(0.5, white), color-stop(0.5, #66cc00)) background: -webkit-gradient(radial, 430 50, 0, 430 50, 200, from(red), to(#000)) 阴影效果 text-shadow: rgba(64, 64, 64, 0.5) 0px 0px 0px;box-shadow: rgba(0, 0, 128, 0.25) 3px 0px 0px; 制作一个LOGO，只需拖动滑动条 text-shadow: rgba(0, 0, 0, 0.5) 0 0px 0px; background: -webkit-gradient(linear, left top, left bottom, from(rgba(200, 200, 240, 0)), to(rgba(255, 255, 255, 0))); border-radius: 0px; -webkit-box-reflect: below 10px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(255, 255, 255, 0))); 更强大的背景背景的尺寸 #logo { background: url(logo.gif) center center no-repeat; background-size: ;} 多个背景 div { background: url(src/zippy-plus.png) 10px center no-repeat, url(src/gray_lines_bg.png) 10px center repeat-x;} 变换 - Transitions #box.left { margin-left: 0;}#box.right { margin-left: 1000px;}document.getElementById('box').className = 'left'; document.getElementById('box').className = 'right'; #box { -webkit-transition: margin-left 1s ease-in-out;} document.getElementById('box').className = 'left'; document.getElementById('box').className = 'right'; 变换 - Transforms -webkit-transform: rotateY(45deg); -webkit-transform: scaleX(25deg); -webkit-transform: translate3d(0, 0, 90deg); -webkit-transform: perspective(500px) #threed-example { -webkit-transform: rotateZ(5deg); -webkit-transition: -webkit-transform 2s ease-in-out;}#threed-example:hover { -webkit-transform: rotateZ(-5deg);} 动画效果 @-webkit-keyframes pulse { from { opacity: 0.0; font-size: 100%; } to { opacity: 1.0; font-size: 200%; }}div { -webkit-animation-name: pulse; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -webkit-animation-direction: alternate;}

2014-01-26 15:36 [HTML5]

HTML5新特性--画图