使用HTML制作网页[沐风书苑]

1、使用HTML制作网页 第二单元 静态网页制作 2 / 56 本门课程目标本门课程目标 u学完本门课程后，你能够：学完本门课程后，你能够： n使用HTML进行网页布局 n使用CSS美化网页 n使用JavaScript制作网页特效 3 / 56 课程项目展示课程项目展示 u当当网上书城当当网上书城 演示示例：演示示例：当当网上书城当当网上书城 4 / 56 本课任务本课任务 u制作图文并茂的简单网页制作图文并茂的简单网页 n李清照简介页面 n家用电器排行榜页面 4/37 5 / 56 本课目标本课目标 u学完本次课程后，你能够：学完本次课程后，你能够： n熟练掌握HTML基本结构创建网页 n熟练掌

2、握HTML的基本标签 n掌握超链接标签制作页面导航 n熟练掌握表格标签制作网页表格 n会使用表单标签制作提交页面 n了解XHTML框架结构 6 / 56 什么是什么是HTMLHTML uHTMLHTML nHyper Text Markup Language（超文本标记语言） 超文本包括：文字、图超文本包括：文字、图 片、音频、视频、动片、音频、视频、动 画等画等 7 / 56 HTMLHTML的发展史的发展史 uHTMLHTML的发展史的发展史 1993-6 超文本标记语言 1995-11 HTML2.0 HTML3.2 1996-1-14 HTML4.0 1997-12-18 HTML4.

3、01 1999-12-24 XHTML1.0 2000-1-26 XHTML1.1 2001-5-31 XHTML2.0 HTML5 2014-10-28 8 / 56 W3CW3C标准标准 uW3CW3C： nWorld Wide Web Consortium（万维网联盟） n成立于1994年，Web技术领域最权威和具影响力的国 际中立性技术标准机构 n/ n/ uW3CW3C标准包括标准包括: : n结构化标准语言（XHTML 、XML） n表现标准语言（CSS） n行为标准（DOM、ECMAScript ） 9

4、/ 56 网页开发软件网页开发软件 uTXTTXT记事本记事本 uEditPlusEditPlus uDreamWeaverDreamWeaver 演示示例：演示示例： 使用软件演示新建网页使用软件演示新建网页 10 / 56 HTMLHTML基本结构基本结构 uHTMLHTML网页基本结构网页基本结构 网页标题网页标题 网页内容网页内容 网页头部（用于设置网网页头部（用于设置网 页的一些属性）页的一些属性） 主体部分（网页内容主体部分（网页内容 编辑区）编辑区） 1、等成对的标签，分别叫开放标签开放标签和闭合标签闭合标签; 2、单独呈现的标签（空元素），如 ；意为用 / 来关闭空元素; 注意

5、注意 11 / 56 页面规范声明页面规范声明 uDOCTYPEDOCTYPE声明声明 （告诉浏览器使用什么规范）（告诉浏览器使用什么规范） 标题标题 网页内容网页内容 XHTML 1.0 版本版本 12 / 56 网页编码设置网页编码设置 u标签标签 - - 用于定义文件信息用于定义文件信息 推荐推荐utf-8，还可设置为，还可设置为 gb2312 1、 gb2312包含全部中文字符; utf-8 则包含全世界所有国家需要用到的字符 2、 页面编码应与页面文件保存时的编码一致 注意注意 给标签设置不同属性，具体不同的功能给标签设置不同属性，具体不同的功能 13 / 56 案例分析案例分析 u

6、案例分析案例分析 HTML 14 / 56 网页分析网页分析 标题标签标题标签 斜体标签斜体标签 粗体标签粗体标签 特殊符号特殊符号 (空格空格) 换行标签换行标签 水平线标签水平线标签 段落标签段落标签 15 / 56 课堂演示课堂演示 u需求说明：需求说明： n制作清平乐诗词网页 n要求：使用HTML标签实现 演示示例：制作清平乐诗词网页演示示例：制作清平乐诗词网页 16 / 56 小结小结2-12-1 网页基本标签元素网页基本标签元素 标签说明例子 标题标签(head)清平乐年年雪里 段落标签 （paragraph） 年年雪里，常插梅花醉. 换行标签 （break row） 原文： 水平

7、线标签 （horizontal row） 原文： 斜体标签 朝代:宋代 加粗标签李清照 小结小结 17 / 56 小结小结2-22-2 注释和特殊符号注释和特殊符号 特殊符号字符实体示例 空格 百度|新浪 大于号()如果时间晚上6点，就坐车回家 小于号()如果时间早上7点，就走路去上学 引号()W3C规范中，HTML的属性值必须用成对的引起来 版权符号 2003-2015众软 小结小结 u注释注释 18 / 56 标签规范标签规范 u标签规范（标签规范（ XHTML XHTML标签规范）：标签规范）： n标签名应小写 nHTML标签应闭合 n标签应正确嵌套 n应添加文档类型声明 书写书写HTM

