什么是HTML5,它如何改变我的浏览方式? [MakeUseOf说明]

HTML或超文本标记语言是万维网中最重要的元素。这是用来描述网页外观的语言。但是,HTML本身很无聊,因为它只能交付静态页面。为了满足人们对更令人印象深刻的Web功能的不断增长的需求,HTML已与CSS,Flash,Java,Silverlight等插件结合在一起。

它已经变得一团糟,不同的浏览器实现了这些功能以自己的方式进行功能。 HTML5旨在解决HTML的一个大问题,以使网页更清洁,更高效。

HTML:概述

我们今天所知道的HTML称为HTML4,它最早是在很久以前发布的是1997年。是的,这意味着我们已经在HTML4上运行了15年以上,这是技术时代的永恒。在2000年左右,一种叫做XHTML的并行标记语言开始开发,并且多年来一直在使用,这主要是因为它强加了更严格的标准。但是,总体上,两者非常相似。

HTML4的问题在于其功能有限。必须通过Flash之类的插件进行扩展,以提供比简单的文本和图像更多的内容。例如,许多视频播放器是在Flash平台上创建和维护的,并嵌入到HTML页面中。许多Web应用程序都是使用Java开发并嵌入的。

使用所有这些插件,很难维护适当的标准。理想情况下,每个浏览器都应该以相同的方式显示网络上的每个页面,以便为每个用户提供相同的体验。为了在多个浏览器上显示相同的结果,Web开发人员通常需要在其网站的各个部分实施快速修复和修改,以适应不同的呈现过程。一段时间后,这变得很麻烦。

在更实际的说明中,需要Flash和Java之类的插件的网页最终会使用更多的CPU和RAM。曾经想知道为什么您的浏览器会占用您大量的计算机资源吗?其中很多可以归因于这些HTML扩展名。这是Apple禁用移动设备上的Flash支持(以节省电池寿命)的原因之一。

HTML5到底是什么?

