第07讲 HTML标签库及表单的应用.ppt
合集下载
HTML5网页设计与制作教学课件第七章使用表格
第7章
使用表格
第7章 使用表格
在生活中表格随处可见，如账表、明细表、成绩表 、数据表等，在网页中也是一样。制作网页的时候， <table>表格标签是最常用的，也是最必不可少的工具 。表格拥有特殊的结构和布局模型，能够比较醒目地 描述数据间的关系，如果借助 CSS设计表格样式，可 以帮助用户在阅读数据时更便捷、更轻松。
【拓展练习】
使用border-spacing属性分离单元格时，应该注意三个问题。
第一，早期版本的IE浏 览器不支持该属性，要定义 相同效果的样式，就需要同 时结合 HTML的cellspacing属性来设置。
第二，当使用border-spacing
属性时，应确保数据单元格之间的相
互独立性，不能再使用border-
【拓展练习】
利用CSS的padding属性可以更灵活地定制单元格补白区域的大小，也可以根据需要定义不同边 上的补白。使用padding属性还可以为表格定义补白，此时可以增加表格外框与单元格的距离。以上 面的示例为基础，重新定义内部样式表，在<head>标签内的<style type="text/css">标签中清除 其他表格样式，添加如下样式。
新建一个网页，保存为 test.html，在 <body>内使用 <table>、<tr>、<th>和<td>标签
设计一个简单的表格，然后使用HTML的colspan、rowspan属性合并相邻单元格中的相同项目，
代码如下所示。
7.1 设计表格结构
7.1.2 设计表格附加结构
【随堂练习 】
在IE浏览器中预览演示效果，如图7-4所示。
使用表格
第7章 使用表格
在生活中表格随处可见，如账表、明细表、成绩表 、数据表等，在网页中也是一样。制作网页的时候， <table>表格标签是最常用的，也是最必不可少的工具 。表格拥有特殊的结构和布局模型，能够比较醒目地 描述数据间的关系，如果借助 CSS设计表格样式，可 以帮助用户在阅读数据时更便捷、更轻松。
【拓展练习】
使用border-spacing属性分离单元格时，应该注意三个问题。
第一，早期版本的IE浏 览器不支持该属性，要定义 相同效果的样式，就需要同 时结合 HTML的cellspacing属性来设置。
第二，当使用border-spacing
属性时，应确保数据单元格之间的相
互独立性，不能再使用border-
【拓展练习】
利用CSS的padding属性可以更灵活地定制单元格补白区域的大小，也可以根据需要定义不同边 上的补白。使用padding属性还可以为表格定义补白，此时可以增加表格外框与单元格的距离。以上 面的示例为基础，重新定义内部样式表，在<head>标签内的<style type="text/css">标签中清除 其他表格样式，添加如下样式。
新建一个网页，保存为 test.html，在 <body>内使用 <table>、<tr>、<th>和<td>标签
设计一个简单的表格，然后使用HTML的colspan、rowspan属性合并相邻单元格中的相同项目，
代码如下所示。
7.1 设计表格结构
7.1.2 设计表格附加结构
【随堂练习 】
在IE浏览器中预览演示效果，如图7-4所示。
HTML制作表单ppt课件
name=“login”>
用户名：<input type ="text" name="userName"/> <br/>
年 龄：<input type="text" name="age"/> <br/>
<input type="submit"/>
action属性值：url地址
</form> Nhomakorabea相对或绝对路径
• 创建图像按钮
• <input type=“image” scr=“图像地址” name=“控
件名称”/>
▪ type属性：image ▪ name属性值：控件名称 ▪ src属性值：图像文件地址
代码 示例
22
<input>——隐藏控件
• 创建隐藏控件
• <input type=“hidden” name=“控件名”/>
• size属性：文本框长度
• maxlength属性：文本框最多输入字符数
• value属性：文本框中默认值
代码 示例
15
<input>——密码框
• 创建一个密码文本框 • <input type="password" name="名称" size="NB"
maxlength="NB"/>
• type属性值：password • name属性值：控件名称 • size属性值：指定密码框大小 • maxlength属性值：允许输入最多字符 • 输入的文本显示为密码形式
HTML 表单ppt课件
label标签的for属性应当与相关元素的id属性相同labelforman男labelinputtyperadionamesexvalue男idman表单元素标记2021精选ppt145多行文本框textareaname多行文本框名称cols每行中的字符数rows显示的行数初始内容textarea表单元素标记2021精选ppt156列表框a菜单式selectname列表框名称optionselectedselected哪个为初始选择就添加selected语句只有一个value提交值列表1optionoptionvalue提交值列表2optionselect分组optgrouplabel分组名称optgroup表单元素标记2021精选ppt16例如
最新课件
25
7. 多行文本：<textarea rows="" cols=""></textarea> 8. 按钮
1. 提交按钮 <input type="submit" value="" /> 2. 重置按钮 <input type="reset" value="" /> 3. 普通按钮 <input type="button" value="" /> 4. 图片按钮 <input type="image" src="" />
最新课件
27
<form action="Echo64.asp" method="POST">
最新课件
28
<% name = Request("Name")
最新课件
25
7. 多行文本：<textarea rows="" cols=""></textarea> 8. 按钮
1. 提交按钮 <input type="submit" value="" /> 2. 重置按钮 <input type="reset" value="" /> 3. 普通按钮 <input type="button" value="" /> 4. 图片按钮 <input type="image" src="" />
最新课件
27
<form action="Echo64.asp" method="POST">
最新课件
28
<% name = Request("Name")
HTML表单实例.ppt
• 背景色彩和文字色彩 – <body bgcolor=# text=# link=# alink=# vlink=#> • bgcolor --- 背景色彩 • text --- 非可链接文字的色彩 • link --- 可链接文字的色彩 • alink --- 正被点击的可链接文字的色彩 • vlink --- 已经点击(访问)过的可链接文字的色彩 • #=rrggbb • 色彩是用 16 进制的 红－绿－蓝(red-green-blue, RGB) 值来表示。 16 进制的数码有: 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f.
• 图象和文字的对齐 <img align=#> #=top, middle, bottom
<img src=URL align=right>My Face!<br> It is always<br> smiling.<br> Hahaha....<br>
My Face! It is always smiling. Hahaha....
#= us-ascii, iso-8859-1, x-mac-roman, iso-8859-2, x-mac-ce, iso-2022-jp, x-sjis, x-euc-jp, euc-kr, iso-2022-kr, gb2312, gb_2312-80, x-euc-tw, x-cns11643-1, x-cns11643-2, big5
华师大软 件学院
2. HTML标签&实例
毛宏燕
华东师范大学软件学院
1
Steps
• HTML简介 • HTML标记 • 表单（FORM）
2
• 图象和文字的对齐 <img align=#> #=top, middle, bottom
<img src=URL align=right>My Face!<br> It is always<br> smiling.<br> Hahaha....<br>
My Face! It is always smiling. Hahaha....
#= us-ascii, iso-8859-1, x-mac-roman, iso-8859-2, x-mac-ce, iso-2022-jp, x-sjis, x-euc-jp, euc-kr, iso-2022-kr, gb2312, gb_2312-80, x-euc-tw, x-cns11643-1, x-cns11643-2, big5
华师大软 件学院
2. HTML标签&实例
毛宏燕
华东师范大学软件学院
1
Steps
• HTML简介 • HTML标记 • 表单（FORM）
2
《HTML页面与表格》PPT课件
HTML文档
• HTML页面的基本结构 • 起始标记 • 文件头
襄樊1软22 0件2学1/院4/23
你的潜力，我们的动力！
HTML页面的基本结构
基本结构
起始标记 网页标题
文件主体
<Html> <Head> 网页的标题和属性 </Head> <Body> 文件主体 </Body>
</Html>
襄樊1软23 0件2学1/院4/23
原理： 在欲链接处做个记号 链接时就寻找个这记号
▪ 内部链接就是网页中的书签
格式
<a Name=”书签名称”>书签内容</a>
襄樊2软21 0件2学1/院4/23
你的潜力，我们的动力！
内部链接实例
例如，先定义一个标签a，然后找到“标 签名”这个标签，就可编写如下代码：
<a name=”标签a”>书签内容</a> <a Href=”#标签a”>单击此处监视浏览器调到“标签a”处</a>
你的潜力，我们的动力！
网页基础知识
统一资源定位器——URL （Uniform Resource Locator）
• URL包括传送协议，服务器名称、文件的完整路径 例如：/index.html 其中http://是传送协议 是服务器名称 index.html 是文件的完整路径
</Body>
襄樊2软26 0件2学1/院4/23
你的潜力，我们的动力！
有通栏的表格
1．有横向通栏的表格用<td colspan=#>属性说 明
以像素为单位 #代表通栏占据的网格数
HTML表单ppt课件
3、传送方法--method
method=post :表单数据是与URL分开发 送，用户端的计算机会通知服务器来读取数据。 优点：数据长度没有限制。 缺点：速度比get慢。
3、传送方法--method
举例： <HTML> <HEAD> <title>设定表单的处理程序</title> </HEAD> <BODY>这是一个没有控件的表单 <form action="mailto:sdkdlcl@" method=“post“> </form> </BODY> </HTML>
</select><br><br> 爱好： <input name="chk1" type="checkbox" value="1" >游泳 <input name="chk2" type="checkbox" value="2" checked>
跑步
<br><br> <input type=submit value=" 确 定"> </form> </BODY> </HTML>
......
</form> 说明：
“表单的处理程序“定义的是表单要提交的地 址，也就是表单中收集到的资料将要传递的程序地 址。
2、处理程序--action
举例： <HTML> <HEAD> <title>设定表单的处理程序</title> </HEAD> <BODY>这是一个没有控件的表单 <form action="mailto:sdkdlcl@"> </form> </BODY> </HTML> 说明：在这个实例中，只定义了表单提交的地址为一个邮件。
HTML语言之表单和框架标记精品PPT课件
表单
6.单选框 格式：<input type=" radio " name=" RadioButtonName " value=string checked="checked" /> 功能：定义一组单选框。在该组单选框中只能由一个被选中。 说明：type属性的属性值radio表明是单选框。name属性定义单选框的名 字。value属性定义单选框的值。checked属性表明该单选框被选中，若未选 中则省略该属性。 技术要点：在一组单选框中必须是name属性值相同value属性值不同。
… </select> 功能：定义一个下拉列表。 说明：name属性定义下拉列表的名字。size属性定义列表窗口中可见选 项的个数。<option>标记定义列表项，必须和<select>标记一起使用。
表单
例5-11 创建一个简单的表单
表单
例5-11 创建一个简单的表单
<!--文件名：example5-11.html--> <html > <head> <title>创建表单</title> </head> <body bgcolor="#ff9900" leftmargin="0" text="#000000v topmargin="30"> <form action="mailto:" method="post">
</tr> <tr>
<td width="26%"> <font size=2>姓名</font></td> <td width="74%"><font size=2>
html课件
块级元素从上到下、行内元素从左到右依次排列的布局方式。
文档流布局
通过设置元素的float属性，使元素脱离文档流并向左或向右浮动，常用于实现文字环绕效果。
浮动布局
通过设置元素的position属性，可以精确控制元素在页面上的位置，包括相对定位、绝对定位和固定定位等。
定位布局
掌握CSS的基本语法，包括选择器、属性和值的写法，以及样式的优先级规则。
使用浏览器前缀
针对不同浏览器使用特定的CSS前缀，确保样式在不同浏览器中的兼容性。
渐进增强与优雅降级
根据浏览器支持情况，提供基本的功能和样式，逐步增强用户体验。
使用Polyfill
针对某些浏览器不支持的HTML5、CSS3特性，引入Polyfill库进行兼容处理。
测试与调试
使用多种浏览器进行测试，及时发现问题并进行修复。
图像处理
06
HTML页面优化与兼容性处理
压缩HTML、CSS和JavaScript文件：通过压缩代码，减少文件大小，提高页面加载速度。
使用CDN加速：通过CDN服务分发资源，减轻服务器压力，提高用户访问速度。
优化图片：压缩图片、使用WebP格式、设置合适的图片尺寸等，降低图片加载时间。
减少HTTP请求：合并多个CSS和JavaScript文件，减少浏览器发起的HTTP请求数量。
CSS语法
颜色与背景
字体与文本
学习如何设置元素的颜色、背景色、背景图片等样式，以及渐变、阴影等高级效果。
学习如何设置文本的字体、大小、颜色、行高等样式，以及文本装饰、对齐等效果。
03
02
01
选择器优先级
了解选择器优先级的规则，包括内联样式、ID选择器、类选择器、元素选择器等之间的优先级关系。
《HTML制作表格》课件
2023
REPORTING
THANKS
感谢观看
表格的间距和边距
单元格间距
设置单元格之间的间距，以像素为单 位。
行高和列宽
调整表格中行和列的高度和宽度，以 像素为单位。
单元格边距
设置单元格内部的边距，以像素为单 位。
表格的文字样式
字体类型
选择用于表格中文本的字 体类型。
字体大小
设置表格中文本的字体大 小，可以使用像素值或相 对单位。
字体颜色
设置表格中文本的颜色， 可以使用颜色名称、十六 进制或RGB值。
简洁明了、易于理解、符合网站主题风格 。
网站导航表格的HTML制作技巧
网站导航表格的动态效果
使用HTML的`<nav>`元素，结合CSS样式 进行布局和美化。
通过JavaScript实现动态导航菜单，如响应 式设计、下拉菜单等。
表单数据表格
表单数据表格的定义
01
表单数据表格用于展示表单中用户输入的数据，方便用户核对
01
02
03
边框宽度
定义表格边框的宽度，可 以使用像素值或相对单位 。
边框颜色
设置表格边框的颜色，可 以使用颜色名称、十六进 制或RGB值。
边框样式
选择边框的样式，如实线 、虚线、点线等。
表格的背景颜色
背景颜色
为表格设置背景颜色，可以使用 颜色名称、十六进制或RGB值。
背景图片
为表格添加背景图片，可以选择 图片的路径和大小。
响应式设计的优势
响应式设计可以使网页在不同设备上都能良好显示，提高用户体验。同 时，它还可以减少维护成本，因为只需要维护一套代码即可适应不同设 备的屏幕大小和分辨率。
HTML 课件7-表格
使用表格
目标
• 学会使用HTML标签创建表格
表格
列
表格标题
列标题 单元格 行
文档中， 在 HTML 文档中，广泛使用表格来存放网页上的文本和图像 可以包含文本、图片、列表、段落、表单、水平线、 可以包含文本、图片、列表、段落、表单、水平线、表格等等
创建表格
<HTML> <HEAD> <TITLE>使用表格</TITLE> </HEAD> <BODY> <TABLE>代表表格的开始，border=2表示 <TABLE BORDER = 2 > 边框尺寸为2 <TR> <TD>姓名</TD> <TR>表示行，这是表格的第一行，有三列 <TD>性别</TD> 数据，<TD>代表列 <TD>分数</TD> </TR> <TR> <TD>Robert</TD> 表格的第二行，有三列数据 <TD>M</TD> <TD>80</TD> </TR> 表格的第三行，也有三列数据 ....... </TABLE> </BODY> </HTML>
Frame的属性值及描述
属性值 Above Below Border Hsides Lhs Rhs Void Vsides 描述 显示上边框 显示下边框 显示上下左右边框 显示上下边框 显示左边框 显示右边框 不显示边框 显示左右边框
Rules的属性值及描述
属 性值 All Cols Groups None Rows 描 述
目标
• 学会使用HTML标签创建表格
表格
列
表格标题
列标题 单元格 行
文档中， 在 HTML 文档中，广泛使用表格来存放网页上的文本和图像 可以包含文本、图片、列表、段落、表单、水平线、 可以包含文本、图片、列表、段落、表单、水平线、表格等等
创建表格
<HTML> <HEAD> <TITLE>使用表格</TITLE> </HEAD> <BODY> <TABLE>代表表格的开始，border=2表示 <TABLE BORDER = 2 > 边框尺寸为2 <TR> <TD>姓名</TD> <TR>表示行，这是表格的第一行，有三列 <TD>性别</TD> 数据，<TD>代表列 <TD>分数</TD> </TR> <TR> <TD>Robert</TD> 表格的第二行，有三列数据 <TD>M</TD> <TD>80</TD> </TR> 表格的第三行，也有三列数据 ....... </TABLE> </BODY> </HTML>
Frame的属性值及描述
属性值 Above Below Border Hsides Lhs Rhs Void Vsides 描述 显示上边框 显示下边框 显示上下左右边框 显示上下边框 显示左边框 显示右边框 不显示边框 显示左右边框
Rules的属性值及描述
属 性值 All Cols Groups None Rows 描 述