Home > Article > Web Front-end > Summary of HTML block-level tags (short article)

Summary of HTML block-level tags (short article)

黄舟Original: 2017-02-20 13:38:061622browse

Block-level elements, simply put, are elements that occupy their own line. Its features:

① Always start on a new line;

② Height, line height, margins and padding can all be controlled;

③ The width defaults to 100% of its container unless a width is specified.

④It can accommodate inline elements and other block elements

The summary code is as follows:

<!doctype html>  

    <html>  

    <head>  

        <meta charset="UTF-8">  

        <title>Document</title>  

    </head>  

    <body>  

        <!-- 块状元素 独占一行 -->  

        <!-- p无语义,称它为盒子 -->  

        <p>盒子</p>  

        <!-- h1-h6语义 定义标题 -->  

        <h1>标题1</h1>  

        <h2>标题2</h2>  

        <h6>标题3</h6>  

        <!-- p 语义 段落标签 写文字-->  

        <p>文章</p>  

        <!-- 列表多数用来存一系列的相似的数据 -->  

        <!-- 有序列表 -->  

        <ol>  

            <li>导航1</li>  

            <li>导航2</li>  

            <li>导航3</li>  

        </ol>  

        <!-- 无序列表 -->  

        <ul>  

            <li>导航1</li>  

            <li>导航2</li>  

            <li>导航3</li>  

        </ul>  

        <!-- 定义列表 解释某个名词 -->  

        <dl>  

            <dt>名词</dt>  

            <dd>解释名词的位置</dd>  

        </dl>  

        <!-- 表格 渲染性能不好 少用 -->  

        <table>  

            <caption>表格头部</caption>  

            <!-- tr是行 -->  

            <tr>  

                <!-- th表头 -->  

                <th>星期一</th>  

                <th>星期二</th>  

            </tr>  

            <tr>  

                <!-- td单元格 -->  

                <td>上课</td>  

                <td>上课</td>  

            </tr>  

        </table>  

    </body>  

    </html>

The above is a summary of HTML block-level tags introduced by the editor (small article). For more related content, please pay attention to the PHP Chinese website (www.php.cn)!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：HTML5 drag and drop function implementation codeNext article：HTML5 drag and drop function implementation code

See more

Summary of HTML block-level tags (short article)

Related articles