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

      2020-06-13 13:17      HTML5

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

关于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新特性--画图