第2章 HTML标签与CSS样式基础
- 格式：pptx
- 大小：5.80 MB
- 文档页数：63
下载文档原格式
合集下载
入门级网页设计教程
入门级网页设计教程在如今信息高度发达的时代，网页设计已经成为了一个热门的职业。
如果你对于网页设计感兴趣，并希望入门学习这个领域，那么本篇文章将为你提供一些入门级的网页设计教程。
一、HTML基础知识HTML是网页设计的基础，它用于描述网页的结构和内容。
学习HTML是网页设计的第一步。
以下是一些HTML的基础知识：1. HTML标签HTML使用一系列标签来描述文档的结构和内容。
常见的标签有`<html>、<head>、<body>`等。
学习这些标签的使用方法是理解HTML结构的重要一步。
2. HTML元素和属性HTML标签可以包含元素和属性。
元素是标签的内容，属性是描述元素的额外信息。
例如，`<img>`标签是用于显示图片的标签，它有一个`src`属性来指定图片的路径。
二、CSS样式与布局CSS是层叠样式表的缩写，它用于定义网页的样式和布局。
学习CSS可以使你的网页具有更加美观和一致的外观。
以下是一些CSS的基础知识：1. CSS选择器CSS选择器用于选取需要修改样式的元素。
常见的选择器有标签选择器、类选择器和ID选择器等。
通过选择器，你可以精确地指定需要修改的元素。
2. CSS属性CSS属性用于定义元素的样式。
常见的CSS属性有`color`、`font-size`和`background-color`等。
学习这些属性的使用方法可以帮助你修改网页的样式。
3. CSS布局CSS布局用于控制网页元素的位置和大小。
学习CSS布局可以帮助你实现不同的网页布局，如居中、多列和响应式布局等。
三、响应式设计随着移动设备的普及，响应式设计已经成为了网页设计的重要概念。
学习响应式设计可以使你的网页适应不同的设备和屏幕尺寸。
以下是一些响应式设计的基础知识：1. 媒体查询媒体查询是CSS的一个特性，它可以根据不同的设备和屏幕尺寸来应用不同的CSS样式。
通过使用媒体查询，你可以为不同的设备提供不同的网页布局和样式。
《HTML+CSS基础教程(课件PPT版)》
边框和边缘样式
1
边框样式
学习如何设置元素的边框样式、宽度和颜色。
2
内边距和外边距
了解内边距和外边距的区别，学习如何为元素添加间距。
3
边框圆角
掌握如何为元素的边框添加圆角效果，制作更具吸引力的页面。
标题和列表样式
标题样式
学习如何设置标题的样式，使其与页面风格一致。
列表样式
了解如何使用CSS样式为无序列表和有序列表定制符号 和样式。
4 样式优先级
了解CSS样式优先级的计算规则，学习如何解决样式冲突。
基本标签及其用法
div标签
了解div标签的作用，并学习如何使用它创建容器。
header和footer标签
学习如何使用header和footer标签来定义网页的页 眉和页脚。
span标签
掌握span标签的使用方法，如内联元素的容器。
《HTML+CSS基础教程 （课件PPT版）》
介绍HTML和CSS的基础知识。学习HTML基础语法、标签、CSS基础语法和选择 器，以及它们的基本用法。
HTML基础语法和标签
1 HTML是什么？
2 HTML标签
了解HTML的定义和作用，学 习HTML文档的基本结构。
掌握常用的HTML标签，如标 题、段落、图片、链接等。
ቤተ መጻሕፍቲ ባይዱ
跳转。
3
链接到外部网页
学习如何创建超链接，并链接到其他网页。
下载文件链接
掌握如何创建下载链接，提供文件下载功能。
CSS样式和样式表
1 内联样式
2 内部样式表
3 外部样式表
了解如何在HTML标签内部 添加样式，实现单个元素的 样式设置。
学习如何在HTML文档内部 使用style标签，定义多个元 素的样式。
第2章 HTML语言基础
<head> <script src="path/to/script.js" language="javascript" type="text/javascript"> </script> </head>
引用外部 文件
2.2.3 HTML中样式表的书写
级联样式表CSS可以精确指定网页元素位置，控制网页 外观以及创建特殊效果。 在网页上使用样式表有三种方法： ① 应用内嵌样式到各个网页元素。 ② 在网页上创建嵌入式样式表。 ③ 将网页链接到外部样式表。 1．内嵌样式 使用内嵌样式以应用层叠样式表属性到网页元素上。 例如段落标记符的内嵌样式属性如下： <p style="border-style: solid">
2.2.3 HTML中样式表的书写
2．嵌入式样式表 若只是定义当前网页的样式，可使用嵌入的样式表。
<HEAD><TITLE>字体属性示例</TITLE> <STYLE> <!-.s1{ font-family:黑体;font-size:x-large; font-style:italic } .s2{ font-size:larger} .s3{ font-variant:small-caps} .s4{ font-weight:bolder} .s5{ font:bolder italic 楷体_gb2312} --> </STYLE> </HEAD>
图2-1 简单的HTML文档
2.2 HTML文件的整体结构
2.2.1 HTML文件结构
一个完整的HTML文件结构如下: <html> 头部 <head>头部信息</head> <body>正文信息</body> 正文 </html>
网页设计与制作案例教程电子教案课件
网页设计与制作案例教程-电子教案课件第一章：网页设计基础1.1 网页设计概述介绍网页设计的概念、目的和重要性讲解网页设计的基本原则和设计流程1.2 网页布局与排版介绍网页布局的概念和重要性讲解常用的网页布局方法和技术演示实例：制作一个简单的网页布局第二章：HTML与CSS基础2.1 HTML基础介绍HTML的概念和作用讲解HTML的基本结构和常用标签演示实例：制作一个简单的网页2.2 CSS基础介绍CSS的概念和作用讲解CSS的基本语法和常用选择器演示实例：为网页添加样式和布局第三章：图像与多媒体处理3.1 图像处理介绍图像在网页设计中的作用和重要性讲解图像的基本格式和处理方法演示实例：制作一个简单的图像轮播效果3.2 多媒体处理介绍多媒体在网页设计中的应用讲解音频和视频的嵌入方法演示实例：在网页中添加音频和视频第四章：网页交互与动画4.1 交互设计基础介绍交互设计在网页设计中的作用和重要性讲解常用的交互设计技术和方法演示实例：制作一个简单的交互式导航菜单4.2 动画与过渡效果介绍动画在网页设计中的应用和重要性讲解CSS动画和过渡效果的语法和用法演示实例：制作一个简单的CSS动画效果第五章：响应式网页设计5.1 响应式网页设计概述介绍响应式网页设计的概念和重要性讲解响应式网页设计的基本原则和方法5.2 媒体查询与网格系统讲解媒体查询的语法和用法讲解网格系统的概念和应用演示实例：制作一个响应式网页布局第六章：网页前端编程技术6.1 JavaScript基础介绍JavaScript的概念和作用讲解JavaScript的基本语法和常用语法演示实例：制作一个简单的网页交互效果6.2 jQuery库的使用介绍jQuery的概念和作用讲解jQuery的基本语法和常用方法演示实例：使用jQuery实现网页元素的动态效果第七章：网页后端技术7.1 PHP基础介绍PHP的概念和作用讲解PHP的基本语法和常用语法演示实例：制作一个简单的PHP网页7.2 MySQL数据库的使用介绍MySQL的概念和作用讲解MySQL的基本操作和常用SQL语句演示实例：使用MySQL存储和管理网页数据第八章：网页优化与性能提升8.1 网页优化概述介绍网页优化的重要性讲解网页优化的基本原则和方法8.2 提高网页性能讲解提高网页加载速度的方法讲解代码压缩和合并的技术演示实例：优化网页性能第九章：搜索引擎优化（SEO）9.1 SEO基础介绍SEO的概念和作用讲解SEO的基本原则和方法9.2 关键词研究和内容优化讲解关键词研究的方法和技巧讲解内容优化的重要性和方法演示实例：为一个网页进行SEO优化第十章：网页设计与制作的实战项目10.1 项目概述和需求分析介绍项目背景和目标分析项目需求和功能10.2 网页设计与制作流程讲解网页设计与制作的详细流程演示实例：完成一个实战项目的网页设计与制作第十一章：网页设计与制作工具11.1 网页编辑器与IDE介绍常用的网页编辑器和集成开发环境（IDE）讲解如何使用这些工具进行网页设计与制作11.2 图形设计软件介绍常用的图形设计软件及其在网页设计中的应用讲解如何使用这些工具进行网页图形设计第十二章：网页设计与制作实战技巧12.1 网页动画与特效讲解如何制作网页动画和特效演示实例：制作一个动态轮播图12.2 网页响应式设计讲解如何实现网页的响应式设计演示实例：制作一个响应式网页布局第十三章：网页安全性与维护13.1 网页安全性基础介绍网页安全性的重要性和常见安全问题讲解如何提高网页安全性13.2 网页维护与更新讲解如何进行网页的维护和更新演示实例：对一个网页进行维护和更新第十四章：网页设计与制作的案例分析14.1 案例一：企业官方网站设计分析企业官方网站的设计要求和特点讲解如何设计和制作企业官方网站14.2 案例二：电子商务网站设计分析电子商务网站的设计要求和特点讲解如何设计和制作电子商务网站第十五章：网页设计与制作的未来发展15.1 网页设计趋势与创新分析当前网页设计的趋势和创新方向讲解如何跟上网页设计的未来发展15.2 网页设计与制作的未来技术介绍未来可能影响网页设计与制作的技术讲解如何应对这些技术挑战和机遇重点和难点解析重点：1. 网页设计基础：理解网页设计原则、设计流程以及布局与排版的方法。
第二章CSS基础
2019/11/24
2.4 Css基础语法
2.4.8伪元素
CSS伪元素用于向某些选择器设置特殊效果。伪元素的 语法： selector :pseudo-element {property : value;} “：first-line” 伪元素用于向文本的首行设置特殊样式 。 （例1-28.html） “：first-letter” 伪元素用于向文本的首字母设置特殊 样式 。（例1-29.html） “:before”伪元素可以在元素的内容前面插入新内容。 （例1-30.html） “:after” 伪元素可以在元素的内容之后插入新内容。
2.4 Css基础语法
3.ID选择器 ID 选择器与类选择器相似，ID选择器名前面
有一个 # 号 ，ID选择器要引用ID属性中的值。 注意： (1)在一个 HTML 文档中，ID 选择器会使用一次，
而且仅一次 。 (2)ID 选择器不能结合使用，因为 ID 属性不允许有
以空格分隔的词列表。 (3) ID 选择器是区分大小写的 。(例1-12.html)
（例1-26.html）
2019/11/24
2019/11/24
2.4 Css基础语法
6.鼠标属性 让鼠标移到不同对象上面，显示不同形状 auto: 正常鼠标 crosshair: 十字鼠标 default: 默认鼠标
text: 文字鼠标 （例1-27.html）
2019/11/24
为列表项标志。 6.鼠标属性 ：鼠标形状等。
2019/11/24
2.4 Css基础语法
1.字体属性
CSS字体属性定义文本的字体系列、大小、 加粗、风格和变形等。（例1-19.html）
font-family 属性 ：定义文本的字体系列 ； font-size 属性：设置文本的大小 ； font-weight 属性：设置文本的粗细 （bold可将 文本设置为粗体，100~900为字体指定9级加粗 度）； font-style 属性最常用于规定斜体文本 ； font-variant 属性可以设定小型大写字母。
WEB开发技术 第二章 超文本标识语言HTML
* 通常，HTML中一行打头的空格将被忽略，而行 中和行尾的空白空间将被压缩为单个空格。 * 预格式化标记标识的文本中用到特殊字符时，仍 须采用代码形式或助记符形式。 15/86
预格式化标签实例
<html> <body> <h2 align="center">Example without using PRE tag</h2> A BBB CCCCC DDDDDDD EEEEE FFF G <hr width="75%" align="center"> <h2 align="center">Example of using PRE tag</h2> <pre> A BBB CCCCC DDDDDDD EEEEE FFF G </pre> </body> 16/86 </html>
5/86
标签的特点
Tag通常是成对出现的，比如<body></body>。起始的叫做 Opening Tag，结尾的就叫做Closing Tag。 注意“body”前的斜杠，那就是关闭标签与打开标签的区别。 但是也有一些标签例外。比如，<input>标签就不需要。 HTML的Tag不区分大小写的。比如，<HTML>和<html>其实 是相同的。 Tag可以拥有属性。属性可以扩展其能力。属性通常由属性名 和值成对出现：name=“value”。如：bgcolor=“silver”。 属性参数的格式：
19/86
A FORTRAN compiler accepts FORTRAN source code and generates a machinelevel object module. A COBOL compiler accepts COBOL source code and generates a machine-level object module. A binary number 1011 can be transformed to a decimal number 11 according to the following formula: A3A2A1A0 =A3x23+A2x22 +A1x21+A0x20 that is: (1011)2=1x23+0x22+1x21+1x20 =8+0+2+1=11
预格式化标签实例
<html> <body> <h2 align="center">Example without using PRE tag</h2> A BBB CCCCC DDDDDDD EEEEE FFF G <hr width="75%" align="center"> <h2 align="center">Example of using PRE tag</h2> <pre> A BBB CCCCC DDDDDDD EEEEE FFF G </pre> </body> 16/86 </html>
5/86
标签的特点
Tag通常是成对出现的，比如<body></body>。起始的叫做 Opening Tag，结尾的就叫做Closing Tag。 注意“body”前的斜杠，那就是关闭标签与打开标签的区别。 但是也有一些标签例外。比如，<input>标签就不需要。 HTML的Tag不区分大小写的。比如，<HTML>和<html>其实 是相同的。 Tag可以拥有属性。属性可以扩展其能力。属性通常由属性名 和值成对出现：name=“value”。如：bgcolor=“silver”。 属性参数的格式：
19/86
A FORTRAN compiler accepts FORTRAN source code and generates a machinelevel object module. A COBOL compiler accepts COBOL source code and generates a machine-level object module. A binary number 1011 can be transformed to a decimal number 11 according to the following formula: A3A2A1A0 =A3x23+A2x22 +A1x21+A0x20 that is: (1011)2=1x23+0x22+1x21+1x20 =8+0+2+1=11
认识HTML和CSS网页设计语言
认识HTML和CSS网页设计语言第一章：HTML的介绍和基本语法HTML（HyperText Markup Language）是一种用于创建网页的标记语言。
它包含一系列的标记，这些标记用于描述网页的结构和内容。
HTML的基本语法由标签、元素和属性组成。
1.1 标签HTML中的标签是一对尖括号包围的关键字，它们定义了元素的开始和结束。
例如，<head>和</head>标签用于定义网页的头部部分。
1.2 元素在HTML中，元素是由起始标签、内容和结束标签组成的。
起始标签用于定义元素的开始，结束标签用于定义元素的结束。
元素的内容位于起始标签和结束标签之间，可以包含文本、图片、链接等。
1.3 属性HTML中的属性用于为元素提供额外的信息。
属性通常包含在起始标签中，由属性名和属性值组成。
例如，<imgsrc="image.jpg">中的src属性指定了图片的链接地址。
第二章：HTML常用标签和属性2.1 文本标签HTML中的文本标签用于定义文本的样式和结构。
常用的文本标签包括<p>（段落）、<h1>-<h6>（标题）、<strong>（加粗）、<em>（斜体）等。
2.2 图片标签图片标签用于在网页中插入图片。
<img>标签是HTML中用于插入图片的标签，它需要指定图片的链接地址、宽度、高度等属性。
2.3 链接标签链接标签用于创建网页之间的链接。
<a>标签用于定义链接，它需要指定链接的目标地址，可以是其他网页、文件或者锚点。
2.4 列表标签列表标签用于创建有序或无序的列表。
<ul>标签用于创建无序列表，<ol>标签用于创建有序列表，<li>标签用于定义列表项。
第三章：CSS的介绍和基本语法CSS（Cascading Style Sheets）是用于描述网页样式的语言。
动态网页设计与制作实用教程电子教案
动态网页设计与制作实用教程第一章：动态网页设计基础1.1 动态网页概述1.1.1 动态网页与静态网页的区别1.1.2 动态网页的优势与应用场景1.2 服务器端编程语言1.2.1 PHP1.2.2 1.2.3 JSP1.3 数据库技术1.3.1 数据库基本概念1.3.2 常用数据库介绍1.3.3 SQL语言第二章：HTML与CSS基础2.1 HTML基本结构2.1.1 网页结构标签2.1.2 网页布局标签2.1.3 表单标签2.2 CSS样式设计2.2.1 CSS基本语法2.2.2 选择器与属性2.2.3 布局与样式技巧2.3 响应式设计与移动端适配2.3.1 媒体查询2.3.2 移动端布局策略第三章：JavaScript与jQuery编程3.1 JavaScript基础3.1.1 语法与基本概念3.1.2 函数与事件处理3.1.3 DOM操作3.2 jQuery库介绍3.2.1 jQuery基本语法3.2.2 选择器与事件处理3.2.3 动画与效果3.3 前后端数据交互3.3.1 AJAX技术3.3.2 Fetch API第四章：前端框架与库4.1 Bootstrap框架4.1.1 布局组件4.1.2 表单与按钮4.1.3 响应式设计4.2 React.js框架4.2.1 基本概念与组件4.2.2 状态管理4.2.3 路由与导航4.3 Vue.js框架4.3.1 基本概念与指令4.3.2 计算属性与监听器4.3.3 组件与路由第五章：动态网页项目实践5.1 项目需求分析与规划5.1.1 功能需求5.1.2 技术选型5.1.3 项目结构设计5.2 数据库设计与实现5.2.1 数据库表结构设计5.2.2 数据库连接与操作5.3 服务器端编程与实现5.3.1 用户认证与权限管理5.3.2 业务逻辑处理5.3.3 数据持久化5.4 前端设计与实现5.4.1 页面布局与样式设计5.4.2 交互逻辑与功能实现5.4.3 前后端数据交互与处理5.5 项目部署与优化5.5.1 服务器配置与部署5.5.2 网站性能优化5.5.3 安全防护与维护第六章：图形与多媒体处理6.1 图形处理技术6.1.1 HTML5 Canvas6.1.2 SVG概述6.1.3 图形库介绍（如fabric.js）6.2 多媒体处理6.2.1 音频与视频标签6.2.2 HTML5 API与多媒体交互6.2.3 常用多媒体库介绍（如Video.js）第七章：交互式表单与组件7.1 表单验证与交互7.1.1 表单基本属性与事件7.1.2 客户端验证技术7.1.3 表单提交与后端处理7.2 交互式组件设计与实现7.2.1 对话框与模态框7.2.2 选项卡与标签页7.2.3 进度条与轮播图第八章：前端性能优化与调试8.1 页面加载优化8.1.1 图片优化与懒加载8.1.2 代码压缩与合并8.1.3 CDN加速与服务器配置8.2 页面性能检测与分析8.2.1 性能检测工具介绍（如Chrome DevTools）8.2.2 性能瓶颈分析与解决方法8.2.3 网络优化与缓存策略第九章：网络安全与防护9.1 常见网络安全威胁9.1.1 XSS攻击9.1.2 CSRF攻击9.1.3 SQL注入9.2 安全防护措施与最佳实践9.2.1 输入验证与过滤9.2.2 输出编码与转义9.2.3 使用S与身份验证第十章：项目实战与案例分析10.1 项目一：个人博客网站10.1.1 项目需求与技术选型10.1.2 数据库设计与实现10.1.3 前端设计与实现10.2 项目二：在线购物平台10.2.1 项目需求与技术选型10.2.2 数据库设计与实现10.2.3 前端设计与实现10.3 项目三：移动端APP10.3.1 项目需求与技术选型10.3.2 数据库设计与实现10.3.3 前端设计与实现重点解析本文档涵盖了动态网页设计与制作实用教程的十个章节，主要重点和难点如下：一、动态网页设计基础：理解动态网页与静态网页的区别，熟悉服务器端编程语言（如PHP、、JSP）和数据库技术（如MySQL、SQL Server、Oracle）。
《HTML与CSS》PPT课件
网络编程
第2章 HTML技术介绍 第3章 CSS技术基础
1
主题
• 章节内容 • 本章小结 • 课后习题
2
章节内容
• 2.0 引言 • 2.1 HTML网页文档结构 • 2.2 常用HTML标签 • 2.3 CSS（Cascading Style Sheet）
3
2.0 引言
• HTML是制作网页的基础，在现实中的各种网页都 是建立在HTML基础之上的。通过HTML，可以实 现对页面元素的显示处理。本章简单介绍HTML网 页文档的基本知识，整体结构，常用的HTML标签 和超链接。
结果入数据 返回给服务器
接收数据导向 指定网页
送出结果网页 至浏览器
处理数据的 指定网页
24
JSP借由标签 <FORM>所构成的 表单区块中，取得
用户在其中特定字
段输入的数据內 容。
客户端浏览器
表单 1 表单 2
送出 JSP网页
xxx.jsp
用户在HTML 表单中输入信息
定的比例大小 。
19
表格中数据的对齐方式
表格中数据的对齐方式分为水平对齐与垂直对齐两种。 若这两个属性用在<tr>标签中，则可设置整行的对齐方式，
若用在<td>标签中，则是设置个别单元格中数据的对齐方 式。
属性
可设定的 属性值
说明
align
left、center、 right
靠左、置中、靠右对齐，默认为靠左对齐
类型
主窗体 元素
HTML元素
描述
<HTML>、 </HTML>
超文本的开始和结束
<HEAD>、 超文本头部信息的开始和结束 </HEAD>
第2章 HTML技术介绍 第3章 CSS技术基础
1
主题
• 章节内容 • 本章小结 • 课后习题
2
章节内容
• 2.0 引言 • 2.1 HTML网页文档结构 • 2.2 常用HTML标签 • 2.3 CSS（Cascading Style Sheet）
3
2.0 引言
• HTML是制作网页的基础，在现实中的各种网页都 是建立在HTML基础之上的。通过HTML，可以实 现对页面元素的显示处理。本章简单介绍HTML网 页文档的基本知识，整体结构，常用的HTML标签 和超链接。
结果入数据 返回给服务器
接收数据导向 指定网页
送出结果网页 至浏览器
处理数据的 指定网页
24
JSP借由标签 <FORM>所构成的 表单区块中，取得
用户在其中特定字
段输入的数据內 容。
客户端浏览器
表单 1 表单 2
送出 JSP网页
xxx.jsp
用户在HTML 表单中输入信息
定的比例大小 。
19
表格中数据的对齐方式
表格中数据的对齐方式分为水平对齐与垂直对齐两种。 若这两个属性用在<tr>标签中，则可设置整行的对齐方式，
若用在<td>标签中，则是设置个别单元格中数据的对齐方 式。
属性
可设定的 属性值
说明
align
left、center、 right
靠左、置中、靠右对齐，默认为靠左对齐
类型
主窗体 元素
HTML元素
描述
<HTML>、 </HTML>
超文本的开始和结束
<HEAD>、 超文本头部信息的开始和结束 </HEAD>
HTML和CSS
HTML第1章HTML的基本标签1.1 HTML简介HTML是Hypertext Markup Language(超文本标志语言)的缩写，它是构成Web页面(Page)的主要工具，是用来表示网上信息的符号标志语言。
在网上，如果要向全球范围内出版和发布信息，需要有一种能够被广泛理解的语言，即所有的计算机都能够理解的一种用于出版的"母语"。
WWW(World Wide Web)所使用的出版语言就是HTML语言。
通过HTML，将所需要表达的信息按某种规则写成HTML文件，通过专用的浏览器来识别，并将这些HTML"翻译"成可以识别的信息，就是现在所见到的《wangye》。
定义和发布HTML标准的组织是“W3C”（World Wide Web Consortium）中文意思为W3C理事会或万维网联盟。
XML ：（Extensible Markup Language ，可扩展的标记语言）HTML的功能1)出版在线的文档，其中包含了标题、文本、表格、列表以及照片等内容。
2)通过超链接检索在线的信息。
3)为获取远程服务而设计表单，可用于检索信息、定购产品等。
4)在文档中直接包含表格数据、视频剪辑、声音剪辑以及其他的一些应用。
学习HTML的意义便于优化专用工具生成的代码；为编写ASP等网络程序奠定基础。
HTML的编写工具用HTML编写的文件(文档)的扩展名是．HTML或．HTM。
它们是供浏览器解释浏览文件的格式。
可以使用记事本、写字板等编辑工具来编写HTML文件。
HTML语言使用标志对(标签)的方法来编写文件，既简单又方便。
它通常使用<标志名></标志名>来表示标志的开始和结束(例如<HTML></HTML>标志对)，因此在HTML文档中这样的标志对都必须是成对使用的。
在今天，做《wangye》的工具到处都是,只要动几下鼠标，一个精彩的《wangye》就出来了，HTML 是否要学呢？答案是肯定的，因为工具就是工具，它们生成的代码是机械的，不够简洁，使《wangye》打开的速度减慢。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
— 21 —
案例一 制作鲜花导购网页的结构——HTML标签
2. HTML水平线
水平线主要是用来分隔网页中的内容。水平线标签<hr>是一个单标签，其作 用是在HTML页面中创建水平线。
代 码 <body> <p>这是段落文字</p> <hr> <p>这是段落文字</p> <hr> <p>这是段落文字</p> </body>
代 码 <body> <dl> 效 果
<dt>咖啡</dt>
<dd>黑色的热饮</dd> <dt>牛奶</dt> <dd>白色的冷饮</dd> </dl> </body>
— 28 —
案例一 制作鲜花导购网页的结构——HTML标签
三、HTML图像
1.
认识网页中的图像
.gif格式最多只能包含256种颜色，因而适合 表现色调不连续或具有大面积单一颜色的图像， 如卡通画、按钮、图标和徽标等。
代 码
<body> <ol> <li>咖啡</li> <li>牛奶</li> <li>奶茶</li> </ol> </body> — 27 —
效 果
案例一 制作鲜花导购网页的结构——HTML标签
3. 定义列表
定义列表是项目及其注释的组合。其中<dl></dl>标签对表示定义列表； <dt></dt>标签对表示每个定义的名称（项目名）；<dd></dd>标签对表示每个定 义名称的详细内容（注释）。
创建文本和添加段落标签。打开task1文件夹中名为“文字”的文本文件，将文字内 容复制粘贴到flower-lx.html文档代码视图的<body></body>标签对中，然后依据效果 图，在设计视图中使用【Enter】键为文字划分段落。
— 5—
案例一 制作鲜花导购网页的结构——HTML标签
案例步骤
— 4—
案例一 制作鲜花导购网页的结构——HTML标签
案例步骤
1.
步骤 01
步骤 02 步骤 03
输入文本并添加段落和标题标签
将本书附赠的“第2章”文件夹拷贝至第1章创建的“My Web”站点根文件夹中。
在刚拷贝的文件夹“第2章\task1”中新建一个名为flower-lx.html的网页文档并打开。
步骤 07
— 8—
案例一 制作鲜花导购网页的结构——HTML标签
案例步骤 2.
步骤 01
添加超链接标签
添加超链接标签。首先选中第2行的“鲜花礼品”文字，然后单击“插入”面板“常 用”类别中的“Hyperlink”按钮，弹出“Hyperlink”对话框。单击“链接”项右侧 的图标，在打开的“选择文件”对话框中选择“img\1.jpg”图像文件，单击“确定” 按钮，回到“Hyperlink”对话框，在“目标”下拉列表中选择“_blank”，单击 “确定”按钮关闭对话框。
对内可以内嵌表格（table）、文本
（text）、图像和其他<div>标签等各种 HTML元素。其中所包含的元素属性可以 由<div>标签的属性来控制，或使用样式
表来控制。
— 16 —
案例一 制作鲜花导购网页的结构——HTML标签
案例步骤
步骤 03
为部分段落设置类名称。通过案例二的效果图可以看出，网页中有两个段落单独进 行了特殊的文字颜色及下划线效果设置。所以我们需要为它们设置相同的类名称， 以便使用CSS的类选择器来统一设置它们的外观。为此，在代码视图中找到这两个段 落的位置，手动为这两个段落标签设置相同的类名称p1。
— 17 —
案例一 制作鲜花导购网页的结构——HTML标签
案例步骤
步骤 04
保存文件。按【Ctrl+S】组合键保存网页，然后按【F12】键在浏览器中预览效果。 此时，鲜花导购网页的结构部分便已制作完成。
— 18 —
案例一 制作鲜花导购网页的结构——HTML标签
案例步骤
本案例中涉及的HTML标签如表2-1所示。
案例步骤
步骤 04 步骤 05
添加标题标签。回到设计视图，将插入点置于第1行的“花之语”文字左侧，在“插 入”面板中选择“结构”类别，然后单击“标题：H1”按钮。 此时在第1行插入1号标题文字“这是布局标题 1 标签的内容”，并且“花之语”文字 自动移到了第2行。将插入点置于第1行文字左侧，多次按【Delete】键删除所有文字， 直到“花之语”文字移到第1行，并应用1号标题样式。
— 20 —
案例一 制作鲜花导购网页的结构——HTML标签
1. HTML标题
代 码 <body> <h1>这是一号标题</h1> <h2>这是二号标题</h2> <h3>这是三号标题</h3> <h4>这是四号标题</h4> <h5>这是五号标题</h5> <h6>这是六号标题</h6> </body> 效 果
— 19 —
相当于一个容器
案例一 制作鲜花导购网页的结构——HTML标签
支撑知识点 一、HTML标题、水平线、段落和换行 1. HTML标题
标题的作用是让用户快速了解文档的结构与大致信息，它是通过<h1>～<h6> 等标签对进行定义的。<h1>标签对定义最大的一号标题；<h6>标签对定义最小的 六号标题。当为文字添加标题标签后，它会独立成一行显示。
— 1—
目录页
Contents Page
第2章 HTML标签 与CSS样式基础
案例一 制作鲜花导购网页的结构——HTML标签
案例二 修饰鲜花导购网页——CSS样式基础
— 2—
案例一 制作鲜花导购网页的结构——HTML标签
案例说明 网页主要由结构、表现和行为3 部分组成，结构是指网页的内容 部分，主要通过HTML语言实现， 我们可以直接编写HTML代码或 在Dreamweaver中进行可视化设 计，来制作网页的结构部分。 我们在浏览网页时看到的文字、 图像、动画等在HTML语言中都 是用标签来描述的。
案例步骤
知识库
超链接指向网站内部或外部的文档或其他元 素，单击它可以使浏览者从一个网页跳转到另一个 网页，或打开某个图像，下载某个文件等。在 Dreamweaver的设计视图中，除了可以通过“插 入”面板设置超链接外，还可以在文档中选中要设 置超链接的文本或图像等对象后，利用属性检查器 中的“链接”选项设置要链接到的目标对象。
— 3—
案例一 制作鲜花导购网页的结构——HTML标签
案例步骤
鲜花导购网页的结构部分主要包括输入文本、设置段落、设 置标题、设置超链接、插入水平线、设置列表和插入图像等 操作。 这些效果大部分可通过两种方式实现，一种是在 Dreamweaver的设计视图中进行可视化操作，Dreamweaver 会自动将设置的网页结构“翻译”成HTML代码；一种是直 接在Dreamweaver的代码视图中编写HTML代码。此处我们主 要在Dreamweaver的设计视图中进行操作，然后在代码视图 中学习相关的HTML代码。
— 15 —
案例一 制作鲜花导购网页的结构——HTML标签
案例步骤
步骤 02
使用相同的方法，选中“花之语”下面的一行超链接文字，为这些超链接文字添加 <div>标签，并设置id名为“link1”。此时切换到代码视图，可看到添加的<div>标签 和为它们设置的id属性。
提示
<div>相当于一个容器，由首标签 <div>和尾标签</div>构成，在该标签
1.
无序列表
代 码
<body> <ul> <li>咖啡</li> <li>牛奶</li> <li>奶茶</li>
效 果
</ul>
</body>
— 26 —
案例一 制作鲜花导购网页的结构——HTML标签
2. 有序列表
有序列表在列表项前都有编号，因此，浏览者可以清晰地了解每项的顺序。 其中<ol></ol>标签对用来定义有序列表，包含的列表项用<li></li>标签对定义，默 认序号为1、2、3。
案例一 制作鲜花导购网页的结构——HTML标签
案例步骤
步骤 02
插入列表和列表项标签。为了让文字更好地排列，我们为页面下方的文本添加列表 标签。确认已在设计视图中将“鲜花导购”下的每个花名用【Enter】键划分为不同 的段落，然后将这些文本全部选中，单击“插入”面板“结构”类别中的“ul 项目 列表”按钮，插入项目列表标签<ul></ul>和列表项标签<li></li>。
— 13 —
案例一 制作鲜花导购网页的结构——HTML标签
案例步骤
步骤 03
插入图像标签。在代码视图中将插入点放在“<h2>花的语言</h2>”后，然后单击 “插入”面板“常用”类别中的“图像:图像”选项，在弹出的对话框中选择“img” 文件夹中的“flower1.jpg”图像，将其插入到网页文档中。