您好,欢迎访问三七文档
HTML5入门吴君星Web技术大致的时间轴1991HTML1994HTML21996CSS1+JavaScript1997HTML41998CSS22000XHTML12002使用DIV+CSS进行网页布局2005AJAX2009HTML5HTML5~=HTML+CSS+JSAPIsHtml5的发展其实是html,css,jsapi的发展HTML5草案的前身名为WebApplications1.0,是在2004年由WHATWG提出,再于2007年获W3C接纳,并成立了新的HTML工作团队。在2008年1月22日,第一份正式草案发布。WHATWG表示该规范是目前仍在进行的工作,仍须多年的努力。目前Firefox、Chrome、Opera、Safari(版本4以上)、InternetExplorer9已支持HTML5技术。HTML5的标准草案目前已进入W3C制定标准5大程序的第1步。负责编纂标准格式文件的Google代表IanHickson预期,可能得等到2012年才会推出建议候选版。Html标签Video,AudioVideo:ogg,mp4,webmaudio:ogg,mp3,wavdemovideowidth=320height=240controls=controlssourcesrc=movie.oggtype=video/oggsourcesrc=movie.mp4type=video/mp4Yourbrowserdoesnotsupportthevideotag./video属性autoplay,controls,loop,preload,src=html5_video_all=html5_audio_allCanvasHTML5的canvas元素使用JavaScript在网页上绘制图像。画布是一个矩形区域,您可以控制其每一像素。canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。canvasid=myCanvaswidth=200height=100Yourbrowserdoesnotsupportthecanvaselement./canvas正方形varc=document.getElementById(myCanvas);varcxt=c.getContext(2d);cxt.fillStyle=#FF0000;cxt.fillRect(0,0,150,75);线cxt.moveTo(10,10);cxt.lineTo(150,50);cxt.lineTo(10,50);cxt.stroke();://圆cxt.beginPath();cxt.arc(70,18,15,0,Math.PI*2,true);/度,弧度cxt.closePath();cxt.fill();线性渐变vargrd=cxt.createLinearGradient(0,0,175,50);grd.addColorStop(0,#FF0000);grd.addColorStop(1,#00FF00);cxt.fillStyle=grd;cxt.fillRect(0,0,175,50);图片varimg=newImage()img.src=flower.pngcxt.drawImage(img,0,0);InputHTML5拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。Email,url,number,range,Datepickers,search,colorDemoE-mail:inputtype=emailname=user_email/=html5_form_emailinputtype=urlname=user_url/inputtype=numbername=pointsmin=1max=10/Max,min,step,value=html5_form_numberinputtype=“range”name=“points”min=“1”max=“10”/滑动条=html5_form_rangeinputtype=datename=user_date/date,month,week,time,datetime,datetime-local=html5_form_datetime-localDatalist,keygen,outputinputtype=urllist=url_listname=link/datalistid=url_listoptionlabel=W3Schoolvalue==Googlevalue==Microsoftvalue=全部支持chrome支持keygenkeygen元素的作用是提供一种验证用户的可靠方法。keygen元素是密钥对生成器(key-pairgenerator)。当提交表单时,会生成两个键,一个是私钥,一个公钥。私钥(privatekey)存储于客户端,公钥(publickey)则被发送到服务器。公钥可用于之后验证用户的客户端证书(clientcertificate)。浏览器对此元素的支持度不足对比Structstoken令牌output元素用于不同类型的输出,比如计算或脚本输出://html5.zqcampus.com/article/view141.autocomplete2.novalidate3.autocomplete4.autofocus5.Form6.formoverrides(formaction,formenctype,formmethod,formnovalidate,formtarget)formaction-重写表单的action属性formenctype-重写表单的enctype属性formmethod-重写表单的method属性formnovalidate-重写表单的novalidate属性formtarget-重写表单的target属性=html5_form_override7.height和width8.list9.min,max和step10.multiple11.pattern(regexp)pattern属性规定用于验证input域的模式(pattern)12.Placeholder水印inputtype=searchname=user_searchplaceholder=SearchW3School/13.Required必填14.=html5_form_requiredHTML5还包含了新的元素,比如:nav,header,footer以及figure等等。标准属性事件属性键盘事件鼠标事件媒介事件表单事件选择器奇偶选择器.row:nth-child(even){background:#dde;}.row:nth-child(odd){background:white;}属性选择器input[type=text]{background:#eee;}子元素h2:first-child{...}div.textdiv{...}h2+header{...}反选:not(.box){color:#00c;}:not(span){display:block;}E[att^=val]E[att$=val]E[att*=val]E:rootE:nth-child(n)E:nth-last-child(n)E:nth-of-type(n)E:nth-last-of-type(n)E:first-of-typeE:only-childE:only-of-typeE:emptyE:first-childE:last-childE:checkedE:enabledE:disabledE::selectionE:not(s)E:target(锚点)E~F浏览器引擎Webkit,Safari,GoogleChrome,傲游3,(开源)Gphone,IPHone,Nokia’sSeries60browserGecko,FirefoxPresto:OperaTrident:IE,(ie6,7,8不支持css3,只有ie9支持)Webkit:-webkit-border-radiusGecko:-moz-border-radiusPresto:-o-border-radiusTrident:border-radius(引用htc文件).test{border-radius:20px;behavior:url(ie-css3.htc);”绝对路径”}DemoHtc:://@font-face{font-style:设置文本样式。font-variant:设置文本是否大小写。font-weight:设置文本的粗细。font-stretch:设置文本是否横向的拉伸变形。font-size:设置文本字体大小。src:设置自定义字体的相对路径或者绝对路径}@font-face能够加载服务器端的字体文件,让客户端显示客户端所没有安装的字体(eot,otf)Style@font-face{font-family:Runic;src:url(RUNICMT0.eot);}@font-face{font-family:Kingston;src:url(KINGSTON.eot);}.king{FONT-SIZE:45pt;FONT-FAMILY:Kingston}.border{FONT-SIZE:35px;COLOR:black;FONT-FAMILY:BorderWeb}/styletext-overflowclip:不显示省略标记(...),而是简单的裁切。ellipsis:当对象内文本溢出时显示省略标记(...)columns:宽度||栏目数column-width,可以定义每栏
本文标题:HTML5入门
链接地址:https://www.777doc.com/doc-5327596 .html