仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 875|回复: 8
打印 上一主题 下一主题

[HTML5] 来讲讲:熟悉HTML5:关于HTML5的优点

[复制链接]
只想知道 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-15 23:11:46 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
使得W3C与非正式的WHATWG(网络超文本应用程序技术工作小组)关系开始紧张起来。这些年来,一直是WHATWG肩负起HTML的重责大任。破洛洛文章简介:固然在实际上HTML5具有可以改良网页的潜质,现实上这么多主要的改动是很难往了解和掌控的。对我团体而言我一向往渐渐的体味HTML5的各类新特征的,因而我想往会商一下一些和HTML5相干的简单让人人发生利诱的器材,这大概能匡助人人往更好的了解这门言语的某些方面,使我
几近天天我们都能发明新的关于教授和推行HTML5的资本和文章,我们也在HTML5boilerplate和HTML5Reset(只管他们已超越了HTML5的范围)给出了HTML5的模板。我们也有没有数能够往选择的涵盖HTML5及相干手艺的书本。我们有书架、画廊和剖析师往匡助我们处置HTML5的坏处。可是次要的不要健忘官方的文档。

从我的本人的概念动身(剔出那些关于HTML5能做和不克不及做的争辩)网页计划和开辟者社区对新手艺和语义化是持悲观立场的。
固然在实际上HTML5具有可以改良网页的潜质,现实上这么多主要的改动是很难往了解和掌控的。对我团体而言我一向往渐渐的体味HTML5的各类新特征的,因而我想往会商一下一些和HTML5相干的简单让人人发生利诱的器材,这大概能匡助人人往更好的了解这门言语的某些方面,使我们在利用这些新的特征时更实践和符合。
好的方面

关于HTML5的优点已被各类资本会商过了,包含大批的由BruceLawson,JeremyKeith,和MarkPilgrim等人的书本。经由过程利用HTML5我们能让我们的代码更有语义,削减冗余和包括的一些新的特征能让我们在代码方面化繁为简,使一些之前必要大批代码事情义务尺度化(比方:表单的考证)。
我想这统统都明显的改良了网页标志言语。有些改良固然有些让人利诱,看起来带有反动性,和刷新比拟,反动性应当是HTML5计划的一个基础准绳。让我们看一下上面的一些事例,假如我们已往有一些利诱,我们能发明这些新的元素是何等的好用和有代价。
<article>不单单是文章

在新增添的语义元素中,<section>和<article>标签将会取代我们在XHTML中已熟习的没有语义的<div>标签的,可是我们在甚么时分往利用这些标签的成绩就呈现了。
某些新进修这门言语的人大概会以为一个<article>标签元素就是往出现一篇自力的文章,比方一篇日记。但这并非一切的情形。
让我们一篇博客文章为例,这是申明文档顶用到的统一个例子。一般,我们大概会以为一篇博客文章的HTML5的标签是如许的:
01<article>02<h1>TitleofPost</h1>03<p>Contentofpost…</p>04<p>Contentofpost…</p>05</article>06<section>07<section>08<p>Commentby:CommentAuthor</p>09<p>Comment#1goeshere…</p>10</section><section><p>Commentby:CommentAuthor</p>11<p>Comment#2goeshere…</p>12</section><section><p>Commentby:CommentAuthor</p>13<p>Comment#3goeshere…</p>14</section>15</section>就是说,我保存了这个例子中大概用到的一些其他的HTML5标签。在这个例子中,<article>标签包括了整篇文章,然后”section”在容器的上面包括批评,每个元素都是在他们自力的”section”标签中。
这个文章布局并非不法的大概毛病的。可是从文档中形貌的<article>中的办法,这个<article>标签应当包括全部的文章和其他的批评元素。别的,每个批评自己应当在一个<article>标签中,而且包括在次要的<article>标签中。
上面是从仿单中的截屏,已标示出了<article>:

article标签能够被嵌进到别的article标签中,第一次看的时分大概会对照利诱。
因而,一个<article>标签大概另有其他的<article>标签被嵌进到内里,因而,将我们寻常以为的单词”article”更庞大。BruceLawson,IntroducingHTML5的团结作者,试图鄙人面的一次采访中注释这个困惑:
“不要把<article>放在印刷的范围,好比报纸的文章,而是把它以为是一个自力的个别,像“文章的衣服”来形貌,可是它也能包括别的的文章,使这件衣服包涵的器材更多。”
—BruceLawson
因而,记着将我们可以将<article>元素放进其他的<article>元素,而不单单是文章的内容。Bruce下面的注释是很好的,这能匡助我们进修HTML5新元素怎样往利用。
我们利用Section标签仍是Article标签?

