<article>ï¼æç« å§å®¹åç´

Baseline

Widely available

This feature is well established and works across many devices and browser versions. Itâs been available across browsers since 2015å¹´7æ.

åè©¦ä¸ä¸

<article class="forecast">
  <h1>Weather forecast for Seattle</h1>
  <article class="day-forecast">
    <h2>03 March 2018</h2>
    <p>Rain.</p>
  </article>
  <article class="day-forecast">
    <h2>04 March 2018</h2>
    <p>Periods of rain.</p>
  </article>
  <article class="day-forecast">
    <h2>05 March 2018</h2>
    <p>Heavy rain.</p>
  </article>
</article>

.forecast {
  margin: 0;
  padding: 0.3rem;
  background-color: #eee;
}

.forecast > h1,
.day-forecast {
  margin: 0.5rem;
  padding: 0.3rem;
  font-size: 1.2rem;
}

.day-forecast {
  background: right/contain content-box border-box no-repeat
    url("/shared-assets/images/examples/rain.svg") white;
}

.day-forecast > h2,
.day-forecast > p {
  margin: 0.2rem;
  font-size: 1rem;
}

å§å®¹é¡å	æµå§å®¹ãç« ç¯åå§å®¹ãæ«åå§å®¹
åè¨±çå§å®¹	æµå§å®¹ã
æ¨ç±¤çç¥	ä¸åè¨±ï¼éå§åçµææ¨ç±¤é½æ¯å¿é çã
åè¨±çç¶åç´	ä»»ä½æ¥åæµå§å®¹ çåç´ ãè«æ³¨æï¼`<article>` åç´ ä¸å¾æ¯ `<address>` åç´ çåå«ã
é±å« ARIA è§è²	`article`
åè¨±ç ARIA è§è²	`application`ã`document`ã`feed`ã`main`ã`none`ã`presentation`ã`region`
DOM ä»é¢	`HTMLElement`

å±¬æ§

æ¤åç´ ååå«å¨åå±¬æ§ã

ä½¿ç¨æ³¨æäºé

æ¯å <article> æè©²è¢«èå¥ï¼éå¸¸ééå¨ <article> åç´ çååç´ ä¸åå«æ¨é¡ï¼<h1> - <h6> åç´ ï¼ã
ç¶åµå¥ <article> åç´ æï¼å§é¨åç´ ä»£è¡¨èå¤é¨åç´ ç¸éçæç« ãä¾å¦ï¼é¨è½æ ¼æç« çè©è«å¯ä»¥æ¯åµå¥å¨è¡¨ç¤ºé¨è½æ ¼æç« ç <article> ä¸ç <article> åç´ ã
<article> åç´ çä½èä¿¡æ¯å¯ä»¥éé <address> åç´ æä¾ï¼ä½ä¸é©ç¨æ¼åµå¥ç <article> åç´ ã
<article> åç´ çç¼ä½æ¥æåæéå¯ä»¥ä½¿ç¨ <time> åç´ ç datetime å±¬æ§ä¾æè¿°ã

ç¯ä¾

html

<article class="film_review">
  <h2>Jurassic Park</h2>
  <section class="main_review">
    <h3>Review</h3>
    <p>Dinos were great!</p>
  </section>
  <section class="user_reviews">
    <h3>User reviews</h3>
    <article class="user_review">
      <h4>Too scary!</h4>
      <p>Way too scary for me.</p>
      <footer>
        <p>
          Posted on
          <time datetime="2015-05-16 19:00">May 16</time>
          by Lisa.
        </p>
      </footer>
    </article>
    <article class="user_review">
      <h4>Love the dinos!</h4>
      <p>I agree, dinos are my favorite.</p>
      <footer>
        <p>
          Posted on
          <time datetime="2015-05-17 19:00">May 17</time>
          by Tom.
        </p>
      </footer>
    </article>
  </section>
  <footer>
    <p>
      Posted on
      <time datetime="2015-05-15 19:00">May 15</time>
      by Staff.
    </p>
  </footer>
</article>