欢迎来到IT培训的黄埔军校——智游教育!
加入收藏
联系我们
0371-88888598 4006-371-555
Toggle navigation
首页
高端课程
Java
VR+游戏开发
Web大前端
大数据
信息安全
UI全栈设计
PHP
Python
iOS
专家师资
高薪就业
就业喜报
就业渠道
创业学员
学员专区
学员感言
学员作品
学员活动
研发中心
校企合作
入门知识库
在线精品课
技术干货
关于智游
智游简介
智游新闻
山西校区
智游论坛
首页
技术干货
HTML5知识库
HTML5知识库
java知识库
UI知识库
PHP知识库
HTML5知识库
大数据知识库
Python知识库
VR+虚幻引擎
iOS知识库
Android知识库
网络运营知识库
动画导演知识库
网络信息安全
热点新闻
梦想启航丨智游集团储备
一篇文章读懂智游教育就
智游双选会丨为了梦想,
智游教育2018年58个项目获
强强联合!智游集团与3
劳逸结合丨智游山西分公
学无止境丨智游集团、蓝
圯桥授书丨智游集团现代
热搜标签
智游
Java
大数据
HTML5
Python
专家师资
课程咨询
咨询电话:
4006-371-555
0371-88888598
微信公众号:zhiyou_group
小强的HTML5移动开发之路(3)——HTML5与HTML4比较
于2017-04-10 14:49:19 发表在
HTML5知识库
在前面介绍了HTML5的新特性,新标签的使用,智能表单设计,引入多媒体对象,Canvas对象你的画布,扩展图形标记,HTML5中的地理应用,独立数据存储,新的网络连接。
HTML 5是近十年来Web开发标准最巨大的飞跃。和以前的版本不同,HTML 5并非仅仅用来表示Web内容,它的新使命是将Web带入一个成熟的应用平台,在HTML 5平台上,视频,音频,图象,动画,以及同电脑的交互都被标准化。(HTML5也有了自己的logo).学习HTML5需要掌握下面几方面知识。
1、HTML基础知识
2、CSS样式知识
3、JavaScript知识
很多以前学过HTML 4.0的朋友可能此时会感到很迷惑,到底html 4.0和HTML5的区别是什么,学过html4.0会对学习HTML5有什么帮助
其实HTML5和HTML4最大的区别就是HTML5更加注重内容与结构而不专注表现,举个例子:
<body>
<header>
<hgroup>导航相关数据</hgroup>
</header>
<nav>菜单</nav>
<article>
<h1>标题:HTML5专题</h1>
发布日期:<time>19:00</time>
<time datetime="2013-2-14">情人节</time>
<p>测试相关内容</p>
</article>
<footer>
<address>CSDN-大碗干拌的博客</address>
</footer>
</body>
像上面这个html5中的很多标签,在以前的html4中我们都可以使用<div>标签代替,那么为什么还有用这么多没有使用过的标签呢,这反而增加了记忆难度?事实上不是这样的,这样做有很多好处,这些特定名称的标签更容易区分各自的功能,比如可以同时在PC浏览器和移动端浏览器上识别并以很好的布局展现。
还有一个区别就是,HTML5在更多的声明和标签上面做了简化,也对兼容做了详细的规定,废除了部分元素,增加了部分元素,如下面的声明:
HTML4的声明:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitonal//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-t......
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
HTML5的声明:
<!DOCTYPE html>
<meta charset=utf-8/>
在引入JavaScript或CSS文件的时候,HTML4中写法如下:
<script src="js/juery-1.6.2.js" type="text/javascript"></script>
在HTML5中变的更简单:
<script src="js/juery-1.6.2.js"></script>
不仅如此,HTML5接受一些比较松散的的语法,比如<sCript><script>大小写混用。
从上面可以看出HTML5在以前浏览器发展的基础上对标签进行了简化。另外HTML5中对标签从语法上也进行了分类:
(1)不允许写结束符的标签:area、basebr、col、command、embed、hr、img、input、keygen、link、meta、param、source、Track、wbr
(2)可以省略结束符的标签:li、dt、dd、p、rt、optgroup、option、colgroup、thread、tbody、tr、td、th
(3)可以完全省略的标签:html、head、body、colgroup、tbody
在html4的基础上html5也新增了很多标签,下面列举部分新增标签:
<article> 标记定义一篇文章
<aside> 标记定义页面内容部分的侧边栏
<audio> 标记定义音频内容
<canvas> 标记定义图片
<command> 标记定义一个命令按钮
<datalist> 标记定义一个下拉列表
<details> 标记定义一个元素的详细内容
<dialog> 标记定义一个对话框(会话框)
<embed> 标记定义外部的可交互的内容或插件
<figure> 标记定义一组媒体内容以及它们的标题<footer> 标记定义一个页面或一个区域的底部
<header> 标记定义一个页面或一个区域的头部
<hgroup> 标记定义文件中一个区块的相关信息
<keygen> 标记定义表单里一个生成的键值
<mark> 标记定义有标记的文本
<meter> 标记定义 measurementwithin apredefinedrange
<nav> 标记定义导航链接
<output> 标记定义一些输出类型
<progress> 标记定义任务的过程
<rp> 标记是用在Rubyannotations 告诉那些不支持Ruby元素的浏览器如何去显示
<rt> 标记定义对rubyannotations的解释
<ruby> 标记定义 rubyannotations.
<section> 标记定义一个区域
<source> 标记定义媒体资源
<time> 标记定义一个日期/时间
<video> 标记定义一个视频
以前制作网页头部导航的代码如下:
<div class="header">
<div class="navigation">
<ul class="nav_list">
<li><a href="#" title="Home">Home</li>
<li><a href="#" title="About">About</li>
</ul>
</div><!--导航标签结束-->
</div><!--头部结束-->
用HTML5实现如下:
<header>
<nav>
<ul id="nav-list">
<li><a href="#" title="Home">Home</a></li>
<li><a href="#" title="About">About</a></li>
</ul>
</nav>
</header>
有朋友可能会问了,这样写有什么优势吗?在HTML5中用独立的标签代表特定的功能,比如<header>表示头部,<nav>表示导航,这样代码变的非常有语义且容易理解(不用像上面一样添加额外的注释),同意对于搜索引擎来说,更容易找到。
4006-371-555