关于 HTML5 你需要了解的基础知识

论坛 期权论坛 期权     
Linux中国   2019-7-8 06:13   4699   0
HTML5 是第五个且是当前的 HTML 版本,它是用于在万维网上构建和呈现内容的标记语言。本文将帮助读者了解它。-- Palak Shah

本文导航 新标签和元素08% HTML5 的高级功能16% 地理位置16% 网络存储33% 应用缓存(AppCache)44% 视频50% 音频61% 画布(Canvas)71% HTML5 工具78%编译自 | http://opensourceforu.com/2017/06/introduction-to-html5/
 作者 | Palak Shah
 译者 | geekpi
HTML5 是第五个且是当前的 HTML 版本,它是用于在万维网上构建和呈现内容的标记语言。本文将帮助读者了解它。
HTML5 通过 W3C 和Web 超文本应用技术工作组Web Hypertext Application Technology Working Group之间的合作发展起来。它是一个更高版本的 HTML,它的许多新元素可以使你的页面更加语义化和动态。它是为所有人提供更好的 Web 体验而开发的。HTML5 提供了很多的功能,使 Web 更加动态和交互。
HTML5 的新功能是:
新标签,如
  1. [/code] 和 [code]
复制代码
用于 2D 绘图的
  1. [/code] 元素 本地存储 新的表单控件,如日历、日期和时间 新媒体功能 地理位置HTML5 还不是正式标准(LCTT 译注:HTML5 已于 2014 年成为“推荐标准”),因此,并不是所有的浏览器都支持它或其中一些功能。开发 HTML5 背后最重要的原因之一是防止用户下载并安装像 Silverlight 和 Flash 这样的多个插件。
  2. 新标签和元素
  3. 语义化元素: 图 1 展示了一些有用的语义化元素。 表单元素: HTML5 中的表单元素如图 2 所示。 图形元素: HTML5 中的图形元素如图 3 所示。 媒体元素: HTML5 中的新媒体元素如图 4 所示。[img]https://201907.oss-cn-shanghai.aliyuncs.com/wc/1811847-232165d9cf98580fc8b14f5055dfa7bf.jpeg[/img]
  4. [i]图 1:语义化元素[/i]
  5. [img]https://201907.oss-cn-shanghai.aliyuncs.com/wc/1811847-fc83f29c91dfa61243f5e5570d9e3101.jpeg[/img]
  6. [i]图 2:表单元素[/i]
  7. [img]https://201907.oss-cn-shanghai.aliyuncs.com/wc/1811847-6923caa414c4973aafbfbfe7e6b609c4.jpeg[/img]
  8. [i]图 3:图形元素[/i]
  9. [img]https://201907.oss-cn-shanghai.aliyuncs.com/wc/1811847-7211568fcd2fccee67be8c17ac7edb45.jpeg[/img]
  10. [i]图 4:媒体元素[/i]
  11. HTML5 的高级功能
  12. 地理位置
  13. 这是一个 HTML5 API,用于获取网站用户的地理位置,用户必须首先允许网站获取他或她的位置。这通常通过按钮和/或浏览器弹出窗口来实现。所有最新版本的 Chrome、Firefox、IE、Safari 和 Opera 都可以使用 HTML5 的地理位置功能。
  14. 地理位置的一些用途是:
  15. 公共交通网站 出租车及其他运输网站 电子商务网站计算运费 旅行社网站 房地产网站 在附近播放的电影的电影院网站 在线游戏 网站首页提供本地标题和天气 工作职位可以自动计算通勤时间工作原理: 地理位置通过扫描位置信息的常见源进行工作,其中包括以下:
  16. 全球定位系统(GPS)是最准确的 网络信号 - IP地址、RFID、Wi-Fi 和蓝牙 MAC地址 GSM/CDMA 蜂窝 ID 用户输入该 API 提供了非常方便的函数来检测浏览器中的地理位置支持:
  17. [list=1][*][code]if (navigator.geolocation) {
复制代码
    1. // do stuff
    复制代码
    1. }
    复制代码
    1. getCurrentPosition
    复制代码
    API 是使用地理位置的主要方法。它检索用户设备的当前地理位置。该位置被描述为一组地理坐标以及航向和速度。位置信息作为位置对象返回。
    语法是:
      1. getCurrentPosition(showLocation, ErrorHandler, options);
      复制代码
    1. showLocation
    复制代码
    :定义了检索位置信息的回调方法。
    1. ErrorHandler
    复制代码
    (可选):定义了在处理异步调用时发生错误时调用的回调方法。
    1. options
    复制代码
    (可选): 定义了一组用于检索位置信息的选项。我们可以通过两种方式向用户提供位置信息:测地和民用。
    ☉ 描述位置的测地方式直接指向纬度和经度。☉ 位置信息的民用表示法是人类可读的且容易理解。如下表 1 所示,每个属性/参数都具有测地和民用表示。


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


    图5:位置对象属性
    网络存储
    在 HTML 中,为了在本机存储用户数据,我们需要使用 JavaScript cookie。为了避免这种情况,HTML5 已经引入了 Web 存储,网站利用它在本机上存储用户数据。
    与 Cookie 相比,Web 存储的优点是:
    更安全 更快 存储更多的数据 存储的数据不会随每个服务器请求一起发送。只有在被要求时才包括在内。这是 HTML5 Web 存储超过 Cookie 的一大优势。有两种类型的 Web 存储对象:
    ☉ 本地 - 存储没有到期日期的数据。☉ 会话 - 仅存储一个会话的数据。如何工作:
    1. localStorage
    复制代码
    1. sessionStorage
    复制代码
    对象创建一个
    1. key=value
    复制代码
    对。比如:
    1. key="Name"
    复制代码
    1.   value="Palak"
    复制代码

    这些存储为字符串,但如果需要,可以使用 JavaScript 函数(如
    1. parseInt()
    复制代码
    1. parseFloat()
    复制代码
    )进行转换。
    下面给出了使用 Web 存储对象的语法:
    存储一个值:
    1. localStorage.setItem("key1", "value1");
    复制代码
    1. localStorage["key1"] = "value1";
    复制代码
    得到一个值:
    1. alert(localStorage.getItem("key1"));
    复制代码
    1. alert(localStorage["key1"]);
    复制代码
    删除一个值: -
    1. removeItem("key1");
    复制代码
    删除所有值:
    1. localStorage.clear();
    复制代码
    应用缓存(AppCache)
    使用 HTML5 AppCache,我们可以使 Web 应用程序在没有 Internet 连接的情况下脱机工作。除 IE 之外,所有浏览器都可以使用 AppCache(截止至此时)。
    应用缓存的优点是:
    网页浏览可以脱机 页面加载速度更快 服务器负载更小
    1. cache manifest
    复制代码
    是一个简单的文本文件,其中列出了浏览器应缓存的资源以进行脱机访问。
    1. manifest
    复制代码
    属性可以包含在文档的 HTML 标签中,如下所示:
      复制代码
      1. ...
      复制代码
      1. [/code]
      2. [/list]它应该在你要缓存的所有页面上。
      3. 缓存的应用程序页面将一直保留,除非:
      4. ☉ 用户清除它们☉ [code]manifest
      复制代码
      被修改☉ 缓存更新视频
      在 HTML5 发布之前,没有统一的标准来显示网页上的视频。大多数视频都是通过 Flash 等不同的插件显示的。但 HTML5 规定了使用 video 元素在网页上显示视频的标准方式。
      目前,video 元素支持三种视频格式,如表 2 所示。


      下面的例子展示了 video 元素的使用:
        1. [/code]
        2. [*][code]
        复制代码
        1. [/code]
        2. [*][code]
        复制代码
        1. [/code]
        2. [*][code]
        复制代码
        1. This browser does not support the video element.
        复制代码
        1. [/code]
        2. [*][code]
        复制代码
        1. [/code]
        2. [*][code]
        复制代码
        1. [/code]
        2. [/list]例子使用了 Ogg 文件,并且可以在 Firefox、Opera 和 Chrome 中使用。要使视频在 Safari 和未来版本的 Chrome 中工作,我们必须添加一个 MPEG4 和 WebM 文件。
        3. [code]video
        复制代码
        元素允许多个
        1. source
        复制代码
        元素。
        1. source
        复制代码
        元素可以链接到不同的视频文件。浏览器将使用第一个识别的格式,如下所示:
          1. [/code]
          2. [*][code]
          复制代码
          1. [/code]
          2. [*][code]
          复制代码
          1. This browser does not support the video element.
          复制代码
          1. [/code]
          2. [/list][img]https://201907.oss-cn-shanghai.aliyuncs.com/wc/1811847-80f3511cf8f8a5aef1bbb2a2b397be13.jpeg[/img]
          3. [i]图6:Canvas 的输出[/i]
          4. 音频
          5. 对于音频,情况类似于视频。在 HTML5 发布之前,在网页上播放音频没有统一的标准。大多数音频也通过 Flash 等不同的插件播放。但 HTML5 规定了通过使用音频元素在网页上播放音频的标准方式。音频元素用于播放声音文件和音频流。
          6. 目前,HTML5 [code]audio
          复制代码
          元素支持三种音频格式,如表 3 所示。

          1. audio
          复制代码
          元素的使用如下所示:
            1. [/code]
            2. [*][code]
            复制代码
            1. [/code]
            2. [*][code]
            复制代码
            1. [/code]
            2. [*][code]
            复制代码
            1. This browser does not support the audio element.
            复制代码
            1. [/code]
            2. [*][code]
            复制代码
            1. [/code]
            2. [*][code]
            复制代码
            1. [/code]
            2. [/list]此例使用 Ogg 文件,并且可以在 Firefox、Opera 和 Chrome 中使用。要在 Safari 和 Chrome 的未来版本中使 audio 工作,我们必须添加一个 MP3 和 Wav 文件。
            3. [code]audio
            复制代码
            元素允许多个
            1. source
            复制代码
            元素,它可以链接到不同的音频文件。浏览器将使用第一个识别的格式,如下所示:
              1. [/code]
              2. [*][code]
              复制代码
              1. [/code]
              2. [*][code]
              复制代码
              1. This browser does not support the audio element.
              复制代码
              1. [/code]
              2. [*][code]
              复制代码
            画布(Canvas)
            要在网页上创建图形,HTML5 使用 画布 API。我们可以用它绘制任何东西,并且它使用 JavaScript。它通过避免从网络下载图像而提高网站性能。使用画布,我们可以绘制形状和线条、弧线和文本、渐变和图案。此外,画布可以让我们操作图像中甚至视频中的像素。你可以将
            1. canvas
            复制代码
            元素添加到 HTML 页面,如下所示:
              1. [/code]
              2. [/list]画布元素不具有绘制元素的功能。我们可以通过使用 JavaScript 来实现绘制。所有绘画应在 JavaScript 中。
              3. [list=1][*][code]
              复制代码
              1. var c=document.getElementById("myCanvas");
              复制代码
              1. var cxt=c.getContext("2d");
              复制代码
              1. cxt.fillStyle="blue";
              复制代码
              1. cxt.storkeStyle = "red";
              复制代码
              1. cxt.fillRect(10,10,100,100);
              复制代码
              1. cxt.storkeRect(10,10,100,100);
              复制代码
            • [code][/code]
            以上脚本的输出如图 6 所示。
            你可以绘制许多对象,如弧、圆、线/垂直梯度等。
            HTML5 工具
            为了有效操作,所有熟练的或业余的 Web 开发人员/设计人员都应该使用 HTML5 工具,当需要设置工作流/网站或执行重复任务时,这些工具非常有帮助。它们提高了网页设计的可用性。
            以下是一些帮助创建很棒的网站的必要工具。
            HTML5 Maker:  用来在 HTML、JavaScript 和 CSS 的帮助下与网站内容交互。非常容易使用。它还允许我们开发幻灯片、滑块、HTML5 动画等。 Liveweave: 用来测试代码。它减少了保存代码并将其加载到屏幕上所花费的时间。在编辑器中粘贴代码即可得到结果。它非常易于使用,并为一些代码提供自动完成功能,这使得开发和测试更快更容易。 Font dragr:  在浏览器中预览定制的 Web 字体。它会直接载入该字体,以便你可以知道看起来是否正确。也提供了拖放界面,允许你拖动字形、Web 开放字体和矢量图形来马上测试。 HTML5 Please:  可以让我们找到与 HTML5 相关的任何内容。如果你想知道如何使用任何一个功能,你可以在 HTML Please 中搜索。它提供了支持的浏览器和设备的有用资源的列表,语法,以及如何使用元素的一般建议等。 Modernizr: 这是一个开源工具,用于给访问者浏览器提供最佳体验。使用此工具,你可以检测访问者的浏览器是否支持 HTML5 功能,并加载相应的脚本。 Adobe Edge Animate:  这是必须处理交互式 HTML 动画的 HTML5 开发人员的有用工具。它用于数字出版、网络和广告领域。此工具允许用户创建无瑕疵的动画,可以跨多个设备运行。 Video.js:  这是一款基于 JavaScript 的 HTML5 视频播放器。如果要将视频添加到你的网站,你应该使用此工具。它使视频看起来不错,并且是网站的一部分。 The W3 Validator:  W3 验证工具测试 HTML、XHTML、SMIL、MathML 等中的网站标记的有效性。要测试任何网站的标记有效性,你必须选择文档类型为 HTML5 并输入你网页的 URL。这样做之后,你的代码将被检查,并将提供所有错误和警告。 HTML5 Reset:  此工具允许开发人员在 HTML5 中重写旧网站的代码。你可以使用这些工具为你网站的访问者提供一个良好的网络体验。Palak Shah
            作者是高级软件工程师。她喜欢探索新技术,学习创新概念。她也喜欢哲学。你可以通过 palak311@gmail.com[1] 联系她。
            via: http://opensourceforu.com/2017/06/introduction-to-html5/
            作者:Palak Shah[3] 译者:geekpi 校对:wxy
            本文由 LCTT 原创编译,Linux中国 荣誉推出
            LCTT 译者
            geekpi共计翻译:558 篇贡献时间:1240 天
            推荐文章
            < 左右滑动查看相关文章 >

            [/url][url=http://mp.weixin.qq.com/s?__biz=MjM5NjQ4MjYwMQ==&mid=401213542&idx=1&sn=04d54717f4b0281e25380c7b48484f38&scene=21#wechat_redirect][/url][url=http://mp.weixin.qq.com/s?__biz=MjM5NjQ4MjYwMQ==&mid=2664607380&idx=3&sn=b300daeca315402d264f083f447a116f&scene=21#wechat_redirect][/url][url=http://mp.weixin.qq.com/s?__biz=MjM5NjQ4MjYwMQ==&mid=2664608389&idx=3&sn=f4e7e8b01c87ebcaafcf2a72728634b4&chksm=bdce89c38ab900d5a99ad7b106cb8d3a2fc5b6011183f1cf328abbe556dcc02d15d5c2cbfdca&scene=21#wechat_redirect]
            [/url][url=http://mp.weixin.qq.com/s?__biz=MjM5NjQ4MjYwMQ==&mid=2664609082&idx=1&sn=bd9c08a575cda7af7557a1624f973663&chksm=bdce8e7c8ab9076a377351404faa010c0be0bbf2ac80155a0604e7189931dde1ae31d9fa4e33&scene=21#wechat_redirect]
            [url=http://mp.weixin.qq.com/s?__biz=MjM5NjQ4MjYwMQ==&mid=2664609068&idx=2&sn=5dc88fb21a0ecd6d85ef2a27684db883&chksm=bdce8e6a8ab9077c9717c8dfe9904ab898850beef84f56f60deacee38a1df0a2a0604412ebc3&scene=21#wechat_redirect][/url]
            点击图片、输入文章 ID 或识别二维码直达
            原文链接请访问“原文链接”获得可点击的文内链接、全尺寸原图和相关文章。

  • 分享到 :
    0 人收藏
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    积分:126
    帖子:8
    精华:0
    期权论坛 期权论坛
    发布
    内容

    下载期权论坛手机APP