2.3 HTML超文本标记语言.

Slides:



Advertisements
Similar presentations
第5章 表格的设计与 制作. 内容提要 表格的创建、编辑 表格的属性设置 特效表格的制作 布局表格的基本操作 表格和布局表格的应用.
Advertisements

Web 开发基础 第二章 表格与页面布局. 回顾 Internet 和 万维网 网页的工作原理 网页的基本结构 标记及其属性 段落标记,图片标记,超级链接标记 相对路径,绝对路径,物理路径.
HyperText Markup Language
《计算机网络技术》 动态网页制作技术 常用HTML控件课程积件 杨 姝.
第六章 网页设计与制作基础.
ASP.NET 網頁製作教本 -- 從基本語法學起
项目2 字符格式和段落编排 2017年3月7日6时54分.
HTML第一课 李 伟 HTML开发语言基础.
第5章 HTML 標籤介紹.
佛山科学技术学院 第7章 HTML Internet及多媒体应用.
第8讲 HTML与PHP基础 静态网页 vs. 动态网页.
网页制作 第一讲
动态网页制作 第1章 HTML语言1.
第一章 什么是程序 程序是怎么开发出来的 编译 连接 运行 什么是 IDE 编译和调试 HTML的基本标签.
HTML概念 HTML(Hyper Text Markup Language 超文本标识语言) 是一种用来制作超文本文档的简单标记语言。
第7章 表 格 清华大学出版社.
教学内容 1、演示并讲解用表格布局制作的网页 2、用表格制作网页.
DREAMWEVAER MX 2004入门 楼斌 BBS ID:lou 生命科学学院
网页 设计与制作.
第3章 HTML语言 3.1 HTML文档的基本结构 3.2 文字排版 3.3 图片排版 3.4 超级链接 3.5 表格 3.6 框架窗口
模块1 网页设计基础 实训1 体验HTML文档 1.1 网页基础知识 1.2 网站配色方案 1.3 网站设计常用软件
使用HTML製作個人網頁 柴惠敏 台灣大學 物理治療學系.
第二部分 HTML语言控制 本次课的主要内容: 1、认识网页文件的结构 2、HEAD、TITLE、BODY等基本标记符的使用
HTML 語法教學 授課:彭穎聰 老師.
HTML簡介、文字的變化、超連結的使用 主講:朱漢琳.
CT212 (02/03)-Network Programming and design
網際網路的應用服務 – Web 概念與網頁語言
第二章 網際網路網頁的設計.
HTML.
ASP动态网页设计实用教程 主讲教师: 开课单位:.
  本章共分21个实例,主要内容包括HTML 创建与测试、html的文档结构、常用标记的使 用、表格和层的使用技灵活掌握等内容。
