HTML静态网页(图片热点、网页划区、拼接及表单的使用)
图片热点:
规划出图片上的一个区域,可以做出超链接,直接点击图片区域就可以完成跳转的效果。
示例:
网页划区:
在一个网页里,规划出一个区域用来展示另一个网页的内容。
示例:
网页的拼接:
在一个网络页面内,规划出多个页面窗口,以表格拼接的形式展示出来。
示例:
表单:
<form id="" name="" method="post/get" action="负责处理的服务端">
id不可重复,name可重复,get提交有长度限制,并且编码后的内容在地址栏可见,
post提交没有长度限制,且编码后内容不可见。
</form>
1.文本输入
文本框<input type="txt" name="" id="" value="" />
密码框<input type="password" name="" id="" value="" />
文本域<textarea name="" id="" cols=""(字符多少) rows=""(几行高)></textarea>
隐藏域<input type="hidden" name="" id="" value="" />
2.按钮
提交按钮<input type="submit" name="" id="" disabled="disabled" value="" />点击后转到form内的提交服务器的地址
重置按钮<input type="reset" name="" id="" disabled="disabled" value="" />
普通按钮<input type="button" name="" id="" disabled="disabled" value="" />
图片按钮<input type="image" name="" id="" disabled="disabled" src="图片地址" />
disabled使按钮失效
enable使按钮可用
3.选择输入
单选按钮组<input type="redio" name="" checked="checked" value="" />
name的值用来分组,value的值看不见,提交给程序用的,checked设置默认选项。
复选框组<input type="checkbox" name="" checked="checked" value="" />
文件上传<input type="file" name="" id="" />
<lable for=""></lable>
lable标签为input元素定义标注。
lable元素不会向用户呈现任何特殊效果,不过,他为鼠标用户改进了可用性。如果您在lable元素内点击文本,就会触发此控件。
就是说,当用户选择该标签时,浏览器会 将焦点转到和标签相关的表单控件上。
lable标签的for属性应当与相关元素的id属性相同。
4.下拉列表框
<select name="" id="" size="" multiple="multiple">
--size为1时,为菜单;>1时,为列表。multiple为多选。
<option value="值">内容1</option>
<option value="值" selected="selected">内容2</option>
--selected,设为默认
<option value="值">内容3</option>
</select>
表单当中语句的使用示例:
以上语句呈现出的效果为:
表单练习题:根据做出的效果图来写语句
写语句的过程:
快速制作网页的方法:
利用Photoshop中的切片工具来规划出要设置链接的位置,设置好后存储为web可使用的html格式。
用DREAMWEAVER打开,打开设计页面,选择切片弄好的位置,在属性中输入超链接的网址即可。
HTML静态网页(图片热点、网页划区、拼接及表单的使用)的更多相关文章
- HTML:图片热点 网页划区 表单
图片热点: 划出图片中的区域,做超链接,点击该区域就可以直接跳转到链接网站 <img src="../../../3.jpg" title="血精灵" u ...
- “此网页上的某个 Web 部件或 Web 表单控件无法显示或导入。找不到该类型,或该类型未注册为安全类型。”
自从vs装了Resharper,看见提示总是手贱的想去改掉它.于是乎手一抖,把一个 可视web部件的命名空间给改了. 喏,从LibrarySharePoint.WebPart.LibraryAddEd ...
- 项目总结07:JS图片的上传预览和表单提交(FileReader()方法)
JS图片的上传预览和表单提交(FileReader()方法) 一开始没有搞明白下面这块代码的,今天有时间简单整理下 核心点:FileReader()方法 以下是代码(以JSP文件为例) <!DO ...
- HTML · 图片热点,网页划区,拼接,表单
图片热点: 规划出图片上的一个区域,可以做出超链接,直接点击图片区域就可以完成跳转的效果. 网页划区: 在一个网页里,规划出一个区域用来展示另一个网页的内容. 网页的拼接: 在一个网络页面内,规划出多 ...
- HTML图片热点、网页划区、拼接、表单
一.图片热点: 规划出图片上的一个区域,可以做出超链接,直接点击图片区域就可以完成跳转的效果. 示例: 二.网页划区: 在一个网页里,规划出一个区域用来展示另一个网页的内容. 示例: 三.网页的拼接: ...
- HTML--2图片热点,网页划区,拼接,表单
图片热点: 规划出图片上的一个区域,可以做出超链接,直接点击图片区域就可以完成跳转的效果. 示例: 网页划区: 在一个网页里,规划出一个区域用来展示另一个网页的内容. 示例: 网页的拼接: 在一个网络 ...
- 2016/2/18 html 图片热点,网页划区,拼接,表单
①图片热点 规划出图片上的一个区域,可以做出超链接,直接点击图片区域就可以完成跳转的效果. 显示 ②网页划区 在一个网页里,规划出一个区域用来展示另一个网页的内容. ③网页拼接 在一个网络页面内,规划 ...
- 学习总结 html图片热点,网页划区,拼接,表单
表单: action="负责处理的 <form id="" name="" method="post/get"服务端&quo ...
- HTML静态网页 图片热点、框架、表单
图片热点: 规划出图片上的一个区域,可以做出超链接,直接点击图片区域就可以完成跳转的效果. 示例: 网页划区: 在一个网页里,规划出一个区域用来展示另一个网页的内容. 示例: 框架: 1.frames ...
随机推荐
- rational rose 2003安装及破解
rational rose作为面向对象的统一建模语言的可视化建模工具,包括了统一建模语言(UML),OOSE,以及OMT,可用于可视化建模和公司级水平软件应用的组件构造:此次小编将讲解如何安装及破解r ...
- 如何評鑑一家SMT代工廠
我們一般稱專業的「電子代工廠」為 EMS(Electronics Manufacturing Service,電子製造服務業) 或 CM(Contract Manufacturer,合同製造廠),這些 ...
- Android中使用HTTP服务
在Android中,除了使用java.net包下的API访问HTTP服务之外,我们还可以换一种途径去完成工作.Android SDK附带了Apache的HttpClient API.Apache Ht ...
- net-ldap for ruby openNebula ldap
preface:ldap 主要概念及术语 OpenNebula issues:missing step to use LDAP as default driver cp -r /var/lib/one ...
- 2014.8.30.ref,out,params,enum,递归
(一)ref 函数形参变量的输入有两种方式:传值,传址.而ref则为传址.eg: static int Add(ref int n) { Console.WriteLine("Add---- ...
- iOS 在当前控制器中发送短信
- (void)showMessageViewWithTel:(NSString *)tel { if( [MFMessageComposeViewController canSendText] ){ ...
- 如何在一个工作站里创建多个工程(同一个xcode下面创建多个工程)
第一步,理解: 怎么会有一个xcode下面创建两个工程这一说呢,一个工程代表一个项目,意思就是有两个项目了.错.其实在一个窗口下面并不是两个工程,而是一个workspace 即一个工作站.在工作站里面 ...
- NSURLSessionConfiguration的简单实用
NSURLSessionConfiguration 基于前面学习了NSURLSession的知识,这边文章就讲下NSURLSessionConfiguration相关应用,(这名字可真长). 简而言之 ...
- CF 599D Spongebob and Squares(数学)
题目链接:http://codeforces.com/problemset/problem/599/D 题意:定义F(n,m)为n行m列的矩阵中方阵的个数,比如3行5列的矩阵,3x3的方阵有3个.2x ...
- 项目需要简单些了个WEB APP 的弹出窗
var diag = { showDlg:'',//需要显示的DIV rushdiv:"<div id=v style='top:0;position: absolute;z-inde ...