一、页内跳转
把a标签的href属性设置为#XXX时,点击这个a标签里面立刻就会跳转到id值为XXX的元素位置。
eg:点击第1/2/3块时,会跳转到相应的div盒子处。
<ul>
<li><a href="#box1">第1块</a></li>
<li><a href="#box2">第2块</a></li>
<li><a href="#box3">第3块</a></li>
</ul>
<div id="box1" class="box">第一块</div>
<div id="box2" class="box">第二块</div>
<div id="box3" class="box">第三块</div>
二、表单form
1.表单标签:<form action="#"></form>
action:当表单提交的时候,将数据发往何处。
2.input:定义输入框,按钮等,单标签。
type:定义input的类型(值不同对应的input的功能或样式都会发生改变。)
值:
text:定义文本输入框。
password:定义密码输入框。
button:定义可点击的按钮。
submit:提交按钮,会把表单内的数据提交给服务器。
reset:重置按钮,清除表单内所有的数据。
file:文件选择按钮,供文件上传。
accept:规定了文件上传的类型,text/*
image:定义图片形式的提交按钮,必须把src属性和image结合使用。
checkbox:定义复选框。
radio:定义单选框。
value:定义input的初始值。
required:输入内容是必须的,不能为空。
readonly:定义input为只读模式。
disabled:禁用input元素。
placeholder:定义文本输入框的提示音。
name:定义文本输入框的名字,唯一。
maxlength:最多可以输入多少字符。
size:定义文本框的宽度。
3.label:给input添加的标注。
for:为了让input和label进行绑定。
for的值要跟input的值相同,当点击label时,可以让input自动获得输入焦点。
4.多行文本输入框:
textarea:定义多行文本输入框。
name:规定文本区的名称。
cols:number,规定文本区内的可见宽度。
rows:number,规定文本区内的可见行度。
required:输入内容是必须的,不能为空。
readonly:定义input为只读模式。
disabled:禁用input元素。
maxlength:最多可以输入多少字符。
5.多选框
checkbox:定义复选框。
eg:
<label for="checkbox">复选框1</label>
<input type="checkbox" id="checkbox1">
<label for="checkbox">复选框2</label>
<input type="checkbox" id="checkbox2">
6.单选框
radio:定义单选框。
eg:
你喜欢吃什么水果?
<input type="radio" name="fruit1" id="fruit" value="苹果">
<label for="fruit1">苹果</label>
<input type="radio" name="fruit1" id="fruit" value="香蕉">
<label for="fruit1">香蕉</label>
注意:相同选择里 label 的 for 的值一定要相同,否则会变成多选。
7.分组
fieldset:将表单内容进行分组,会产生一个边框(默认为2px边框,内边距(10px
,12px),左右外边距2px);
legend:legend是fieldset元素定义的标题(默认在分组边框的上边框内,可以左右移动位置);
8.分组下拉菜单:
select:定义下拉菜单。
optgroup:定义选项组。
option:定义列表中的一个选项内容。
eg:
<select name="" id="">
<optgroup label="上午">
<option value="1">上课1</option>
<option value="2">上课2</option>
<option value="3">上课3</option>
</optgroup>
<optgroup label="下午">
<option value="1">上课1</option>
<option value="2">上课2</option>
<option value="3">上课3</option>
</optgroup>
</select>