使用HTML创建静态页面_第1页
使用HTML创建静态页面_第2页
使用HTML创建静态页面_第3页
使用HTML创建静态页面_第4页
使用HTML创建静态页面_第5页
已阅读5页，还剩64页未读， 继续免费阅读

下载本文档

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

文档简介

使用HTML创建静态网站

软开1237班第一小组

组长：杨子慰

组员：姜陈、邹涛、邹思亮、彭皓天第一课HTML的基本标签会使用HTML的基本结构创建网页会使用文本相关标签实现文字修饰和布局会使用图像相关标签实现图文并茂的页面会使用超链接相关标签实现页面间的跳转HTML文件的基本结构HTML文档的结构<HTML><HEAD><TITLE>我的第一个网页

</TITLE></HEAD><BODY>HelloWorld!</BODY></HTML>HTML网页<HEAD>头部部分<BODY>主体部分<HTML>…</HTML>标签标记HTML文档的开始和结束网页标题网页内容，可以是文本、图像等这部分包含文本、图像和链接。它包括在<BODY>…</BODY>

标签内这部分包括标题和其他说明信息。包括在<HEAD>…</HEAD>

标签内使用记事本创建网页使用记事本创建网页的步骤：1、打开记事本2、输入HTML代码3、保存为*.html或*.htm文件，注意格式问题4、打开网页预览效果使用记事本创建网页<META>标签<HEAD><METAhttp-equiv="Content-Type"content="text/html;charset=gb2312"><TITLE>网页标题</TITLE></HEAD>

网页页面中出现乱码，那如何消除乱码使其正常显示？使用<META>标签简体中文：gb2312繁体中文：big5纯英文网页：iso-8859-1可以避免页面中的乱码页面背景色或背景图像<BODYbgcolor="#FFCCFF“background="back_image.GIF">HelloWorld！</BODY>为了使页面美丽大方，网页背景要尽量地浅……<BODYbgcolor="#FFCCFF“> HelloWorld!</BODY>……网页背景色彩

网页背景图像

文本相关标签字体、字号标题标签<H1>－<H6><FONT>标签特殊符号行的控制段落标签<P>换行标签<BR>使用了<H2>…<H2>换段了设置了字体的大小和颜色换行了特殊符号字体、字号相关标签标题标签<H#>...</H#>#=1,2,3,4,5,6说明：<H1>到<H6>字体大小依次递减……<BODY><H1>一级标题</H1><H2>二级标题</H2><H3>三级标题</H3><H4>四级标题</H4><H5>五级标题</H5><H6>六级标题</H6></BODY>……H1到H6标签用于指定不同级别的标题<FONTsize=“+2”

color=“red”face=“律书”> ...</FONT>字体、字号相关标签<FONT>标签特殊符号字体的大小值字体的颜色字体的类型字体、字号相关标签......<BODY><P><FONTsize="+2"color="red">

手机充值、IP卡/电话卡

</FONT><BR/>

移动 | 100| 联通

| 50</P>Copyright©2007"淘宝网"Allrights.</BODY>……空格效果…….

<Palign="center">淘宝集市欢迎您！</P><Palign="left">淘宝网首届翠友会！<BR>……</P>……行的控制相关标签段落标签<P>段(Paragraph)(可以看作是空行)<p>换行标签<BR>

换段了换行了图像标签常见的图片格式介绍图像标签图像的基本语法<IMGsrc="images/adv_2.jpg"width="300“height="150“alt="明星演唱会开幕">……<BODY><IMGsrc="images/adv_2.jpg"alt="明星演唱会开幕"width="300"height="150"></BODY>……鼠标移到图像上，出现的提示性文字图像的位置图像的宽度图像的高度为图像添加的提示性文字图像标签图像与文本的对齐方式<IMGalign="middle">图像与文本居中对齐,还可以取top,bottom值….<BODY><Ahref="star.html"><IMGalign="middle"src="images/adv_2.jpg"width="180"height="95"border="0"/></A>请点击广告进入明星专区</BODY>……图像和文本居中对齐文字布局内容分隔<HR>标签项目列表和编号有序列表<OL>无序列表<UL>预格式文本<PRE>标签水平分隔线<HR>有序列表无序列表用了预先定义好的格式如何使用内容分隔<HR>标签<HRsize="5"color="red"width="300">……<BODY><HRsize="5"color="red"width="300"><HRsize="10"color="black"width="200"><HRsize="5"color="#0000FF"width="50%"></BODY>……线的厚度值线的宽度<HR>标签用于在页面上绘制水平线线的颜色如何使用列表无序列表语法

