整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

Web前端:HTML的10大重要用途

 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

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构建,不过也需要翻墙。