HTML语言与网页设计课件

上传人：h*** IP属地：贵州上传时间：2022-12-09 格式：PPT 页数：196 大小：2.12MB 积分：25 举报 版权申诉

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

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

文档简介

HTML语言与网页设计HTML语言与网页设计HTML语言与网页设计2.HTML语言与网页设计2.1HTML语言简介HTML，即超文本标记语言，是英文HyperTextMarkupLanguage的缩写，是一种独立于操作系统的网页编写语言。HTML的最大特点就是用标记描述和表现信息的显示格式和内容。所谓标记就是采用一系列的指令符号来控制输出的效果，通用标记结构为：<元素名属性=“属性值”>内容</元素名>元素名即预定义的标记（签）属性：用来指定标记的行为确定元素内容的显示方式，如果标记有属性，则将跟在元素名后，属性之间用一个或多个制表符、空格、回车符分开，不区分出现的顺序。<>：把标记和标记所描述的内容区分开，一般成对出现，结束标记没有属性HTML的元素名、属性不区分大小写（xHTML区分且只能用小写），但最好用小写（有的操作系统大小敏感，如unix）HTML的源文件是纯文本文件，可以用任何一种文本编辑器来编写，但后缀应用.htm或.html。HTML语言与网页设计HTML语言与网页设计HTML语言与网12.HTML语言与网页设计2.1HTML语言简介HTML，即超文本标记语言，是英文HyperTextMarkupLanguage的缩写，是一种独立于操作系统的网页编写语言。HTML的最大特点就是用标记描述和表现信息的显示格式和内容。所谓标记就是采用一系列的指令符号来控制输出的效果，通用标记结构为：<元素名属性=“属性值”>内容</元素名>元素名即预定义的标记（签）属性：用来指定标记的行为确定元素内容的显示方式，如果标记有属性，则将跟在元素名后，属性之间用一个或多个制表符、空格、回车符分开，不区分出现的顺序。<>：把标记和标记所描述的内容区分开，一般成对出现，结束标记没有属性HTML的元素名、属性不区分大小写（xHTML区分且只能用小写），但最好用小写（有的操作系统大小敏感，如unix）HTML的源文件是纯文本文件，可以用任何一种文本编辑器来编写，但后缀应用.htm或.html。2.HTML语言与网页设计2.1HTML语言简介2.2

HTML文档的基本结构HTML文档包含定义文档内容的文本和定义文档结构及外观的标记，基本结构如下：<html>：容器标记<head>头标记，用于定义文档标题及其它可能会用于控制文档显示或访问的参数，如<title>、<base>、<link>、<isindex>、<meta>等</head><body>正文，包括要显示的文本和文档的控制标记</body>

</html>：容器结束标记2.2HTML文档的基本结构HTML文档包含定义文档内容的2.3

HTML的常用元素和标记2.3.1HTML结构标记（1）<html>标记功能：界定一个完整的HTML文档属性：dir,lang,version结束标记：</html>包含:head_tag,body_tag,framesdir属性：内容的显示方式，用于本标记用于决定整个文档的显示方向，默认为”ltr”，用于其它标记则用于决定该标记内的内容的显示方向lang属性：文档或文本的显示语言version属性：说明支持的html标准的版本，在HTML4中已弃用，并用<！doctype>标记来代替.例：<!DOCTYPEHTMLPUBLIC“-//W3C//DTDHTML4.01//EN”“/TR/html4/strict.dtd”>,如yahoo2.3HTML的常用元素和标记2.3.1HTML结构标记（2）<head>标记功能：定义文档头区属性：dir,lang,profile结束标记：</head>包含:head_content，如base、object、link、style、script、meta使用范围：html_tag（2）<head>标记功能：定义文档头区（3）<title>标记功能：定义文档标题属性：dir,lang结束标记：</title>包含:plain_text使用范围：head_content说明：此标记只能在head标记内出现.title的内容通常在浏览器的标题栏中显示.浏览器中收藏夹内书签的名称是title的内容.title的内容可以方便搜索引擎索引页面.从搜索引擎搜索到的内容的标题往往是网页title的内容.示例：当当（3）<title>标记功能：定义文档标题<meta>标记功能：提供用户不可见信息，为其它应用程序和搜索引擎访问提供可用信息属性：meta属性主要分为两组name属性与content属性name属性用于是以名称/值形式的名称描述网页,name属性的值所描述的内容(值)通过content属性表示,便于搜索引擎机器人查找,分类.其中最重要的是description,keywords和robots.http-equiv属性与content属性http-equiv属性用于提供HTTP协议的响应头报文(MIME文档头),它是以名称/值形式的名称,http-equiv属性的值所描述的内容(值)通过content属性表示,通常为网页加载前提供给浏览器等设备使用.其中最重要的是content-typecharset提供编码信息,refresh刷新与跳转页面,no-cache页面缓存,expires网页缓存过期时间.结束标记：无使用范围：head_content<meta>标记功能：提供用户不可见信息，为其它应用程序和搜<meta>标记应用：name属性与content属性组合定义网页关键词<metaname="keywords"content="阿里巴巴，行业门户，网上贸易，b2b，电子商务，内贸，外贸，批发，行业资讯，网上贸易，网上交易，交易市场，在线交易，买卖信息，贸易机会，商业信息，供求信息，采购，求购信息，供应信息，加工合作，代理，商机，行业资讯，商务服务，商务网，商人社区，网商"/>阿里巴巴定义网页简短描述<metaname="description"content="阿里巴巴（）是全球企业间（B2B）电子商务的著名品牌，汇集海量供求信息，是全球领先的网上交易市场和商人社区。首家拥有超过1400万网商的电子商务网站，遍布220个国家地区，成为全球商人销售产品、拓展市场及网络推广的首选网站"/>定义搜索引擎索引要求<metaname="robots"content="robotterms">robotterms是一组使用逗号(,)分割的值，通常有如下几种取值：none，noindex，nofollow，all，index和follow。sciencedirect<meta>标记应用：name属性与content属性组合定<meta>标记应用：http-equiv属性与content属性组合定义文件内容类型及编码信息<metahttp-equiv="content-type"content=“type/subtype;parameter>type的常见取值为application,audio,image,message,multipart,text,video示例：<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>阿里巴巴<metacontent="text/html;charset=utf-8"http-equiv="Content-Type"/>Alibaba<meta>标记应用：http-equiv属性与conten设置网页缓存过期时间用法：<Metahttp-equiv=“Expires”Content=“0”>

