分享更有价值
被信任是一种快乐

HTML5中的Article和Section元素怎么使用

文章页正文上

这篇文章主要介绍“HTML5中的Article和Section元素怎么使用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“HTML5中的Article和Section元素怎么使用”文章能帮助大家解决问题。
HTML5带出了一系列新元素,并且将在未来被广泛应用。然而,有一些元素在使用时易被混淆,包括以下两个新元素:和

最常被问起的问题是:在什么情况下我们应该使用这些元素?以及我们应该如何正确的使用这些元素?
Section元素
这 是一个最容易产生歧义的元素。它与

元素表示了一篇文档或应用中,通用段落 – WHATWG”

从描述中我们可以看出

元素的作用就是分段,或多或少类似于

。但是它仍有一个特例。在文档中,加入了一段特别声明:

“当一个元素仅用于风格样式或是为了脚本的方便,我们鼓励作者使用

元素适用于,当元素的内容需要明确的列出时。- WHATWG”

基于这一点,我们可以总结以下两点:

第一,尽管section元素在技术上是可以设计样式的,但是当有复杂的样式或脚本时,我们仍建议使用div元素。

第二,类似于

  • 元素,section元素是用来列举内容的。

    因此在现实例子中,使用

    元素的原因是结构化的列出博客的内容,代码如下:

    代码如下:

    Blog Post Title

    Ice cream tart powder jelly-o.

    Gummies chocolate cake ice cream cookie halvah tiramisu jelly-o.

    Blog Post Title

    Ice cream tart powder jelly-o.

    Gummies chocolate cake ice cream cookie halvah tiramisu jelly-o.

    Blog Post Title

    Ice cream tart powder jelly-o.

    Gummies chocolate cake ice cream cookie halvah tiramisu jelly-o.

    这只是个例子,

    元素也可以用作其他用途。

    Article元素

    从名字上,它已经很好的诠释了自己,但是我们仍要看看官方文档上是如何描述它的:

    “在文档,页面,应用或是站点上的一个独立部分,并且大体上,是可独立分配,或是重复使用的,例如在发布时。这个可以是论坛帖子,杂志或是新闻,博客条目,用户提交的评论,互动的小工具或小工具,或任何其他独立项目的内容。”

    从上描述中,我们可以总结出元素专用于结构化文章,特别是我们要发布的,例如博客,页面内容或是论坛帖子。

    以下例子给出了如何使用构建一个博客文章。

    代码如下:

    This is Blog Post Title

    Sweet roll halvah biscuit toffee liquorice tart pudding sesame snaps.

    Biscuit powder jelly-o fruitcake faworki chocolate bar. Pudding oat

    cake tootsie roll sesame snaps lollipop gingerbread bonbon. Gummies

    halvah gummies danish biscuit applicake gingerbread jelly-o pastry.

    此外,元素还可与section元素结合,需要的时候,可以使用

    元素将文章分为几个段落,如下例所示。

    代码如下:

    This is Blog Post Title

    This is the Sub-Heading

    Sweet roll halvah biscuit toffee liquorice tart pudding sesame snaps.

    Biscuit powder jelly-o fruitcake faworki chocolate bar. Pudding oat cake

    tootsie roll sesame snaps lollipop gingerbread bonbon. Gummies halvah

    gummies danish biscuit applicake gingerbread jelly-o pastry.

    This is another Sub-Heading

    Topping cheesecake sweet pie carrot cake sweet roll. Gummi bears lemon drops

    toffee sesame snaps tart topping chupa chups apple pie gummies. Wafer chocolate

    cake. Sugar plum chocolate bar topping ice cream carrot cake danish bonbon.

    Cheesecake gummi bears drage jujubes drage drage brownie jelly biscuit. Powder croissant jelly beans pastry.

    关于“HTML5中的Article和Section元素怎么使用”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注云技术行业资讯频道,小编每天都会为大家更新不同的知识点。

  • 推荐阅读:
    1. HTML5新元素section和article的区别详解
    2. HTML5学习:语义元素article

    免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@byun.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

    html5
    article
    section

    • 上一篇新闻:

      css中的伪元素是什么
    • 下一篇新闻:

      CSS中的Table属性有哪些

    猜你喜欢

    • 网站建设与管理的方法有哪些
    • 服务器系统安装及配置的步骤是什么
    • 数据库端口怎么修改
    • 美国不限制内容服务器怎么租用
    • 西安虚拟主机租用怎么搭建
    • 云计算cdn服务器租用怎么搭建
    • 美国境外云服务器租用怎么选择好
    • 免费windows云电脑购买要注意什么
    • 香港高防服务器租用怎么搭建
    • 按流量计费云主机购买怎么用

    最新资讯
    • python常用的时间模块之datetime模块
    • Spring延迟初始化会遇到什么问题
    • SpringCloudAlibaba和SpringCloud有什么区别
    • JS语法有C#的switch表达式
    • vue-electron中如何修改表格内容和样式
    • 利用python实现全屏爱心雨怎么实现
    • JS的鼠标监听mouseup鼠标抬起失效如何解决
    • SpringCloud整合XXL-Job的几个步骤
    • python常用的时间模块之datetime模块
    • Spring延迟初始化会遇到什么问题
    相关推荐
    • HTML5中div和section以及article的区别是什么
    • HTML5语义化标记Section和Article怎么用
    • HTML5中article和section的区别有哪些
    • HTML5中article和section有什么区别
    • HTML5中div和section以及article有什么区别
    • HTML5中div、article、section的区别是什么
    • HTML5中的Article和Section元素的用法
    • HTML5中div section article的区别是什么
    • HTML5中div,article,s免费云主机、域名ection怎么使用
    • HTML5中div和section及article的区别是什么

    相关标签

    html5+css3
    html5游戏
    html5 video
    html5标准
    html5+css
    html5 canvas
    html5plus
    html5图片压缩上传
    html5压缩上传
    html5的学习笔记
    html5基础
    html5开发
    html5跨平台
    html5 css3
    cocos2d-html5
    html5标签
    html5新特性
    html5特性
    multipart/form-data
    quartz2d

    “当一个元素仅用于风格样式或是为了脚本的方便,我们鼓励作者使用
    基于这一点,我们可以总结以下两点:
    第一,尽管section元素在技术上是可以设计样式的,但是当有复杂的样式或脚本时,我们仍建议使用div元素。
    第二,类似于
    因此在现实例子中,使用

    元素的原因是结构化的列出博客的内容,代码如下:

    代码如下:

    Ice cream tart powder jelly-o.
    Gummies chocolate cake ice cream cookie halvah tiramisu jelly-o.

    Ice cream tart powder jelly-o.
    Gummies chocolate cake ice cream cookie halvah tiramisu jelly-o.

    Ice cream tart powder jelly-o.
    Gummies chocolate cake ice cream cookie halvah tiramisu jelly-o.

    这只是个例子,

    元素也可以用作其他用途。

    Article元素
    从名字上,它已经很好的诠释了自己,但是我们仍要看看官方文档上是如何描述它的:
    “在文档,页面,应用或是站点上的一个独立部分,并且大体上,是可独立分配,或是重复使用的,例如在发布时。这个可以是论坛帖子,杂志或是新闻,博客条目,用户提交的评论,互动的小工具或小工具,或任何其他独立项目的内容。”
    从上描述中,我们可以总结出元素专用于结构化文章,特别是我们要发布的,例如博客,页面内容或是论坛帖子。
    以下例子给出了如何使用构建一个博客文章。
    代码如下:

    Sweet roll halvah biscuit toffee liquorice tart pudding sesame snaps.
    Biscuit powder jelly-o fruitcake faworki chocolate bar. Pudding oat
    cake tootsie roll sesame snaps lollipop gingerbread bonbon. Gummies
    halvah gummies danish biscuit applicake gingerbread jelly-o pastry.

    此外,元素还可与section元素结合,需要的时候,可以使用

    元素将文章分为几个段落,如下例所示。

    代码如下:

    Sweet roll halvah biscuit toffee liquorice tart pudding sesame snaps.
    Biscuit powder jelly-o fruitcake faworki chocolate bar. Pudding oat cake
    tootsie roll sesame snaps lollipop gingerbread bonbon. Gummies halvah
    gummies danish biscuit applicake gingerbread jelly-o pastry.

    Topping cheesecake sweet pie carrot cake sweet roll. Gummi bears lemon drops
    toffee sesame snaps tart topping chupa chups apple pie gummies. Wafer chocolate
    cake. Sugar plum chocolate bar topping ice cream carrot cake danish bonbon.
    Cheesecake gummi bears drage jujubes drage drage brownie jelly biscuit. Powder croissant jelly beans pastry.

    关于“HTML5中的Article和Section元素怎么使用”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注云技术行业资讯频道,小编每天都会为大家更新不同的知识点。免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@byun.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。云技术公众号手机网站二维码Copyright Yisu Cloud Ltd. All Rights Reserved. 2018 版权所有广州云技术计算有限公司粤ICP备17096448号-1
    粤公网安备 44010402001142号增值电信业务经营许可证编号:B1-20181529

    相关推荐: html5如何利用快捷键实现注释

    小编给大家分享一下html5如何利用快捷键实现注释,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧! 在html5中,可以利用“ctrl+/”快捷键实现注释,选中需要注释的代码,使用该快…

    文章页内容下
    赞(0) 打赏
    版权声明:本站采用知识共享、学习交流,不允许用于商业用途;文章由发布者自行承担一切责任,与本站无关。
    文章页正文下
    文章页评论上

    云服务器、web空间可免费试用

    宝塔面板主机、支持php,mysql等,SSL部署;安全高速企业专供99.999%稳定,另有高防主机、不限制内容等类型,具体可咨询QQ:360163164,Tel同微信:18905205712

    主机选购导航云服务器试用

    登录

    找回密码

    注册