HTML4运作良好,但显然可以许多缺陷。 HTML5背后的团队对HTML的下一步有一个较高的计划,这意味着HTML5必须建立在以下原则上:

  • 对插件的功能依赖较少。
  • 设备独立性(即在所有设备上都可用,并提供相同的最终体验)。
  • 公共开发过程,以便人们可以看到正在发生的事情
  • 更具体地讲,HTML5添加了一堆新的标记标签:

  • 标签可帮助您隔离内容块的顶部和底部。可以在单个页面上多次使用。
  • 标记,用于标识特定的单个内容,例如博客文章或用户评论。
  • 标记可用于定义内容的一般部分;类似于当前现有的
    标签。
  • 标签来标记包含
  • 标签,使您可以使用单独的脚本语言绘制图形。
  • strong>标签将外部内容或应用程序嵌入到页面中。
  • HTML5还弃用了一些标签:</strong>,以及其他一些</strong>。 p><p> HTML5的完整标准规范计划在2014年完成,但是HTML5已经取得了很大的进步,即使在今天,它也可以用于实现网站功能。 HTML5.1的完整标准规范计划于2016年完成。</p><h2>为什么HTML5对您很重要</h2><p>作为网络用户,您将受益于HTML5,因为它修复了最多HTML4中明显的问题。网站将具有更好的Web标准,这将导致更有效的内容和更高的性能。随着HTML5的全面采用,网页应开始更快地加载,应使用更少的带宽,并且移动设备上的电池寿命应更长一些。</p><p>此外,您不必如此Flash和Java等许多插件已更新。当我经常不得不在多个浏览器中更新如此众多的插件和插件时,我讨厌它。当其中之一是错误版本时会发生什么?站点停止工作,随之而来的是挫败感。当HTML5成为主要标准时,所有这些都应消除。</p><figure><img class="lazy" data-original="//static.pcpc.me/images/2013/04/what-is-html5-3.jpg"></figure><p>如果您只是普通的Web用户,并且不打算编码或维护自己的网站,那么您就不必这样做了。不必做任何事情就能享受HTML5的强大功能。当今,所有主流浏览器都在很大程度上支持HTML5,您可能已经在不知不觉中就利用了它。只需保持浏览器更新,就可以了。</p><p>如果您是网络开发人员,HTML5将使您的一切变得越来越简单。如果一切顺利,您将不必在网页设计中处理极端情况,因为所有浏览器都需要遵循相同的标准。</p><h2>结论</h2><p> HTML5是HTML5的未来网络浏览,这一定会彻底改变我们上网的方式。即使在HTML4的有限性质下,开发人员仍创建了一些令人难以置信的网站,因此,看看他们将对HTML5的功能做出什么样的整洁进步,将是很有趣的。</p><p>希望现在您可以更清楚地看到HTML5,并了解为什么要尽可能多地宣传它。您也可以在这十个网站上进一步学习,向您展示HTML5的全部知识。如有任何疑问,请在评论中提问,我会尽力回答您。</p><p><small>图片来源:HTML5通过Shutterstock,HTML代码通过Shutterstock,HTML5标签云通过Shutterstock,通过Shutterstock在笔记本电脑上的家伙</small></p> </div> <p> <small>标签: <a href="https://www.pcpc.me/tag/HTML/">HTML</a> <a href="https://www.pcpc.me/tag/HTML5/">HTML5</a> <a href="https://www.pcpc.me/tag/Programming/">编程</a> <a href="https://www.pcpc.me/tag/Web-Development/">Web开发</a> </small></p> <div class="adslot aligncenter"><ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3993128489863289" data-ad-slot="8218521392" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script></div> </div> <aside class="single-post-sidebar" style="display:flex;flex-direction:column;"> <div style="padding:20px;"><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-3993128489863289" data-ad-slot="6247798328"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script></div> <div class="article-sidebar"> <div class="flex-block"> <div class="flex-row"> <h3 class="article-sidebar-title">最新相关资讯</h3> <div class="bullet-posts"> <div class="bullet-row"> <div class="bullet-thumbnail"> <a href="https://www.pcpc.me/tech/most-popular-firefox-extensions-2021"> <img class="lazy-load lazy" data-original="https://static.pcpc.me/cover/2021/11/firefox-on-mac-screen-ff93.jpg?q=50&fit=contain&w=480&h=300&dpr=1.5"></a> </div> <div class="bullet-meta"> <h3> <a href="https://www.pcpc.me/tech/most-popular-firefox-extensions-2021">2021 年最受欢迎的 Firefox 扩展是……广告拦截器</a></h3> <p>2021-12-20 07:05</p> </div> </div> <div class="bullet-row"> <div class="bullet-thumbnail"> <a href="https://www.pcpc.me/tech/mozilla-lists-most-innovative-firefox-extensions-2021"> <img class="lazy-load lazy" data-original="https://static.pcpc.me/cover/2021/12/firefox-browser-logo.jpg?q=50&fit=contain&w=480&h=300&dpr=1.5"></a> </div> <div class="bullet-meta"> <h3> <a href="https://www.pcpc.me/tech/mozilla-lists-most-innovative-firefox-extensions-2021">Mozilla 列出 2021 年最具创新性的 Firefox 扩展</a></h3> <p>2021-12-20 03:32</p> </div> </div> <div class="bullet-row"> <div class="bullet-thumbnail"> <a href="https://www.pcpc.me/tech/handy-websites-just-moved-out"> <img class="lazy-load lazy" data-original="https://static.pcpc.me/cover/2021/12/moved-out.jpg?q=50&fit=contain&w=480&h=300&dpr=1.5"></a> </div> <div class="bullet-meta"> <h3> <a href="https://www.pcpc.me/tech/handy-websites-just-moved-out">为刚搬出的人准备的 8 个方便的网站</a></h3> <p>2021-12-19 04:00</p> </div> </div> <div class="bullet-row"> <div class="bullet-thumbnail"> <a href="https://www.pcpc.me/tech/payoneer-change-email-address"> <img class="lazy-load lazy" data-original="https://static.pcpc.me/cover/2021/12/Payoneer-Change-Email.jpg?q=50&fit=contain&w=480&h=300&dpr=1.5"></a> </div> <div class="bullet-meta"> <h3> <a href="https://www.pcpc.me/tech/payoneer-change-email-address">如何在 Payoneer 上更改您的电子邮件地址</a></h3> <p>2021-12-18 21:00</p> </div> </div> <div class="bullet-row"> <div class="bullet-thumbnail"> <a href="https://www.pcpc.me/tech/charity-apps-to-do-good-donate-make-a-difference"> <img class="lazy-load lazy" data-original="https://static.pcpc.me/cover/2021/12/charity-apps-donate-do-good-featured.jpg?q=50&fit=contain&w=480&h=300&dpr=1.5"></a> </div> <div class="bullet-meta"> <h3> <a href="https://www.pcpc.me/tech/charity-apps-to-do-good-donate-make-a-difference">5 款慈善应用程序,可以为世界行善、捐赠和改变世界</a></h3> <p>2021-12-18 17:30</p> </div> </div> <div class="bullet-row"> <div class="bullet-thumbnail"> <a href="https://www.pcpc.me/tech/how-to-use-microsoft-learn"> <img class="lazy-load lazy" data-original="https://static.pcpc.me/cover/2021/12/microsoft-learn-feature.jpg?q=50&fit=contain&w=480&h=300&dpr=1.5"></a> </div> <div class="bullet-meta"> <h3> <a href="https://www.pcpc.me/tech/how-to-use-microsoft-learn">如何使用 Microsoft Learn 获得 Microsoft 认证</a></h3> <p>2021-12-18 06:30</p> </div> </div> <div class="bullet-row"> <div class="bullet-thumbnail"> <a href="https://www.pcpc.me/tech/fix-google-chrome-not-loading-images"> <img class="lazy-load lazy" data-original="https://static.pcpc.me/cover/2021/09/Google-Chromebook-with-Google-Homepage-on-Chrome.jpg?q=50&fit=contain&w=480&h=300&dpr=1.5"></a> </div> <div class="bullet-meta"> <h3> <a href="https://www.pcpc.me/tech/fix-google-chrome-not-loading-images">修复 Google Chrome 不加载图像的 7 种方法</a></h3> <p>2021-12-17 20:00</p> </div> </div> <div class="bullet-row"> <div class="bullet-thumbnail"> <a href="https://www.pcpc.me/tech/subscription-boxes-fitness-journey"> <img class="lazy-load lazy" data-original="https://static.pcpc.me/cover/2021/12/fitness-subcription-box.jpeg?q=50&fit=contain&w=480&h=300&dpr=1.5"></a> </div> <div class="bullet-meta"> <h3> <a href="https://www.pcpc.me/tech/subscription-boxes-fitness-journey">6 个订阅盒来支持您的健身之旅</a></h3> <p>2021-12-15 06:30</p> </div> </div> <div class="bullet-row"> <div class="bullet-thumbnail"> <a href="https://www.pcpc.me/tech/chrome-control-playback-toolbar-button"> <img class="lazy-load lazy" data-original="https://static.pcpc.me/cover/2021/12/Chrome-Control-Playback-Toolbar-Featured.jpg?q=50&fit=contain&w=480&h=300&dpr=1.5"></a> </div> <div class="bullet-meta"> <h3> <a href="https://www.pcpc.me/tech/chrome-control-playback-toolbar-button">如何使用工具栏按钮在 Google Chrome 中控制播放</a></h3> <p>2021-12-15 02:31</p> </div> </div> <div class="bullet-row"> <div class="bullet-thumbnail"> <a href="https://www.pcpc.me/tech/free-virtual-tour-apps-when-stuck-indoors"> <img class="lazy-load lazy" data-original="https://static.pcpc.me/cover/2021/12/virtual-tour-computer-travel-apps-featured.jpg?q=50&fit=contain&w=480&h=300&dpr=1.5"></a> </div> <div class="bullet-meta"> <h3> <a href="https://www.pcpc.me/tech/free-virtual-tour-apps-when-stuck-indoors">被困在室内时可体验的 5 个以上免费虚拟旅游应用程序</a></h3> <p>2021-12-14 17:30</p> </div> </div> </div> </div> </div> </div> </aside> </div> </div> </div> <div class="single-post-transition-bar"> <div class="label-div" style="position:relative;min-height:100px;"> <span class="single-post-transition-label-wrap"> <span class="single-post-transition-label" style="display: inline-block;">分类本周热门</span></span> <svg class="single-post-transition-icon"> <use xlink:href="#icon-down"></use> </svg> </div> <div style="max-width: 1100px; margin: 0 auto;"> <div class="flexbox"> <div class="item"> <a href="https://www.pcpc.me/tech/top-8-online-tools-to-identify-the-owner-of-a-phone-number"> <img height="180" width="320" class="lazy-load lazy" data-original="https://static.pcpc.me/cover/2016/10/smartphone-video-calling-382x255.jpg"> <h4>确定电话号码所有者的前5个网站</h4></a> </div> <div class="item"> <a href="https://www.pcpc.me/tech/10-youtube-url-tricks-you-should-know-about"> <img height="180" width="320" class="lazy-load lazy" data-original="https://static.pcpc.me/cover/2017/02/youtube-tricks-382x255.jpg"> <h4>您应该了解的10个YouTube URL技巧</h4></a> </div> <div class="item"> <a href="https://www.pcpc.me/tech/google-chrome-ram-memory-usage"> <img height="180" width="320" class="lazy-load lazy" data-original="https://static.pcpc.me/cover/2017/04/chrome-hogging-memory-382x255.jpg"> <h4>如何减少Google Chrome浏览器的内存使用量并释放RAM</h4></a> </div> <div class="item"> <a href="https://www.pcpc.me/tech/15-funniest-websites-best-humor-web"> <img height="180" width="320" class="lazy-load lazy" data-original="https://static.pcpc.me/cover/2016/03/funniest-web-sites-382x255.jpg"> <h4>15个最幽默的搞笑网站</h4></a> </div> <div class="item"> <a href="https://www.pcpc.me/tech/free-morse-code-software-send-receive-coded-radio-messages-computer"> <img height="180" width="320" class="lazy-load lazy" data-original="https://static.pcpc.me/cover/2010/06/morse-code-websites-tools-apps-featured-382x255.jpg"> <h4>4个免费的摩尔斯电码软件和应用程序,用于发送编码消息</h4></a> </div> <div class="item"> <a href="https://www.pcpc.me/tech/3-subtitle-sources-movies-tv-series"> <img height="180" width="320" class="lazy-load lazy" data-original="https://static.pcpc.me/cover/2010/02/Subtitles-382x255.jpg"> <h4>免费下载电影字幕:3个最佳网站</h4></a> </div> <div class="item"> <a href="https://www.pcpc.me/tech/bookmark-apps-organize-links-save-social-posts-read-later"> <img height="180" width="320" class="lazy-load lazy" data-original="https://static.pcpc.me/cover/2020/06/bookmark-apps-382x255.jpg"> <h4>5个书签应用程序,用于组织链接,保存社交帖子并稍后阅读</h4></a> </div> <div class="item"> <a href="https://www.pcpc.me/tech/best-fun-websites-beat-boredom"> <img height="180" width="320" class="lazy-load lazy" data-original="https://static.pcpc.me/cover/2018/04/beat-boredom-online-382x255.jpg"> <h4>15个有趣的网站,可立即击败在线无聊</h4></a> </div> </div> </div> </div> </div> <footer class="footer-wrap"> <div class="footer-container"> <div class="footer-copyright"><img src="/static/images/logo.png" style="height:30px;display:inline;margin-bottom:-8px;"> &copy; 2020 <a href="https://www.pcpc.me">双电网</a>(Www.PcPc.Me). All Rights Reserved. | <a href="/sitemap.xml">网站地图</a></div> </div> </footer> <script> (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> <script> (function(){ var src = "https://jspassport.ssl.qhimg.com/11.0.1.js?d182b3f28525f2db83acfaaf6e696dba"; document.write('<script src="' + src + '" id="sozz"><\/script>'); })(); </script> <div style="display:none;"><script type="text/javascript" src="https://s4.cnzz.com/z_stat.php?id=1278594161&web_id=1278594161"></script></div> <!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=G-4DVE4MNDE6"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-4DVE4MNDE6'); </script> </body> </html> <script src="/cdn-cgi/scripts/7d0fa10a/cloudflare-static/rocket-loader.min.js" data-cf-settings="c4d1d610b141e5c48d832b63-|49" defer></script>