本文最后更新于 1 分钟前，文中所描述的信息可能已发生改变。
detail & summary
源代码
html
<details>
<summary style="font-size: 20px">展开</summary>
<hr />
其实啥也没有
</details>效果展示
展开
其实啥也没有
table
源代码
html
<table style="text-align: center; border-collapse: collapse; width: 100%;">
<tbody>
<tr>
<th colspan="3" style="border: 1px solid #000; padding: 8px;">
计算机网络分层模型
</th>
</tr>
<tr>
<td style="border: 1px solid #000; padding: 8px;">OSI七层模型</td>
<td style="border: 1px solid #000; padding: 8px;">TCP/IP四层模型</td>
<td style="border: 1px solid #000; padding: 8px;">TCP/IP五层模型</td>
</tr>
<tr>
<td style="border: 1px solid #000; padding: 8px;">应用层</td>
<td style="border: 1px solid #000; padding: 8px;" rowspan="3">应用层</td>
<td style="border: 1px solid #000; padding: 8px;" rowspan="3">应用层</td>
</tr>
<tr>
<td style="border: 1px solid #000; padding: 8px;">表示层</td>
</tr>
<tr>
<td style="border: 1px solid #000; padding: 8px;">会话层</td>
</tr>
<tr>
<td style="border: 1px solid #000; padding: 8px;">传输层</td>
<td style="border: 1px solid #000; padding: 8px;">传输层</td>
<td style="border: 1px solid #000; padding: 8px;">传输层</td>
</tr>
<tr>
<td style="border: 1px solid #000; padding: 8px;">网络层</td>
<td style="border: 1px solid #000; padding: 8px;">网络层</td>
<td style="border: 1px solid #000; padding: 8px;">网络层</td>
</tr>
<tr>
<td style="border: 1px solid #000; padding: 8px;">数据链路层</td>
<td style="border: 1px solid #000; padding: 8px;" rowspan="2">
网络接口层
</td>
<td style="border: 1px solid #000; padding: 8px;">数据链路层</td>
</tr>
<tr>
<td style="border: 1px solid #000; padding: 8px;">物理层</td>
<td style="border: 1px solid #000; padding: 8px;">物理层</td>
</tr>
</tbody>
</table>要点
text-align: center;使文字居中。border: 1px solid #000;给所有单元格添加黑色边框。padding: 8px;为所有单元格添加内边距，使内容更易读。width: 100%;设置表格宽度为 100%，以便在容器中占满可用空间。border-collapse: collapse;使表格边框合并，使其看起来更加紧凑。rowspan = ""和colspan = ""合并单元格。
效果展示
| 计算机网络分层模型 | ||
|---|---|---|
| OSI七层模型 | TCP/IP四层模型 | TCP/IP五层模型 |
| 应用层 | 应用层 | 应用层 |
| 表示层 | ||
| 会话层 | ||
| 传输层 | 传输层 | 传输层 |
| 网络层 | 网络层 | 网络层 |
| 数据链路层 | 网络接口层 | 数据链路层 |
| 物理层 | 物理层 | |
audio
源代码
html
<audio id="audio" controls preload="none">
<source id="mp3" src="path_to_your_audio_file.mp3" type="audio/mpeg" />
<source src="path_to_your_audio_file.ogg" type="audio/ogg" />
Your browser does not support the audio element.
</audio>要点
<audio>标签嵌入了一个音频文件，并为其提供了播放控件。id="audio"给<audio>标签分配了一个 ID，以便可以通过 JavaScript 访问。controls=""属性使浏览器显示播放控件（如播放、暂停和音量调节按钮）。preload="none"属性表示在页面加载时不要预加载音频文件，这可以减少页面加载时间。<source>标签指定音频文件的路径和格式。这里的id="mp3"给<source>标签分配了一个 ID， 但这个 ID 通常不是必需的，除非你需要通过 JavaScript 访问它。type="audio/mpeg"明确了音频文件的 MIME 类型，帮助浏览器正确解码和播放音频文件。