IT俱乐部 HTML5 HTML5 语义化标签(移动端必备)

HTML5 语义化标签(移动端必备)

距HTML5标准规范制定完成并公开发布已经有好些年了,面试时也少不了要问对HTML5语义化得理解。但是在实际运用时,真正使用HTML5标签来开发的似乎不是很多(ps:查看了几个巨头公司网站推论),可能一部分原因是仍有部分用户使用在使用低版本浏览器。

但是就我个人而言,因选取一些标签时会比较纠结,所以仍使用了div。(PS:正是因为这样,才有了这篇文章的,没错,以后要注意语义化了)

什么是语义化?就是用合理、正确的标签来展示内容,比如h1~h6定义标题。

语义化优点:

易于用户阅读,样式丢失的时候能让页面呈现清晰的结构。
有利于SEO,搜索引擎根据标签来确定上下文和各个关键字的权重。
方便其他设备解析,如盲人阅读器根据语义渲染网页
有利于开发和维护,语义化更具可读性,代码更好维护,与CSS3关系更和谐。

今天先介绍主体结构标签,如图所示:

1、

定义文档或者文档的部分区域的页眉,应作为介绍内容或者导航链接栏的容器。

在一个文档中,您可以定义多个

元素,但需要注意的是

元素不能作为

元素的子元素。

2、

在一个文档中,可定义多个

3、

定义文档的主要内容,该内容在文档中应当是独一无二的,不包含任何在文档中重复的内容,比如侧边栏,导航栏链接,版权信息,网站logo,搜索框(除非搜索框作为文档的主要功能)。

需要注意的是在一个文档中不能出现多个

标签。

4、

元素表示文档、页面、应用或网站中的独立结构,是可独立分配的、可复用的结构,如在发布中,它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件,或者其他独立的内容项目。

元素嵌套使用时,则该元素代表与外层元素有关的文章。例如,代表博客评论的

元素可嵌套在代表博客文章的

元素中。

5、

6、

定义最近一个章节内容或者根节点元素的页脚。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。

使用footer插入联系信息时,应在 footer 元素内使用

元素。

注意不能包含

或者

7、

表示文档中的一个区域(或节),比如,内容中的一个专题组。

如果元素内容可以分为几个部分的话,应该使用

而不是


不要把

元素作为一个普通的容器来使用,特别是当

仅仅是为了美化样式或方便脚本使用的时候,应使用

这几个标签,比较容易混淆的是

,所以这里特别说明:

“Authors are encouraged to use the article element instead of the section element when it would make sense to syndicate the contents of the elemen.”

通俗来说就是

更具有独立性、完整性。可通过该段内容脱离了所在的语境,是否完整、独立来判断。

相关文章

  • Html5播放器实现倍速播放的方法示例

    本文主要介绍了Html5播放器实现倍速播放的方法示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习

    2023-01-12

  • HTML5 Web Worker(多线程处理)

    在HTML5中,可以使用Web Worker创建一个后台线程执行一个耗时任务,本文主要介绍了HTML5 Web Worker(多线程处理),感兴趣的可以了解一下

    2023-01-12

  • 短视频滑动播放在 H5 下的实现方式

    短视频已经无数不在了,但是主体还是使用 app 来承载的,本文讲述 H5 如何实现 app 的视频滑动体验,本文对实现过程中踩到的坑做一个总结,结合示例代码给大家介绍的非常详

    2023-01-05

  • HTML5页面打开微信小程序功能实现

    这篇文章主要介绍了HTML5页面打开微信小程序功能,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

    2022-09-20

  • 如何用H5实现好玩的2048小游戏

    相信大多数读者都玩过一款小游戏 2048,本文主要介绍了如何用H5实现好玩的2048小游戏,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需

    2022-07-18

  • 使用HBuilder制作一个简单的HTML5网页

    本文主要介绍了使用HBuilder制作一个简单的HTML5网页,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学

    2022-06-29

  • html5+实现plus.io进行拍照和图片等获取

    本文主要介绍了html5+实现plus.io进行拍照和图片等获取,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起

    2022-05-31

  • HTML5之高度塌陷问题的解决

    本文主要介绍了HTML5之高度塌陷问题的解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

    2022-05-30

  • HTML中实现音乐或视频自动播放案例详解

    由于期末大作业我想插入一个背景音乐,实现点开网页就会自动播放音频的效果,今天通过本文给大家分享下我基于HTML实现音乐或视频自动播放功能,代码简单易懂,需要的朋友参

    2022-05-27

  • HTML标签教你实现带动画的抖音LOGO效果

    这篇文章主要家教大家使用一个HTML标签教你实现带动画的抖音LOGO效果,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

    2022-05-10

最新评论

本文收集自网络,不代表IT俱乐部立场,转载请注明出处。https://www.2it.club/navsub/html5/994.html
上一篇
下一篇
联系我们

联系我们

在线咨询: QQ交谈

邮箱: 1120393934@qq.com

工作时间:周一至周五,9:00-17:30,节假日休息

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

返回顶部