11

HTML5 中 article 是什么意思？起什么作用？

 3 years ago
source link: https://opssh.cn/daima/213.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

HTML5 中 article 是什么意思？起什么作用？

日期：2022年04月14日
·
分类：技术积累
已阅读 43 次

HTML5 中 article 是什么意思？起什么作用？在平时的前端开发中很多新手可能都不太了解 article，为了让大家更加了解 article 标签在 HTML5 中是什么意思又起什么作用，下面彧繎就给大家总结了一下，一起从新手入门内容开始吧！

article 是什么意思？

在英文中 article 代表的是：文章、论文、报道 的意思，多指在报刊、杂志上发表的非文艺性的文章，包括新闻报导、学术论文等。

在 HTML5 中代表的是：文档、页面或者应用程序中与上下文不相关的独立部分。

HTML5 中起什么作用？

article 在 HTML5 中为标签元素，上面说道 article 在 HTML5 中代表文档、页面或者应用程序中与上下文不相关的独立部分，但该元素经常被用于定义一篇日志、一条新闻或用户评论等。

article 标签元素通常使用多个 section 标签元素进行划分，一个页面中 article 标签元素可以出现多次。

article 语法

article 是有开始与闭合一对 HTML5 标签元素，以 <article> 开始，以 </article> 结束闭合。

Markup
<article>显示内容</article>

article 说明

article 是 HTML5 新增标签，其语法基本功能和 div、p、span 等标签一样，可以直接使用 style 属性标签内设置 CSS，或者使用 class 或 id 引入外部 CSS 样式，主要是用于布局文章、内容方面内容，如下所述：

Markup
# 使用 class 引入样式
<article class="css">显示内容</article>
# 使用 ID 引入样式
<article id="css">显示内容</article>

article 实例

这里使用 article 标签布局一段 HTML5 实例，通过此示例来掌握了解 article 元素标签，以下是完整 HTML5 实例代码：

Markup
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>html5 中的 article 实例</title>
</head>
<body>
    <article>
        <h3>文章标题</h3>
        <p>文章内容一</p>
        <p>文章内容二</p>
        <p>文章内容三</p>
    </article>
</body>
</html>

上述代码为单个 article 标签元素实例，下面我们再来看看包含了多个 article 标签元素的实例，其中我们再引入 header 和 section 标签元素，实例如下：

Markup
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>html5 中引入多个 article 实例</title>
</head>
<body>
    ...
    <article>
        <header>
            <h2>第一章</h2>
    　　</header>
    　　<section>
            <header>
                <h2>第一节</h2>
            </header>
                <p>文章内容一</p>
                <p>文章内容二</p>
                <p>文章内容三</p>
        </section>
        <section>
            <header>
                <h2>第二节</h2>
            </header>
                <p>文章内容一</p>
                <p>文章内容二</p>
                <p>文章内容三</p>
        </section>
    </article>
    <article>
        <header>
            <h2>第二章</h2>
        </header>
    </article>
    ...
</body>
</html>

以上就是在 HTML5 中 正确的使用 article 标签元素的介绍，想要更好的使用 article 标签元素，需要自己进一步的了解 HTML5 标签才会领悟领会，当然正常的使用 article 标签是作为一个前端开发入门的基础。


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK