這篇文章主要介紹了HTML5相關知識點,具有一定借鑒價值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
成都創(chuàng)新互聯(lián)公司是創(chuàng)新、創(chuàng)意、研發(fā)型一體的綜合型網站建設公司,自成立以來公司不斷探索創(chuàng)新,始終堅持為客戶提供滿意周到的服務,在本地打下了良好的口碑,在過去的十載時間我們累計服務了上千家以及全國政企客戶,如成都服務器租用等企業(yè)單位,完善的項目管理流程,嚴格把控項目進度與質量監(jiān)控加上過硬的技術實力獲得客戶的一致贊譽。
SGML(標準通用標記語言)和HTML(超文本標記語言),XML(可擴展標記語言)和HTML的之間有什么關系?
SGML(標準通用標記語言)是一個標準,告訴我們怎么去指定文檔標記。他是只描述文檔標記應該是怎么樣的元語言,HTML是被用SGML描述的標記語言。
因此利用SGML創(chuàng)建了HTML參照和必須共同遵守的DTD,你會經常在HTML頁面的頭部發(fā)現(xiàn)“DOCTYPE”屬性,用來定義用于解析目標DTD
現(xiàn)在解析SGML是一件痛苦的事情,所以創(chuàng)建了XML使事情更好。XML使用了SGML,例如:在SGML中你必須使用起始和結束標簽,但是在XML你可以有自動關閉的結束標簽。
XHTML創(chuàng)建于XML,他被使用在HTML4.0中。你可以參考下面代碼片段中展示的XML DTD
總之,SGML是所有類型的父類,較舊的HTML利用SGML,HTML4.0使用派生自XML的XHTML
HTML5是最新的HTML標準,他的主要目標是提供所有內容而不需要任何的像flash,silverlight等的額外插件,這些內容來自動畫,視頻,富GUI等
HTML5是萬維網聯(lián)盟(W3C)和網絡超文本應用技術工作組(WHATWG)之間合作輸出的
HTML5沒有使用SGML或者XHTML,他是一個全新的東西,因此你不需要參考DTD,對于HTML5,你僅需放置下面的文檔類型代碼告訴瀏覽器識別這是HTML5文檔
不會,瀏覽器將不能識別他是HTML文檔,同時HTML5的標簽將不能正常工作
幾乎所有的瀏覽器Safari,Chrome,F(xiàn)irefox,Opera,IE都支持HTML5
一個典型的WEB頁面包含頭部,腳部,導航,中心區(qū)域,側邊欄?,F(xiàn)在如果我們想在在HTML4的HTML區(qū)域中呈現(xiàn)這些內容,我們可能要使用p標簽。
但是在HTML5中通過為這些區(qū)域創(chuàng)建元素名稱使他們更加清晰,也使得你的HTML更加可讀
以下是形成頁面結構的HTML5元素的更多細節(jié):
HTML5中的Datalist元素有助于提供文本框自動完成特性,如下圖所示:
以下是DataList功能的HTML代碼:
這里有10個重要的新的表單元素在HTML5中被介紹
Color
Date
Datetime-local
Email
Time
Url
Range
Telephone
Number
Search
讓我們一步一步了解這10個元素
如果你想顯示顏色選擇對話框
如果你想顯示日歷對話框
如果你想顯示含有本地時間的日歷
如果你想創(chuàng)建一個含有email校驗的HTML文本框,我們可以設置類型為“email”
對于URL驗證設置類型為”url”,如下圖顯示的HTML代碼
如果你想用文本展示數(shù)字范圍,你可以設置類型為“number”
如果你想顯示范圍控制,你可以使用類型”range”
想讓文本框作為搜索引擎
想只能輸入時間
如果你想使用文本框接受電話號碼
當你需要計算兩個輸入的和值到一個標簽中的時候你需要輸出元素。例如你有兩個文本框(如下圖),你想將來自這兩個輸入框中的數(shù)字求和并放到標簽中。
下面是如何在HTML5中使用輸出元素的代碼
為了簡單起見,你也可以使用“valueAsNumber”來代替“parseInt”。你同樣能在output元素中使用“for”使其更加可讀
SVG(可縮放矢量圖形(Scalable Vector Graphics))表示可縮放矢量圖形。他是基于文本的圖形語言,使用文本,線條,點等來進行圖像繪制,這使得他輕便,顯示更加迅速。
比方說,我們希望使用HTML5 SVG去顯示以下簡單的線條
下面是HTML5代碼
Canvas是HTML中你可以繪制圖形的區(qū)域。
定義Canvas區(qū)域
獲取訪問canvas上下文區(qū)域
繪制圖形
定義Canvas區(qū)域
定義Canvas區(qū)域你需要使用下面的HTML代碼,這定義了你能進行繪圖的區(qū)域
獲取畫布區(qū)域的訪問
在畫布上進行繪圖我們首先需要獲取上下文區(qū)域的關聯(lián),下面是獲取畫布區(qū)域的代碼。
var c=document.getElementById("mycanvas"); var ctx=c.getContext("2d");
繪制圖形
現(xiàn)在一旦你獲取了訪問上下文,我們就可以開始在上下文中繪制了。首先調用“move”方法并從一個點開始,使用線條方法繪制線條然后使用stroke方法結束。
ctx.moveTo(10,10); ctx.lineTo(200,100); ctx.stroke();
以下是完整的代碼