人民大2024Web前端技术-PPT模块二 任务1 入驻歌手栏目实现.pptx

入驻歌手栏目实现Web前端技术主讲老师：姜文秀延时符

CONTENTS目录01任务描述03知识点导图02学习目标04相关知识05任务实施延时符

任务描述延时符

任务描述一个吸引用户的网页，往往包含很多图片。合理的使用图文混排，能够让页面内容更丰富，更引人入胜。本任务采用目前流行的flex布局方式，结合div、span和img/标签，完成“奕品堂音乐”网站主页上的“入驻歌手”栏目。效果如图2-1-1所示。延时符

页面效果图延时符

学习目标延时符

学习目标掌握添加外部CSS样式的方法和CSS后代选择器的含义及使用方法；掌握CSS弹性布局flex多行弹性元素控制方法；掌握文本添加和样式设置方法。知识目标能够根据效果图使用合理标签进行页面结构搭建；能为页面添加外部CSS样式；能够根据需求灵活选择各类基础选择器进行样式添加；技能目标延时符培养严谨、精益求精的工作态度；培养良好的审美观念；培养团队合作的意识。素养目标

知识点导图延时符

知识点导图延时符

相关知识延时符span标签图像标签外部样式文件CSS的元素显示模式字体样式行高后代选择器弹性布局属性

HTML标签：span标签延时符span标签是没有语义的，它就是一个盒子，用来装内容。span意为跨度、跨距。span标签用来布局，一行上可以多个span，宽度不可以设置，大小由内容撑开，上下边距不可以设置。

前面的任务已经介绍过图像标签img/和它的src、width、height属性。要想在网页中灵活地使用图像，仅依靠src属性是远远不够的，为此HTML还为img/标签提供了其他的属性。HTML标签：图像标签延时符

CSS样式：引入外部样式文件延时符外部样式也可称之为外链式或链入式，是将所有的CSS样式写在一个或多个扩展名为“.css”的样式文件中，通过link/标签将外部样式表文件链接到需要使用该样式的HTML文件中，其基本语法格式如下：外部样式及元素显示模式视频讲解linkrel=stylesheettype=text/csshref=CSS文件的路径/(1) rel：定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。(2) type：定义所链接文档的类型，在这里需要指定为“text/css”，表示链接的外部文件为CSS样式表。在一些宽松的语法格式中，type属性可以省略，但是建议写全。(3) href：定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径，建议使用相对路径，这个属性的设置最为关键。

CSS样式：CSS的元素显示模式延时符网页的标签非常多，在不同地方会用到不同类型的标签，了解它们的特点可以更好的布局网页。元素显示模式就是元素（标签）以什么方式进行显示，比如div独占一行，比如一行可以放多个span。HTML元素一般分为块级元素和行内元素两种类型。(1) 块级元素。常见的块元素有h1~h6、p、div、ul、ol、li等，其中div标签是最典型的块元素。块级元素的特点：①独占一行。②高度，宽度、外边距以及内边距都可以控制。③宽度默认是容器（父级宽度）的100%。④是一个容器及盒子，里面可以放行内或者块级元素。注意：文字类的元素内不能使用块级元素。p标签主要用于存放文字，因此p里面不能放块级元素，特别是不能放div。同理，h1-h6等都是文字类块级标签，里面也不能放其他块级元素。

CSS样式：CSS的元素显示模式延时符(2) 行内元素。常见的行内元素有a、strong、b、em、i、del、s、ins、u、span等，其中span标签是最典型的行内元素。有的地方也将行内元素称为内联元素。行内元素的特点：①相邻行内元素在一行上，一行可以显示多个。②高、宽直接设置是无效的。③默认宽度就是它本身内容的宽度。④行内元素只能容纳文本或其他行内元素。注意：链接里面不能再放链接。特殊情况链接a里面可以放块级元素，但是给a转换一下块级模式最安全。

CSS样式：CSS的元素显示模式延时符（3）行内块元素。在行内元素中有几个特殊的标签，img/、input/、td，它们同时具有块元素和行内元素的特点。有些资料称它们为行内块元素。行内块元素的特点：①和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。一行可以显示多个（行内元素特点）。②默认宽度就是它本身内容的宽度（行内元素特点）。③高度，行高、外边距以及内边距都可以控制（块级元素特点）。

CSS样式：CSS字体样式属性延时符为了方便控制页面中的文字的外观，CSS提供了一些字体有关的样式属性，具体如下。font-size：字号大小。font-size属性用于设置字号，该属性的值可以使用相对