块级元素

yuhuo2022-04-01HtmlHtml

form

HTMLFormElement 类

<form>
    <fieldset>
        <legend>表单分组</legend>
        <label>输入:</label>
        <input />
    </fieldset>
</form>
表单分组

div

<div>普通块</div>
普通块

p

<p>段落</p>

段落

ol

HTMLOListElement 类

<ol>
    <li>有序列表</li>
    <li>有序列表</li>
</ol>
  1. 有序列表
  2. 有序列表

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>保留原  格      式</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>
联系信息

大标题

小标题
元素说明 article:文档 section:节 header:文档或节的头部 footer:文档或节的尾部 nav:导航 h1~h6:标题 hgroup:合并多个标题 details:详情区域 summary:详情区域标题 aside:附注栏 address:联系信息
尾部
Last Updated 2024/3/14 09:51:53