网页制作 第五讲 Dreamweaver基础.
第3章 超文本标记语言(HTML) 3.1 基本结构标记 3.2 文本格式标记 3.3 超链接标记<A></A>
建國技術學院資訊管理學系 饒瑞佶 2004/7/5 彰化縣政府補助辦理網頁設計資料庫應用班 建國技術學院資訊管理學系 饒瑞佶 2004/7/5.
PHP程式設計 二、HTML & PHP基本語法 建國科技大學 資訊管理學系 饒瑞佶.
湖北职院计科系.
第 2 章 必備的 HTML 與 CSS 重點.
第四章 網頁表單與資料傳遞.
Introduction to PHP part3
HTML網頁設計 Chapter 建置網站的流程 16-2 從事網頁設計相關的程式語言 16-3 認識HTML語法
HTML 钟晖云 QQ:
Ch.13 HTML網頁實作.
第2章 超文本标记语言HTML.
8 网页制作基础知识 赵国庆 博士 北京师范大学教育技术学院
W3C标准网页制作 主讲教师:张 涛.
授课教师:姬广永 QQ: TEL: 学习交流网站:
网 站 设 计 与 建 设 Website design and developments
HTML & CSS.
主讲:陶建平 华中科技大学网络与计算中心
网页设计与制作 网页基本标签(三) 北京农业职业学院刘丽霞.
网 站 设 计 与 建 设 Website design and developments
网页制作基础 CNIC 王桦.
网站设计 前端 选择器(复习),表单.
W3C标准网页制作 主讲教师:张 涛.
网页设计与制作教程第5版 机械工业出版社同名教材 配套电子教案.
程式語言與邏輯 高慧君 台北市立南港高中 2006年12月22日.
编程作业3:网页正文抽取 (10分).
Prepared by : Au Kit Ming
表格页面 表格标签 1、标题标签<Caption>用于定义表格的标题。 align属性:控制标题位置。 取值为:
网 站 设 计 与 建 设 Website design and developments
计算机网络与网页制作 Chapter 07:Dreamweaver CS5入门
项目二:HTML语言基础.
成绩是怎么算出来的? 16级第一学期半期考试成绩 班级 姓名 语文 数学 英语 政治 历史 地理 物理 化学 生物 总分 1 张三1 115
段磊 王慧锋 TEL: 数据库系统原理课程设计 实验环节4 段磊 王慧锋 TEL:
第6章 PHP的数据采集.
第6章 框架实现多窗口网页.
第2章 块级标签 经济管理学院.
表单页面 表单是用户利用浏览器对Web站点网络数据库进行查询的一种界面,用户利用表单可以输入信息或选择选项等,然后将这些信息提交给服务器进行处理。通过表单,既可以将浏览器的信息发送到Internet服务器上,同时表单也可以使用户与站点的浏览者交互或从浏览者那里收集信息。它是网页的设计者和使用者相互交流的工具。表单对象包括文本域(单行、多行、密码)、列表、菜单、复选框、单选框、按钮等。
HTML5.
教师:李金双 网页制作 教师:李金双
Presentation transcript:

2.3 HTML超文本标记语言

本节目标 会使用HTML的基本结构创建网页 会使用文本相关标签实现文字修饰和布局 会使用图像相关标签实现图文并茂的页面 会使用超链接相关标签实现页面间的跳转 会使用表格的基本结构实现简单表格 会使用表格相关标签实现跨行、跨列的复杂表格 会使用表格相关设置进行美化修饰 会使用表单的基本结构制作表单页面 会使用各种表单元素实现注册页面 能理解post和get两种提交方式的区别 会使用框架结构实现多窗口展示页面

1. HTML超文本标记语言 HTML(Hyper Text Markup Language,超文本标记语言)是一种建立超文本/超媒体文档的语言,它用标签(Tag)标记文档中的文本及图像等各种元素(如:文字、图象、声音、动画等各种资源), 指示浏览器如何显示这些元素。所建立的文本文件的扩展名必须为html 或 htm。 用它编写的html文件可以被网上任何人浏览,浏览器是通过解释的方式来执行HTML代码,将信息展示给浏览者的。

HTML的历史 超文本标记语言HTML的发展历程如下图所示 GML(1969) HTML(1993) CML SGML(1985) HTML(1993) XML(1998) XHTML(2000) CML VML Generalized Markup Language(广义标记语言) Standard Generalized Markup Language(标准广义标记语言) Hyper Text Markup Language(超文本标记语言) eXtensible Markup Language(可扩展标记语言) ……

<HTML>…</HTML>标签标记 HTML 文档的开始和结束 <HEAD> <TITLE>我的第一个网页 </TITLE> </HEAD> <BODY > Hello World! </BODY> </HTML> 网页标题 <HEAD>头部部分 HTML 网页 <BODY>主体部分 网页内容,可以是文本、图像等 <HTML>…</HTML>标签标记 HTML 文档的开始和结束 这部分包含文本、图像和链接。它包括在 <BODY>…</BODY> 标签内 这部分包括标题和其他说明信息。包括在 <HEAD>…</HEAD> 标签内

使用记事本创建网页 使用记事本创建网页 使用记事本创建网页的步骤: 1、打开记事本 2、输入HTML代码 3、保存为*.html或*.htm文件,注意格式问题 4、打开网页预览效果

<META>标签 网页页面中出现乱码,那如何消除乱码使其正常显示? 使用<META>标签 简体中文:gb2312 繁体中文:big5 纯英文网页:iso-8859-1 <HEAD> <META http-equiv="Content-Type" content="text/html; charset=gb2312"> <TITLE>网页标题</TITLE> </HEAD> 可以避免页面中的乱码

