|
|
马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。
您需要 登录 才可以下载或查看，没有帐号？立即注册
x
HTML5语音识别（现在一般用在搜索上），目前相关介绍还是挺多的。为何呢？因为很简单！网页制造Webjx文章简介：怎样制止HTML5的罕见误区.
在这篇文章中，我将给人人分享html5构建页面的小毛病和欠好的理论办法，让我们在今后的事情中制止这些毛病。
不要把<Section>当做容器来界说款式
我们常常看到的一个毛病，就是果断的将<div>标签用<section>标签来替换，出格是将作为包抄容器的<div>用<section>来交换。在XHTML大概HTML4中，我们将会看到相似上面的代码：
12345678910111213141516<!--HTML4-stylecode--><divid="wrapper"><divid="header"><h1>Mysuperduperpage</h1><!--Headercontent--></div><divid="main"><!--Pagecontent--></div><divid="secondary"><!--Secondarycontent--></div><divid="footer"><!--Footercontent--></div></div>如今我看到了上面的代码模样：
12345678910111213141516<!--Don’tcopythiscode!It’swrong!--><sectionid="wrapper"><header><h1>Mysuperduperpage</h1><!--Headercontent--></header><sectionid="main"><!--Pagecontent--></section><sectionid="secondary"><!--Secondarycontent--></section><footer><!--Footercontent--></footer></section>直不雅的看，下面的例子是毛病的：<section>并非一个容器.<section>元素是有语意的区段，匡助构建文档纲目。它应当包括题目。假如你要寻觅一个能够包括页面的元素（不管是HTML大概XHTML），一般的做法是间接对<body>标签订义款式就像KrocCamen形貌的那模样，假如你还必要分外的元从来界说款式，利用<div>,就像DrMike论述的那样,div并没有死亡，假如这里没有别的更符合的，div多是你最符合的选择。
记着这点，这里我们从头修改了下面的例子，经由过程利用两个新脚色。（你是不是必要分外的<div>取决于你的计划。）
123456789101112131415<body><header><h1>Mysuperduperpage</h1><!--Headercontent--></header><divrole="main"><!--Pagecontent--></div><asiderole="complementary"><!--Secondarycontent--></aside><footer><!--Footercontent--></footer></body>假如你仍是没法断定哪个元素更合适利用，我倡议你往检察HTML5sectioningcontentelementflowchart来让你持续前行。
只在必要的时分利用<hgroup>和<header>标签
利用标志的时分写进了一些其实不必要的征象这是分歧理的。不幸的是，常常发明人人在其实不必要的中央利用<header>和<hgroup>标签。你能够跟进我们关于<header>和<hgroup>的最新停顿，上面是我的复杂归结：
- <header>元素一般是一般作为一组注释大概导航帮助工具,一般包括section的题目.
- <hgroup>元素会将当有副题目子题目,各种标识笔墨时,对<h1>到<h6>题目举行群组,将其作为section的题目.
过分利用的<header>
你一定晓得,在一个文档中,可使用屡次<header>标签,上面就是一种很受人人接待的形式:
1234567<!--Don’tcopythiscode!Noneedforheaderhere--><article><header><h1>Mybestblogpost</h1></header><!--Articlecontent--></article>假如你的<header>标签只包括一个题目元素时,就不要利用<header>标签了.<article>标签一定会让你的题目在文档纲目中展现出来,并且由于<header>其实不包括多重内容(就像界说中形貌的那模样),我们为什么要增添而外的代码呢?应当像上面如许复杂才能够:
1234<article><h1>Mybestblogpost</h1><!--Articlecontent--></article><hgroup>分歧理利用
在题目的这个主题上,常常看到利用<hgroup>的毛病案例.鄙人面这类情形下你不克不及将<header>标签和<hgroup>标签一同利用:
- 这里只要一个题目,
- 大概<hgroup>自己就够了(好比:不必要<hgroup>)
第一种情况看上往是上面的模样:
1234567<!--Don’tcopythiscode!Noneedforhgrouphere--><header><hgroup><h1>Mybestblogpost</h1></hgroup><p>byRichClark</p></header>这类情形下,将<hgroup>移除,只保存题目就好.
1234<header><h1>Mybestblogpost</h1><p>byRichClark</p></header>第二种情形也是包括了他们其实不必要的标签.
1234567<!--Don’tcopythiscode!Noneedforheaderhere--><header><hgroup><h1>Mycompany</h1><h2>Established1893</h2></hgroup></header>当<header>标签的子元素只要<hgroup>的时分,为何我们还必要一个分外的<header>?假如没有分外的元素放到<header>中(好比<hgroup>的兄弟元素),我们间接将<header>元素往失落就好.
1234<hgroup><h1>Mycompany</h1><h2>Established1893</h2></hgroup>不要将一切的链接列表都放到<nav>标签
在HTML5新增的30个元素中(在我们写这篇文章的时分),我们在构建更具语义布局化的标签的时分,我们的选择变得太丰厚.也就是说我们对如今给我们供应的这些超等有语义的标签,我们大概会滥用.<nav>就是一个很喜剧的例子.在标准中的形貌是如许的:Thenavelementrepresentsasectionofapagethatlinkstootherpagesortopartswithinthepage:asectionwithnavigationlinks.
Note:Notallgroupsoflinksonapageneedtobeinanavelement—theelementisprimarilyintendedforsectionsthatconsistofmajornavigationblocks.Inparticular,itiscommonforfooterstohaveashortlistoflinkstovariouspagesofasite,suchasthetermsofservice,thehomepage,andacopyrightpage.Thefooterelementaloneissufficientforsuchcases;whileanavelementcanbeusedinsuchcases,itisusuallyunnecessary.
WHATWGHTMLspec
- 次要导航
- 网站搜刮
- 二级导航(这个能是有争议的)
- 页面内链接(好比一篇很长的文章)
固然并没有对错之分,但依据我的了解和一个平易近意投票让我以为鄙人面这些情况下,我不会利用<nav>标签:
- 翻页
- 交际类的链接（固然有些交际类的链接也是次要的链接，好比关于我Aboutme和咀嚼Flavours）
- 博客文章的标签
- 博客文章的分类列表
- 第三级导航
- 年夜页脚
假如你不克不及断定是不是利用<nav>，那就先对你问一下上面的几个成绩：“者是不是是一个次要链接？”，你能够依据上面的几个要素往返答你方才的成绩：
- 假如用<section>和题目标签可以办理你的成绩，那就不要往利用<nav>–HixieonIRC
- 你是否是为了增添可会见性而增添的一个快速跳转链接呢？
假如下面的回覆都是“不”，那大概就不合适利用<nav>.
<figure>元素的毛病
<figure>和常常与它合股作案的<figcaption>，是很难把握的标签，上面是常常看到的一些小毛病。
并非一切的图片都是figure（注：对照难了解阿，image=图片，figure=图形）
之前，我已经说过不要写那些不必要的标签。这个毛病也是不异的。我常常看到一个网站上的每张图片都有<figure>标签。这些分外增添的标签其实不会给你带来任何的好处，而且还增添了你本人的事情强度和让本人的内容变得更难了解。
在标准中关于<figure>的注释以下：“某些流内容，能够有题目，自我包括而且一般作为一个单位自力于内文档流以外。”在那边有完善的表述，就是它能够被从主内容中移除–好比放到边拦，而对文档流没有影响。
假如仅仅是一张体现类的图片并且和文档中其他的内容没有干系的话，那就不必要利用<figure>.”这张图片必要对高低文的内容作出注释吗？”，假如谜底是”否”，那便可能不是<figure>(多是<aside>),”我能把它移到附录内里吗？”，假如这两个成绩的谜底都是”是”，那便可能是<figure>.
你的标记不是一个<figure>
将下面的延长开来，对你的logo也是如许。上面是两组我找到的有纪律的代码片段：
12345678910111213141516<!--Don’tcopythiscode!It’swrong!--><header><h1><figure></script>如今我们能够写成上面的模样：
12<linkrel="stylesheet"href="CSS/styles.css"/><scriptsrc="js/scripts.js"></script>你也可以对编码的设置作出省略。MarkPilgrim在DiveintoHTML5的语义化一章中作出懂得释。
不要包括毛病的标单属性
你大概发明<html5>引进了良多新的表单属性。如今我就给人人讲讲一些分歧适的利用。
布尔值属性
新引进的标签属性有几个是布尔范例的，它们的标签举动基础靠近。这些属性包含：
- autofocus
- autocomplete
- required
坦率的说，上面的这类情形对我来讲其实不罕见，但我们从required作为例子，以下：
1234<!--Don’tcopythiscode!It’swrong!--><inputtype="email"name="email"required="true"/><!--Anotherbadexample--><inputtype="email"name="email"required="1"/>基础上看，这段代码其实不会带来伤害。客户端对HTML的剖析碰到required标签属性时，他的功效就会失效。可是当我们将代码修正，录进required=”false”的情形呢？
12<!--Don’tcopythiscode!It’swrong!--><inputtype="email"name="email"required="false"/>剖析的时分仍然会碰到required属性，固然你但愿到场的举动是假，它仍然会被剖析成真。
这里有三种公道的办法让布尔值失效。（第二种和第三种计划只要你在写XHTML剖析的时分必要）
我们下面的例子能够写成上面的模样：
1<inputtype="email"name="email"required/>总结
对我来讲，我没法将以是得糟糕的代码形式都展现在这里，可是下面说的这些都是我们常常碰到的。
中文原文：怎样制止HTML5的罕见误区
英文原文：AvoidingcommonHTML5mistakes
</p>
通过大家的心得，或许能找出"怎么学html5"这个问题的答案。另，我会不定期把群里面关于技术的讨论贴到本帖，敬请关注。 |
|
|Archiver|手机版|仓酷云
鄂ICP备14007578号-2
窥视卡
雷达卡
发表于 2015-1-15 23:11:46
收藏
转播
分享
淘帖
顶
踩
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
照妖镜
发表于 2015-1-17 17:17:04