首页 >web前端 >html教程 >html article标签有什么用?html article标签的使用方法介绍

html article标签有什么用?html article标签的使用方法介绍

寻∝梦
寻∝梦原创
2018-08-29 16:36:4613247浏览

本篇文章主要的向大家介绍关于HTML5 article标签的用法和使用实例说明,希望大家都能理解,接下来我们来看这篇关于HTML5 article标签的文章了。

首先我们先简单的介绍下article:

html5 23c3de37f2f9ebcb477c4a90aac6fffd表示页面中的一块与上下文不相关的独立内容,比如网页中的一篇文章或报纸中的一篇文章。

article不同于其他DIV CSS布局结构,article主要布局文章类内容。

article语法代码:

<article>内容</article>

article是有开始与闭合一对HTML标签元素。

以23c3de37f2f9ebcb477c4a90aac6fffd开始,以7618f95bdc39e398f223d37049478af1结束闭合。

现在说说article标签的使用说明:

article是HTML5新增标签,其语法基本功能和以前DIV、p、span等标签一样,可以直接使用style属性标签内设置CSS,或者使用class或id引入外部CSS样式。

<article class="aaa">内容</article>
<article id="bbb">内容</article>

article主要是布局文章、内容方面内容。

再来看看HTML5 article标签的使用实例:

这里使用article标签布局一篇实例,通过此示例掌握了解article元素标签。以下是完整HTML5实例代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>article 实例 ThinkCSS</title>
<style>
article{ color:#000}
article h1{ color:#F00}
</style>
</head>
<body>
<article>
    <h1>文章标题</h1>
    <p>文章段落一,内容CSS技术上ThinkCSS网 ...</p>
    <p>文章段落二,内容CSS技术上ThinkCSS网 ...</p>
    <p>段落三,内容CSS技术上ThinkCSS网 ...</p>
</article>
</body>
</html>

article标签的代码效果截图:

tuyi.png

如图是代码的效果图,基本上都能看明白,有什么不明白的可以在下方留言

【小编推荐】

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

如何使用HTML span标签的class属性?这里有关于class属性的详解

以上是html article标签有什么用?html article标签的使用方法介绍的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关文章

查看更多