HTML&CSS基础-内联和块元素

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　作者：尹正杰

版权声明：原创作品，谢绝转载！否则将追究法律责任。

一.html源代码

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8" />

        <title>尹正杰的网页</title>

    </head>

    <body>

        <!--

            div就是一个块元素:

                所谓块元素就是独占一行的元素,无论它的内容有多少,它都会独占一行;

                div这个标签没有任何语义,就是一个纯粹的块元素，并且不会为它里面的元素设置任何的默认样式;

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

            其它常见的块元素:

                <p></p>:

                    段落标签。

                <h1></h1>~<h1></h6>

                    标题标签

        -->

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

            我的博客地址:https://www.cnblogs.com/yinzhengjie

        </div>

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

            我的博客地址:https://www.cnblogs.com/yinzhengjie

        </div>

        <div style="background-color: deeppink;">

            我的博客地址:https://www.cnblogs.com/yinzhengjie

        </div>

        <!--

            span是一个内联元素:

                所谓内联元素指的是只占自身大小的元素，不会占用一行。

                span没有任何语义，span标签专门用来选中文字，然后为文字来设置样式。

            常见的内联元素:

                <a></a>

                <img src=""/>

                <iframe src="" width="" height=""></iframe>

        -->

        <span>我是一个span</span>

        <span>我是一个span</span>

        <!--

             块元素和内联元素使用原则:

                 块元素主要要用来做页面的布局，内联元素主要用来选中文本设置样式;

                 一般情况下只使用块元素去包含内联元素，而不会使用内联元素去包含一个块元素;

                 <a></a>元素可以包含任意元素，除了它本身，换句话说就是不能嵌套使用;

                 <p></p>元素不可用包含任意其它的块元素;

            压根的来说，其实在HTML5中已经把块元素和内联元素的概念去除了:

                在HTML5有一个非常复杂的内容模型来解释块元素和内联元素，它的内容模型分了8~9种，把标签分类搞得非常复杂，为了节省我们的脑细胞，我建议大家没有必要去记那么多种，还是按照之前的规则去记忆块级标签和内联标签。

        -->

    </body>

</html>

二.浏览器打开以上代码渲染结果

HTML&CSS基础-内联和块元素的更多相关文章

  1. HTML&CSS基础-内联样式和内部样式表

    HTML&CSS基础-内联样式和内部样式表 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.CSS(Cascading Style Sheets)简介 层叠样式表(Cas ...

  2. HTML&CSS基础-内联框架

    HTML&CSS基础-内联框架 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.如下图所示,在同一个路径中有两个网页 <!DOCTYPE html> < ...

  3. css 内联与块

    内联元素可以理解为不能直接设置宽度和高度元素,比如span,你为他设置宽度和高度没有效果,除非你把它设置成块级元素. 如下面的代码把display:block;属性值去掉的话,宽度和高度都不会起作用了 ...

  4. CSS3与页面布局学习总结（二）——Box Model、边距折叠、内联与块标签、CSSReset

    一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border ...

  5. Box Model,边距折叠，内联和块标签，CSSReset

    一.盒子模型(Box Model) 1.1.宽度测试 1.2.溢出测试 1.3.box-sizing属性 1.4.利用CSS画图 二.边距折叠 2.1.概要 2.2.垂直方向外边距合并计算 三.内联与 ...

  6. CSS3与页面布局学习笔记（二）——盒子模型(Box Model)、边距折叠、内联与块标签、CSSReset

    一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border ...

  7. CSS3与页面布局学习总结——Box Model、边距折叠、内联与块标签、CSSReset

    目录 一.盒子模型(Box Model) 1.1.宽度测试 1.2.溢出测试 1.3.box-sizing属性 1.4.利用CSS画图 二.边距折叠 2.1.概要 2.2.垂直方向外边距合并计算 三. ...

  8. HTML基础 内联样式改进 三毛语录

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  9. 内联(行级)元素不能设置margin-top

    内联(行级)元素 不能设置宽高,但padding属性可以设置,需要注意的是行级元素不能设置margin-top和margin-bottom属性,但可以设置margin-left和margin-righ ...

随机推荐

  1. Python中解决递归限制的问题

    在做某些算法时,使用递归会出现类似下面的报错: RuntimeError: maximum recursion depth exceeded python默认的递归深度是很有限的,大概是900多的样子 ...

  2. c-lodop回调函数简短问答及相关博文

    回调函数相关博文:C-Lodop回调函数的触发.LODOP.FORMAT格式转换[回调和直接返回值].Lodop导出excel及提示成功[回调和直接返回值].c-lodop获取任务页数-回调里给全局变 ...

  3. 【视频开发】RTSP SERVER（基于live555）详细设计

    /* *本文基于LIVE555的嵌入式的RTSP流媒体服务器一个设计文档,个中细节现剖于此,有需者可参考指正,同时也方便后期自己查阅.(本版本是基于2011年的live555) 作者:llf_17@q ...

  4. K8S+GitLab+.net core-自动化分布式部署-1

    K8S+GitLab-自动化分布式部署ASP.NET Core(一) 部署环境 一.部署流程介绍 开发人员通过Git上传asp.net core 项目到Gilab,并编写好.gitlab-ci.yml ...

  5. Influx Sql系列教程九：query数据查询基本篇二

    前面一篇介绍了influxdb中基本的查询操作,在结尾处提到了如果我们希望对查询的结果进行分组,排序,分页时,应该怎么操作,接下来我们看一下上面几个场景的支持 在开始本文之前,建议先阅读上篇博文: 1 ...

  6. Python Tkinter 窗口创建与布局

    做界面,首先需要创建一个窗口,Python Tkinter创建窗口很简单:(注意,Tkinter的包名因Python的版本不同存在差异,有两种:Tkinter和tkinter,读者若发现程序不能运行, ...

  7. java-统计一段句子中各单词出现的次数

    问题:统计一段句子中各单词出现的次数. 思路: 1.使用split方法将文章进行分割,我们这里以空格.逗号和句点为分隔符,然后存到一个字符串数组中. 2.创建一个hashMap集合,key是字符串类型 ...

  8. 「中山纪中集训省选组D1T1」最大收益 贪心

    题目描述 给出\(N\)件单位时间任务,对于第\(i\)件任务,如果要完成该任务,需要占用\([S_i, T_i]\)间的某个时刻,且完成后会有\(V_i\)的收益.求最大收益. 澄清:一个时刻只能做 ...

  9. mysql系统信息函数

    1.VERSION() 返回数据库的版本号 SELECT VERSION() -- 5.0.67-community-nt2.CONNECTION_ID() 返回服务器的连接数SELECT CONNE ...

  10. Java开发笔记（一百零五）几种定时器线程池

    前面介绍了普通线程池的用法,就大多数任务而言,它们对具体的执行时机并无特殊要求,最多是希望早点跑完早点出结果.不过对于需要定时执行的任务来说,它们要求在特定的时间点运行,并且往往不止运行一次,还要周期 ...