HTML5标签使用的常见误区_第1页
HTML5标签使用的常见误区_第2页
HTML5标签使用的常见误区_第3页
HTML5标签使用的常见误区_第4页
HTML5标签使用的常见误区_第5页
已阅读5页，还剩4页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

HTML5标签使用的常见误区最近组内进行HTML5标签的学习，方法呢就是大家每人挑选几个标签，自己先去学习，然后给大家作讲解。这个过程大家还是挺有收获的。但是现在HTML5还处在草案阶段，有些新的标签元素的解释也是经常有变化，甚至标签加入/移出也很频繁（比如hgroup），同时现有的大的门户网站在使用HTML5方面也没有很好的范例可以参考，让大家的学习过程更摸索。下面是我在html5doctor上面看到的一篇文章，在目前大家懵懂的阶段，可能看看大师的讲解会更容易理解。由于才疏学浅，很多不明白的地方可能只是做了字面上的翻译，不对的地方还请大家多多指教。下面附上原文地址：AvoidingcommonHTML5mistakes，作者:RichardClark，有疑问的地方大家可以核对英文。在这篇文章中，我将给大家分享HTML5构建页面的小错误和不好的实践方法，让我们在以后的工作中避免这些错误。不Sffi<Section>当成简单的容器来定义样式我们经常看到的一个错误就是武断的将<div>标签用<section>标签来替代，特别是将作为包围容器的<div>用<section>来替换。在XHTML或者HTML4中，我们将会看到类似下面的代码：<!--HTML4-stylecode--><divid="wrapper"><divid="header"><h1>Mysuperduperpage</h1><!--Headercontent--></div><divid="main"><!content--></div><divid="secondary"><!--Secondarycontent--></div><divid="footer"><!--Footercontent--></div></div>

现在我看到了下面的代码样子:<!--Don’tcopythiscode!It’swrong!--><sectionid="wrapper"><header><h1>Mysuperduperpage</h1><!--Headercontent--></header><sectionid="main"><!content--></section><sectionid="secondary"><!--Secondarycontent--></section><footer><!--Footercontent--></footer></section>直观的看，上面的例子是错误的：<section>并不是一个容器。<section>元素是有语意的区段，帮助构建文档大纲。它应该包含标题。如果你要寻找一个可以包含页面的元素（不论是HTML或者XHTML），通常的做法是直接对<body>标签定义样式就像KrocCamen描述的那样子如果你还需要额外的元素来定义样式使用<div>,就像DrMike阐述的那样,div并没有灭亡，如果这里没有其它更合适的，div可能是你最合适的选择。记住这点，这里我们重新修正了上面的例子，通过使用两个新角色。（你是否需要额外的<div>取决于你的设计。）<body><header><h1>Mysuperduperpage</h1><!--Headercontent--></header><divrole="main"><!content--></div><asiderole="complementary"><!--Secondarycontent--></aside><footer><!--Footercontent--></footer></body>目淌奇倍湖^讲郭^溟—今浏WMMS丽曲、肄®w奇mm邮HTMLssecuoningconienie-emenifowchari»i±奇麋蜿票qI。»maanl33«iSFfflAhgroupvaAheaderv茹麟丽曲克苗昏3商丽>7—喉淋Ta醐昏®一期阿湖Tsffls。t伸昏湖、陪M沸的汁判m¥TM^ssEfMHAheadervsAhgroupv*耕。^£lw^ffi^m*WAheadervsAhgroupvsaffl^ffi^、，回湖肄昏画-BS尊-•AheaderV浏WHM湖SMM奋苛—®®浦弗邮4(nB®sH加、SMM回眇secc+.on昏不借・.、驴淋克®)4+}3、淫人hlvwTh6x部傲降令骤圈、正湎奋苛secuons^^.isHSFfflsAheaderVUK、m—今汗遂-&■、回W丽曲的旨人headerV*耕、ATIDon、-copyr-hh-scode一Noneedforheaderhere;vAae.c-evAheadervAhlvMybesibogposi<hlv<headervAT—Ari-c-econienTV<ae.c-ev目淌奇sAheaderv*耕»回眇—->^^浏*3、^T醐丽曲Aheaderv*耕N。Aamc-ev*耕昉ffl^s奇昏、司皿风苛人headerv¥T四眇的w3a(^efflK-&-aiK昏尝麻出、肄m苛百醐ffi君司季昏尤®漏7目丑e-H回阿市画-B斗回w-Aae.c-evAhlvMybesibogposi<hlvAT—Ari-c-econienTV<ae.c-evAhgroupv『卧nSFffl、陪M邮四丽曲人hgroupvs®疝调查。m-H回防善疝淫-H奇T瞟茹人headerv*耕吾人hgrouPX勘—苗丽国•防MT4—今曹弗邮Ahgroupvw皿^®N(民目-Ta^Ahgroupv)噩—君疝点邮Hrm湖-HHIS市印-ATIDon、-copyr-hh-scode一Noneedforhgroupher?vAheadervAhgroupvAhlvMybesibogposi<hlv<hgroupvApvbyR-chc-ark<pv<headerv防善茹淫，、茹人hgroupV蕊编、iwiiAheadervAhlvMybesibogposi<hlvApvbyR-chc-ark<pv<headerv噩门善疝淫[?湖四眇N薛M醐昏*耕•ATIDon、-copyr-hh-scode一Noneedforheaderhere;vAheadervAhgroupvAhlvMycompany<hlvAh2VESiab=shed1893<h2v<hgroupv<headervl^Aheaderv*耕昏中浏*)n4AhgroupvsBs>fflJ普4=0肄mKM醐—今避3sgAheaderv7目淌济4避季昏浏w^wTheadervs民目Ahgroupvsa泌浏»、肄mw薄茹Aheadervylwm®^^。AhgroupvAhlvMycompany<hlvAh2VESiab=shed1893<h2v<hgroupvAvsWHTML5Is3。今浏W-&-W肄mdfr]防噩汗删昏邑®、肄mm曲®湖加踊wfsNs*耕昏邑商、肄=〕昏薜浦沼基汁卅聊。、肄m回瞟朋藤曲。Anavv^湖—今Thenave-emenirepresenisasecuonofapageihai-inksiooiherpagesollopallswiihwhepageQjsectionw#hnavigaio'rl=nks・—theelementisprimarilyintendedNote:Notallgroupsoflinksonapageneedtobeinanavelementforsectionsthatconsistofmajornavigationblocks.Inparticular,itiscommonforfooterstohaveashortlistoflinkstovariouspagesofasite,suchasthetermsofservice,thehomepage,andacopyrightpage.—theelementisprimarilyintendedThefooterelementaloneissufficientforsuchcases;whileanavelementcanbeusedinsuchcases,itisusuallyunnecessary.WHATWGHTMLspec这里面的关键词是"重要"导航。我们可能会对"重要"有不同的定义，但是我的理解是•主要导航•网站搜索•二级导航（这个能是有争议的）•页面内链接（比如一篇很长的文章）虽然并没有对错之分，但根据我的理解和一个民意投票让我觉得在下面这些情形下，我不会使ffi＜nav＞标签：•翻页•社交类的链接（虽然有些社交类的链接也是主要的链接，比如关于我Aboutme和品味Flavours）•博客文章的标签•博客文章的分类列表•第三级导航•大页脚如果你不能确定是否使用＜nav＞，那就先对你问一下下面的几个问题："这是否是一个主要链接？"，你可以根据下面的几个因素来回答你刚才的问题：•如果用＜section＞和标题标签能够解决你的问题，那就不要去使用＜nav＞-HixieonIRC•你是不是为了增加可访问性而增加的一个快捷跳转链接呢？如果上面的回答都是"不"，那可能就不适合使用＜nav＞。

