HTML代码教程
【HTML教程】HTML的article标签|html入门知识
时间: 2024-12-27 10:34:09 浏览次数:11
常用的html标签汇总、以及操作过程中的一些bug问题解决方法,以下龙腾飞网络科技-小吴在建站实操中笔记记录,一路走来,一步步学习、总结、整理的一些资料,不用死记硬背,保存使用非常方便,实操过程中遇到了就查询搜索一下,实践出真章,做多了自然就熟悉了:【定义和用法】article 标签规定独立的、自包含的内容。一篇文

常用的html标签汇总、以及操作过程中的一些bug问题解决方法,以下龙腾飞网络科技-小吴在建站实操中笔记记录,一路走来,一步步学习、总结、整理的一些资料,不用死记硬背,保存使用非常方便,实操过程中遇到了就查询搜索一下,实践出真章,做多了自然就熟悉了:

【定义和用法】

article 标签规定独立的、自包含的内容。

一篇文章应该能够独立理解,且可以独立于整个站点进行分发。

注意:在浏览器中,article 元素本身不会呈现任何特殊的样式。但是,你可以使用 CSS 样式化 article 元素(请参见下面的例子)。


【实例】

例子 1

三篇内容独立、自成一体的文章:

<article>
<h2>Google Chrome</h2>
<p>Google Chrome 是谷歌开发的网络浏览器,于 2008 年发布。Chrome 是当今世界上最受欢迎的网络浏览器!</p>
</article>

<article>
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox 是由 Mozilla 开发的开源网络浏览器。自 2018 年 1 月以来,Firefox 一直是第二大最受欢迎的网络浏览器。</p>
</article>

<article>
<h2>Microsoft Edge</h2>
<p>Microsoft Edge 是微软开发的一款网络浏览器,于 2015 年发布。Microsoft Edge 取代了 Internet Explorer。</p>
</article>


例子 2

使用 CSS 设置article元素的样式:


<html><head><style>.all-browsers {
  margin: 0;
  padding: 5px;
  background-color: lightgray;}.all-browsers > h1, .browser {
  margin: 10px;
  padding: 5px;}.browser {
  background: white;}.browser > h2, p {
  margin: 4px;
  font-size: 90%;}</style></head><body><article class="all-browsers">
  <h1>Most Popular Browsers</h1>
  <article class="browser">
    <h2>Google Chrome</h2>
    <p>Google Chrome 是谷歌开发的网络浏览器,于 2008 年发布。Chrome 是当今世界上最受欢迎的网络浏览器!</p>
  </article>
  <article class="browser">
    <h2>Mozilla Firefox</h2>
    <p>Mozilla Firefox 是由 Mozilla 开发的开源网络浏览器。自 2018 年 1 月以来,Firefox 一直是第二大最受欢迎的网络浏览器。</p>
  </article>
  <article class="browser">
    <h2>Microsoft Edge</h2>
    <p>Microsoft Edge 是微软开发的一款网络浏览器,于 2015 年发布。Microsoft Edge 取代了 Internet Explorer。</p>
  </article></article></body></html>

 

 

【默认的 CSS 设置】

大多数浏览器将使用以下默认值显示article元素:

article {
  display: block;}




友情链接: 知识付费 | EDU指南导航 | 小程序开发 | 上网行为管理 | 小程序开发公司 | 企业财务服务 | 职校招生网 |
Copyright©2011 Guangzhou Longtengfei Network Technology Co., Ltd. 广州龙腾飞网络科技有限公司 粤ICP备18029205号 XML地图 | 系统开发专题地图