页面背景色或背景图像 网页背景色彩 网页背景图像 <BODY bgcolor="#FFCCFF" background="back_image.GIF" > Hello World! </BODY> …… <BODY bgcolor="#FFCCFF"> Hello World! </BODY> 为了使页面美丽大方,网页背景要尽量地浅

文本相关标签 字体、字号 行的控制 标题标签<H1>-<H6> <FONT>标签 特殊符号 设置了字体的大小和颜色 字体、字号 标题标签<H1>-<H6> <FONT>标签 特殊符号 行的控制 段落标签<P> 换行标签<BR> 使用了 <H2>… <H2> 换段了 换行了 特殊符号

字体、字号相关标签 标题标签 <H#> ... </H#> #=1, 2, 3, 4, 5, 6 字体大小依 次递减 …… <BODY> <H1>一级标题</H1> <H2>二级标题</H2> <H3>三级标题</H3> <H4>四级标题</H4> <H5>五级标题</H5> <H6>六级标题</H6> </BODY> H1 到 H6 标签用于指定不同级别的标题

字体、字号相关标签 <FONT>标签 特殊符号 特殊字符 转义码 空格   引号(“”) " 字体的 大小值 <FONT>标签 特殊符号 <FONT size=“+2” color=“red” face=“隶书” > ... </FONT> 字体的 类型 字体的 颜色 特殊字符 转义码 空格   引号(“”) " 小于(<) < 大于(>) > 版权号(© ) ©

字体、字号相关标签 ...... <BODY> <P> <FONT size="+2" color="red" > 手机充值、IP卡/电话卡 </FONT><BR /> 移动 |  100 |  联通 |  50</P> Copyright © 2007 "淘宝网" All rights. </BODY> …… 空格效果

行的控制相关标签 段落标签<P> 段(Paragraph) (可以看作是空行) <p> 换行标签<BR> ……. <P align="center">淘宝集市欢迎您!</P> <P align="left">淘宝网首届翠友会!<BR> …… </P> 换段了 换行了

图像标签 常见的图片格式介绍 图像类型 优点 缺点 适用场合 制作工具 *.jpg 体积小,比较清晰 有损压缩 、画面失真 网页图片 Photoshop *.gif 支持 Internet 标准 ,支持无损耗压缩和透明度,很流行 支持有限的透明度,效果不如别的图像 *.swf 体积小,便于网络传输 制作麻烦 网页动画 Flash *.bmp 支持 24 位颜色深度,兼容性好 不支持压缩 容量大 桌面墙纸 photoshop

图像标签 图像的位置 为图像添加的提示性文字 图像的基本语法 <IMG src="images/adv_2.jpg" width="300"height="150"alt="明星演唱会开幕" > 图像的宽度 图像的高度 …… <BODY> <IMG src="images/adv_2.jpg" alt="明星演唱会开幕" width="300"height="150"> </BODY> 鼠标移到图像上,出现的提示性文字

图像标签 图像与文本的对齐方式 <IMG align="middle"> 图像与文本居中对齐,还可以取 top, bottom 值 图像和文本居中对齐 …. <BODY> <IMG align="middle" src="images/adv_2.jpg" width="180" height="95" border="0" /> 请点击广告进入明星专区 </BODY> ……

小练习 编写如下图所示效果对应的html代码 字号大小为3

文字布局 内容分隔<HR>标签 项目列表和编号 有序列表<OL> 无序列表<UL> 预格式文本<PRE>标签 水平分隔线<HR> 有序列表 无序列表 用了预先定义好的格式

如何使用内容分隔<HR>标签 线的厚度值 线的宽度 线的颜色 <HR size="5" color="red" width="300"> …… <BODY> <HR size="5" color="red" width="300"> <HR size="10" color="black" width="200"> <HR size="5" color="#0000FF" width="50%"> </BODY> <HR> 标签用于在页面上绘制水平线

如何使用列表 无序列表语法 有序列表语法 <UL> <LI>列表项内容 </LI> …… <OL > </OL> <H4>注册步骤:</H4> <OL type="1" > <LI>填写信息</LI> <LI>收电子邮件</LI> <LI>注册成功 </LI> </OL> 新人上路指南 <UL type="circle"> <LI>如何激活会员名? </LI> <LI>如何注册淘宝会员? </LI> <LI>注册时密码设置有什么要求?</LI> <LI>支付宝认证</LI> </UL>

