课程咨询:400-111-8989

  • 零基础自学HTML5需要了解哪些知识?

    发布:作者|Palak Shah 译者|geekpi  来源:http://opensourceforu.com/2017/06/introduction-to-html5/  时间: 2018年06月14日

  • 今天小编跟大家分享的文章是关于零基础自学HTML5需要了解哪些知识的文章,HTML5最近很火,很多小伙伴都想学习HTML5技术,那么作为零基础学员自学HTML5需要了解哪些知识呢?下面和小编一起来看一看吧。...

  • 今天小编跟大家分享的文章是关于零基础自学HTML5需要了解哪些知识的文章,HTML5最近很火,很多小伙伴都想学习HTML5技术,那么作为零基础学员自学HTML5需要了解哪些知识呢?下面和小编一起来看一看吧。

    HTML5是第五个且是当前的HTML版本,它是用于在万维网上构建和呈现内容的标记语言。本文将帮助读者了解它。

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

    HTML5的新功能是:

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

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

    新标签和元素

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

    零基础自学HTML5

    图1:语义化元素

    零基础自学HTML5

    图2:表单元素

    零基础自学HTML5

    图3:图形元素

    零基础自学HTML5

    图4:媒体元素

    HTML5的高级功能

    地理位置

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

    地理位置的一些用途是:

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

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

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

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

    1.if(navigator.geolocation) {
    
    2.// do stuff
    
    3.}

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

    语法是:

    1.getCurrentPosition(showLocation,ErrorHandler, options);

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

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

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

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

    零基础自学HTML5

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

    零基础自学HTML5

    图5:位置对象属性

    网络存储

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

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

    ◈ 更安全◈ 更快◈ 存储更多的数据◈ 存储的数据不会随每个服务器请求一起发送。只有在被要求时才包括在内。这是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

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

    1.<! DOCTYPE HTML>
    2.<html>
    3.<body>  5.<videosrc=" vdeo.ogg"width="320"height="240"controls="controls">
    4.This browser does not support the video element.
    5.</video>
    6. </body>
    7. </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>

    零基础自学HTML5

    图6:Canvas的输出

    音频

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

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

    零基础自学HTML5

    audio 元素的使用如下所示:

    1.<! DOCTYPE HTML>
    
    2.<html>
    
    3.<body>
    
    4.<audiosrc=" song.ogg"controls="controls">
    
    5.This browser does not support the audio element.
    
    6.</video>
    
    7. </body>
    
    8. </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.This browser does not support the audio element.
    
    5.</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需要了解的知识,希望本篇文章对于准备自学HTML5的小伙伴们有所帮助,想了解跟多HTML5相关资讯欢迎关注达内HTML5官网,这里不仅有专业的HTML5信息,还有专业的HTML5培训课程。

    【免责声明:本文图片及文字信息均由小编转载自网络,旨在分享提供阅读,版权归原作者所有,如有侵权请联系我们进行删除。】

  • 上一篇:HTML5和H5是一个意思吗?

    下一篇:没有下一篇了

网站导航
2002-2018 达内时代科技集团有限公司 版权所有 京ICP证8000853号-56