电子商务网站建设之HTML语言高级_第1页
电子商务网站建设之HTML语言高级_第2页
电子商务网站建设之HTML语言高级_第3页
电子商务网站建设之HTML语言高级_第4页
电子商务网站建设之HTML语言高级_第5页
已阅读5页，还剩33页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

电子商务网站建设之HTML语言高级第4章HTML语言高级4.1创建超链接4.2创建表格4.3创建表单4.4帧标签4.5分区标签1/1/20242超链接标签超链接标记的格式如下： <ahref="URL信息">超链接文本或图像</a>超链接标记除了必备的href属性外，还有一个属性target，它指明目标页面显示的窗口target的默认值是本页面所在的浏览器窗口target=_blank 表示目标页面显示于一个新的浏览器窗 口中target=_top 表示目标页面显示于整个浏览器窗口 中，而不是显示在帧所在窗口中target=帧名 表示目标页面显示于指定帧所在的窗口 中1/1/202431/1/20244超链接标签根据目标页面的位置不同，href属性的URL信息构成分为以下3种情况：目标页面位于另外的主机或采用非协议，此时URL采用绝对路径，即使用如下格式：协议名://主机名[/目录信息]若目标页面位于本主机，此时URL采用相对路径： <ahref="des1.htm">超链接文本</a>或<ahref="/des2.htm">超链接文本</a>超链接的目标不仅可以指向HTML文件的头部，也可以指向某个文件的特定位置（称为“锚点”，anchor），其格式如下：<aname="定位标记">文本或图像等页面元素</a>1/1/202451/1/20246创建表格表格标签<table> [<caption>标题内容</caption>] <tr> <th>表格内标题</th> <td>表格内容</td> <td>表格内容</td> </tr></table>1/1/20247表格标签<table></table>创建表格<tr></tr>创建表格中的一行，一般包括一个或多个列元素<td></td>创建表格中的一列<caption></caption>标签，定义表格的标题<th></th>可以是表格中的第一个<td>标签，作为表格内的标题行1/1/20248<table>标签的属性1/1/20249<tr>标签的属性1/1/202410<td>标签的属性1/1/202411例3.10若要在网页上显示如下效果的表格，考虑该如何设计HTML文件代码查看源代码1/1/202412利用表格进行网页布局表格标签除了绘制文本表格外，还经常用来进行网页布局。表格是最常用的页面元素，可以用来固定文本或图像的显示位置。通常我们使用<table>、<tr>、<td>标记及其属性对网页内容进行分块显示。在Internet上浏览的许多页面都大量使用了表格，很多较复杂的页面布局就是利用表格来完成的。1/1/202413例3.12使用表格标签设计如下页面结构。查看源代码1/1/202414例3.13试用HTML表格结构设计如下网站截图的右下角目录部分。查看源代码1/1/202415利用表格进行网页布局1/1/202416什么是表单？1/1/202417什么是表单？表单是实现图形用户界面的基本元素，它包括按钮、文本框、单选框、复选框等，它们是HTML实现交互功能的主要接口。用户通过表单向服务器提交数据。表单的使用包括两个部分：一部分是用户界面，提供用户输入数据的元件；另一部分是处理程序，可以是客户端程序，在浏览器中执行；也可以是服务器处理程序，处理用户提交的数据，返回处理结果。1/1/202418表单的定义定义表单的语法如下： <formmethod="get|post"action="处理程序名"> [<inputtype=输入域种类name=输入域名>] [textarea定义] [select定义]</form><form></form>标签对用来创建一个表单，即定义表单的开始和结束位置，具有action、method、target、title、enctype等属性。1/1/202419表单的输入域不同类型的输入域为用户提供灵活多样的数据输入方式。表单的输入域有如下3大类：以标记<input>定义的多种输入域，包括text，radio，checkbox，password，hidden，button，submit和reset等。以标记<textarea>定义的文本域。以标记<select>和<option>定义的下拉列表框。1/1/202420常用的表单输入域1/1/202421<input>表单输入标记<input>标记在表单中使用频繁，大部分表单内容需要用到此标记。其语法如下：

<inputname=namevalue=valuealigh=left|center|righvalign=top|middle|bottomtype=text|password|checkbox|radio|submit|reset|hidden|buttonmaxlength=nsize=ncheckedonclick=functiononselect=function>

其中value：用于设定表单默认值； checked：表示选择框中，此项被默认选中；

