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" />
在几个选项之间进行选择,但只能选一个,例如性别为男、女。
<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教程。