html中块元素和内联元素的简单介绍(代码解析)


本文摘自PHP中文网,作者不言,侵删。

本篇文章给大家带来的内容是关于html中块元素和内联元素的简单介绍(代码解析),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

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

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>demo</title>

        <!--

            <style type="text/css">

            h1{

                color: red;

            }

            </style>

        -->

        <link rel="stylesheet" type="text/css" href="css/style.css"/>

    </head>

    <body>

        <h1>这是一个漂亮的网页</h1>

         

         

        <!--

            块元素,会独占一整行;

                div,p,h1,h2,h3,h4,h5,h6 都是块元素;

                div标签没有任何语义;是一个纯粹的块,不会有任何默认样式;

                div元素主要对我们的页面进行布局;

                 

                ps:p元素不能包含任何块元素;

        -->

        <div style="background-color: red; width: 200px;">

            我是一个快元素

        </div>

         

        <div style="background-color: yellow;width: 400px;">

            我是一个快元素

        </div>

         

        <hr />

         

        <!--

            内联元素:只会占用自身的大小,一行占满后自动换行;、

            常见的内联元素:

            a,img,iframe,span

             

            span也没有任何语义,是专门用来选中文字设置样式;

            让span圈一段字,为这段文件进行设置样式;

             

            一般会在块元素中放一个span元素;而反过来不行;

            ps:a元素可以包含任意元素;除了a本事;

        -->

        <span>

            I am is a spane

        </span>

        <span>

            I am is a spane

        </span>

    </body>

</html>

相关推荐:

html元素类型 块级元素、内联元素(又叫行内元素)和内联块级元素。_html/css_WEB-ITnose

HTML__内联元素与块元素

以上就是html中块元素和内联元素的简单介绍(代码解析)的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

css中什么是块元素

浅谈块状元素和内联元素之间的区别

css行元素跟块元素有哪些相同点

html中什么是内联元素

html中内联元素有哪些

如何在两个内联元素之间添加换行符

css哪些是常用块元素

css中的块级元素和行内元素(内联元素)有哪些

css中的内联元素是什么

span是块元素吗?

更多相关阅读请进入《内联元素》频道 >>




JavaScript 从入门到项目实践
书籍

JavaScript 从入门到项目实践

清华大学出版社

本书采取“基础知识→核心应用→核心技术→高级应用→行业应用→项目实践”的结构和“由浅入深,由深到精”的学习模式进行讲解。全书共35章,不仅介绍了HTML、CSS、对象、函数、事件等JavaScript语言的基础知识,而且深入介绍了jQuery、客户端、服务器端、数据存储等核心技术。



打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...