块级元素
yuhuo2022-04-01HtmlHtml
form
<form>
<fieldset>
<legend>表单分组</legend>
<label>输入:</label>
<input />
</fieldset>
</form>
div
<div>普通块</div>
普通块
p
<p>段落</p>
段落
ol
<ol>
<li>有序列表</li>
<li>有序列表</li>
</ol>
- 有序列表
- 有序列表
ul
<ul>
<li>无序列表</li>
<li>无序列表</li>
</ul>
- 无序列表
- 无序列表
dl
<dl>
<dt>说明列表</dt>
<dd>说明内容</dd>
<dd>说明内容</dd>
</dl>
- 说明列表
- 说明内容
- 说明内容
table
<table>
<caption>表格标题</caption>
<colgroup span="1" style="background: gray;"></colgroup>
<colgroup>
<col span="1" style="background: wheat;"/>
<col span="1" style="background: pink;"/>
</colgroup>
<thead>
<tr>
<th colspan="2">表头1</th>
<th>表头3</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">内容1</td>
<td>内容2</td>
<td>内容3</td>
</tr>
<tr>
<td>内容2</td>
<td>内容3</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>表脚1</td>
<td>表脚2</td>
<td>表脚3</td>
</tr>
</tfoot>
</table>
表头1 | 表头3 | |
---|---|---|
内容1 | 内容2 | 内容3 |
内容2 | 内容3 | |
表脚1 | 表脚2 | 表脚3 |
hr
分割<hr />线
分割
线
figure
<figure>
<figcaption>插图标题</figcaption>
<img src="https://yuhuo520.gitee.io/vuepress/img/favicon.jpg">
</figure>

<pre>保留原 格 式</pre>
blockquote
<blockquote>引用内容</blockquote>
引用内容
article
<article>
<header>
<nav>导航区域</nav>
</header>
<address>联系信息</address>
<aside>附注栏</aside>
<section>
<hgroup>
<h1>大标题</h1>
<h6>小标题</h6>
</hgroup>
<details open>
<summary>元素说明</summary>
article:文档
section:节
header:文档或节的头部
footer:文档或节的尾部
nav:导航
h1~h6:标题
hgroup:合并多个标题
details:详情区域
summary:详情区域标题
aside:附注栏
address:联系信息
</details>
</section>
<footer>尾部</footer>
</article>