当前位置：首页 > article >正文

HTML中的块元素与行内元素

article 2025/3/12 23:32:56

1.块级标签

块级元素会独占一行，通常用于构建页面的结构。常见的块级元素包括：

<div>：通用的块级容器。没有任何语意。可以创建网页的不同部分，导航栏侧边栏等。

<body>
    <div class="nav">
        <a href="#">链接 1</a>
        <a href="#">链接 2</a>
        <a href="#">链接 3</a>
    </div>
</body>

若是想创建一个<div>初始带标签的话：可以直接：#nav 或者 div.nav 或者 div#nav

创建第二个div标签，第一个是导航栏，第二个就是主要内容了 .content

<div class="content">
    <h1>文章标题</h1>
    <p>文章内容</p>
    <p>文章内容</p>
    <p>文章内容</p>
</div>

<p>：段落。
<h1> 到 <h6>：标题。
<ul>：无序列表。
<ol>：有序列表。
<li>：列表项。
<table>：表格。
<form>：表单。
<header>：页眉。
<footer>：页脚。
<section>：页面的一部分。
<article>：文章内容。
<aside>：侧边栏。
<nav>：导航栏。
<main>：页面主要内容。
<blockquote>：引用块。
<hr>：水平分割线。
<pre>：预格式化文本。
1. 行内元素
行内元素不会独占一行，它们会与其他行内元素在同一行显示。常见的行内元素包括：
<span>：用于对文本的一部分进行样式化或操作。包装起来，以便使用gss或者js行为。

<span>这是第一个span标签</span>
<span>这是第二个span标签</span>
<span>这是第三个span标签</span>
<span>这是第四个span标签</span>
<hr>
<span>链接点击这里<a href="#">链接</a></span>

<a>：超链接。
<strong>：加粗文本，表示重要性。
<em>：斜体文本，表示强调。
<img>：插入图片。
<input>：输入框。
<label>：表单标签。
<button>：按钮。
<br>：换行符。
<i>：斜体文本。
<b>：加粗文本。
<small>：小号文本。
<sup>：上标文本。
<sub>：下标文本。
<code>：代码片段。
<time>：表示时间或日期。
3. 表单元素（Form Elements）

表单用于收集用户输入。常见的表单元素包括：
<form>：表单容器，用于包裹所有表单元素。
<input>：输入框，类型包括：
- text：文本输入。
- password：密码输入。
- email：电子邮件输入。
- number：数字输入。
- date：日期输入。
- checkbox：复选框。
- radio：单选按钮。
- submit：提交按钮。
- reset：重置按钮。
- file：文件上传。

最常用的就是type属性：

<from>
    <label for="username">用户名</label>      //这是在文本框前面显示要填写的信息
    <input type="text" id="username" placeholder="请输入用户名"><br><br>
    <label for="pwd">密码： </label>     //在文本框前面显示输入的是密码
    <input type="password" id="pwd" placeholder="请输入内容">

//也可以用单选框：rasio

    <label for="">性别</label>
    <input type="rasio" name="gender"> 男     //name属性设置的单选
    <input type="rasio" name="gender"> 女
    <input type="rasio" name="gender"> 其他<br><br>

//可以设置多选属性：chackbook

    <label> 爱好：</label>
    <input type="checkbox" name="hobby">唱歌
    <input type="checkbox" name="hobby">跳舞
    <input type="checkbox" name="hobby">rap
    <input type="checkbox" name="hobby">打篮球

//显示提交

    <input type="submit" value="上传">
</from>

以上提交的位置：from标签有很多属性，自带的一个action属性，表示提交标签的时候向何处发送数据所以action的属性值也就是一个URL 但是，需要后端给我们提供API。所以可以直接用#来表示不跳转，不想提交的化也可以设置成上传。

运行 HTML

总结

示例代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>表单示例</title>
</head>
<body>
    <h1>注册表单</h1>
    <form action="/submit" method="post">
        <div>
            <label for="username">用户名:</label>
            <input type="text" id="username" name="username" required>
        </div>
        <div>
            <label for="password">密码:</label>
            <input type="password" id="password" name="password" required>
        </div>
        <div>
            <label for="email">电子邮件:</label>
            <input type="email" id="email" name="email" required>
        </div>
        <div>
            <label for="gender">性别:</label>
            <input type="radio" id="male" name="gender" value="male">
            <label for="male">男</label>
            <input type="radio" id="female" name="gender" value="female">
            <label for="female">女</label>
        </div>
        <div>
            <label for="country">国家:</label>
            <select id="country" name="country">
                <option value="china">中国</option>
                <option value="usa">美国</option>
                <option value="uk">英国</option>
            </select>
        </div>
        <div>
            <label for="bio">个人简介:</label>
            <textarea id="bio" name="bio" rows="4" cols="50"></textarea>
        </div>
        <div>
            <button type="submit">提交</button>
            <button type="reset">重置</button>
        </div>
    </form>
</body>
</html>