块元素和行内元素

HTML元素根据表现形式,可以分为2类:

  • (1)块元素(block);
  • (2)行内元素(inline);

任何HTML元素都属于这两类中的其中一类。

2、块元素特点:

  • (1)独占一行,排斥其他元素跟其位于同一行,包括块元素和行内元素;
  • (2)块元素内部可以容纳其他块元素或行元素;

3、行内元素特点:

  • (1)可以与其他行内元素位于同一行;
  • (2)行内内部可以容纳其他行内元素,但不可以容纳块元素,不然会出现无法预知的效果。

在这里,所谓的“独占一行”并不是在代码中独占一行,而是在浏览器显示效果中独占一行。

表1 常见块元素
块元素 说明
div div层
h1~h6 1到6级标题
p 段落,会自动在其前后创建一些空白
hr 分割线
ol 有序列表
ul 无序列表
表1 常见行内元素
行内元素 说明
strong 加粗强调
em 斜体强调
s 删除线
u 下划线
a 超链接
span 常用行级,可定义文档中的行内元素
img 图片
input 表单

HTML CSS基础(二)的更多相关文章

  1. css基础二

    1,文本 文本颜色: <style> body {color:red;} /*为body的所有字体设置字体颜色为红色*/ h1 {color:#00ff00;} /*为h1元素设置字体颜色 ...

  2. css基础总结一

    最近在弄一个简单管理系统的前端,所以打算将做项目的一些个人感想以及总结简单罗列下,当然,主要针对前端的基础部分以及一些常用的前端个人简单技巧总结.主要分为js部分和css部分,下面是css的基础部分总 ...

  3. 前端总结·基础篇·CSS(二)视觉

    前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 前端总结·基础篇·CSS(四)兼容 目录 一.动画(animation)(IE ...

  4. CSS 基础(二)

    本节内容: 文本 字体 链接 列表 表格 一.文本 文本颜色 颜色属性被用来设置文字的颜色. 三种方式: 十六进制值 - 如: #FF0000 一个RGB值 - 如: RGB(255,0,0) 颜色的 ...

  5. 两天学会css基础(二)

    接上一篇博客,还有css中的两个重要知识点没有说到,就是元素的浮动与定位. 第三部分:元素的浮动与清除 这部分的内容之前的博客已总结过.请查看css中的浮动与三种清除浮动的方法这篇文章. 浮动在网页中 ...

  6. 妙味课堂——HTML+CSS基础笔记

    妙味课堂的课程讲得非常的清楚,受益匪浅.先把HTML和CSS基础课程部分视频的学习笔记记录如下: padding #PS基础 ##前端需要的PS技能 - PS技能(前端需要):切图.修图.测量 - P ...

  7. Bootstrap <基础二十九>面板(Panels)

    Bootstrap 面板(Panels).面板组件用于把 DOM 组件插入到一个盒子中.创建一个基本的面板,只需要向 <div> 元素添加 class .panel 和 class .pa ...

  8. Bootstrap <基础二十八>列表组

    列表组.列表组件用于以列表形式呈现复杂的和自定义的内容.创建一个基本的列表组的步骤如下: 向元素 <ul> 添加 class .list-group. 向 <li> 添加 cl ...

  9. Bootstrap<基础二十七> 多媒体对象(Media Object)

    Bootstrap 中的多媒体对象(Media Object).这些抽象的对象样式用于创建各种类型的组件(比如:博客评论),我们可以在组件中使用图文混排,图像可以左对齐或者右对齐.媒体对象可以用更少的 ...

  10. Bootstrap <基础二十六>进度条

    Bootstrap 进度条.在本教程中,你将看到如何使用 Bootstrap 创建加载.重定向或动作状态的进度条. Bootstrap 进度条使用 CSS3 过渡和动画来获得该效果.Internet ...

随机推荐

  1. EDA 事件驱动框架

    事件代表过去发生的事件,事件既是技术架构概念,也是业务概念.以事件为驱动的编程模型称为事件驱动架构EDA. EDA是一种以事件为媒介,实现组件或服务之间最大松耦合的方式.传统面向接口编程是以接口为媒介 ...

  2. Chapter 1 First Sight——16

    I drove around the school, following the line of traffic. 我开车绕学校随着交通线. 我开车穿过校园,紧跟着大部队. I was glad to ...

  3. 设置自己Eclipse代码风格(内部)

    http://www.cnblogs.com/farseer810/p/4391318.html 经过这几次的代码提交,发现很多人的代码风格不够规范.个人认为很有必要强制性规定一下代码的规范. 整体来 ...

  4. java开发第四天——莫名其妙的一天

    搞了一天的ACM,欲哭无泪,消化的不好打了一天的嗝,然后在机房睡了一个下午,感觉还真的有点对不起队友的说.别的借口我也不找了,确实是自己不努力,时至今日,一切都是我咎由自取.等这次项目一结束我就全身心 ...

  5. linux文件分割(将大的日志文件分割成小的)【转载】

    linux文件分割(将大的日志文件分割成小的)linux下文件分割可以通过split命令来实现,可以指定按行数分割和安大小分割两种模式.Linux下文件合并可以通过cat命令来实现,非常简单. 在Li ...

  6. Genymotion开启就全部白屏解决方法

    Genymotion开启就整个界面全部白屏,包括菜单栏也白屏,解决方法: 很可能是显卡驱动有问题,用驱动人生或者驱动精灵更新显卡驱动就可以了. 目前开发者好用的模拟器有: 1.Genymotion 2 ...

  7. Eclipse配置

    下载地址:http://www.eclipse.org/downloads/ tomcat plugin:http://www.eclipsetotale.com/tomcatPlugin.html# ...

  8. Entity Framework 学习初级篇5--ObjectQuery查询及方法

    ObjectQuery 类支持对 实体数据模型 (EDM) 执行 LINQ to Entities 和 Entity SQL 查询.ObjectQuery 还实现了一组查询生成器方法,这些方法可用于按 ...

  9. Redis 密码设置和登录

    Redis 一般在生产环境中,大家都不使用密码,为了确保安全,都是在防火墙上对redis端口做IP白名单的 我是个技术控,我非得了解一下密码这回事[虽然以后不会用到,呵呵] 好了,废话不多说,简单介绍 ...

  10. android studio没有浮现函数用法和属性说明?

    最近转用android studio,在使用eclipse和android studio时原本在鼠标停留处或智能提示能浮现文档相关内容,但我的是一直显示Fetching Documentation…… ...