<Metahttp-equiv=“Expires”Content=“Wed,26Feb199708:21:57GMT”>说明：指定网页在缓存中的过期时间，一旦网页过期，必须到服务器上重新加载。注意：必须使用GMT的时间格式，或直接设为0(数字表示多少时间后过期)。设置网页缓存过期时间定义页面缓存<metahttp-equiv="pragma"content="no-cache">说明:为了提高速度一些浏览器会缓存浏览者浏览过的页面,通过上面的定义,浏览器一般不会缓存页面,而且浏览器无法脱机浏览.重定向:刷新与跳转页面<metahttp-equiv="refresh"content="5"/><metahttp-equiv="refresh"content="5;url=/"/>

定义页面缓存<base>标记功能:定义基URL用于页面的链接与引用属性:href,target结束标记:单独出现使用范围:head区href属性:当前文档的完整URLtarget属性:指定目标窗口或框架

网易说明:当使用相对路径定义链接时，可以使用base标记定义基URL解析所有文档中定义的相对路径的URL。<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN""/TR/html4/strict.dtd"><HTML><HEAD><TITLE>OurProducts</TITLE><BASEhref="/“target="_blank"></HEAD><BODY><P>Haveyouseenour<Ahref="../cages/birds.gif">BirdCages</A>?</BODY></HTML><base>标记功能:定义基URL用于页面的链接与引用<!其它常用head区标记<link>:在文档中声明使用外部资源

阿里巴巴<style>:声明样式,用来创建CSS属性，以控制整个文档主体内容的显示特性<script>:在文档中使用脚本<object>:定义浏览器输出非标准对象的方法,在网页中嵌入除图片外的多媒体其它常用head区标记<link>:在文档中声明使用外部资源<body>标记功能：定义文档主体属性：控制文档外观的属性；将文档自身与其它可编程功能相联系的属性；标记和说明文档主体以供将来参考的属性结束标记：</body>包含:

body_content使用范围：html_tag<body>标记功能：定义文档主体注释标记:描述文档的各个部分要做什么解释为什么要这样编写某段代码包含不想在文件中显示的信息标示文件的禁用部分注释标记:描述文档的各个部分要做什2.3.2字符实体用于标识特殊字符：不可见字符和特殊用途字符格式：&#：#代表字符实体名称或者字符的ASCII码值/TR/html4/sgml/entities.html

显示方式数字标识符实体名称对象注释 Tab键回车键空格!!惊叹号“""引号在脚本中很有用//斜线（斜杠）<<<小于号>>>大于号\\反斜线（反斜杠）……省略号TM™商标 &位与运算符(&)©©©版权®®®注册商标±±加号或减号2.3.2字符实体用于标识特殊字符：不可见字符和特殊用途字2.3.3对象与多媒体标记<object>标记<img>标记2.3.3对象与多媒体标记<object>标记object标记object标记是成对出现的,以<object>开始，</object>结束使用object标记可以在网页中嵌入各种多媒体或复杂外部应用即对象，例如Flash,JavaApplets,MP3,QuickTimeMovies等object标记通常配合param标记一同使用,后者用于对象初始化在网页中嵌入图像，一般使用img标记object可以完全代替标准不赞成使用的applet,embed,bgsound标记object标记object标记是成对出现的,以<objecObject标记的属性一般属性archive--包含多个使用逗号(,)分割的Java类或外部资源，用于增强applet的功能，定义applet代码border--边框classid--关联一个应用程序，执行嵌入内容的应用程序在windows系统中的唯一id(不能改变此id，否则程序将出现异常)，例如clsid:D27CDB6E-AE6D-11cf-96B8-444553540000--Flashcodebase--为相对路径提供基URL，IE浏览器通常将此属性中的内容定义为运行嵌入内容所要加载的插件，例如/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0--Flashcodetype--嵌入内容的MIME类型，例如application/java--Javaapplication/x-shockwave-flash--Flashdeclare--声明没有实例化的嵌入对象，此对象通常在加载后，或者当嵌入对象的某些参数将使用其它嵌入对象时可以使用,即实例化以后使用.此时对象需指定iddata--嵌入内容(实例对象)的URL，可以是基于codebase属性的相对路径height--嵌入内容的高度，单位像素hspace--嵌入内容水平方向的空白，应使用CSSmargin代替standby--文档加载时显示的文本信息tabindex--使用"Tab"键的遍历顺序usemap--定义图像点击区域vspace--嵌入内容垂直方向的空白，应使用CSSmargin代替width--嵌入内容的宽度，单位像素Object标记的属性param标签:初始化对象为object标签提供嵌入内容的运行时参数的name与value对param标签是单独出现的param标签用于定义网页中嵌入内容的运行时参数param标签应使用在object或applet标签内属性id--唯一标识符name--名称，name与value属性组成一对type--嵌入内容的MIME类型value--name的对应值valuetype--指定参数类型data--参数是一个简单的字符串，默认值ref--参数是URLobject--参数是另一个嵌入式对象声明的idparam标签:初始化对象为object标签提供嵌入内容示例:嵌入MediaPlayer播放器

