zoukankan      html  css  js  c++  java

  • HTML5必须知道的那些事

    [转自] http://www.cnblogs.com/hamy/archive/2012/02/21/2362110.html

    再普及一次HTML5基础，HTML5必须知道的那些事，HTML5扫盲。下一代Web开发的新特征

    新的选择器

    通过 class 定位元素 (DOM API)

    复制代码
    var el = document.getElementById('section1');
el.focus();

var els = document.getElementsByTagName('div');
els[0].focus();

var els = document.getElementsByClassName('section');
els[0].focus();
    复制代码

    通过类似 css 选择器的语法定位元素 (Selectors API)

    var els = document.querySelectorAll("ul li:nth-child(odd)");
var els = document.querySelectorAll("table.test > tr > td");

    本地储存 - Web Storage

    复制代码
    // use localStorage for persistent storage
// use sessionStorage for per tab storage
textarea.addEventListener('keyup', function () {
  window.localStorage['value'] = area.value;
  window.localStorage['timestamp'] = (new Date()).getTime();
}, false);
textarea.value = window.localStorage['value'];
    复制代码

    本地数据库 - Web SQL Database

    var db = window.openDatabase("Database Name", "Database Version");
db.transaction(function(tx) {
  tx.executeSql("SELECT * FROM test", [], successCallback, errorCallback);
});
    Chrome中查看生成的数据库: 开发人员 > 开发人员工具 > Storage

    文件缓存 - Application Cache API

    <html manifest="cache-manifest">
window.applicationCache.addEventListener('checking', updateCacheStatus, false);
    复制代码
    CACHE MANIFEST

# version 1

CACHE:
/html5/src/refresh.png
/html5/src/logic.js
/html5/src/style.css
/html5/src/background.png
    复制代码

    让程序在后台运行 - Web Workers

    复制代码
    main.js:
  var worker = new Worker(‘extra_work.js');
  worker.onmessage = function (event) { alert(event.data); }; 

extra_work.js:
  // do some work; when done post message.
  postMessage(some_data);
    复制代码

    双向信息传输 - Web Sockets

    var socket = new WebSocket(location);
socket.onopen = function(event) {
  socket.postMessage(“Hello, WebSocket”);
}
socket.onmessage = function(event) { alert(event.data); }
socket.onclose = function(event) { alert(“closed”); }

    桌面提醒 - Notifications

    复制代码
    if (window.webkitNotifications.checkPermission() == 0) {
  // you can pass any url as a parameter
  window.webkitNotifications.createNotification(tweet.picture, tweet.title, 
      tweet.text).show(); 
} else {
  window.webkitNotifications.requestPermission();
}
    复制代码

    拖放操作 - Drag and drop

    document.addEventListener('dragstart', function(event) {
   event.dataTransfer.setData('text', 'Customized text');
   event.dataTransfer.effectAllowed = 'copy';
}, false);

    地理位置 - Geolocation

    复制代码
    if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function(position) {
    var lat = position.coords.latitude;
    var lng = position.coords.longitude;
    map.setCenter(new GLatLng(lat, lng), 13);
    map.addOverlay(new GMarker(new GLatLng(lat, lng)));    
  });
}
    复制代码

    HTML新的语义标签

    复制代码
    <body>
  <header>
    <hgroup>
      <h1>Page title</h1>
      <h2>Page subtitle</h2>
    </hgroup>
  </header>

  <nav>
   <ul>
     Navigation...
   </ul>
  </nav>

  <section>
   <article>
     <header>
       <h1>Title</h1>
     </header>
     <section>
       Content...
     </section>
   </article>

   <article>
     <header>
       <h1>Title</h1>
     </header>
     <section>
       Content...
     </section>
   </article>

   <article>
     <header>
       <h1>Title</h1>
     </header>
     <section>
       Content...
     </section>
   </article>
  </section>

  <aside>
   Top links...
  </aside>

  <footer>
   Copyright © 2009.
  </footer>
</body>
    复制代码

    新的链接关系

    复制代码
    <link rel='alternate' type="application/rss+xml" href="http://myblog.com/feed" />
<link rel='icon' href="/favicon.ico" />
<link rel='pingback' href="http://myblog.com/xmlrpc.php">
<link rel='prefetch' href="http://myblog.com/main.php">
...

<a rel='archives' href="http://myblog.com/archives">old posts</a>
<a rel='external' href="http://notmysite.com">tutorial</a>
<a rel='license' href="http://www.apache.org/licenses/LICENSE-2.0">license</a>
<a rel='nofollow' href="http://notmysite.com/sample">wannabe</a>
<a rel='tag' href="http://myblog.com/category/games">games posts</a>
...
    复制代码

    微数据 - Microdata

    <div itemscope itemtype="http://example.org/band">
 <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;
}
    复制代码
  • 相关阅读:
    第十次作业
    第十次作业--找回感觉的练习
    MySQL 执行查询报错：Fatal error encountered during command execution
    ASP.NET MVC 4 创建、编辑Model时的数据绑定
    如何解决System.Web.HttpRequestValidationException的异常
    C# winform 跨线程更改窗体控件的属性
    使用NPOI读取Excel报错ICSharpCode.SharpZipLib.Zip.ZipException:Wrong Local header signature
    委托和事件简单样例
    SQLServer 2008 R2 对同时含有数字和中文的字段进行排序
    winform中选择文件获取路径
  • 原文地址：https://www.cnblogs.com/pekkle/p/6568701.html
Copyright © 2011-2022 走看看