今天学习的标签主要是用于与浏览者交互方面的,复杂性感觉也已经比之前的有所提高,不过学习下来也不算感觉难,就是要记的东西又多了,不过多练练应该问题不大。
<a>标签,链接到另一页面。语法结构为:
<a href=“目标网址” title=“鼠标滑过时提示的文本”>链接显示的文本</a>
有时候需要在新的浏览器窗口打开链接,可以这样实现:
<a href=“目标网址” target=”_blank”>
另外,使用mailto可以在网页链接Email地址,语法示例:<a href=”mailto:邮箱地址?cc=抄送地址&bcc=密件抄送地址&subject=主题&body=邮件内容”>发送</a>,详细介绍如图:
如需在网页中插入图片,可使用<img>标签,用法为<img src=”图片地址” alt=”下载失败时替换的文本” title=”鼠标滑过提示的文本”>。图片的格式可以使GIF,PNG,JPEG。
接下来是与浏览者交互很重要的标签,表单标签<form>,表单标签可以把用户输入的数据传输到服务器端。语法为<form method=”传送方式” action=”服务器文件”>…</form>。Method是传输数据的方式(get/post),action是浏览者输入的数据传送到的地方,比如一个PHP页面(save.php)。注:所有表单控件(文本框、文本域、按钮、单选框、复选框等)等必须放在<form></form>标签之间。
文本输入框、密码输入框,用户可在表单中键入字母、数字等内容,语法为:
<form> <input type=”text/password” name=”名称” value=”文本” /> </form>
当type为text时,为文本输入框,当type为password时为密码输入框,代码示例:
<form> 账户 <imput type=”text” name=”myname”> 密码 <input type=”password” name=”pass”> </form>
显示结果为:
当用户需要输入大段文字时,需要用到文本输入域,实现语法为:<textarea rows=”行数” cols=”列数”>文本</textarea>。代码示例:
<form action=”save.php” method=”post”> <lable>个人简介:</lable> <textarea rows=”10” cols=”50”>在这里输入内容。。。</texrarea> </form>
单选框复选框的实现,当tyoe=”radio“时为单选框,当type=”checkbox”时为复选框,语法为<input type=”radio/checkbox” value=”值” name=”名称” checkbox=”checked”>。同一组框内name要相同。当checkbox等于checked时,该选项被默认选中。
如需用到下拉列表框,可用一下代码实现:
<form> <lable>爱好:</lable> <select> <option value=”购物”>购物</option> <option value=”运动”>运动</option> <option value=”音乐”>音乐</option> <option value=”购物” selected=”selected”>购物</option> </select> </form>
在浏览器中显示效果为。其中value是向服务器提交的值,<option>与</option>之间的才是显示的选项。如果要在下拉列表框中进行多选,则需在<select multiple=”multiple”>。
当用户需要向服务器端提交数据时,需要用到提交按钮。<input type=”submit value=”提交””>,value表示的是按钮中显示的文字。
同样的,当type=”reset”时,可以实现重置功能。
Lable的作用,label标签不会向用户呈现任何特殊效果,它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本,就会触发此控件。就是说,当用户单击选中该label标签时,浏览器就会自动将焦点转到和标签相关的表单控件上(就自动选中和该label标签相关连的表单控件上)。语法为:<lable for=”控件id名称”>,标签中for的值应当与相关控件的id值相同,例:
<form> <label for="male">男</label> <input type="radio" name="sex" id="male" /> <br /> <label for="female">女</label> <input type="radio" name="sex" id="female" /> <label for="email">输入你的邮箱地址</label> <input type="email" id="email" placeholder="Enter email"> </form>
到这里html的常用标签基本已经学习得差不多了,整体感觉没有什么难点,的确容易激发初学者的兴趣,不过还需要多加练习,下次就会进入CSS的学习。