<objectid="MediaPlayer"width="478"height="300"codebase="/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,1,5,217"type="application/x-oleobject"standby="LoadingMicrosoftWindowsMediaPlayercomponents..."classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95"VIEWASTEXT>

<paramname="DisplayBackColor"value="0">

<paramname="DisplayForeColor"value="16777215">

<paramname="DisplayMode"value="0">

<paramname="DisplaySize"value="-1">

<paramname="Filename"value="mms:///视频文件.wmv">

<paramname="ShowControls"value="0">

</object>

示例:嵌入MediaPlayer播放器

<objectid示例:嵌入flash<objectwidth="400"height="40"classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"codebase="/pub/shockwave/cabs/flash/swflash.cab#4,0,0,0"><paramname="SRC"value="bookmark.swf"><embedsrc="bookmark.swf"width="400"height="40"></embed></object>广东商学院示例:嵌入flash<objectwidth="400"<img>标记导入图像img标签是单独出现的.属性:一般属性alt--代表图像的替代文字src–说明图像源(就是图像的保存地点)height--图像的高度width--图像的宽度usemap:定义图像点击区域语法:<imgsrc="URI"alt="alttext"title="titletext"/><img>标记导入图像2.3.4超链接标记<a属性=属性值>显示的文本或图像内容</a>常用属性name=cdata:指定锚点(目标链接)的名称id=name:指定锚点的元素标识符class=classname:指定锚点的类名href=uri:指定超链接的目标地址rel=link-types:指定前向链接类型rev=link-types:指定后向链接类型target=frame-target:指定目标窗口或框架:_blank,_self,_parent,_toptabindex=number:遍历链接焦点title=text:显示提示信息2.3.4超链接标记<a属性=属性值>显示的文本或图像内(2)图像地图标记功能:用于热区超链接语法:<map属性=属性值><area属性=属性值><map>map基本属性:name,idarea基本属性:shape:指定热区形状coords:指定热区坐标,其值个数取决于shape属性href:指定热区链接目标地址target:指定热区链接显示窗口或框架(2)图像地图标记功能:用于热区超链接示例:指定位置链接<p><ahref="#bottom">链接到页面下部</a></p><p><ahref="#top">链接到页面上部</a></p><P><Ahref="#xxx">...</A>...moredocument...<P><Aname="XXX">...</A>示例:指定位置链接<p><ahref="#bottom"示例2:打开指定邮件链接<ahref="mailto:">…</a><a

href="/"

title="baidu">

<img

src="/img/logo.gif"

</a>

href="/"

title="google">

<img

src="/intl/en_ALL/images/logo.gif"

</a>

示例3:打开图像链接示例2:打开指定邮件链接<ahref="mailto:"示例4:热区链接<P><OBJECTdata="navbar1.gif"type="image/gif"usemap="#map1"><P>Thisisanavigationbar.</OBJECT><MAPname="map1"><AREAhref="guide.html"alt="AccessGuide"shape="rect"coords="0,0,118,28"><AREAhref="search.html"alt="Search"shape="rect"coords="184,0,276,28"><AREAhref="shortcut.html"alt="Go"shape="circle"coords="184,200,60"><AREAhref="top10.html"alt="TopTen"shape="poly"coords="276,0,276,28,100,200,50,50,276,0"></MAP>示例4:热区链接<P>2.3.5版式控制标记：页面布局设计列表表格框架2.3.5版式控制标记：页面布局设计列表列表1.无序列表:项目符号<ul>…..<li>列表项</li><li>列表项</li><li>列表项</li>…..</ul>例:当当