8、L页面时，请遵循页面时，请遵循XHTML标签规范标签规范 注意注意 19 / 56 课堂练习课堂练习 u需求说明需求说明 n标题用标题标签，人名加粗显示，时间斜体显示， 并制作页面版权部分 完成时间：完成时间：10分钟分钟 共性问题集中讲解共性问题集中讲解 20 / 56 图像标签图像标签2-12-1 u常见的图像格式常见的图像格式 图像类型优点缺点 *.jpg体积小，较清晰.适合色彩丰富的 图像 有损压缩，画面失真 *.gif 体积小、支持动画图片，较为常 用的网页图片类型 支持有限的透明度,效果不如其他 PNG图片 *.bmp支持24位颜色深度，兼容性好不支持压缩，容量大 *.png 最新

9、的图片格式，兼有GIF和JPG 的优势 部分浏览器（IE.6）不支持透明 21 / 56 图像标签图像标签2-22-2 图像路径图像路径 （绝对路径绝对路径&相对路径相对路径） 图像的替代文字图像的替代文字 语法语法 鼠标悬停提示文字鼠标悬停提示文字 图像宽度图像宽度 图像高度图像高度 示例示例 演示示例：图像标签演示示例：图像标签 22 / 56 超链接标签超链接标签 链接文本或图像链接文本或图像 链接路径链接路径 链接在哪个窗口打开链接在哪个窗口打开,常用值：常用值： _self、_blank 语法语法 示例示例 演示示例：超链接演示示例：超链接 23 / 56 锚链接锚链接 u锚链接锚链

10、接 n 从A页面的甲位置跳转到本页中的乙位置(同一页面) n 从A页面的甲位置跳转到B页面中的乙位置(两个页面) u创建步骤创建步骤 n 创建跳转标记 n 创建跳转链接 乙位置乙位置 甲位置甲位置 演示示例：锚链接演示示例：锚链接 24 / 56 课堂练习课堂练习 u需求说明需求说明 n 制作家用电器排行榜页面 n 标题使用标题标签 n 家电名称加上超链接 n 商品之间使用水平线分隔 教员讲需求教员讲需求 u 实现思路实现思路 n 家用电器排行榜放在标题标签中 n 图像使用标签 n 商品名称使用超链接标签 n 商品之间使用标签实现分隔 完成时间：完成时间：10分钟分钟 共性问题集中讲解共性问题

11、集中讲解 25 / 56 HTMLHTML列表列表 u无序列表无序列表 u有序列表有序列表 u定义列表定义列表 26 / 56 无序列表无序列表 u语法语法 u说明说明 n 没有顺序，每个标签独占一行 n 默认标签项前有实心小圆点 n 一般用于无序类型的列表，如导航，侧边栏新闻列表等 列表项内容一列表项内容一 列表项内容列表项内容x 列表项内容最后一项列表项内容最后一项 27 / 56 有序列表有序列表 u语法语法 u说明说明 n 有顺序，每个标签独占一行 n 默认标签项前有顺序标记 n 可通过修改标签的type属性值(a,A等)更改 n 一般用于排序类型的列表，如试卷，问卷选项等 列表项内容

12、一列表项内容一 列表项内容列表项内容x 列表项内容最后一项列表项内容最后一项 28 / 56 定义列表定义列表 u语法语法 u说明说明 n没有顺序,每个、标签独占一行 n默认没有标记 咖啡咖啡 黑色的热饮料黑色的热饮料 Milk 白色的冷饮料白色的冷饮料 29 / 56 表单表单学习目标学习目标 u了解什么是表单了解什么是表单 u知道表单的作用知道表单的作用 u掌握如何制作表单掌握如何制作表单 30 / 56 为什么使用表单为什么使用表单 用户登录用户登录 /注册注册 收集用户反收集用户反 馈信息馈信息 提供搜索提供搜索 工具工具 u 表单的典型应用表单的典型应用 31 / 56 表单的执行原

13、理表单的执行原理 Internet 1 2 客户端：请求登录客户端：请求登录 ，通过表单填写，通过表单填写 账户信息账户信息 服务器端：验证发服务器端：验证发 来的账号信息，来的账号信息， 然后给出反馈然后给出反馈 客户端和服务器类似客户端和服务器类似 两人沟通一样，从两人沟通一样，从 而建立交互活动而建立交互活动 u表单的典型应用：假定登录表单的典型应用：假定登录 126 126 邮箱邮箱 32 / 56 单行文本框单行文本框 (text) 单选按钮单选按钮 (radio) 复选框复选框 (checkbox) 下拉列表下拉列表 (select) 重置按钮重置按钮 (reset) 提交按钮提交

