HTML中的块元素与行内元素

老婆出轨 · 2025-3-13 17:13:12

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>

复制代码

<textarea>：多行文本输入框。
<select>：下拉选择框。
<option>：下拉选择框的选项。
<label>：表单标签，用于描述输入字段。
<button>：按钮，可以用于提交表单或触发其他操纵。
<fieldset>：用于将表单中的相关元素分组。
<legend>：用于描述 <fieldset> 的内容。
<datalist>：为输入框提供预定义的选项列表。
<output>：用于表现盘算结果或脚本输出。
行内元素：不会独占一行，通常用于包裹文本或其他行内元素。
块级元素：独占一行，通常用于构建页面布局。
表单元素：用于网络用户输入，常见的表单元素包括 <input>、<textarea>、<select> 等。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

		自动登录	找回密码
密码			立即注册

HTML中的块元素与行内元素

0 个回复

快速回复

楼主热帖

标签云

浏览过的版块