今天主要讲了结构标记,表单的使用和其他常见的标记。
结构标记
- 经常使用 <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: 宽度