使用HTML制作网页

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

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

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

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

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

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

7、标签（horizontal row） 原文： 斜体标签 朝代:宋代加粗标签李清照小结小结1717 / / 5656小结小结2-22-2注释和特殊符号注释和特殊符号特殊符号字符实体示例空格 百度 | 新浪大于号()>如果时间>晚上6点，就坐车回家小于号()<如果时间<早上7点，就走路去上学引号()"W3C规范中，HTML的属性值必须用成对的"引起来版权符号©© 2003-2015众软小结小结 u 注释注释1818 /

8、 / 5656标签规范标签规范 u标签规范（标签规范（ XHTMLXHTML标签规范）：标签规范）：n标签名应小写nHTML标签应闭合n标签应正确嵌套n应添加文档类型声明 书写书写HTML页面时，请遵循页面时，请遵循XHTML标签规范标签规范注意注意1919 / / 5656课堂练习课堂练习u需求说明需求说明n标题用标题标签，人名加粗显示，时间斜体显示，并制作页面版权部分完成时间：完成时间：10分钟分钟共性问题集中讲解共性问题集中讲解2020 / / 5656图像标签图像标签2-12-1u常见的图像格式常见的图像格式图像类型优点缺点*.jpg体积小，较清晰.适合色彩丰富的图像有损压缩，画面失真

9、*.gif体积小、支持动画图片，较为常用的网页图片类型支持有限的透明度,效果不如其他PNG图片*.bmp支持24位颜色深度，兼容性好不支持压缩，容量大*.png最新的图片格式，兼有GIF和JPG的优势部分浏览器（IE.6）不支持透明2121 / / 5656图像标签图像标签2-22-2 图像路径图像路径（绝对路径绝对路径&相对路径相对路径）图像的替代文字图像的替代文字 语法语法鼠标悬停提示文字鼠标悬停提示文字图像宽度图像宽度图像高度图像高度 示例示例 演示示例：图像标签演示示例：图像标签2222 / / 5656超链接标签超链接标签 链接文本或图像链接文本或图像 链接路径链接路径链接在

10、哪个窗口打开链接在哪个窗口打开,常用值：常用值：_self、_blank 语法语法 示例示例 演示示例：超链接演示示例：超链接2323 / / 5656锚链接锚链接u锚链接锚链接n 从A页面的甲位置跳转到本页中的乙位置(同一页面)n 从A页面的甲位置跳转到B页面中的乙位置(两个页面)u创建步骤创建步骤n 创建跳转标记n 创建跳转链接乙位置乙位置甲位置甲位置 演示示例：锚链接演示示例：锚链接2424 / / 5656课堂练习课堂练习u需求说明需求说明n 制作家用电器排行榜页面n 标题使用标题标签n 家电名称加上超链接n 商品之间使用水平线分隔教员讲需求教员讲需求u 实现思路实现思路n 家用电器排

11、行榜放在标题标签中n 图像使用标签n 商品名称使用超链接标签n 商品之间使用标签实现分隔完成时间：完成时间：10分钟分钟共性问题集中讲解共性问题集中讲解2525 / / 5656HTMLHTML列表列表u无序列表无序列表u有序列表有序列表u定义列表定义列表2626 / / 5656无序列表无序列表u语法语法u说明说明n 没有顺序，每个标签独占一行n 默认标签项前有实心小圆点n 一般用于无序类型的列表，如导航，侧边栏新闻列表等 列表项内容一列表项内容一 列表项内容列表项内容x 列表项内容最后一项列表项内容最后一项2727 / / 5656有序列表有序列表u语法语法u说明说明n 有顺序，每个标签独