预格式文本<PRE>标签 如何实现如下图所示的页面中的文字效果? 使用<PRE> 标签可以实现

如何使用预格式文本<PRE>标签 <IMG src="images/QQ.JPG" width="159" height="133" align="left"> 腾讯-QQ币/QQ幻想-30元卡 一 口 价:26.45元 运 费:卖家承担运费 剩余时间:5天 宝贝类型: 全新 卖主声明:货到付款,可试用10天! </PRE> HTML中代码格式与浏览器中显示效果一样

页面链接<A>标签 链接到其他页面 <HTML> <HEAD> <TITLE>链接到其他页面</TITLE> </HEAD> <BODY> <A href="register/register.html">[免费注册]</A> <A href="login/login.htm">[登录]</A> </BODY> </HTML> 链接到其他页面 <A href="register/register.html">[免费注册]</A> 链接的地址 链接内容 单击“[免费注册]”之后链接到的页面

页面链接<A>标签 链接到其他页面 在同一个文件夹下有两个html文件,从一个文件超链接到另一个文件的路径有几种方式? 相对路径 两种方式:相对路径和绝对路径 链接到其他页面 相对路径 指定相对于当前文件的文件位置 绝对路径 指定从根目录到文件的完整路径

页面链接<A>标签 要链接到同一目录 (C:\HTML) 下的页面,可编写 <A HREF = "Doc1.html"> 或 <A HREF = "C:\HTML\Doc2.html"> 相对路径名 绝对路径名

页面链接<A>标签 要实现如下图所示的超链接效果,怎么办? 使用锚记标签

页面链接<A>标签 链接到本页面 锚记标签用于使用户“跳”到文档的某个部分 HTML 的 NAME 属性用于创建锚标记 <A NAME = "marker">主题名称</A> 为达到这种跳转效果,请在 HREF 参数中使用该标记 <A HREF= "#marker">主题名称</A> <HTML> <HEAD> <TITLE>链接到其他页面</TITLE> </HEAD> <BODY> <A href="#helpme">[新人上路]</A> …… <A name="helpme">新人上路指南</A> </BODY> </HTML> 2、链接到锚标记所在位置 1、定义锚标记

页面链接<A>标签 电子邮件链接 要链接电子邮件,可在链接标签中插入“mailto:邮箱地址” <A href="mailto:webmaster@sohu.com">站长信箱</A> 单击“站长信箱”链接后的输出结果 <HTML> <HEAD> <TITLE>电子邮件链接</TITLE> </HEAD> <BODY> …… <A href="mailto: taobaoWebMater@taobao.com "> 站长信箱</A> </BODY> </HTML> 任何正确的电子邮箱地址均可

滚动<MARQUEE>标签 说明: scrolldelay:表示滚动延迟时间,默认值为90毫秒。 <MARQUEE scrolldelay ="100" direction="up" > 滚动文字或图像 </MARQUEE> 滚动延迟时间 滚动对象的方向 说明: scrolldelay:表示滚动延迟时间,默认值为90毫秒。 direction:表示滚动的方向,默认为从右向左。

声明滚动文字“水平滚动”开始,并且将会以默认方式从右向左滚动 声明滚动文字结束 <MARQUEE scrolldelay ="100" >水平滚动</MARQUEE> <MARQUEE scrolldelay ="200" direction="up" >垂直滚动</MARQUEE> <MARQUEE scrolldelay ="300" direction="up" onmouseover="this.stop()" onMouseOut="this.start()"> <A href="#"><IMG src="images/scroll/1.gif" border="0" align="middle"> Avon化妆品</A><BR> <A href="#"><IMG src="images/scroll/2.gif" border="0" align="middle"> 雅诗兰黛 </A><BR> …… </MARQUEE> 水平向左移动 垂直向上移动 图片和文字同时垂直向上移动

小练习 编写如下图所示效果对应的html代码 <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=gb2312"> <TITLE>项目列表和链接的应用</TITLE> </HEAD> <BODY> 填写代码 </BODY> </HTML> 有序列表OL 无序列表UL

