HTML中的块元素与行内元素

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>