android學習之使用html5開發(fā)新的可視化

CSSJavaScriptrotate函數(shù)2的下半部分代碼新語義HTML5代碼形式的HTML5表單元素8.HTML5APIs的應用function "-webkit-transform2sease-in-$("rtBtn").innerHTML=$("rtBtn").onclick=function()$("rtBtn").innerHTML=}}這個rotate函數(shù)使用JavaScript來更改應用到名為formSection的div的CSS。（注意：您正在將$()用作 ementById()的一個別名。）要旋轉這個div，將它的-webkit-transform樣式設置為rotateZ(-5deg)，將其逆時針旋轉5度。接下來，將-webkit-transform 。在圖3中，左邊顯示What'syourname?字段旋轉之前的初始位置；右邊顯示該字段部分旋轉后的視覺效果及其Undo按鈕。3HTML元Chrome、Safari4OperaHTML5的瀏覽器上的實5顯示了相關代碼。<!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我們來逐個看看這個代碼中的元素。首先，為“The使用-webkit-text-fill-color、-webkit-text-stroke-帶藍”的效果。 5個像素處反射標題，并對倒影2，您將看到，Android瀏覽器不rgba函數(shù)來指定“紅-綠-藍”值，以及一個alpha1.00.0 5中的下一部分是這篇短文的第一段。文本周圍border-radius樣式來實現(xiàn)4個圓角?，F(xiàn)在，您在Web上到處都能看到這樣的圓角，它們通常使用圖像來實現(xiàn)。與使用CSS3.0來實現(xiàn)相比，這種方法真是太老土了。通過使用text-shadow樣式來向這個段落的文本應用一個陰影。最后，注意段落區(qū)域受到了父div的高度和寬度的限制，文本太大了。與在一些較老的瀏覽器中看到的那樣直接截除文本相反，通過設置text-overflow樣式可以獲得一個美觀的省略號（...）效果。-webkit-column-count樣式，并設-webkit-column-rule樣式來獲取這些CSS3.0特 建簡單的headers和footers（它們二者也是HTML5中的新元素）時，這也可能是一個很有用的特性。看一下它們以及由HTML5引入的其他一HTML5HTML元素將導致瀏覽器提供一些新的呈現(xiàn)處理。其他一些元素將添加一些稍后可以通過JavaScript變得可用的額外特性。但是，另外一些元素則不具備上述兩種功能。它們與<span>、<div><p>看起來一樣，且擁有相同的編程接口。但是，它們將添加額外的語義含義。這些新語義對于頁面的非視覺用戶（包括使用屏幕閱讀器這樣的輔助技術的用戶）和搜索引擎爬蟲這樣的計算機程他們編寫表現(xiàn)力更強的CSS4展示了一個使用一些新語義元素的Web頁面。圖 上的一些新HTML5元4header元素、幾個navarticlesection元素、aside元素。這些元素不會導致任何特殊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)建幾個分隔符。您還在aside上使用了文本溢出樣式。這里的關鍵點是：然后，您可以像使用了<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的許多新特性。注意兩個新屬性：requiredautofocus。required屬性用于表單驗證（下面將詳細介紹）過程中，autofocus屬性允許選擇頁面上的元 ceholder文本的元素。這 多年來一直在使用的一個模式—將某個示例或解釋性文本放置到一個文本框中—但開發(fā)人員總是必須修改（hack）該代碼。圖4展示了 ,phone,date,range,color,和url?，F(xiàn)在，這些類型在 Android瀏覽器上總是呈現(xiàn)為文本字段，但那只是使用語義不太準確的HTML4.0創(chuàng)建它們的樣子。圖5展示了它們未來的可能外觀。date輸入在Opera上展示其新UI（一個彈出式日歷）前必須獲得焦點。這對于圖7中的url輸入也同樣適用，但原因不在于它是url輸入，而是它擁有一個list屬性。該屬性指向datalist來自datalist的可能值（本例中是幾個URL）。圖7展示了date和datalist特性。7HTML5輸隨著Webkit持續(xù)快速發(fā)展，可以預見，許多輸入類型將允許更有用供驗證，HTML5擁有一組完整的新驗證APIs。這些特性目前還沒 或基于Android的設備上實現(xiàn)，但已經在它們的桌面8APIsvarinputs varlen=vari=varinput=varerrors=forinput=if(input.nodeName==ifif}}}} varerrMsg="Thereare"+errors.length+"varnotify=varnotificationifif}else}}else}}每個輸入元素擁有一個validity屬性?？梢允褂眠@個屬性，或者，也可以使用返回ture或false的checkValidity()函數(shù)以及validationMessage屬性來獲取一條本地錯誤消息。在本文撰寫之 一致或標準的消息，因此，它的用途有限。validity對象可用于檢查不同類型的錯誤，比如valueMissing、rangeOverflow、rangeUnderflow、patternMismatch和tooLong。例如，如果元最后，注意，在8中，您在明確所有的驗證錯誤之后，將嘗知類似，可用于Chrome中。因此，您同樣可以期望它們將很快應用于Android瀏覽器。API的使用很簡單明 ；反之，則傳遞想被調用的在本文中，您快HTML5中許UI相關的新特性：從新元素到新樣式再到繪圖畫布。這些特性（除了文末提到的幾個例外之外）都可用 基于Android設備上發(fā)現(xiàn)的基于Webkit的瀏覽器上。Bl