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/170553.html"> <div class="related-thumb"> <img src="/upload/jingyan/2025/1005/a6b02d11.jpg" alt="HTML5的video标签如何让其在安卓机上进行播放呢"> </div> <div class="related-content"> <h4>HTML5的video标签如何让其在安卓机上进行播放呢</h4> </div> </a> </div> <div class="related-item"> <a href="/life/181992.html"> <div class="related-thumb"> <img src="/upload/jingyan/2025/1005/78387fe4.jpg" alt="电脑入门教程之在 Windows XP 网络问题解决"> </div> <div class="related-content"> <h4>电脑入门教程之在 Windows XP 网络问题解决</h4> </div> </a> </div> <div class="related-item"> <a href="/article/102833.html"> <div class="related-thumb"> <img src="/upload/jingyan/2025/1003/8e7fff13.jpg" alt="儿童吉他入门教程"> </div> <div class="related-content"> <h4>儿童吉他入门教程</h4> </div> </a> </div> </div> <!-- 后5篇:仅标题列表 --> <ul class="related-title-list"> <li> <a href="/life/123606.html"> <span class="rank num-1">1</span> <span class="txt">摄影入门教程</span> <span class="view-count"><i class="icon-eye"></i>964 阅读</span> </a> </li> <li> <a href="/answer/265450.html"> <span class="rank num-2">2</span> <span class="txt">图解10款必备的HTML5开发工具</span> <span class="view-count"><i class="icon-eye"></i>959 阅读</span> </a> </li> <li> <a href="/answer/228426.html"> <span class="rank num-3">3</span> <span class="txt">学唱歌入门教程</span> <span class="view-count"><i class="icon-eye"></i>959 阅读</span> </a> </li> <li> <a href="/life/211157.html"> <span class="rank num-4">4</span> <span class="txt">小提琴初学者入门教程</span> <span class="view-count"><i class="icon-eye"></i>956 阅读</span> </a> </li> <li> <a href="/answer/205070.html"> <span class="rank num-5">5</span> <span class="txt">羽毛球初学者入门教程</span> <span class="view-count"><i class="icon-eye"></i>931 阅读</span> </a> </li> </ul> </section> </div> <!-- 右侧边栏 --> <aside class="sidebar"> <!-- 热门文章 --> <div class="sidebar-widget"> <h3>热门文章</h3> <ul class="hot-articles-list"> <li> <a href="/answer/203844.html"> <div class="article-thumb"> <img src="/upload/jingyan/2025/1007/4b32af95.jpg" alt="手工,人民币爱心折法"> </div> <div class="article-info"> <h4>手工,人民币爱心折法</h4> <div class="article-meta"> <span class="date">08-05</span> <span class="views">1193次</span> </div> </div> </a> </li> <li> <a href="/answer/110328.html"> <div class="article-thumb"> <img src="/upload/jingyan/2025/1003/8cdedd57.jpg" alt="剑灵50回归怎么玩"> </div> <div class="article-info"> <h4>剑灵50回归怎么玩</h4> <div class="article-meta"> <span class="date">06-01</span> <span class="views">1164次</span> </div> </div> </a> </li> <li> <a href="/answer/177361.html"> <div class="article-thumb"> <img src="/upload/jingyan/2025/1005/9dd32a87.jpg" alt="微信流量主到底有多赚钱"> </div> <div class="article-info"> <h4>微信流量主到底有多赚钱</h4> <div class="article-meta"> <span class="date">07-18</span> <span class="views">1162次</span> </div> </div> </a> </li> <li> <a href="/answer/202342.html"> <div class="article-thumb"> <img src="/upload/jingyan/2025/1007/012192c4.jpg" alt="猪肉包子馅的做法"> </div> <div class="article-info"> <h4>猪肉包子馅的做法</h4> <div class="article-meta"> <span class="date">08-04</span> <span class="views">1126次</span> </div> </div> </a> </li> <li> <a href="/answer/133514.html"> <div class="article-thumb"> <img src="/upload/jingyan/2025/1003/e840e0fa.jpg" alt="盘点新房快速除甲醛的好方法"> </div> <div class="article-info"> <h4>盘点新房快速除甲醛的好方法</h4> <div class="article-meta"> <span class="date">06-17</span> <span class="views">1122次</span> </div> </div> </a> </li> <li> <a href="/answer/149208.html"> <div class="article-thumb"> <img src="/upload/jingyan/2025/1004/431847f4.jpg" alt="派派中,如何才能提升声望"> </div> <div class="article-info"> <h4>派派中,如何才能提升声望</h4> <div class="article-meta"> <span class="date">06-28</span> <span class="views">1112次</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><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>