理解HTML语义化

1、什么是HTML语义化?

<基本上都是围绕着几个主要的标签,像标题(H1~H6)、列表(li)、强调(strong em)等等>

  根据内容的结构化(内容语义化),选择合适的标签(代码语义化)便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。

2、为什么要语义化?

  • 为了在没有CSS的情况下,页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看;
  • 用户体验:例如title、alt用于解释名词或解释图片信息、label标签的活用;
  • 有利于SEO:和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息:爬虫依赖于标签来确定上下文和各个关键字的权重;
  • 方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页;
  • 便于团队开发和维护,语义化更具可读性,是下一步吧网页的重要动向,遵循W3C标准的团队都遵循这个标准,可以减少差异化。

3、写HTML代码时应注意什么?

  • 尽可能少的使用无语义的标签div和span;
  • 在语义不明显时,既可以使用div或者p时,尽量用p, 因为p在默认情况下有上下间距,对兼容特殊终端有利;
  • 不要使用纯样式标签,如:b、font、u等,改用css设置。
  • 需要强调的文本,可以包含在strong或者em标签中(浏览器预设样式,能用CSS指定就不用他们),strong默认样式是加粗(不要用b),em是斜体(不用i);
  • 使用表格时,标题要用caption,表头用thead,主体部分用tbody包围,尾部用tfoot包围。表头和一般单元格要区分开,表头用th,单元格用td;
  • 表单域要用fieldset标签包起来,并用legend标签说明表单的用途;
  • 每个input标签对应的说明文本都需要使用label标签,并且通过为input设置id属性,在lable标签中设置for=someld来让说明文本和相对应的input关联起来。

 4、HTML5新增了哪些语义标签

在HTML 5出来之前,我们用div来表示页面章节,但是这些div都没有实际意义。(即使我们用css样式的id和class形容这块内容的意义)。这些标签只是我们提供给浏览器的指令,只是定义一个网页的某些部分。但现在,那些之前没“意义”的标签因为因为html5的出现消失了,这就是我们平时说的“语义”。

看下图没有用div标签来布局

 

HTML 5的革新——语义化标签(一)

 

html5的布局

嗯,如上图那个页面结构没有一个div,都是采用html5语义标签(用哪些标签,关键取决于你的设计目标)。

但是也不要因为html5新标签的出现,而随意用之,错误的使用肯定会事与愿违。所以有些地方还是要用div的,就是因为div没有任何意义的元素,他只是一个标签,仅仅是用来构建外观和结构。因此是最适合做容器的标签。

W3C定义了这些语义标签,不可能完全符合我们有时的设计目标,就像制定出来的法律不可能流传100年都不改变,更何况它才制定没多久,不可能这些语义标签对所以设计目标的适应。只是一定程度上的“通用”,我们的目标是让爬虫读懂重要的东西就够了。

结论:不能因为有了HTML 5标签就弃用了div,每个事物都有它的独有作用的。

节点元素标签因使用的地方不同,我将他们分为:节元素标签、文本元素标签、分组元素标签分开来讲解HTML5中新增加的语义化标签和使用总结。

header元素

header 元素代表“网页”或“section”的页眉。
通常包含h1-h6元素或hgroup,作为整个页面或者一个内容块的标题。也可以包裹一节的目录部分,一个搜索框,一个nav,或者任何相关logo。

整个页面没有限制header元素的个数,可以拥有多个,可以为每个内容块增加一个header元素

<header><hgroup><h1>网站标题</h1><h1>网站副标题</h1></hgroup>
</header>

header的示例代码

header使用注意:

  • 可以是“网页”或任意“section”的头部部分;
  • 没有个数限制。
  • 如果hgroup或h1-h6自己就能工作的很好,那就不要用header。

footer元素

footer元素代表“网页”或“section”的页脚,通常含有该节的一些基本信息,譬如:作者,相关文档链接,版权资料。如果footer元素包含了整个节,那么它们就代表附录,索引,提拔,许可协议,标签,类别等一些其他类似信息。

<footer>COPYRIGHT@小北
</footer>

footer的示例代码

footer使用注意:

  • 可以是“网页”或任意“section”的底部部分;
  • 没有个数限制,除了包裹的内容不一样,其他跟header类似。

hgroup元素