<UL> <LI>列表项内容</LI> ……</UL>有序列表语法

<OL><LI>列表项内容</LI> ……</OL><H4>注册步骤：</H4><OLtype="1"><LI>填写信息</LI><LI>收电子邮件</LI><LI>注册成功</LI></OL>

新人上路指南

<ULtype="circle"><LI>如何激活会员名？</LI><LI>如何注册淘宝会员？</LI><LI>注册时密码设置有什么要求？</LI><LI>支付宝认证</LI></UL>预格式文本<PRE>标签

如何实现如下图所示的页面中的文字效果？使用<PRE>标签可以实现如何使用预格式文本<PRE>标签<PRE><IMGsrc="images/QQ.JPG"width="159"height="133"align="LEFT">

腾讯-QQ币/QQ幻想-30元卡

一口价：26.45元运费：卖家承担运费剩余时间：5天宝贝类型：全新

卖主声明：货到付款，可试用10天！

</PRE>HTML中代码格式与浏览器中显示效果一样页面链接<A>标签链接到其他页面<A

href="register/register.html">[免费注册]</A>链接内容链接的地址<HTML><HEAD><TITLE>链接到其他页面</TITLE></HEAD><BODY><Ahref="register/register.html">[免费注册]</A><Ahref="login/login.htm">[登录]</A></BODY></HTML>单击”[免费注册]”之后链接到的页面页面链接<A>标签链接到其他页面相对路径 指定从根目录到文件的完整路径。绝对路径 指定相对于当前文件的文件位置。

在同一个文件夹下有两个html文件，从一个文件超链接到另一个文件的路径有几种方式？两种方式：相对路径和绝对路径页面链接<A>标签要链接到同一目录(C:\HTML)下的页面，可编写<AHREF=“Doc1.htm”>或

<AHREF=“C:\html\Doc2.htm”>相对路径名绝对路径名页面链接<A>标签

要实现如下图所示的超链接效果，怎么办？使用锚记标签页面链接<A>标签链接到本页面锚记标签用于使用户“跳”到文档的某个部分HTML的NAME

属性用于创建锚标记

<ANAME=“marker”>主题名称</A>为达到这种跳转效果，请在HREF参数中使用该标记

<AHREF=“#marker”>主题名称</A><HTML><HEAD><TITLE>链接到其他页面</TITLE></HEAD><BODY><Ahref="#helpme">[新人上路]</A> ……<A

name="helpme">新人上路指南</A> ……</BODY></HTML>1、定义锚标记2、链接到锚标记所在位置页面链接<A>标签电子邮件链接要链接电子邮件，可在链接标签中插入”mailto:邮箱地址”<Ahref="mailto:webmaster@">站长信箱</A>演示示例5：演示电子邮件链接

<HTML><HEAD><TITLE>电子邮件链接</TITLE></HEAD><BODY> ……<Ahref="mailto:taobaoWebMater@">站长信箱</A> ……</BODY></HTML>单击”站长信箱”链接后的输出结果任何正确的电子邮箱地址均可滚动<MARQUEE>标签<MARQUEEscrolldelay=“100”direction=“up">滚动文字或图像</MARQUEE>滚动延迟时间滚动对象的方向说明：scrolldelay：表示滚动延迟时间，默认值为90。direction：表示滚动的方向，默认为从右向左。滚动<MARQUEE>标签<MARQUEEscrolldelay="100">水平滚动</MARQUEE><MARQUEEscrolldelay="200"direction="up">垂直滚动</MARQUEE><MARQUEEscrolldelay="300"direction="up"onmouseover="this.stop()"onMouseOut="this.start()"><Ahref="#"><IMGsrc="images/scroll/1.gif"border="0"align="middle">Avon化妆品</A><BR><Ahref="#"><IMGsrc="images/scroll/2.gif"border="0"align="middle">

