超链接标签:



什么是超链接标签?



能够实现从当前文件跳转到其它文件的标签



语法:



<a>超链接文本</a>



属性:



href:



链接地址 #表示当前页面



可以为空“ ”也表示当前但是包含了网络请求 



刷新页面的效果



本地文件协议:



 file:///



target:设置目标文件打开方式



_self:默认当前窗口打开



_blank:新建窗口打开



锚点链接:



链接到当前文件的指定位置



语法:



设置锚点



                               <a name="bottom"></a>



                        链接锚点



                               <a href="#bottom">跳转</a>






表格:



语法:



格标签:



<table> </table>



属性:



border:设置边框(px)



width:宽度



geight:高度



align:水平对齐对齐方式



cellpadding



设置单元格内边距(内容与边框距离)(px)



cellspacing



设置单元格外边距(单元格与单元格、表格之间的距离)(px)



bgcolor:



设置表格背景颜色 取值:英文的单向



标签:



<tr> </tr>  (table row)



属性:



bgcolor:设置当前行背景颜色



align:设置水平对齐方式



valign:设置垂直对齐方式



top:上



middle:中



bottom:下



单元格



<td> </td>   (table data)



属性:



width:单元格的宽度



height:单元格高度



align:水平对齐方式



valign:垂直对齐



bgcolor:背景颜色



创建顺序



创建表格表标签



在表格标内嵌套行标签每个tr代表一行



在标签中创建单元格用来存放数据



<table> 



<tr>



<td>name</td>



<td>age</td>



<td>score</td>



<td>gander</td>



</tr>



</table>



单元格合并



单元格独有的属性:



colspan



合并:



从当前位置开始 横向合并n个单元(包含自身)



合并后要删除当行中多余的单元格



rowspan



合并:



从当前位置开始 纵向合并n个单元格(包含自身)



合并后要删除每列中多余的单元格



行分组:



允许将表格中若干行划分为一组 便于管理





这些标签可以省略 默认所有行都会添加到tbody中



建议thead --> tfoot --> tbody顺序书写



语法:



表头行分组:



<thead>



<tr></tr>



</thead>



表尾行分组:



<tfoot>



<tr></tr>



</tfoot>



主体行分组:



<tbody>



<tr>



</tr>



</tbody>



表单:



表单二要素:



1.form表单元素:



收集用户信息并发送给服务器



本身是不可见的 但是不能省略 因为数据的提交功能要由form元素完成



语法:



<form>表单控件</form>



属性:



action:用来指定数据提交的目的地址



method:数据请求方式 GET(默认)、POST...



GET请求:



通常用于向服务器端获取数据



提交的数据会以参数的方式拼接在URL后面



安全性较低



提交的数据最大为 2KB



POST



将数据提交给服务器处理



隐式提交 看不到提交的数据



安全性较高



提交数据大小无限制



2.表单控件:



提供能够跟用户交互的可视化控件



只有放在表单元素中的表单控件才允许被提交



分类:



1).



文本框:



语法:



<input type="text">



密码框;



语法:



<input type="password">





*属性:



name



定义当前控件的名称 缺省的话无法提交



value



提交给服务器的值 同时也是默认显示在控件上的值



maxlength:



限时用户输入的最大字符数



placeholder:



用户输入之前显示在输入框中的提示文本



2).



单选框:



<input type="radio">



复选框:



<input type="checkbox">



*属性:



name:



定义控件名称,还起到分组的作用 一组的的按钮名称必须一致



value



设置当前控件的值 最终提交给服务器



checked



设置预选择状态 可以省略属性值或使用“checked”



3).



隐藏域:



需要用户提交给服务器却不需要呈现给用户



语法:



<input type="hidden">



属性:



name:控件名称



value:控件值



文件选择框:



选择文件上传,发送给服务器



语法:



<input type="file"



属性:



name:定义控件名称



4).



下拉选择框:



<select name="province">



<option value="山东省">山东省</option>



<option values="山西省">山西省</option>



</select>



GET方式请求



URL拼接数据为  provide



文本域:



语法:



支持用户输入多行文本



<textarea> </textarea>



属性:



name:控件名



cols:指定文本域默认显示的列数 一行中文显示的英文量 减半



rows:文本域能够显示的函数



文本域可以由用户调整大小



按钮



提交按钮:



<input type="submit">



将表单数据发送给服务器



重置按钮:



<input type="reset">



重置表单 将表单内容初始化



普通按钮:



<input type="button" value="点击">



绑定自定义按钮事件



value:显示按钮的显示值



按钮标签:



<button>按钮提示文本</button>



可以在任何局限中使用 不局限于form



form中默认具有提交功能



可以添加属性type:submit、reset、button



表单外作为普通按钮需要通过js动态绑定事件实现



7).



label for ID



                                          将文字和单选框之类的小按钮合并 点击文字也能选择



语法:



<label for="表单控件的ID"> </label>



<input type="radio" name="gender" value="male" id="male">