新浪2.有序列表:连续标号<ol>…..<livalue=“属性值”>列表项</li><li>列表项</li><li>列表项</li>…..</ol>如何设计列表样式？CSSlist-style-type、list-style-image、list-style-position属性列表1.无序列表:项目符号2.有序列表:连续标号如何设计列表表格：数据表、控制网页布局<table>…</table>属性：align：页面对齐方式，left,right,centerwidth:整个表格的宽度，可以是像素值或百分比height：整个表格的高度，可以是像素值或百分比，通常可省略，浏览器会自动调整border:边框的宽度，以像素为单位，缺省值为0，用于排版时通常取0值。cellpadding:单元格与边框之间的距离，以像素为单位，缺省值为0cellspacing:单元格之间的距离，以像素为单位，缺省值为2表格：数据表、控制网页布局<table>…</table><tbody>、<tr>、<td>、<th><table><tbody>…</tbody>:嵌在<table>…</table>内，表示表格体<tr>…</tr>:嵌在<tbody>…</tbody>内，表示表格的一行属性：对齐方式，left,right,centeralign:行内单元格水平对齐方式，left,right,centervalign：行内单元格垂直对齐方式，top,middle,bottom<td>…</td>:嵌在<tr>…</tr>内，表示在当前行内增加一个单元格属性：align:行内单元格水平对齐方式，left,right,centervalign：行内单元格垂直对齐方式，top,middle,bottomnowrap:表示单元格内的文本段只有出现显式换行标记时才中断rowspan:指定该单元格所跨的行数colspan:指定该单元格所跨的列数<th>…</th>:用法同<td>标记，惟一区别在于这个元素是用来标记“头单元格”的，所谓头单元格是指表格中位于第一行或第一列用来指示其余各行或各列内容的单元格</table><tbody>、<tr>、<td>、<th><tab表格应用例:佳能报价单<TABLEstyle="FONT-SIZE:12px"cellSpacing=1cellPadding=0width="98%"align=centerbgColor=#ccccccborder=0><TBODY><TRbgColor=#ffffff><TDcolSpan=3><B><ahref=/products/product_search.php?subcatid=15&manuid=232>佳能</a>Canon</B></TD></TR><TRbgColor=#ffffff><TD>型号</TD><TD>像素/变焦/屏幕/存储介质</TD><TD>本周报价</TD></TR><TRbgColor=#ffffff><TD>IXUS60</TD><TD>600万\3X\2.5\SD</TD><TD>2150</TD></TR><TRbgColor=#ffffff><TD>IXUS65</TD><TD>600万\3X\3\SD</TD><TD>2350</TD></TR><TRbgColor=#ffffff><TD>IXUSIZOOM</TD><TD>500万\2.4X\2.5\SD</TD><TD>1570</TD></TR>……<TRbgColor=#ffffff><TD>EOS30D(套)</TD><TD>800万\EFS17-85\2.5\CF</TD><TD>13400</TD></TR></TBODY></TABLE></P>表格应用例:佳能报价单<TABLEstyle="FONT-HTML语言与网页设计课件表作为版式工具示例<HTML><HEAD><TITLE>Listing3-6</TITLE></HEAD><BODYTOPMARGIN="0"LEFTMARGIN="0"><TABLEWIDTH="100%"HEIGHT="100%"CELLSPACING="0"CELLPADDING="5"BORDER="0"><TR><TDCOLSPAN="3"ALIGN="CENTER"BGCOLOR="black"HEIGHT="25"><FONTCOLOR="white"><B>PageUsingTables</B></FONT></TD></TR><TR><TDBGCOLOR="thistle"WIDTH="70"VALIGN="top"><IMGSRC="trans.gif"WIDTH="70"HEIGHT="0"BORDER="0"><BR><B>Listings</B><BR><AHREF="lst3-1.htm">Listing3-1</A><BR><AHREF="lst3-2.htm">Listing3-2</A><BR><AHREF="lst3-3.htm">Listing3-3</A><BR><AHREF="lst3-4.htm">Listing3-4</A><BR></TD><TDALIGN="center"><IMGSRC="trans.gif"WIDTH="150"HEIGHT="0"BORDER="0"><BR>Thispagedemonstratesusingatableforpagelayout.<BR>Itisorganizedwithlocallinksontheleft,externallinksontheright,contentinthecenter,andaheaderatthetop.</TD><TDVALIGN="top"WIDTH="25%"BGCOLOR="lightgrey"><IMGSRC="trans.gif"WIDTH="120"HEIGHT="1"BORDER="0"><BR><B>Organizations</B><BR><AHREF="">Microsoft</A><BR><AHREF="">MicrosoftPress</A><BR><AHREF="">W3C</A><BR><BR><B>UsefulSites</B><BR><AHREF="/Workshop">SBNWorkshop</A><BR><AHREF="/">MSDN</A><BR><AHREF="">WebR</A><BR><AHREF="">WebR</A><BR></TD></TR></TABLE></BODY></HTML>表作为版式工具示例<HTML>表作为版式工具示例表作为版式工具示例表作为版式工具示例卓越亚马逊yahoo表作为版式工具示例卓越亚马逊框架

它是一个标准的HTML文件，只包括如何分割网页和文件在每个区域如何显示的信息<HTML><HEAD><TITLE>Listing3-8</TITLE></HEAD><FRAMESETCOLS=“50%,70,*”>//定义框架页面<FRAMESRC=“1.htm”>//定义一个框架<FRAMESRC="2.htm"><FRAMESRC="3.htm"><noframes>//对不支持框架的设备进行提示,或相关操作<body>浏览器不支持框架!</body></noframes></FRAMESET></HTML>框架它是一个标准的HTML文件，只包括如何分割网页和文件在框架示例框架示例嵌套框架：多级版式<HTML><HEAD><TITLE>Listing3-9</TITLE></HEAD><FRAMESETROWS="50,*"FRAMEBORDER="0"FRAMESPACING="0"><FRAMESRC="1.htm"NAME="frame1"SCROLLING="no">