雅诗兰黛</A><BR>……</MARQUEE>水平向左移动垂直向上移动图片和文字同时垂直向上移动声明滚动文字结束声明滚动文字“水平滚动”开始，并且将会以默认方式从右向左滚动总结哪个标签中的哪个属性可以改变字体颜色和字号？图像与文本的对齐方式有哪几种？项目列表和编号有何区别？分别适用什么场合？链接到其他页面时，路径的表示方法有两种：相对路径和绝对路径，这两种路径有何区别和联系？第二课表格基础会使用表格的基本结构实现简单表格会使用表格相关标签实现跨行、跨列的复杂表格会使用表格相关设置进行美化修饰表格的基本结构行列单元格在HTML文档中，广泛使用表格来存放网页上的文本和图像表格的基本语法<TABLEborder="1"><TR><TD>

单元格内容

</TD> ……</TR>……</TABLE><TABLE>...</TABLE

>定义表格<TD>…</TD>

定义列

<TR>…</TR>

定义行

border用来设置表格边框尺寸大小如何创建表格<TABLEborder="2"><TR><TD>移动</TD><TD>联通</TD><TD>铁通</TD></TR><TR><TD>IBM</TD><TD>惠普</TD><TD>华硕</TD></TR></TABLE>跨3列跨3行下图中的表格哪里用了跨行？哪里用了跨列？跨了几行几列?<TABLEborder="1"><TR><TD>手机充值、IP卡</TD>

<TDcolspan="2">办公设备、文具</TD></TR><TR>

<TDrowspan="2">各种卡的总汇</TD><TD>铅笔</TD><TD>彩笔</TD></TR><TR><TD>打印</TD><TD>刻录</TD></TR></TABLE>如何创建跨行跨列的表格背景图片背景色表格的高度表格的宽度文字对齐方式根据理解,下面表格应该从哪些方面进行美化修饰？如何设置表格的尺寸和边框<TABLEwidth=“400”height=“200”border=“15”bordercolor="red"><TR><TDcolspan="4">品牌商城</TD></TR><TR><TDcolspan="2">笔记本电脑</TD><TDcolspan="2">办公设备、文具、耗材</TD></TR><TR><TD>惠普</TD><TD>华硕</TD><TD>打印机</TD><TD>刻录盘</TD></TR></TABLE>width用来设置表格的宽度height用来设置表格的高度border用来设置表格边框尺寸大小bordercolor用来设置表格边框颜色如何设置背景<TABLEbackground=“images/type_back.jpg”

width=“360"height="120"border="2"><TR><TDcolspan="6"> </TD></TR><TRbgcolor="#EBEFFF"><TDcolspan="3">笔记本电脑</TD><TDcolspan=“3”

bgcolor="yellow">办公设备、文具、耗材</TD></TR>……</TABLE>background属性用来设置表格的背景图片bgcolor属性用来设置表格、行、列的背景色。“#EBEFFF”是用RGB表示的一种颜色值，RGB指的是红绿蓝，下图就是RGB颜色对照表。如何设置对其方式<TABLEwidth="350"height="100"border="2"background="images/type_back.jpg"><TR><TDcolspan="4"> </TD></TR><TRbgcolor="#EBEFFF"><TDcolspan="2"align="center">笔记本电脑</TD><TDcolspan="2"align="center">办公设备、文具、耗材</TD></TR><TRbgcolor="#EBEFFF"><TD>惠普</TD><TD>华硕</TD><TD>打印机</TD><TD>刻录盘</TD></TR></TABLE>align属性用来设置表格、行、列的对齐方式为什么要使用填充属性单元格里的内容太靠近边线，怎么办？未填充的效果，字与单元格边框之间的距离靠得太近什么是填充属性和间距属性border(边框的厚度)内容内容内容内容cellpadding(单元格填充)cellspacing(单元格间距)如何设置表格的填充属性<TABLEcellspacing=“5”cellpadding=“10”