总结 哪个标签中的哪个属性可以改变字体颜色和字号? 图像与文本的对齐方式有哪几种? 项目列表和编号有何区别?分别适用什么场合? 链接到其他页面时,路径的表示方法有两种:相对路径和绝对路径,二者有何区别和联系?

课堂练习 4——熟悉HTML标记 在DW的“拆分”视图中,对比学习HTML的常用标记—— 在“设计视图”中完善练习3所制作的页面内容与形式,适当修改页面元素; 观察代码视图中的相应变化,加深对常用的HTML标记及其使用方法的理解记忆; 继续设计其它栏目的页面内容。

2. 表格标签 表格应用场合 论坛 门户网站 购物网站

为什么使用表格? 论坛中应用表格 门户网站应用表格 购物网站应用表格

在 HTML 文档中,广泛使用表格来存放网页上的文本和图像 表格的基本结构 列 单元格 行 在 HTML 文档中,广泛使用表格来存放网页上的文本和图像

表格的基本语法 border用来设置表格边框尺寸大小 <TABLE border="1"> <TR> <TD> 单元格内容 </TD> …… </TR> </TABLE> <TABLE>...</ TABLE >定义表格 <TR>…</TR> 定义行 <TD>…</TD> 定义列

如何创建表格 <TABLE border="2"> <TR> <TD>移动</TD> <TD>IBM </TD> <TD>惠普</TD> <TD>华硕</TD> </TABLE>

什么是跨行跨列的表格 下图中的表格哪里用了跨行?哪里用了跨列? 跨了几行几列? 跨3列 跨3行

跨多列的表格 COLSPAN="n" 属性表示跨多少列? <TABLE border="2"> <TR> <TD colspan="3">学生成绩表</TD> </TR> <TD >英语</TD> <TD >数学</TD> <TD >语文</TD> <TD>95</TD> <TD>98</TD> <TD>89</TD> </TABLE>

跨多行的表格 rowspan ="n"属性表示跨多少行? <TABLE border="1"> <TR> <TD rowspan="3" >早上菜谱 </TD> <TD >食物</TD> <TD >鸡蛋</TD> </TR> <TD >饮料</TD> <TD >牛奶</TD> <TD>甜点</TD> <TD>开心粉</TD> </TABLE>

如何创建跨行跨列的表格 <TABLE border="1"> <TR> <TD>手机充值、IP卡 </TD> <TD colspan="2">办公设备、文具</TD> </TR> <TD rowspan="2">各种卡的总汇</TD> <TD>铅笔</TD> <TD>彩笔</TD> <TD>打印</TD> <TD>刻录</TD> </TABLE>

表格小练习 编写如下图所示效果对应的html代码 第一行第一个单元格跨了2行 此单元格跨了3列

什么是表格的美化修饰 根据理解,下面表格应该从哪些方面进行美化修饰? 背景图片 表格的高度 背景色 文字对 齐方式 表格的宽度

bordercolor用来设置表格边框颜色 如何设置表格的尺寸和边框 width用来设置表格的宽度 height用来设置表格的高度 border用来设置表格边框尺寸大小 <TABLE width=“400" height=“200” border="15" bordercolor="red"> <TR> <TD colspan="4"> 品牌商城</TD> </TR> <TD colspan="2" >笔记本电脑</TD> <TD colspan="2" >办公设备、文具、耗材</TD> <TD >惠普</TD> <TD >华硕</TD> <TD >打印机</TD> <TD >刻录盘</TD> </TABLE> bordercolor用来设置表格边框颜色

如何设置背景 background属性用来设置表格的背景图片 <TABLE background="images/type_back.jpg" width="360" height="120" border="2" > <TR> <TD colspan="6"> </TD> </TR> <TR bgcolor="#EBEFFF"> <TD colspan="3" >笔记本电脑</TD> <TD colspan="3" bgcolor="yellow" >办公设备、文具、耗材</TD> …… </TABLE> bgcolor属性用来设置表格、行、列的背景色。“#EBEFFF”是用RGB表示的一种颜色值,RGB指的是红绿蓝 ,下图就是RGB颜色对照表 。