<FRAMESETCOLS="20%,80%"FRAMEBORDER="1"FRAMESPACING="1"><FRAMESRC="2.htm"NAME="frame2"SCROLLING="yes"><FRAMESRC="3.htm"NAME="frame3"SCROLLING="auto">

</FRAMESET></FRAMESET></HTML>嵌套框架：多级版式<HTML>嵌套框架示例嵌套框架示例跨框架定位

增加导航框架（包括其它框架的链接，目标框架的定位属性）<HTML><HEAD><TITLE>Listing3-10</TITLE></HEAD><FRAMESETCOLS="25%,75%"FRAMEBORDER="1"FRAMESPACING="1"><FRAMESRC="nav.htm"NAME="NavFrame"SCROLLING="yes"><FRAMESRC="1.htm"NAME="ContentFrame"SCROLLING="auto"></FRAMESET></HTML>导航栏（框架）：<HTML><BODY><AHREF="1.htm"TARGET="ContentFrame">GotoFrame1</A><BR><AHREF="2.htm"TARGET="ContentFrame">GotoFrame2</A><BR><AHREF="3.htm"TARGET="ContentFrame">GotoFrame3</A><BR></BODY></HTML>跨框架定位增加导航框架（包括其它框架的链接，目标框架的定位导航框架示例导航框架示例2.3.6表单：互动表单是网页上的一个特定区域。这个区域是由一对<form>元素定义的。其间是各种接受用户输入的控件HTML表单是HTML页面与浏览器端实现交互的重要手段。利用表单可以收集客户端提交的有关信息。在HTML里，我们可以定义表单，并且使表单与CGI或ASP等服务器端的表单处理程序配合。什么时候用到表单？搜索、注册、登陆、论坛、交易、调查……2.3.6表单：互动表单是网页上的一个特定区域。这个区域是表单的基本语法结构<formaction="url"method=*name=**>

...<inputtype=*name=**value=***><textareaname=*rows=**cols=**wrap=***>...</textarea><selectname=*size=**multiple>...</select></form>action属性：用来定义表单处理程序（ASP、JSP或CGI程序）的位置(相对地址或绝对地址)。method属性定义表单结果从浏览器传送到服务器的方法，一般有两种方法：get、post。示例1

，示例2，3表单的基本语法结构<formacti简单文本输入标记<input><inputtype=*name=**value=***>

type=*决定控件类型，分为输入型,选择型,点击型。每个控件都应该包含type和name属性，并且大多数都包括value属性。1)按钮：激活某个操作普通按钮<inputtype="button"value="要处理的对象的值"name=“fieldname">提交按钮<inputtype="submit"value="提交"name=“B1">重置按钮<inputtype="reset"value="全部重写"name=“B2">简单文本输入标记<input><input2)复选框(Checkbox)：选择多个项目在一个表单里的所有多选框可以有一个或多个被选中。<inputtype=”checkbox”name=“fieldname"value=**checked><inputtype=”checkbox”name=“fieldname"value=**>……2)复选框(Checkbox)：选择多个项目3)单选按钮(RadioButton)：只能选择一项一个表单里的所有变量名相同的单选框只能够有一个被选中。<inputtype=“radio”name=*value=**><inputtype=“radio”name=*value=**checked>各个选项的name必须一样3)单选按钮(RadioButton)：只能选择一项4)文本输入框：输入单行文本<inputname=?type=*value=**size=***maxlength=??>?文本框的名字*text或password**默认值或为空***长度??最大输入字符数4)文本输入框：输入单行文本5)图象域：图像按钮<inputtype=”image”name=**src=”url”>6)文件域：上传文件<inputtype=”file”name=**src=”url”>7)隐藏域<inputtype=”hidden”name=**value=***>示例5)图象域：图像按钮文本域:多行多列的文本输入框<textareaname=*rows=**cols=**wrap=***>...</textarea>*文本域的名字**行数或列数***off,soft,hard：不换行、自动换行、强制换行文本域:多行多列的文本输入框<textare下拉列表：从列表中选择一个或多个选项基本语法<selectname=*size=**multiple>

<optgrouplabel=“分组选项类别名">

<optionselectedvalue=**>说明</option><optionvalue=**>说明2</option></optgroup></select>multiple：有该项说明可以选择多项示例

