图片与超链接
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 : 必填属性,设置图片路径
设置图片的宽度,取值为像素值 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 表格宽度,取值像素值
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 设置单元格的宽度
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属性值保持一致