HTML5技术

HTML5 学习总结(一)——HTML5概要与新增标签 - 张果(2)

字号+ 作者:H5之家 来源:H5之家 2016-11-29 17:01 我要评论( )

HTML5对于之前版本来说,并非简单的版本升级,而是一次全面的框架和性能的提升与优化;这表现在:语法更简单、新增了大量的语义性标签、强大的canvas元素代替flash、丰富的API接口使用极大方便了开发者与浏览器的交

 HTML5对于之前版本来说,并非简单的版本升级,而是一次全面的框架和性能的提升与优化;这表现在:语法更简单、新增了大量的语义性标签、强大的canvas元素代替flash、丰富的API接口使用极大方便了开发者与浏览器的交互。其中,关键提升在于:基于HTML5强大的新增加框架,如手机端设备与页面进行交互,如重力感应、地理定位、离线操作等, 在主流移动端平台,可以很轻松地自定义性能强大的webapp,包括游戏、动画和企业级的应用开发。

CSS3绘制《辛普森一家》

HTML5开发的游戏

1.7、HTML5学习与开发工具 1.7.1、基础要求

HTML+CSS+JavaScript与任何一种Web服务器后台技术如(Java,dotNET,PHP)

1.7.2、开发工具

主流浏览器,如Chrome浏览器、Firefox浏览器、Safari浏览器、IE9+浏览器、IETester等

HTML5对开发工具并没有限制,任意的文本编辑器都可以如:webstorm/notepad++ + zendcode /textMate + zendcode / sublime 2,Visual Studio2013+,Visual Studio Code,HBuilder等

如果习惯了eclipse的朋友可以使用HBuilder,eclipse实在不适合用于写前端脚本(4千万美刀的东西...),

HBuilder是DCloud(数字天堂)推出的一款支持HTML5的Web开发IDE。它基于Eclipse,所以顺其自然地兼容了Eclipse的插件。
快,是HBuilder的最大优势,通过完整的语法提示和代码输入法、代码块等,大幅提升HTML、js、css的开发效率。官网:

1.8、HTML5语法规则与文档声明 1.8.1、语法规则

a)、标签要小写
属性值不加" "或 ' '
b)、可以省略某些标签
HTML body head tbody
c)、可以省略某些结束标签
tr td li
d)、单标签不用加结束标签
img input
e)、废除的标签,看第二点
font center big

1.8.2、文档声明

<!DOCTYPE> 声明必须位于 HTML5 文档中的第一行,也就是位于 <HTML> 标签之前。该标签告知浏览器文档所使用的 HTML 规范。
doctype 声明不属于 HTML 标签,它是一条指令,告诉浏览器编写页面所用的标记的版本。
在所有 HTML 文档中规定 doctype 是非常重要的,这样浏览器就能了解预期的文档类型。
HTML 4.01 中的 doctype 需要对 DTD 进行引用,因为 HTML 4.01 基于 SGML。而 HTML 5 不基于 SGML,因此不需要对 DTD 进行引用。

1.8.2、文档声明 二、废弃的标签

以下的 HTML 4.01 元素在HTML5中已经被删除,虽然浏览器为了兼容性考虑都还支持这些标签,但建议使用新的替代标签,矛盾的是老浏览器对新标签的支持度又不够,视项目的受众对象而定了。

2.1、能用CSS代替的元素 

这些元素包含basefont、big、center、font、s、strike、tt、u。这些元素纯粹是为页面展示用的,表现的内容应该由CSS完成。

2.2、frame框架

这些元素包含frameset、frame、noframes。HTML5中不支持frame框架,只支持iframe框架,或者用服务器方创建的由多个页面组成的符合页面的形式,删除以上这三个标签。

2.3、只有部分浏览器支持的元素

这些元素包含applet、bgsound、blink、marquee等标签。

2.4、其他被废除的元素

废除rb,使用ruby替代
废除acronym使用abbr替代
废除dir使用ul替代
废除isindex使用form与input相结合的方式替代
废除listing使用pre替代
废除xmp使用code替代
废除nextid使用guids
废除plaintex使用“text/plian”(无格式正文)MIME类型替代

三、新增的标签 3.1、新增的结构标签

在HTML4.01中div被广泛用于各种布局环境在,没有明确的定义,HTML5为了SEO将div语义化了,新增加结构标签如下:

a)、section元素
表示页面中的一个内容区块,比如章节、页眉、页脚或页面的其他部分。可以和h1、 h2……等元素结合起来使用,表示文档结构。例:HTML5中<section>……</section>;HTML4中<div> ……</div>。

b)、article元素
表示页面中一块与上下文不相关的独立内容。比如一篇文章。

c)、aside元素
表示article元素内容之外的、与article元素内容相关的辅助信息。

d)、header元素
表示页面中一个内容区块或真个页面的标题。

e)、hgroup元素
表示对真个页面或页面中的一个内容区块的标题进行组合。

f)、footer元素
表示整个页面或页面中一个内容区块的脚注。一般来说,他会包含创作者的姓名、创作日期以及创作者的联系信息。

g)、nav元素
表示页面中导航链接的部分。

h)、figure元素
表示一段独立的流内容,一般表示文档主体流内容中的一个独立单元。使用figcaption元素为figure元素组添加标题。例如:
<figure>
<figcaption>PRC</figcaption>
<p>The People's Republic of China was born in 1949</p>
</figure>
HTML4中常写作
<dl>
<h1>prc</h1>
<p>The People's Republic of China was born in 1949</p>
</dl>

示例:

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • HTML5学习与巩固——canvas绘图象棋盘 - SeeYouBug

    HTML5学习与巩固——canvas绘图象棋盘 - SeeYouBug

    2016-11-29 18:00

  • CSS3学习笔记1-选择器和新增属性 - xinyiyake

    CSS3学习笔记1-选择器和新增属性 - xinyiyake

    2016-11-21 17:00

  • HTML5中引入的关键特性 - 就只是小茗

    HTML5中引入的关键特性 - 就只是小茗

    2016-11-21 16:00

  • HTML5【语法要点】 - Kris゜

    HTML5【语法要点】 - Kris゜

    2016-11-21 12:00

网友点评
(