码迷,mamicode.com
首页 > Web开发 > 详细

说一说你对HTML5语义化的理解

时间:2019-11-26 13:33:08      阅读:90      评论:0      收藏:0      [点我收藏+]

标签:页面   str   屏幕   lin   网页   爬虫   使用   出现   其他   

本题地址:https://github.com/YvetteLau/Step-By-Step/issues/8
语义化意味着顾名思义,HTML5的语义化指的是合理使用语义化的标签来创建页面结构,如header,footer,nav,从标签上即可以直观的知道这个标签的作用,而不是滥用div。

语义化的优点有:

  • 代码结构清晰,易于阅读,利于开发和维护
  • 提高用于体验,在样式加载失败时,页面结构清晰
  • 方便其他设备解析(如屏幕阅读器)根据语义渲染网页。
  • 有利于搜索引擎优化(SEO),搜索引擎爬虫会根据不同的标签来赋予不同的权重

语义化标签主要有:

  • title:主要用于页面的头部的信息介绍
  • header:定义文档的页眉
  • nav:主要用于页面导航
  • main:规定文档的主要内容。对于文档来说应当是唯一的。它不应包含在文档中重复出现的内容,比如侧栏、导航栏、版权信息、站点标志或搜索表单。
  • article:独立的自包含内容
  • h1~h6:定义标题
  • ul: 用来定义无序列表
  • ol: 用来定义有序列表
  • address:定义文档或文章的作者/拥有者的联系信息。
  • canvas:用于绘制图像
  • dialog:定义一个对话框、确认框或窗口
  • aside:定义其所处内容之外的内容。<aside> 的内容可用作文章的侧栏。
  • section:定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。
  • figure:规定独立的流内容(图像、图表、照片、代码等等)。figure 元素的内容应该与主内容相关,但如果被删除,则不应对文档流产生影响。
  • details:描述文档或者文档某一部分细节
  • mark:义带有记号的文本。

语义化应用

例如使用可视化标签,构建下面的页面结构:

技术图片

语义化标签构建页面

转载于https://www.jianshu.com/p/605386179154

说一说你对HTML5语义化的理解

标签:页面   str   屏幕   lin   网页   爬虫   使用   出现   其他   

原文地址:https://www.cnblogs.com/hanfe1/p/11934480.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!