HTML元素之行内块元素（壹）_行内块1元素’-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_52486516/article/details/109692316

本文详细介绍了HTML中的行内块元素特性，包括设置宽高、换行解析、对齐方式等，并列举了img标签的三种路径用法。此外，还讲解了不同类型的input输入控件，如文本框、密码框、单选框、复选框、文件上传、提交和重置按钮，以及textarea多行文本框的使用方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、行内块元素的特点：
a.设置宽高有效；
b.同类元素排列一行，排不下时，自动换行；
c.自动解析代码换行（代码换行后，网页中会以半个字符的间隙显示出来，代表代码换行）；
d.设置margin、padding值有效；
e.与同类元素或行内元素排一行时，会以底边对齐的方式出现，设置vertical-align（top 顶、middle 中、bottom 底）的值会改变对齐方式；
二、行内块元素：
1.img <img src="路径" alt="图片不显示时的提示说明"/>
三类路径：
a.同一文件夹，图片1.jpg与页面在同级目录

<img src="1.jpg" alt="图片说明"/>

b.同一文件夹，图片2.jpg在img文件中，img与网页在同级目录

<img src="img/2.png" alt="图片说明"/>

c.图片3.jpg与html文件夹在同一级目录，网页在html文件中
(从html文件夹出来，找到图片)

<img src="../3.jpg" alt="图片说明"/>

2.input
<input type="类型" name="名称" placeholder="提示信息" value="初始值"/>
a.单行文本框

<input type="text" name="" placeholder="提示信息"/>

b.密码框

<input type="password" name="" placeholder=""/>

c.单选框

<input type="radio" name="" checked/><!--同组的单选框，name的值必须是同一个，才可以单选，例如：性别，可以设置name="sex"，checked 表示被选中-->

	<p>性别</p>
	<input type="radio" name="sex" value="boy" />男
	<input type="radio" name="sex" value="gril" checked/>女

在这里插入图片描述

d.复选框

<input type="checkbox" name="" checked/>

e.上传文件

<input type="file" name=""/>

f.提交按钮

<input type="submit" name="按钮名称" value="按钮显示文本"/>

g.重置按钮

<input type="reset" name="按钮名称" value="按钮显示文本"/>

h.普通按钮

<input type="button" name="按钮名称" value="按钮显示文本"/>

3.多行文本框<textarea></textarea>开始标签与结束标签不能换行

<textarea type="text" name="" rows="行数" cols="宽度由字符数决定"></textarea>

在这里插入图片描述

4.按钮<button></button>

<button type="button" name=""></button><!--type的值可以为button/submit/reset-->

5.下拉框<select></select>

<select name="" size="" multiple="multiple"><!--size的值默认为1，必须大于等于1，表示可选中的值，multiple="multiple" 定义列表中的选项可多选，没有只能选一个-->
	<option>选项一</option>
	<option selected>选项二</option><!--selected与checked类似，表示被选中-->
	<option>选项三</option>
</select>