HTML图像与CSS样式应用:浮动窗体解析

需积分: 9 1 下载量 10 浏览量 更新于2024-08-23 收藏 1.75MB PPT 举报
本资源主要介绍了如何在HTML页面中插入图像、定义和应用CSS样式以及创建浮动窗体。其中涉及到的HTML标签包括<Title>、<Head>、<Iframe>、<img>等,CSS样式的应用则涵盖图像大小、边框、对齐方式等属性的设置。 在HTML页面中插入图像,主要使用<img>标签,支持的图像格式有gif、jpg、png三种。图像的来源可以是本地或远程服务器,通过设置`src`属性指定图形文件地址。为了控制图像的大小,可以使用`width`和`height`属性,但通常建议保持原始比例以避免失真。此外,`border`属性用于设置图像边框的厚度,`align`属性用于调整图像与周围文字的相对位置,例如`top`, `middle`, `bottom`, `left`, `right`。`alt`属性则用于提供图像的替代文本,对于不支持图像或者使用文本浏览器的用户至关重要。 CSS样式定义和应用是网页设计中的关键部分。可以通过以下几种方式引入CSS:内联样式(直接在HTML元素中使用`style`属性)、内部样式表(在`<head>`标签内使用`<style>`标签)、外部样式表(链接单独的.css文件)。在本资源中,虽然没有具体展示CSS代码,但是提到了如何使用CSS来改变图像的布局和外观。例如,可以使用CSS来定义图像的尺寸、边框、对齐方式,以及更复杂的样式效果。 浮动窗体(Floating Frames)在HTML中通常通过<Iframe>标签实现,可以嵌入一个独立的HTML文档到主页面中。在这个例子中,`<Iframe src="iframe.html">`表示将`iframe.html`的内容嵌入到当前页面的这个位置。 预习检查的问题包括: 1. 设置标题使用<Title>标签。 2. 段落设置使用<p>标签。 3. 文本字体设置可以使用<style>或<span>等标签,例如`<span style="font-family: Arial;">文本内容</span>`。 4. 滚动字符通常由<marquee>标签控制,其默认滚动方向是从左到右。 5. 清单的分类可以使用无序列表<ul>和有序列表<ol>,以及列表项<li>进行定义。 本讲的学习目标包括: 1. 理解如何在HTML页面中插入并设置图像属性。 2. 掌握CSS样式的定义和实际应用。 3. 学会创建和管理HTML页面中的浮动窗体。 通过学习这些内容,读者可以更好地理解和实践网页设计的基本元素,提升网页制作技能。