HTML第三篇
今天主要讲了结构标记，表单的使用和其他常见的标记。
结构标记
- 经常使用 <div> 元素设计页⾯的⼤大致布局，如页头、导航
栏、主要内容部分和页脚等。
<body>
<div id="header">
页头部分内容
</div>
<div id="main">
页面主体部分内容
</div>
<div id="footer">
页脚部分
</div>
</body>
表单
使⽤用 <form> 元素创建表单
在 <form> 元素中添加其他表单可以包含的控件元素
表单控件元素有
– input元素：⽂文本输⼊入控件、按钮、单选和复选按钮、选项
框、⽂文件选择框和隐藏控件等
– textarea元素
– select和option元素
– 其他元素
input
⽤用于收集⽤用户信息
• 主要属性
– type：根据不同的 type 属性值，可以创建各种类型的输⼊入
字段，⽐比如文本框、复选框等
– value：控件的数据
– name：控件的名称
– disabled：禁用控件
文本框与密码框
• 主要属性
– type：根据不同的 type 属性值，可以创建各种类型的输⼊入
字段，⽐比如⽂文本框、复选框等
– value：控件的数据
– name：控件的名称
– disabled：禁⽤用控件
如
姓名：<input type="text" name="username"
value="mary" maxlength="6" />
<br /><br />
密码：<input type="password" name="pwd" />
单选框和复选框
单选框： <input type=“radio”/>
• 复选框： <input type=“checkbox” />
• 主要属性
– name：设置名称，并⽤用于分组，⼀一组单选框或者复选框的
名称必须相同
– value：⽂文本，当提交 form 时，如果选中了此单选按钮，
那么 value 就被发送到服务器
– checked： 设置默认被选中
如
性别:
<input type="radio" name="sex" value="0"/>男
<input type="radio" name="sex" value="1"/>⼥女
<input type="radio" name="sex" value="2" checked="checked"/>保密
<br /><br />
喜欢的城市:
<input type="checkbox" name="cities" value="1"/>北京
<input type="checkbox" name="cities" value="2"/>贵阳
<input type="checkbox" name="cities" value="3"/>深圳
按钮
• 提交按钮： <input type=“submit”/>
• 重置按钮： <input type=“reset” />
• 普通按钮： <input type=“button” />
主要属性
– name：名称
– value：按钮的标题⽂文本
文件选择框
<input type=“file” />
<label> 元素
<label for="chkHid">不要公开我的信息</label>
选项框
• <select>：创建选项框
– name：选项框命名
– size：⼤大于 1 ，则为滚动列表
– multiple：设置多选
<select>
<option value="1">我</option>
<option value="2">你</option>
<option value="3">他</option>
</select>
为制定的一类控件分组 <fieldset> 元素，为分组指定一个标题 <legend> 元素。
<fieldset>
<legend>地址信息</legend>
地址：<input type="text" /><br />
邮编：<input type="text" />
</fieldset>
其他常用标记
浮动框架<iframe>元素
可以在一个浏览器窗口中同时显⽰示多个页⾯文档（即可以子啊一个页面内嵌套另一个页面）
主要属性
– src：浮动框架中的⺴网页的url
– height： ⾼高度
– width： 宽度
