什么是HTML5？

最新推荐文章于 2023-07-04 08:25:15 发布

cunjie3951

最新推荐文章于 2023-07-04 08:25:15 发布

阅读量1.1k

点赞数

文章标签： python java web javascript html ViewUI

您将要创造的

学分：主题简单-什么是HTML5？ 他们制作很酷的动画视频。

HTML5简介

欢迎来到Envato Tuts +！本教程提供HTML5的入门概述。如果您对它了解不多，或者只是想了解它的相关性，那么您来对地方了。

HTML5是浏览器显示和与网页交互的最新标准。这是2014年获得批准HTML，这是14年来的第一次HTML更新。在当今时代，这是两次更新之间的一生。

HTML5的主要目的是使Web开发人员和浏览器创建者更容易遵循基于共识的标准，从而使合规性更加高效和强大。它还旨在为桌面和移动访问者提供更好，更快，更一致的用户体验。

以下是HTML5的一些关键改进：

页面具有更简单，更直接的元素结构，这使页面的构建，调整和调试更加容易，并且可以构建自动服务来帮助您在Web上查找重要资源。
它为常见的媒体对象提供了标准元素，这些元素以前需要用于音频，视频等的烦人插件。这些插件需要定期更新，即重复下载以管理安全性。
与接口的本机集成可以利用现代Web和移动需求。我最喜欢的示例之一是地理位置，它使您可以通过网络访问者的浏览器确定其GPS坐标。此功能以前仅限于配备GPS的电话应用程序。

例如，以下是使用PHP构建您的启动公司HTML5地理位置示例：地理位置和Google地方信息（Tuts +）：

HTML5会关注谁？

您只是网络用户还是YouTube粉丝？

HTML5将提高整个网络的速度，易用性和一致性。是的，您的YouTube体验将逐渐变得持续精彩。浏览器和插件更新将更少，安全威胁也将更少，并且网站更加优雅，可读性更高，速度更快。

您是Web开发人员吗？

HTML5使您的生活变得异常轻松，并极大地扩展了可能性。这也意味着您将能够构建东西并更多地依赖浏览器构建器来确保一致性。这意味着更少的条件布局代码。

您是否要构建Web浏览器？

一方面，您将在HTML5规范中有一个详尽的路线图，详细说明了构建方式和构建方式。另一方面，还有更多事情要做和正确。区分浏览器与大型浏览器制造商并不容易。

想了解更多？

在我们潜水之前，只需要快速提醒一下！我会尝试参加以下讨论。如果您有关于未来教程的问题或建议，请在下面发表评论或通过Twitter @reifman与我联系。

HTML5的背景

HTML5来自哪里？

自1991年网络发布以来，HTML5是20多年来浏览器编程标准的最新版本。

HTML的历史

HTML于1993年首次成为标准，以下是标准委员会接受HTML版本的时间表：

HTML 2.0：1995年
HTML 4.0：1997年
HTML 4.01：2000
HTML 5：2014年

HTML5的目标

根据Wikipedia的说法，HTML5旨在整合早期版本和差异化的文档类型，例如XHTML 1和DOM Level 2 HTML：

[HTML5]扩展，改进和合理化了可用于文档的标记，并为复杂的Web应用程序引入了标记和...（API）... HTML5也是跨平台移动应用程序的潜在候选者。考虑到低功耗设备（例如智能手机和平板电脑）的许多功能，这些功能已经被设计出来。

以下是MakeUseOf如何解释HTML5目标的摘要：

消除Flash等插件以获取每个人都需要的通用功能。建立对音频，视频等内容的本机支持。
通过新的本机元素减少对JavaScript和额外代码的需求。
提供跨浏览器和设备的一致性。
尽可能透明地执行所有这些操作。

图片来源 ：简单主题

HTML5提供哪些新功能？

事实证明很多！ HTML5提供了令人印象深刻的新功能列表，以至于主要的浏览器在被接受18个月后仍未完全兼容：

图片来源： PHPFlow