hgroup元素代表“网页”或“section”的标题,当元素有多个层级时,该元素可以将h1h6元素放在其内,譬如文章的主标题和副标题的组合

<hgroup><h1>这是一篇介绍HTML 5语义化标签和更简洁的结构</h1><h2>HTML 5</h2>
</hgroup>

hgroup示例代码

hgroup使用注意:

  • 如果只需要一个h1-h6标签就不用hgroup
  • 如果有连续多个h1-h6标签就用hgroup
  • 如果有连续多个标题和其他文章数据,h1-h6标签就用hgroup包住,和其他文章元数据一起放入header标签

nav元素

nav元素代表页面的导航链接区域。用于定义页面的主要导航部分

<nav><ul><li>HTML 5</li><li>CSS3</li><li>JavaScript</li></ul>
</nav>

nav实例

但是我在有些时候却情不自禁的想用它,譬如:侧边栏上目录,面包屑导航,搜索样式,或者下一篇上一篇文章,但是事实上规范上说nav只能用在页面主要导航部分上。页脚区域中的链接列表,虽然指向不同网站的不同区域,譬如服务条款,版权页等,这些footer元素就能够用了。

nav使用注意:

  • 用在整个页面主要导航部分上,不合适就不要用nav元素;

aside元素

aside元素被包含在article元素中作为主要内容的附属信息部分,其中的内容可以是与当前文章有关的相关资料、标签、名次解释等。(特殊的section)

在article元素之外使用作为页面或站点全局的附属信息部分。最典型的是侧边栏,其中的内容可以是日志串连,其他组的导航,甚至广告,这些内容相关的页面。

<article><p>内容</p><aside><h1>作者简介</h1><p>小北,前端一枚</p></aside>
</article>

aside实例

aside使用总结:

  • aside在article内表示主要内容的附属信息,
  • 在article之外则可做侧边栏,没有article与之对应,最好不用。
  • 如果是广告,其他日志链接或者其他分类导航也可以用

section元素

section元素代表文档中的“节”或“段”,“段”可以是指一篇文章里按照主题的分段;“节”可以是指一个页面里的分组。

section通常还带标题,虽然html5中section会自动给标题h1-h6降级,但是最好手动给他们降级。如下:

<section><h1>section是啥?</h1><article><h2>关于section</h1><p>section的介绍</p><section><h3>关于其他</h3><p>关于其他section的介绍</p></section></article>
</section>

section示例代码

section使用注意:

一张页面可以用section划分为简介、文章条目和联系信息。不过在文章内页,最好用article。section不是一般意义上的容器元素,如果想作为样式展示和脚本的便利,可以用div。

  • 表示文档中的节或者段;
  • article、nav、aside可以理解为特殊的section,所以如果可以用article、nav、aside就不要用section,没实际意义的就用div

article元素

article元素最容易跟sectiondiv容易混淆,其实article代表一个在文档,页面或者网站中自成一体的内容,其目的是为了让开发者独立开发或重用。譬如论坛的帖子,博客上的文章,一篇用户的评论,一个互动的widget小工具。(特殊的section)

除了它的内容,article会有一个标题(通常会在header里),会有一个footer页脚。我们举几个例子介绍一下article,好更好区分article、section、div

 

<article><h1>一篇文章</h1><p>文章内容..</p><footer><p><small>版权:html5jscss网所属,作者:小北</small></p></footer>
</article>

一篇简单文章的article示例代码

 

上例是最好简单的article标签使用情况,如果在article内部再嵌套article,那就代表内嵌的article是与它外部的内容有关联的,如博客文章下面的评论,如下:

<article><header><h1>一篇文章</h1><p><time pubdate datetime="2012-10-03">2012/10/03</time></p></header><p>文章内容..</p><article><h2>评论</h2><article><header><h3>评论者: XXX</h3><p><time pubdate datetime="2012-10-03T19:10-08:00">~1 hour ago</time></p></header><p>哈哈哈</p></article><article><header><h3>评论者: XXX</h3><p><time pubdate datetime="2012-10-03T19:10-08:00">~1 hour ago</time></p></header><p>哈?哈?哈?</p></article></article></article>

文章里的评论,一个article嵌套article来表示的实例

article内部嵌套article,有可能是评论或其他跟文章有关联的内容。那article内部嵌套section一般是什么情况呢。如下:

<article><h1>前端技术</h1><p>前端技术有那些</p><section><h2>CSS</h2><p>样式..</p></section><section><h2>JS</h2><p>脚本</p></section></article>

文章里的章节,一个article里的section实例

因为文章内section部分虽然也是独立的部分,但是它门只能算是组成整体的一部分,从属关系,article是大主体,section是构成这个大主体的一部分。本网站的全部文章都是article嵌套一个个section章节,这样能让浏览器更容易区分各个章节所包括的内容。

那section内部嵌套article又有哪些情况呢,如下

<section><h1>介绍: 网站制作成员配备</h1><article><h2>设计师</h2><p>设计网页的...</p></article><article><h2>程序员</h2><p>后台写程序的..</p></article><article><h2>前端工程师</h2><p>给楼上两位打杂的..</p></article></section>

一个section里的article实例

设计师、程序员、前端工程师都是一个独立的整体,他们组成了网站制作基本配备,当然还有其他成员~~。设计师、程序员、前端工程师就像article,是一个个独立的整体,而section将这些自成一体的article包裹,就组成了一个团体。

article和section和例子就例举这么多了,具体情况具体分析,不易深究。漏了divd,其实div就是只是想用来把元素组合或者给它们加样式时使用。

article使用注意:

  • 自身独立的情况下:用article
  • 是相关内容:用section
  • 没有语义的:用div

HTML5其他结构元素标签

HTML5节元素标签包括body article nav aside section header footer hgroup ,还有h1-h6 address

  • address代表区块容器,必须是作为联系信息出现,邮编地址、邮件地址等等,一般出现在footer。
  • h1-h6因为hgroup,section和article的出现,h1-h6定义也发生了变化,允许一张页面出现多个h1。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/249313.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

maven上传命令

mvn deploy:deploy-file -DgroupIdcom.oracle -DartifactIdojdbc8 -Dversion12.2.0.1 -Dpackagingjar -DfileC:\Users\Admin\Desktop\ojdbc8.jar -Durlhttp://116.247.107.83:8081/repository/maven-releases/ -DrepositoryIdmy-nexus-releases

cocos2dx 开启控制台

打开 SimulatorWin.cpp 把这句启用&#xff1a; #define SIMULATOR_WITH_CONSOLE_AND_MENU 1 这句本来因为#define隐藏了转载于:https://www.cnblogs.com/mingfuqishi/p/9774301.html

网页编排规则

所谓大纲&#xff0c;简单来说就是文档中各内容区块的结构编排。可以分为显式编排和隐式编排2种方式。 显式编排&#xff1a;明确使用section元素创建文档结构&#xff0c;在每个内容区块内使用标题 隐式编排&#xff1a;不明确使用section等元素&#xff0c;根据页面中所书写的…

基本动态规划题集

观察下面的数字金字塔。写一个程序查找从最高点到底部任意处结束的路径&#xff0c;使路径经过数字的和最大。每一步可以从当前点走到左下方的点也可以到达右下方的点。 在上面的样例中,从13到8到26到15到24的路径产生了最大的和86。 【输入】 第一个行包含R(1≤ R≤1000)&…

springboot项目间接口调用实现:RestTemplate

https://blog.csdn.net/zhanglf02/article/details/89842372

python入门学习的第三天

step 1 时间 Python有两个模块&#xff0c;time和calendar&#xff0c;它们可以用于处理时间和日期 首先 import time 导入时间模块 然后 print time.time() 这个叫时间戳&#xff0c;它是从1970年1月1日午夜到现在时刻的秒数 print time.localtime(time.time()) print time.st…

JavaScript事件详解

JavaScript与HTML之间的交互是通过事件来实现的。事件&#xff0c;就是文档或浏览器窗口中发生的一些特定的交互瞬间。可以用侦听器来预订事件&#xff0c;以便事件发生的时候执行相应的代码。 事件流 事件流描述了从页面中接收事件的顺序&#xff0c;包括事件冒泡和事件捕获。…

JavaScript基础01

JavaScript查漏补缺 JavaScript有几种数据类型&#xff1f; 0. String(字符串) 1. Number(数值) 2. Boolean(布尔) 3. Null(空值) 4. Undefined(未定义) 5. Object(对象)前 5 种是基本类型 Null类型和Undefined类型的定义和区别&#xff1f; Null类型的值只有一个(null)&#…