12、占一行n 默认标签项前有顺序标记n 可通过修改标签的type属性值(a,A等)更改n 一般用于排序类型的列表，如试卷，问卷选项等 列表项内容一列表项内容一 列表项内容列表项内容x 列表项内容最后一项列表项内容最后一项2828 / / 5656定义列表定义列表u语法语法u说明说明n没有顺序,每个、标签独占一行n默认没有标记 咖啡咖啡 黑色的热饮料黑色的热饮料 Milk 白色的冷饮料白色的冷饮料2929 / / 5656表单表单学习目标学习目标u了解什么是表单了解什么是表单u知道表单的作用知道表单的作用u掌握如何制作表单掌握如何制作表单3030 / / 5656为什么使用表单为什么使用表单 用户登

13、录用户登录/注册注册收集用户反收集用户反馈信息馈信息提供搜索提供搜索工具工具u 表单的典型应用表单的典型应用3131 / / 5656表单的执行原理表单的执行原理 Internet12客户端：请求登录客户端：请求登录，通过表单填写，通过表单填写账户信息账户信息服务器端：验证发服务器端：验证发来的账号信息，来的账号信息，然后给出反馈然后给出反馈客户端和服务器类似客户端和服务器类似两人沟通一样，从两人沟通一样，从而建立交互活动而建立交互活动u表单的典型应用：假定登录表单的典型应用：假定登录 126 126 邮箱邮箱3232 / / 5656单行文本框单行文本框(text)单选按钮单选按钮(radi

14、o)复选框复选框(checkbox)下拉列表下拉列表(select)重置按钮重置按钮(reset)提交按钮提交按钮(submit)密码框密码框(password)常见的表单元素常见的表单元素文本域文本域(textarea)文件选择框文件选择框(file)3333 / / 5656 文本框、按钮等表单元素文本框、按钮等表单元素 表单基本结构表单基本结构-标签标签语法语法action属性：属性： 如果为空则代表向当前页面提交method属性：属性：可选值 post | get get方法提交参数在地址栏可见 post方法一般用于多数据、保密数据提交 注意注意3434 / / 5656表单基本元素表

15、单基本元素-标签标签 语法语法type属性：属性：可选值 text（默认）、password、button、checkbox、radio等checked属性：属性： 仅与 或 配合使用，选中值为 checked 注意注意3535 / / 5656课堂演示课堂演示u需求说明需求说明n使用表单元素制作注册页面n要求：l制作注册页面内容l使用HTML基本标签完成 演示示例：商城注册页面演示示例：商城注册页面2-12-13636 / / 5656小结小结各类表单元素各类表单元素type功能例子text单行文本输入password密码radio单选男女checkbox多选书画reset重置表单数据fil

16、e文件上传submit提交表单数据hidden隐藏域button普通按钮小结小结3737 / / 5656课堂练习课堂练习u需求说明：需求说明：n完成网站登录页面完成时间：完成时间：10分钟分钟共性问题集中讲解共性问题集中讲解1、提交地址：、提交地址：login.html2、提交方法：、提交方法：post 3838 / / 5656其他表单元素其他表单元素 文本内容文本内容 u列表框列表框u文本域文本域3939 / / 5656u 关联表单元素关联表单元素 姓名姓名: 或或姓名姓名: 表单的高级用法表单的高级用法2-12-1点击点击label标签鼠标聚焦文本框中标签鼠标聚焦文本框中 语法语法示

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

18、钟分钟“协议协议”只读，只读，“提交提交”按钮禁用按钮禁用用隐藏域提交求职者用隐藏域提交求职者姓名姓名“zhangsan” 共性问题集中讲解共性问题集中讲解4343 / / 5656表格表格学习目标学习目标u掌握表格的基本结构掌握表格的基本结构u掌握表格跨行、跨列的实现方式掌握表格跨行、跨列的实现方式4444 / / 5656表格应用场景表格应用场景u哪里用到表格？哪里用到表格？论坛中应用论坛中应用表格表格系统中应用系统中应用表格表格4545 / / 5656 第第1个单元格的内容个单元格的内容 第第2个单元格的内容个单元格的内容 . 第第1个单元格的内容个单元格的内容 第第2个单元格的内容个

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