HTML的设计与应用 绝对原创
一、HTML基础
HTML(Hyper Text Marked Language)即超文本标记语言，由浏览器解析。
标记: 绿色
所谓超文本，是不仅可加入文字的文本文件，还可以加入链接、图片、声音、动画、影视等内容文本文件。
标记: 红色
所谓标记语言，是在纯文本文件中包含HTML指令代码。这些代码不是程序语言，只是标记结构的语言，易学易懂，非常简单。
标记: 黄色
HTML 文件必须使用.htm 或者.html作为文件扩展名，推荐使用.html是比较安全的做法。
标记: 紫色
二、HTML语言的语法
2.1 HTML标签和元素
HTML 标签和元素
在HTML文件中是以标签来标记网页结构和显示内容资的。
以“<标签名>”表示标签开始，以“</标签名>”结束。大
部分标签是成对出现的，成对的标签也称容器。在一对标签中
也可以嵌套其他标签。一个HTML标签及标签中嵌套的内容就
是网页中的一个“HTML元素”。例如，在<body>和</body>
之间的是主体元素，又如，<title>和</title>是标签，而<title>
兄弟连PHP</title>则是标题元素。也有极少的标签不需要与之
配对的结束标签，也称空标签，即空元素，例如<br><hr>等。
双标签：<div>content</div>
单标签：<hr> 注：html4中需要关闭<br /> html5不需要关闭<br>
元素：一个HTML标签及标签中嵌套的内容就是网页中的一个“HTML 元素”。
如：<title>兄弟连</title>标题元素 <body>... ...</body>主体元素。
2.2 HTML 语法不区分字母大小写，为了符合W3C标准，推荐使用小写
2.3 HTML标签属性：<tag name="value" name1="value1"></tag> 以属性=“值”的形式出现
2.4 HTML颜色值的设置：大多数浏览器支持颜色名集合和RGB格式的数字，如：red、yellow、black、white、
green、等16个英文单词。 RGB： #ff00ff 、bgcolor="#ffff00"
2.5 HTML文档注释:
注释规则：<!-- 注释内容 -->
注释的好处：方便调错、团队协作、说明代码模块用途、专业程序员必备能力。
2.6 HTML代码书写规范：使用同级标签在一列，不同级标签用4个空格的位置或者tab键进行缩进，使代码更清晰有条理。
2.7 HTML 字符实体：
显示结果 描述 实体名称 实体编号
空格  
< 小于号 < <
> 大于号 > >
& 和号 & &
" 引号 " "
· 撇号 ' '
¢ 分 ¢ ¢
£ 磅 £ £
¥ 日元 ¥ ¥
§ 节 § §
© 版权 © ©
® 注册商标 ® ®
× 乘号 × ×
÷ 除号 ÷ ÷
一些字符在HTML中拥有特殊含义，不可以直接在网页中输出。如:< < > >
三、HTML的主体结构
<!DOCTYPE HTML>
<html>
<head>
... ...
</head>
<body>
... ...
</body>
</html>
HEAD头部元素
<head>
<title>LAMP|兄弟连|PHP培训</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<meta name="keywords" content="兄弟连,php培训机构,国内最大的,php论坛,">
<meta name="description" content="兄弟连是国内最优秀PHP培训机构">
<meta name="author" content="UI by 战狼工作室">
<meta name="copyright" content="2014 © copyright ">
<!--<base href="http://www.lampbrother.net" /> -->
<!--链接到一个外部样式表的方法-->
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript">
/*在里面输入js内容*/
</script>
<script type="text/javascript" src="js.js">
//javascript 使用方法
/*此种注释方法也可以*/
</script>
<style type="text/css">
/*CSS内联样式表方法*/
</style>
</head>
3.1 编码字符集：<meta charset="utf-8"> HTML5 支持 HTML5向下兼容
<meta http-equiv="content-type" content="text/html;charset=utf-8" /> HTML 4支持
3.2 网页标题：<title>网页标题</title>
3.3 网页关键字：<meta name="keywords" content="8-12个以英文逗号隔开的单词/词语">
3.4 网页描述信息：<meta name="description" content="80字以内的一段话，与网站内容相关">
3.5 网页作者：<meta name="author" content="UI by vilin">
3.6 网页版权信息：<meta name="copyright" content="2009-2014©版权所有">
3.7 网页刷新信息：<meta http-equiv="refresh" content="10;url=http://www.baidu.com"> 10秒后跳转到百度页面
3.8 链接一个外部样式表：<link rel="stylesheet" type="text/css" href="style.css" > 注：可以重复使用链接多个外部样式文件
3.9 网页基底文件：<base href="http://www.baidu.com"></base>
网页内超链接打开方式：<base target="_blank"></base>
3.10 嵌入样式表：<style type="text/css">
body { margin: 0; padding:0;text-align:center;}
</style>
注：嵌入样式表只能书写在<hea></head>头部标签内，不同于<script></script>
3.11 链接到一个外部JS文件：<script type="text/javascript" src="script.js"></script>
嵌入JS:<script type="text/javascript">
alert("这是一个js脚本");
</script>
注：嵌入js,可以放在<html></html>内的任何位置。
存在于<head> </head>之间的标签
(3.1 编码字符集：<meta charset="utf-8"> HTML5 支持 HTML5向下兼容
<meta http-equiv="content-type" content="text/html;charset=utf-8" /> HTML 4支持, 3.2 网页标题：<title>网页标题</title> , 3.3 网页关键字：<meta name="keywords" content="8-12个以英文逗号隔开的单词/词语">, 3.4 网页描述信息：<meta name="description" content="80字以内的一段话，与网站内容相关">, 3.5 网页作者：<meta name="author" content="UI by vilin">, 3.6 网页版权信息：<meta name="copyright" content="2009-2014©版权所有">, 3.7 网页刷新信息：<meta http-equiv="refresh" content="10;url=http://www.baidu.com"> 10秒后跳转到百度页面, 3.8 链接一个外部样式表：<link rel="stylesheet" type="text/css" href="style.css" > 注：可以重复使用链接多个外部样式文件, 3.9 网页基底文件：<base href="http://www.baidu.com"></base>
网页内超链接打开方式：<base target="_blank"></base> , 3.10 嵌入样式表：<style type="text/css">
body { margin: 0; padding:0;text-align:center;}
</style>
注：嵌入样式表只能书写在<hea></head>头部标签内，不同于<script></script>, 3.11 链接到一个外部JS文件：<script type="text/javascript" src="script.js"></script>
嵌入JS:<script type="text/javascript">
alert("这是一个js脚本");
</script>
注：嵌入js,可以放在<html></html>内的任何位置。)
BODY主体元素
body体标签：<body>... ...</body> 注：body 的属性在html4中已经不推荐使用，html5不支持
属性：bgcolor、background、bgproperties、text、 link、alink、vlink、topmargin、leftmargin
背景颜色、背景图片、图片固定或滚动、文字颜色、链接颜色、单击时颜色、访问后颜色、上边距、左边距
注：所有<body></body>标签内的标签都支持id class name style 这四个通用属性
格式标签
<!--格式标签开始-->
<a name="top">
<h2>1.格式标签实例</h2>
<h2>br hr pre ol ul li dl dt dd center p </h2>
这段文字会使用了<br>标签换行<br />
<pre>
下面
左边 右边
下面
</pre>
<hr width="60%">
<ol>
<li>选项一</li>
<li>选项二</li>
<li>选项三</li>
</ol>
<ul>
<li>菜单一</li>
<li>菜单二</li>
<li>菜单三</li>
</ul>
<dl>
<dt>水果类</dt>
<dd>苹果</dd>
<dd>香蕉</dd>
<dd>橙子</dd>
<dt>蔬菜类</dt>
<dd>茄子</dd>
<dd>黄瓜</dd>
<dd>豌豆</dd>
</dl>
<center>使用<center>标签让这句话居中显示</center>
<p>Description 属性可返回一个字符串，该字符串包含对错误的描述。
这是 Error 对象的默认属性。提供者和 ADO 均可成为错误源。
提供者负责向 ADO 传递特定的错误文本。对于接收到的每一个提供者错误或警告，ADO 都会向 Errors 集合中添加一个 Error 对象。枚举 Errors 集合以跟踪提供者传递的错误。
语法
Description 属性可返回一个字符串，该字符串包含对错误的描述。
这是 Error 对象的默认属性。提供者和 ADO 均可成为错误源。
提供者负责向 ADO 传递特定的错误文本。对于接收到的每一个提供者错误或警告，ADO 都会向 Errors 集合中添加一个 Error 对象。枚举 Errors 集合以跟踪提供者传递的错误。
</p>
<details>
<summary>细说PHP第二版</summary>
《细说PHP(第二版)》是在第一版热销的基础上，与兄弟连六年教学实践的完美结合。
六年时间，兄弟连由一名不见经传的小公司，成长为国内PHP培训领域的翘楚，累计培训
PHP程序员四千余人，论坛会员突破十万、技术视频下载量逾百万、电子杂志《草根》日
渐成熟、《细说PHP》.....
</details>
<dialog>
<dt>导演：</dt>
<dd>你知道什么叫潜规则吗？</dd>
<dt>演员：</dt>
<dd>我不知道，也不需要知道，我是投资方，今晚...</dd>
</dialog>
<!--格式标签结束-->
换行标签：<br> 单标签 如果有多个换行可以连续使用多个<br> 标记
分隔线标签：<hr> 单标签 水平分隔线标签
段落标签： <p> </p> 即换行之后插入一个空行
居中对齐标签：<center> </center> 相对于上一层元素居中对齐 注：html4支持，html5不支持。
预格式化标签：<pre> </pre> 页面中显示的和源代码中书写的格式效果完全一致
无序列表：<ul><li></li></ul> 使用<ul>作为无序的声明，使用<li>作为每个项目的起始。没有序列号，
使用缩进的形式表示一定的层次性。
有序列表：<ol><li></li></ol> 显示特定的项目顺序，与无序列表<lu>使用方式基本相同。
自定义列表：<dl><dt></dt><dd><dd></dl> 与<ul><ol> 类似，具体请看实例：
定义元素细节标签：<details><summary></summary></details> 定义元素细节标签，
用户可进行查看，或通过点击进行隐藏。html4不支持 html5支持
对话标签：<dialog><dt></dt><dd></dd><dt></dt><dd></dd></dialog>
<dt></dt>定义角色 <dd></dd>对话内容 html4不支持，html5支持。
组合元素标签：<figure></figure>:主要是对图片进行描述，补充搜索引擎对图片的识别。html4不支持，html5新标签。
<figure>
<figcaption>黄浦江上的的卢浦大桥</figcaption>
<img src="./shanghai_lupu_bridge.jpg" width="350" height="234" />
</figure>
注：html4需要单标签闭合，
html5不需要闭合。
(换行标签：<br> 单标签 如果有多个换行可以连续使用多个<br> 标记 , 分隔线标签：<hr> 单标签 水平分隔线标签 )
文本标签
<!DOCTYPE HTML>
<html>
<head>
<title>文本标签</title>
</head>
<body>
b i u tt cite em strong small big h1-h6 sub sup font>
<b>使用<b>标签输出加粗字体</b><br>
<i>使用<i>标签输出斜体字体</i><br>
<u>使用<u>标签输出下划线字体</u><br>
<tt>使用<tt>标签输出打印机字体</tt><br>
<cite>使用<cite>标签输出引证、举例的斜体字</cite><br>
<em>使用<em>标签输出强调的斜体字</em><br />
<strong>使用<strong>标签输出强调的粗体字</strong><br>
<small>使用<small>标签输出小型字体</small><br>
<big>使用<big>标签输出大型字体</big><br>
<h1>使用<h1>标签输出一号标题</h1>
<h2>使用<h2>标签输出二号标题</h2>
<h3>使用<h3>标签输出三号标题</h3>
<h4>使用<h4>标签输出四号标题</h4>
<h5>使用<h5>标签输出五号标题</h5>
<h6>使用<h6>标签输出六号标题</h6>
2的3次方：2<sup>3</sup>
3<sub>3</sub><br />
<font face="宋体" size="2" color="blue">输出蓝色绝对大小为2的宋体字</font><br>
<font face="黑体" size="+2" color="red">输出红色相对大小为+2的黑体字</font><br>
<font face="GB2312" size="-2" color="green">输出绿色相对大小为-2的GB2312字体</font><br>
</body>
</html>
标题字标签：<hn> </hn> n为1-6，定义了六级标题，而且会自动换行插入一个空行，n值越大，字体越小。
粗体字标签：<b> </b> 字体会有加粗效果 <b>字体会被加粗</b>
斜体字标签：<i> </i> 字体会有斜体字效果 <i>字体是斜体字</i>
下划线字体标签： <u> </u> 字体会有下划线效果 html4已不赞成使用，html5 不支持。
字体标签：<font face="宋体" size="4" color="#ffffff"> </font> html4不赞成使用，html5不支持
打印机字体标签：<tt> </tt> 不常用，html5不支持
小型字体标签：<small> </small> html4支持 html5不支持
大型字体标签： <big> </big> html4支持 html5 不支持
<cite> </cite> 用于引证、举例，通常为斜体字
<em> </em> 表示强调，通常为斜体字。
<strong> </strong> html4: 表示强调，通常为粗体字。
html5: 表示重要的文本
文字下标字体标签：<sub> </sub> 我是<sub>下标</sub>
文字上标字体标签：<sup> </sup> 2的3次方： 2<sup>3</sup>
链接和锚点标签
链接 <a href="http://www.baidu.com" target="_blank"></a>
target属性： _self:当前窗口打开链接，是默认值，_blank: 开启一个新的窗口打开链接。
_parent:在父级窗口打开文件，常用于框架。_top:在顶层窗口打开文件，常用于框架。
锚点：html4 命名锚点：<a name="top"></a> 访问锚点：<a href="#top">回到顶端</a>
html5 命名锚点：<a id="top"> </a> 访问锚点：<a href="#top">回到顶端</a>
邮件链接：<a href="mailto:243506597@qq.com">给vilin发邮件</a>
多媒体标签
图片标签<img>
<img width="300" alt="这是一张美女图片" title="瑶瑶" src="yaoyao.jpg"> 单标签
属性：html4支持：width (宽度)、 height（高度)、 alt(简单描述)、 title(图片标题)、 src(图片位置)、 border（边框)、 align(位置)、 usemap（图片映射)、
html5支持：width、 height、 alt、 title、 src、usemap、
图片链接：<a href="http://www.lampbrother.net" target="_blank"><img alt="图片链接“ src="baobao.jpg"></a>
图片映射：<img src="taiyangxi.bmp" alt="这是一张图片" width="150" border="1" usemap="#ty" />
<map id="ty" name="ty">
<area shape="circle" coords="125,100,14" href="#" />
<area shape="circle" coords="90,114,10" href="#" />
<area shape="rect" coords="0,0,78,260" href="#" />
</map>
音频标签<audio> </audio>
属性：src(文件位置)、autoplay（自动播放)、controls(控件) 、preload（自动加载)、loop(循环播放) source(源)、
实例1：<audio src="baidahuang.mp3" autoplay controls loop></audio>
实例2：<audio autoplay controls loop>
<source type="audio/mpeg" src="baidahuang.mp3">
<source type="audio/ogg" src="beidahuang.mp3">
你的浏览器不支持音频控件。
</audio>
html5新增标签
(属性：src(文件位置)、autoplay（自动播放)、controls(控件) 、preload（自动加载)、loop(循环播放) source(源)、, 实例1：<audio src="baidahuang.mp3" autoplay controls loop></audio>, 实例2：<audio autoplay controls loop>
<source type="audio/mpeg" src="baidahuang.mp3">
<source type="audio/ogg" src="beidahuang.mp3">
你的浏览器不支持音频控件。
</audio>)
视频标签<video> </video>
属性：src(文件位置)、autoplay（自动播放)、controls(控件) 、preload（自动加载)、loop(循环播放) source(源)、poster(图片封面)
实例1：<video src="baidahuang.mp4" autoplay controls loop></video>
实例2：<video autoplay controls loop poster="manbu.jpg">
<source type="video/mpeg" src="baidahuang.mp4">
<source type="video/ogg" src="beidahuang.mp4">
你的浏览器不支持视频控件。
</video>
注：还有preload 属性 预先加载，如果使用 autoplay该属性，将忽略该属性
html5新增标签
(属性：src(文件位置)、autoplay（自动播放)、controls(控件) 、preload（自动加载)、loop(循环播放) source(源)、poster(图片封面), 实例1：<video src="baidahuang.mp4" autoplay controls loop></video>, 实例2：<video autoplay controls loop poster="manbu.jpg">
<source type="video/mpeg" src="baidahuang.mp4">
<source type="video/ogg" src="beidahuang.mp4">
你的浏览器不支持视频控件。
</video>
注：还有preload 属性 预先加载，如果使用 autoplay该属性，将忽略该属性)
动画标签<embed> </embed>
属性：src(文件位置)、autoplay（自动播放)、controls(控件) 、preload（自动加载)、loop(循环播放) source(源)、poster(图片封面)
实例1：<embed src="pear.swf" autoplay controls loop></embed>
实例2：<embed autoplay controls loop poster="manbu.jpg">
<source type="video/mpeg" src="baidahuang.mp4">
<source type="video/ogg" src="pear.swf">
你的浏览器不支持视频控件。
</embed>
注：还有preload 属性 预先加载，如果使用 autoplay该属性，将忽略该属性。
html5新增标签
(属性：src(文件位置)、autoplay（自动播放)、controls(控件) 、preload（自动加载)、loop(循环播放) source(源)、poster(图片封面), 实例1：<embed src="pear.swf" autoplay controls loop></embed>, 实例2：<embed autoplay controls loop poster="manbu.jpg">
<source type="video/mpeg" src="baidahuang.mp4">
<source type="video/ogg" src="pear.swf">
你的浏览器不支持视频控件。
</embed>
注：还有preload 属性 预先加载，如果使用 autoplay该属性，将忽略该属性。)
表格标签<table></table>
html4支持属性
<!DOCTYPE HTML>
</html>
<head>
<title>表格实例</title>
<meta charset="utf-8">
</head>
<body>
<!--HTML表格开始-->
<h2>4.HTML表格</h2>
<h2>table caption tr th td thead tfoot tbody align valign bgcolor width height border</h2>
<table align="center" border="2" cellspacing="5" cellpadding="5" width="50%">
<caption><h3>学员表</h3></caption>
<thead>
<tr><th colspan="3">学员基本信息</th><th colspan="2">成绩</th></tr>
<tr><th>姓名</th><th>性别</th><th>专业</th><th>课程</th><th>分数</th></tr>
</thead>
<tbody>
<tr align="center">
<td>小峰</td><td>男</td><td rowspan="2">计算机</td><td rowspan="2">PHP开
发</td><td>86</td>
</tr>
<tr align="center">
<td>小影</td><td>女</td><td>98</td>
</tr>
</tbody>
<tfoot>
<tr><td align="right" colspan="5">制表人：潘晓亮</td></tr>
</tfoot>
</table>
<!--HMTL表格结束-->
<hr>
<!--HTML表单设计开始-->
<h2>5.HTML表单设计</h2>
</body>
</html>
<table></table>属性：bgcolor、background、width、height、valign（top midden bottom)、align(left center right)、border cellspacing、cellpadding、
背景颜色、背景图片、 宽度、高度、 垂直方向位置(上 中间 下)、 水平方向位置（左 中 右)、边框宽度、单元格间距、内容和边框距离、
<table></table>内的标签：<caption></caption> <tr></tr><th></th> <td></td>
表格标题 表格行标签、 单元格标签（字体加粗）单元格标签
<thead></thead><tbody></tbody><tfoot></tfoot>
对表格的主体部分进行分组，分别为表头，表体，表注（页脚）。具体使用查看实例
<table></table>内的标签的属性 <tr></tr>: bgcolor background height valign align 有些属性浏览器可能不支持
<th></th><td></td>：bgcolor background width valign align colspan rowspan有些属性浏览器可能不支持
关于<table></table>标签内<colgroup><col></col></colgroup>标签个浏览器都存在兼容方面的问题，了解即可
html5支持属性：在html5中都不支持<table></table><caption></caption><tr></tr><td></td>标签内的属性除去<th></th><td</td>中colspan rowspan属性
框架结构
frameset框架(HTML5不支持)
frameset框架实例.rar
frameset框架相关标签和标签属性：<frameset></frameset>属性：cols、rows、frameborder 、border、<frame> 属性：src、name、noresize、scrolling、frameborder、border
cols:用像素数和%分隔左右窗口，“*”表示剩余部分 cols="200,*" frameborder: 0 代表不显示边框 1 代表显示边框。
rows:用像素数和%分隔上下窗口，“*”表示剩余部分 rows="240,*" border:设置边框粗细，默认是5像素。
<frame>属性： src 指定加载的文件位置。 name 指定框架名称是链接标记target所要参数 noresize 不能调整窗口大小，省略时可以调整。
scrolling 是否显示滚动条 auto 自动 yes 有 no 没有 frameborder 1显示边框 0不显示边框 border 边框粗细
frameset简单实例：
<!DOCTYPE HTML>
<html>
<head>
<title>frameset框架简单实例</title>
<!--<base href="http://www.baidu.com" target="_blank" />-->
<meta name="keywords" content="关键字" />
<meta name="description" content="描述信息" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<frameset rows="100,*" frameborder="1" border="3">
<frame name="top" scrolling="auto" noresize="noresize" frameborder="1" border="1" src="top.html" />
<frameset cols="200,*" frameborder="1" border="5" >
<frame name="main" scroling="auto" noresize="noresize" src="main.html" />
<frame name="menu" scrolling="auto" noresize="noresize" src="menu.html" />
</frameset>
</frameset>
</html>
iframe框架(主流框架)
<iframe></iframe>属性：name (命名框架名称，是target调用参数) src(加载的文件位置）width(框架宽度) height(框架高度)
align (align 属性规定 iframe 相对于周围元素的水平和垂直对齐方式) html5中仅仅支持src属性。
iframe简单实例：<iframe src ="/index.html" align="right">
<p>Your browser does not support iframes.</p>
</iframe>
表单标签<form></form>
HTML4支持的表单
<!--HTML表单设计开始-->
<h2>5.HTML表单设计</h2>
<h2>input(text password submit reset buttom hidden radio checkbox) select option textarea </h2>
<table align="center" width="50%">
<caption><h2>LAMP学员基本信息</h2></caption>
<tr>
<th>姓 名：</th>
<td><input type="text" value="请输入你的姓名..." name="xm" maxlength="20" size="20"></td>
</tr>
<tr>
<th>性 别：</th>
<td>
<label><input type="radio" name="sex" value="n" checked />男</label>
<label><input type="radio" name="sex" value="v" />女</label>
<label><input type="radio" name="sex" value="secret" />保密</label>
</td>
</tr>
<tr>
<th>学 历：</th>
<td><select size="1" name="xl">
<option selected>--请选择--</option>
<option value="1">高中</option>
<option value="2">大专</option>
<option value="3">本科</option>
<option value="4">硕士</option>
<option value="5">其他</option>
</select>
</td>
</tr>
<tr>
<th>选修课程：</th>
<td>
<label><input type="checkbox" name="kc[]" value="a">Linux</label>
<label><input type="checkbox" name="kc[]" value="b">Apache</label>
<label><input type="checkbox" name="kc[]" value="c">MySQL</label>
<label><input type="checkbox" name="kc[]" value="d">PHP</label>
</td>
</tr>
<tr>
<th>自我评价：</th>
<td>
<textarea cols="30" rows="7" name="pj">
请简单的评价下自己...
</textarea>
</td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="提交"> <input type="reset" value="重置"></td>
</tr>
</table>
<!--HTML表单设计结束-->
<form></form>属性：<form action="login.php" method="post" enctype="multipart/form-data">input标签 textarea标签select标签</form>
表单<form></form>属性：
1.name 表单名称
2.method 该属性用来定义处理程序从表单中获得信息方式，可取的为GET和POST中的一个。GET方法是将表单内容附加
在URL地址后面，所以对提交信息的长度进行了限制，不可以超过8192个字符，同时GET方法不具有保密性，
不适合处理信用卡卡号等要求保密的内容，而且不能传送非ASCII的字符。POST方法是将用户在表单中填写的
数据包含在表单的主体中，一起传送到服务器上的处理程序中，不会在浏览器的地址栏中显示提交的信息，
这种方式传送的数据没有限制，默认是GET方法
3.action 该属性的值是处理程序的程序名(绝对和相对URL),如果这个属性是空值，则当前文档的URL将被使用，当用户
提交表单时，服务器将执行URL里面的程序(例如，PHP程序)
4.enctype 设置表单资料的编码方式 enctype="multipart/form-data"（设置此属性可以传递图片，文件等大文件）
5.target 该属性和链接中的同名属性类似，用来指定目标窗口或目标帧
input标签
文本域：用户名：<input type="text" name="username" value="请输入你的用户名" size="20" maxlength="20" />
文本域text 定义控件名称 初始值，打开浏览器看到的 文本输入框宽度 文本输入框允许用户输入的最大字符数
密码域：密码：<input type="password" name="passwd" value="此处的值显示为***" size="20" maxlength="20" />
提交： <input type="submit" name="" value="提交" />
重置： <input type="reset" name="" value="重新填写" />
普通按钮： <input type="button" name="" value="" />
隐藏域： <input type="hidden" name="" value="" /> 注：name、value属性必须填写
单选框: 性别： <label> <input type="radio" name="sex" value="1" checked>男</label>
<label><input type="radio" name="sex" value="0">女</label>
注：单选框中name值必须相同，才可以起到互斥作用，checked 默认选中
复选框: 选修课程: <input type="checkbox" name="xx[]" value="1" checked>Linux
<input type="checkbox" name="xx[]" value="2">PHP
<input type="checkbox" name="xx[]" value="3">MySQL
<input type="checkbox" name="xx[]" value="4">Apache
注：name 值必须是数组或者不一样的值，因为是复习框要获取多个值。
label标签： 标签定义控件的标注。如果您在 label 元素内点击文本，就会触发此控件。
就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
实例：1.<input type="radio" name="sex" id="sex" value="1"><label for="sex">男</label> 点击男就可以选中
2.<label><input type="radio" name="sex" value="0">女</label> 点击男就可以选中 与上面效果一样。
3.参考实例，不推荐使用此方式。
<!DOC TYPE>
<html>
<head>
<title>label用法</title>
<meta charset="utf-8">
</head>
<body>
<form action="get.php" method="get" enctype="multipart/form-data">
<input type="text" name="username" placeholder="jack" list="ll">
<datalist id="ll">
<option value="三国演义"></option>
<option>红楼梦</option>
<option label="西游记"></option>
<option value="shuihuzhuan" label="水浒传"></option>
</datalist>
</form>
</body>
</html>
图片按钮：<input type="image" src="anniu.jpg" alt="submit"> 注：图型式的提交按钮
上传文件：<input type="file" name="tuxiang">
注：与提交按钮配合使用，可以上传文件，还有，<form></form>属性中enctype="multipart/form-data"要设置
多行文本域： 自我介绍：<textarea cols="40" rows="5" name="jieshao" value="1">
请简要介绍下自己..
</textarea>
下拉列表： 学历：<select name="xl" size="1">
<option value="1">高中</option>
<option value="2 selected>大专</option>
<option value="3">本科</option>
<option value="4">硕士</option>
<option value="5">其他</option>
</select>
注：要使用多选下拉列表，需要<select></select>属性中加入multiple ，name属性的值要是数组。
HTML5新增的表单
文本域新增属性：placeholder(类似又不同于value属性的)、readonly(只读) 、disabled(不可用)required(非空约束)
用户名： <input type="text" name="username" placeholder="请输入用户名">
用户名： <input type="text" name="username" placeholder="jack" readonly>
用户名： <input type="text" name="username" placeholder="jack" disabled>
用户名： <input type="text" name="username" placeholder="jack" required><input type="submit" >
下拉列表分组标签：<optgroup></optgroup>
电影连播：<select name="movie[]" >
<optgroup label="科幻片">
<option value="1" >黑客帝国</option>
<option value="2">星际争霸</option>
<option value="3"> 指环王</option>
<option value="4">阿卡特人</option>
</optgroup>
<optgroup label="爱情片">
<option value="5">那一年</option>
<option value="6">野蛮女友</option>
<option value="7">那小子真帅</option>
<option value="8">野蛮老师</option>
</optgroup>
</select>
可以数据列表（历史记录）： 喜欢的电视剧： <input type="text" list="dsj" name="dsj" >
<datalist id="dsj">
<option value="闯关东"></option>
<option value="大宅门"></option>
<option value="大染坊"></option>
<option value="知青"></option>
<option value="历史上的今天"></option>
</datalist >
新增<input>类型： search date color datetime month week time url email range(属性max min step) number
搜索域 日期 颜色 日期时间 月（显示到月） 周（第几周） 时间 网址 邮箱 范围 (max=100 min=1 step=10) 号码（100，100.00这种类型）
<button></button> 作用类似于<input type="button" name="" value="">：自定义按钮
新增pattern 与JS配合使用，具体查看w3c手册。
512
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
