HTML5-语义化

论坛 期权论坛 期权     
Ameng数据之家   2019-7-8 00:05   1790   0
2014年10月29日,万维网联盟宣布,经过接近8年的艰苦努力,该标准规范终于制定完成。有不少人问到对HTML5语义化的理解。但是在实际运用时,真正使用HTML5标签来开发的似乎不是很多,可能一部分原因是仍有部分用户使用在使用低版本浏览器。

    什么是语义化?就是用合理、正确的标签来展示内容,比如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.”
    通俗来说就是比更具有独立性、完整性。可通过该段内容脱离了所在的语境,是否完整、独立来判断。
分享到 :
0 人收藏
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

积分:
帖子:
精华:
期权论坛 期权论坛
发布
内容

下载期权论坛手机APP