Html5学习（主体内容）

来源：互联网发布：融资余额知乎编辑：程序博客网时间：2024/05/24 06:18

转载：http://directguo.com/html5/

一、Web技术大致发展阶段

1991 HTML——》1994 HTML 2——》1996 CSS1+javaScript——》1997 HTML 4——》1998 CSS2——》2000 XHTML——》2002 DIV+CSS——》2005 ajavx——》2009 HTML5

二、HTML%~=HTML+CSS+JS APIS

1、JS API

（1）、通过class定位元素：document.getElementsByClassName('section');（

（2）、通过类似css选择器的语法定位元素；document.querySelectorAll("table.test>tr>td");

（3）、本地存储-Web Storage：wondow.localStorage.setItem("Item",value); window.localStrogae.getItem("item);

（4）、本地数据库-Web SQL Database

var db=window.openDatabase("Database Name","Database Version");

db.transaction(function(tx){

tx.executeSql("select * from test",[],successCallback,errorCallback):

});

（5）、文件缓存

<html manifest="cache-manifest"> window.applicationCahe.addEventListener('checking',updateCacheStatus,false);

caxhe manifest cache: /html5/src

（6）、让程序在后台运行——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);

（7）、双向信息传输 - 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”); }

（8）桌面提醒 - 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();}

（9）拖放操作 - Drag and drop

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

（8）地理位置 - 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

1、新的语义标签

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>

（2）、微数据 - 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>

（3）无障碍富互联网应用程序属性 - 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>

（4）表单

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' />

（5)音频 + 视频 - Audio + Video

<audio src="sound.mp3" controls></audio>document.getElementById("audio").muted=false;<video src='movie.mp4' autoplay controls ></video>document.getElementById("video").play();

(^0图形绘制 - 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>

三、CSS

1、奇偶

.row:nth-child(even) {  background: #dde;}.row:nth-child(odd) {  background: white;}

反选

:not(.box) {  color: #00c; }            :not(span) {  display: block; }

2、文本溢出处理

div {  text-overflow: ellipsis;}

3、分栏显示

-webkit-column-count: 2;  -webkit-column-rule: 1px solid #bbb;-webkit-column-gap: 2em;

4、透明效果

 color: rgba(255, 0, 0, 0.75);   background: rgba(0, 0, 255, 0.75);

5、HSL(色相/饱和度/亮度)色彩模式

color: hsla(  128,    75%,    33%,    1.00);

6、圆角效果

border-radius: 0px;

7、渐变效果

background: -webkit-gradient(linear, left top, left bottom,                              from(#00abeb), to(white),                              color-stop(0.5, white), color-stop(0.5, #66cc00))

8、阴影效果

text-shadow:   rgba(64, 64, 64, 0.5)   -3px    0px    0px;      box-shadow:   rgba(0, 0, 128, 0.25)   -9px    9px    0px;

9、更强大的背景

#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;}

10、变换

#box {  -webkit-transition: margin-left 1s ease-in-out;}  document.getElementById('box').className = 'left'; document.getElementById('box').className = 'right';

-webkit-transform: rotateY(45deg);            -webkit-transform: scaleX(25deg);            -webkit-transform: translate3d(0, 0, 90deg);            -webkit-transform: perspective(500px)

11、动画

@-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;}