下拉列表：从列表中选择一个或多个选项基本语法表单示例：代码<HTML><HEAD><TITLE>Listing4-2</TITLE></HEAD><BODY><FORMNAME="F1"ACTION="/asp/prc.asp"METHOD="get">//由网站的jsp目录下的prc.jsp程序处理。<INPUTNAME="t1"TYPE="text"VALUE="Thisisatextinput"><BR><INPUTNAME=“p1”TYPE=“password”VALUE=“Apasswordinput”><BR>//控件类型<INPUTNAME="c1"TYPE="checkbox"VALUE="Checkbox1">Thistextisnexttocheckbox1.<BR><INPUTNAME="c2"TYPE="checkbox"VALUE="Checkbox2">Thistextisnexttocheckbox2.<BR><INPUTNAME=“r1”TYPE=“radio”VALUE=“firstradio”>//name值必须一致Thistextisnexttothefirstradiobutton.<BR><INPUTNAME="r1"TYPE="radio"VALUE="secondradio">Thistextisnexttothesecondradiobutton.<BR><INPUTNAME="b1"TYPE="button"VALUE="Justabutton"><BR><INPUTNAME="f1"TYPE="file"VALUE="Thisisafileinput"><BR><INPUTNAME="h1"TYPE="hidden"VALUE="Ahiddeninput"><BR><INPUTNAME="rst"TYPE="reset"VALUE="Aresetbutton"><BR><INPUTNAME="sbt"TYPE="submit"VALUE="Asubmitbutton"><BR><INPUTNAME="i1"TYPE="image"VALUE="AnImage"SRC="a.gif"><BR><TEXTAREANAME=“TA1”COLS=“40”ROWS=“4”WRAP=“soft”>//自动换行的文本域ThistextisinsideTEXTAREA1.Notehowlinesofcodeareautomaticallywrappedandhowlinebreaksinthecodecausebreaks.</TEXTAREA></FORM></BODY></HTML>表单示例：代码<HTML><HEAD>表单示例：图示文本输入框：普通文本文本输入框：密码复选框单选按钮普通按钮文件域重置按钮提交按钮图像域表单示例：图示文本输入框：普通文本文本输入框：密码复选框单选文本域示例：代码<HTML><HEAD><TITLE>Listing4-3</TITLE></HEAD><BODY><FORMNAME="F1"ACTION="/asp/prc.asp"METHOD="GET"><TEXTAREANAME="TA1"COLS="40"ROWS="4"WRAP="soft">ThistextisinsideTEXTAREA1.Notehowlinesofcodeareautomaticallywrappedandhowlinebreaksinthecodecausebreaks.</TEXTAREA><BR><TEXTAREANAME="TA2"COLS="40"ROWS="4"WRAP="off">ThistextisinsideTEXTAREA2.Notehowlinesofcodearenotautomaticallywrappedandhowlinebreaksinthecodecausebreaks.</TEXTAREA><BR><INPUTTYPE="submit"></FORM></BODY></HTML>文本域示例：代码<HTML>文本域示例：图示自动换行的文本域不自动换行的文本域文本域示例：图示自动换行的文本域不自动换行的文本域下拉列表示例：代码<HTML><HEAD><TITLE>Listing4-4</TITLE></HEAD><BODY><FORMNAME="F1"ACTION="/asp/prc.asp"METHOD="get">Selectoneitem:<SELECTNAME="sbt1"><OPTIONVALUE="option1">Textofoption1<OPTIONVALUE="option2"SELECTED>Textofoption2<OPTIONVALUE="option3">Textofoption3<OPTIONVALUE="option4">Textofoption4<OPTIONVALUE="option5">Textofoption5</SELECT><HR>Selectoneitem:<SELECTNAME="sbt2"SIZE="3"><OPTIONVALUE="option1">Textofoption1<OPTIONVALUE="option2"SELECTED>Textofoption2<OPTIONVALUE="option3">Textofoption3<OPTIONVALUE="option4">Textofoption4<OPTIONVALUE="option5">Textofoption5</SELECT><HR>Selectmultipleitems:<SELECTNAME="sbt3"MULTIPLEALIGN="top"><OPTIONVALUE="option1">Textofoption1<OPTIONVALUE="option2"SELECTED>Textofoption2<OPTIONVALUE="option3">Textofoption3<OPTIONVALUE="option4">Textofoption4<OPTIONVALUE="option5">Textofoption5</SELECT><BR><INPUTTYPE="submit"></FORM></BODY></HTML>下拉列表示例：代码<HTML>下拉列表示例：图示显示选中选项，由用户打开列表定位反显选中选项且自动打开列表，用滚动条上下移动定位反显选中选项且自动打开列表，用滚动条上下移动，且可选择多个目标选项：连续选择：按shift键并连续选择目标选项不连续选择：按Ctrl键单击目标选项下拉列表示例：图示显示选中选项，由用户打开列表定位反显选中选2.4CSS技术：数据与表现分离CSS（CascadingStyleSheet，层叠样式表）是一种格式化网页的标准方式，它扩展了HTML的功能，使网页设计者能够以更有效的方式设置网页格式。CSS是一种分离web文档内容与格式的技术，可以控制web文档的外观和版式，使用CSS可以改变：文本的大小、格式、颜色、字间距、边框、元素周围的补白，乃至网页上对象的精确位置。共享样式设定个性化的标准网页：CSS+DIV=web标准？2.4CSS技术：数据与表现分离CSS（Cascading两个简单例子<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><title>使用HTML方式</title></head><body><H1align=center><FONTface="楷体_GB2312">一级标题</FONT></H1><P>...其他正文...</P><H1align=center><FONTface="楷体_GB2312">一级标题</FONT></H1></body></html><!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><STYLE>H1{text-align:center;font-family:楷体_GB2312}</STYLE><title>使用CSS方式</title></head><body><H1>一级标题</H1><P>...其他正文...</P><H1>一级标题</H1></body></html>两个简单例子<!DOCTYPEhtmlPUBLIC"-2.4.1样式表定义语法样式表：也称样式定义，或样式规则，可包含于文档中，也可保存于.css文件中。基本结构为：Selector{property1:value1;property2:value2;property3:value3;……}Selector定义样式作用的对象，称为选择器，花括号中为样式声明块，其中property为CSS属性，value为属性对应的值，各样式声明之间用分号隔开。示例H1{text-align:center;font-family:黑体}选择器样式定义样式属性属性取值2.4.1样式表定义语法样式表：也称样式定义，或样式规则，常用Selector类型HTML标记符用户定义的类用户定义的ID伪类常用Selector类型HTML标记符HTMLSelector不带尖括号的标记名作选择符HTML标记符是最常用的selector，它重新定义了HTML标记符的显示效果。例如：H1{text-align:center;color:red}使所有用H1标记符修饰的内容都居中和用红色显示body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{margin:0;padding:0;border:0;}ul,ol{list-style-type:none;}HTMLSelector不带尖括号的标记名作选择符选择符应用示例基本清单<html><head><title>NewPortRichey</title><styletype="text/css">*{font-family:Verdana}</style></head><body><h2align="center">TheNewPortRicheyDogShow</h2><h4align="center">ShowDate:7/31/2001</h4><h4align="center">NewPortRichey,FL</h4><palign="center"><spanclass="category">BestInShow:</span><spanid="bestinshow">CHSarah'sRazzleDazzle(YorkshireTerrier)</span></p><p><ahref="complete">Completeresults</a></p><tablealign="center"><tr><tdclass="category"><ahref="herding.html">HerdingGroup:</a></td><td>GermanShepherdDog</td><td>CHSabreDawn</td></tr><tr><tdclass="category"><ahref="toy.html">ToyGroup:</a></td><td>YorkshireTerrier</td><td>CHSarah'sRazzleDazzle</td></tr><tr><tdclass="category"><ahref="sporting.html">SportingGroup:</a></td><td>GoldenRetriever</td><td>CHChase'sGoldenChance</td></tr><tr><tdclass="category"><ahref="nonsporting.html">Non-SportingGroup:</a></td><td>TibetanTerrier</td><td>CHWinstonofSunnyBrookLane</td></tr></table></body></html>选择符应用示例基本清单<html><tablealign选择符应用示例基本清单代码运行页面选择符应用示例基本清单代码运行页面标记选择符应用示例清单...<styletype="text/css">*{font-family:Verdana}td{font-size:10pt}</style>...标记选择符应用示例清单...标记选择符应用示例运行结果标记选择符应用示例运行结果Selector:用户定义类.classname{property:value…}表示任何class属性为classname的标记符都采用所定义的样式。类选择符的语法是在类名前面加一个点号（.）类是一种增强页面可管理性的出色方法，因为只需定义和修改样式表，就可以对站点的外观进行全面定义和修改。Selector:用户定义类.classname{prope类选择符应用示例清单...<styletype="text/css">{font-family:Verdana}td{font-size:10pt}.category{font-weight:bold;}td.category{font-style:italic}</style>...类选择符应用示例清单...类选择符应用示例运行结果类选择符应用示例运行结果Selector:用户定义的ID#idname{property:value…}表示任何ID属性为idname的标记符都采用所定义的样式。ID选择符的语法是在类名前面加一个#号（#）用户定义ID与class的作用完全相同，但ID在一个文档中应该是惟一的。Selector:用户定义的ID#idname{properID选择符应用示例...<styletype="text/css">{font-family:Verdana}td{font-size:10pt}.category{font-weight:bold;}td.category{font-style:italic}#bestinshow{color:red}</style>...ID选择符应用示例...ID选择符应用示例运行结果ID选择符应用示例运行结果Selector:伪类伪类的语法是在原有的语法里加上一个伪类（pseudo-class）：selector:pseudo-class{property:value}（选择符:伪类{属性:值}）伪类和类不同，是CSS已经定义好的，不能象类选择符一样随意用别的名字，根据上面的语法可以解释为对象（选择符）在某个特殊状态下（伪类）的样式。常用的伪类:link未访问过的超链接:visited访问过的超链接:hover悬停状态的超链接:active活动超链接Selector:伪类伪类的语法是在原有的语法里加上一个伪类伪类选择符应用示例清单...<styletype="text/css">*{font-family:Verdana}td{font-size:10pt}.category{font-weight:bold;}td.category{font-style:italic}#bestinshow{color:red}:hover{background-color:red}</style>...伪类选择符应用示例清单...伪类选择符应用示例运行结果伪类选择符应用示例运行结果Selector:后代、子、同胞CSS不但允许根据元素名应用规则，还允许根据元素在整个文档中的位置应用规则。例如，一个规则可以只选择段落标记内的链接。继承：嵌套的子对象（嵌套元素）继承外部元素或父元素的格式，除非子对象另有格式定义后代：空格连接子：大于号连接同胞：加号连接Selector:后代、子、同胞CSS不但允许根据元素名应层次结构关系选择符应用示例清单...<styletype="text/css">{font-family:Verdana}td{font-size:10pt}.category{font-weight:bold;}td.category{font-style:italic}#bestinshow{color:red}

