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小时内与您取得联系。