前端—— 前端介绍开始（二）
图片与超链接
1 URL
uniform Resource Locator 统一资源定位符
作用：标识网络或本地资源的位置，俗称路径
组成：协议 域名 文件目录 文件名
http://www.taobao.com/login/.......**.html
分类：
1 绝对路径
从根目录开始层层查找文件，构成的路径就叫绝对路径
根目录都以 / 或者是盘符 标识
适用于网络路径
注意：
1 。windows电脑上正反斜杠不区分。需要手动调整成路径的斜杠 /
2 . 复制粘贴绝对路径，只到文件目录，需要手动补全文件名
2 相对路径
从当前所有的文件夹（目录）开始查找资源，构成的路径就叫相对路径
注意：1 ../表示返回上一级目录
2 URL 严格区分大小写
3 网络URL中避免出现中文
2 图片标签
1 作用：在网页中插入一张图片
2 语法：<img src=''>
3 属性：
src : 必填属性，设置图片路径
width:设置图片的宽度，取值为像素值 200px 【只设置宽度或者高度的话，默认是按比例来缩放2】
height: 设置图片高度，像素单位可以省略的
title:取值是图片的描述信息
alt :设置图片加载失败之后的提示文本
3 超链接标签
1 。提供了从当前文件跳转到其他文件的功能
2 。语法：<a>超链接内容</a>
3 . 属性：
href：必填属性，指定链接地址
1 属性为空‘’表示跳转至当前页，包含网络请求。相当于刷新
2 属性为‘#’表示当前页，不包含网络请求
target:设置目标文件的打开方式，指是否新建窗口打开，默认在当前窗口打开目标文件
取值：
_self 默认值，在当前窗口打开
_blank 新建窗口打开
4 锚点链接
作用：在指定文件的指定位置进行跳转
语法：
<a href='#6'>6.早年经历</a> 需要跳转的链接
<a name='6'></a> 需要跳转到的位置
2 表格标签
1 语法：
1.标签介绍
表格标签：<table></table>
行标签:<tr></tr> (table row)
单元格标签：<td></td> (table data)
2 创建顺序：
1 创建表格标签 <table></table>
2 表格中创建行，每一行就是一个tr
3 在行中创建单元格存放数据，每一个单元格对应的一个td
3 table标签属性
1 border ：设置表格边框，取值为像素值
实线为solid 虚线为dashed 点线边框为dotted 双线边框为double
2 bgcolor:设置表格背景颜色，取值颜色的英文单词
3 width:表格宽度，取值像素值
4 height:设置表格高度，取值为像素值
5 align:表格的水平对齐方式，取值 left
6 cellspacing:取值为像素值，用来设置单元格的外边距（单元格与单元格之间，或单元格与表格边框之间的距离）
7 cellpadding:取值像素值，表示单元格的内边距（同上相反）
4 tr 标签属性
1 hgcolor:设置行背景颜色
2 align:设置内容水平对齐方式 left/center/right
3 valign:设置内容垂直对齐方式 top/middle/bottom
默认水平居左，垂直居中
5 td 标签属性
1 hgcolor:设置单元格的背景颜色
2 width:设置单元格的宽度
3 height:设置单元格的宽度
4 align:设置单元格水平
5 valign:设置单元格垂直
6 单元格合并：（重点）
涉及单元格跨行或跨列合并的属性 rowspan colspan,是单元格独有的属性
1 单元格的跨行合并
从当前单元格开始，向下合并几行
<td rowspan="3"></td> 包含自身在内，向下合并单元格，最络占据三个单元格的位置
2 单元格的跨列合并
从当前单元格开始，向右合并几个单元格，
<td colspan="3"></td>包含自身在内向右合并单元格
最终占据三个单元格的位置
注意： 一旦发生单元格合并，要时时调整表格结构
保证表格结构的完整
发生跨行合并，要删除后续行中多余的单元格
发生跨列合并，要删除当前行中多余的单元格
4 表格结构：
行分组：允许将表格中的若干行划分为一组，便于管理
语法：
1 表头行分组
<thead>
<tr> <td></td>
</tr>
</thead>
2 表格尾部
<tfoot>
<tr> <td></td> </tr>
</tfoot>
3 表格主体
<tbody>
<tr> <td></td> </tr>
</tbody>
注意：表格的结构化标签<thead>.<tfoot>.<tbody>可以省略，如果活力，所有的行和单元格会被自动添加到tbody中，作为表格主体信息
如果涉及到行分组，需要添加结构标签，建议按照 <thead>,<tfoot>,<tbody>的顺序书写
3 表单
1 用于接收用户输入的数据，并提交给服务器
表单的二要素：
1 表单标签 <form></form>
收集用户信息，并且提交给服务器
2 表单控件：（重点）
提供一组可以跟用户交互的可视化组件
2 form 元素
1 from本身不可见的，但是不能省略，因为数据的提交功能要由form实现
2 语法：
<form>
表单控件
</form>
3 标签属性
<form action="提交的地址" method="提交的方法"></form>
GET：
默认的提交方式：常用于向服务器获取数据
特点：
1 如果是提交数据，数据会以参数的形式拼接在URL后面
2 安全性较低
3 数据的大小有限制，最大为2KB
POST:
常用于向服务器改送数据
特点：
1 隐式提交，外部看不到数据，数据会被打包存在请求体中发送
2 安全性高
3 数据的大小没有限制的
3 表单控件
分类：
1 文本框和密码框
<input type="text">普通文本输入框
<input type="password">密码框
1 name属性：必填项，定义控件名称，缺少则无法提交当前的数据
2 placeholder:设置提示文本
3 maxlength:设置最大输入长度
4 value:设置当前输入框的值
2 单选按钮与复选框
<input type='radio' name="" value="">单选钮
<input type="checkbox" name="" value="">复选框
属性：
1 name:除了定义控件名称之外，还具有分组的作用，一组按钮中的name属性值必须保持一致
2 value：必须给，设置按钮对应的值
3 checked:默认选中
3 隐藏域与文件选择框
1 <input type='hidden' name="" value="">隐藏域
隐藏域本身不可见，用于隐式传递用户相关的信息
2 文件选择框
<input type="file" name="">
1 表单控件
1 下拉选择框
<select name="province">
<option vavlue="hebei">河北</option>
</select>
2 文本域
支持用户多行输入的
<textarea name="uinfo" cols="" rows=""></textarea>
属性：
1 name 控件名称
2 cols 指定文本域默认显示的列数，一行能显示的英文字符数量，中文字符减半
3 rows 指定文本域默认显示的行数
注意：文本域是可以由用户调整大小的
3 按钮
1 提交按钮
<input type="submit" name="submit" values="">
属性 type = submit设置按钮类型为提交
value 用来设置按钮的显示文本
作用：将表单中的数据提交给服务器
2 重置按钮
<input type="reset" value>
作用：将表单控件的值，重置为初始状态
3 普通按钮
<input type="button" value="">
4 特殊按钮
<button>登录</button>
注意：<button>标签如果放在form中使用，作用跟提交按钮是一致的，都会将表单中的数据发送给服务器
在form外，需要绑定自定义事件
4 lable for ID
1 使用label标签包含要显示的文本
2 为label标签添加for 属性，属性值与要绑定的控件的id属性值保持一致
