HTML中的块元素与行内元素
目录
HTML中的块元素与行内元素
1.块级标签
块级元素会独占一行，通常用于构建页面的结构。常见的块级元素包括：
<div>：通用的块级容器。没有任何语意。可以创建网页的不同部分，导航栏侧边栏等。
<body>
<div class="nav">
<a href="#">链接 1</a>
<a href="#">链接 2</a>
<a href="#">链接 3</a>
</div>
</body>若是想创建一个
初始带标签的话：可以直接：
#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>等 。