• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > html5 section标签是什么意思?html5 section标签的用法总结

html5 section标签是什么意思?html5 section标签的用法总结

作者:匿名 字体:[增加 减小] 来源:互联网 时间:2018-12-03

本文主要包含section,html等相关知识,匿名希望在学习及工作中可以帮助到您
本篇文章主要的介绍了关于HTML5 section标签的定义以及它的用法,最后还有一个案例总结,现在让我们开始阅读这篇文章吧

先来解释下html5 section标签的意思:

html5 section标签定义了文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。

看一个实例让你更加了解section标签:

文档中的区段,解释了 PRC:

<section>
  <h1>微课江湖</h1>
  <p>这里是微课江湖,网址是</p>
</section>

实例效果如下图:

tuyi.png

现在说说section标签的注意点:

section 不是一个专用来做容器的标签,如果仅仅是用于设置样式或脚本处理,专用的是 div

section 里应该有 标题(h1~6),但文章中推荐用 article 来代替

一条简单的准则是,只有元素内容会被列在文档大纲中时,才适合用section元素。

section的作用是对页面上的内容进行分块,如各个有标题的版块、功能区或对文章进行分段,不要与有自己完整、独立内容的article混淆。

html5 section标签的用法:

html5引入了<section>标签,用于描述文档的结构,它同<div>标签的意思一样。但是在特定环境中,两者又有明显的区别。

w3对<section>的定义是:定义一个文档的章节(可以拥有自己的<header>和<footer>)。

w3对<div>的定义是: 定义一个文档的章节。(但似乎更适合用于外层的布局,缺少语义性。)

现在来看一个案例:

<body>
  <header></header>
  <div id=“content”>
     <section></section>
     <section></section>
  </div>
  <footer></footer>
</body>

在这里,我们用<section>来定义id为content的div里面的两个章节/区域。当然此处你也可以直接把div用section代替,或者把里面的<section>改成<div>,因为此处还不能明显的区分两者的区别:

<section id=”content”>
   <section></section>
   <section></section>
</section>

或者:

<div id=”content”>
   <div></div>
   <div></div>
</div>

HTML5 section标签的总结:

我们用<div>标签来布局整个最外层的章,而用<section>用来定义内部的章节。当然如果把整个文档都看作是一个章节,那么也可以用<section>来代替<div>,但是建议不要使用<section>来代替该用<div>布局的地方,那些地方不能体现出<section> 的语义性。

【小编推荐】

如何给html中的pre标签中的文字换行?html pre标签的使用实例

HTML iframe标签怎么使用?HTML iframe标签的使用实例介绍

以上就是html5 section标签是什么意思?html5 section标签的用法总结的详细内容,更多请关注微课江湖其它相关文章!

您可能想查找下面的文章:

  • 详解HTML5中div和section以及article的区别
  • HTML5中div、article、section的区别及使用介绍
  • HTML5中的Article和Section元素认识及使用
  • 关于html5中的section标签与div标签的区别(内有实例)
  • html5 section标签是什么意思?html5 section标签的用法总结
  • HTML5中的section标签是什么?HTML5中的section标签怎么居中?
  • HTML5中div和section以及article的区别分析
  • HTML5语义化标记Section和Article实例详解
  • 详细介绍HTML5的article和section的区别
  • HTML5学习笔记简明版(2):新元素之section,article,aside

相关文章

  • 2018-12-03【HTML5】3D模型--百行代码实现旋转立体魔方实例
  • 2018-12-03H5的通用接口详细介绍
  • 2018-12-03canvas API ,通俗的canvas基础知识(五)
  • 2018-12-03关于html5 canvas 微信海报的分享介绍
  • 2018-12-03介绍下HTML5.1里的新内容
  • 2018-12-03Bootstrap拟态框+支付宝首页
  • 2018-12-03html5 header标签是什么意思?html5 header标签的用法详解(附实例)
  • 2017-08-06html5绘制时钟动画
  • 2017-08-06突袭HTML5之Javascript API扩展1—Web Worker异步执行及相关概述
  • 2018-12-03HTML5语音识别标签写法附图_html5教程技巧

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • HTML5 标准将把互联网视频扔回到黑暗时代
    • 淘宝手机客户端有多少页面是 Web 模式 (包括 HTML5) 的?
    • HTML5实现APP和原生方式有多大差距,多少坑?
    • 自定义html标记替换html5新增元素_html5教程技巧
    • 大势所趋 HTML5成为Web开发者最关心的技术
    • 使用HTML5画布实现的超棒javascript动画仪表板:gauge.js?1.1.2
    • 详细介绍HTML5使用Audio标签实现歌词同步的效果
    • HTML5Web 存储实例详解
    • 多视角入门教程:6个多视角零基础入门教程推荐
    • h5实战与剖析的使用方法总结

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有