学习-3网页设计1html超标记语言

上传人：我*** IP属地：北京上传时间：2023-01-04 格式：PPTX 页数：166 大小：3.69MB 积分：18 举报 版权申诉

已阅读5页，还剩161页未读，继续免费阅读

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

文档简介

HTML桂素伟微软全球MVPMSDN特邀讲师HTML页面基础页面版式控制和使用多媒体表格布局框架集与嵌入式框架表单与表单元素层叠式样式表CSS与div布局课程大纲页面基础C/S模式的介绍C/S（

Client/Server

）模式的软件开发就是指基于客户端与服务器端的开发模式：桌面应用程序服务器端应用QQQQ服务器B/S模式的介绍B/S（

Browser/Server

）模式的软件开发是指基与浏览器与服务器的开发模式：浏览器web服务端提供程序IE浏览器装有IIS的web服务器本章内容HTML的地位和作用开发HTML使用的工具http协议HTML文件的结构如何设置HTML文件的背景色及文本色如何在页面上添加一个超链接HTML页面的文字布局HTML页面的各种字体效果及滚动字符页面版式控制标记HTML简介HTML（HyperTextMarkupLanguage超文本标记语言）由服务器端动态生成记事本等手工编写存成html,htm等可视化HTML编辑工具FrontpagewebdesignDreamweaver等（推荐使用）Dreamweaver业界使用最多的制作网页的工具所见即所得的设计方式设计与代码两种制作手段拥有CS8MX等多种版本常有其他工具配合它来完成页面制作辅助工具1Fireworksphotoshop简单快捷，一般的网页素材处理都可胜任。最专业的图像处理软件，功能强大，需要一定的基础辅助工具2Flash制作工具制作绚丽夺目的网页素材和视频需要一定基础熟练应用浏览器HTML文件只有通过浏览器，才能被用户所欣赏浏览器的种类（IE火狐等等）浏览器访问HTML的方式（两种）不同浏览器对HTML的显示效果有所不同http协议超文本传输协议为什么需要协议客户端和服务器端请求和应答的协议默认服务器端口为80https协议（安全超文本传输协议）url（统一资源定位地址）HTML的基本结构<Html><Head>

头部信息:网页的标题和属性</Head><Body>

