课程咨询:400-111-8989

  • 想学习HTML5你需要先了解这些

    本文地址:http://www.xinjiuyang.com.cn/workplace/314236.html
    文章摘要:想学习HTML5你需要先了解这些,九头鸟考完容积,韩卢逐逡百种可人。

    发布:作者|Palak Shah 译者|geekpi  来源:http://www.xinjiuyang.com.cn/092/2017/06/introduction-to-html5/  时间: 2018年05月09日

  • 今天小编带给大家的文章是关于HTML5知识的介绍。想学习HTML5的小伙伴们来看一看,你需要先了解这些。HTML5是第五个且是当前的HTML版本,它是用于在万维网上构建和呈现内容的标记语言。今天小编就带大家一起了解一下HTML5。...

  • 今天小编带给大家的文章是关于pk10搜狐知识的介绍。想学习HTML5的小伙伴们来看一看,你需要先了解这些。HTML5是第五个且是当前的HTML版本,它是用于在万维网上构建和呈现内容的标记语言。今天小编就带大家一起了解一下HTML5。

    HTML5通过W3C和间的合作发展起来。它是一个更高版本的HTML,它的许多新元素可以使你的页面更加语义化和动态。它是为所有人提供更好的Web体验而开发的。HTML5提供了很多的功能,使Web更加动态和交互。

    HTML5的新功能是:

    1. 新标签,如 <header> 和 <section>2. 用于2D绘图的 <canvas> 元素3. 本地存储4.  新的表单控件,如日历、日期和时间5. 新媒体功能6.地理位置

    HTML5还不是正式标准(LCTT译注:HTML5已于2014年成为“推荐标准”),因此,并不是所有的浏览器都支持它或其中一些功能。开发HTML5背后最重要的原因之一是防止用户下载并安装像Silverlight和Flash这样的多个插件。

    新标签和元素

    1.语义化元素: 图1展示了一些有用的语义化元素。2.表单元素: HTML5中的表单元素如图2所示。3. 图形元素: HTML5中的图形元素如图3所示。4. 媒体元素: HTML5中的新媒体元素如图4所示。

    图1:语义化元素

    图2:表单元素

    图3:图形元素

    图4:媒体元素

    HTML5的高级功能

    地理位置

    这是一个HTML5 API,用于获取网站用户的地理位置,用户必须首先允许网站获取他或她的位置。这通常通过按钮和/或浏览器弹出窗口来实现。所有最新版本的Chrome、Firefox、IE、Safari和Opera都可以使用HTML5的地理位置功能。

    地理位置的一些用途是:

    1. 公共交通网站2. 出租车及其他运输网站3. 电子商务网站计算运费4.旅行社网站5. 房地产网站6. 在附近播放的电影的电影院网站7. 在线游戏8. 网站首页提供本地标题和天气9.工作职位可以自动计算通勤时间

    工作原理: 地理位置通过扫描位置信息的常见源进行工作,其中包括以下:

    1. 全球定位系统(GPS)是最准确的2. 网络信号- IP地址、RFID、Wi-Fi和蓝牙MAC地址3. GSM/CDMA蜂窝ID 4. 用户输入

    该API提供了非常方便的函数来检测浏览器中的地理位置支持:

    1.if(navigator.geolocation) {

    2.// do stuff

    3.}

    getCurrentPosition API是使用地理位置的主要方法。它检索用户设备的当前地理位置。该位置被描述为一组地理坐标以及航向和速度。位置信息作为位置对象返回。

    语法是:

    1.getCurrentPosition(showLocation,ErrorHandler, options);

    1. showLocation:定义了检索位置信息的回调方法。2. ErrorHandler(可选):定义了在处理异步调用时发生错误时调用的回调方法。3.  options (可选): 定义了一组用于检索位置信息的选项。

    我们可以通过两种方式向用户提供位置信息:测地和民用。

    ☉ 描述位置的测地方式直接指向纬度和经度。☉ 位置信息的民用表示法是人类可读的且容易理解。

    如下表1所示,每个属性/参数都具有测地和民用表示。

    图5包含了一个位置对象返回的属性集。

    图5:位置对象属性

    网络存储

    在HTML中,为了在本机存储用户数据,我们需要使用JavaScript cookie。为了避免这种情况,HTML5已经引入了Web存储,网站利用它在本机上存储用户数据。

    与Cookie相比,Web存储的优点是:

    1. 更安全2. 更快3.存储更多的数据4.存储的数据不会随每个服务器请求一起发送。只有在被要求时才包括在内。这是HTML5 Web存储超过Cookie的一大优势。

    有两种类型的Web存储对象:

    ☉ 本地-存储没有到期日期的数据。☉ 会话-仅存储一个会话的数据。

    如何工作: localStorage 和 sessionStorage 对象创建一个 key=value 对。比如: key="Name", value="Palak"。

    这些存储为字符串,但如果需要,可以使用JavaScript函数(如 parseInt() 和 parseFloat())进行转换。

    下面给出了使用Web存储对象的语法:

    ? 存储一个值:? localStorage.setItem("key1", "value1");? localStorage["key1"] = "value1";? 得到一个值:? alert(localStorage.getItem("key1"));? alert(localStorage["key1"]);? 删除一个值:-removeItem("key1");? 删除所有值:? localStorage.clear();

    应用缓存(AppCache)

    使用HTML5 AppCache,我们可以使Web应用程序在没有Internet连接的情况下脱机工作。除IE之外,所有浏览器都可以使用AppCache(截止至此时)。

    应用缓存的优点是:

    ? 网页浏览可以脱机? 页面加载速度更快? 服务器负载更小

    cache manifest 是一个简单的文本文件,其中列出了浏览器应缓存的资源以进行脱机访问。 manifest 属性可以包含在文档的HTML标签中,如下所示:

    1.<htmlmanifest="test.appcache">

    2....

    3.</html>

    它应该在你要缓存的所有页面上。

    缓存的应用程序页面将一直保留,除非:

    ☉ 用户清除它们☉ manifest 被修改☉ 缓存更新

    视频

    在HTML5发布之前,没有统一的标准来显示网页上的视频。大多数视频都是通过Flash等不同的插件显示的。但HTML5规定了使用video元素在网页上显示视频的标准方式。

    目前,video元素支持三种视频格式,如表2所示。

    HTML5培训机构" alt="HTML5培训机构" />

    下面的例子展示了video元素的使用:

    1.<! DOCTYPE HTML>

    2.<html>

    3.<body>

    4.

    5.<videosrc=" vdeo.ogg"width="320"height="240"controls="controls">

    6.

    7.This browser does not support the video element.

    8.

    9.</video>

    10.

    11. </body>

    12. </html>

    例子使用了Ogg文件,并且可以在Firefox、Opera和Chrome中使用。要使视频在Safari和未来版本的Chrome中工作,我们必须添加一个MPEG4和WebM文件。

    video 元素允许多个 source 元素。source 元素可以链接到不同的视频文件。浏览器将使用第一个识别的格式,如下所示:

    1.<videowidth="320"height="240"controls="controls">

    2.<sourcesrc="vdeo.ogg"type="video/ogg"/>

    3.<sourcesrc=" vdeo.mp4"type="video/mp4"/>

    4.<sourcesrc=" vdeo.webm"type="video/webm"/>

    5.This browser does not support the video element.

    6.</video>

    图6:Canvas的输出

    音频

    对于音频,情况类似于视频。在HTML5发布之前,在网页上播放音频没有统一的标准。大多数音频也通过Flash等不同的插件播放。但HTML5规定了通过使用音频元素在网页上播放音频的标准方式。音频元素用于播放声音文件和音频流。

    目前,HTML5 audio 元素支持三种音频格式,如表3所示。

    audio 元素的使用如下所示:

    1.<! DOCTYPE HTML>

    2.<html>

    3.<body>

    4.

    5.<audiosrc=" song.ogg"controls="controls">

    6.

    7.This browser does not support the audio element.

    8.

    9.</video>

    10.

    11. </body>

    12. </html>

    此例使用Ogg文件,并且可以在Firefox、Opera和Chrome中使用。要在Safari和Chrome的未来版本中使audio工作,我们必须添加一个MP3和Wav文件。

    audio 元素允许多个 source 元素,它可以链接到不同的音频文件。浏览器将使用第一个识别的格式,如下所示:

    1.<audiocontrols="controls">

    2.<sourcesrc="song.ogg"type="audio/ogg"/>

    3.<sourcesrc="song.mp3"type="audio/mpeg"/>

    4.

    5.This browser does not support the audio element.

    6.

    7.</audio>

    画布(Canvas)

    要在网页上创建图形,HTML5使用 画布API。我们可以用它绘制任何东西,并且它使用JavaScript。它通过避免从网络下载图像而提高网站性能。使用画布,我们可以绘制形状和线条、弧线和文本、渐变和图案。此外,画布可以让我们操作图像中甚至视频中的像素。你可以将 canvas 元素添加到HTML页面,如下所示:

    1.<canvasid="myCanvas"width="200"height="100"></canvas>

    画布元素不具有绘制元素的功能。我们可以通过使用JavaScript来实现绘制。所有绘画应在JavaScript中。

    1.<scripttype="text/javascript">

    2.varc=document.getElementById("myCanvas");

    3.varcxt=c.getContext("2d");

    4.cxt.fillStyle="blue";

    5.cxt.storkeStyle ="red";

    6.cxt.fillRect(10,10,100,100);

    7.cxt.storkeRect(10,10,100,100);

    8.</script>

    以上脚本的输出如图6所示。

    你可以绘制许多对象,如弧、圆、线/垂直梯度等。

    HTML5工具

    为了有效操作,所有熟练的或业余的Web开发人员/设计人员都应该使用HTML5工具,当需要设置工作流/网站或执行重复任务时,这些工具非常有帮助。它们提高了网页设计的可用性。

    以下是一些帮助创建很棒的网站的必要工具。

    1.HTML5 Maker: 用来在HTML、JavaScript和CSS的帮助下与网站内容交互。非常容易使用。它还允许我们开发幻灯片、滑块、HTML5动画等。2. Liveweave: 用来测试代码。它减少了保存代码并将其加载到屏幕上所花费的时间。在编辑器中粘贴代码即可得到结果。它非常易于使用,并为一些代码提供自动完成功能,这使得开发和测试更快更容易。3.  Font dragr: 在浏览器中预览定制的Web字体。它会直接载入该字体,以便你可以知道看起来是否正确。也提供了拖放界面,允许你拖动字形、Web开放字体和矢量图形来马上测试。4.  HTML5 Please: 可以让我们找到与HTML5相关的任何内容。如果你想知道如何使用任何一个功能,你可以在HTML Please中搜索。它提供了支持的浏览器和设备的有用资源的列表,语法,以及如何使用元素的一般建议等。5. Modernizr: 这是一个开源工具,用于给访问者浏览器提供最佳体验。使用此工具,你可以检测访问者的浏览器是否支持HTML5功能,并加载相应的脚本。6. Adobe Edge Animate: 这是必须处理交互式HTML动画的HTML5开发人员的有用工具。它用于数字出版、网络和广告领域。此工具允许用户创建无瑕疵的动画,可以跨多个设备运行。7.  Video.js: 这是一款基于JavaScript的HTML5视频播放器。如果要将视频添加到你的网站,你应该使用此工具。它使视频看起来不错,并且是网站的一部分。8. The W3 Validator: W3验证工具测试HTML、XHTML、SMIL、MathML等中的网站标记的有效性。要测试任何网站的标记有效性,你必须选择文档类型为HTML5并输入你网页的URL。这样做之后,你的代码将被检查,并将提供所有错误和警告。9.  HTML5 Reset: 此工具允许开发人员在HTML5中重写旧网站的代码。你可以使用这些工具为你网站的访问者提供一个良好的网络体验。

    以上就是小编今天为大家带来的关于HTML5的相关知识,希望想要学习HTML5技术的小伙伴们能够通过本篇文章对HTML5技术有所了解。想获得更多HTML5相关资讯欢迎关注达内HTML5官网,这里不仅有更多HTML5资讯还有专业的HTML5培训课程哦。

    via: http://www.xinjiuyang.com.cn/550/2017/06/introduction-to-html5/

    作者:Palak Shah[3] 译者:geekpi 校对:wxy

  • 上一篇:关于HTML5技术的发展前景分析

    下一篇:学习HTML5之前需要的准备工作

网站导航
2002-2018 达内时代科技集团有限公司 版权所有 京ICP证8000853号-56
北京赛车pk10聚彩开户 北京赛车冠军怎么杀1码 北京赛车pk10-上盛世网 资生堂pk107内地专柜 北京赛车冠亚小1.88
:pk10绝密投资方法 北京赛车pk10官网开奖直播现场 北京赛车免费计划网站 北京pk10平台送彩金 北京pk10免费参考网站
必赢客安卓 北京pk10平台会员登陆 北京赛车官网 北京pk10精准选号 灵灵发北京pk10破解
北京pk10新凤凰 pk10开奖软件下载 pk10一天稳赚几百万 北京赛车pk10冷热分析 北京赛车pk10计划qq群
贵州体育彩票11选5 时时彩软件6.21 征婚网香港赛马会 广东36选7走势图 免费江西时时彩软件
贵州11选5任选基本走势图 尊龙国际娱乐会所 幸运农场最佳组选 安卓重庆时时彩软件 河南快3开奖结果今天1
玩北京赛车那个平台好 赚钱项目 幸运28论坛 湖北体彩11选5 新疆风采25选7走势图
北京赛车pk10软件试用版 多乐彩基本走势图 极速赛车直播 达人彩票 北京赛车808a