序言:
拖着疲惫的身躯,真的不想动,但是看着蹭蹭上涨的房价,仿佛冥冥之中又有了动力,加油吧,年轻人。
正文:
1.超链接
超链接可以允许我们从当前文档链接到其他任意文档(或称为其他资源),也可以链接到文档的某个特定的位置。
<a href="http://www.baidu.com" target="_blank">百度一下</a>
href:将要跳转的目标地址,其取值如下:
1>id值 主要用于锚点的跳转
2>url 主要是页面的跳转链接
3>email 如:<a href="mailto:[email protected]"></a> 用来链接到邮箱写信界面
target: 规定链接页面的呈现方式,其取值如下:
_self:在当前页面打开链接页面 _blank:重新打开一个选项卡加载链接页面
_parent:在父级页面加载链接页面 _top:在顶级页面加载链接页面
注:_parent和_top两种方式主要用于当前页面中引入了框架页面,如页面中用了<iframe>标签
2.表格
<table align="center" border="1px" cellpadding="4px" cellspacing="0" width="400px">
<thead></thead>
<caption>学生信息表</caption>
<tbody>
<tr>
<th>学号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr>
<td>1001</td>
<td>张三</td>
<td>23</td>
<td>男</td>
</tr>
<tr>
<td>1002</td>
<td>李四</td>
<td>22</td>
<td>女</td>
</tr>
</tbody>
<tfoot></tfoot>
</table>
表格通常以上述的代码实现,其中有<table>,<table>中包含<thead>、<tbody>、<tfoot>、<caption>
<thead>:表格头 <tbody>:表格体 <tfoot>:表格尾
<caption>:表示表格的标题信息
<tr>:表格的行,<tr>中可以包含多个<th>、<td>
<th>:表格的表头单元格
<td>:表格的数据单元格
align:设置表格呈现的位置,取值有left、center、right
border:设置表格单元格边框的宽度
cellpadding:设置内容与边框之间的距离
cellspacing:设置边框与边框之间的距离
特殊表格中有行的合并与列的合并:
行合并:rowspan 列合并:colspan
3.特殊标签:
pre:以文本的默认样式显示
hr:文本分割线
br:换行
sub:下标 如:log<sub>2</sub>4 效果:
sup:上标 如:10<sup>2</sup> 效果:
4.表单
什么是form?
form表单主要用于用户与web应用程序进行数据的交互,from通常由一个或多个表单元素组成,from表单的一些属性如下:
action:表单的提交位置
method:浏览器用来提交表单的方式
get:通常用来提交一个轻量级的数据,表单中记录的数据将会拼接起来显示在目标地址栏中
post:通常用来提交一个重量级的数据,表单中的数据会被封装在请求体中
name:设置表单的名称
target:浏览器在提交表单后在哪里显示回应
_self _blank _top _parent
5.表单控件
input
type:
text:单行文本框
password:密码框
checkbox:多选框
name值可以一致,可以不一致
<input type="checkbox" name="name0" value="1">
<input type="checkbox" name="name1" value="2">
<input type="checkbox" name="name2" value="3">
name=1&name=2&name=3
name0=1&name1=2&name2=3
注:属性name的属性值作为key,属性value的属性值作为value,以key=value的形式出现在地址栏中。
(初学者不太容易理解的地方)
radio:name必须一致
checked:默认选中
file:上传文件
submit:提交按钮
value设置按钮名称
reset:重置按钮
image:src alt
button:普通按钮
hidden:隐藏域
value: 按钮:给按钮设定名称
输入框:设定当前控件默认值
disabled: 禁用当前控件
size: 控制当前文本框的宽度
maxlength:控制用户所输入的字符个数
filedset
legend:设置当前模块的标题
label标签:
将文字和控件进行绑定
1> <label>
篮球: <input type="radio">
</label>
2> <label for="one">篮球:</label>
<input type="radio" id="one">
6.select 下拉组件
<select name="" id="">
<option value=""></option>
<option value=""></option>
<option value=""></option>
</select>
给select设置name属性
属性值为
1.option有value属性时,name属性值为value的属性值
2.option没有value属性时,name的属性值为option元素的内容
<select name="" id="">
<optgroup label="标题">
<option value="">分组元素</option>
<option value=""></option>
<option value=""></option>
</optgroup>
</select>
select :
size:设置下拉列表每次显示的列表选项(option)个数
multiple:
当前列表是否可以多选
按住ctrl键进行多选
布尔类型
size,multiple:只要使用了其中的任意一个,就改变了下拉列表的默认样式;
disabled:禁用整个下拉列表
option:
disabled:禁用某一个下拉元素
7.多行文本框
<textarea name="" id="" cols="30" rows="10"></textarea>
cols:列数
rows:行数
wrap:设置当前文本框是否可以换行
off:不可以换行
hard:将换行元素传递给服务器
soft:不将换行元素传递给服务器
readonly:
只读属性
布尔类型
8.滚动标签
<marquee behavior="" direction=""></marquee>
behavior:
当前元素滚动方式
scroll:不停滚动
slide:只滚动一次
alternate:来回滚动
direction:
当前元素的滚动方向
up:从下向上滚动
down:从上向下滚动
left:从右向左滚动
right:从左向右滚动
width/height:当前滚动的区域大小
bgcolor:当前滚动区域的背景颜色
scrolldelay:滚动延迟时间
单位:毫秒 1000ms-->1s
scrollamount:滚动速度
单位:px
loop:滚动次数
-1:无限循环
9.html5中的新增的表单元素
progress
进度条
min:进度条的最小值
max:进度条的最大值
value:当前进度条的当前值
meter:
磁盘使用量
min/max:设置当前meter的最小值和最大值
value:当前meter标签的所在值
low:设置当前meter标签的最下限的值
high:设置当前meter标签的最上限的值
optimum:当前meter最佳值
datalist:
数据列表,通常配合单行文本框来使用
城市:<input type="text" list="one">
<datalist id="one">
<option value="">北京</option>
<option value="">上海</option>
<option value="">广州</option>
</datalist>
optgroup:对选项进行分组显示
<select name="" id="">
<optgroup label="北京">
<option value="">11</option>
<option value="">22</option>
<option value="">33</option>
</optgroup>
</select>
10.新增的表单属性
type:
number:当前当行文本行只能输入数字
min/max:限制用户输入的最大和最小值
value:默认值
step:步长,整数值
email:电子邮箱
url:匹配一个url,如:http://www.baidu.com
color:调用本地的拾色器
tel: 电话
search:搜索框
总结:总的来说表单的知识比较重要,应该深入理解表单的传值规则与方式。