文档章节

html5中section元素详解

o
 osc_zoa3moe9
发布于 2019/12/07 17:42
字数 666
阅读 9
收藏 0

精选30+云产品,助力企业轻松上云!>>>

html5中section元素详解

一、总结

一句话总结:

section元素 用来定义文章中的章节(通常应该有标题和段落内容)
section元素的作用就是给内容分段,给页面分区

 

1、section元素 和 div元素的区别是什么?

div强调在形式上的独立性,section强调的是内容上的独立性,注意它的语义。
section可以看做 <div id="section"></div>

 

2、article元素和section元素的区别是什么?

article元素更强调内容的独立性(比如说一篇文章):可能有header和footer
section元素更强调内容的关联性(比如说两个段落,是相似的):可能有标题和段落内容

 

 

3、article元素和section元素和div的关联性是什么?

本质上都是带有语义的div块元素
分别可以看作<div id="section">和<div id="article">

 

 

 

二、html5--2.4新的布局元素(3)-section

 

学习要点

  1. 了解section元素的语义和用法
  2. 通过实例理解section元素的用法
  3. article元素和section元素的区别和共同点

 

    1. article元素(标签)
      • 用于定义一个独立的内容区块,比如一篇文章,一篇博客,一个帖子,论坛的一段用户评论,一篇新闻消息等.
      • article元素内可以嵌套其他元素,它可以有自己的头、尾、主体等内容。使用时要特别注意内容的独立性,一般对于独立完整的内容才使用article元素,如果只是一段内容的话应该使用section元素。

 

    1. section元素(标签)
      • 用来定义文章中的章节(通常应该有标题和段落内容)
      • 用来定义文档中特定内容的区块,可视为一个区域分组元素,用来给页面上的内容分块。
      • section元素可以定义文档的主体内容
      • 用一句话来概括它的作用就是给内容分段,给页面分区
      • 注意他与div的区别,div强调在形式上的独立性section强调的是内容上的独立性,注意它的语义

 

    1. article元素和section元素的区别

语义不同

      • article元素更强调内容的独立性(比如说一篇文章)
      • section元素更强调内容的关联性(比如说两个段落,是相似的)
      • article元素是独立完整的内容,section元素页面内容分块

相同点

    • 本质上都是带有语义的div块元素
    • 分别可以看作&ltdiv id="section"&gt和&ltdiv id="article"&gt

实例

用来定义文档中特定的区块

 

 

 

 
o
粉丝 1
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
Html5新标签解释及用法

HTML 5 是一个新的网络标准,目标在于取代现有的 HTML 4.01, XHTML 1.0 and DOM Level 2 HTML 标准。它希望能够减少浏览器对于需要插件的丰富性网络应用服务(plug-in-based rich internet a...

下坠ing-前端
2019/05/30
3
0
HTML5: HTML5 语义元素

ylbtech-HTML5: HTML5 语义元素 1.返回顶部 1、 HTML5 语义元素 语义= 意义 语义元素 = 有意义的元素 什么是语义元素? 一个语义元素能够清楚的描述其意义给浏览器和开发者。 无语义 元素实例...

osc_6a70cndq
2018/04/19
6
0
HTML5 API摘要

什么是语义化? “语义化是指用合理HTML标记以及其特有的属性去格式化文档内容。 语义化的(X)HTML文档有助于提升你的网站对访客的易用性,比如使用PDA、文字浏览器以及残障人士将从中受益。对...

sheilacat
2015/03/12
43
0
HTML5中的Article和Section元素

日期:2013-3-20 来源:GBin1.com HTML5带出了一系列新元素,并且将在未来被广泛应用。然而,有一些元素在使用时易被混淆,包括以下两个新元素:<article>和<section>。 最常被问起的问题是:...

gbin1
2013/03/22
356
0
HTML5中的Article和Section元素

日期:2013-3-20 来源:GBin1.com HTML5带出了一系列新元素,并且将在未来被广泛应用。然而,有一些元素在使用时易被混淆,包括以下两个新元素: 和 。 最常被问起的问题是:在什么情况下我们...

gbin1
2013/03/22
314
0

没有更多内容

加载失败,请刷新页面

加载更多

博客园二次元主题——Sakura

碎碎念 嗯,时隔多久也记不清了,我又回来了,总算是忙里偷闲把这篇文章写出来,有人要过很多次我的博客园美化方案,但是实在是忙啊,也因为我的前台技术不好,代码bug很多,所以也有点不想把...

osc_2y6i16fz
16分钟前
17
0
highcharts 自适应div的宽度

如果窗口变化时,highcharts图表是自带自适应的,但是切换折叠菜单时,highchats图表并不自适应外层div的宽度。如何实现适应div的宽度? 在网上找到有个 reflow 的方法,我是在项目中引入的 ...

tianyawhl
16分钟前
15
0
个人作业——软件工程实践总结&个人技术博客

这个作业属于哪个课程 2020春|S班 (福州大学) 这个作业要求在哪里 个人作业——软件工程实践总结&个人技术博客 这个作业的目标 回顾这门课程带来的提升、团队总结、实践中的经验总结、对下届...

osc_g032zryv
18分钟前
11
0
从封装变化的角度看设计模式——对象创建

封装变化之对象创建 在对象创建的过程中,经常会出现的一个问题就是通过显示地指定一个类来创建对象,从而导致紧耦合。这是因为创建对象时指定类名将使你受特定实现的约束而不是特定接口的约...

osc_r5t7sskd
18分钟前
11
0
从封装变化的角度看设计模式——对象创建

封装变化之对象创建 在对象创建的过程中,经常会出现的一个问题就是通过显示地指定一个类来创建对象,从而导致紧耦合。这是因为创建对象时指定类名将使你受特定实现的约束而不是特定接口的约...

osc_i5oyb1xr
19分钟前
11
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部