目录
表单标签
表单是html中重要的一部分
<form></form>表单标签,用于搜集不同类型的用户输入,比如注册信息,购物信息等
- name:表单的名称
- action:提交的路径地址,action 该属性定义在提交表单时执行的动作提交给服务器
- method:规定在提交表单时所用的 HTTP 方法,值为get,post,put,delete,常用的为get和post,get提交数据的方式相对不安全,提交的数据大小有限制,根据浏览器的差异而有所不同.post提交数据的方式相对安全,提交的数据大小也没有限制
<input/>单个使用,输入框,是最重要的表单元素,有很多形态,根据 type 属性的值的不同来设置不同形态,但各种形态都应该设置name属性,因为name表示字段,服务器获取表单数据后,解析数据时,需要用name来区分不同字段
- type:设置input标签的形态,值有如下几个
- text:用于文本输入的单行输入字段
- name:要定义的字段,
- value:可设置的默认值,可不设置此属性
- password:密码输入框,设置成此格式,会显示成掩码即小黑点
- name:定义的字段,要跟后台对应,
- radio:单选按钮,在多个选项中只能选择一个
- name :定义的字段,跟后台对应,
- value:单选框需要设置自定义value值
- checked,表示默认被选中,在需要设置默认被选中的条目上使用该属性,值为checked
- checkbox:复选框,可以在多个选项中选择多个
- name:定义的字段,跟后台对应
- value:需要设置的自定义的值
- file上传文件的小控件
- name:定义的字段,跟后台对应
- submit:提交按钮
- value:显示的对应按钮的字
- button:按钮,点击按钮触发一些事件
- value:显示在对应按钮的字
- image:图片按钮,点击按钮触发一些事件
- src:图片路径
- alt:图片的说明
- reset 重置,点击会清空之前填写的内容
- value显示在重置按钮上的字
- hidden:隐藏域,不需要用户看到,但是服务器需要的 数据,用隐藏域这种方式
<select></select> 下拉列表
- name:定义的字段,跟后台对应
- value:设置不同的自定义的值
- selected:表示默认的选中的,在需要设置默认被选中的条目上使用该属性,值为selected
<option></option>可选项,下拉菜单可以级联
- value:表单项的值
- selected:默认被选中
<textarea></textarea>:文本输入框,可以用来写备注,默认的textarea大小可以调整,可以通过下面两个属性设置默认大小,textarea包裹的文字默认用来填充文本输入框,可被修改
- name:定义的字段,跟后台对应,
- cols:设置列数
- rows:设置行数
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form action="#">
<table>
<!-- 单行文本输入框 -->
<tr>
<td> 请输入用户名</td>
<td>
<input type="text" name="userName" value="张三"/>
</tr>
<!-- 密码框 -->
<tr>
<td> 请输入密码</td>
<td>
<input type="password" name="password" value=""/>
</tr>
<!-- 复选框 -->
<tr>
<td> 请选择爱好</td>
<td>
<input type="checkbox" name="preference" value="book"/>看书
<input type="checkbox" name="preference" value="tv"/>看电视
<input type="checkbox" name="preference" value="movie"/>看电影
</tr>
<!-- 单选按钮 -->
<tr>
<td> 请选择您的学历</td>
<td>
<input type="radio" name="school" value="primier" checked="checked"/>小学
<input type="radio" name="school" value="high"/>中学
<input type="radio" name="preference" value="university"/ >大学
</tr>
<!-- 文件上传控件 -->
<tr>
<td> 请上传您的文档</td>
<td>
<input type="file" name="file" >
</tr>
<!-- 下拉列表 -->
<tr>
<td> 请选择您的籍贯</td>
<td>
<select name="province">
<option value="hb">河北</option>
<option value="hn" selected="selected">河南</option>
<option value="sd">山东</option>
</select>
</tr>
<!-- 多行文本输入框 -->
<tr>
<td>备注</td>
<td>
<textarea rows="3" cols="10">我是个好人</textarea>
</td>
</tr>
<tr>
<td>备注2</td>
<td>
<textarea >我是个好人</textarea>
</td>
</tr>
<!-- 提交按钮 -->
<tr>
<td>
<input type="submit" value="提交">
</td>
<td>
<input type="button" value="提交">
</td>
</tr>
<!-- 复位按钮和以图片作为按钮 -->
<tr>
<td>
<input type="reset" value="重置">
</td>
<td>
<input type="image" src="images/01.png" alt="图片">
</td>
</tr>
<!-- 隐藏域,服务器需要,但是不要用户看见-->
<tr>
<td>
<input type="hidden" name="hide" value="helloworld">
</td>
</tr>
</table>
</form>
</body>
</html>
框架标签
日常浏览中,咱们看到的网页是长这个样子的:(以百度的某个页面为例)
这种页面是通过将多个子页面通过框架标签,结合在一起
下面看框架标签需要注意的是<frameset></frameset>和<body></body>不能同时使用
<frameset></frameset>框架标签,对网页的格式进行分块,进行对多个网页的简单排版
- rows:按行划分,如果对三行划分,格式可以为"120,80,*" ,*代表剩余部分,也可以按百分比划分,比如值为"25%,50%,25%"
- cols:按列划分,如果对三行划分,格式也可以用"20%,30%,*",*代表剩余部分
<frame/>单个即可,代表页面
- src:页面地址
- name:设置name的作用在于,我在某个页面上设置链接的时候,可以指定在这个框架中的哪一个子页面进行跳转,如果找不到指定的子页面,则会在整个大的页面上跳转
示例:先看总的框架标签代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<frameset rows="200,*">
<frame name="top" src="表格标签.html">
<frameset cols="160,*">
<frame name="left" src="链接标签.html">
<frameset rows="80,80">
<frame name="secondtop" src="块标签.html"/>
<frame name="button" src="清单标签.html"/>
</frameset>
</frameset>
</frameset>
</html>
再看清单标签代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<ul type="square">
<li>helloworld</li>
<li>helloworld</li>
<li>helloworld</li>
<li>helloworld</li>
</ul>
<ol type="A" start="3">
<li> worldhello</li>
<li> worldhello</li>
<li> worldhello</li>
<li> worldhello</li>
<a target="top" href="menu1.html" > menu1</a>
<a target="left" href="menu2.html" > menu2</a>
<a target="secondtop" href="menu13.html" > menu1</a>
</ol>
</body>
</html>
其他三个标签的代码在上篇博客中,没改动,看下效果:
当点击右下角的按钮时,因为清单标签中的menu链接的target值,指向其他三个frame的name,所以会在相对应的frame子页面上跳转,如果target的值在整个页面所有frame上找不到,会在整个页面跳转
其他标签
<meta >
<meta charset="UTF-8">设置编码格式
<meta name="keywords" content="html,java,keword"> 设置关键字,给引擎的蜘蛛用
<meta name="description" content="describe the page"> 设置网页简介,也是给蜘蛛用
<link> 引入外部的css文件
<link rel="stylesheet" type="text/css" href=".引入css文件的地址">
<script> 引入外部的javascript文件
<script type="text/javascript" src="js的文件地址"></script>
特殊字符:
空格
> 大于号
< 小于号
©
版权符号
® 注册符号