<aside>ï¼ä¾§è¾¹æ å ç´
åºçº¿
广æ³å¯ç¨
èª 2015å¹´7æ èµ·ï¼æ¤ç¹æ§å·²å¨ä¸»æµæµè§å¨ä¸å¾å°æ¯æï¼å¯å¨å¤§å¤æ°è®¾å¤åæµè§å¨çæ¬ä¸æ£å¸¸ä½¿ç¨ã
<aside> HTML å
ç´ ç¨äºè¡¨ç¤ºææ¡£ä¸å
容ä»
ä¸ä¸»å
容鴿¥ç¸å
³çé¨åãéå¸¸ä»¥ä¾§è¾¹æ ææç¤ºæ¡çå½¢å¼åç°ã
å°è¯ä¸ä¸
<p>è¾èæ¯ä¸¤æ å¨ç©çä¸ç§ï¼å
¶å¤å½¢ç±»ä¼¼è¥è´ï¼å
æ¬å¹¼ä½åæä½ççè
¿å尾巴ã</p>
<aside>
<p>ç²ç®è¾èç¨ä¸ç§è´å½çç¥ç»æ¯ç´ æ¥ä¿æ¤èªå·±ã</p>
</aside>
<p>
æå ç§è¾èæ æ¯å¨å¤ªå¹³æ´è¥¿åé¨çæ¸©å¸¦é¨æä¸ï¼å
¶ä¸å
æ¬æ©è¨èå¨è¾èã西åè¾èåç²ç®è¾èã大夿°è¾è齿¯å¤é´æ´»å¨ï¼æé£æè«ãè è«åå
¶ä»å°çç©ã
</p>
aside {
width: 40%;
padding-left: 0.5rem;
margin-left: 0.5rem;
float: right;
box-shadow: inset 5px 0 5px -5px #29627e;
font-style: italic;
color: #29627e;
}
aside > p {
margin: 0.5rem;
}
屿§
è¿ä¸ªå ç´ åªå å«å ¨å±å±æ§ã
使ç¨è¯´æ
- ä¸è¦ä½¿ç¨
<aside>å ç´ æ¥æ è®°æ¬å·å çææ¬ï¼å 为è¿ç§ææ¬è¢«è§ä¸ºæ£æçä¸é¨åã
示ä¾
>ä½¿ç¨ <aside>
æ¤ç¤ºä¾ä½¿ç¨ <aside> æ ç¾æ¥æ è®°æç« ä¸çä¸ä¸ªæ®µè½ã该段è½ä¸æç« ç主è¦å
容ä»
åå¨é´æ¥å
³èï¼
html
<article>
<p>迪士尼çµå½±<cite>ãå°ç¾äººé±¼ã</cite>äº 1989 年馿¬¡å¨é¢çº¿ä¸æ ã</p>
<aside>
<p>çµå½±å¨ä¸æ åæå°±è·å¾äº 8700 ä¸ç¾å
çç¥¨æ¿æ¶å
¥ã</p>
</aside>
<p>å
³äºçµå½±çæ´å¤ä¿¡æ¯â¦â¦</p>
</article>
ç»æ
ææ¯æ¦è¦
| å 容åç±» | æµå¼å 容ãåæ®µå 容ã坿ç¥å 容ã |
|---|---|
| å 许çå 容 | æµå¼å 容ã |
| æ ç¾çç¥ | ä¸å 许ï¼å¼å§æ ç¾åç»ææ ç¾é½ä¸è½çç¥ã |
| å 许çç¶å ç´ |
任使¥åæµå¼å
容çå
ç´ ã请注æï¼<aside> å
ç´ ä¸è½æ¯ <address> å
ç´ çå代ã
|
| éå«ç ARIA è§è² |
complementary
|
| å 许ç ARIA è§è² |
feedãnoneãnoteãpresentationãregionãsearch
|
| DOM æ¥å£ | HTMLElement |
è§è
| è§è |
|---|
| HTML > # the-aside-element > |