border=“1"background="images/type_back.jpg"><TR><TDcolspan="6"> </TD></TR>

<TRbgcolor="#EBEFFF"><TDcolspan="3"align="center">笔记本电脑</TD><TDcolspan="3"align="center">办公设备、文具、耗材</TD></TR>….</TABLE>cellspacing属性用来设置表格内框宽度cellpadding属性用来设置表格内填充距离填充之后的效果如何实现图文内容的布局，达到如左图所示页面的效果？分析上图所示页面，应该用什么进行布局？

什么是表格布局使用表格进行布局用表格对网页的内容进行整体控制如何使用表格进行布局使用表格布局下图，需要几行几列？需要7行2列如何使用表格进行布局<TABLEwidth="298"><TR>

<TDcolspan="2"><IMGsrc="images/adv.jpg"/></TD></TR><TR>

<TDwidth=“122”rowspan=“6”align=“left”><IMG

src="images/wangyou.jpg"width="116"height="142"/></TD><TDwidth=“285”>

<Ahref=“#”>超值变形金钢2.5折!</A>

</TD></TR><TR><TD><Ahref="#">人们为啥对电视吼叫</A></TD></TR>……</TABLE>总结创建表格最少需要那三个标签？简述表格的基本结构。跨行跨列的表格，主要在什么情况下使用？给你一个表格，你会从哪些方面进行美化？第三课表单和框架会使用表单的基本结构制作表单页面会使用各种表单元素实现注册页面能理解post和get两种提交方式的区别会使用框架结构实现多窗口展示页面表单表单的典型应用注册用户收集信息反馈信息为网站提供搜索工具注册用户收集信息反馈信息提供搜索工具表单包含的控件单行文本输入框(TEXT)单选按钮(RADIO)复选框(CHECKBOX)下拉列表(SELECT)重置按钮(RESET)提交按钮(SUBMIT)多行文本框(TEXTAREA)密码框(PASSWORD)表单页面的基本结构METHOD=“post或get”ACTIONMETHOD指定提交后，由服务器上那个处理程序处理指定向服务器提交的方法:一般为post或get方法,post方法比较安全ACTION=“URL”<FORMaction=“”method=“post”> ……</FORM>表单元素的统一格式<FORMname="form3"method="post"action="">

<INPUT

type="checkbox"name="gen"value="男"

size="21“maxlength=4checked="checked">

……</FORM>指定元素的类型，可为TEXT、RADIO、SUBMIT等控件的名称控件的初始值控件的初始宽度控件中输入的最多字符个数控件是否被选中表单元素的逐一介绍文本框基本语法<INPUT

type=“text”value="张三"size="20"><FORMname="form1"method="post"action=""> <P>名  字：

<INPUTtype="text"value="张三"size="20"> </P> ……</FORM>单行文本输入框，字符宽度为20文本区的宽度输入元素的默认值文本输入框表单元素的逐一介绍密码框基本语法<INPUT

type=“password”value=“123456”size=“22”>密码区宽度初始密码密码框<FORMname="form2"method="post"action=""> …… <P>密  码：

<INPUTvalue=“123456”type="password"size="22"> </P></FORM>密码框，22个字符宽度表单元素的逐一介绍单选按钮基本语法<INPUTtype="radio"value="男"checked="checked">初始值单选按钮默认选中<FORMname="form3"method="post"action=""><BR>性别：

<INPUTname="gen"type="radio"class="input"value="男"checked><IMGsrc="images/Male.gif"width="23"height="21">男 ……</FORM>查看源代码设置此单选按钮被选中表单元素的逐一介绍复选框基本语法<INPUT

type=“checkbox”name="cb2"value="talk">复选框复选框名复选框值<FORMname="form4"method="post"action="">……<LABEL><INPUTtype="checkbox"name="cb2"value="talk"checked="checked"></LABEL>聊天