pa{text-decoration:none}h4+h4{font-style:italic}:hover{background-color:red}</style>...层次结构关系选择符应用示例清单...后代同胞后代同胞2.4.2样式引用嵌入式样式：内联引用样式表

全局样式表：内部引用链接的格式页：外部引用2.4.2样式引用嵌入式样式：内联引用嵌入式样式使用style属性将样式应用于单个元素上，实现对特定元素的精确控制，优先于样式表控制，可以应用于任何标记，并且只影响所应用的标记style=”单个或以分号分隔的若干样式声明（声明块）”样式声明:属性：属性值<HTML><HEAD><TITLE>Listing11-2</TITLE></HEAD><BODY><SPANSTYLE="font-weight:bold">ThistextisinaSPAN.</SPAN><BR>ThistextisnotinaSPAN.</BODY></HTML>嵌入式样式使用style属性将样式应用于单个元素上，实现对特全局样式表通过将样式表嵌入<head>标记内的<style>标记对内实现，控制文档中相应标记的样式标记的格式<head>…<style>样式表</style></head><HTML><HEAD>全局样式表通过将样式表嵌入<head>标记内的<style><TITLE>Listing11-7</TITLE><STYLE>H1{font-size:16pt;font-weight:bold;color:red}H2{font-style:italic;font-size:24pt;color:green}SPAN{font-weight:bold;font-style:italic}.adiv{height:52px;width:145px}:hover{background-color:red}//本文档悬停状态的超接链的背景色为红色</STYLE></HEAD><BODY><SPAN>ThistextisinaSPAN.</SPAN><H1>ThistextisinanH1.</H1><H2>ThistextisinanH2.</H2><divclass=”adiv”>//本块的高度为52px,宽度为145px<ahref="herding.html">HerdingGroup:</a><ahref="toy.html">ToyGroup:</a></div><H2STYLE=“font-size:36pt”>ThisismodifiedH2text.</H2>//本块的高度为52px，宽度为145px</BODY></HTML><TITLE>Listing11-7</TITLE>全局样式表示例全局样式表示例链接的样式表

