HTML（四）：行级标签和块级标签

一、行级标签

行级标签又称为内联标签，行级标签不会单独占据一行，设置宽高无效，行内内部可以容纳其他行内元素，但不可以容纳块元素，不然会出现无法预知的效果。

常见行级标签：

span、strong、em、b、i、input、a、img、textarea。

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>行级标签</title>
</head>
<body>
    <!--行级（内联）标签-->
    <span>我是span</span>
    <i>我是i</i>
    <em style="border: 1px solid #f00;">我是em1</em>
    <!--设置宽度对我无效-->
    <em style="border: 1px solid #f00;width: 200px;">我是em2</em>
    <b>我是b</b>
    <strong>我是strong</strong>
    <a>我是a</a>
    <input type="text">
    <textarea>我是textarea</textarea>
</body>
</html>

结果：

二、块级标签

块级标签单独占据一行，可以设置宽高，块元素内部可以容纳其他块元素或行元素。

常见块级标签：

p、div、ul、ol、dl、li、dd、dt、h1-h6、form、hr、br

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>块级标签</title>
</head>
<body>
        <!--块级标签-->
        <div>我是div</div>
        <!--没有设置宽度时，p标签单独占一行-->
        <p style="border: 1px solid #f00;">我是段落1</p>
        <!--可以设置宽度-->
        <p style="border: 1px solid #f00;width: 200px;">我是段落2</p>
        <h1>我是标题</h1>
</body>
</html>