项目二任务三 制作“科普课堂”页面

科技在线制作“科普课堂”页面CONTENTS目录元素的类型第一部分元素转换第二部分元素的类型第一部分元素的类型HTML标记语言提供了多样的标记，用以构建网页的结构。这些标记一般可分为行内元素和块元素。通过合理使用这些元素，我们可以更加便捷和有序地组织页面布局。掌握这些元素的属性也对于后续我们使用CSS进行样式设计和页面布局至关重要。元素的类型1.行内元素行内元素又称为内联元素或者内嵌元素，这类元素通过会与其它行内元素并排显示在同一行内，它们不会独自占据一行。行内元素通常是不允许设置高度、宽度或对齐方式等属性的，而是依赖其包含的文本或图像的尺寸来确定其大小。这类元素主要应用于控制页面中文本的样式。<strong><ins><em><del><sup><sub><a><span>元素的类型2.块元素块元素在网页中呈现为独立的区域块，它们会占据完整的一行或者多行。对于块级元素，我们可以为它们设置宽度、高度和对齐方式等属性。这类元素通常用于构建网页的整体结构和布局，使得页面显得更加灵活多样。<div><p><h1>~<h6><ul><ol>元素的类型2.块元素元素的类型2.块元素元素的类型3.<span>标记<span>标记是行内元素中最重要的行内元素，它本身没有特定的语义含义，表示“范围”，只能被作为包含文本和行内标记的容器。在<span>标记中允许嵌套多层<span>标记。元素的类型3.<span>标记当网页中某些文本内容需要以特殊方式显示时，可以使用<span>标记，配合class属性使用。常需要使用<span>标记的场景有以下几种。文本格式化：对于文本中某些需要设置特殊样式的部分，可以使用<span>标记来实现。隐藏内容：通过display:none属性，可以将<span>标记内的内容隐藏。元素的类型3.<span>标记控制间距：通过设置margin和line-height属性，可以调整<span>标记内内容的间距和对齐方式。元素的类型3.<span>标记元素的类型3.<span>标记在块级元素中可以嵌套行内元素，例如在<p>、<div>标记中可以嵌套<span>和<a>标记等，但是在行内元素中只能嵌套行内元素或行内块元素，不可以直接包含块元素。元素的类型3.<span>标记某些特殊的块级元素（如<p>、<h1>~<h6>、<dt>）内部不能嵌套任何块级元素，只能嵌套行内元素或行内块元素。元素转换第二部分元素转换HTML网页中是由多个块元素和行内元素经过有序排列布局形成的，为了灵活地控制页面布局，使不同的显示类型具有不同的样式特性，后者是为了解决元素重叠、间距不一致等页面布局的问题，通常会使用元素类型转换来实现，以此提高开发效率，开发者可以创造出更加丰富和动态的网页界面。元素转换在CSS中，通常使用display属性来实现元素类型的转换，改变元素的默认显示方式。display属性常用的属性值及含义如表2-3-1所示。属性值含义inline元素显示为行内元素（行内元素默认的display属性值）block元素显示为块元素（块元素默认的display属性值）inline-block元素显示为行内块元素。可以为元素设置宽度、高度和对齐方式等属性，但是该元素不会独占一行。none元素被隐藏，不显示也不占用页面空间。flex容器元素转换为弹性盒子grid容器元素转换为网格布局表2-3-1

display属性常用的属性值元素转换元素类型常见的应用如下。块级元素转换为行内元素<divstyle="display:inline;">/*<div>转换为行内元素*/行内元素转换为块元素<spanstyle="display:block">/*<span>转换为块元素*/元素转换行内元素转换为行内块元素/*<span>转换为行内块元素*/<spanstyle="display:inline-block">