html元素中section标签是html5中新增的标签，主要用于定义文档页面中“节”或“段”的区块，下面，我们就详细了解一下标签的使用方法及作用。

标签定义

标签定义的是页面中的节或段的区块；

标签定义的内容区块通常由标题和内容两部分组成；

标签定义页面的某个区块，可以是章节、区段、头部页眉、底部页脚或页面其他区块；

标签在一个页面中可以出现多次，表示一组相似的主题内容区块；

标签是 HTML 5 中的新标签；

浏览器支持情况

标签已被IE 9+、Firefox、Opera、Chrome 和 Safari浏览器支持；

但 IE 8 或更早版本的 IE 浏览器不支持标签。

标签用法

标签代表文档中的“节”或“段”，“段”可以是指一篇文章里按照主题的分段；“节”可以是指一个页面中的分组。标签不管是在“节”或“段”中，通常还使用标题h1~h6；

1、标签简单用法

一个标签内，通常包含标题和内容两部分，演示代码如下：

标题部分

内容部分

标签通常在带有标题的内容区块使用，所以，在没有标题的内容区块不建议使用section标签；

标签所包裹的通常是一组相似主题的内容，所以，在一个页面中，往往会不止出现一次标签。

3、嵌套在内

可以将嵌套在中，用来将一篇文章、一篇新闻报道、一篇博客等文章的不同部分或不同章节。

文章article头部区域

第一个区段

第一个区段内容

第二个区段

第二个区段内容

第三个区段

第三个区段内容

每个标签区块的主题或结构是相似的，正好体现了标签是定义页面中一组“节区块"或“段区块”。

3、标签使用注意

article、nav、aside可以理解为特殊的section，所以如果可以用article、nav、aside就不要用section，没实际意义的就用div；

HTML5段落标签的效果,HTML5标签：section元素的使用方法及作用相关推荐

html video添加字幕,HTML5标签：video元素的使用方法及作用
html元素标签是html5中新增的标签,用于定义网页文档中的视频资源文件,有关标签的使用方法及作用详解如下: 标签的定义标签可以把指定的视频资源文件插入页面中播放: 标签是 HTML 5 中新增的 ...
HTML5语音标签和作用,HTML5标签：source元素的使用方法及作用
html元素标签是html5中新增的标签,主要用于指定音频.视频.图片类型的媒体资源.有关标签的使用方法及作用详解如下: 标签的定义标签是为.和标签指定多个媒体资源,比如音频.视频.图片. 标签 ...
html5 aside图片,HTML5标签：aside元素的使用方法及作用
html元素标签是html5中新增标签,通常作为页面或全站的侧边栏,可放置相关的提示说明.文章列表.广告条目.栏目导航等附属信息:下面就一起了解标签标签的用法及作用吧. 标签定义标签通常放置当前页 ...
html5怎么产生手风琴效果,Html5 js如何实现手风琴效果
Html5 js如何实现手风琴效果发布时间:2020-08-03 09:54:10 来源:亿速云阅读:92 作者:小猪这篇文章主要为大家展示了Html5 js如何实现手风琴效果,内容简而易懂,希 ...
html5的canvas动画效果,HTML5 Canvas：制作动画特效
要在HTML5 canvas中绘制图像动画效果,你需要绘制出每一帧的图像,然后在一个极短的时间内从一帧过渡到下一帧,形成动画效果.这其实是一种视觉欺骗,原理就像播放电影一样,胶片上每一格是一帧图片,然 ...
html5怎么实现雨滴效果,HTML5实现晶莹剔透的雨滴特效
HTML5雨滴特效 img { display: none; } body { overflow: hidden; } #canvas { position: absolute; top: 0px; ...
html5手机触屏效果,html5手机触屏touch事件的详细介绍
HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享. 今天为大家介绍的事件 ...
html5图片文字环绕效果,HTML5实现Word中文字全环绕图片效果
实现这个功能是当时看见数字报的展示出来的编排方式,就是图片+热点,而且下载打开还是PDF的,让我这个WP用户咋个看.想实现Word中的编排方式,也需要浏览器支持Word插件,火狐.谷歌.Opera这些 ...
html5卡片平行视差效果,HTML5/jQuery很棒的交互式平行视差皓月当空场景动画
CSS 语言: CSSSCSS 确定 @import url('https://fonts.googleapis.com/css?family=Open+Sans'); body { font-fam ...

HTML5段落标签的效果,HTML5标签：section元素的使用方法及作用

标题部分

第一个区段

第二个区段

第三个区段

HTML5段落标签的效果,HTML5标签：section元素的使用方法及作用相关推荐

最新文章

热门文章