HTML行为元素和块级元素及语义化

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

块级元素

div - dl - form 交互表单
h1 - h6 标题
hr 水平分割线
p 段落
ul 非排序列表
table 表格

行内元素

a 链接
br 换行
em 强调
i 斜体
img 图片
input 输入框
label 表格标签
select 项目选择
span 文本内区块
label 标签
strong 粗体强调
textarea 多行

换行是块级元素不换行的是行内元素

<!DOCTYPE html>

<!--当前文档为html5-->

<html>

<head>

    <!--设置文档编码-->

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <meta charset="utf-8" />

    <!--设置关键字和描述方便SEO-->

    <meta name="keywords" content="关键字">

    <meta name="description" content="网站描述">

    <!--设置移动端开发缩放比例-->

    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scalable=0;">

</head>

<body>

    <div>div</div>

    <div>

        <p>P</p>

    </div>

    <dl>

        <dt>dt</dt>

        <dd>dd</dd>

    </dl>

    <h1>标题h1</h1>

    <h2>标题h2</h2>

    <h3>标题h3</h3>

    <h4>标题h4</h4>

    <h5>标题h5</h5>

    <hr/>

    <!-- 无序列表 -->

    <ul>

        <li>li 1</li>

        <li>li 2</li>

        <li>li 3</li>

        <li>li 4</li>

    </ul>

    <!-- 有序列表 -->

    <ol>

        <li>li 1</li>

        <li>li 2</li>

        <li>li 3</li>

        <li>li 4</li>

    </ol>

    <b>b是加粗</b>

    <u>u是下滑线</u>

    <i>i是斜体</i>

    <s>s是删除</s>

    <strong>strongs是非常强壮</strong>

    <img src="" alt="图片显示失败时显示的文字" title="鼠标在图片上时的提示" width="100" height="100">

    <a href="https://www.baidu.com/" target="_blank">新的页面打开</a>

    <a href="https://www.baidu.com/" target="_self">在本身打开</a>

    <table border="1">

        <thead>

            <tr>

                <th>

                    头一

                </th>

                <th>

                    头二

                </th>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td colspan="2">

                    12

                </td>

            </tr>

            <tr>

                <td rowspan="2">

                    35

                </td>

                <td>

                    4

                </td>

            </tr>

            <tr>

                <td>

                    6

                </td>

            </tr>

        </tbody>

    </table>

    <iframe src="https://www.baidu.com/" width="200" height="200"></iframe>

</body>

</html>