HTML5Readiness上还有一个交互式的可视彩虹。将鼠标悬停在不同的弧上，您将看到哪些浏览器支持哪些功能：

这很有趣，但是其他站点上的其他图表在功能上可能更直观。

HTML5采纳率

2011年，Wikipedia报告称，排名前100的网站中约有三分之一支持某些HTML5。到2013年8月，《财富》 500强网站中约有153个做到了。

这是HTML5强大功能的可视化：

图片来源： 维基百科

HTML5的新元素

HTML5的最基本的新元素使布局网页和调试代码或其他代码变得更加容易。它还使自动化服务更容易扫描网络并了解不同页面组件的重要性。

对于页面布局和关键功能，现在有一些特定元素，例如：

<header>和<footer>
<nav>用于各种菜单
<aside>用于侧边栏或附近的相关内容
<文章>内容如博客文章
<section>与<div>类似，但更面向内容
<audio>和<video>标签可让本机浏览器管理每个浏览器的回放。没有更多的插件和安全更新
<canvas>专门用于让您使用单独的脚本语言绘制图形
<embed>将外部内容或应用程序放入页面

这是Smashing Magazine提供的漂亮的视觉轮廓：

以下是HTML5的一些更高级的功能，包括API集成，使使用JavaScript进行复杂操作的编码更容易且在浏览器之间更加一致：

音频和视频播放：无需插件即可在浏览器中进行媒体播放。
地理位置：确定访问者的位置。
拖放：用于使用简单的手势从浏览器上载文件。
应用程序缓存：支持离线运行HTML网站。
Web worker ：在后台运行JavaScript（非阻塞）。
服务器发送的事件：允许服务器在加载后在浏览器中更新网页，这比AJAX和JavaScript更简单，更有效。
离线数据存储：提供一种独立于cookie的方式在浏览器中本地存储数据的方法。如何在您的网站中使用HTML5脱机存储提供了一个很好的演练。

HTML5和Web的未来提供了有关这些功能的另一指南。这是他们的收获之一，他们非常感谢应用程序缓存：

Google Gears为我们提供了离线数据存储，而Flash向我们介绍了应用程序缓存的功能（Pandora使用它来保存您的登录信息）。有了HTML5，这些功能现在就可以直接在该语言中使用，并且可以轻松地通过JavaScript进行扩展。

需要查看哪些浏览器支持哪些功能？ HTML5Test对功能和浏览器支持进行了有用的交互式评估：

有太多新功能，因此无法在此处对所有功能进行分类。请检查本教程底部的资源链接，以获取我建议的更深层次的资源。

实际使用中的一些HTML5示例

让我们看一下一些实用HTML5示例。

样板HTML5页面

HTML5的简单性在其新的页面布局中显而易见。更多面向内容的元素使页面代码更易于理解和调试。这是我使用HTML5-Reset项目构建的一个简单示例：

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title></title>
    <meta name="author" content="" />
	<meta name="description" content="" />

 <link rel="stylesheet" href="assets/css/style.css" />

  <!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>

<body>
    <header>
    	<h1><a href="/">Page Title</a></h1>
		<nav>
			<ol>
				<li><a href="">Nav Link 1</a></li>
				<li><a href="">Nav Link 2</a></li>
				<li><a href="">Nav Link 3</a></li>
			</ol>
		</nav>
	</header>
	<article>
		<h1>Article Header</h1>
		<p>Etiam pretium odio eu mi convallis vitae varius neque pharetra. Nulla vestibulum nisi ut sem cursus sed mattis nisi egestas.</p>

		<h2>Article Subhead</h2>
		<p>Vestibulum lacus erat, volutpat vel dignissim at, fringilla ut felis.</p>

	</article>

	<aside>
		<h2>Sidebar Content</h2>
	</aside>

	<footer>
		<p><small>&copy; Copyright Your Name Here 2014. All Rights Reserved.</small></p>
	</footer>

</div>

  <script src="scripts/js/scripts.js"></script>
</body>
</html>

