html概述(续2)
1.表单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
form为表单标签,表单中包含很多输入/选择的组件,用户可以输入信息,最终提交给服务器
id: 为标签定义id号,值唯一,值自定义,不能数字开头
name:值自定义,可以重复,向服务器提交数据的键
value:向服务器提交的值,标签默认值
size:列数
placeholder="提示信息" 提示信息,当输入内容后被覆盖
readonly="readonly" 只读,可以提交 disabled="disabled" 禁止组件,不能向服务器提交
-->
<form>
<label for="accountid1">账号</label>:
<input type="text" id="accountid1" size="20" placeholder="请输入账号" />
<br />
<label for="accountid2">密码</label>:
<input type="password" id="accountid2" size="20"
placeholder="请输入密码" /><br />
<!--
type="radio" 单选框组件
通过name属性进行的分组,name相同为一组,一组之内只能选一个
注意:凡是选择性组件必须给予默认值
-->
性别:<input type="radio" name="sex" value="男" id="man" checked="checked" />
<label for="man" >男</label>
<input type="radio" name="sex" value="女" id="women" />
<label for="women">女</label><br />
<!--
type="checkbox" 多选框组件
通过name属性进行的分组,name相同为一组,一组之内可选多个
注意:凡是选择性组件必须给予默认值
-->
课程:<input type="checkbox" name="course" value="JAVA" id="cour1" checked="checked" />
<label for="cour1">JAVA</label>
<input type="checkbox" name="course" value="HTML" id="cour2" />
<label for="cour2">HTML</label>
<input type="checkbox" name="course" value="C" id="cour3" />
<label for="cour3">C</label><br />
<!-- type="file" 文件选择框 accept=".文件后缀名,.文件后缀名" 限制文件类型 -->
上传附件:<input type="file" name="file" accept=".jpg" /> <br />
<!--
下拉框:select :name属性添加在select标签中
option 内容为下拉框选项内容
selected="selected" 默认选中项
-->
省份:<select name="province">
<option value="101">北京</option>
<option value="610" selected="selected">陕西</option>
<option value="710">山西</option>
</select><br />
<!-- textarea 多行文本域, rows 行数 ,cols 列数 -->
地址:<textarea name="address" rows="5" cols="30">陕西省汉中市</textarea><br />
<!--
type="reset" 重填表单内容
type="submit" 提交表单内容到服务器
type="button" 普通按钮,没有功能,只能被点击触发事件用
注意:value中的值是运行后你所看到的值,可以自定义。
例如,reset是重填,你可以自定义value为:删除数据,重新填写等
-->
<input type="reset" value="重填" />
<input type="submit" value="提交" />
<input type="button" value="按钮" />
</form>
</body>
</html>
上述代码实现结果如下:
2.内联框架
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
内联框架可以在一个窗口内嵌入一个子窗口,从而在子窗口内引入一个外部界面
<iframe src="子窗口地址" name="子窗口"></iframe>
在iframe标签中添加name属性 是为了通过超链接target="子窗口"来让父窗口中的链接在子窗口中打开
-->
父窗口
<a href="http://www.baidu.com" target="z1" >百度</a>
<iframe src="子窗口.html" name="z1" width="800" height="400" frameborder="1">子窗口 </iframe>
</body>
</html>
上述代码实现结果如下:
点击百度俩字后,父窗口中的超链接在子窗口中打开。