maxlength：表示在输入单行文本的时候，最大允许字符数； size：用于设定表单框的尺寸； onclick：表示在按下按钮时调用指定的子程序； onselect：表示当前项被选择时调用指定的子程序。1/1/202422<input>标签举例姓名：<inputtype="text"name="name"size="20">密码：<inputtype="password"name="password"size="20"maxlength="15">性别：<inputtype="radio"name="gender"value="boy">男<inputtype="radio"name="gender"value="girl">女兴趣爱好： <inputtype="checkbox"name="interest">音乐 <inputtype="checkbox"name="interest">运动 <inputtype="checkbox"name="interest">看书<inputtype="button"name="submit"value="确认"><inputtype="submit"name="ok"value="提交"><inputtype="reset"name="reset"value="重置">1/1/202423例3.14一个简单的<input>标签实例<html><head><title><input>标签举例</title></head><body>姓名：<inputtype="text"name="name"size="20"><p>密码：<inputtype="password"name="password"size="20"maxlength="15"><p>性别：<inputtype="radio"name="gender"value="boy">男<inputtype="radio"name="gender"value="girl">女<p>兴趣爱好：<inputtype="checkbox"name="interest">音乐&&&&<inputtype="checkbox"name="interest">运动&&&&<inputtype="checkbox"name="interest">看书&&&&<inputtype="checkbox"name="interest">上网&&&&<inputtype="checkbox"name="interest">旅游&&&&<p><inputtype="submit"name="ok"value="提交"><inputtype="reset"name="reset"value="重置"> </body> </html>1/1/202424<select>标签用<select>标记可以在表单中插入一个下拉菜单，其语法如下：

<selectname=namesize=nmultiple> <optionvalue=设定值[selected]>表项内容 </option> <optionvalue=设定值[selected]>表项内容 </option> …… </select> 其中name：设定下拉菜单的名称；

size：设定菜单框的高度，也就是一次显示几个菜单项；

multiple：是可选项，若定义该属性，则下拉列表中的内容允许进 行多选。

1/1/202425<select>标签举例例3.15<select>下拉菜单举例<html><head><title><select>标签举例</title></head><body>请选择你所在的年级：<select><option>大一</option><option>大二</option><option>大三</option><option>大四</option></select></body></html>1/1/202426将下面两个例子分别与例3.15进行比较例3.16<html><head><title><select>标签举例</title></head><body>请选择日期：<selectsize=7><option>星期日</option><option>星期一</option><option>星期二</option><option>星期三</option><option>星期四</option><option>星期五</option><option>星期六</option></select> </body> </html>例3.17<html><head><title><select>标签举例</title></head><body>请选择你喜欢的球类运动：<selectsize=3multiple><option>足球</option><option>篮球</option><option>排球</option><option>乒乓球</option><option>羽毛球</option><option>台球</option><option>网球</option></select></body></html>1/1/202427<select>标签<select>标签中包含了多个<option>标签，<option>标签有两个常用的属性：value和selectedvalue用来指定控制操作的初始值，缺省时初值为option的内容selected设定时表明该项内容被预置1/1/202428<select>标签举例例3.18一段简单的包含下拉菜单的页面代码，注意<option>标签的属性<body>请选择你最喜欢的颜色：<select><optionvalue="">----放弃选择----</option><optionvalue=1selected>红色</option><optionvalue=2>黄色</option><optionvalue=3>蓝色</option><optionvalue=4>绿色</option><optionvalue=5>紫色</option><optionvalue=6>黑色</option><optionvalue=7>白色</option></select></body>1/1/202429<textarea>标签<textarea></textarea>在<form>表单中创建一个能够输入多行文本的文本框属性：cols(列数)，rows(行数)，单位是字符数标签语法如下： 此处显示在文本框外的提示信息 <textareaname=namecols=xrows=y> 此处显示在文本框里的预留信息 </textarea>1/1/202430例3.19一段简单的包含多行文本框的页面代码<body><tablewidth="50%"border="0"cellspacing="0"cellpadding="0"><tr><tdalign="center">您的意见对我很重要：</td></tr><tr><tdalign="center"><textareaname="yijian"cols="60"rows="10">请将您的建议输入到此区域</textarea></td></tr><tr><tdalign="center"><inputtype="submit"name="ok"value="提交"><inputtype="reset"name="reset"value="重置"></td></tr></body>1/1/202431帧标签框架(Frame)又常被称为帧，利用框架可以将浏览器显示窗口分割成多个相互独立的区域，每个区域可以显示独立的HTML页面。以下是使用框架的一个简例查看代码1/1/202432帧标签框架的定义较为特殊，首先确定如何划分窗口，然后建立描述窗口分割的主文件，再为每个框架建立相应的HTML文件。主文件的定义方法：<html><head>[头部标记]</head><frameset>{<frameset>...</frameset>}<frame><frame>…</frameset>[<noframes>字符串</noframes>]</html>1/1/202433<frameset>标签的属性1/1/202434<frame>标签的属性1/1/202435例3.21设计如图所示

人人文库> 全部分类> 行业资料 > 管理策划

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论