如何设置对其方式 <TABLE width="350" height="100" border="2" background="images/type_back.jpg" > <TR> <TD colspan="4"> </TD> </TR> <TR bgcolor="#EBEFFF"> <TD colspan="2" align="center" >笔记本电脑</TD> <TD colspan="2" align="center" >办公设备、文具、耗材</TD> <TD >惠普</TD> <TD >华硕</TD> <TD >打印机</TD> <TD >刻录盘</TD> </TABLE> align属性用来设置表格、行、列的对齐方式

未填充的效果,字与单元格边框之间的距离靠得太近 为什么要使用填充属性 单元格里的内容太靠近边线,怎么办? 未填充的效果,字与单元格边框之间的距离靠得太近

什么是填充属性和间距属性 border(边框的厚度) 内容 cellpadding (单元格填充) cellspacing (单元格间距)

如何使用填充、间距属性 border(边框的厚度) cellpadding (单元格填充) cellspacing (单元格间距) <TABLE border="20" cellpadding="30" cellspacing="40" bordercolor="red"> …… </TABLE>

如何设置表格的填充属性 <TABLE cellspacing="5 " cellpadding="10 " border="1" background="images/type_back.jpg" > <TR> <TD colspan="6"> </TD> </TR> <TR bgcolor="#EBEFFF"> <TD colspan="3" align="center" >笔记本电脑</TD> <TD colspan="3" align="center" >办公设备、文具、耗材</TD> …. </TABLE> cellspacing属性用来设置表格内框宽度 cellpadding属性用来设置表格内填充距离 填充之后的效果

表格的高度、宽度、背景图像、边框和填充属性 表格小练习 编写如下图所示效果对应的HTML代码 表格的高度、宽度、背景图像、边框和填充属性 行的背景色 单元格居中对齐

什么是表格布局 如何实现图文内容的布局,达到如左图所示页面的效果? 分析上图所示页面,应该用什么进行布局? 用表格对网页的内容进行整体控制 使用表格进行布局

如何使用表格进行布局 使用表格布局下图,需要几行几列? 需要7行2列

如何使用表格进行布局 <TABLE width="298"> <TR> <TD colspan="2"><IMG src="images/adv.jpg" /></TD> </TR> <TD width= " 122 " rowspan= " 6 " align= " left " ><IMG src="images/wangyou.jpg" width="116" height="142" /></TD> <TD width=“285” > <A href= " # " >超值变形金钢2.5折!</A> </TD> <TD><A href="#">人们为啥对电视吼叫 </A></TD> …… </TABLE>

表格练习 编写如下图所示效果对应的html代码 跨2行,并放了一副图片 此单元格放了一副图片 此单元格跨了3列

表格总结 创建表格最少需要那三个标签? 简述表格的基本结构。 跨行跨列的表格,主要在什么情况下使用? 给你一个表格,你会从哪些方面进行美化?

3. 表单和框架 表单的典型应用 注册用户 收集信息 反馈信息 为网站提供搜索工具

表单 注册用户 收集信息

表单包含的控件 单行文本输入框(TEXT) 密码框(PASSWORD) 单选按钮(RADIO) 复选框(CHECKBOX) 下拉列表(SELECT) 重置按钮(RESET) 提交按钮(SUBMIT) 多行文本框(TEXTAREA)

表单页面的基本结构 <FORM action="http://www.sohu.com"method="post"> …… METHOD ACTION 指定向服务器提交的方法: 一般为post或get方法, post方法比较安全 指定提交后,由服务器上哪个处理程序处理 ACTION = "URL" METHOD ="post或get"

指定元素的类型,可为TEXT、RADIO、SUBMIT等 表单元素的统一格式 指定元素的类型,可为TEXT、RADIO、SUBMIT等 控件的名称 控件的初始值 <FORM name="form3" method="post" action=""> <INPUT type="checkbox" name="gen" value="男" size="21“ maxlength=4 checked="checked"> …… </FORM> 控件的初始宽度 控件是否被选中 控件中输入的最多字符个数

