android學(xué)習(xí)之使用html5開(kāi)發(fā)新的可視化

CSSJavaScriptrotate函數(shù)2的下半部分代碼新語(yǔ)義HTML5代碼形式的HTML5表單元素8.HTML5APIs的應(yīng)用function "-webkit-transform2sease-in-$("rtBtn").innerHTML=$("rtBtn").onclick=function()$("rtBtn").innerHTML=}}這個(gè)rotate函數(shù)使用JavaScript來(lái)更改應(yīng)用到名為formSection的div的CSS。（注意：您正在將$()用作 ementById()的一個(gè)別名。）要旋轉(zhuǎn)這個(gè)div，將它的-webkit-transform樣式設(shè)置為rotateZ(-5deg)，將其逆時(shí)針旋轉(zhuǎn)5度。接下來(lái)，將-webkit-transform 。在圖3中，左邊顯示W(wǎng)hat'syourname?字段旋轉(zhuǎn)之前的初始位置；右邊顯示該字段部分旋轉(zhuǎn)后的視覺(jué)效果及其Undo按鈕。3HTML元Chrome、Safari4OperaHTML5的瀏覽器上的實(shí)5顯示了相關(guān)代碼。<!DOCTYPE<styleh2background:-webkit-gradient(radial,4300,43050,200,-webkit-box-reflect:below5px-gradient(linear,lefttop, }color:background:}text-shadow:#6374AB4px-4pxwidth:height:overflow:text-overflow:border:1pxsolidborder-radius:}.abcborder:1pxsolidborder-radius:-webkit-column-rule:1pxsolid}<body<h2>TheGettysburg<h3>AbrahamLincoln,Gettysburg,PA.19,<divFourscoreandsevenyearsagoourfathersbroughtforthoncontinentanewnation,conceivedinliberty,anddedicatedthepropositionthatallmenarecreated<divNowweareengagedinagreatcivilwar,testingwhethernation,oranynation,soconceivedandsodedicated,canendure.Wearemetonagreatbattle-fieldofthatwar.Wecometodedicateaportionofthatfield,asafinalceforthosewhoheregavetheirlivesthatthatnationlive.Itisaltogetherfittingandproperthatweshoulddo我們來(lái)逐個(gè)看看這個(gè)代碼中的元素。首先，為“The使用-webkit-text-fill-color、-webkit-text-stroke-帶藍(lán)”的效果。 5個(gè)像素處反射標(biāo)題，并對(duì)倒影2，您將看到，Android瀏覽器不rgba函數(shù)來(lái)指定“紅-綠-藍(lán)”值，以及一個(gè)alpha1.00.0 5中的下一部分是這篇短文的第一段。文本周圍border-radius樣式來(lái)實(shí)現(xiàn)4個(gè)圓角?，F(xiàn)在，您在Web上到處都能看到這樣的圓角，它們通常使用圖像來(lái)實(shí)現(xiàn)。與使用CSS3.0來(lái)實(shí)現(xiàn)相比，這種方法真是太老土了。通過(guò)使用text-shadow樣式來(lái)向這個(gè)段落的文本應(yīng)用一個(gè)陰影。最后，注意段落區(qū)域受到了父div的高度和寬度的限制，文本太大了。與在一些較老的瀏覽器中看到的那樣直接截除文本相反，通過(guò)設(shè)置text-overflow樣式可以獲得一個(gè)美觀的省略號(hào)（...）效果。-webkit-column-count樣式，并設(shè)-webkit-column-rule樣式來(lái)獲取這些CSS3.0特 建簡(jiǎn)單的headers和footers（它們二者也是HTML5中的新元素）時(shí)，這也可能是一個(gè)很有用的特性?？匆幌滤鼈円约坝蒆TML5引入的其他一HTML5HTML元素將導(dǎo)致瀏覽器提供一些新的呈現(xiàn)處理。其他一些元素將添加一些稍后可以通過(guò)JavaScript變得可用的額外特性。但是，另外一些元素則不具備上述兩種功能。它們與<span>、<div><p>看起來(lái)一樣，且擁有相同的編程接口。但是，它們將添加額外的語(yǔ)義含義。這些新語(yǔ)義對(duì)于頁(yè)面的非視覺(jué)用戶（包括使用屏幕閱讀器這樣的輔助技術(shù)的用戶）和搜索引擎爬蟲這樣的計(jì)算機(jī)程他們編寫表現(xiàn)力更強(qiáng)的CSS4展示了一個(gè)使用一些新語(yǔ)義元素的Web頁(yè)面。圖 上的一些新HTML5元4header元素、幾個(gè)navarticlesection元素、aside元素。這些元素不會(huì)導(dǎo)致任何特殊4中顯示的的代碼如6所示。<!DOCTYPE<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"> <metaname="viewport"content="width=device-width;initial-scale=1.0;um-scale=1.0;user- <metaname="apple-touch-fullscreen"content="YES"/><title>Getthelatest<headerstyle="border:1pxdotted#000;border-<hgroup shave<h2>Eveniftheydon'tsaycolumn-rule:1pxsolid<ahref="new-<a<a <h1>Therearealotofnewmarkupelementsin<timedatetime="2010-05-16"pubdate>Sunday,<section>DidyounoticethatwejusthadtwoButit's<asidestyle="white-overflow:ellipsis;"Ifthispagewasreallypopular,I'dputanadheremakeseriousnav創(chuàng)建幾個(gè)分隔符。您還在aside上使用了文本溢出樣式。這里的關(guān)鍵點(diǎn)是：然后，您可以像使用了<div>和<span>一樣顯 的文本版本。）圖5. 上使用HTML5創(chuàng)建的表5HTML5中可用的許多新6OperaHTML5表單元OperaHTML5單4和 5的代碼，以便您更好地理解Opera 7顯示了這□□□□□□ " " <label<inputid="phone"name="phone" "required<labelfor="dob">Dateof<inputid="dob"name="dob"type="date"<fieldsetstyle="border:1pxdotted#000;border- <legend>PreferredContact □<input Meth"□□□□<label □

