HTML是最流行的Web前端開發技術之一,它是一種用于創建網頁和 Web 應用程序的標記語言。HTML與CSS和JavaScript結合使用以創建有吸引力且響應迅速的前端網頁。
HTML 提供了幾個不同的元素,如 <head>、<body>、<p>、<img>、<a> 等,它們充當網站的構建塊,瀏覽器使用這些 HTML 元素來解釋和表示網頁上的內容。
HTML 概述
HTML(超文本標記語言)是Web瀏覽器理解并用于呈現網頁的語言。在不同元素的幫助下,HTML 決定了網頁的外觀和顯示內容。超文本標記語言 (HTML) 是一種用于創建獨立于平臺的超文本文檔的簡單標記語言。
HTML 文檔是具有通用語義的 SGML(標準通用標記語言)文檔,可用于表示來自各種學科的數據。HTML 標記可用于創建超文本郵件、文檔、新聞和超媒體;選項菜單;數據庫查詢結果;帶有內嵌圖形的簡單結構化文檔;和現有數據集的超文本視圖。
HTML 語言的主要用途
輕松瀏覽互聯網
超文本允許你訪問 Internet 上的不同頁面,尤其是在你沒有記住所有 URL 的情況下。你只需單擊鏈接或在地址字段中輸入 URL 即可瀏覽互聯網。超文本對于引導用戶瀏覽你的網站并充當網關至關重要,以便他們知道存在不同的頁面并可以在它們之間導航。如果不使用超文本,用戶很難檢測到網站上是否還有其他網頁。
尖端功能
HTML 支持 Polyfill 功能,它是一種允許你在 HTML 中本地使用不同技術的代碼。你可以使用此功能復制未來的API,同時為過時版本的瀏覽器提供回退功能;你可以自定義polyfill庫以滿足你的特定要求并執行其他人從未做過的事情。HTML 的這些尖端特性是HTML有如此多用途的原因。
創建 Web 文檔
網頁只是一個Web文檔,你可以在其中編寫你希望用戶看到的材料,然后將其包裝在指示機器如何格式化整個內容的代碼中。這會告訴你的瀏覽器標題、正文和元數據中的文本,它帶有標簽,因此計算機知道如何處理你提供的信息。
數據輸入
你擁有執行任何數據輸入任務所需的所有 API。作為開發人員,你只需在相關字段中添加標簽,例如文本和數據格式,你甚至可以提供屏幕鍵盤和驗證,確保為用戶提供流暢和愉快的體驗。
游戲開發
游戲開發是 HTML 的重要用途之一。盡管不再支持Flash,但HTML仍可用于創建基于瀏覽器的游戲。你使用的API不必完全實現,但可以使用最必要的組件,同時去掉了其余的功能,帶來了更輕松的體驗。由于HTML5的進步,HTML正迅速成為最流行的游戲編程語言之一。
離線存儲
如果你的一些用戶不在線怎么辦?在最新版本的HTML中找到的應用程序緩存方法的幫助下,你仍然可以使你的應用程序運行。應用程序緩存負責各種離線功能,包括各種組件,包括需要更新的API調用。通過清單文件,你可以控制瀏覽器對其離線使用的操作,甚至它使用的資源。
原生API使用
API代表“應用程序編程接口”,這是兩個不同應用程序相互通信的一種方式。通過使用API,HTML包括地理定位、事件管理、拖放和更多功能,HTML編程現在比以往任何時候都更強大。開發人員還可以使用具有異步特性的現代在線應用程序。
在客戶端存儲東西
IndexDB和Localstorage 使在客戶端存儲文件更簡單、更高效,這些都有自己的一套強大的功能。
Localstorage支持setItem、getItem 和removeItem方法,以及基于字符串的哈希表存儲。IndexDB帶有更多的存儲空間,你可以在用戶許可的情況下增加。
方便使用的
與其他編程語言不同,HTML以用戶友好而聞名,即使對于初學者也是如此,所以,這也是HTML的主要用途之一。HTML中有語義組件來描述它們所具有的內容類型,例如,頁眉、頁腳、主要、摘要和時間等HTML常用標簽是自描述的。
可訪問的富Internet應用程序
HTML5語義標簽的使用使網站搜索引擎和屏幕閱讀器友好,如果正確使用語義標簽,視障人士可以使用屏幕閱讀器從網頁中獲取信息。
結論
在這篇博客中,我們講述了HTML的所有重要用途,它通常是Web開發人員學習的第一語言,所以,如果你想學習Web編程并且害怕學習HTML的難度,你不必擔心,HTML非常容易學習。
TA
HTA,全稱HTML Application(HTML應用程序),這是微軟弄出來的一個概念。簡單來說,HTA就是可以讓普通的網頁具備像exe一樣的可執行能力,只要雙擊這個網頁就直接運行, 而且你看不到瀏覽器的身影,而是像一個獨立的軟件。
我們先來看一段hta代碼:
<html>
<head>
<meta charset="utf-8">
<title>Hello world</title>
<style>
body {font-size:30px;font-family:微軟雅黑;background:darkblue;}
ul{list-style:none;}
ul li{float:left;width:200px;height:200px;border:1px solid;margin:30px;text-align:center;background:#fff;}
</style>
</head>
<body>
<ul>
<li>通知公告</li>
<li>辦事指南</li>
<li>填表范例</li>
<li>法規查詢</li>
</ul>
</body>
</html>
暈!這不就是一個HTML嗎?對,完全一樣。我們把這個頁面保存為“test.hta”,可以看到桌面上的圖標會跟網頁圖標不同,顯示的是一個跟cmd一樣的可執行程序的圖標。
直接雙擊打開“test.hta”,效果如下:
可以看到,它的界面跟一個普通的應用程序沒有多大差別。除了擴展名之外,HTA還有一個自己專有的標簽,通過這個標簽你可以定義窗口顯示的風格,例如是否顯示菜單欄、是否全屏顯示、是否顯示滾動條等。我們在上面的代碼中增加一些東西:
<html>
<head>
<meta charset="utf-8">
<HTA:APPLICATION ID="oHTA" APPLICATIONNAME="myApp" WINDOWSTATE="maximize" CAPTION="no" BORDER="none" INNERBORDER="no" SINGLEINSTANCE="yes" SCROLL="no">
<title>Hello world</title>
<style>
body {font-size:30px;font-family:微軟雅黑;background:darkblue;}
ul{list-style:none;}
ul li{float:left;width:200px;height:200px;border:1px solid;margin:30px;text-align:center;background:#fff;}
</style>
<script language="JavaScript">
document.onmousedown=function click() {
if (event.button==2) {window.close();}
};
</script>
</head>
<body>
<ul>
<li>通知公告</li>
<li>辦事指南</li>
<li>填表范例</li>
<li>法規查詢</li>
</ul>
</body>
</html>
當你再次打開的時候,它變成了全屏顯示了,而且標題欄也沒有了。為了便于你關閉窗口,所以這里加了點擊鼠標右鍵關閉窗口的腳本。
<HTA>標簽的具體用法請參考以下網址:
https://msdn.microsoft.com/en-us/library/ms536473(vs.85).aspx
那為什么改一下擴展名就能夠直接運行呢?看一下任務管理器你就知道怎么回事了:
原來我們真正啟動的是mshta.exe,然后再由它來執行hta文件。
你甚至還可以在HTA中通過iframe來嵌套其他網頁,這樣它就可以作為一個無邊框的瀏覽器使用了。
HTA有什么用途呢?例如,我們可以用它來制作一個觸摸顯示屏程序(例如在辦事大廳中我們用到的排隊取號機),當然,借助一些第三方工具,你還可以將其及相關資源(如圖片)進行打包,變成一個exe程序。
不過,HTA也有很多軟肋。首先,它是微軟弄出來的一個東西,只有Windows平臺可以運行;其次,它要依賴IE運行,而這估計是前端開發者最不待見的一個瀏覽器了;再次,它能夠讓你直接跳過IE的限制而直接訪問客戶的機器,這將會帶來很大的安全隱患。
因此,雖然看似很好的一個工具,卻一直沒有被廣泛使用,反而,由于其安全性問題而跟病毒扯上了關系。例如,著名的“暴風一號”病毒就會調用mshta來顯示一個骷髏頭,并且讓你無法關閉。因此,今后遇到hta文件,請謹慎打開。
暴風一號
經過前一天Messenger應用平臺、Parse物聯網開發者工具等驚喜的轟炸,Facebook于今天凌晨在F8開發者大會上正式開源了React Native。不過目前,只有iOS版,Android版還需要再等一段時間,這是最新的用JavaScript語言開發原生App的嘗試,其示例代碼相當簡潔,內置控件也不少。同時還為React Native開發了一款基于Atom的IDE——Nuclide,也已開源。
React Native主要特性如下:
React Native主張“Learn once, write everywhere”而非其他跨平臺工具一直宣揚的“Write once, run everywhere”。通過React Native,開發者可以使用UITabBar、UINavigationController等標準的iOS平臺組件,讓應用界面在其他平臺上亦能保持始終如一的外觀、風格。
var React = require('react-native'); var { TabBarIOS, NavigatorIOS } = React; var App = React.createClass({ render: function { return ( <TabBarIOS> <TabBarIOS.Item title="React Native" selected={true}> <NavigatorIOS initialRoute={{ title: 'React Native' }} /> </TabBarIOS.Item> </TabBarIOS> ); }, });
JavaScript應用代碼和原生平臺之間所有的操作都采用異步執行模式,原生模塊使用額外線程,開發者可以解碼主線程圖像、后臺保存至磁盤、無須顧忌UI等諸多因素直接度量文本設計布局。
React Native引入了一個類似于iOS上Responder Chain響應鏈事件處理機制的響應體系,并基于此為開發者提供了諸如TouchableHighlight等更高級的組件。
var React = require('react-native'); var { ScrollView, TouchableHighlight, Text } = React; var TouchDemo = React.createClass({ render: function { return ( <ScrollView> <TouchableHighlight onPress={ => console.log('pressed')}> <Text>Proper Touch Handling</Text> </TouchableHighlight> </ScrollView> ); }, });
Facebook在 React Native的主頁上詳細介紹了React Native的種種功能特性,想要了解更多細節,可直接進入主頁查看,而其為React Native搭配的開源IDE Nuclide支持React Native、Web和原生移動開發,基于Atom構建,不過也需要翻墻。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。