以.css为扩展名的包含格式定义的文本文件，可用来控制若干个网页或整web站点的样式。使用方法为在文档的<head>区使用<link>标记引用：H1{font-size:16pt;font-weight:bold;color:red}（styles.css）H2{font-style:italic;font-size:24pt;color:green}SPAN{font-weight:bold;font-style:italic}<HTML><HEAD><TITLE>Listing11-8</TITLE><LINKHREF="styles.css"REL="STYLESHEET"TYPE="text/css"></HEAD><BODY><SPAN>ThistextisinaSPAN.</SPAN><H1>ThistextisinanH1.</H1><H2>ThistextisinanH2.</H2><H2STYLE="font-size:36pt">ThisismodifiedH2text.</H2></BODY></HTML>@import命令:格式页包含命令，即在格式页中加载其它格式页链接的样式表以.css为扩展名的包含格式定义的文本文件，可链接的样式表示例链接的样式表示例2.4.3样式的优先级样式的优先级遵循“就近优先”的原则，也就是说，距离所修饰对象越近的样式，其优先级越高。样式如果冲突，则采用高优先级样式；如果不冲突，则采用叠加的样式效果。2.4.3样式的优先级样式的优先级遵循“就近优先”的原则，2.4.4CSS+DIV：模块化、结构化设计模块化设计要求相对封闭独立性、可重复性、可修改性、统一性等结构化设计的意思是你需要分析网站的内容块，以及每块内容服务的目的，然后再根据这些内容目的建立起相应的HTML结构。

仔细分析和规划你的页面结构，你可能得到类似这样的几块：

标志和站点名称

主页面内容

站点导航(主菜单)

子菜单

搜索框功能区(例如购物车、收银台)

页脚(版权和有关法律声明)

……

2.4.4CSS+DIV：模块化、结构化设计模块化设计要求我们通常采用DIV元素来将这些结构定义出来，例如：

＜div

id=“header”＞＜/div＞

＜div

id=“content”＞＜/div＞

＜div

id=“globalnav”＞＜/div＞

＜div

id=“subnav”＞＜/div＞

＜div

id=“search”＞＜/div＞

＜div

id=“shop”＞＜/div＞

＜div

id=“footer”＞＜/div＞

起类似作用的还有span,通常与类选择符、ID选择符一起使用例：新浪

我们通常采用DIV元素来将这些结构定义出来，例如：

＜新浪DIV示例<DIVid=page><DIVclass=logonav><DIVclass=topads><DIVclass=Partid=PartA><DIVclass=left><DIVclass=rightbox><DIVclass=Partid=PartB><DIVclass=Partid=PartC><!--left

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

温馨提示

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

HTML语言与网页设计课件

文档简介

温馨提示

最新文档

评论

HTML语言与网页设计课件

文档简介

温馨提示

最新文档

评论

相关文档