<inputid="phoneMeth"<label<labelfor="climate">Preferredexternal<inputid="climate"name="climate"type="range"max="100"step="5"<labelfor="color">Favorite<inputid="color"name="color"<labelfor="referrer">Where'dyouhearabout<inputtype="url"name="refUrl"id="referrer"<datalist<optionlabel="TechCrunch"□<optionlabel="ReadWrite□ □<option□ <optionlabel="Ajaxian" <button 7formHTML5的許多新特性。注意兩個(gè)新屬性：requiredautofocus。required屬性用于表單驗(yàn)證（下面將詳細(xì)介紹）過(guò)程中，autofocus屬性允許選擇頁(yè)面上的元 ceholder文本的元素。這 多年來(lái)一直在使用的一個(gè)模式—將某個(gè)示例或解釋性文本放置到一個(gè)文本框中—但開(kāi)發(fā)人員總是必須修改（hack）該代碼。圖4展示了 ,phone,date,range,color,和url?，F(xiàn)在，這些類型在 Android瀏覽器上總是呈現(xiàn)為文本字段，但那只是使用語(yǔ)義不太準(zhǔn)確的HTML4.0創(chuàng)建它們的樣子。圖5展示了它們未來(lái)的可能外觀。date輸入在Opera上展示其新UI（一個(gè)彈出式日歷）前必須獲得焦點(diǎn)。這對(duì)于圖7中的url輸入也同樣適用，但原因不在于它是url輸入，而是它擁有一個(gè)list屬性。該屬性指向datalist來(lái)自datalist的可能值（本例中是幾個(gè)URL）。圖7展示了date和datalist特性。7HTML5輸隨著Webkit持續(xù)快速發(fā)展，可以預(yù)見(jiàn)，許多輸入類型將允許更有用供驗(yàn)證，HTML5擁有一組完整的新驗(yàn)證APIs。這些特性目前還沒(méi) 或基于Android的設(shè)備上實(shí)現(xiàn)，但已經(jīng)在它們的桌面8APIsvarinputs varlen=vari=varinput=varerrors=forinput=if(input.nodeName==ifif}}}} varerrMsg="Thereare"+errors.length+"varnotify=varnotificationifif}else}}else}}每個(gè)輸入元素?fù)碛幸粋€(gè)validity屬性?？梢允褂眠@個(gè)屬性，或者，也可以使用返回ture或false的checkValidity()函數(shù)以及validationMessage屬性來(lái)獲取一條本地錯(cuò)誤消息。在本文撰寫之 一致或標(biāo)準(zhǔn)的消息，因此，它的用途有限。validity對(duì)象可用于檢查不同類型的錯(cuò)誤，比如valueMissing、rangeOverflow、rangeUnderflow、patternMismatch和tooLong。例如，如果元最后，注意，在8中，您在明確所有的驗(yàn)證錯(cuò)誤之后，將嘗知類似，可用于Chrome中。因此，您同樣可以期望它們將很快應(yīng)用于Android瀏覽器。API的使用很簡(jiǎn)單明 ；反之，則傳遞想被調(diào)用的在本文中，您快HTML5中許UI相關(guān)的新特性：從新元素到新樣式再到繪圖畫布。這些特性（除了文末提到的幾個(gè)例外之外）都可用 基于Android設(shè)備上發(fā)現(xiàn)的基于Webkit的瀏覽器上。Bl