……</FORM>查看源代码设置此复选框被选中列表框基本语法<select

name=“指定列表名称”

size=“行数”>

<option

value=“可选项的值”

selected>…</option><option

value=“可选项的值”>…</option>……</select>

说明：

size确定列表中可同时看到的行数。

selected默认被选中的可选项。表单元素的逐一介绍出生日期：

<INPUTname="byear"value="yyyy"size=4maxlength=4> 年<SELECTname="bmon">

<OPTIONvalue=""selected>[选择月份]</OPTION><OPTIONvalue=0>一月</OPTION><OPTIONvalue=1>二月</OPTION>……</SELECT>月 <INPUTname="bday"value="dd"size=2maxlength=2>日

设置此输入框最多只能输入四个符号设置“[选择月份]”选项默认被选中表单元素的逐一介绍按钮基本语法<INPUTtype="reset"name="Reset"value="重填">按钮名称按钮类型可为button、submit按钮上的标签<FORMname="form6"method="post"action=""><P><INPUTtype="reset"name="Reset"value="重填"> ……

<INPUTtype="button"name="cancel"value="取消"></P></FORM>单击按钮，控件的值被重置为value属性中指定的初始值表单元素的逐一介绍多行文本框基本语法<TEXTAREAname="textarea"cols="40"rows="6">

文本框中的内容</TEXTAREA>文本框的名字文本框的列数文本框的行数<FORMname="form7"method="post"action="">……<TEXTAREAname="textarea"cols="40"rows="6">欢迎阅读服务条款协议，本协议阐述之条款和条件适用于您使用Taobao网站的各种工具和服务。本服务协议双方为淘宝与淘宝网用户，本服务协议具有合同效力。淘宝的权利和义务

</TEXTAREA>……</FORM>6行40个字符宽度的多行文字域小结1编写如左图所示效果对应的html代码在网页设计中，表单的主要用途有哪些？TEXTPASSWORDRADIOTEXTAREASUBMITRESETSELECTCHECKBOX练习答案练习代码框架广告栏顶部框架(top.htm)导航栏左侧框架(left.htm)详细内容页面右侧框架(main.htm)框架的边框框架集页面(FrameSet.htm)框架使用场合页面的一个固定部分显示徽标或静态信息在另一个固定部分显示导航部分详细内容在此处显示详细内容，页面中此部分是变化的。<framesetcols=“25%,50%,*”rows=“50%,*”border=“5”>

<framesrc=“the_first.html"> ……</frameset>框架的基本结构框架页面的基本语法边框尺寸大小将窗口分割成左中右3个部分,可选将窗口分割成上下2个部分,可选第一个窗口要显示的网页框架的基本结构<HTML><HEAD><TITLE>rows_cols框架</TITLE></HEAD><FRAMESETrows="25%,50%,*"border="5"><FRAMEname=“top"src="the_first.html"><FRAMEname="middle"src="the_second.html">

<FRAMEname=“bottom"src="the_third.html"></FRAMESET></HTML>将窗口分割成上中下3部分窗口边框的宽度如果要在浏览器中创建左中右三个窗口,该如何实现？每个窗口对应一个页面，以及一个框架集页面，总共需要几个HTML页面文件？如何创建多个复杂的窗口

要实现如下图所示的窗口，该如何制作？1、分成上下两个窗口2、把下面的窗口分成左右两个窗口top窗口left窗口right窗口如何创建多个复杂的窗口

创建多个复杂的窗口实现步骤如下：1、创建一个HTML页面“top.html”2、创建一个HTML页面“left.html”3、创建一个HTML页面“right.html”top.html效果图left.html效果图right.html效果如何创建多个复杂的窗口4、新建多框架HTML页面“Frame_Sets.html”......<FRAMESETrows="20%,*"frameborder="0"><FRAMEsrc="top.html"name="topframe“scrolling="no"noresize="noresize"><FRAMESETcols="20%,*"><FRAMEsrc="left.html"noresize="noresize“scrolling="no"name="leftframe“><FRAMEsrc="right.htm

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

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

最新文档

评论

0/150

提交评论