HTML基础（块级元素、内联元素、表单元素）_html 按钮可以包含块元素吗-CSDN博客

本文链接：https://blog.csdn.net/qq_42683732/article/details/138382602

块级元素和内联元素

大多数 HTML 元素被定义为块级元素或内联元素。

块级元素：块级元素在浏览器显示时，通常会以新行来开始（和结束）。也就是每个块级元素会独占一行以上。可以包含其他块级元素和行内元素。例如段落、标题、列表、表格等。

内联元素：内联元素在显示时通常不会以新行开始。也就是内联元素不会独占一行，相邻的内联元素会排在同一行。其宽度随内容的变化而变化。它们可以在文本中插入小的元素，行内元素不能包含块级元素，但可以包含其他行内元素。例如超链接、强调文本等。

比如

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>demo</title>
</head>
<body>  
    <div>这是一个块级元素，它会独占一行。</div>
    <p>这也是一个块级元素，通常用于段落。</p>
    <a href="https://blog.csdn.net/qq_42683732?spm=1000.2115.3001.5343">这是一个内联元素，他与其他内联元素共用一行。</a>
    <span>这是第二个内联元素</span>
</body>
</html>

接下来详细介绍两个常用的块级元素和内联元素。

<div> 元素

<div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。

<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。

如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。<div> 元素的另一个常见的用途是页面文档布局。

<span> 元素

<span> 元素是内联元素，可用作文本的容器。

<span> 元素也没有特定的含义。

当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。

下面是一个普通网页结构的样式

    <div class="nav">
        <a href="#">链接 1</a>
        <a href="#">链接 2</a>
        <a href="#">链接 3</a>
        <a href="#">链接 4</a>
    </div>
    <div class="content">
        <h1>文章标题</h1>
        <p>文章内容</p>
        <p>文章内容</p>
        <p>文章内容</p>
        <p>文章内容</p>
        <span>span标签1</span>
        <span>span标签1</span>
        <span>span标签1</span>
        <span>span标签1</span>
        <hr>
        <span>链接点击这里<a href="#">链接</a><span>
    </div>

介绍两个标签，换行和分割符上图用到了分割符

<br> 标签插入单行换行符。

<br> 标签对于写地址或诗歌非常有用。

<br> 标签是空标签（意味着它没有结束标签，因此这是错误的：<br></br>）。在 XHTML 中，把结束标签放在开始标签中，也就是 <br />。

请注意，<br> 标签只是简单地开始新的一行，而当浏览器遇到 <p> 标签时，通常会在相邻的段落之间插入一些垂直的间距。

注意：请使用 <br> 标签来插入换行符，而不是用它来增加段落之间的空白。

<hr> 标签定义 HTML 页面中的主题分隔（例如，话题的转变）。

<hr> 元素通常显示为水平线，用于在 HTML 页面中分隔内容，或定义内容上的变化。

表单<form> 元素

HTML 表单用于收集用户的输入信息。

HTML 表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。

HTML 表单通常包含各种输入字段、复选框、单选按钮、下拉列表等元素。

以下是一个简单的HTML表单的例子:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>demo</title>
</head>
<body>  
    <form action="#" method="post">
        <!--文本输入框-->
        <label for="name">用户名：</label>
        <input type="text" id="name" placeholder="请输入用户名">
        <br><br>
        <label for="pwd">密码：</label>
        <input type="password" id="pwd" placeholder="请输入密码">
        <br><br>
        <!--单选按钮-->
        <label>性别: </label>
        <input type="radio" name="gender">男
        <input type="radio" name="gender">女
        <input type="radio" name="gender">其他
        <br><br>
        <!--多选按钮-->
        <label>爱好：</label>
        <input type="checkbox",name="hobby">唱
        <input type="checkbox",name="hobby">跳
        <input type="checkbox",name="hobby">rap
        <input type="checkbox",name="hobby">篮球
        <br><br>
        <!-- 下拉列表 -->
        <label for="country">国家:</label>
        <select id="country" name="country">
            <option value="cn">CN</option>
            <option value="usa">USA</option>
            <option value="uk">UK</option>
        </select>
        <!--提交按钮-->
        <input type="submit" value="提交">
    </form>
</body>
</html>

常用的表单元素

<form> 元素用于创建表单，action 属性定义了表单数据提交的目标 URL，method 属性定义了提交数据的 HTTP 方法（这里使用的是 "post"）。
<input> 元素是最常用的表单元素之一，它可以创建文本输入框、密码框、单选按钮、复选框等。type 属性定义了输入框的类型，id 属性用于关联 <label> 元素，name 属性用于标识表单字段。
<select> 元素用于创建下拉列表，而 <option> 元素用于定义下拉列表中的选项。

表单提交方式的区别

post：指的是 HTTP POST 方法，表单数据会包含在表单体内然后发送给服务器，用于提交敏感数据，如用户名与密码等。
get：默认值，指的是 HTTP GET 方法，表单数据会附加在 action 属性的 URL 中，并以 ?作为分隔符，一般用于不敏感信息，如分页等。例如：https://www.runoob.com/?page=1，这里的 page=1 就是 get 方法提交的数据。