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>
5.标签
<label></label>
字段集 （一堆label）
<fieldset></fieldset>
6.表单当中语句的使用示例：
以上语句呈现出的效果为：
表单练习题：
<body background="2.jpg">
<table width="500" height="500" border="0" align="center">
<tr>
<td width="100" height="20">邮箱：</td>
<td width="100"><form id="form1" name="form1" method="post" action="">
<p><input type="text" name="first" id="" value=""/></p>
</form></td>
</tr>
<tr>
<td height="20"> </td>
<td><form id="form2" name="form2" method="post" action="">
<font color="#CCCCCC" size="-1">需要通过邮箱激活账户，不支持sohu，21cn，sogou的邮箱
</font></form></td>
</tr>
<tr>
<td width="100" height="20">登录用户名：</td>
<td width="100"><form id="form3" name="form3" method="post" action="">
<p>
<input type="text" name="first" id="" value=""/>
</p>
</form></td>
</tr>
<tr>
<td height="20"> </td>
<td><form id="form4" name="form4" method="post" action="">
<font color="#CCCCCC" size="-1">仅在登录时使用，字符数不少于4个
</font></form></td>
</tr>
<tr>
<td width="100" height="20">显示名称：</td>
<td width="100"><form id="form5" name="form5" method="post" action="">
<p>
<input type="text" name="first" id="" value=""/>
</p>
</form></td>
</tr>
<tr>
<td height="20"> </td>
<td><form id="form6" name="form6" method="post" action="">
<font color="#CCCCCC" size="-1">即昵称，字符数不少于2个
</font></form></td>
</tr>
<tr>
<td width="100" height="20">密码：</td>
<td width="100"><form id="form7" name="form7" method="post" action="">
<p>
<input type="password" name="first" id="" value=""/>
</p>
</form></td>
</tr>
<tr>
<td width="100" height="20">确认密码：</td>
<td width="100"><form id="form8" name="form8" method="post" action="">
<p>
<input type="password" name="first" id="" value=""/>
</p>
</form></td>
</tr>
<tr>
<td height="20"> </td>
<td><form id="form9" name="form9" method="post" action="">
<font color="#CCCCCC" size="-1">至少8位，必须包含字母、数字、特殊字符
</font></form></td>
</tr>
<tr>
<td width="100" height="60">性别：</td>
<td width="100"><form id="form10" name="form10" method="post" action="">
<select name="down" size="1">
<option values="">男</option>
<option values="">女</option>
</select></form></td>
</tr>
<tr>
<td width="100" height="30">喜好：</td>
<td width="100"><form id="form11" name="form11" method="post" action="">
<select name="down" size="1">
<option values="">听音乐</option>
<option values="">唱歌</option>
<option values="">打篮球</option>
<option values="">看书</option>
</select></form></td>
</tr>
<tr>
<td height="100"> </td>
<td><form id="form12" name="form12" method="post" action="">
<input type="submit" name="button" id="button" value="注册"/>
<input type="reset" name="button" id="button" value="重置"/>
</form></td>
</tr>
</table>
</body>
7.快速制作网页的方法：
利用Photoshop中的切片工具来规划出要设置链接的位置，设置好后存储为web可使用的html格式。
用DREAMWEAVER打开，打开设计页面，选择切片弄好的位置，在属性中输入超链接的网址即可。
转载于:https://www.cnblogs.com/Fate-rail/p/5044476.html
HTML图片热点、网页划区、拼接、表单相关推荐
- html图片热点新窗口,HTML基础必看---表单,图片热点,网页划区和拼接详解
html表单里面的图片点击相应图片跳转到本页其他去在表格里面选了这个 鼠标点击一下跳转到相应区块 代码要怎么写,夜影驱动编程小编今天和大家分享大神需要在一张图片上设置多个能点击跳转的链接区域时,推荐使 ...
- 2016/2/18 html 图片热点，网页划区，拼接，表单
①图片热点 规划出图片上的一个区域,可以做出超链接,直接点击图片区域就可以完成跳转的效果. 显示 ②网页划区 在一个网页里,规划出一个区域用来展示另一个网页的内容. ③网页拼接 在一个网络页面内,规划 ...
- 《网页设计基础——表格与表单》
网页设计基础--表格与表单 一.表格的基础框架: 规则: table:表示整个表格. caption:定义表格的标题 tr:表示表格的一行. td:表示行中的一个列,需要嵌套在 <tr> ...
- 页面使用html生成一个n行n列表格,HTML静态网页：表格、表单
一.表格table table的属性 width 宽度,可以用百分比或者像素,像素常用960 border 边框,常用值是0 cellpadding 表格内容与单元格边框的 ...
- 响应式web开发网页案例 ——29款表单模板
如果你正在寻找有趣的响应式web开发网页案例,那你找对地方了.本文与大家分享一下,点击图片即可下载. 1. [网页响应式开发]粉红简洁登录框表单模板 大小:124 KB 下载地址:http://www ...
- 网页自动提交Form表单的方法
最近做网站运营用到了邮件营销,使用了搜狐的sendcloud邮件代发平台.要想使用sendcloud平台发送邮件给客户,就必须调用他们的API接口进行批量发送,那么问题来了.sendcloud提供了好 ...
- django之：网页伪静态 JsonResponse form表单携带文件数据 CBV源码分析 模板语法传值 模板语法之过滤器 标签 自定义标签函数 过滤器、inclusion_tag模板的继承导入
目录标题 一:网页伪静态 1.定义 2.如何实现 二:视图层 1.视图函数返回值问题 2.视图层返回json格式的数据 3.form表单携带文件数据 4.CBV源码分析 1.CBV和FBV: 2.CB ...
- php 网页手册模板,网站表单模板
前端界面 默认网站表单模板介绍发布:/template/pc/default/home/form_post.html 列表:/template/pc/default/home/form_list.ht ...
- 【网页制作】注册表单页
最新文章
- 二分图专题系列各大知识点总结（匈牙利，染色法，最大独立集，最小点覆盖，最小路径覆盖）
- 架构模式：MVC与MVVM
- 【数字信号处理】线性时不变系统 LTI ( 判断某个系统是否是 “ 非时变 “ 系统 | 案例三 )
- PHP内核探索之变量（4）- 数组操作
- 【Linux】一步一步学Linux——fgrep命令(了解)(51)
- MAATLAB GUI——回调函数的设置（Callbacks）
- 详解如何在ubuntu上安装node.js
- css3中transition和display的坑
- axios.post请求出错：Request header field content-type is not allowed by Access-Control-Allow-Headers in……
- 【EMV L2】CDA复合动态数据认证/应用密文生成
- 重振pointnet++雄风！PointNeXt: Revisiting PointNet++ with ImprovedTraining and Scaling Strategies
- c语言 如何筛选小数点,怎样在表格里筛选有出整数与有小数点的数值
- Software Testing - Browser Driver在Selenium中的作用是什么
- 记一次服务器被攻击后的经历
- 2022全国大学生物联网设计竞赛火热开启，限量礼品等你来拿
- 魔法币 java_网易2018校招笔试编程题-魔法币 java实现
- 云盘存储 教学反思_疫情时期，如何打造一堂高效在线直播课（附3套实用工具包）...
- 《屏幕上的聪明决策》：4星。人类在手机/电脑上做选择的心理学研究的综述。不流畅的文本有助于理解和记忆，淘汰赛制可以有效降低选择后懊悔。...
- 微极速彩虹易支付第四方免签支付平台源码
- 区块链相关概念与简介