大概最使我们利诱的是我们在利用HTML5创建页面结构的时分,怎样辨别甚么时分往用<article>大概<section>。当我写到这里的时分,我必需老实的告知你我没有从HTML5仿单和我已有的关于HTML5的书本中找到他们的区分,可是渐渐的他们的区分变得愈来愈明晰了。我想JeremyKeith在HTML5forWebDesigners的第67页对<article>的界说是最好的:
“Article元素标签是特别的化的Section.利用它本身包括的相干元素…起首要问你本人你是否是但愿你的内容经由过程RSS大概AtomFeed信息聚合。假如你的内容将在这类情况下公布,那末Article多是最符合元素标签。”
—JeremyKeith,HTML5forWebDesigners
Keith的注释给我莫年夜的匡助,他同时持续注释了<article>和<section>间的分歧是很小的,这取决于每一个开辟者决意怎样往利用它们。增添人人利诱的现实是,你可使用多重的article在section中和多种的section在article中。
了局,大概你想晓得为何我们有他们两个。他们间最次要的区分是:<article>元素是为信息聚合计划的,而<section>元素是用来形貌文档布局和可挪用性。这个复杂的形貌能匡助我们弄分明了这两个新元素更多一点的区分。这里我们要记着的是:不论我们最后的困惑,当我们渐渐顺应这些的时分,这些改动将会匡助开辟者和内容创作者改良他们的事情办法和内容分享办法。
Headers和Footers(注重他们是单数情势!)

别的两个HTML5引进的元素是<header>和<footer>元素。外表来看,它们看上往都很间接。这么多年以来,我们一向利用<divid=”header”>,<divid=”footer”>大概邻近的元从来界说网站的头部和页脚。这对DOM操纵和界说款式是很好的办法,由于我们很简单间接找到这些元素。可是他们确没有任何的语意。
“div并没有被界说语意,ID属性也没有被界说语意。(用户的客户端不同意从ID的属性中引伸寄义。)”
—MarkPilgrim,DiveIntoHTML5
HTML5引进<header>和<footer>元素是修改语义成绩的最好的办法,出格是这类经常使用的元素。可是这些元素并非像字面看上往的那末间接。从手艺的层面说,假如全球的一切网站增添一个<header>和<footer>到他们的页面,在HTML5中是完整正当的。可是这个新的元素并非仅仅往用做“网站的头部”和“网站的尾部”。
header标签是用来计划成往标示简介大概导航的帮助功效,footer标签计划成用来包括内容相干信息的元素。好比,假如你利用一个footer元素作为一个完全页面的footer,这类情形下,版权、政策链接和相干的内容就会很得当的被包括。一个header标签大概包括Logo和导航条。
可是统一个页面大概包括多个<section>元素。每个section中都同意包括它自己的header和/大概footer标签元素。Keith也把这些元素的用处作了总结:
“一个header元素将会呈现在一个文档大概一个section的顶部,可是这不是必需的,这取决于他们自己界说的内容…而不是他们的地位。”
“像header元素一样,footer听上往像是在形貌它的地位,但像header,那不是独一的情形。”
—JeremyKeith,HTML5forWebDesigners
同时在申明文档中Keith的申明也被作了标示:
“<header>元素并非一个地区内容;它其实不会暗示一个新的区块。”
—TheheaderelementintheHTML5specification
这些注释能匡助我们在了解这些标签的观点,让我们可以了解这些元素应当怎样被利用。现实上,这些支解页面的办法使页面是页面更轻量化和便利内容聚合,对内容创作者和开辟者来讲,仅仅必要增添语义化的标签。
题目的起落的分歧体例
在HTML5之前,题目标签(从<h1>到<h6>)是很简单了解的。这些年来,一些人人已顺应为改良语义、seo和可扩大的理论。一般情形,我们习气于在一个页面中只包括一个<h1>元素,其他的题目元素依照按次而没有距离(固然偶然候它的呈现依据大概必要倒置按次)。
当我们先容HTML5时,利用新的布局元素时,我们必要往从头思索我们检察页面布局的角度。
这里有一些事变必要在在我们改动题目/文档布局时注重:


  • 在每一个自力页面中,HTML5的最好理论倡议是给每一个section元素(大概其他的区块界说的别的元素)一个<h1>标签。
  • 固然我们同意一个section元素能够<h2>(大概更低条理的)元素入手下手,可是我们让然激烈倡议以<h1>元素作为一个<section>入手下手,是Block更便利挪动。
  • 文档节点以由section创立,而不是题目(不像之前的HTML版本)
  • <hgroup>元素被用来将你想将他们作为一个自力的一组相干的题目群组,来界说大概引伸成绝对自力的区块;<hgroup>并非每一个系列的题目都必要的,只要这些题目作为一个自力的单位和表面的内容相接洽时。
  • 假如想往反省你的文档布局是否是准确,你可使用HTML5Outliner。
