文章目录
- 五、HTML的元素类型
- 5.1 块级元素
- 5.2 行内元素
- 5.3 行内块元素
五、HTML的元素类型
在HTML中元素分为三类：块级元素、行内元素、行内块元素
5.1 块级元素
- 块级元素特点：
- 1）独占一行，自上而下排列
- 2）默认不设置宽度时，继承父元素的宽度（默认为父级宽度的100%）
- 3）可以定义自己的宽度和高度，以及盒模型中的任意属性（margin，padding，border）
- 4）块级元素可以作为一个容器容纳其他的任何元素
常见块元素有：p、ul、ol、li、dl、dt、dd、table、tr、td、form、h1、h2、h3、h4、h5、h6
5.2 行内元素
- 行内元素的特点：
- 1）不会独占一行，从左到右排列
- 2）里面的内容会把行内元素撑大，宽高由内容来决定
- 3）不能定义自己的宽度和高度，可以设置左右盒模型属性（margin、padding），不可以设置上下盒模型属性（margin、padding、line-height等）
- 4）行内元素只能嵌套行内元素，不能嵌套块元素
常见的行内元素有：a、span、strong、b、em、i、label
5.3 行内块元素
- 行内块元素的特点（vertical-align属性只针对这类型元素设置有效）：
- 1）即具有行内元素特点：不会独占一行，从左到右排列
- 2）又具有块元素的特点：可以定义宽高以及盒模型中的任意属性
常见的行内块元素有：img、input、textarea、select
【代码示例】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--css宽度写法,等到后面在学-->
<div style="width: 100px">你好</div>
<div style="width: 100px">我好</div>
<hr>
<!--行内元素没有宽高-->
<span style="width: 100px">aa</span>
<span style="width: 100px">bb</span>
<a href="https://www.jd.com" style="width: 100px">cc</a>
<hr>
<img src="img/1.png" alt="" style="width: 100px">
<input type="text" style="width: 100px">
</body>
</html>[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-e5T7yBMx-1686529248258)(…/…/00%25E3%2580%2590web%25E5%2589%258D%25E7%25AB%25AF%25E3%2580%2591/01%25E3%2580%2590HTML-01%25E3%2580%2591/media/33.png#from=url&id=PwVYj&originalType=binary&ratio=1&rotation=0&showTitle=false&status=done&style=none&title=)]
