05【HTML的元素类型】

文章目录

  • 五、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>Titletitle>
head>
<body>

<div style="width: 100px">你好div>
<div style="width: 100px">我好div>

<hr>

<span style="width: 100px">aaspan>
<span style="width: 100px">bbspan>
<a href="https://www.jd.com" style="width: 100px">cca>

<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=)]05【HTML的元素类型】_第1张图片

你可能感兴趣的:(#,【HTML5系列】,html,css,css3,html基础,标签)