除下面的概念外,不管你的题目大概文档的布局你利用在HTML4大概Xhtml对HTML5仍旧是正当的。
因而,固然我们构建网页的老办法不是切合HTML5,我的概念是关于最好的理论文档布局正在变的愈来愈好。
区块大概内联?二者都不是!(怎样分类…)

为了版式和款式的请求,CSS开辟者已熟习HTML元素(为了款式和结构的必要)被界说为两种元素之一:区块元素和内联元素(固然你能够将这两类持续分类)。这类了解拓展了我们的一个元素在制订页面的实际办法,让我们更简单(一旦你掌控了他们见的区分)往界说款式和挪动元素。
HTML5促进了这类观点往包括更多的分类,既不是区块元素也不是内联元素。从实际下去说,区块和内联仍旧存在,可是他们在分歧的标签之下。如今这些分歧份额元素分类包含:


  • 群组的内容
  • 笔墨层级的语义化标签
  • 区块内容
  • 表单位素
  • 嵌进的内容
我的确很喜好这些改善,使标签元素更靠近他们的分类,同时我以为开辟者也会很快的顺应这些变更,可是主要的是我们晋级了洽当的术语来确保在这些标签的默许展示上削减人人的利诱。在这篇文章的会商内容中,这一点我以为是最简单被把握和承受的。
结论

固然这些概念是我本人在研讨html5中懂得的一些观点的总结,可是对任何一团体来讲进修这些新标志言语特性的办法是拿一本关于这个话题的书。我激烈倡议在文中已触及到的一本,大概你能够在线扫瞄 MarkPilgrim’sbook。
这些新的元素和观点应当不会被曲解。我们能够花一些工夫来细心的研讨他们,避免曲解和翻开疑团。经由过程这些新的标签元素能匡助我们取得愈来愈多的好处,能匡助开辟者和内容创立者展设一条成心义的网页--JeremyKeith以为的“没有没有意义标志的网页”。
原文地点:http://www.smashingmagazine.com/2010/11/10/learning-to-love-html5/
</p>
HTML5开发的网页文档类型极其简单,就够了,记得5年前还在反复跟团队强调使用XHTML那段冗长的文档类型声明.
精灵巫婆 该用户已被删除
沙发
发表于 2015-1-17 20:28:13 | 只看该作者
学Dreamweaver技术的过程其实是一个增加信心的过程。
admin 该用户已被删除
板凳
发表于 2015-1-24 16:01:14 | 只看该作者
Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。
第二个灵魂 该用户已被删除
地板
发表于 2015-2-2 10:56:50 | 只看该作者
dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS,三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。
因胸联盟 该用户已被删除
5#
发表于 2015-2-7 18:59:02 | 只看该作者
滚动条)层属性--溢出(visible/hidden/scroll/auto)
愤怒的大鸟 该用户已被删除
6#
发表于 2015-2-23 08:40:19 | 只看该作者
HTML技术的不断发展和完善,随之而产生了众多网页编辑器,从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器(则原始代码编辑器)
兰色精灵 该用户已被删除
7#
发表于 2015-3-7 07:49:26 | 只看该作者
使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。
8#
发表于 2015-3-14 18:18:18 | 只看该作者
在刚开始接触网页的第一堂课上,听说网页制作会是一门很无聊并且很难听懂的过程,而事实却印证了这样一个事实。
再现理想 该用户已被删除
9#
发表于 2015-3-21 14:51:51 | 只看该作者
学Dreamweaver技术的过程其实是一个增加信心的过程。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-12-23 06:56

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表