Rumah > hujung hadapan web > html tutorial > html标签元素有哪些种类?html的常用标签元素的介绍

html标签元素有哪些种类?html的常用标签元素的介绍

青灯夜游
Lepaskan: 2018-10-23 15:02:42
asal
10402 orang telah melayarinya

本篇文章给大家带来的内容是介绍html标签元素的种类,让大家了解html中常用的标签元素有哪些?有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。

首先我们来了解一下html标签元素可以分成哪些类型?

HTML中标签元素一般会分成三种不同类型,分别为:块状元素,行内元素,行内块状元素。

下面我们来详细介绍一下这三种类型元素的特点以及用处,并且让大家了解常用的块状元素与行内元素有哪些?

块状元素

特点:

    1、独占一行,每一个块状元素都会从新的一行重新开始,从上到下排布

    2、可以直接控制宽度、高度以及盒子模型的相关css属性(元素的高度、宽度、行高以及顶和底边距都可设置)

    3、在不设置宽度的情况下,块级元素的宽度是它父级元素内容的宽度

    4、在不设置高度的情况下,块级元素的高度是它本身内容的高

因为它自身具有的这些特点,我们通常会使用块状元素来进行大布局(大结构)的搭建。

常用的块状元素:

1、普通元素

div(常用块状容器,也是css layout的主要标签)、p(段落)、hr(水平分隔线)、table( 表格)、form(交互表单)

2、标题元素:

h1(大标题)、h2(副标题)、h3(三级标题)、h4 (四级标题)、h5 (五级标题)、h6(六级标题)

3、列表元素

menu(菜单列表)、ol(有序列表)、ul(无序列表)、li(列表项)、dl(定义列表)、dt(定义术语)、dd(定义描述)

我们通过简单代码来看看这些块状元素

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>块状元素</title>

        <style>

            div{

                background-color: palegoldenrod;

            }

            p{

                background-color:paleturquoise ;

            }

            h4{

                background-color:papayawhip;

            }

            ul{

                background-color: peru;

            }

        </style>

    </head>

    <body>

        <div>div标签元素,占据一行</div>

        <p>p标签元素,占据一行</p>

        <h4>标题元素,占据一行</h4>

        <ul>

            <li>ul1 li 标签 元素</li>

            <li>ul1 li 标签 元素</li>

        </ul>

        <ul>

            <li>ul2 li 标签 元素</li>

            <li>ul2 li 标签 元素</li>

        </ul>

    </body>

</html>

Salin selepas log masuk

效果图:

1.jpg

行内元素

特点:

1、和其他内联元素从左到右在一行显示

2、不能直接控制宽度、高度以及盒子模型的相关css属性,但是直接设置内外边距的左右值是可以的

3、内联元素的宽高是由本身内容的大小决定(文字、图片等)

4、内联元素只能容纳文本或者其他内联元素(此处请注意,不要在内联元素中嵌套块级元素)

因为它自身具有的这些特点,我们通常会使用行内元素来进行文字、小图标(小结构)的搭建。

常用的行内元素:

1、普通元素标签

span(常用内联容器,定义文本内区块),a(锚点,链接),img(引入图片),br(强制换行),sub(下标),sup(上标)

2、文本文字修饰标签

b(加粗),strong(加粗强调),i(斜体),em(斜体强调),,big(大字体文本),small( 小字体文本),s(中划线(不推荐使用)),strike(中划线),del(文档中已被删除的文本),u(下划线)

3、表单内使用的标签元素

textarea(多行文本输入框),input(输入框),select(下拉列表),label input(元素定义标注(标记))

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>行内元素</title>

        <style>

            span{

                background-color: palegoldenrod;

            }

            p{

                background-color:paleturquoise ;

            }

        </style>

    </head>

    <body>

        <span>span标签元素1</span>

        <span>span标签元素2</span>

        <img src="1.png" width="100px" />

        <img src="1.png" width="100px" />

        <p>换一行看看文字效果,我是一段测试代码,<b>被b标签加粗</b>。我是一段测试代码,<i>被i标签变成斜体</i>。</p>

</html>

Salin selepas log masuk

效果图:

2.jpg

行内块状元素

特点:

   1、和其他元素都在一行上,不会自动换行,默认排列方式为从左到右;

   2、元素的高度、宽度、行高以及顶和底边距都可设置。

行内块状元素综合了行内元素和块状元素的特点,但是各有取舍。因此行内块状元素在日常的使用中,由于其特点,使用的次数也比较多,在很多方面都很有用。

总结:以上就是本篇文章所介绍的html标签元素的三个类型,分别为:块状元素,行内元素,行内块状元素;以及常用的块状元素与行内元素介绍。每种类型的标签都有每种的特点,大家可以自己动手尝试,看看不同标签的使用,加深理解,根据需要在不同的情况下使用不同的标签。希望能对大家的学习有所帮助,更多相关教程请访问: HTML视频教程Html5视频教程bootstrap视频教程

Atas ialah kandungan terperinci html标签元素有哪些种类?html的常用标签元素的介绍. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan