绵阳梓潼网站制作公司

html5中有哪些语义化标签

这篇文章给大家介绍html5中有哪些语义化标签，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。

成都创新互联于2013年创立，是专业互联网技术服务公司，拥有项目成都网站建设、成都网站设计网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元宣恩做网站,已为上家服务,为宣恩各地企业和个人服务,联系电话:18982081108

HTML语义化：

每个HTML标签都有自己特定含义（语义），语义化是指使用语义恰当的标签，使页面有良好的结构，页面元素有含义，能够让人和搜索引擎都容易理解。

看过一个比较形象的例子：

盖一栋房子的时候，有的地方该用砖头，有的部分该用瓷片，还有的地方得用水泥糊上，这样盖出来房子才会结实，整洁和美观。

如果硬是要瓷片替代砖头，房子勉强也能盖起来，但是这样的房子不牢固，容易倒塌，外观也不好看。

同样，生活很多事物都有相似相同之处！该用什么标签表示就用什么标签表示，结构良好，更易人和搜索引擎理解。还有一点，就是便于开发和维护啊，看过好多网页结构，各种想吐槽好吗?各种混乱不堪，外观表现的任务交由css去实现就行啦，不要为了外观表现而布局！

语义化的意义与作用

  • 去掉或者丢失样式的时候能够让页面呈现出清晰的结构

  • 用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用；

  • 有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；

  • 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；

  • 便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

语义化都注意什么？

  • 尽可能少用无语义的p、span标签等；使用HTML5中新增的较多强语义化标签，；

  • 不要使用样式化标签，如font、b、….等等等，完全可以用css实现样式（再说HTML5中基本将此类“样式化标签”废除了！）

  • 强调文本，尽量使用strong标签加强强调，em标签设置斜体

  • 表格书写规范：标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头用th，单元格用td；

  • 表单域要用fieldset标签包起来，并用legend标签说明表单的用途；(说实话，这个倒真没怎么注意到！)

  • 每个input标签对应的说明文本都需要使用label标签，并且通过id属性和相对应的input关联起来。

HTML5语义化标签：

1.header：标签定义“网页”或“section”的页眉。

通常包含h2-h7元素或hgroup，作为整个页面或者一个内容块的标题。也可以包裹一节的目录部分，一个搜索框，一个nav，或者任何相关logo。


     
毕业生实习

     2016/08/05



...

或


    

        
网站标题

        
网站副标题

    

用法：

  • 可以是“网页”或任意“section”的头部部分；

  • 没有个数限制。

  • 如果hgroup或h2-h7自己就能工作的很好，那就不要用header。

2.nav：定义导航链接的部分。



...

用法：

注意：例如，在页脚中通过会有一组链接，包括服务条款，首页，版权声明等，使用footer元素是最恰当的。

具体用途：传统导航条、侧边栏导航、业内导航、翻页操作等

3.footer标签：代表“网页”或“section”的页脚。

通常含有该节的一些基本信息，譬如：作者，相关文档链接，版权资料。

如果footer元素包含了整个节，那么它们就代表附录，索引，提拔，许可协议，标签，类别等一些其他类似信息。


  作者：xxxx 
 Copyright © xxx.All rights reserved.



...

用法：

4. hgroup元素：“网页”或“section”的标题

当元素有多个层级时，该元素可以将h2到h7元素放在其内，譬如文章的主标题和副标题的组合


    
主标题

    
HTML 5

用法：

5.section标签：定义文档中含有标题和段落的区域。（强调分段或分块）


  
section要包含标题

  
section要包含内容...

用法：

6.article：代表独立、完整、可独自被外部引用的内容（博客或报刊中的文章、一遍论坛帖子、一段用户评论或独立的插件、或任何独立的内容）;（强调的是独立性！可含有完整的标题、内容、脚注)


   

     
标题处

   

   
内容描述

   
脚部声明标注

用法：定义一个独立完整的内容部分（可包含标题，内容，脚注）时使用！

article、section间的相互嵌套关系：

7. aside标签：表示当前页面或文章的附属信息部分，可包含于当前页面或主要内容相关的引用、侧边栏、广告、导航条、以及其他类似的有别于主要内容的部分。

1.用于article标签之内，此时表示的是该独立内容的附属信息部分；


        
article内容区

        
    

2.用于article标签之外，此时作为页面或站点全局的附属信息部分。

    

用法：

（一句话概括：不同的位置表示为对应区域的附属信息！）

8. figure标签：规定独立的流内容（图像、图表、照片、代码等等）。

figcaption标签：用于元素定义figure的标题。

1.一个figure元素内最多只允许放置一个figcaption元素，其他元素可无限放置。

2.figcaption 元素应该被置于 figure元素的第一个或最后一个子元素的位置。

    

        
figure的标题

        
    

9. time标签：定义时间或日期

定义时间...



结合datetime属性定义日期...时间

10. address标签：代表区块容器，必须是作为联系信息出现，邮编地址、邮件地址等等,一般出现在footer。

表示文档或文章的作者/拥有者的联系信息，在body标签中表示文档的作者的联系信息；在article标签中表示文章作者的联系信息；

用法：

关于html5中有哪些语义化标签就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。


网站栏目：html5中有哪些语义化标签
URL标题：http://myzitong.com/article/iisgph.html

其他资讯