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="article-tags"> <span class="tag-label">标签:</span>HTML5,入门教程 </div> </article> <!-- 相关文章 --> <section class="related-articles"> <h3>相关文章</h3> <!-- 前3篇:图文卡片 --> <div class="related-list related-list-grid"> <div class="related-item"> <a href="/answer/103697.html"> <div class="related-thumb"> <img src="/upload/jingyan/2025/1003/7ca91121.jpg" alt="腾冲旅行攻略"> </div> <div class="related-content"> <h4>腾冲旅行攻略</h4> </div> </a> </div> <div class="related-item"> <a href="/answer/100879.html"> <div class="related-thumb"> <img src="/upload/jingyan/2025/1003/14cc039d.jpg" alt="怎么在睡前做运动最减肥"> </div> <div class="related-content"> <h4>怎么在睡前做运动最减肥</h4> </div> </a> </div> <div class="related-item"> <a href="/answer/100816.html"> <div class="related-thumb"> <img src="/upload/jingyan/2025/1003/79503351.jpg" alt="支付宝怎么刷长沙公交车?支付宝刷长沙公交教程"> </div> <div class="related-content"> <h4>支付宝怎么刷长沙公交车?支付宝刷长沙公交教程</h4> </div> </a> </div> </div> <!-- 后5篇:仅标题列表 --> <ul class="related-title-list"> <li> <a href="/answer/101606.html"> <span class="rank num-1">1</span> <span class="txt">用u盘制作启动盘</span> <span class="view-count"><i class="icon-eye"></i>1024 阅读</span> </a> </li> <li> <a href="/answer/100667.html"> <span class="rank num-2">2</span> <span class="txt">2018年教你如何获得免费流量</span> <span class="view-count"><i class="icon-eye"></i>1023 阅读</span> </a> </li> <li> <a href="/answer/102198.html"> <span class="rank num-3">3</span> <span class="txt">王者荣耀芈月铭文选择</span> <span class="view-count"><i class="icon-eye"></i>1019 阅读</span> </a> </li> </ul> </section> </div> <!-- 右侧边栏 --> <aside class="sidebar"> <!-- 热门文章 --> <div class="sidebar-widget"> <h3>热门文章</h3> <ul class="hot-articles-list"> <li> <a href="/answer/103697.html"> <div class="article-thumb"> <img src="/upload/jingyan/2025/1003/7ca91121.jpg" alt="腾冲旅行攻略"> </div> <div class="article-info"> <h4>腾冲旅行攻略</h4> <div class="article-meta"> <span class="date">05-26</span> <span class="views">1029次</span> </div> </div> </a> </li> <li> <a href="/answer/100879.html"> <div class="article-thumb"> <img src="/upload/jingyan/2025/1003/14cc039d.jpg" alt="怎么在睡前做运动最减肥"> </div> <div class="article-info"> <h4>怎么在睡前做运动最减肥</h4> <div class="article-meta"> <span class="date">05-22</span> <span class="views">1028次</span> </div> </div> </a> </li> <li> <a href="/answer/100816.html"> <div class="article-thumb"> <img src="/upload/jingyan/2025/1003/79503351.jpg" alt="支付宝怎么刷长沙公交车?支付宝刷长沙公交教程"> </div> <div class="article-info"> <h4>支付宝怎么刷长沙公交车?支付宝刷长沙公交教程</h4> <div class="article-meta"> <span class="date">05-22</span> <span class="views">1025次</span> </div> </div> </a> </li> <li> <a href="/answer/101606.html"> <div class="article-thumb"> <img src="/upload/jingyan/2025/1003/7ba8ff77.jpg" alt="用u盘制作启动盘"> </div> <div class="article-info"> <h4>用u盘制作启动盘</h4> <div class="article-meta"> <span class="date">05-23</span> <span class="views">1024次</span> </div> </div> </a> </li> <li> <a href="/answer/100667.html"> <div class="article-thumb"> <img src="/upload/jingyan/2025/1003/55738d15.jpg" alt="2018年教你如何获得免费流量"> </div> <div class="article-info"> <h4>2018年教你如何获得免费流量</h4> <div class="article-meta"> <span class="date">05-22</span> <span class="views">1023次</span> </div> </div> </a> </li> <li> <a href="/answer/102198.html"> <div class="article-thumb"> <img src="/upload/jingyan/2025/1003/e4c39e5b.jpg" alt="王者荣耀芈月铭文选择"> </div> <div class="article-info"> <h4>王者荣耀芈月铭文选择</h4> <div class="article-meta"> <span class="date">05-24</span> <span class="views">1019次</span> </div> </div> </a> </li> </ul> </div> <!-- 推荐文章 --> <div class="sidebar-widget recommended-widget"> <h3>推荐文章</h3> <div class="recommended-articles"> <div class="recommended-item"> <a href="/article/139390.html"> <div class="rec-thumb"> <img src="/upload/jingyan/2025/1004/2ceeb4d0.jpg" alt="千杯不醉的独门秘诀"> </div> <div class="rec-content"> <h4>千杯不醉的独门秘诀</h4> </div> </a> </div> <div class="recommended-item"> <a href="/answer/139391.html"> <div class="rec-thumb"> <img src="/upload/jingyan/2025/1004/acfcd913.jpg" alt="短裙怎么画好看"> </div> <div class="rec-content"> <h4>短裙怎么画好看</h4> </div> </a> </div> <div class="recommended-item"> <a href="/answer/139392.html"> <div class="rec-thumb"> <img src="/upload/jingyan/2025/1004/b4cc4d9a.jpg" alt="4xl是180还是185"> </div> <div class="rec-content"> <h4>4xl是180还是185</h4> </div> </a> </div> <div class="recommended-item"> <a href="/article/139393.html"> <div class="rec-thumb"> <img src="/upload/jingyan/2025/1004/0e256dee.jpg" alt="tplink路由器设置教程视频"> </div> <div class="rec-content"> <h4>tplink路由器设置教程视频</h4> </div> </a> </div> <div class="recommended-item"> <a href="/article/139394.html"> <div class="rec-thumb"> <img src="/upload/jingyan/2025/1004/105a1c68.jpg" alt="江湖群雄传少林派攻略"> </div> <div class="rec-content"> <h4>江湖群雄传少林派攻略</h4> </div> </a> </div> <div class="recommended-item"> <a href="/answer/139396.html"> <div class="rec-thumb"> <img src="/upload/jingyan/2025/1004/72ad2de4.jpg" alt="酒店退房怎么退"> </div> <div class="rec-content"> <h4>酒店退房怎么退</h4> </div> </a> </div> <div class="recommended-item"> <a href="/article/139397.html"> <div class="rec-thumb"> <img src="/upload/jingyan/2025/1004/acebc7f8.jpg" alt="怎么辨别传销"> </div> <div class="rec-content"> <h4>怎么辨别传销</h4> </div> </a> </div> <div class="recommended-item"> <a href="/life/139398.html"> <div class="rec-thumb"> <img src="/upload/jingyan/2025/1004/26333b10.jpg" alt="八言绝句古诗有哪些"> </div> <div class="rec-content"> <h4>八言绝句古诗有哪些</h4> </div> </a> </div> <div class="recommended-item"> <a href="/article/139399.html"> <div class="rec-thumb"> <img src="/upload/jingyan/2025/1004/8238888f.jpg" alt="自热米饭的使用方法"> </div> <div class="rec-content"> <h4>自热米饭的使用方法</h4> </div> </a> </div> <div class="recommended-item"> <a href="/article/139400.html"> <div class="rec-thumb"> <img src="/upload/jingyan/2025/1004/792d0e51.jpg" alt="word文档字数统计在哪里如何看怎么查在哪个菜单"> </div> <div class="rec-content"> <h4>word文档字数统计在哪里如何看怎么查在哪个菜单</h4> </div> </a> </div> </div> </div> </aside> </div> </div> </main> <!-- 底部 --> <footer class="main-footer"> <div class="container"> <div class="footer-content"> <div class="footer-info"> <p>问问二七为您提供海量有趣、实用的生活科普知识。涵盖饮食健康、历史文化、自然科学等冷门小知识。每天更新“十万个为什么”式问答,帮助您在趣味中提升谈资与认知。</p> <p>CopyRight © 2025 <a href="/sitemap.xml">网站地图</a> - <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">闽ICP备2025116981号-9</a> - 联系邮箱:1465333496@qq.com</p> </div> </div> </div> </footer> <script type="text/javascript">document.getElementById("answer").className="active";</script> <script src="/themes/simpleboot3/static/js/main.js"></script> </body> </html>