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

HTML5中的Article和Section元素认识及使用

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含html5,Article,Section等相关知识,佚名 希望在学习及工作中可以帮助到您
 
HTML5带出了一系列新元素,并且将在未来被广泛应用。然而,有一些元素在使用时易被混淆,包括以下两个新元素:<article>和<section>。
最常被问起的问题是:在什么情况下我们应该使用这些元素?以及我们应该如何正确的使用这些元素?

Section元素
这 是一个最容易产生歧义的元素。它与<div>元素有什么区别?我们一直在用<div>来划分段落,所以除 了<div>,我们什么时候使用这个元素。我们引用官方文档来阐述它。根据WHATWG文档,对<section>元素做了以下 描述:
“<section>元素表示了一篇文档或应用中,通用段落 - WHATWG”

从描述中我们可以看出<section>元素的作用就是分段,或多或少类似于<div>。但是它仍有一个特例。在文档中,加入了一段特别声明:
“当一个元素仅用于风格样式或是为了脚本的方便,我们鼓励作者使用<div>。<section>元素适用于,当元素的内容需要明确的列出时。- WHATWG”

基于这一点,我们可以总结以下两点:
第一,尽管section元素在技术上是可以设计样式的,但是当有复杂的样式或脚本时,我们仍建议使用div元素。
第二,类似于<li>元素,section元素是用来列举内容的。

因此在现实例子中,使用<section>元素的原因是结构化的列出博客的内容,代码如下:

无论如何,不要混淆观点。如我之前提出的,只要是合理的情况,且你看到使用了它使得结构变得意义非凡,那么请用它。

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

  • HTML5知识点总结
  • HTML5的本地存储
  • HTML5本地存储之IndexedDB
  • Html5实现文件异步上传功能
  • Html5新标签datalist实现输入框与后台数据库数据的动态匹配
  • 详解HTML5 window.postMessage与跨域
  • HTML5拖放API实现拖放排序的实例代码
  • 解决html5中video标签无法播放mp4问题的办法
  • HTML5新特性 多线程(Worker SharedWorker)
  • Html5新增标签有哪些

相关文章

  • 2018-12-03图片上传插件ImgUploadJS:用HTML5 File API 实现截图粘贴上传、拖拽上传 _html5教程技巧
  • 2018-12-03使用canvas实现迷宫游戏
  • 2017-08-06html5 offlline 缓存使用示例
  • 2017-08-06在html5的Canvas上绘制椭圆的几种方法总结
  • 2018-12-03HTML5属性:form表单属性的用法实例
  • 2018-12-03HTML5实战与剖析之触摸事件(touchstart、touchmove和touchend)
  • 2018-12-03Canvas如何做出3D动态的Chart图表
  • 2018-12-03关于H5页面的10篇文章推荐
  • 2018-12-03在H5页面中怎样调用APP
  • 2017-08-06html5声频audio和视频video等新特性详细说明

文章分类

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

最近更新的内容

    • HTML5 WebApp part4:使用 Web Workers 来加速您的移动 Web 应用程序(上) ...
    • phonegap完成克隆和删除联系人功能的代码详解
    • 为什么人人网把 iOS 客户端从原生写成 HTML5,Facebook 却将半 HTML5 重写成原生?
    • HTML5 DeviceOrientation实现手机网站摇一摇功能代码实例_html5教程技巧
    • HTML5讲解之dataTransfer对象
    • 微信开发实战之分享功能
    • H5中APP监听返回事件处理
    • H5移动端各种各样的列表的制作方法(五)
    • html5 touch事件实现触屏页面上下滑动(一)
    • 现在学html5开发手机应用前景好吗?

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

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