网页设计行级标签

【演练3-7】制作不同类型的表单按钮。
3.3 表单元素
4.复选框 将 <input> 元素的 type 属性设置为“checkbox”，则定 义的表单元素为复选框。复选框的格式为：
<input type="checkbox" name=" 复 选 框 名 " value=" 提 交 值 " checked="checked">
3.1 超链接
3.1.2 超链接的应用
4．指向下载文件的链接 如果链接到的文件不是HTML文件，则该文件将作为下载 文件。指向下载文件的链接格式为：
<a href="下载文件名"> 热点文本 </a>
5．指向电子邮件的链接 单击指向电子邮件的链接，将打开默认的电子邮件程序， 如FoxMail、Outlook Express等，并自动填写邮件地址。指 向电子邮件链接的格式为：
<input type="表项类型" name="表项名" value="默认值" size="x" maxlength="y" />
3.3 表单元素
1.文字框 文本框的格式为：
<input type="text" name="文本框名">
2.密码框
密码框的格式为：
<input type="password" name="密码框名">
3.4 范围标签<span>
<div> 标签主要用来定义网页上的区域，通常用于较大 范围的设置，而<span>标签被用来组合文档中的行级元素。 3.4.1 基本语法
范围标签<span>用于标识行内的某个范围，以实现行内 某个部分的特殊设置以区分其他内容。其语法格式为：
<span>内容</span>
3.3 表单元素
3.3.2 选择栏<select>
如果一个列表选项过长，可以考虑使用选择栏。 <select>标签的格式为：
<select size="x" name="控制操作名" multiple= "multiple"> <option …> … </option> <option …> … </option> … </select>
3.4 范围标签<span>
3.4.2 span与div的区别
span与div的区别在于，span仅仅是个行级元素，不会 换行，而div是一个块级元素，它包围的元素会自动换行。块 级元素相当于内联元素在前后各加了一个<br />标签。用容 器这一词更容易理解它们的区别，块级元素<div>相当于一 个大容器，而内联元素<span>相当一个小容器，大容器当然 可以盛放小容器。 另外，span本身没有任何属性，没有结构上的意义，当 其他元素都不合适的时候可以换上它，同时div可以包含 span，反之则不行。 【演练3-13】演示span标签与div标签的区别。
3.1 超链接
3.1.2 超链接的应用
1．锚点标签<a>…</a>
<a href="URL" target="打开窗口方式"> 热点 </a>
2．指向其他页面的链接
① 链接到同一目录内的网页文件，格式为： <a href="目标文件名.htm"> 热点文本 </a> ② 链接到下一级目录中的网页文件，格式为： <a href="子目录名/目标文件名.htm"> 热点文本 </a> ③ 链接到上一级目录中的网页文件，格式为： <a href="../目标文件名.htm"> 热点文本 </a>
5.单选按钮
单选按钮用于一组相互排斥的选项，组中的每个选项应 具有相同的名称，以确保浏览者只能选择一个选项。单选按 钮的格式为：
<input type="radio" checked="checked"> name=" 单 选 钮 名 " value=" 提 交 值 "
3.3 表单元素
6.隐藏域 网站服务器发送到客户端的信息，除用户直观看到的页 面内容之外，可能还包含一些“隐藏”信息。将 <input> 元 素 的 type 属 性 设 置 为 hidden 类 型 即 可 创 建 一 个 隐 藏 域 。
3.3 表单元素
3.按钮 ① 重置按钮
<input type="reset" value="按钮名">
② 提交按钮
<input type="submit" value="按钮名">
③ 普通按钮
<input type="button" value="按钮名">
④ 图片按钮
<input type=“image” src=“图片来源”>
3．指向书签的链接
<a name="记号名"> 目标文本附近的字符串 </a>
（1）指向页面内书签的链接
<a href="#记号名"> 热点文本 </a>
【【演练3-2】制作指向页面内书签的链接。 （2）指向其他页面书签的链接
<a href="目标文件名.html #记号名"> 热点文本 </a>
即单击“热点文本”，将跳转到目标页面“记号名”开 始的网页元素。 【演练3-3】制作指向其他页面书签的链接。
<input type="hidden" name="隐藏域名" value="提交值">
7.文件域
文件域用于上传文件，将 <input> 元素的 type 属性设置 为file类型即可创建一个文件域。文件域会在页面中创建一 个不能输入内容的地址文本框和一个“浏览”按钮。格式为：
<input type="file" name="文件域名">
④ 链接到同级目录中的网页文件，格式为：
<a href="../子目录名/目标文件名.htm"> 热点文本 </a>
3.1 超链接
3.1.2 超链接的应用
【演练3-1】制作网络鞋城页面之间的链接，当前页3-1.html 中包含两个链接分别指向注册页和登录页，如图3 超链接的应用
3.3 表单元素
3.3.5 案例——制作网络鞋城会员注册表单
【演练3-11】制作网络鞋城会员注册表单，收集会员的个人 资料。本例文件3-11.html在浏览器中显示的效果如图3-23 所示。
3.3 表单元素
3.3.6 表单布局
【演练3-12】使用表格布局的方法制作网络鞋城会员登录表 单，表格布局示意图如图3-24所示，最外围的虚线表示表单 ，表单内部包含一个4行3列的表格，其中的第1行和第4行分 别使用了跨2列的设置。页面在浏览器中显示的效果如图325所示。
<option>标签的格式为：
<option value="可选择的内容" selected ="selected"> … </option>
【演练3-9】制作“调查者年龄”问卷调查的下拉菜单。
3.3 表单元素
3.3.3 多行文本域<textarea>…</textarea>
在意见反馈栏中往往需要浏览者发表意见和建议，且提 供的输入区域一般较大，可以输入较多的文字。使用 <textarea>标签可以设置允许成段文字的输入，格式为：
3.5 换行标签<br/>
在HTML文档中，无法用多个〈Enter〉、空格、〈Tab〉 键来调整文档段落的格式，要用HTML的标签来强制换行、分 段。 <br/>放在一行的末尾，可以使后面的文字、图像、表 格等显示于下一行，而又不会在行与行之间留下空行，即强 制文本换行。与<hr/>标签一样，<br/>标签也强制执行一个 换行，但与<hr/>不同的是，<br/>标签实现换行后不会影响 段落的对齐方式。换行标签的格式为：
文字 <br />
【演练3-14】制作网络鞋城联系方式的页面。
3.6 实训——制作什锦果园联系信息表单
【实训】本实训练习通过表格布局制作什锦果园联系信息表 单，表格布局示意图如图 3-29 所示，本例文件 3-15.html 在 浏览器中显示的效果如图3-30所示。
习题3
1．使用表格和超链接技术制作如图3-31所示的网页。 2．制作如图3-32所示的用户注册表单。 3．使用图文混排技术制作如图3-33所示的网络鞋城货到付 款简介页面。 4．使用表格布局表单技术制作网络鞋城联系我们表单，如图 3-34所示。
【演练3-5】图像的基本用法，本例文件3-5.html在浏览器 中正常显示的效果如图3-6所示；当显示的图像路径错误时， 效果如图3-7所示。
3.2 图像
3.2.3 用图像作为超链接热点