表单元素的逐一介绍 文本框基本语法 <INPUT type="text" value="张三" size="20"> 输入元素的默认值 文本输入框 文本区的宽度 文本框基本语法 <INPUT type="text" value="张三" size="20"> <FORM name="form1" method="post" action=""> <P>名  字: <INPUT type="text" value="张三" size="20"> </P> …… </FORM> 单行文本输入框,字符宽度为20

表单元素的逐一介绍 初始密码 密码区宽度 密码框 密码框基本语法 <INPUT type="password " value=" 123456 " size="22"> <FORM name="form2" method="post" action=""> …… <P>密  码: <INPUT value="123456 " type="password" size="22"> </P> </FORM> 密码框,22个字符宽度

表单元素的逐一介绍 单选按钮 初始值 单选按钮基本语法 <INPUT type="radio" value="男" checked="checked"> 默认选中 设置此单选按钮被选中 <FORM name="form3" method="post" action=""> <BR>性别: <INPUT name="gen" type="radio" class="input" value="男" checked> <IMG src="images/Male.gif" width="23" height="21">男  …… </FORM>

表单元素的逐一介绍 复选框名 复选框 复选框基本语法 <INPUT type="checkbox" name="cb2" value="talk"> 复选框值 设置此复选框被选中 <FORM name="form4" method="post" action=""> …… <LABEL> <INPUT type="checkbox" name="cb2" value="talk"checked="checked"> </LABEL>聊天   </FORM>

表单元素的逐一介绍 列表框基本语法 设置此输入框最多只能输入四个符号 出生日期: <INPUT name="byear" value="yyyy" size=4 maxlength=4 >  年 <SELECT name="bmon"> <OPTION value=" " selected>[选择月份] </OPTION> <OPTION value=0>一月</OPTION> <OPTION value=1>二月</OPTION> …… </SELECT> 月  <INPUT name="bday" value="dd" size=2 maxlength=2 > 日 <select name="指定列表名称"size="行数"> <option value="可选项的值"selected>…</option> <option value="可选项的值"> …</option> …… </select> 说明: size确定列表中可同时看到的行数。 selected默认被选中的可选项。 设置“[选择月份]”选项默认被选中

单击按钮,控件的值被重置为value属性中指定的初始值 表单元素的逐一介绍 按钮类型可为button、submit 按钮名称 按钮基本语法 <INPUT type="reset" name="Reset" value=" 重填 "> 按钮上的显示文字 <FORM name="form6" method="post" action=""> <P> <INPUT type="reset" name="Reset" value=" 重填 "> …… <INPUT type="button" name="cancel" value="取消"> </P> </FORM> 单击按钮,控件的值被重置为value属性中指定的初始值

多行文本框基本语法 <TEXTAREA name="textarea" cols="40" rows="6"> 文本框的列数 文本框的名字 多行文本框基本语法 <TEXTAREA name="textarea" cols="40" rows="6"> 文本框中的内容 </TEXTAREA> 文本框的行数 6行40个字符宽度的多行文本域 <FORM name="form7" method="post" action=""> …… <TEXTAREA name="textarea" cols="40" rows="6">欢迎阅读服务条款协议,本协议阐述之条款和条件适用于您使用Taobao网站的各种工具和服务。 本服务协议双方为淘宝与淘宝网用户,本服务协议具有合同效力。 淘宝的权利和义务 </TEXTAREA> </FORM>

小练习 编写如左图所示效果对应的html代码 在网页设计中,表单的主要用途有哪些? TEXT PASSWORD RADIO TEXTAREA CHECKBOX SELECT RESET SUBMIT

框架 框架集页面(FrameSet.htm) 广告栏顶部框架(top.htm) 框架的边框 详细内容页面右侧框架 (main.htm) 导航栏左侧框架(left.htm)

框架使用场合 页面的一个固定部分显示徽标或静态信息 在另一个固定部分显示导航部分详细内容 在此处显示详细内容, 页面中此部分是变化的。

框架的基本结构 框架页面的基本语法 边框尺寸大小 将窗口分割成左中右3个部分,可选 将窗口分割成上下2个部分,可选 <frameset cols="25%,50%,*" rows ="50%,*" border="5"> <frame src="the_first.html "> …… </frameset> 第一个窗口要显示的网页