文件主体,正文部分</Body></Html><Html>标记用于HTML文档的最前面，用来标记HTML文档的开始</Html>则是放在HTML文档的最后面，用来表示HTML文档的结束<HEAD>之间包括文档的头部信息，如文档总标题等，可省略<head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><scriptsrc="a.js"></script><linkhref="newsyle.css"rel="stylesheet"type="text/css"/><title>标题</title></head>Head<meta>元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。<meta>标签位于文档的头部，不包含任何内容。<meta>标签的属性定义了与文档相关联的名称/值对。⒈name属性name属性主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。meta标签的name属性语法格式是：<metaname="参数"content="具体的参数值">；。其中name属性主要有以下几种参数：A、Keywords（关键字）说明：keywords用来告诉搜索引擎你网页的关键字是什么。举例：<metaname="keywords"content="science,education,culture,politics,ecnomics,relationships,entertainment,human">B、description（网站内容描述）说明：description用来告诉搜索引擎你的网站主要内容。网站内容描述（description）的设计要点：①网页描述为自然语言而不是罗列关键词（与keywords设计正好相反）；②尽可能准确地描述网页的核心内容，通常为网页内容的摘要信息，也就是希望搜索引擎在检索结果中展示的摘要信息；③网页描述中含有有效关键词；④网页描述内容与网页标题内容有高度相关性；⑤网页描述内容与网页主体内容有高度相关性；⑥网页描述的文字不必太多，一般不超过搜索引擎检索结果摘要信息的最多字数（通常在100中文字之内，不同搜索引擎略有差异）。举例：<metaname="description"content="Thispageisaboutthemeaningofscience,education,culture.">C、robots（机器人向导）说明：robots用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。content的参数有all,none,index,noindex,follow,nofollow。默认是all。举例：<metaname="robots"content="none">D、author（作者）说明：标注网页的作者举例：<metaname="author"content="">Head⒉http-equiv属性http-equiv顾名思义，相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。meta标签的http-equiv属性语法格式是：<metahttp-equiv="参数"content="参数变量值">；其中http-equiv属性主要有以下几种参数：A、Expires（期限）说明：可以用于设定网页的到期时间。一旦网页过期，必须到服务器上重新传输。用法：<metahttp-equiv="expires"content="Fri,12Jan200118:18:18GMT">注意：必须使用GMT的时间格式。B、Pragma(cache模式）说明：禁止浏览器从本地计算机的缓存中访问页面内容。用法：<metahttp-equiv="Pragma"content="no-cache">注意：这样设定，访问者将无法脱机浏览。C、Refresh（刷新）说明：自动刷新并指向新页面。用法：<metahttp-equiv="Refresh"content="">；（注意后面的引号，分别在秒数的前面和网址的后面）注意：其中的2是指停留2秒钟后自动刷新到URL网址。D、Set-Cookie(cookie设定）说明：如果网页过期，那么存盘的cookie将被删除。用法：<metahttp-equiv="Set-Cookie"content="cookievalue=xxx;expires=Friday,12-Jan-200118:18:18GMT;path=/">注意：必须使用GMT的时间格式。E、Window-target（显示窗口的设定）说明：强制页面在当前窗口以独立页面显示。用法：<metahttp-equiv="Window-target"content="_top">注意：用来防止别人在框架里调用自己的页面。F、content-Type（显示字符集的设定）说明：设定页面使用的字符集。用法：<metahttp-equiv="content-Type"content="text/html;charset=gb2312">G、content-Language（显示语言的设定）用法：<metahttp-equiv="Content-Language"content="zh-cn"/>Head标记标记：用“<”和“>”括起来的句子单标签例如：<br/><hr/>双标签例如：<html></html><font></font><a></a>标签中可以有属性，根据需要可以有多个属性是由名称=“值”构成常用的字符实体字符字符引用(十进制代码)字符引用(十六进制代码)实体引用描述“"""双引号&&&&和号<<<<小于号>>>>大于号

不间断空格©©©©版权符号®®®®注册商标<body><body>标记一般不省略，表示正文内容的开始。Body的一些属性链接<ahref="资源地址">链接文字</a>本地资源链接<ahref=“c:\mydoc.html”>文件</a>外部网络链接<aHref=””>百度</a>文件内部链接<aname=”标签a”>flag</a> <aHref=”#标签a”>转到flag处</a>邮件链接<aHref=””>SAIKO在线</a>图片链接<ahref=""><imgsrc="URL"alt="AlternateText"></a>内容标题h1黑体，特大字体，居中，上下各有两行空行。h2黑体，大字体，上下各有一到两行空行。h3黑体，大字体，左端微缩进，上下空行。h4黑体，普通字体，比h3更多缩进，上边空一行。h5黑体，与h4相同缩进，上边空一行。h6黑体，与正文有相同缩进，上边空一行。各式标题<hn>可以有对齐属性，align＝left/center/right段落<p><p>标记，align是left、center、right、justify几种字体风格<b>黑体，<i>斜体，<u>下划线，<tt>打字机体<em>强调<strong>特别强调<code>源代码<samp>例子<small>较小<big>较大<sup>上标<sub>下标物理风格逻辑风格字体颜色#可以是6位16进数，分别指定红、绿、蓝的值#可以是black，olive，teal，red，blue，maroon，navy，gray，lime，fudrsia，white，green，purple，sliver，yellow，aqua之一字体颜色：<fontcolor=#>滚动文字使用<marquee>标记默认从右向左具有多重属性常用于显示滚动通知滚动文字direction表示滚动的方向，值可以是left，right，up，down，默认为left

behavior表示滚动的方式，值可以是scroll（连续滚动）slide（滑动一次）alternate（来回滚动）

loop表示循环的次数，值是正整数，默认为无限循环

scrollamount表示运动速度，值是正整数，默认为6

scrolldelay表示停顿时间，值是正整数，默认为0，单位是毫秒

valign表示元素的垂直对齐方式，值可以是top，middle，bottom，默认为middle

align表示元素的水平对齐方式，值可以是left，center，right，默认为left

bgcolor表示运动区域的背景色，值是16进制的RGB颜色，默认为白色

height、width表示运动区域的高度和宽度，值是正整数（单位是像素）或百分数，默认width=100%height为标签内元素的高度

hspace、vspace表示元素到区域边界的水平距离和垂直距离，值是正整数，单位是像素。

onmouseover=this.stop()onmouseout=this.start()表示当鼠标移上区域的时候滚动停止，当鼠标移开的时候又继续滚动。无序清单<ul>无序清单用<ul>开始，每一个清单条目用<li>引导，最后是</ul>

输出时每一清单条目缩进，并且以黑点标示

有序清单<ol>与无序清单不同的就是将无序的<ul>换成有序的<ol>有序清单type属性有序清单缺省值是阿拉伯数字<Litype=#>“#”的取值有如下几种类型：“#”取值为“A”，显示大写字母。“#”取值为“a”，显示小写字母。“#”取值为“I”，显示大写罗马数字。“#”取值为“i”，显示小写罗马数字。定义清单<dl>定义清单用于对清单条目进行简短说明。用<dl>开始，清单条目用<dt>引导，它的说明用<dd>引导页面版式控制标记描述注释标记<p>分段标记<br/>换行标记<center>居中标记<hr/>水平线标记<pre>预排版标记<div>层定位标记注释标记功能：为文中不同的部分加上说明，方便日后修改

开始标记结束标记注意:注释标记中没有任何属性。开始标记和结束标记必须同时存在。注解内容允许为空。其内容长度不用被限制在一行内，可以为任意长度。结束标识和开始标识可以不在一行上。分段标记功能：实现类似于文档中的段落效果<p>也可以有多种属性，比较常用的属性是：align＝#还有style属性，在后面学习样式的时候会详细介绍注意：HTML不识别键盘的回车换行HTML将多个空格以及回车等效为一个空格，HTML的分段完全依赖于分段标记换行标记<br><br/>标记用来创建一个回车换行如果<br/>标记处在<p></p>标记对外面，将创建一个大的回车换行若处在<p></p>标记对之间，<br/>标记前面和后面文本的行与行之间的距离将比较小注意：<br>标记只有开始标记，没有结束标记水平线标记注意：水平线标记<hr/>是单标记align=#设定线条摆放位置

size=#属性

width=#属性设定线条长度color=#属性

left；right；center

以像素作单位内定为2

以像素作单位，可以是绝对或相对值，内定为100%

设定线条颜色，内定为黑色属性<hrwidth="400"size="10"align="center"noshade/>居中标记比较上面页面上下两段诗词位置有什么不同<center>标记是内容处于居中位置比较上面页面上下两段内容格式有什么不同HTML是不识别空格和回车的如何实现左侧效果？<pre></pre>定位标记<div>定位标记多用于在制定分块显示内容比较重要的属性是style后续章节连同样式表加深理解总结什么是HTML，HTML文件的结构设置HTML文件的背景色及文本色<body><p>标签实现分段，排版超链接分为内部，外部，本地，邮件链接字体的大小<fontsize>字体的风格：物理、逻辑字体的颜色：#000000或red等<marquee>标签实现文字滚动三种清单列表：无序、有序、定义用<p><div><center><hr><br>等标签可以用于HTML页面排版作业利用所学知识，完成一个简单的网页要求：要有大段的文章，起码3段以上使页面出现下拉滚动条要有滚动的欢迎信息页面上设置不同种类的链接使用有序和无序清单显示两列新闻可以设置页面背景色和文字颜色多媒体、表格回顾HTML的地位和作用开发HTML使用的工具http协议HTML文件的结构如何设置HTML文件的背景色及文本色如何在页面上添加一个超链接HTML页面的文字布局HTML页面的各种字体效果及滚动字符页面版式控制标记本章内容在HTML页中插入图像设置图像热点插入背景音乐插入多媒体文件表格的结构表格的行标记和单元格标记表格的尺寸颜色跨行跨列的表格表格的美化修饰表格填充属性用表格实现页面布局嵌入图像网页之所以被人喜爱，因为上面有五花八门的东西，包括有图像，视频，音乐等等网页上支持的图片格式：BMPGIF(动画)JPEGPNG（）格式<IMGSRC=“图形文件地址“/>在网页中插入图像如图所示：页面中插入了图片使用<imgsrc=“url”/>src可以是本机或者远程主机上的图形设置图像如图显示的小狗更加美观通过设置不同的属性达到这样的效果鼠标移动到图片上还有提示注意：图片最好按照原图尺寸或者比例显示alt=""属性如图所示：该属性用于浏览器不支持图片，则在图片位置会显示该文字！图文混排用align属性，文字和图片还可以有不同的排版方式:如left、right，bottom,top,middle图片链接链接和图片的组合构成图片链接<AHREF="资源地址"><IMGSRC=“URL"></A>热点如图显示，红框显示的位置是某商务楼鼠标点击该区域会链接到，该楼的详细信息或网站<imgsrc="aaa.png"style="height:288px;width:420px"usemap="#gsw"/><mapname="gsw"id="gsw"><areashape="circle"style="color:red;"coords="50,50,50,50"href=""alt="baidu"/><areashape="rect"style="color:red;"coords="150,150,50,50"href=""alt="baidu"/></map>多媒体效果没有了视频、音乐我们的网页岂不如同报纸。。。背景音乐多媒体插入背景音乐<bgsound>标记是用来插入背景音乐。<bgsoundsrc="042.mp3"autostart=“true”loop=“infinite”/>只适用于IE浏览器

音乐文件的位置是否在音乐档下载完之后自动播放。true是(默认值)，false否 LOOP=2表示重复两次，Infinite表示重复多次插入多媒体src=#autostart=#loop=#hidden=#starttime="分:秒"volume="0-100"width="整数"和hight="整数"属性<embed>是用来插入各种多媒体格式可以是Midi、Wav、AIFF、AU等等src=#<Body><divalign="center"><embedsrc="file.wmv"></div></Body>src属性用来设定多媒体档案及路径，可以是相对或绝对autostart=# <Body><divalign="center"><embedsrc="file.wmv"autostart=true></div></Body>autostart=#属性设定是否在音乐档下载完之后就自动播放true是(默认值)，false否hidden=#<Body><divalign="center"> <embedsrc="file.wmv"autostart=trueloop="true"hidden=true></div></Body>是否完全隐藏画面true为是，no为否(默认)starttime="分:秒"<Body><divalign="center"><embedsrc="file.wmv"autostart=trueloop="true"starttime="00:30"></div></Body>设定多媒体从网页打开30秒后开始播放设定多媒体开始播放的时间volume="0-100"<Body><divalign="center"><embedsrc="file.wmv"autostart=trueloop="true"volume="50"></div></Body>设定音量的大小，数值是0到100之间。内定则为使用系统本身的设定调整视频尺寸<Body><divalign="center"><embedsrc="file.wmv"autostart=trueloop="true"width="400"hight="200"></div></Body>设定控制面板的高度和宽度

用<img>插入视频<body><center><palign="center"><imgdynsrc="file.wmv"></p></center></body>格式：<imgdynsrc="avi文件地址"><img>有关视频属性

以下是<img>用于播放视频可能用到的属性表格行列单元格在HTML文档中，广泛使用表格来存放网页上的文本和图像更大的应用是可以通过表格进行页面布局表格编码结构<TABLEborder="1"><TR><TD>

单元格内容

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

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

定义列

定义行

<td>可以换成<th>，该标记标记所标记的单元格的文字以粗体出现，通常用于表格的标题栏

定义表格表格是用<table>元素来定义的<tableborder=“n”align=“alignment”bgcolor=“clr”width=“300/80%”</table>边框对齐方式背景色表格宽度表格尺寸一般情况下，表格的总长度和总宽度自动调整的可以设置表格宽高

<tablewidth=n1height=n2>n1和n2可以用像素来表示，也可以用百分比设置用border属性来体现边框不同的效果。用style属性细致设置table的样式表格颜色可以为表格的整体或者部分使用背景色表格的背景色彩<tablebgcolor=#>行的背景色彩<trbgcolor=#>表元的背景色彩<thbgcolor=#>或<tdbgcolor=#>#预定义色彩名称：Red,Blue,MaroonRGB六位16进制数：#eeeeee简单表格实例<TABLEborder="2"><TR><TD>移动</TD><TD>联通</TD><TD>铁通</TD></TR><TR><TD>IBM</TD><TD>惠普</TD><TD>华硕</TD></TR></TABLE><caption><captionalign=top>旅游日程</caption>该属性：用于设置表格的标题在TR之前设置<TD>和<TH>

TH效果TD效果比较一下两个效果有什么不同跨行跨列的表格跨3列跨3行下图中的表格哪里用了跨行？哪里用了跨列？跨了几行几列?跨行、列的表格代码<TABLEborder="1">…

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

<TDrowspan="2">各种卡的总汇</TD>…</TABLE>注意：跨行列的表格尽量不用于网页布局表格的美化修饰背景图片背景色表格的高度表格的宽度文字对齐方式根据理解,如何进行美化修饰？可以将普通的表格变成下面的样子表格填充属性border(边框的厚度)cellpadding(单元格填充)cellspacing(单元格间距)border="20"cellpadding="30"cellspacing="40"bordercolor="red">表格的嵌套表格中可以嵌套表格图中红色的部分就是在外侧表格的一个TD中放置的一个新表格表格的排列表格默认情况下会向下排列右图排列了三个颜色的三个表格，想想它是怎么排列的？表格布局使用表格进行布局，分析一下它的布局结构表格的用处简单用处：在表格中显示数据重要用处：通过不同的样式，完成页面的布局实现方式：嵌套排列跨行列的表格（注：跨行列的表格只可用在最内层嵌套的表格中）演示布局使用fireworks或者photoshop，将刚才所见的布局示例图片切成相应的页面素材在Dreamweaver中创建表格进行布局将素材和文字放入相应的位置完成页面布局例子，注意体会我们见过或是没有见过的属性用<img>标签可以在页面中插入图像或视频图片在网页中可以被做成按钮或者是热点地图用<embed>标签可以在页面中插入视频<table><tr><td>等标记构成表格<td>和<th>的区别表格的尺寸颜色（背景、边框）跨行跨列的表格<colspan><rowspan>表格的美化修饰(背景图，居中，边距等)表格填充属性cellpaddingcellspacing用表格嵌套，排列，填充实现页面布局作业1根据本章所学的知识点，完成一个内容丰富的网页要求：1、页面要有图文混排的效果

2、尝试使用不同的排版标记

3、点击图片可以跳转到其他页面

4、在右下角放置一个div，显示一段视频作业2分析右侧的页面的结构

采用table布局完成页面效果框架与嵌入式框架课程回顾在HTML页中插入图像设置图像热点插入背景音乐插入多媒体文件表格的结构表格的行标记和单元格标记表格的尺寸颜色跨行跨列的表格表格的美化修饰表格填充属性用表格实现页面布局本章要点框架标记各窗口尺寸设置各窗口间相互操作(FrameTarget)IFrame的外观IFrame的使用表单的基本概念及作用九种写入标记菜单下拉列表的使用框架广告栏顶部框架(top.htm)导航栏左侧框架(left.htm)详细内容页面右侧框架(main.htm)框架的边框框架集页面(FrameSet.htm)多窗口页面(Frames)使用Frames结构，能够将整个窗口分成几个独立的小窗口每一个窗口可分别载入不同的文件，每个窗口是可以相互沟通。Framees结构中的每个URL值指定了一个事先做好的文件上中下排列的窗口每个窗口对应一个页面，以及一个框架集页面，总共需要几个HTML页面文件？FRAMEFRAMEFRAMEFRAMESET框架标记<FRAMESETrows="25%,50%,*"border="5"><FRAMEname=“top"src/target="the_first.html"><FRAMEname="middle"src="the_second.html">

<FRAMEname=“bottom"src="the_third.html"></FRAMESET>将窗口分割成上中下3部分窗口边框的宽度如果要在浏览器中创建左中右三个窗口,该如何实现？在上例中主要用到了下列代码结构简述出现<Frameset>标记的文档中，将不再使用<Body>标记<Html><Head></Head><Frameset> <Framesrc="url"></Frameset></Html>

注意：frame在Frameset中间，没有BODY三窗口框架top.html效果图left.html效果图right.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.html"name="rightframe"></FRAMESET></FRAMESET>设置无框架边框不显示滚动条禁止调整框架大小框架名称，便于超文本链接锚标签target属性所引用各窗口尺寸设置<framesetcols="100，200，300"><framesetrows="10%，20%，70%">

其中的任何一个数字也可以由“*”来代替

如：<framesetcols="100，200，*">

<framesetcols="100，*，*">将100像素以外的窗口平均分配

<framesetcols="*，*，*">将窗口分为三等份s框架可以将窗口分割为几块，横向分用ROWS属性，纵向分用COLS属性，每一块的大小可以由这两个属性的值来实现可以由数字或百分比来实现窗口间相互操作由Frames分出来的几个窗口的内容并不是静止不变的，往往一个窗口的内容随着另一个窗口的要求而不断变化我们必须为每一个窗口起一个名字，这个名字用属性Name来定义<framesrc=urlname=“窗口名”>

例如：<framesrc="frame/a.html"name=“left”>

Target属性

定义了窗口名称，还应该有Target来配合使用，Target属性指定了所链接的文件出现在哪一窗口。Target的值可以是name定义的名称，也可以是以下四类值:<ahref=urltarget=_blank>显示一个新窗口<ahref=urltarget=_self>显示在同一个窗口<ahref=urltarget=_parent>显示在前一份文件的窗口<ahref=urltarget=_top>显示在整个浏览器窗口Target示例一<ahref=“right.html”target=“rightframe“>right页面</A><ahref=“buy.html”target=“rightframe”>buy页面</A>target属性指定了所链接的文件出现在名称为“rightframe”的框架窗口里Target示例二<P><Ahref=“right.html”target=“_blank”>right.html</A></P><P><Ahref="buy.html"target="_self">buy.html</A></P><P><Ahref="sale.html"target="_parent">sale.html</A></P><P><Ahref=“all.html"target="_top">person_info.html</A></P>新启一个窗口打开文件“right.html”在本身窗口打开文件“buy.html”在前一窗口显示sale.html在整个浏览器窗口显示all.html各窗口边框的设置<Framesetrows="30%，70%"frameborder=yes>…<Framesetcols="20%，80%"frameborder=no>…</Frameset></Frameset>Frameborder属性用来设定各窗口边框的设置，yes表示有边框，no表示没有边框边框色彩<Framesetrows="30%，70%"bordercolor="red">…<Framesetcols="20%，80%"bordercolor="black">…</Frameset></Frameset>bordercolor=#属性用来设定边框色彩边界宽度<framemarginwidth=#marginheight=#>用来设定各窗口的上下左右边界宽度#的值为像素点marginwidth=5marginwidth=10marginheight=50各窗口间空白区域framespacing=#属性用来设定各窗口间空白区域，其中#为空白区域的大小如图所示：红色和黑色部分表示各窗口的空白区域framespacing=50卷滚条设置<framescrolling=#>用来设定滚动条，缺省值是autoyes表示有，no表示没有，auto表示由浏览器自动设置当现实区域不够的时候就会出现滚动条B窗口，设置了不显示滚动条框架的应用领域很少用在网站的页面显示中，如果使用，大都也是应用在网站后台管理系统的页面上可以应用于各种web应用系统的使用界面观察搜狐首页和一个网站系统的后台页面体会效果网站首页后台页面嵌入式框架如同“画中画“电视

Iframe标记，又叫浮动帧标记，你可以用它将一个HTML文档嵌入在一个HTML中显示Iframe标记的使用<Iframesrc="URL"width="x"height="x"frameborder="x"scrolling="[OPTION]"></iframe>格式:文件的路径，既可是HTML文件，也可以是文本、ASP等

“画中画”区域的宽度是否出现滚动条区域边框的高度

另外，在<iframe>中还可以添加name=#属性，属性后面的文字将出现在不支持FRAMES的浏览器中嵌入式框架实例<bodybgcolor="Lime"><h3align="center">登鹳雀楼</h3><Palign="center">白日依山尽，黄河入海流。<br>欲穷千里目，更上一层楼。</P></body>我们先创建一个文件名叫a.html文件，其代码如下主页面代码<Html> <Head> <Title>嵌入式框架</Title> </Head> <Iframesrc="a.html"> </iframe></Html>换成如下代码，大家注意效果的变化，体会属性的作用<Iframesrc="a.html"width="250"height="200"frameborder="0"></iframe>Iframe的应用领域用于在页面上动态的显示其他系统页面的内容嵌入的页面有更新的话，也会相应的显示出来将页面数据提交到iframe，可以不让页面刷新关于这点，大家在学习了后面知识“表单”后，才能深刻体会

体验用于采集和提交用户输入的信息表单标记<form><formaction＝"url"method="get|post"name="myform"target="_blank">……</form>

表单在Web网页中用来给访问者填写信息，从而能采集客户端信息，使网页具有交互的功能表单是由窗体和控件组成的

处理程序的程序名(包括网络路径:网址或相对路径)

提交信息的方式MethodGET，显示提交，数据量小POST，隐式提交，数据量大（最大4MB）GET|POST平板车搬家大型集装箱货车搬家写入标记<input/>标记<input/>能够将浏览器中的控件加载到html文档中必须放在<form></form>标志对之间<inputtype=“”/>用来定义一个用户输入区，用户可在其中输入信息。标志中共提供了九种类型的输入区域，具体是哪一种类型由type属性来决定

注意：该标记是单标记，没有结束标记<type>的属性1．单行的文本输入区域2．按钮3．复选框4．隐藏区域5．密码输入区6．单选按钮类型7．图像按钮<inputtype="text"><inputtype="button"><inputtype="checkbox"<inputtype="hidden"><inputtype="password"><inputtype="radio"><inputtype="image"src="url">8．表单事件处理按钮<inputtype="submit|reset">9．文件域<inputtype=“file">单行的文本框

(1)name定义控件名称(2)value指定控件初始值,属性及说明(3)size指定控件宽度(4)maxlength表示该文本输入框允许输入的最大字符数(5)onchang当文本改变时要执行的函数(6)onselect当控件被选中时要执行的函数(7)onfocus当文本接受焦点时要执行的函数单行文本框实例

<form> <inputtype="text"name="username"value="请输入用户名"></form><Input/>必须放在<form></form>之间设置当行文本框的其他属性，观察效果输入密码的区域属性name定义控件名称。value指定控件初始值,该值就是浏览器一开始在文本框中的内容。size指定控件宽度,表示该文本输入框所能显示的最大字符数。maxlegnth表示该文本输入框允许用户输入的最大字符数。当用户输入密码时，区域内将会显示“*”号密码框实例<inputtype=“text”name=“username”value=“请输入用户名”/><br/><inputtype="password"name="password"value="请输入密码“/>两者的唯一区别按钮

分类普通按钮提交到服务器的按钮重置按钮<inputtype="button“/><inputtype=“submit”/><inputtype=“reset“/>可将表单内容全部清除点击就会连接到action指定的url地址按钮共同的属性

共同的属性name指定按钮名称value指定按钮表面显示的文字onclick指定单击按钮后要调用的函数onfocus指定按钮接受焦点时要调用的函数所谓调用的函数，是后面章节学的JavaScript函数普通按钮当这个按钮被点击时，默认不会有任何的效果必须调用属性onclick指定的函数在使用这个按钮时，一般配合使用value指定在它上面显示的文字用onclick指定一个函数，一般为JavaScript的一个方法按钮实例<formid="form1"name="form1"method="post"action=""> <inputtype="button"onclick="msg()"value="点击我"/></form>msg()就是JavaScript代码,后面的章节会详细讲解图像按钮图像的源文件名由src属性指定，用户点击后，表单中的信息传送给服务器

属性name指定图像按钮名称。src指定图像的url地址<inputtype="IMAGE"src="login.gif“/>单选按钮类型(1)name定义控件名称*(2)value定义控件的值*(3)checked设定控件初始状态是被选中的checked=checked(4)onclick定义控件被选中时要执行的函数(5)onfocus定义控件为焦点时要执行的函数当为单选项时，所有按钮name属性必需相同单选按钮实例

<INPUTCHECKEDname=R1type=radiovalue="music">音乐checked表示默认被选中radio表示单选按钮复选框实例<inputtype=“checkbox”name=“yinliao”value=“kkkl”>可口可乐注意这里的value值name可以相同也可以不同相同name属性的复选框可以看成一组*checked=“checked”表示默认被选中文件域属性：name控件名称。例如<inputtype=“file”name=“file”/>用户可以通过文件域来浏览本地文件并选择。配合服务端程序，可以实现本地文件的上传注意：要实现文件上传必须以Post为提交方式

并且设置表单属性*（enctype=“multipart/form-data”）隐藏区域属性name控件名称。value控件默认值。例如<inputtype="Hidden"name="ss"value="688">用户不能在其中输入，用来预设某些要传送的信息对用户来说是不可见的下拉列表框属性multiplenamesize设置列表的高度缺省时值为1可多选控件名称<select></select>标志对用来创建一个菜单下拉列表框下拉列表框实例<selectname="gx2"multiplesize="4"> <optionvalue=“apple”selected>苹果</option></select>multiple代表多选Selected表示默认选项将size改为1，看看效果可以输入多行的文本框属性(1)onchange指定控件改变时要调用的函数(2)onfocus当控件接受焦点时要执行的函数(3)onblur当控件失去焦点时要执行的函数(4)onselect当控件内容被选中时要执行的函数*(5)name文字区块的名称，作识别之用，将会传至CGI*(6)cols文字区块的宽度*(7)rows文字区块的列数，即其高度*(8)wrap属性定义输入内容大于文本域时显示的方式，提交时把换行符提交<textarea></textarea>用来创建一个可以输入多行的文本框

文本域示例

<formaction=""method="post">… <textareaname="yj"clos="20"rows="5">…</form>表单的作用用户注册系统登录发表留言或内容任何需要用户填写内容，进行交互操作的时候总结框架标记各窗口尺寸设置框架边框和各窗口格式的问题各窗口间相互操作(FrameTarget)框架的应用领域IFrame的外观IFrame的使用IFrame的应用领域表单的作用？Actionmethodname属性<input>中type的不同，决定了表单中不同的控件文本框，密码框，文本域，隐藏域的区别单选框和复选框的区别下拉列表框不同属性值，会有不同的显示效果作业使用框架及表单元素实现左图的功能。层叠式样式表CSS

回顾框架标记各窗口尺寸设置各窗口间相互操作(FrameTarget)IFrame的外观IFrame的使用表单的基本概念及作用九种写入标记菜单下拉列表的使用本章内容认识CSSCSS的基本语法CSS选择器文本样式背景样式DIV和布局样式CSS伪类在HTML中使用CSS的方式认识CSS内容相同外观不同样式一样式二CSS的概念CSS就是CascadingStyleSheets，中文翻译为“层叠样式表”，简称样式表CSS可以制作好多套页面的样式，方便用户切换风格（如上图）利用CSS可以完成页面上各元素的样式效果，是网页更加美观CSS基本结构<STYLEtype="text/css"> P{color:red;

font-size:30px;

font-family:隶书;} ……</STYLE>声明文档样式表结束文档样式表开始类型为CSS样式样式规则CSS样式规则P{color:red;font-size:30px;font-family:隶书;}选择器属性的值属性Css应用所有的段落都采用P样式，保证风格统一P{color:red;font-family:"隶书";font-size:24px;}…<P>床前明月光，</P>本页面中所有的P标签都应用了此样式选择器用分号隔开如何编写此样式?字体类型为隶书、大小24pxCSS选择器标记选择器（可以定义相关html标记的外观div）类选择器（可以定义一类html标记的外观.class后面的值）ID选择器（可以定义某一个html标记的外观#id后边的值）复合选择器（结合上述三种选择器所构建的复杂选择器，可针对特定的区域的特定一类或特定一个html标记设定外观）根据不同选择器所构建的样式，分别称之为标记样式，类样式，ID样式和复合样式类样式的应用….red{color:red;font-family:"隶书";}…<Pclass="red">床前明月光，</P><P>我是郭德刚，</P>…CLASS类选择器为类选择器定义的样式规则应用类选择器class＝”类名“<H2>和<P>标签的字体和颜色一样大小不同用同一个样式如何实现？常用样式属性文本属性文本属性说明font-size字体大小font-family字体类型font-style字体样式color设置或检索文本的颜色text-align文本对齐使用font-size、font-family、color实现

宋体，字体大小12px字体大小16px文本间距示例letter-spacing:1em;text-align:justify;text-indent:2em;line-height:30pt；字间距为1em对齐方式为两端对齐缩进格为2em行高为30pt上例-样式代码详解…P{font-size:12px; font-family:"宋体"; text-align:left;}.bigFont

{font-size:16px; color:red;}…<Pclass="bigFont">·世锦赛刘翔12秒95夺冠成就大满贯</P><P>我国实施不安全食品召回制度遏制非法出口</P>…..声明P标签样式声明名称为bigFont类样式,它可被多个标签共享应用类样式用class＝”类名“Css设置背景背景属性说明background-color设置背景颜色background-image设置背景图像background-repeat设置一个指定的图像如何被重复可取值repeat-x、repeat、no-repeat、repeat-y…table{background-image:url(images/type_back1.jpg);background-repeat:no-repeat;

}…设置背景图像为images文件夹下的type_back1.jpg设置背景图像不平铺CSS方框属性margin-right右边界margin-left左边界margin-top上边界margin-bottom下边界marginborderpaddingborder-width边框的宽度padding-left左填充padding-bottom下填充方框属性明细属性CSS名称说明边界属性margin-top设置对象的上边距margin-right设置对象的右边距margin-bottom设置对象的下边距margin-left设置对象的左边距边框属性border-style设置边框的样式border-width设置边框的宽度border-color设置边框的颜色填充属性padding-top设置内容与上边框之间的距离padding-right设置内容与右边框之间的距离padding-bottom设置内容与下边框之间的距离padding-left设置内容与左边框之间的距离方框属性代码示例….tableBorder{ border-right-width:3px; border-right-color:red;

border-right-style:dashed; padding-top:20px;

padding-left:10px; }TR{background:yellow;}…

<TR><TDclass="tableBorder">手机冲值</TD>…设置单元格右边框宽度为3像素设置单元格右边框为虚线框设置单元格里文字与左边框的距离为10像素表格行的背景色表单文本框样式....textBorder{border-width:1px;border-style:solid;

}…<INPUTname="fname"type="text"class="textBorder"></P>...文本框为实线边框边框宽度为1像素看看没有设置样式的文本框的效果对超链接添加样式…A{ color:blue; text-decoration:none; }A:hover{ color:red; }..<TD><Ahref="#">诺基亚</A>|<Ahref="#">摩托罗拉</A></TD>..超链接文本的样式鼠标放在上面的样式如何编写此超链接样式？用样式实现图片按钮.picButton{background-image:url(images/back.jpg);border:0px;margin:0px;padding:0px;height:23px;width:82px;

font-size:14px;}……<INPUTname="Rt1"type="reset"class="picButton"value="重填">…….背景图像为images文件夹下的back.jpg按钮的边界、边框、填充均为0像素设定按钮宽度、高度和图片大小一样设置按钮上的字体大小为14像素<body><divid="container"><divid="header"><h1>MainTitleofWebPage</h1></div>

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

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

学习-3网页设计1html超标记语言

文档简介

温馨提示

最新文档

评论

学习-3网页设计1html超标记语言

文档简介

温馨提示

最新文档

评论

相关文档