Web前端开发项目教程 课件 6.1 转换元素类型

Web前端开发项目教程主讲人：卞孝丽转换元素类型【任务目标】

知识目标了解不同类型元素的特征；理解不同类型元素之间的区别；熟悉转换元素类型的方法。

能力目标会转换元素的类型能够通过转换元素类型满足网站页面布局排版的需求。

素质目标提升辨别能力，不同的场合能做出相应的适合的选择。【导学知识】一、认识元素类型

HTML标记语言提供了丰富的标记，使页面结构的组织更加轻松、合理。用于组织页面结构的HTML标记分为两种类型，块标记和行内标记，也称为块标签和行内标签，从开始标记到结束标记通常包含内容整体叫作块级元素和行内元素。

了解这两种类型标记的特性有助于灵活控制CSS布局排版。【导学知识】1.块元素块级元素的特点：常见的块级元素：

块级元素在页面中以区域块的形式出现，其特点是，块元素通常都会独自占据一整行，总是在新行上开始，自上而下排列，可以对其设置宽度、高度、对齐等属性，行高以及外边距和内边距都可控制。常见的块级元素有<h1>～<h6>、<div>、<ul>、<li>、<ol>、<p>等，其中<div>为最典型最常用的块元素。块级元素的作用：一般情况下，块元素作为盛装内容的容器，可以容纳内联元素和其他块元素，常用于网页布局和网页结构的搭建。【导学知识】1.行内元素行内元素的特点：常见的块级元素：

行内元素又称内联元素或内嵌元素，其特点是不必在新的一行开始和结束，通常会和其前后的其他行内元素逐个排列显示在同一行内，不占据独立的区域，靠自身内容的字体大小或图像尺寸撑开，不可以设置宽度、高度、对齐、外边距和内边距等属性。常见的行内元素有<span>、<i>、<b>、<em>、<del>、<strong>、<u>、<a>、<s>、<ins>等，其中<span>标签为最典型最常用的行内元素。行内元素的作用：常用于控制页面中文本的样式。【导学知识】二、转换元素类型其常用属性值及含义见表所示：

网页是由多个块级元素和行内元素排列而成的，在排版时，如果想要设置行内元素的宽度和高度，或是需要块元素不单独占一行排列，就需要对元素的类型进行转换，这就用到了display属性，具体语法格式如下：display:属性值;值含义inline此元素将显示为行内元素（行内元素默认的display属性值）block此元素将显示为块元素（块元素默认的display属性值）inline-block此元素将显示为行内块元素，可设置宽度、高度和对齐等属性，但不会独占一行none此元素将被隐藏，不显示，也不占用页面空间，相当于该元素不存在【导学知识】三、对象的显示与隐藏

可以通过把display属性设置为none隐藏一个元素，而且隐藏后不占用任何空间，也就是说，该元素不但不显示了，而且该元素原本占用的空间也会从页面布局中消失。

与display不同，通过把visibility属性的默认值visible可见设置为hidden隐藏后的元素仍占用与未隐藏之前一样的空间，也就是说，该元素虽然不显示了，但仍然会影响布局。【任务小结】

本节课我们学习了如何转换元素的类型，能够通过转换元素类型满足网站页面布局排版的需求。

古语云:“君子谋时而动,顺势而为”。聪明有远见的人会准备好,在合适的时候做出行动,