14、按钮 (submit) 密码框密码框 (password) 常见的表单元素常见的表单元素 文本域文本域 (textarea) 文件选择框文件选择框 (file) 33 / 56 文本框、按钮等表单元素文本框、按钮等表单元素 表单基本结构表单基本结构-标签标签 语法语法 action属性：属性： 如果为空则代表向当前页面提交 method属性：属性：可选值 post | get get方法提交参数在地址栏可见 post方法一般用于多数据、保密数据提交 注意注意 34 / 56 表单基本元素表单基本元素-标签标签 语法语法 type属性：属性：可选值 text（默认）、password、butto

15、n、checkbox、radio等 checked属性：属性： 仅与 或 配合 使用，选中值为 checked 注意注意 35 / 56 课堂演示课堂演示 u需求说明需求说明 n使用表单元素制作注册页面 n要求： l制作注册页面内容 l使用HTML基本标签完成 演示示例：商城注册页面演示示例：商城注册页面2-12-1 36 / 56 小结小结 各类表单元素各类表单元素 type功能例子 text单行文本输入 password密码 radio单选 男 女 checkbox多选 书 画 reset重置表单数据 file文件上传 submit提交表单数据 hidden隐藏域 button普通按钮 小

16、结小结 37 / 56 课堂练习课堂练习 u需求说明：需求说明： n完成网站登录页面 完成时间：完成时间：10分钟分钟 共性问题集中讲解共性问题集中讲解 1、提交地址：、提交地址：login.html 2、提交方法：、提交方法：post 38 / 56 其他表单元素其他表单元素 文本内容文本内容 u列表框列表框 u文本域文本域 39 / 56 u 关联表单元素关联表单元素 姓名姓名: 或或 姓名姓名: 表单的高级用法表单的高级用法2-12-1 点击点击label标签鼠标聚焦文本框中标签鼠标聚焦文本框中 语法语法 示例示例 40 / 56 u只读属性只读属性 n readonly：希望某个框内的

17、内容只允许用户看，不能修改 u禁用属性禁用属性 n disabled：因没达到使用的条件，限制用户使用 u示例示例 表单的高级用法表单的高级用法2-2 2-2 41 / 56 课堂演示课堂演示 u需求说明需求说明 n使用表单元素制作注册页面 n要求 l继续完善注册页面 l完成“出生日期”项 l完成“注册条款”项 l给输入框加上关联元素标签 演示示例：商城注册页面演示示例：商城注册页面2-22-2 42 / 56 课堂练习课堂练习 u需求说明：需求说明： n使用表单相关标签制作简易求 职表表单 完成时间：完成时间：10分钟分钟 “协议协议”只读，只读，“提交提交” 按钮禁用按钮禁用 用隐藏域提交

18、求职者用隐藏域提交求职者 姓名姓名“zhangsan” 共性问题集中讲解共性问题集中讲解 43 / 56 表格表格学习目标学习目标 u掌握表格的基本结构掌握表格的基本结构 u掌握表格跨行、跨列的实现方式掌握表格跨行、跨列的实现方式 44 / 56 表格应用场景表格应用场景 u哪里用到表格？哪里用到表格？ 论坛中应用论坛中应用 表格表格 系统中应用系统中应用 表格表格 45 / 56 第第1个单元格的内容个单元格的内容 第第2个单元格的内容个单元格的内容 . 第第1个单元格的内容个单元格的内容 第第2个单元格的内容个单元格的内容 . 表格基本语法表格基本语法 语法语法 演示示例：表格基本组成演示

19、示例：表格基本组成 标签定标签定 义列义列 标签定义标签定义 表格表格 46 / 56 表格的属性表格的属性 u表格常用属性表格常用属性 属性名功能 width/height表格的宽/高，单位可以为像素（px）或百分比（%） border默认为表格边框为 0 （无边框），可设置为数值 cellspacing控制单元格之间的间距，可设置为数值 cellpadding控制单元格边框和其内容的间距，可设置为数值 align 设置文本的水平对齐方式，可为left（左对齐，默认）， center（居中对齐），right（右对齐） valign 设置文本的数值方向对齐方式，可为top（顶部）， middle（竖直居中），bottom（底部） bgcolor设置背景色，如red，#fff，rgb(255,0,0) 47 / 56 u表格的分组标签表格的分组标签 表格高级标签表格高级标签 表格标题表格标题 数据主体数据主体 页眉页眉 页脚页脚 表头表头 演示示例：报