一、图片热点：规划出图片上的一个区域，可以做出超链接，直接点击图片区域就可以完成跳转的效果。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

</head>

<body>

<img src="33.jpg" usemap="ditu" title="这是兔子" />

<map name="ditu">

<area shape="rect" coords="702,377,802,477" href="http://www.baidu.com" />

<area shape="circle" coords="930,486,117" href="http://www.sougo.com" />

<area shape="rect" coords="1049,552,1238,669" href="http://www.sougo.com" />

</map>

<img src="../Sample Pictures/tyu.jpg" usemap="xiong" title="这是倒霉熊" />

<map name="xiong">

<area shape="rect" coords="126,193,326,393" href="http://www.baidu.com" />

<area shape="rect" coords="718,198,938,418" href="http://www.sohu.com" />

<area shape="circle" coords="592,148,70" href="http://www.sogou.com" />

<area shape="circle" coords="435,149,70" href="http://www.qq.com" />

</map>

</body>

</html>

二、网页内嵌：在一个网页里，规划出一个区域用来展示另一个网页的内容。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

</head>

<body>

<iframe src="Untitled-1.html" width="400" height="300" frameborder="1"></iframe>

<iframe src="Untitled-邮箱页面.html" width="500" height="400"></iframe>

<iframe src="../8月8日 HTML基础/Untitled-个人简历.html" width="300" height="600"></iframe>

</body>

</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="radio" 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>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

</head>

<body>

<form>

账号：<input type="text" value="文本框" required="required" />value里面的值得默认值，会直接显示出来;required意思是必须填写<br />

<br />

密码：<input type="password" placeholder="请输入密码" required="required" />placeholder="请输入密码",placeholder引号里面的文字提示会直接显示出来，填写密码是消失，删除密码时重新显示提示内容<br />

<br />

邮箱:<input type="email" required="required" /><br />

<br />

按钮：<input type="button" value="登录" />普通按钮<br />

<br />

<input type="submit" value="提交" />提交、注册按钮<br />

<br />

<input type="reset" disabled="disabled" />重置按钮，有重置按钮是必须有form，需要找到要充值的内容；disabled设置后文本框将不能改写<br />

<br />

<input type="image" src="../Sample Pictures/tyu.jpg" width="200" /><br />

<br />

说说：<textarea name="" cols="35" rows="5">文本域</textarea><br />

<br />

隐藏域<input type="hidden" value="12344" />

<input type="radio" name="sex" checked="checked" />男

<input type="radio" name="sex" checked="checked" />女

&nbsp;&nbsp;&nbsp;这是单选按钮组。单选按钮组必须命名，这样在一组中只能选一个<br />

<br />

<input type="checkbox" checked="checked" />可口可乐<br />

<input type="checkbox" checked="checked" />百事可乐<br />

<input type="checkbox" checked="checked" />雪碧<br />

这是复选框组，复选框组不命名也可以，因为本身就可以复选

<br />

<input type="file" /> 选择文件<br />

<br />

<select size="1">

<option value="1">可口可乐</option>

<option value="2">百事可乐</option>

<option value="3">雪碧</option>

</select>当size是1的时显示实的是下拉框<br />

<br />

<select size="3">

<option value="1">可口可乐</option>

<option value="2">百事可乐</option>

<option value="3">雪碧</option>

</select>当size大于1的时候显示的是菜单

</form>

</body>

</html>