注意，这里有一个更简单的doctype标记，链接标记和脚本标记。 HTML5Shiv脚本为9.x之前的Internet Explorer版本提供了旧版支持。

如果您想了解其他方法，请查看HTML5 Boilerplate ，这是一个更广泛的开源默认HTML5页面。

视频元素和播放器

这是W3Schools的视频示例，左侧显示源代码，右侧显示产生的播放器：

无需插件，也无需更新。

形式

HTML5对表单和输入元素进行了各种各样的增强，以使Web编程更容易并且用户体验更好。例如，输入元素现在支持各种内置验证。这是对特定范围内数字的验证：

以下是一些出色的教程，可进一步深入了解HTML5 Doctor的表单：

例如，这是在Chrome浏览器中显示的range元素的演示：

可缩放矢量图形（SVG）

在HTML5中，您可以使用JavaScript和HTML5更轻松地为元素设置动画。这是一个可缩放（更改缩放）的简单动画时钟：

这是上面集成JavaScript的演示代码的示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8>
<meta name="viewport" content="width=620">
<title>HTML5 Demo: SVG clock animation</title>
<link rel="stylesheet" href="css/html5demos.css">
<script src="js/h5utils.js"></script></head>
<body>
<section id="wrapper">
<div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/14060/azcarbon_2_1_0_VERT"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
    <header>
      <h1>SVG clock animation</h1>
    </header>

<style>
  /* any custom styles live here */
  line {
  stroke-width: 3px;
  stroke: black;
  }      
</style>
<article>
  <p>SVG clock animation by <a href="http://twitter.com/davidbasoko">David Basoko</a>.</p>
    <div>
      <label for="zoominput">Zoom</label>
      <select id="rangeinput" onchange="CLOCK.zoom();">
        <option value="1" selected="selected">1x</option>
        <option value="2">2x</option>
        <option value="3">3x</option>
        <option value="4">4x</option>
        <option value="5">5x</option>
      </select>
    </div>
    <div>
      <svg xmlns="http://www.w3.org/2000/svg" width="1000" height="1000" >
        <g>
          <circle id="circle" style="stroke: black; fill: #f8f8f8;" cx="100" cy="100" r="100"/>
          <line id="hour0" x1="100" y1="10"  x2="100" y2="0"/>
          <line id="hour1" x1="150" y1="13"  x2="145" y2="22"/>
          <line id="hour2" x1="187" y1="50"  x2="178" y2="55"/>
          <line id="hour3" x1="190" y1="100" x2="200" y2="100"/>
          <line id="hour4" x1="187" y1="150" x2="178" y2="145"/>
          <line id="hour5" x1="150" y1="187" x2="145" y2="178"/>
          <line id="hour6" x1="100" y1="190" x2="100" y2="200"/>
          <line id="hour7" x1="50"  y1="187" x2="55"  y2="178"/>
          <line id="hour8" x1="13"  y1="150" x2="22"  y2="145"/>
          <line id="hour9" x1="0"   y1="100" x2="10"  y2="100"/>
          <line id="hour10" x1="13"  y1="50"  x2="22"  y2="55" />
          <line id="hour11" x1="50"  y1="13"  x2="55"  y2="22" />
        </g>
        <g>
          <line x1="100" y1="100" x2="100" y2="45" style="stroke-width: 6px; stroke: green;" id="hourhand"/>
          <line x1="100" y1="100" x2="100" y2="15" style="stroke-width: 4px; stroke: blue;"  id="minutehand"/>
          <line x1="100" y1="100" x2="100" y2="5"  style="stroke-width: 2px; stroke: red;"   id="secondhand"/>
        </g>
      </svg>
    </div>

