HTML基本标签(二)
1. 超链接:实现页面之间的导航。
链接文本或图像/链接另一个地址。
2. 语法:
<a href="path" target="目标窗口位置" >链接文本或图像</a>
常用值 _self(在本窗口内打开链接),_blank(在一个空白窗口打开链接)
例:
文本链接:
<a href="hetao.html" target="_blank">无漂白薄皮核桃</a>
图像链接:
<a href="hetao.html" target="_self"><img src="image/hetao.jpg" alt="无漂白薄皮核桃" title="无漂白薄皮核桃"/></a>
3. <base>标签:单标签
为页面上所有链接规定默认地址或默认目标窗口位置。
base标签必须位于head标签内部。
例:
<head>
<base target="_blank">
</head>
为本页面所有超链接规定为在一个新窗口打开超链接。
4. 链接路径:
a. 相对路径:相对于当前目录的地址。从当前目录出发到目标地址所经过的位置信息。常用(上级目录:../ 上上级目录:../../)。
<a href="login/login.htm">登录</a>
b. 绝对路径: 从我的电脑根标签出发到目标地址所经过的位置信息。少于。
<a href="/memAdmin/login/login.htm">登录</a>
5. URL 统一资源定位器
使用HTTP的URL的一般形式:
http://<主机>:<端口号>/<路径><文件名>
例:
http://www.sina.com:80/login/login.htm
6. 超链接的三个应用场合:
a. 页面间链接 从一个页面链接到另一个页面。
b. 锚链接: 从一个页面链接到页面中的某个位置。适用于内容较多的,超过一屏的页面。
实现方法:
1. 定义标记 <a name="标记名">目标位置</a>
2. 设置链接到标记位置
<a href="#标记名">当前位置</a>
例如:
<a href="#star">[明星专区]</star> ..........<a name="star">明星专区内容</a>
*3. 功能性链接: 邮箱,QQ链接等.....
<a href="mailto: guimeiWebMater@gmgw.com">站长信箱</a>
7. 注释:
<!--注释内容--> 用于增加代码的可读性,浏览器会自动忽略该内容。
8. 特殊符号
有些符号在html中以及使用,为了以示区分,所有要用特殊符号来标识(如>,<等)。
有些符号浏览器不认识,要用特殊符号来标识(如空格,版权符等)
常用特殊符号: 以分号结尾
空格:
大于(>):>
小于(<): <
引号(”):"
版权号(?) :©
9. 表单: 用于实现与用户交互。
表单标签:
单行文本框(text)
密码框(password)
单选按钮(radio)
复选框(checkbox)
下拉列表(select)
文本域(textarea)
提交按钮(submit)
重置按钮(reset)
表单语法: 如何发送表单数据post|get 表示向何处发送数据
<form method="提交方式" action="提交目的地" >表单内容......</form>
表单元素的基本格式:
<input name="表单元素名称" type="类型" value="值" size="显示宽度"
maxlength="最大长度" checked="是否选中" />
type: 表单元素的类型,默认为text,类型有text,password,radio,checkbox,select,textarea,submit,reset
name: 表单元素的名称,自己指定,与后台交互。
value: 表单元素的初始值。
size: 指定表单元素的初始宽度,type为text和password时以字符为单位,其他类型以宽度为单位。
maxLength: type为text或password时,输入的最大字符数。
checked: type为radio或checkbox时,指定按钮是否是被选中
9.1 文本框
<input name= "名称" type= "text" value= "初值"
size= "数字" maxlength="数字"/> name用于服务器端获取数据
例:
用户名:<input name="username" type="text" size="30"
maxlength="20"/>
9.2 密码框
密码:<input name= "名称" type= "password" value= "初值"
size= "数字"/>
例:
密码:<input name="password" type="password" size="30"/>
9.3 按钮
<input name= "名称" type= "按钮类型" value="按钮文字" ?
src="图片按钮的图片url"/>
按钮类型:button 普通按钮
submit 提交按钮
reset 重置按钮
image 图片按钮 type为图片按钮时才用指定src图片的路径。
例:
<input type="reset" name="reset" value=" 重填" />
<input type="submit" name="button" value="同意……" />
<input type="button" name="confirm" value="点播音乐" />
<input type="button" name="cancel" value="取消" />
<input type="image" src="images/login.gif" />
9.4 单选按钮
<input type="radio" name="组名" value="..." checked="..."/>
同一组,name必须相同,否则无法实现单选功能。
性别:
<input type="radio" name="gender" value="man" checked="checked"/>男
<inpur type="radio" name="gender" value="woman" />女
9.5 复选框
<input type="checkbox" name= " … " value= " … "
checked= " … " /> name可以不同
例如:
兴趣爱好:
<input type="checkbox" name="hobby1" value="sports" checked="checked">体育运动
<input type="checkbox" name="hobby2" value="music">音乐
<input type="checkbox" name="hobby3" value="game">游戏
<input type="checkbox" nam="hobby4" value="novel">小说
9.6 文件域
<input type="file" name= " … " />
例如:
<input type="file" name="files" />
9.7 列表框
<select name="指定列表名称" size="行数">
<option value="选项值" selected="selected">…</option>
… …
</select>
例如:使用固定选项,避免用户输入错误。
<select name="bmon">
<option value="" selected="selected">[选择月份]</option>
<option value="0">一月</option>
<option value="1">二月</option>
<option value="2">三月</option>
<option value="3">四月</option>
</select>
9.8 多行文本框
<textarea name="... " cols="列宽" rows="行宽">
文本内容
</textarea>
例如:
<textarea name="textarea" cols="6" rows="40">
请阅读贵美服务协议
</textarea>
10. 表单的高级用法
10.1 隐藏域:
方便服务器端记住客户端的信息,但又不希望客户看到的数据。
<input type="hidden" name="…." value="…" />
例如:
<input type="hidden" name="userid" value="666" />
10.2 只读和禁用属性
readonly: 希望某个框内的内容用户只能阅读而不能修改。
disabled: 因没达到使用的条件限制用户使用
例:
只读:
<textarea name="content" cols="60" rows="8" readonly="readonly">
欢迎阅读服务条款协议,贵美的权利和义务......
</textarea>
禁用:
<input name="btn" type="submit" value="注册" disabled="disabled" />
11.表单语义化:
符合W3C标准
语义化的标签
结构合理、代码简洁
11.1 语义化的标签:
域标签:
<fieldset> -----------声明域的范围
<legend>域标题</legend>
</field>
11.2 聚焦标签
增强鼠标的可用性
自动将焦点转移到与该标注相关的表单元素
<label for="id">标注的文本</label>
<input type="radio" name="gender" id="male"/>
例如:
<label for="username">密码</label>
<input type="text" name="username" id="username"/>