HTML：表格与表单的更多相关文章

  1. DOM之表格与表单基础分享

    我是沐晴,好久不见.马上要放假啦,也是比较的忙. 今天来谈谈表格和表单的基本知识.前期的写的都是比较基础的知识,后期会慢慢增加实例.一起来学习吧. 先看表格,DOM中提供了一些属性,便于我们获取表单节 ...

  2. css011 表格和表单的格式化

    css011 表格和表单的格式化 一.    让表格专司其职    Html中创建一个三行三列的表格 <table> <caption align="bottom" ...

  3. BootStrap入门教程 (二) ：BASE CSS（排版(Typography),表格(Table),表单(Forms),按钮(Buttons)）

    上讲回顾:Bootstrap的手脚架(Scaffolding)提供了固定(fixed)和流式(fluid)两种布局,它同时建立了一个宽达940px和12列的格网系统. 基于手脚架(Scaffoldin ...

  4. 第3天：CSS浮动、定位、表格、表单总结

    今天学的是浮动.定位.表格.表单等内容,这些是CSS中最容易混淆的知识,有许多小技巧在写代码过程中需要注意.下面是主要知识点: 一.float浮动1.块元素在一行显示2.内联元素支持宽高3.默认内容撑 ...

  5. WEB入门二 表格和表单

    学习内容 Ø        表格的作用和制作 Ø        表单的制作 能力目标 Ø        掌握表格的创建 Ø        掌握设置表格的常用属性: Ø        理解表单的作用 Ø ...

  6. HTML&CSS精选笔记_表格与表单

    表格与表单 表格标记 创建表格 要想创建表格,就需要使用表格相关的标记 <table>     <tr>     <td>单元格内的文字</td>   ...

  7. Unit01： Web概述 、 HTML概述 、 文本处理 、 图像和超链接 、 表格 、 表单

    Unit01: Web概述 . HTML概述 . 文本处理 . 图像和超链接 . 表格 . 表单 demo1.html <!-- 声明网页的版本(文档类型) --> <!doctyp ...

  8. 13、Semantic-UI之表格与表单

    13.1 定义基础样式表格   在HTML中可以通过table进行表格定义,在Semantic-UI中也可以通过class="ui table"定义表格. 示例:定义基础表格 &l ...

  9. 框架，表格，表单元素，css基础以及基本标签的结合

    <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo ...

  10. Html学习之十八（表格与表单学习--统计表制作）

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

随机推荐

  1. oracle学习笔记——配置环境

    题记:最近再学oracle,于是按照这本经典的书<Oracle Database 9i/10g/11g编程艺术>来学习. 配置环境 如何正确建立SCOTT/TIGER演示模式 需要建立和运 ...

  2. tomcat源码导入eclipse步骤

    1. 获取源代码 方式一:从官网http://tomcat.apache.org/download-70.cgi 直接下载,官网提供了Binary 和 Source Code两种下载方式,要研究tom ...

  3. ServiceStack.OrmLite 学习笔记3 建表

    创建表 前一篇忘记写创建表了,这里补上.(其实前一篇也有那么一点) 建议安装源码里的t4模板看看效果先. public 的属性才有效 在表被创建或者删除的时候执行sql语句 [PostCreateTa ...

  4. 《Linux内核设计的艺术》学习笔记（六）执行setup.s

    参考资料 1. 8259A可编程中断控制器 jmpi , SETUPSEG // 0x90200 到这里,bootsect.s的执行就算结束了.控制权转移到了setup.s文件的手中. setup程序 ...

  5. 转 基于Quick-cocos2dx 2.2.3 的动态更新实现完整篇。（打包，服务器接口，模块自更新

    1,如何设计更新服务器接口. 2,不改变原框架的代码的情况下如何实现更新,并且可以实现精确的进度. 3,如何按照版本打包. 4,如何跨n个小版本更新. 5,版本回滚. 6,如何更新你的自动更新模块和f ...

  6. android上让我放弃使用wstring来操作中英文字符串 转

    android上让我放弃使用wstring来操作中英文字符串 2013-08-07 16:37:24|  分类: cocos2d|举报|字号 订阅     项目需要,需要对中英文字符串进行遍历修改等, ...

  7. CXF WebService 开发文档

    参考资料: 1. http://cxf.apache.org/docs/ 2. http://www.cnblogs.com/hoojo/archive/2011/03/30/1999587.html ...

  8. bootstrap 手风琴效果

    <!DOCTYPE HTML> <html><head><meta charset="utf-8"><title>按钮插 ...

  9. CentOS 7 下的软件安装建议

    https://seisman.info/how-to-install-softwares-under-centos-7.html https://seisman.info/linux-environ ...

  10. strcpy, memcpy, memset函数

    一. strcpy函数 原型声明:char *strcpy(char* dest, const char *src);   头文件:#include <string.h> 和 #inclu ...