如果要在浏览器中创建左中右三个窗口,该如何实现? 每个窗口对应一个页面,以及一个框架集页面,总共需要几个HTML页面文件? 框架的基本结构 <HTML> <HEAD> <TITLE>rows_cols框架</TITLE> </HEAD> <FRAMESET rows="25%,50%,*" border="5"> <FRAME name= "top" src="the_first.html"> <FRAME name="middle" src="the_second.html"> <FRAME name= "bottom" src="the_third.html"> </FRAMESET> </HTML> 将窗口分割成上中下3部分 窗口边框的宽度 如果要在浏览器中创建左中右三个窗口,该如何实现? 每个窗口对应一个页面,以及一个框架集页面,总共需要几个HTML页面文件?

如何创建多个复杂的窗口 要实现如下图所示的窗口,该如何制作? 1、分成上下两个窗口 2、把下面的窗口分成 左右两个窗口 top窗口 left right窗口 1、分成上下两个窗口 2、把下面的窗口分成 左右两个窗口

如何创建多个复杂的窗口 创建多个复杂的窗口实现步骤如下: 1、创建一个HTML页面“top.html” 2、创建一个HTML页面“left.html” 3、创建一个HTML页面“right.html” top.html效果图 left.html效果图 right.html效果

框架名称,便于超文本链接锚标签target属性所引用 如何创建多个复杂的窗口 4、新建多框架HTML页面"Frame_Sets.html" 设置无框架边框 不显示滚动条 ...... <FRAMESET rows="20%,*" frameborder="0"> <FRAME src="top.html" name="topframe“ scrolling="no" noresize="noresize"> <FRAMESET cols="20%,*"> <FRAME src="left.html" noresize="noresize" scrolling="no" name="leftframe" > <FRAME src="right.html" name="rightframe"> </FRAMESET> 禁止调整框架大小 框架名称,便于超文本链接锚标签target属性所引用

如何设置窗口链接的显示位置 如果在同一个页面中,要实现在一个框架窗口中的超链接页面出现在另一个框架窗口中,如何实现?

target属性指定了所链接的文件出现在名称为“rightframe”的框架窗口里 如何设置窗口链接的显示位置 target目标窗口属性 name="显示的窗口名" <frame src=url name="窗口名">   <a href=url target="窗口名"> target属性指定了所链接的文件出现在名称为“窗口名”的框架窗口里。 <P><a href="right.html" target="rightframe"> <IMG src="images/reg.jpg" width="158" height="31" border="0" /> </P></A> <P><a href="buy.html" target="rightframe"> <IMG src="images/buy.jpg" width="160" height="32" border="0" /> </P></A> target属性指定了所链接的文件出现在名称为“rightframe”的框架窗口里

如何设置窗口链接的显示位置 target目标窗口属性 四个特殊的窗口 <a href=url target="_blank"> 显示在新窗口 <a href=url target="_self"> 显示在本窗口 <a href=url target="_parent"> 显示在父窗口 <a href=url target="_top"> 显示在整个浏览器窗口 新启一个窗口打开文件 "right.html" …… <P><A href="right.html" target="_blank"> <IMG src="images/reg.jpg" width="158" height="31" border="0" /></A> </P> <P><A href="buy.html" target="_self"> <IMG src="images/buy.jpg" width="160" height="32" border="0" /></A> <P><A href="sale.html" target="_parent"> <IMG src="images/sale.jpg" width="158" height="31" border="0" /></A> <P><A href="person_info.html" target="_top"> <IMG src="images/person.jpg" width="157" height="31" border="0"/></A></P>

小练习 编写如下图所示效果对应的html代码 top.html frame_sets.html right1.html或right2.html left.html

总结 表单中提交数据的方法有哪两种及其区别? 表单里有哪些常用的表单元素? 创建一个框架页面至少需要哪两个标签? target设定目标资源所要显示的窗口,其取值可以为哪些? 简述创建一个多框架页面所需的主要步骤。

课堂练习 5— 修改 HTML代码 在“代码视图”中,打开之前设计的页面,熟悉常用HTML标记的使用格式和方法; 尝试修改部分代码,观察其在“设计视图”中的变化; 进一步完善网站内容,插入必要的图片,尽可能达到网站内容和布局基本成形。