您的位置首页百科知识

HTML5入门教程

HTML5入门教程

的有关信息介绍如下:

HTML5入门教程

自2008年1月22日HTML 5 的第一份正式草案公布起,HTML5已经开始进入人们的视野,目前已经有大部分浏览器支持html5。而本经验为html入门教程,将告诉未曾接触过html5的朋友何为html5以及创建一个最简单的html5实例。

什么是html5?

我们简单了解一下:HTML5是HTML最新的修订版本,2014年10月由万维网联盟(W3C)完成标准制定,设计的目的是为了在移动设备上支持多媒体。

我们先创建一个最简单的html5实例,新建一个html页面,然后输入以下代码。

HTML5入门教程

HTML5入门教程

hello world, hello html5

然后,在浏览器上打开这个新建的html文件,打开的方式可以双击该文件或者鼠标右键点击打开方式,然后选择浏览器打开,就能在浏览器上看到效果。

我们来解析一下该实例的结构。

首先最顶部为,

这句的作用是声明这是HTML5文档,浏览器将以html5的标准执行该文档。

与以往非html5文档的声明相比,简洁了很多。

元素是html页面的根元素,所有的节点都是包含在该元素里面;

元素包含了文档的元数据,也就是meta;

元素描述了文档的标题。</p><p>一般来说,我们写网页,都会用到外部样式表,建议把外部样式表放在head里面。</p><p><body>元素存放着可见的页面内容,页面上想要显示出来的内容就全部都是放在body元素里面,例如本实例中就有<h1><p>这两个标签</p><p>html5的改进:</p><p>首先是多了新元素新属性,完全支持css3,多媒体功能:video跟audio,图形:2D/3D制图,本地存储,本地SQL数据,web应用。</p><p>这里只是简单跟大家说一下,具体的可以去网上找html5详细教程。</p><p>浏览器支持:最新版的Safari,Firefox,Chrome都能够支持,IE9也支持某些html5特性。</p><p>IE9以下版本的浏览器兼容某些html5的方法,可以使用html5shiv包</p> </div> <div class="entry-footer clear"> <div class="entry-tags"><span class="tag-links">标签:HTML5,入门教程</span></div> </div> </article> <div class="related-content"><span class="section-title">相关文章</span> <ul class="clear"> <li class="hentry ht_grid_1_3"> <a class="thumbnail-link" href="/article/328.html"> <div class="thumbnail-wrap"><img src="/upload/jingyan/2024/0807/31d6ae46.jpg" alt="滴滴出行如何联系人工客服"></div> </a> <div class="entry-title"><a href="/article/328.html">滴滴出行如何联系人工客服</a></div> <div class="entry-meta"> <span class="entry-date">2025-07-04 10:26</span> <span class="entry-views">阅读(974)</span> </div> </li> <li class="hentry ht_grid_1_3"> <a class="thumbnail-link" href="/article/138.html"> <div class="thumbnail-wrap"><img src="/upload/jingyan/2024/0625/d7b6b662.jpg" alt="社保卡和医保卡是一张卡吗,有什么区别方法"></div> </a> <div class="entry-title"><a href="/article/138.html">社保卡和医保卡是一张卡吗,有什么区别方法</a></div> <div class="entry-meta"> <span class="entry-date">2025-07-04 00:57</span> <span class="entry-views">阅读(968)</span> </div> </li> <li class="hentry ht_grid_1_3"> <a class="thumbnail-link" href="/article/613.html"> <div class="thumbnail-wrap"><img src="/upload/jingyan/2024/0807/c479139f.jpg" alt="电子邮箱 邮箱怎么申请"></div> </a> <div class="entry-title"><a href="/article/613.html">电子邮箱 邮箱怎么申请</a></div> <div class="entry-meta"> <span class="entry-date">2025-07-05 00:40</span> <span class="entry-views">阅读(962)</span> </div> </li> </ul> </div> <div class="popular-content entry-related"> <div class="popular-loop"> <div class="hentry"> <div class="entry-title"> <span class="post-num num-1">1</span> <a href="/article/442.html">如何去除衣服上的口香糖</a> </div> <div class="entry-meta"><span class="entry-views"><i class="fa fa-eye"></i> 961 阅读</span></div> </div> <div class="hentry"> <div class="entry-title"> <span class="post-num num-2">2</span> <a href="/article/391.html">曼彻斯特是哪个国家</a> </div> <div class="entry-meta"><span class="entry-views"><i class="fa fa-eye"></i> 961 阅读</span></div> </div> <div class="hentry"> <div class="entry-title"> <span class="post-num num-3">3</span> <a href="/article/484.html">卸载的软件怎么恢复</a> </div> <div class="entry-meta"><span class="entry-views"><i class="fa fa-eye"></i> 959 阅读</span></div> </div> <div class="hentry"> <div class="entry-title"> <span class="post-num num-4">4</span> <a href="/article/510.html">excel表格制作教程</a> </div> <div class="entry-meta"><span class="entry-views"><i class="fa fa-eye"></i> 957 阅读</span></div> </div> <div class="hentry"> <div class="entry-title"> <span class="post-num num-5">5</span> <a href="/article/702.html">孙少安的人物经历</a> </div> <div class="entry-meta"><span class="entry-views"><i class="fa fa-eye"></i> 951 阅读</span></div> </div> </div> </div> </main> </div> </div> <aside id="secondary" class="sidebar"> <div class="widget widget_posts_thumbnail"> <div class="widget-title"><span>大家喜欢的文章</span></div> <ul> <li class="clear"> <a href="/article/328.html"> <div class="thumbnail-wrap"><img src="/upload/jingyan/2024/0807/31d6ae46.jpg" alt="滴滴出行如何联系人工客服"></div> </a> <div class="entry-wrap"><a href="/article/328.html">滴滴出行如何联系人工客服</a> <div class="entry-meta">2025-07-04 10:26</div> </div> </li> <li class="clear"> <a href="/article/138.html"> <div class="thumbnail-wrap"><img src="/upload/jingyan/2024/0625/d7b6b662.jpg" alt="社保卡和医保卡是一张卡吗,有什么区别方法"></div> </a> <div class="entry-wrap"><a href="/article/138.html">社保卡和医保卡是一张卡吗,有什么区别方法</a> <div class="entry-meta">2025-07-04 00:57</div> </div> </li> <li class="clear"> <a href="/article/613.html"> <div class="thumbnail-wrap"><img src="/upload/jingyan/2024/0807/c479139f.jpg" alt="电子邮箱 邮箱怎么申请"></div> </a> <div class="entry-wrap"><a href="/article/613.html">电子邮箱 邮箱怎么申请</a> <div class="entry-meta">2025-07-05 00:40</div> </div> </li> <li class="clear"> <a href="/article/442.html"> <div class="thumbnail-wrap"><img src="/upload/jingyan/2024/0807/ce566935.jpg" alt="如何去除衣服上的口香糖"></div> </a> <div class="entry-wrap"><a href="/article/442.html">如何去除衣服上的口香糖</a> <div class="entry-meta">2025-07-04 16:07</div> </div> </li> <li class="clear"> <a href="/article/391.html"> <div class="thumbnail-wrap"><img src="/upload/jingyan/2024/0807/0406a104.jpg" alt="曼彻斯特是哪个国家"></div> </a> <div class="entry-wrap"><a href="/article/391.html">曼彻斯特是哪个国家</a> <div class="entry-meta">2025-07-04 13:35</div> </div> </li> <li class="clear"> <a href="/article/484.html"> <div class="thumbnail-wrap"><img src="/upload/jingyan/2024/0807/f6bb3297.jpg" alt="卸载的软件怎么恢复"></div> </a> <div class="entry-wrap"><a href="/article/484.html">卸载的软件怎么恢复</a> <div class="entry-meta">2025-07-04 18:14</div> </div> </li> <li class="clear"> <a href="/article/510.html"> <div class="thumbnail-wrap"><img src="/upload/jingyan/2024/0807/45aaea02.jpg" alt="excel表格制作教程"></div> </a> <div class="entry-wrap"><a href="/article/510.html">excel表格制作教程</a> <div class="entry-meta">2025-07-04 19:32</div> </div> </li> <li class="clear"> <a href="/article/702.html"> <div class="thumbnail-wrap"><img src="/upload/jingyan/2024/0807/1968ad33.jpg" alt="孙少安的人物经历"></div> </a> <div class="entry-wrap"><a href="/article/702.html">孙少安的人物经历</a> <div class="entry-meta">2025-07-05 05:10</div> </div> </li> </ul> </div> <div class="widget widget_posts_thumbnail"> <div class="widget-title"><span>近期发布的文章</span></div> <ul> <li class="clear"> <a href="/article/112253.html"> <div class="thumbnail-wrap"><img src="/upload/jingyan/2025/1004/72ad2de4.jpg" alt="酒店退房怎么退"></div> </a> <div class="entry-wrap"><a href="/article/112253.html">酒店退房怎么退</a> <div class="entry-meta">2025-10-08 15:38</div> </div> </li> <li class="clear"> <a href="/article/112257.html"> <div class="thumbnail-wrap"><img src="/upload/jingyan/2025/1004/792d0e51.jpg" alt="word文档字数统计在哪里如何看怎么查在哪个菜单"></div> </a> <div class="entry-wrap"><a href="/article/112257.html">word文档字数统计在哪里如何看怎么查在哪个菜单</a> <div class="entry-meta">2025-10-08 15:41</div> </div> </li> <li class="clear"> <a href="/article/112247.html"> <div class="thumbnail-wrap"><img src="/upload/jingyan/2025/1004/2ceeb4d0.jpg" alt="千杯不醉的独门秘诀"></div> </a> <div class="entry-wrap"><a href="/article/112247.html">千杯不醉的独门秘诀</a> <div class="entry-meta">2025-10-08 15:32</div> </div> </li> <li class="clear"> <a href="/article/112244.html"> <div class="thumbnail-wrap"><img src="/upload/jingyan/2025/1004/92d24c46.jpg" alt="NBA挡拆战术攻略"></div> </a> <div class="entry-wrap"><a href="/article/112244.html">NBA挡拆战术攻略</a> <div class="entry-meta">2025-10-08 15:28</div> </div> </li> <li class="clear"> <a href="/article/112242.html"> <div class="thumbnail-wrap"><img src="/upload/jingyan/2025/1004/dcdc6fcc.jpg" alt="如何取消支付宝关联账户呢"></div> </a> <div class="entry-wrap"><a href="/article/112242.html">如何取消支付宝关联账户呢</a> <div class="entry-meta">2025-10-08 15:26</div> </div> </li> <li class="clear"> <a href="/article/112235.html"> <div class="thumbnail-wrap"><img src="/upload/jingyan/2025/1004/83714dec.jpg" alt="iphone7基带自己修复"></div> </a> <div class="entry-wrap"><a href="/article/112235.html">iphone7基带自己修复</a> <div class="entry-meta">2025-10-08 15:20</div> </div> </li> <li class="clear"> <a href="/article/112232.html"> <div class="thumbnail-wrap"><img src="/upload/jingyan/2025/1004/7e5392b1.jpg" alt="怎样画漂亮的扇子"></div> </a> <div class="entry-wrap"><a href="/article/112232.html">怎样画漂亮的扇子</a> <div class="entry-meta">2025-10-08 15:16</div> </div> </li> <li class="clear"> <a href="/article/112230.html"> <div class="thumbnail-wrap"><img src="/upload/jingyan/2025/1004/1e2b2c83.jpg" alt="容易借APP功能教程之如何申请借款"></div> </a> <div class="entry-wrap"><a href="/article/112230.html">容易借APP功能教程之如何申请借款</a> <div class="entry-meta">2025-10-08 15:14</div> </div> </li> </ul> </div> </aside> </div> <footer id="colophon" class="site-footer"> <div id="site-bottom" class="clear"> <div class="container"> <div class="site-info"><a href="/sitemap.xml">网站地图</a> - <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">闽ICP备2022016962号-15</a> - 联系邮箱:1465333496@qq.com </div> </div> </div> </footer> </div> <div id="back-top" style="display: none;"> <a href="#top" title="返回顶部"><span class="genericon genericon-collapse"></span></a> </div> <script>(function ($) { $(document).ready(function () { "use strict"; $('#primary-menu').slicknav({ prependTo: '#slick-mobile-menu', allowParentLinks: true, label: '导航' }); }); })(jQuery);</script> <script defer="" src="/themes/simpleboot3/static/js/autoptimize.js"></script> </body> </html>