block(块)元素的特点: ①总是在新行上开始; ②高度,行高以及外边距和内边距都可控制; ③宽度缺省是它的容器的100%,除非设定一个宽度。 ④它可以容纳内联元素和其他块元素 inline元素的特点: ①和其他元素都在一行上; ②高,行高及外边距和内边距不可改变; ③宽度就是它的文字或图片的宽度,不可改变 ④内联元素只能容纳文本或者其他内联元素 常见的块状元素与内联元素
块状元素:
address - 地址
blockquote - 块引用 center - 举中对齐块 dir - 目录列表 div - 常用块级容易,也是CSS layout的主要标签 dl - 定义列表 fieldset - form控制组 form - 交互表单 h1 - 大标题 h2 - 副标题 h3 - 3级标题 h4 - 4级标题 h5 - 5级标题 h6 - 6级标题 hr - 水平分隔线 isindex - input prompt menu - 菜单列表 noframes - frames可选内容,(对于不支持frame的浏览器显示此区块内容 noscript - 可选脚本内容(对于不支持script的浏览器显示此内容) ol - 有序表单 p - 段落 pre - 格式化文本 table - 表格 ul - 无序列表 |
内联元素:
a - 锚点
abbr - 缩写 acronym - 首字 b - 粗体(不推荐) bdo - bidi override big - 大字体 br - 换行 cite - 引用 code - 计算机代码(在引用源码的时候需要) dfn - 定义字段 em - 强调 font - 字体设定(不推荐) i - 斜体 img - 图片 input - 输入框 kbd - 定义键盘文本 label - 表格标签 q - 短引用 s - 中划线(不推荐) samp - 定义范例计算机代码 select - 项目选择 small - 小字体文本 span - 常用内联容器,定义文本内区块 strike - 中划线 strong - 粗体强调 sub - 下标 sup - 上标 textarea - 多行文本输入框 tt - 电传文本 u - 下划线 var - 定义变量 |
相关推荐
### 块状元素与内联元素大全 在HTML中,根据元素的默认显示方式,可以将所有的HTML标签大致分为两大类:块状元素(Block-level Element)与内联元素(Inline Element)。这两种类型的元素在网页布局中扮演着重要的...
CSS 块状元素、内联元素和 inline-block elementos CSS 中的块状元素(Block Elements)和内联元素(Inline Elements)是两种基本的元素类型,它们在网页布局和样式设计中扮演着非常重要的角色。块状元素和内联元素...
### CSS盒模型、块状元素与内联元素、CSS选择器 #### 一、CSS盒模型 CSS盒模型是理解CSS布局的关键概念之一。它定义了网页元素如何根据其CSS属性进行渲染。盒模型主要由四个部分组成: - **内容(Content)**:这...
当我们将内联元素与块状元素结合时,可以看到`#div1`作为容器,同时容纳了块状元素`#div2`和内联元素`<a>`。这展示了块状元素作为容器的能力,可以包含内联元素和其他块状元素。在增加`#div3`这个蓝色块状元素后,...
1. 第一课:盒模型、块状元素与内联元素以及CSS选择器的使用,是学习CSS的基础。 2. 第二课:浮动(float)用于创建多列布局,元素会脱离正常文档流。 3. 第三课:清除浮动(clear)解决因浮动导致的父元素高度塌陷问题...
6. **块状元素与内联元素**: 块状元素如`div`占据整行,内联元素如`span`只占据自身内容宽度,它们在布局中的角色和相互作用是理解CSS布局的关键。 **课程内容** 7. **盒模型、块状元素与内联元素、CSS选择器**: ...
- **学习目标**: 理解盒子模型的基本概念,熟悉块状元素与内联元素的区别,掌握CSS选择器的使用方法。 ##### 第二课: 浮动 - **概念**: 浮动使元素脱离文档流,可实现左右排列布局。 - **应用场景**: 常用于创建侧...
- 示例:`<img>`元素可以设置宽度和高度,并与其他内联元素并排显示。 理解这些元素类型对于创建响应式和动态布局至关重要。在CSS3中,可以通过display属性改变元素的默认类型,例如将一个块状元素变为内联元素(`...
2. **HTML块状元素与内联元素**:块状元素如`<div>`、`<p>`、`<h1>`等,它们默认占据一整行,可以设置宽度、高度和外边距。内联元素如`<span>`、`<a>`、`<img>`等,它们只占据自身内容的宽度,可以并排显示,但不能...
#### 二、XHTML中的块状元素与内联元素 - **块状元素**:这类元素占据整行空间,具有高度和宽度,如`<div>`。 - **特点**:不能在同一行放置其他元素或文本。 - **用途**:适用于页面的大块区域布局。 - **内联...
6. **块状元素与内联元素**:理解两者的区别,以及它们在布局中的应用。 7. **CSS精灵**:使用CSS精灵技术优化网页加载速度。 通过这个课程,学生将能够: 1. 创建具有清晰结构的HTML文档。 2. 使用CSS为网页添加...
这篇学习笔记主要讲解了 XHTML 和 CSS 在页面布局中的应用,涵盖了基础知识、CSS 控制页面样式、选择器、盒子模型、块状元素和内联元素等内容。 一、基础知识 1. 什么是 W3C? W3C 是 World Wide Web Consortium ...
常见块状元素为“div” 内联元素(行内元素):内联元素只能容纳文本或者其他内联元素,是块级元素的后代,它允许其他内联元素与其位于同一行,不能设置高度(height)和宽度(width)。常见内联元素为“a”。 根据...
1. **内容块状元素与内联元素**: - **块状元素**(Block Elements):如 `<div>`、`<p>` 等,它们默认独占一行,可以设置宽度和高度。 - **内联元素**(Inline Elements):如 `<span>`、`<a>` 等,它们不独占一...
还有一些元素是内联块状元素,如 、<input> 等,这些元素既是内联元素,又可以设置 width 和 height。 掌握 CSS 的基本概念和应用是非常重要的。只有通过不断的学习和实践,我们才能更好地理解和应用 CSS。
- **内联元素**:如`<span>`、`<a>`等,默认情况下与其他内联元素在同一行显示,不会换行。 - **转换方式**:可以使用CSS的`display`属性将内联元素转换为块状元素,或将块状元素转换为内联元素。例如: ```css ....