HTML5排行榜是一種流行的網(wǎng)頁(yè)元素,它可以用來(lái)展示各種數(shù)據(jù)的排名和統(tǒng)計(jì)數(shù)據(jù)。下面是一個(gè)示例代碼:
<table> <caption>2019年度銷售數(shù)據(jù)排行榜</caption> <thead> <tr> <th>排名</th> <th>產(chǎn)品名稱</th> <th>銷售數(shù)量</th> <th>市場(chǎng)份額</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>iPhone XR</td> <td>5000</td> <td>20%</td> </tr> <tr> <td>2</td> <td>Samsung Galaxy S10</td> <td>3600</td> <td>15%</td> </tr> <tr> <td>3</td> <td>Huawei Mate 20</td> <td>2500</td> <td>10%</td> </tr> <tr> <td>4</td> <td>Xiaomi Mi 9</td> <td>2000</td> <td>8%</td> </tr> <tr> <td>5</td> <td>OnePlus 7 Pro</td> <td>1200</td> <td>5%</td> </tr> </tbody> </table>
上述代碼使用了HTML5的<table>元素來(lái)創(chuàng)建排行榜。<caption>元素用于添加榜單名稱,<thead>元素用于添加表頭,<tbody>元素用于添加表格內(nèi)容。<tr>元素用于添加每一行數(shù)據(jù),<th>元素用于添加表頭單元格,<td>元素用于添加行數(shù)據(jù)單元格。
注意,HTML5排行榜不僅可以用于展示產(chǎn)品銷售數(shù)據(jù),也可以用于展示其他數(shù)據(jù)類型的排行榜,例如股票漲幅榜、音樂(lè)排行榜、影視票房榜等等,只需根據(jù)需要修改表頭和表格內(nèi)容即可。