淮海工学院计算机工程学院.ppt

1,2.3 HTML超文本标记语言,2,本节目标,会使用HTML的基本结构创建网页 会使用文本相关标签实现文字修饰和布局 会使用图像相关标签实现图文并茂的页面 会使用超链接相关标签实现页面间的跳转 会使用表格的基本结构实现简单表格 会使用表格相关标签实现跨行、跨列的复杂表格 会使用表格相关设置进行美化修饰 会使用表单的基本结构制作表单页面 会使用各种表单元素实现注册页面 能理解post和get两种提交方式的区别 会使用框架结构实现多窗口展示页面,3,1. HTML超文本标记语言,HTML（Hyper Text Markup Language，超文本标记语言）是一种建立超文本/超媒体文档的语言，它用标签（Tag）标记文档中的文本及图像等各种元素（如：文字、图象、声音、动画等各种资源）， 指示浏览器如何显示这些元素。所建立的文本文件的扩展名必须为html 或 htm。 用它编写的html文件可以被网上任何人浏览，浏览器是通过解释的方式来执行HTML代码，将信息展示给浏览者的。,4,HTML的历史,超文本标记语言HTML的发展历程如下图所示,5,HTML文件的基本结构, 我的第一个网页 Hello World! ,HTML 网页,头部部分,主体部分,标签标记 HTML 文档的开始和结束,网页标题,网页内容，可以是文本、图像等,这部分包含文本、图像和链接。它包括在 标签内,这部分包括标题和其他说明信息。包括在 标签内,6,使用记事本创建网页,使用记事本创建网页的步骤： 1、打开记事本 2、输入HTML代码 3、保存为*.html或*.htm文件，注意格式问题 4、打开网页预览效果,使用记事本创建网页,7,标签, 网页标题 ,网页页面中出现乱码，那如何消除乱码使其正常显示？,使用标签,简体中文：gb2312 繁体中文：big5 纯英文网页：iso-8859-1,可以避免页面中的乱码,8,页面背景色或背景图像, Hello World！ ,为了使页面美丽大方，网页背景要尽量地浅, Hello World! ,网页背景色彩,网页背景图像,9,文本相关标签,字体、字号 标题标签 标签 特殊符号 行的控制 段落标签 换行标签,使用了 ,换段了,设置了字体的大小和颜色,换行了,特殊符号,10,字体、字号相关标签,标题标签 . #=1, 2, 3, 4, 5, 6 说明：到 字体大小依 次递减, 一级标题 二级标题 三级标题 四级标题 五级标题 六级标题 ,H1 到 H6 标签用于指定不同级别的标题,11, . ,字体、字号相关标签,标签 特殊符号,字体的 大小值,字体的 颜色,字体的 类型,12,字体、字号相关标签, 手机充值、IP卡/电话卡 移动 All rights. ,空格效果,13,. 淘宝集市欢迎您！ 淘宝网首届翠友会！ ,行的控制相关标签,段落标签 段(Paragraph) (可以看作是空行) 换行标签,换段了,换行了,14,图像标签,常见的图片格式介绍,15,图像标签,图像的基本语法 , ,鼠标移到图像上，出现的提示性文字,图像的位置,图像的宽度,图像的高度,为图像添加的提示性文字,16,图像标签,图像与文本的对齐方式 ,图像与文本居中对齐,还可以取 top, bottom 值,. 请点击广告进入明星专区 ,图像和文本居中对齐,17,小练习,字号大小为3,编写如下图所示效果对应的html代码,18,文字布局,内容分隔标签 项目列表和编号 有序列表 无序列表 预格式文本标签,水平分隔线,有序列表,无序列表,用了预先定义好的格式,19,如何使用内容分隔标签, ,线的厚度值,线的宽度, 标签用于在页面上绘制水平线,线的颜色,20,如何使用列表,无序列表语法 列表项内容 有序列表语法 列表项内容 ,注册步骤： 填写信息 收电子邮件 注册成功 新人上路指南 如何激活会员名？ 如何注册淘宝会员？ 注册时密码设置有什么要求？ 支付宝认证 ,21,预格式文本标签,如何实现如下图所示的页面中的文字效果？,使用 标签可以实现,22,如何使用预格式文本标签, 腾讯-QQ币/QQ幻想-30元卡 一 口 价：26.45元 运 费：卖家承担运费 剩余时间：5天 宝贝类型： 全新 卖主声明：货到付款，可试用10天！ ,HTML中代码格式与浏览器中显示效果一样,23,页面链接标签,链接到其他页面 免费注册,链接内容,链接的地址, 链接到其他页面 免费注册 登录 ,单击“免费注册”之后链接到的页面,24,页面链接标签,链接到其他页面 相对路径 指定相对于当前文件的文件位置 绝对路径 指定从根目录到文件的完整路径,在同一个文件夹下有两个html文件，从一个文件超链接到另一个文件的路径有几种方式？,两种方式：相对路径和绝对路径,25,页面链接标签,要链接到同一目录 (C:HTML) 下的页面，可编写 或 ,相对路径名,绝对路径名,26,页面链接标签,要实现如下图所示的超链接效果，怎么办？,使用锚记标签,27,页面链接标签,链接到本页面 锚记标签用于使用户“跳”到文档的某个部分 HTML 的 NAME 属性用于创建锚标记 主题名称 为达到这种跳转效果，请在 HREF 参数中使用该标记 主题名称, 链接到其他页面 新人上路 新人上路指南 ,1、定义锚标记,2、链接到锚标记所在位置,28,页面链接标签,电子邮件链接 要链接电子邮件，可在链接标签中插入“mailto:邮箱地址” 站长信箱, 电子邮件链接 站长信箱 ,单击“站长信箱”链接后的输出结果,任何正确的电子邮箱地址均可,29,滚动标签, 滚动文字或图像 ,滚动延迟时间,滚动对象的方向,说明： scrolldelay：表示滚动延迟时间，默认值为90毫秒。 direction：表示滚动的方向，默认为从右向左。,30,水平滚动 垂直滚动 Avon化妆品 雅诗兰黛 ,水平向左移动,垂直向上移动,图片和文字同时垂直向上移动,声明滚动文字结束,声明滚动文字“水平滚动”开始，并且将会以默认方式从右向左滚动,31, 项目列表和链接的应用 填写代码 ,小练习,编写如下图所示效果对应的html代码,有序列表OL,无序列表UL,32,总结,哪个标签中的哪个属性可以改变字体颜色和字号？ 图像与文本的对齐方式有哪几种？ 项目列表和编号有何区别？分别适用什么场合？ 链接到其他页面时，路径的表示方法有两种：相对路径和绝对路径，二者有何区别和联系？,33,课堂练习 4熟悉HTML标记,在DW的“拆分”视图中，对比学习HTML的常用标记 在“设计视图”中完善练习3所制作的页面内容与形式，适当修改页面元素； 观察代码视图中的相应变化，加深对常用的HTML标记及其使用方法的理解记忆； 继续设计其它栏目的页面内容。,34,2. 表格标签,表格应用场合 论坛 门户网站 购物网站,35,为什么使用表格？,论坛中应用表格,门户网站应用表格,购物网站应用表格,36,表格的基本结构,行,列,单元格,在 HTML 文档中，广泛使用表格来存放网页上的文本和图像,37,表格的基本语法, 单元格内容 ,border用来设置表格边框尺寸大小,38,如何创建表格, 移动 联通 铁通 IBM 惠普 华硕 ,39,什么是跨行跨列的表格,跨3列,跨3行,下图中的表格哪里用了跨行？哪里用了跨列？ 跨了几行几列?,40,跨多列的表格, 学生成绩表 英语 数学 语文 95 98 89 ,COLSPAN=“n“ 属性表示跨多少列？,41,跨多行的表格, 早上菜谱 食物 鸡蛋 饮料 牛奶 甜点 开心粉 ,rowspan =“n“属性表示跨多少行？,42, 手机充值、IP卡 办公设备、文具 各种卡的总汇 铅笔 彩笔 打印 刻录 ,如何创建跨行跨列的表格,43,表格小练习,编写如下图所示效果对应的html代码,第一行第一个单元格跨了2行,此单元格跨了3列,44,什么是表格的美化修饰,根据理解,下面表格应该从哪些方面进行美化修饰？,45,如何设置表格的尺寸和边框, 品牌商城 笔记本电脑 办公设备、文具、耗材 惠普 华硕 打印机 刻录盘 ,width用来设置表格的宽度 height用来设置表格的高度,border用来设置表格边框尺寸大小,bordercolor用来设置表格边框颜色,46,如何设置背景, 笔记本电脑 办公设备、文具、耗材 ,background属性用来设置表格的背景图片,bgcolor属性用来设置表格、行、列的背景色。“#EBEFFF”是用RGB表示的一种颜色值，RGB指的是红绿蓝 ，下图就是RGB颜色对照表 。,47,如何设置对其方式, 笔记本电脑 办公设备、文具、耗材 惠普 华硕 打印机 刻录盘 ,align属性用来设置表格、行、列的对齐方式,48,为什么要使用填充属性,单元格里的内容太靠近边线，怎么办？,未填充的效果，字与单元格边框之间的距离靠得太近,49,什么是填充属性和间距属性,border(边框的厚度),cellpadding (单元格填充),cellspacing (单元格间距),50,如何使用填充、间距属性,border(边框的厚度),cellpadding (单元格填充),cellspacing (单元格间距), ,51,如何设置表格的填充属性, 笔记本电脑 办公设备、文具、耗材 . ,cellspacing属性用来设置表格内框宽度 cellpadding属性用来设置表格内填充距离,填充之后的效果,52,表格小练习,表格的高度、宽度、背景图像、边框和填充属性,行的背景色,单元格居中对齐,编写如下图所示效果对应的HTML代码,53,如何实现图文内容的布局，达到如左图所示页面的效果？ 分析上图所示页面，应该用什么进行布局？,什么是表格布局,使用表格进行布局,用表格对网页的内容进行整体控制,54,如何使用表格进行布局,使用表格布局下图，需要几行几列？,需要7行2列,55,如何使用表格进行布局, 超值变形金钢2.5折! 人们为啥对电视吼叫 ,56,编写如下图所示效果对应的html代码,表格练习,跨2行，并放了一副图片,此单元格放了一副图片,此单元格跨了3列,57,表格总结,创建表格最少需要那三个标签？ 简述表格的基本结构。 跨行跨列的表格，主要在什么情况下使用？ 给你一个表格，你会从哪些方面进行美化？,58,3. 表单和框架,表单的典型应用 注册用户 收集信息 反馈信息 为网站提供搜索工具,59,表单,注册用户,收集信息,60,表单包含的控件,单行文本输入框(TEXT),单选按钮(RADIO),复选框(CHECKBOX),下拉列表(SELECT),重置按钮(RESET),提交按钮(SUBMIT),多行文本框(TEXTAREA),密码框(PASSWORD),61,表单页面的基本结构,METHOD =“post或get“,ACTION,METHOD,指定提交后，由服务器上哪个处理程序处理,指定向服务器提交的方法: 一般为post或get方法, post方法比较安全,ACTION = “URL“, ,62,表单元素的统一格式, ,指定元素的类型，可为TEXT、RADIO、SUBMIT等,控件的名称,控件的初始值,控件的初始宽度,控件中输入的最多字符个数,控件是否被选中,63,表单元素的逐一介绍,文本框基本语法 , 名字： ,单行文本输入框，字符宽度为20,文本区的宽度,输入元素的默认值,文本输入框,64,表单元素的逐一介绍,密码框基本语法 ,密码区宽度,初始密码,密码框, 密码： ,密码框，22个字符宽度,65,表单元素的逐一介绍,单选按钮基本语法 ,初始值,单选按钮,默认选中, 性别： 男 ,设置此单选按钮被选中,66,表单元素的逐一介绍,复选框基本语法 ,复选框,复选框名,复选框值, 聊天 ,设置此复选框被选中,67,列表框基本语法, 说明： size确定列表中可同时看到的行数。 selected默认被选中的可选项。,表单元素的逐一介绍,出生日期： 日,设置此输入框最多只能输入四个符号,设置“选择月份”选项默认被选中,68,表单元素的逐一介绍,按钮基本语法 ,按钮名称,按钮类型可为button、submit,按钮上的显示文字, ,单击按钮，控件的值被重置为value属性中指定的初始值,69,多行文本框基本语法 文本框中的内容 ,文本框的名字,文本框的列数,文本框的行数, 欢迎阅读服务条款协议，本协议阐述之条款和条件适用于您使用Taobao网站的各种工具和服务。 本服务协议双方为淘宝与淘宝网用户，本服务协议具有合同效力。 淘宝的权利和义务 ,6行40个字符宽度的多行文本域,70,小练习,编写如左图所示效果对应的html代码 在网页设计中，表单的主要用途有哪些？,TEXT,PASSWORD,RADIO,TEXTAREA,SUBMIT,RESET,SELECT,CHECKBOX,71,框架,广告栏顶部框架(top.htm),导航栏左侧框架(left.htm),详细内容页面右侧框架 (main.htm),框架的边框,框架集页面(FrameSet.htm),72,框架使用场合,页面的一个固定部分显示徽标或静态信息,在另一个固定部分显示导航部分详细内容,在此处显示详细内容， 页面中此部分是变化的。,73, ,框架的基本结构,框架页面的基本语法,边框尺寸大小,将窗口分割成左中右3个部分,可选,将窗口分割成上下2个部分,可选,第一个窗口要显示的网页,74,框架的基本结构, rows_cols框架 ,将窗口分割成上中下3部分,如果要在浏览器中创建左中右三个窗口,该如何实现？,每个窗口对应一个页面，以及一个框架集页面，总共需要几个HTML页面文件？,窗口边框的宽度,75,如何创建多个复杂的窗口,要实现如下图所示的窗口，该如何制作？,1、分成上下两个窗口 2、把下面的窗口分成 左右两个窗口,top窗口,left 窗口,right窗口,76,如何创建多个复杂的窗口,创建多个复杂的窗口实现步骤如下： 1、创建一个HTML页面“top.html” 2、创建一个HTML页面“left.html” 3、创建一个HTML页面“right.html”,top.html效果图,left.html效果图,right.html效果,77,如何创建多个复杂的窗口,4、新建多框架HTML页面“Frame_Se