PHP之二_HTML标签简介（二）

　　PHP之二_HTML标签简介（二）

　　第二讲 HTML标签简介（二）

　　1、超链接标签

　　在网页中，经常见到超链接，就是可以点击的文字或图片，点一下，就跳到另一个页面。

　　一个网站是由多个网页构成的，经常需要在页面之间进行跳转，超链接扮演了重要的角色。

　　超链接的格式：

<a href="链接地址" target="目标窗口位置">链接热点文本或图像</a>

　　超链接标签由<a>开始，由</a>结束，内部文字即为可点击区域。
　　href属性指定点击超链接后跳转到的页面。

　　target属性指定打开链接页面的位置，target="_blank"表示在一个新窗口中打开，target="_self"表示在当前窗口中打开。

　　例如：

<a href="reg.html" target="_blank">注册用户</a>

　　这里使用的是站内链接，也可以外链到其它网站，例如：

<a href="http://www.baidu.com" target="_blank">百度</a>

　　另一种超链接的用法称为“锚链接”。它一般用于一篇很长的文章，文章的开头是目录，点目录中的某一章节，则页面翻滚到该章节所在的位置。

　　示例如下：

<p>章节目录</p><a href="#chap1">第一章 前言</a><a href="#chap2">第二章 PHP简介</a><a href="#chap3">第三章 软件安装</a><a href="#chap4">第四章 ......</a><a name="chap1">第一章 前言</a>[一段前言]<a name="chap2">第二章 PHP简介</a>[一段简介]......

　　<a name="锚名称">用于定义一个“锚（anchor）”，在一篇文章中可以定义多处“锚”。

　　< a href="#锚名称">用于定义一个锚链接，当点击这个链接时，页面翻滚到锚位置。

　　图片也可用于超链接，点击图片打开一个新页面也是很常见的：

<a href="konglaoshi.html" target="_blank"><img src="konglaoshi.jpg" alt="空老师" /></a>

　　使用图片代替文字作为点击区域。

　　2. 表单及表单元素

　　表单常用于用户提交数据给服务器，例如用户注册、搜索。

　　用户向服务器发送数据，常规方式有两种：

　　A、通过超链接发送数据

　　例如：

<a href="http://www.myweb.com/test.php?val1=123&val2=456">超链接发送数据</a>

　　通过超链接发送数据，是在网址后面加一个“?”，然后是“变量名=变量值”的格式，多个变量用“&”连接起来。

　　B、通过表单发送数据

　　通过表单的提交，可以将表单中的所有表单项数据发送到后台。

　　例如：

<p>用户注册</p><form action="register.php" method="post">用户名：<input name="uname" type="text" /><br />邮箱：<input name="mailbox" type="text" /><br />手机：<input name="phone" type="text" /><br /><input type="submit" value="注册" /></form>

　　以上是一个注册表单，用户填写完用户名、邮箱、手机号后，点“注册”按钮，这些数据就发送到服务器上。

　　我们来逐行分析上述代码。

　　一个表单相当于一个纸质的表，就象你填写“助学金申请书”一样，一个表单中有众多的数据项，就象“申请书”中有众多要填写的地方。

　　一个网页中可以有多个表单，每个表单可以有不同的目的地。一个表单被提交时，该表单内的所有表单项数据都被打包提交上去。

　　<form>标签表示表单，其action属性指定表单提交的目的地，通常是一个后台程序，后缀名为.php。method属性指定表单的提交方式，有“get”和“post”两种，具体区别可以百度一下关键词“表单提交方式”，通常用post。

　　表单元素就是填写项，大多数的表单元素都使用<input>标签，然后用type属性加以区别。例如文本框是：<input type="text" />，单选按钮是：<input type="radio" />，复选按钮是：<input type="checkbox" />。

　　每个表单元素必须命名，即必须有name属性。

　　表单元素有多种：

　　(1) 文本框

　　就是一个框，用来输入一行文字。

　　表单项前面一般都有说明文字。说明文字是不包含在表单项里面的。

　　现在流行的html，是使用<label>标签作为说明文字，例如：