.Net Core应用框架Util介绍(五)

上篇简要介绍了Util在Angular Ts方面的封装情况&#xff0c;本文介绍Angular封装的另一个部分&#xff0c;即Html的封装。 标准组件与业务组件 对于管理后台这样的表单系统&#xff0c;你通常会使用Angular Material或Ng-Zorro这样的UI组件库&#xff0c;它们提供了标准化的U…

SpringBoot中处理的转发与重定向

https://blog.csdn.net/yubin1285570923/article/details/83796003

scrapy爬虫系列之三--爬取图片保存到本地

功能点&#xff1a;如何爬取图片&#xff0c;并保存到本地 爬取网站&#xff1a;斗鱼主播 完整代码&#xff1a;https://files.cnblogs.com/files/bookwed/Douyu.zip 主要代码&#xff1a; douyu.py import scrapy import json from Douyu.items import DouyuItemclass DouyuSp…

glup server 报错 Task function must be specified

解决方案 今天像往常一样&#xff0c;编写文章&#xff0c;并使用gulp bulid压缩代码&#xff0c;但是一运行&#xff1a;gulp build 就出现了这个错误&#xff1a;AssertionError: Task function must be specified。 gulp项目需要全局安装gulp和项目内安装gulp&#xff0c;…

mybatis Example 使用方法

一、mapper接口中的方法解析 mapper接口中的函数及方法 方法 功能说明 int countByExample(UserExample example) thorws SQLException 按条件计数 int deleteByPrimaryKey(Integer id) thorws SQLException 按主键删除 int deleteByExample(UserExample example) thorws SQLE…

gulp + browsersync实现页面自动刷新

写习惯了vue&#xff0c;特别喜欢vue的自动刷新功能&#xff0c;于是琢磨在node中如何自动刷新&#xff0c;使用过nodemon&#xff0c; 但是感觉效果差点&#xff0c;看到网上有gulp livereload的方案和gulp browsersync的方案&#xff0c;但都是褒贬不一&#xff0c;先简单记…

[JZOJ5836] Sequence

Problem 题目链接 Solution 吼题啊吼题&#xff01; 首先如何求本质不同的子序列个数就是 \(f[val[i]]1\sum\limits_{j1}^k f[j]\) 其中 \(f[i]\) 表示的是以 \(i\) 结尾的子序列个数 先把原数列的不同子序列个数求出来&#xff0c;然后观察一下这个转移&#xff0c;贪心的发现…

numpy和pandas的基础索引切片

Numpy的索引切片 索引 In [72]: arr np.array([[[1,1,1],[2,2,2]],[[3,3,3],[4,4,4]]]) In [73]: arr Out[73]: array([[[1, 1, 1],[2, 2, 2]],[[3, 3, 3],[4, 4, 4]]])In [74]: arr.nd…

mybatis的Example[Criteria]的使用

https://blog.csdn.net/u014756578/article/details/86490052

Thunar 右键菜单等自定义

Thunar 右键菜单等自定义 可以使用图形界面或者直接编辑配置文件&#xff0c;二者是等价的。 图形界面&#xff1a; 以给“zip&#xff0c;rar&#xff0c;7z”等文件添加“在此位置使用unar解压缩”的右键菜单为例&#xff1a;&#xff08;unar可以很好地处理编码问题&#xf…

JavaScript设计模式(二)之单例模式

一、单例模式的定义 单例就是保证一个类只有一个实例&#xff0c;实现的方法一般是先判断实例存在与否&#xff0c;如果存在直接返回&#xff0c;如果不存在就创建后再返回&#xff0c;这就确保了一个类只有一个实例对象。在JavaScript里&#xff0c;单例作为一个命名空间的提…

python全栈开发_day10_函数的实参和形参

一&#xff1a;函数的实参和形参 实参是在调用函数时()出现的外界的实际的值 形参不能再函数外部直接使用 1&#xff09;实参的两种形式 实参是调用函数时()中传入的参数 1.位置实参 def a(a):print(a)a(1)#得到返回值:1 2.关键字实参 def a(a,b):print(a,b)a(b3,a5)#得到返回值…