</article>
<script>
var CLOCK = (function() {
    var drawClock = function() {
        var INITIAL_R = 100;

        var zoom = document.getElementById("rangeinput").value;
        
        var r = INITIAL_R * zoom;

        // Draw Circle
        var circle = document.getElementById("circle");
        circle.setAttribute('r', r);
        circle.setAttribute('cx', r);
        circle.setAttribute('cy', r);

        // Draw Hours
        for(var i = 0; i < 12; i++) {
            var hour = document.getElementById("hour"+i);
            var degrees = i * 30;
            hour.setAttribute('x1', getX(degrees, r, 0.9)); // 90% of radio's length.
            hour.setAttribute('y1', getY(degrees, r, 0.9)); // 90% of radio's length.
            hour.setAttribute('x2', getX(degrees, r));
            hour.setAttribute('y2', getY(degrees, r));
        }

        // Draw hands
        drawHands();
    };

    var drawHands = function() {
        // Constants for hand's sizes.
        var SECONDS_HAND_SIZE = 0.95,
        MINUTES_HAND_SIZE = 0.85,
        HOURS_HAND_SIZE = 0.55;

        var circle = document.getElementById("circle");

        // Clock Circle's Properties
        var r = circle.getAttribute('r'),
        cx = parseInt(circle.getAttribute('cx')),
        cy = parseInt(circle.getAttribute('cy'));

        // Current time.
        var currentTime = new Date();

        // Draw Hands
        drawHand(document.getElementById("secondhand"),
                 currentTime.getSeconds(),
                 SECONDS_HAND_SIZE,
                 6);
        drawHand(document.getElementById("minutehand"),
                 currentTime.getMinutes(),
                 MINUTES_HAND_SIZE,
                 6);
        drawHand(document.getElementById("hourhand"),
                 currentTime.getHours(),
                 HOURS_HAND_SIZE,
                 30);
        
        function drawHand(hand, value, size, degrees) {
            var deg = degrees * value;
            x2 = getX(deg, r, size, cx),
            y2 = getY(deg, r, size, cy);
            
            hand.setAttribute('x1', cx);
            hand.setAttribute('y1', cy); 
            hand.setAttribute('x2', x2);
            hand.setAttribute('y2', y2); 
        }
    };

    /*
     * Get a Point X value.
     * degress. Angle's degrees.
     * r. Circle's radio.
     * adjust. Percent of length.
     * x. Start of X point.
     */
    function getX(degrees, r, adjust, x) {
        var x = x || r, 
        adj = adjust || 1;
        return x + r * adj * Math.cos(getRad(degrees));
    }

    /*
     * Get a Point Y value.
     * degress. Angle's degrees.
     * r. Circle's radio.
     * adjust. Percent of length.
     * x. Start of Y point.
     */   
    function getY(degrees, r, adjust, y) {
        var y = y || r,
        adj = adjust || 1;
        return y + r * adj * Math.sin(getRad(degrees));
    }

    // Convert from degrees to radians.
    function getRad(degrees) {
        var adjust = Math.PI / 2;
        return (degrees * Math.PI / 180) - adjust;
    }
        
    return {
        init: function() {
            drawClock();
            setInterval(drawHands, 1000);
        },
        zoom: function() {
            drawClock();
        }
    };
})();
CLOCK.init();
</script>
<a id="html5badge" href="http://www.w3.org/html/logo/">
<img src="http://www.w3.org/html/logo/badge/html5-badge-h-connectivity-device-graphics-multimedia-performance-semantics-storage.png" width="325" height="64" alt="HTML5 Powered with Connectivity / Realtime, Device Access, Graphics, 3D & Effects, Multimedia, Performance & Integration, Semantics, and Offline & Storage" title="HTML5 Powered with Connectivity / Realtime, Device Access, Graphics, 3D & Effects, Multimedia, Performance & Integration, Semantics, and Offline & Storage">
</a>
    <footer><a href="/">HTML5 demos</a>/<a id="built" href="http://twitter.com/rem">@rem built this</a>/<a href="#view-source">view source</a></footer> 
</section>
<a href="http://github.com/remy/html5demos"><img style="position: absolute; top: 0; left: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_left_darkblue_121621.png" alt="Fork me on GitHub" /></a>
<script src="js/prettify.packed.js"></script>
<script>
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
</body>
</html>