html常见问题及解决方法,
一、不要使用section作为div的替代品
人们在使用标签时最常犯的一个错误是任意地将HTML5的部分等同于div——。具体来说就是直接作为(风格的)替代品。在XHTML或HTML4中，我们经常会看到这样的代码：
！-HTML 4-style code-Div id= wrapper Div id= Header h1 my super duper Page/h1 Header content/Div Div id= main Page content/Div id= secondary secondary content/Div Div id= footer footer content/Div现在在HTML5中，它会是这样的：
请不要复制这些代码！这是不对的！
section id= wrapper header h1 my super duper page/h1！-标题内容-/标题部分id=main ！-页面内容-/节节id=次要！-次要内容/部分页脚！-页脚内容/页脚/节使用不正确：* *
不是样式容器。**section元素表示用于帮助构建文档大纲的内容的语义部分。它应该包含一个标题。如果你想找一个可以作为页面容器的元素(像HTML或者XHTML的样式)，那么考虑像Kroc Camen说的那样直接在body元素上写样式。如果你仍然需要额外的样式容器，你最好继续使用div。
基于上面的想法，下面是正确使用HTML5和一些ARIA roles特性的例子(注意，你可能还需要根据自己的设计添加div)
bodyheader h1My我的超级副本页/h1！-标头内容- /headerdiv role=main ！-页面内容- /divaside角色=补充！-二次元内容- /asidefooter！-页脚内容-/页脚/正文二、只在需要的时候使用header和hgroup
写不需要写的标签当然没有意义。不幸的是，我经常看到header和hgroup被无意义地误用。您可以阅读关于header和hgroup元素的两篇文章，以获得详细的理解。我把内容简要概括如下：
header元素表示一组介绍性或导航性的辅助词，通常用作一个部分的标题。当标题具有多层结构时，如副标题、子标题、各种标识词等。hgroup用于组合h1-h6元素作为一个节的头。滥用标题可能会使这种代码风格流行起来，因为标题可以在一个文档中多次使用：
请不要复制这段代码！此处不需要标题
header h1我最好的博文/h1 /header！-文章内容-/文章如果您的标题元素只包含一个标题元素，则丢弃该标题元素。既然article元素已经保证了表头会出现在文档摘要中，而且表头不能包含多个元素(如上定义)，为什么还要写多余的代码呢？简单地这样写：
文章h1我最好的博文/h1！-错误使用-文章内容-/文章
关于标题这个话题，我也经常看到hgroup的误用。有时你不应该同时使用hgroup和header:
如果只有一个副团长，如果hgroup自己能做好。你不要胡说八道？第一个问题通常是这样的：
请不要复制这段代码！这里不需要h grouph group h1我最好的博文/h1/h group pby rich Clark/p/header。在这个例子中，只需取下h组，让heading运行。
header h1我最好的博文/h1pby rich Clark/p/header第二个问题是另一个不必要的例子：
请不要复制这段代码！此处不需要标题
hgrouph 1 my company/h1h 2 established 1893/H2/hgroup/header如果header的唯一子元素是h group，那么header还有什么用？如果头中没有其他元素(比如multiple hgroup)，只需移除头即可。
h集团h1我的公司/h1 H2成立于1893年/H2/h集团三、不要把所有列表式的链接放在nav里
随着HTML5中30个新元素的引入(截至原文发布时)，我们在语义和结构化标签的构造上的选择也变得有些轻率。也就是说，我们不应该滥用超感性元素。不幸的是，nav就是这样一个滥用的例子。nav元素的规范描述如下：
nav元素表示页面中链接到其他页面或该页面其他部分的块；包含导航链接的块。
注意：并不是页面上的所有链接都需要放在nav元素3354中。此元素旨在用作主导航块。比如页脚往往有很多链接，比如服务条款、首页、版权声明页等等。页脚元素本身足以处理这些情况。虽然nav元素在这里也可以使用，但是我们通常认为没有必要。
关键词是“主”导航。当然，我们可以整天互相喷。什么是“主”？我个人是这样定义的：
在主要的导航站中，没有绝对正确或错误的页内导航(例如，很长的文章)。所以根据一个非正式的民调和我自己的解释，我无论如何不把以下几种情况放在中间：分页控制社交链接(虽然有些社交链接也是主导航，比如“关于”“收藏”)。博客文章的分类。三级导航过长的页脚。为了帮助你回答这个问题，考虑以下首要原则：如果使用section和hx同样合适，那么就不要在IRC上使用nav—Hixie。为了方便访问，您会在“快速跳转”中添加指向此导航标签的链接吗？
如果这些问题的答案都是“不”，那就鞠躬走人吧。
四、figure元素的常见错误
图形和图形标题的正确使用是很难控制的。让我们来看看一些常见的错误，
并非所有的图片都是数字。
以上，我告诉你不要写不必要的代码。这个错误也是如此。我看到很多网站把所有的图片都写成了图。为了画面，请不要给它加额外的标签。你只是伤害了自己，却无法让你的页面内容更加清晰。
规格图被描述为“一些流动的内容，有时有自己的标题。一般会在单据流程中作为独立单元引用。”这就是图——的妙处。它可以从主内容页面移动到侧边栏，而不会影响文档流。
这些问题也包含在前面提到的HTML5元素流程图中。
如果纯粹是为了表述方便，在文档的其他地方没有引用，那肯定不是。这要看情况，但首先你可以问自己，“这张图一定要和上下文有关系吗？”如果不是，很可能也不是(可能是一个)。继续：“我可以把它移到附录吗？”如果两个问题都符合，可能是。
标志不是数字
此外，徽标不适用于图形。以下是我的一些常用代码片段：
！-请不要复制这段代码！那是错误的想法！【我的公司】(/img/My logo . png)/图我的公司名称/h1/header！-请不要复制这段代码！这也是错误的数字！[my company](/img/my log . png)/图/头没什么好说的了。这是一个很常见的错误。我们可以为了logo是否应该是H1标签而互喷，但这不是我们讨论的重点。真正的问题在于图形元素的滥用。图应仅在文档中引用或被section元素包围。我觉得你的logo不太可能被这样引用。很简单。请不要用数字。你只需要这样做：
表头h1我的公司名称/h1！-这里有更多的东西-/headerfigure不仅仅是一张照片。
另一个常见的对figure的误解是它只被图片使用。图形可以是视频、音频、图表、引用、表格、一段代码、一篇散文以及它们或其他的任意组合。不要把数字局限于图片。web标准的职责是用标签准确描述内容。
五、不要使用不必要的type属性
这是一个常见的问题，但不是错误。我认为我们应该通过最佳实践来避免这种风格。
在HTML5中，脚本和样式元素不再需要type属性。但是，这些很可能是你的CMS自动添加的，所以移除它们并不那么容易。但是如果您手工编码或者您对模板有完全的控制权，就没有理由包含type属性。所有浏览器都认为脚本是javascript，样式是css，不用多此一举。
！-请不要复制这段代码！太多余了！-link type= text/CSS rel= style sheet href= CSS/styles . CSS /script type= text/JavaScript src= js/scripts //script实际上只需要这样写：
link rel= style sheet href= CSS/styles . CSS /script src= js/scripts /script甚至可以省略指定字符集的代码。Mark Pilgrim在《深入HTML5》的语义章节中解释了这一点。
六、form属性的错误使用
HTML5引入了一些新的表单属性。以下是一些使用中的注意事项：
布尔属性
一些多媒体元素和其他元素也具有布尔属性。这里提到的规则也适用。
一些新的表单属性是布尔型的，这意味着只要它们出现在标签中，相应的行为就已经设置好了。这些属性包括：
坦白地说，我很少看到这一点。以required为例，常见的有以下几种：
！-请不要复制这段代码！这是不对的！-input type= email name= email required= true /！-另一个错误的例子-输入type= email name= email required= 1 /严格来说，这不是什么大事。只要浏览器的HTML解析器看到所需的属性出现在标签中，它的功能就会被应用。但是如果反过来写equired="false "呢？
！-请不要复制这段代码！这是不对的！-input type= email name= email required= false /解析器仍然会将所需的属性视为有效，并执行相应的行为，即使您试图告诉它不要这样做。这显然不是你想要的。
使用布尔属性有三种有效的方法。(后两者只在xthml中有效)
required required=" " required=" required "编写上述示例的正确方式应该是：
输入类型=电子邮件名称=电子邮件必填/总结
以上就是边肖给大家介绍的如何避免HTML5常见的六种错误用法。希望对你有帮助。如果您有任何问题，请给我留言，边肖将及时回复您。非常感谢您对网站的支持！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。