<figure>元素的错误<figure>和经常与它合伙作案的<figcaption>，是很难掌握的标签，下面是经常看到的一些小错误。并不是所有的图片都是figure（注：比较难理解阿，image=S片,figure=S形）之前，我曾经说过不要写那些不需要的标签。这个错误也是相同的。我经常看到一个网站上的每张图片都有<figure>标签。这些额外增加的标签并不会给你带来任何的益处，并且还增加了你自己的工作强度和让自己的内容变得更难理解。在规范中关于<figure>的解释如下："某些流内容，可以有标题，自我包含并且通常作为一个单元独立于内文档流之外。”在那里有完美的表述，就是它可以被从主内容中移除——比如放到边拦，而对文档流没有影响。如果仅仅是一张表现类的图片而且和文档中其他的内容没有关系的话，那就不需要使用<figure>."这张图片需要对上下文的内容作出解释吗？"，如果答案是"否"，那就可能不B<figure>（可能是<aside>），"我能把它移到附录里面吗？"，如果这两个问题的答案都是"是"，那就可能是<figure>.你的标志不是一6<figure>将上面的延伸开来，对你的logo也是这样。下面是两组我找到的有规律的代码片断：<!--Don’tcopythiscode!It’swrong!--><header><h1><figure><imgsrc="/img/mylogo.png"alt="Mycompany"class="hide"/></figure>Mycompanyname</h1></header><!--Don’tcopythiscode!It’swrong!--><header><figure><imgsrc="/img/mylogo.png"alt="Mycompany"/></figure></header>这里就不需要说啥了，这是很明显的错误，可能你认为我们说的是不是将logo放在H1标签里面，但是我们在这里并不讨论这个问题。让我们迷惑的是<figure>元素。<figure>标签只用在当有上下文需要说明或者被

<section>包围的时候。我这里要说的是你的logo可能很少会被这种情况下使用。很简单，那就不要去这样做，你需要的仅仅是下面的样子。<header><h1>Mycompanyname</h1><!--Morestuffinhere--></header>figure只能用在标签上的误解另一个对<figure>的误解就是我们通常认为它只能用在图片上面。事实上并不是这样子的，它可以被用在<video><audio>,—个图标（比如<SVG>）,一个引用，一个表格，一段代码，一段散文，或者任何和这些相关的组合。不要把你的<figure>标签仅仅局限在图片上。我们网页制作师的任务就是用标签更准确的描述内容。这里有一篇更深入讲解<figure>的文章Iwroteabout<figure>，很值得阅读的。不要去使用那些不必要的type属性这可能是我们最常见的一些问题，它们并不是真正的错误，但我觉得我们的最好实践还是尽量避免这种模式。在HTML5中，我们并不需要给<script>和<script>增加type属性，如果这些从CMS默认添加的内容中移出是很痛苦的事情，那当你手工编码的时候还写入它们或者你能完全的控制你的模板时候你完全可以删掉它们。因为所有的浏览器都会将<script>解析成Javascript和<css>标签是CSS，你不再需要那个type属性了：<!--Don’tcopythiscode!It’sattributeoverload!--><linktype="text/css"rel="stylesheet"href="css/styles.css"/><scripttype="text/javascript"src="js/scripts.js"></script>现在我们可以写成下面的样子：<linkrel="stylesheet"href="css/styles.css"/><scriptsrc="js/scripts.js"></script>你也能够对编码的设置作出省略。MarkPilgrim在DiveintoHTML5的语义化一章中作出了解释。不要包含错误的表单属性你可能发现<html5>引入了很多新的表单属性。现在我就给大家讲讲一些不合适的使用。布尔值

人人文库> 全部分类> 行业资料 > 机电工程

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论