<form>  <label for="uname">用户名</label>  <input type="text" name="uname" id="uname" />  <br />  <label for="pwd">密码</label>  <input type="password" name="pwd" id="pwd" /></form>

　　label的for属性表示说明文字是配给哪个表单项的，for属性值要跟表单项的id一致。

　　表单项可以有id属性，也可以有name属性，都是用来标识表单项的，它们有什么区别呢？

　　通常id用于前台，name用于后台，即服务端是只看名字的。

　　(2) 密码框

　　可以输入密码，输入的密码以星号显示，防止别人看见。

<input type="password" />

　　(3) 单选按钮

　　在几个选项之间进行选择，但只能选一个，例如性别为男、女。

<form>  <label for="male">男</label>  <input type="radio" name="sex" id="male" value="男" />  <br />  <label for="female">女</label>  <input type="radio" name="sex" id="female" value="女" /></form>

　　单选按钮呈现为一个圆形，文字需要另加。使用label为单选按钮加文字。

　　<input type="radio" />表示它是单选按钮，radio就是广播，很形象，象圆形的电波。多个相关的单选按钮要将名字设成一样，这样才有单选效果。每个单选按钮的value值不一样，value值会被提交给服务器。

　　当你选中男这个按钮，并提交表单时，实际上服务器得到这么一个数据：

　　sex=男

　　(4) 复选按钮

　　复选框也有多个选项，并且是可以多选的，例如业余兴趣是：读书、看电影、篮球等。

<form>  <label for="read">读书</label>  <input type="checkbox" name="hobby" id="read" value="读书" />  <br />  <label for="film">看电影</label>  <input type="checkbox" name="hobby" id="film" value="看电影" />  <br />  <label for="basketball">篮球</label>  <input type="checkbox" name="hobby" id="basketball" value="篮球" /></form>

　　复选按钮呈现为一个方框，选中时打勾，文字需要另加。

　　<input type="checkbox" />表示它是复选按钮。多个相关的复选按钮要将名字设成一样。每个复选按钮的value值不一样。

　　当你选择了读书、看电影两项，并提交表单时，实际上服务器得到这么一个数据：

　　hobby=读书,看电影

　　(5) 提交、重置按钮

　　每个表单都要有一个提交按钮，用于将用户填写好的数据发送到服务器。

　　每个表单可以有一个重置按钮，用于清空用户填写的内容。

<input type="submit" value="提交" /><input type="reset" value="重置" />

　　提交、重置按钮的行为是内置的，不需要用户干涉。value属性用于修改按钮上的文字。

　　(6) 多行文本域

　　多行文本域用于输入多行文字，有别于单行文本框，它不使用<input>标签，而是使用：

<form>  <label for="comment">评论：</label>  <textarea id="comment" name="comment"></textarea></form>

　　<textarea>即文本区域，由text+area两个单词合成，是一个传统标签，有开始标签，有结束标签（不能合在一起）。

　　(7) 下拉列表

　　有时，用户需要从一个下拉列表中选择，例如选择省份、选择城市等。

　　下拉列表是一个更复杂一些的组合标签：

<form>  <label for="month">月份：</label>  <select id="month" name="month">    <option value="-1" selected="selected">---请选择月份---</option>    <option value="1">一月</option>    <option value="2">二月</option>    <option value="3">三月</option>    <option value="4">四月</option>  </select></form>

　　可以看到，每个下拉列表首先由一个<select>标签构成。在<select>标签中，每个下拉选项由一个<option>标签构成。

　　option选项中的文字是下拉内容，其value值是提交给服务器的值，每个选项的值应该不相同。

　　当你选中四月，并提交表单时，服务器得到如下数据：

　　month=4

　　(8) 普通按钮

　　有时候，我们除了提交、重置按钮外，还需要一些不带任何内置行为的按钮，以便于自己写前台脚本来做一些特殊的事情。

　　这时，就可以使用普通按钮：

<form>  <button id="clickMe">点我</button></form>

　　可以看到，button也是一个传统的按钮，有开始标签，有结束标签。

　　普通按钮通常配合前台脚本（JavaScript）使用。

　　到目前为止，介绍完成HTML语言中常用的一些标签。如果想了解更多，可以看w3cschool的html教程。