天天看點

《jQuery Mobile入門經典》—— 2.1 使用HTML建立内容

本節書摘來異步社群《jquery mobile入門經典》一書中的第2章,第2.1節,作者:【美】phil dutson,更多章節内容可以通路雲栖社群“異步社群”公衆号檢視。

jquery mobile入門經典

html是web的基本構件。它是支撐整個網站的架構結構,也是讓您随意擴充網站的基礎。html自誕生以來已經取得長足的進步,并将繼續演進和發展。

在層疊樣式表單(css)引入之前,html标記處理所有東西。圖像、文本、布局以及滾動的文本,幾乎所有東西都由html标記來表示。您可能還記得在浏覽器中檢視源代碼時,看到許多用于布局用途的   字元實體。

随着開發者熱切期望探索新的領域并推動語言的發展,事情不斷變得更加複雜。基于表格的布局出現了,使得在如何顯示一個網站方面更具靈活性和操控性。表格布局廣泛地流行開來。它使得能夠設計靈活的、自動調整大小的版塊以及更加動态的網頁流。當時css還是新事物,它在浏覽器中獲得的支援還比較有限。這使得給容器和表單添加樣式還比較困難。然後一些輕量的css開始引入,但還不能完全取代表格布局的容器、标記以及其他一些隻用于樣式的标記。

web開發者們不斷地探尋浏覽器渲染html的方式。這個程序以及開發社群采納的标準幫助推動了各類可用的網絡浏覽器的進步。很快,大部分浏覽器已經至少基本支援css 2。這很快引起了有關應該如何真正地在網站開發中使用html的大讨論。

在介紹了html發展曆程之後,繼續讨論doctype(文檔類型)。這是一個有趣的标記,添加它的目的是讓浏覽器知道如何渲染頁面。

盡管它實際上不是html标記,不過它是為了正确渲染和處理網站所需的組成部分。

對于那些仍然樂意使用不被推薦的html标記,但希望轉到html 4的開發者,可以使用transitional文檔類型。

《jQuery Mobile入門經典》—— 2.1 使用HTML建立内容

transitional文檔類型允許浏覽器解析不被推薦的标記并顯示它們,不會抛出任何 錯誤。

對于那些不想支援不推薦的标記,也不想在使用“相容”模式時産生潛在格式錯誤的開發者,可以使用strict文檔類型

《jQuery Mobile入門經典》—— 2.1 使用HTML建立内容

使用strict文檔類型會告訴浏覽器,當它嘗試載入的html檔案中包含不被推薦的标記時,将抛出錯誤資訊。這很有用,因為它保證網站至少适合html 4标準。

《jQuery Mobile入門經典》—— 2.1 使用HTML建立内容

有些javascript庫的插件對網站是使用transitional文檔類型還是strict文檔類型比較敏感。如果在使用的javascript庫或插件沒有像與示範網站一樣的方式運作,那麼嘗試改變doctype,看看它是否神奇地如預期一樣開始工作。

對于目前希望迎合現代浏覽器和移動浏覽器的開發者來說,html5文檔類型是理所當然的選擇。

使用html5文檔類型可以運作在幾乎所有的老式浏覽器上,而且現在的許多網站已經在使用了。

要在html檔案中使用html5文檔類型,可使用如下代碼段。

《jQuery Mobile入門經典》—— 2.1 使用HTML建立内容

是的,這真的就是在網站使用html5文檔類型所需的所有東西。沒有什麼瘋狂的、冗長的或複雜的東西。

更驚喜的是,老式浏覽器對此也有基本的支援。它不會把浏覽器置于完全的怪異模式中,而是更多地使用部分怪異模式,通常不會打亂網站的格式。

在已将文檔類型添加到頁面之後,可以開始建立一個html文檔的基本結構。程式清單2.1是一個使用html5文檔類型的html文檔所需的元素。

《jQuery Mobile入門經典》—— 2.1 使用HTML建立内容

如程式清單2.1所示,一個html文檔的基本結構确實很簡單。在第1行聲明html5文檔類型,使檢視此文檔的浏覽器知道如何解析文檔的其餘部分。在第2行,以html元素開頭。所有需要使用的有效的html标記都必須包含在此元素中。第3行包含了head元素的開始标記和結束标記。通常,head元素可包含title元素、meta标記、css檔案的連結、javascript檔案的連結和一些其他自定義的或特有的标記。第4行包含了body元素的開始标記和結束标記。body元素包含所有的結構,或者說網站的骨架。除了标準的html元素,如p、div和ul之外,body元素還可以包含内聯的javascript和外部javascript的連結。第5行關閉了html元素且結束了html文檔。

《jQuery Mobile入門經典》—— 2.1 使用HTML建立内容

直到所有在head元素調用的檔案都下載下傳完畢并放入記憶體,網頁才會停止加載。如果在head元素中包含了大檔案或加載緩慢的腳本,可能會給使用者造成加載緩慢或無法加載的感覺。除非這些檔案對網頁的功能來說是必需的,否則最好把大的javascript檔案放于body的結束标記之前。

目前對于正确地使用html與css的觀點是采用内容與表現分離的形式。這是一個好主意,因為你可以輕松地建立主題,然後隻需改變樣式而不是内容,就可以改變網站的整體外觀。一些網站遵循此模型,并且有多個不同的樣式表,進而可以讓使用者切換網站的“主題”。

内容完全地(或者盡可能近乎完全地)由html進行處理,而任何影響資料顯示或呈現給最終使用者的方式的工作,則由css來處理。

曾經用于改變字型和文本顯示方式的html标記在html 4中被棄用,現在将其替換為新标記,試圖描述置于其中的内容。

下面是已被棄用但在html5中再次生效的元素。

繼續閱讀