HTML常用标签

表单

1.交互：户与服务器端进行数据交互的功能。

2.概述

1.form 表单

2.属性

① action 表示向何处提交表单数据。

② method ：表示表单提交的请求方式：

get：默认方式,在地址栏进行数据的传递。格式： ?参数=参数值&参数1= 参数值1 

用途： 超链接、搜索

post： 传递表单数据在请求体中，安全性高，数据无限制

用途：居多，注册 登录

<form action="index.html" method="post"></form>

3.input元素：

1.表单input 

1.text :文本框  2. password ：密码框  3.submit：提交按钮 

4.button 按钮:与submit的区别在于，该按钮点击不会自动提交表单 

5.checkbox 复选框 如果需要向服务器传值，必须提供name和value值。

6.radio 单选框,单选框必须作为同一个按钮组，才可以互斥操作。 加入同一个按钮组，name属性必须相同。

7.file:表示文件上传 8.image 图片域:具有提交表单的功能,必须有src的属性。

9.hidden 表示隐藏域 .通途： 当不希望在页面显示，但是有必须传递给服务器的数据。

<form action="">
用户名 ：<input type="text" name="username" />
<br />
<input type="button" value="点我打开百度"/>
<br />
爱好：
打篮球 <input type="checkbox" name="hobby" value="playbasketball"
checked="checked"/>
<!--如果属性与属性值相同，在h5以后，支持只写一个-->
踢足球 <input type="checkbox" name="hobby" value="football" checked/>
打排球 <input type="checkbox" name="hobby" value="volleyball"/>
<br />
请上传照片：
<input type="file" name="filename" />
<br />
这是一个隐藏域
<input type="hidden" name="idname" value="kk"/>
<input type="submit" value="提交" />
</form>

<form action="">
用户名 : <input type="text" />
<br />
<br />
性别：
男 <input type="radio" name="sex" checked="checked"/>
女 <input type="radio" name="sex" />
<br />
<br />
<input type="image" src="img/7.jpg" width="300px"/>
<input type="submit" />
<input type="reset" />
</form>

1.2.其他表单项：

1.下拉列表框： select > option

注意： ① multiple 可以显示多个列表项 ② size 表示可以显示的个数。

2.文本域： textarea

注意： ① cols 表示列 ② rows 表示行 ③ 只读 ： readonly="readonly

<form action="">
请选择国籍：
<select name="country" multiple="multiple" size="2">
<option value="0">------请选择-------</option>
<option value="1">中国</option>
<option value="2">日本</option>
<option value="3">美国</option>
</select>

<textarea name="" id="" cols="100" rows="100" readonly="readonly">
xxxx须知
请同意
</textarea>

2.属性

1.value ：对于输入型的，value就是输入在表单中的内容。 对于非输入型的，value值需要给定。

框架集

1.作用：可以让一个窗体被切割成多个窗口，显示多个页面。

2.frameset 框架集的外层标签，拆分窗体

3.注意： frameset在使用时，不能放置在body中，一般放置在head和body之间。

4.frameset的属性： ① cols：垂直拆分。 ② rows：水平拆分。

注意： 取值： % 、 px、* 表示除了上面的 ，剩下的部分

5.frame表示链接的窗体页面。其中src表示链接的页面。

6.如果想在某个窗体中打开的页面，需要给定name属性，通过target属性指名在哪个 frame中打开。

<frameset rows="150px,*">
<frame src="left.html" />
<frame src="right.html" name="bottom" />
</frameset>

总结：

1》 要想拆分窗体： frameset cols rows 每一个窗体 frame src

2》 对于页面存在链接的，如果需要在某一个框架集的窗体中打开，需要指名该窗体的 名称，通过超链接的 target属性进行设置。

2.框架集补充细节：1.noresize：无法重置框架     2.border：0 表示去除边框

<frameset rows="20%,*" border="0px" >
<frame src="" noresize="noresize"/>
<frameset cols="20%,*" >
<frame />
<frame />
</frameset>
</frameset>

浮动框架

浮动框架集   

iframe ：画中画

<iframe src="index.html" frameborder="1px"></iframe>