HTML5+CSS入门

 

　　HTML5 N=HTML CSS+S APls

 

　　Htm5的发展其实是htm,css,jsap的发展

 

　　HTML5草案的前身名为 Web Applications1.0,是在2004年由 WHATWG提出，再于

 

　　2007年获W3C接纳，并成立了新的HTML工作团队

 

　　在2008年1月22日，第一份正式草案发布。 WHATWG表示该规范是目前仍在进彳

 

　　的工作，仍须多年的努力

 

　　目前 Firefox、 Chrome、 Opera、 Safari（版本4以上）、 Internet Explorer9已支持

 

　　HTML5技术

 

　　HTML5的标准草案目前已进入W3C制定标准5大程序的第1步

 

　　负责编纂标准格式文件的 Google代表 clan hickson预期，可能得等到2012年才会推

 

　　出建议候选版

 

　　Htm标签

 

　　Video, audio

 

　　Video: ogg, mp4, webm audio: ogg, mp3,wav

 

　　demo

 

　　<video width=320"height=240controls=controls">

 

　　<source src="movie. ogg" type="video/ogg">

 

　　<source src="movie. mp4"type=" video/mp4">

 

　　Your browser does not support the video tag.

 

　　</video>

 

　　属性

 

　　autoplay, controls, loop, preload,src

 

　　Canvas

 

　　HTML5的 canvas元素使用 JavaScript在网页上绘制图像。

 

　　画布是一个矩形区域，您可以控制其每一像素。

 

　　canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

 

　　<canvas id="my Canvaswidth=200 height=100>

 

　　Your browser does not support the canvas element

 

　　</canvas>

 

　　圆

 

　　正方形

 

　　CXt begin Path（;

 

　　var c=document. getElementByld my Canvas"）;

 

　　cxtarc（70,18,15,0 Math.P|*2true//度弧度

 

　　var cxt=cget Context（2d）;

 

　　Cxt close Path（

 

　　cxt fillStyle=#FF0000

 

　　cxt. filo

 

　　CXt fill Rect（0, 0, 150, 75）

 

　　线

 

　　图片

 

　　线性渐变

 

　　var grd=cxt create Linear Gradient（0, 0, 175, 50）

 

　　CXt move To（10, 10）; var img=new Image（

 

　　grd. add Colorstop（0, #FF0000）;

 

　　cxt line To（150, 50）; img src="flower. png

 

　　cxt line To（10, 50）; cXt drawImage（img, 0,0）;

 

　　grd.add ColorStop（1,#0OFF00";

 

　　cxt fillstyle=grd

 

　　Cxt stroke （;

 

　　CXt fillRect（0, 0, 175, 50）;

 

　　Input

 

　　HTML5拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。

 

　　Email, url, number, range, Date pickers, search, color

 

　　Demo

 

　　E-mail: <input type="email"name=user email"/>

 

　　<input type="url"name="user url"/>

 

　　<input type="number"name="points"min=1 max=10/>

 

　　Max, min, step, value

 

　　< nput type=" range"name=“ points'”min=“1”max=“10″/>滑动条

 

　　<input type="date"name="user_ date"/>

 

　　date, month, week, time, datetime, datetime-ocal

 

　　Datalist, keygen, output

 

　　<input type=url" list="url_ list"name="link"/>

 

　　<datalist id=url list>

 

　　optionlabel="w3school"value=""/>

 

　　optionlabel="google"value=""/>

 

　　optionlabel="microsoft"value=""/>

 

　　</datalist>

 

　　Opera全部支持 chrome支持 keygen

 

　　keygen元素的作用是提供一种验证用户的可靠方法。

 

　　keygen元素是密钥对生成器（key- pair generator）。当提交表单时，会生成两个键，

 

　　个是私钥，一个公钥

 

　　私钥（ private key）存储于客户端，公钥（ public key）则被发送到服务器。公钥可用

 

　　于之后验证用户的客户端证书（ client certificate）。

 

　　浏览器对此元素的支持度不足

 

　　对比 Structs token令牌

 

　　output元素用于不同类型的输出，比如计算或脚本输出

 

　　1. autocomplete

 

　　2. novalidate

 

　　3. autocomplete

 

　　4. autofocus

 

　　5. Form

 

　　6. form overrides（formation, formenctype, formmethod, formnovalidate, formtarget

 

　　formation-重写表单的 action属性

 

　　formenctype-重写表单的 enctype属性

 

　　formmethod-重写表单的 method属性

 

　　formnovalidate-重写表单的 novalidate属性

 

　　formtarget-重写表单的 target属性

 

　　7. height和wdth

 

　　8. list

 

　　9.min,max和step

 

　　10. multiple

 

　　11. pattern（ regexp） pattern属性规定用于验证 input域的模式（ pattern）

 

　　12 Placeholder水印

 

　　<input type="search"name="user search"placeholder="Search W3School"/>

 

　　13. Required必填

 

　　14.

 

　　HTML5还包含了新的元素，比如：<nav>,< header>,< footer>以及< figure>等等。

 

　　HTML5标准属性

 

　　HTML5事件属性

 

　　键盘事件

 

　　鼠标事件

 

　　媒介事件

 

　　表单事件

 

　　cSs3选择器

 

　　ElattA=val"

 

　　子元素

 

　　PLatts="val"

 

　　奇偶选择器

 

　　Elatt*=val"

 

　　row: nth-child（even

 

　　E:root

 

　　background: #dde

 

　　h2: first-childI

 

　　div text divi.I

 

　　E:nth-child（n

 

　　E:nth-last-child（n）

 

　　row: nth-child（odd）t

 

　　h2+ header{…}

 

　　Einth-of-type（n）

 

　　background: white

 

　　E:nth-last-of-type（n）

 

　　反选

 

　　E:first-of-type

 

　　属性选择器

 

　　not（ box） i

 

　　E: only-child

 

　　color: #oOc

 

　　E:only-of-type

 

　　inputltype=text"]

 

　　E: empty

 

　　background: #eee

 

　　not（span（

 

　　E: first-child

 

　　display: block

 

　　E:last-child

 

　　E: checked

 

　　E:enabled

 

　　E:disabled

 

　　E:selection

 

　　E:not（s）

 

　　E: target（锚点）