讲给后台程序员看的前端系列教程(05)——HTML5标签(4)

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/lfdfhl/article/details/100547380

C语言自学完备手册(33篇)

Android多分辨率适配框架

HTML5前端开发实战系列教程

MySQL数据库实操教程(35篇图文版)

推翻自己和过往——自定义View系列教程(10篇)

走出思维困境,踏上精进之路——Android开发进阶精华录

讲给Android程序员看的前端系列教程(40集免费视频教程+源码)


版权声明

  • 本文原创作者:谷哥的小弟
  • 作者博客地址:http://blog.csdn.net/lfdfhl

HTML结构标签

我们在HTML页面中常用一些标签将页面划分为不同的区域用以展现页面结构。比如,可使用div标签将整个页面分为header,body,footer三部分。现在我们就来学习这些与页面结构有关的标签。

div标签

div标签在页面中非常常见,也常将其称为标签容器。我们可以将一组功能相关的标签放到同一个div中,也可以对该标签内的元素作统一处理,比如设置对齐方式,背景颜色。也就是说:大部分标签都可以置于div中,而且div标签可以嵌套使用。

示例如下:

<strong>学习div标签</strong>
<div align="center" style="color:#0000FF">
	  <p>本文作者:谷哥的小弟</p>
	  <p>博客地址:https://blog.csdn.net/lfdfhl</p>
</div>

效果如下:
在这里插入图片描述

但是,请注意:div标签本身没有任何语义,多用作布局以及样式化或脚本的钩子(hook)。正如,官方文档所言:

The div element has no special meaning at all

所以,在页面中大量使用div标签导致页面的语义性下降。因此HTML5中引入了新的结构标签article和section

section标签

先来瞅瞅section标签的文档释义:

The section element represents a generic section of a document or application. A section , in this context, is a thematic grouping of content, typically with a heading

这段话的大概含义是:section不仅仅是一个标签容器,它带有明显的语义。该标签常用于对网站或者应用程序中页面上的内容进行分块。比如,网站的主页可以分成简介、新闻和联系方式等几部分,那么每一部分都可以放到一个section里面;类似地,文章的章节、标签对话框中的标签页、或者论文中有编号的部分也可以放到一个section中。请注意:官方文档建议,在使用section时每个section标签中应带一个标题标签(h1-h6),从而表达更清晰的语义。

article标签

先来瞅瞅article标签的文档释义:

The article element represents a self-contained composition in a document, page, application, or site and that is, in principle,independently distributable or reusable, e.g. in syndication.

这段话的大概含义是:article是一个特殊的section标签,它比section更具有明确的语义。也就是说:无论从结构上还是内容上来说,它代表一个独立的、完整的相关内容块。例如:博客中的一篇文章,论坛中的一个帖子或者一段浏览者的评论等。一般来说,article也有标题部分(通常包含在header内),类似地它还有footer部分。

示例

嗯哼,现在我们来看一个关于section标签和article标签的示例

代码如下:

<article>
		<header><h2>有心课堂课程介绍</h2></header>
		<p>我们需要从每天的复制粘贴,盲目的debug中解放出来,找到解决问题的本质。在有心课堂,我们不仅仅是告诉你需求如何实现,还会教你如何分析,如何选择解决方案以及为什么要这样来实现。有心课堂,初衷是为了引导在职开发人员高效开发,养成良好的思维习惯,而不是简单的教你基础API调用。当然优质的教学体系还需要时下热门的市场需求来做辅助。所以我们在此基础上设计来三套阶梯式课程。</p>
		<section>
			<h3>Android架构设计方法、技巧与实践</h3>
			<p>这里是《Android架构设计方法、技巧与实践》的课程简介</p>
		</section>

		<section>
			<h3>三杆火枪干掉自定义View</h3>
			<p>这里是《三杆火枪干掉自定义View》的课程介绍。目前有1068位同学参加该课程</p>
		</section>

		<footer>课程内容版权均归上海有心网络科技有限公司所有</footer>
	</article>

效果如下:
在这里插入图片描述

结构标签小结

div、section、article这三个标签的语义是从无到有,逐渐增强的。div无任何语义,仅仅用作样式化或者脚本化的钩子(hook)。鉴于div标签的不足,HTML5中新增的section和article比较明确地定义了文档结构,便于搜索引擎、浏览器等工具解析该页面;推荐开发人员在工作中广泛使用。对于一段主题性的内容,可以采用section;假如这段内容可以脱离上下文,作为完整的独立存在的一段内容,那么就采用article。

展开阅读全文

没有更多推荐了,返回首页