文档库

最新最全的文档下载
当前位置:文档库 > HTML语言 基础

HTML语言 基础

第1讲 HTML语言 基础

第1讲 HTML语言 基础
=============
·了解HTML的一些背景知识
-·什么是HTML和网页文件

http://www.wendangku.net/doc/b46bed7402020740be1e9bba.html

1)HTML是英文HyperText Markup Lanuage(超文本标记语言)的缩写。
2)以“<标签名>”表示标签的开始,以“”表示标签的结束。
3)成对标签又称为容器,一对标签中还可以嵌套其他的标签。
4)单独标签不需要与之配对的结束标签,又称之为空标签,例如:

5)一个HTML标签及标签中嵌套的内容就是网页中的一个“HTML元素”。
6)属性设置的一般格式为:属性名=属性值,属性值部分可以用英文的双
引号(")或单引号(')引起来,也可以不使用任何引号。

-·HTML规范与版本
1)不同的浏览器之间的不兼容问题。
2)为了兼容问题,制定了规范。
最初又IETF组织制定规范,后来它转交给了W3C。
最新的也是最终的版本:HTML 4.01,不会再有新的版本了,因为将由XHTML
来取代,不过过渡时间会很长。

-·IETF与W3C组织
1)IETF
Internet Engineering Task Force(Internet工程任务组),由网络设计人员、
操作员、厂商、专家组成的民间组织,主要负责有关Internet的各种技术标准及
接口规范的制定,其网址为http://www.wendangku.net/doc/b46bed7402020740be1e9bba.html。IETF以RFC(Request for
Comments,请求注释文档)定 名所有发布的各类标准与协议,例如:RFC2616
(HTTP/1.1)、RFC(MIME)。
2)W3C
World Wide Web Consorttium(习惯称之为WWW联盟)于1994年成立,是
与WEB有关的企业机构成立的业界同盟,其网址为http://www.wendangku.net/doc/b46bed7402020740be1e9bba.html。W3C
目前的成员仅限于团体和组织,只要缴纳一定的费用,并签署一份保证遵守规则
的成员协议,任何公司均可加入。W3C对WEB的便准握有生杀大权,负责研究、
审定、发布、管理有关WEB的标准,例如,HTML、CSS等。

·文档类型定义(Document Type Definition,DTD),也是指定XML制定的DTD文件的。
语法:
-·HTML:指定文档类型的名字。
-·PUBLIC:表明所依据的DTD文件可对任何人公开访问,而不是某个公司内部的规
范文件。
-·"version name":指定HTML版本的标识名称。
例如:HTML 4.0 的标识名称为"-//W3C//DTD HTML 4.01 Transitional//EN"。对
于ISO标准的DTD以“ISO”开头;被改进的非ISO标准的DTD以加号“+”开头;未
被改进的非ISO标准的DTD以减号“-”开头。
-·url:指定该HTML语言的定义规范文件在Internet上的位置。
例如:http://www.wendangku.net/doc/b46bed7402020740be1e9bba.html/TR/html4/loose.dtd
loose.dtd:包含HTML 4.01要求的以及不包含的元素。

strict.dtd:严格按HTML 4.01要求使用的元素。
frameset.dtd:严格按HTML 4.01要求使用的元素,以及frameset(框架)和连接目
标的元素。

·注释与特殊字符:
-·用
-·特殊字符可以用“数值码”和“引用实体”两种方式表示。例如:©、©
『< < | > > |& & | " " | ® 注册 | © 版权
| ™ TM |   空格』
quot;的使用情况:
注意:如何显示上面的特殊字符呢:&< =》通过&显示出了<

·一些标签的介绍:
注意:在标签中不能使用注释,因为注释的右尖括号会被认为是标签的结束符。
1)段落:


2)换行:
(根据规范应该使用

3)不换行:
4)缩进显示文本:
,可嵌套实现缩进再缩进
5)居中显示:

6)移动显示:
它有两个属性behavior(值slide、scroll、alternate),direction(值up、down、
left、right)
7) 定义列表:

软件产品

windows

linux

硬件产品

CPU

内存


8)无序列表
以及有序列表

9)预格式化

10)标题标签:

……

11)粗体:、斜体: 下划线
12)上标: 、下标:
13)打印机风格:、引用:、强调:
加重:
14)字体相关设置:
被设置的文本


·超连接标签:
1)超链接文本 包含超链接的文件叫“超链接源”,href所指定
的网页文件叫“超链接目标”。
2)邮件的连接:
CaoChangBo
3)指定目标打开方式:target属性,值:_blank、_parent、_self
4)定义“锚点”(好像应该加上“/”结尾),通过
to Mark连接次锚点
5)一个连接自己的超链接:自己,其实它指向了文档的开头
6)一个连接为空超链接:
本地:将打开目录;
WWW上:将打开目录默认页面;

·URL(Uniform Resource Locator)统一资源定位符
1)指向目录、对象……
2)组成:协议、主机名、端口号、资源名
3)相对URL,只包括资源(/index.html、../style.css父目录……../../父目录的父目
录),需要 基准URL 的路径
4)为URL指定参数:http://www.wendangku.net/doc/b46bed7402020740be1e9bba.html/get.html?name=ccb&age=24,
参数开头用“?”,之间用“&”隔开
5)带有定位标记的URL:例如:http://www.wendangku.net/doc/b46bed7402020740be1e9bba.html/index.html#secti

on2,
连接网页的锚点
6)URL编码:使用的协议……后面讲解
7)mailto URL:例如:mailto:fantasyccb@http://www.wendangku.net/doc/b46bed7402020740be1e9bba.html?subject=主题&body=主体
20%内容(空格必须使用20%)

·URL编码:
-·规则:
1)将空格转换为加号(+)
2)对0-9,a-z,A-Z之间的字符保持不变
3)对于所有其他的字符,用整个字符的当前字符集编码在内存中的十六进制格
式表示,并在每个字节前加上
一个百分号(%)。如字符“+”用%2B表示,字符“=”用%3D表示,字符“&”
用%26表示,每个中文字符在内存
中占两个字节,字符“中”用%D6%D0表示,字符“国”用%B9%FA表示。
4)对于空格也可以直接使用其十六进制编码方式,即用%20表示,而不是将它转
换成加号(+)。
-·说明:
1)如果确信URL串的特殊字符没有引起使用上的歧义或冲突,你也可以对这些字
符不进行编码,而是直接传递
给服务器。例如:
http://www.wendangku.net/doc/b46bed7402020740be1e9bba.html/index.html?name=中国&area=960
2)如果URL串中的特殊字符可能会产生歧义或冲突,则必须对这些特殊字符进行
URL编码。例如,服务器会将
不编码的“中+国”当作“中 国”处理。还例如,当name参数值为“中&国”,
如果不对其中的“&”编码,
URL字符串有如下形式:
http://www.wendangku.net/doc/b46bed7402020740be1e9bba.html/index.html?name=中&国&area=960
上面的“国”作为了另一个参数!应编码为:
http://www.wendangku.net/doc/b46bed7402020740be1e9bba.html/index.html?name=中%26国&area=960
“&”对应的编码为“%26”。
3)http://www.wendangku.net/doc/b46bed7402020740be1e9bba.html/blog/index.html#section2中
“blog/index.html#section2”是传递给服务器的参数,只需给它编码就可
以,可以写成:
http://www.wendangku.net/doc/b46bed7402020740be1e9bba.html/blog%2Findex.html%23section2"。
!对于服务器端的程序需要考虑编码问题,而前端网页设计人员一般不给服务
器传递参数,不用考虑URL编码。

·图象标签:
1)标签,src属性指定图象的(相对或绝对URL),还可以设置alt气球信息、
align格式、border边框、……
例如:本站logo
可以用于通过第三方提供的站点访问计数器功能的计数图片显示功能:

2)


不现实阴影
属性:noshade

·图象地图:(热点)
-·图象超链接:
-·解释:把一个图象分成多个区域,实现区域图象的多个超链接(多个热点)。
-·实现:
1)创建图象热点映射:通过
2)划分热点区域:(nohref为不连接) target="目标打开方式" />。
通过手动来实现不方便,一般都通过IDE环境来创建,如Dream

waver、http://www.wendangku.net/doc/b46bed7402020740be1e9bba.html
3)指定图象:定义好图象热点映射后,然后在中添加“usemap”属性来
指向被调用的“图象映射地图”名称,
名称前也加“#”,例如:
完整例子:
-------------------------------------------------------------------------------------------------






-------------------------------------------------------------------------------------------------
其中热点形状有:
1)rect矩形 coords设置左上角、右下角坐标(4个参数)。
2)poly多边形 coords设置各个顶点的坐标(n个左边)。
3)circle圆形 coords设置圆心坐标、半径(3个参数)。

============================================
完 2006-12-23 16:37:53


第2讲 HTML语言 高级

第2讲 HTML语言 高级
=============
一、【表格标签】:
1、表格:


属性:背景颜色:bgcolor、边框宽度:border、边框颜色:bordercolor、
边框明亮部分的颜色:bordercolorlight、边框灰暗部分颜色:bordercolordark、
各个单元格之间的大小:cellspacing、单元格边框与内容间隔大小:cellpadding、
表格宽度:width、表格高度:height(高和宽可设置为px象素和%百分比)、
水平格式:align(left、center、right)。

2、表格-行:
属性:水平格式:align(left、center、right)、
垂直格式:valign(top、middle、bottom)、
行背景颜色:bgcolor。(覆盖table同类属性“局部变量有效”)

3、表格-一行种的一列:(单元格)
属性:单元格宽度:width(如果各单元格百分比之和大于100,那么多于的百分比
将平均分配给每个单元格,height类似)、单元格高度:height、水平格式:align、
垂直格式:valign、单元格占的列数:colspan、单元格占的行数:rowspan、
禁止单元格中过长内容的换行显示(它没有值,写上就生效):nowrap(单元格内
容过长,会以“-”、空格“ ”、中文等特殊字符 进行换行,通过上面的属性可以
禁止这一效果)。
!!一个 问题:当单元格内容过长,会使表格撑大!(后面讲解的CSS来解决!)

4、和功能相同,只是它显示为“粗体”!
5、用于像是表格的标题!它必须放在后面紧接着!


*************************************************************************************************


二、【分帧的作用】
就是通过框架标签frame显示多个窗口,每个窗口中都可以显示一个独立的网页文件。
1、举例:
主文件:index.html
框架集: 1)上面框架:top.html
2)下面框架-左:left.html(连接right两个网页文件)
3)下面框架-右:right1.html、right2.html
源码:
1)index.html:
-------------------------------------------------------------------------------------------------







-------------------------------------------------------------------------------------------------
2)top.html:
-------------------------------------------------------------------------------------------------

这是顶部的网页文件

-------------------------------------------------------------------------------------------------
3)left.html:
-------------------------------------------------------------------------------------------------

这是左边的网页文件


显示右边的第一个文档


显示右边的第二个文档


-------------------------------------------------------------------------------------------------
4)right1.html:
-------------------------------------------------------------------------------------------------
这是第一个右边的网页文件!
-------------------------------------------------------------------------------------------------
5)right2.html:
-------------------------------------------------------------------------------------------------
这是第二个右边的网页文件!
-------------------------------------------------------------------------------------------------

2、框架集:frameset标签中不能潜入body对等其他标签中,否则框架不能显示;
而且它也不能潜入到body标签对中,是无效的!
frameset的属性:行分割:rows,列分割:cols
1)它们的取值为象素、百分比、*(剩余大小为一个帧,如果多个*,那么将剩余
大小平均分配给这几个*指定的帧),用“逗号”分割。
2)同时设置这两个属性:将按照从左到右,从上到下的顺序分割!rows X cols
个窗口。
3)还有属性:border(设置边框宽度)、frameborder(边框是否显示,默认
为1:显示,还有 0:不显示,也可以使用yes和no来代替1和0)。
3、帧(窗口)frame标签:
属性: src:显示的网页文件URL;
name:帧窗口命名,用户指定target;
scrolling:指定帧窗口带滚动条;
noresize:指定帧窗口不能手动改变大小;

4、的target属性:
指定“帧窗口名称”或是“内定的名称:_blank

、_parent、_self、_top“。
1)_blank:在一个新窗口打开连接。
2)_parent:在当前帧的直接帧父窗口(它的框架集)打开连接。(在帧窗口
才有效)
3)_self:在自身窗口打开连接(不指定target属性时的默认值)。
4)_top:在当前帧的顶部窗口(所有帧的父框架集)打开连接。(在帧窗口才
有效)
!!要注意的是,带有框架集的网页显示在一个帧窗口中时,_parent和_top就
不是上面的样子了!这个框架集的_parent是那个显示它的帧frame了!

5、标签对用在不支持框架的浏览器中,在它中放入其他标签(如body)。<br><br>6、<iframe>标签对,可以在普通网页中显示一个简单的帧窗口(画中画的效果),不需<br>要放在框架集中,它的属性与frame的属性类似。举个例子:<br>-------------------------------------------------------------------------------------------------<br><a href="http://www.wendangku.net/doc/b46bed7402020740be1e9bba.html" target="iframeTest">CCB' Home</a><br><iframe src="index.html" name="iframeTest"></iframe><br>-------------------------------------------------------------------------------------------------<br>上面的代码实现一个连接在iframe中显示http://www.wendangku.net/doc/b46bed7402020740be1e9bba.html内容。<br>-------------------------------------------------------------------------------------------------<br>*************************************************************************************************<br>三、【表单】<br>1、<form></form>标签对:<br>包括form在内,每个表单元素都有name和value属性,用来指定元素的名字和值,没有指定name属性的<br>表单元素(如“提交按钮”),它的value值就不会被提交!<br>-·属性:<br>1)action:设置接受和处理浏览器递交的表单内容的服务器程序的URL,这个URL 也可以<br>设置mailto协议,提交表单信息作为E_mail信息发送出去(调用当前系统中的邮 <br>件发送程序,并作为标题、内容等);如果没有设置action属性,或是设置为<br>“空“,那么作为默认设置(当前页面的URL)。<br>2)method:定义浏览器将表单中的信息提交给服务器端的处理程序的方式,取值 可以为: <br>GET(没有设置method属性的默认值)或POST。<br>1】GET: 将表单提交信息作为URL传递,放在URL上,<br>格式:参数1=参数值1&参数3=参数值2……,<br>数据量:长度大小由URL长度决定,1K Byte大小。<br>2】POST: 将表单提交信息作为HTTP的实体内容发送给服务器,地址栏URL中就<br>没有参数信息)。<br>数据量:比GET方式大得多。<br>3)target:指定服务器返回结果显示得目标窗口或目标帧。<br>4)title:当访问者的鼠标在表单上的任意位置停留时候,弹出气球提示的“文本”。<br>5)enctype(encode type):指示浏览器传送给服务器的表单数据的编码方法。有两个值:<br>1】application/<br></p><p>x-www-form-urlencoded(默认值)。<br>2】multipart/form-data:上传数据时使用!<br>一般不设置它,除非第二种情况。<br><br>2、表单字段元素(它们必须放在form标签对中间)<br>1)提交按钮:<input type="submit" name="submit1" /><br>表单必须有至少一个提交按钮来提交信息。如果指定多个提交按钮,之<br>后被点击的提交按钮的信息和表单其他元素的信息被提交。<br>2)重置按钮:<input type="reset" /><br>恢复表单元素的默认值,它的值不会被提交给服务器。<br>3)单行文本框:<input type="text" /><br>属性: size:字符个数来显示宽度,大概的值;<br>maxlength:最大输入的字符数目;<br>readonly:可获得焦点,并复制值,但不能手动直接输入修改,可以通<br>过JavaScript来编程修改了;<br>disabled:文本框变为灰色无效,表单就不存在这个字段元素了(就是<br>说它不被提交给服务器),不能获得焦点,仍可通过脚本更<br>改;<br>4)复选按钮:<input type="checkbox" /><br>属性: checked:不需要赋值,存在既有效;<br>value:复选框的值,不指定的话,默认为on。<br>5)单选按钮:<input type="radio" /><br>通常分组使用,只有一个能被选择,通过相同的name值,不同的value来处理。<br>属性: check:来指定被选择的,注意一组的只能有一个被指定这选项。<br>value:获得单选的值。<br>6)复选框:<input type="hidden" /><br>说明:隐藏的字段元素,但它的name和value会被发送出去,可以用来预设<br>一些数据,一遍传输这些数据。<br>应用:第二个表单接受第一个表单数据后,提交自己的数据同时,通过隐藏<br>元素传递接受到的第一个表单的数据。<br>7)密码框:<input type="password" /><br>说明:它是文本框的变体。<br>注意:它也作为参数传递,为了不暴露它的值,要使用POST方式传参。<br>8)按钮:<input type="button" /><br>说明:普通类型的按钮。<br><br>9)上传文件(一个文本框和一个浏览文件的按钮)<input type="file" /><br>说明:使用GET方式提交的是文件名称;如果上传文件的内容,必须使<br>用POST方式,enctype设置为multipart/form-data方式,这样文件名<br>以及文件内容被取出,用于上传。<br><br>10)图象元素:<input type="image" /><br>说明:通过src属性指定图片,这样它就没有value属性了,可以代替提交按钮,<br>图象的imageName.x,imageName.y坐标会一起传送给服务器。<br><br>11)下来列表框(或可复选的):<select><option></option></select><br>属性:<select>:<br>multiple:可以复选;(写上生效)通过Ctrl多选。<br>size=?:项目显示的条数,默认为1。<br><option>:<br>value:有select的name=这个value提交,如果没有设置value,将<br>提交option标签对之间的文本内容提交。<br>selected:默认选择项。<br>通常<br></p><p>设置一个“不选择”的选项。value=“”空值。<br>12)多行文本框:<textarea></textarea><br>属性:cols:列数、 rows:行数(字符数目)<br>它没有默认value属性,但可以在标签对中插入文本为默认内容。<br>13)<label>通过快捷键激活某个控件:<br>方法: (1)for属性来指定值为控件的id值;<br>(2)accesskey属性值来指定快捷键(通过Alter加快捷键)。<br>举例:<br>-------------------------------------------------------------------------------------------------<br><table><br><tr><td valign="top"><br><label for="txt" accesskey="t">提出意见(<u>t</u>):</label><br></td><br><td><br><textarea id="txt" cols=20 rows=5>asdfdasfdsfas</textarea><br></td></tr><br></table><br>-------------------------------------------------------------------------------------------------<br>*************************************************************************************************<br>四、【头元素】<br>指位于<head></head>标签对之间的元素。主要包括:<br>·<title>网页标题</title><br>·<base>用于指定网页中的超链接的基准地址,以改变网页中所有使用相对<br>地址的URL的基准地址。<br>属性:<br><base href="http://www.wendangku.net/doc/b46bed7402020740be1e9bba.html" target="_blank"><br>href:设定网页中所有使用HTTP协议的相对URL地址的基准地址,<br>若网页中有如:<a href="index.html"></a>这样的超<br>链接,它不会象没有使用<base>时那样表示当前网页相<br>同目录下的index.html,而是指向了<br>http://www.wendangku.net/doc/b46bed7402020740be1e9bba.html/index.html页面。<br>target:设定该网页中所有的超链接显示的目标窗口,可以省去了<br><a href="">中的target属性了(当然你要使她们的目标<br>窗口一致的话)。<br>·<link>定义了当前文档和另一个文档或资源之间的关系。<br>属性: href:包含另一个文件的URL地址,必须填写。<br>rel与rev:之间的关系,连接类型,必须包含一种。<br>rel:连接源在当前文档中定义,这时href指定连接目标。<br>rev:连接目标在当前文档中定义,这时href指定连接源。<br>取值: Contents:作为表格出现。<br>Index:提供了一个当前文档的索引。<br>Glossary:提供了一个当前文档的词汇表。<br>Copyright:是当前文档的版权语句。<br>Next:指向的是文档系列中的下一个文档。<br>Previous:指向文档系列中的上一个文档。<br>Start:一套组合文档中的第一个文档, <br>告诉搜索引擎,哪个文档是这<br>套文档的起始文档。<br>Help:对当前文档提供帮助的文档。<br>Bookmark:指向一个是当前文档的书签。<br>Stylesheet:是当前文档的样式表。<br>例如:<link rel="Stylesheet" type="text/css" href="URL"><br>说明,因为不是只有css可以指定文档格式,所以要type指定css。<br>Alternate:连接一个是当前文档不同版本的文档<br></p><p>。一般<br>和language使用,来指定不同语言版本的文<br>档。<br>Shortcut Icon:网页的图标,替换浏览器默认的图标。<br>通过href连接ico文件(16X16)。<br>一般不做软件的特殊需要,除了Stylesheet和Shortcut Icon之外不<br>常用。<br>title:可选,描述与目标资源之间的关系。<br>type:目标资源的类型(MIME),<br>例如:type="text/css"、type="text/javascript"。<br>media:目标接受的介质类型,如果屏幕、打印机。<br>值: screen:输出到计算机屏幕。(默认值)<br>print:打印机。<br>projection:投影机。<br>aural:扬声器。<br>braille:感觉设备(共盲人使用的)。<br>tty:电传打字机。<br>tv:电视机。<br>all:所有设备。<br>如果指定多个,使用“,”隔开。<br>·<meta><br>包含网页文件的有关信息。<br><br><br>------------------------------------------------------------------------------------------------<br>*************************************************************************************************<br>五、【meta】<br>·有两种类型<meta>,用不同的属性名来划分,这两种属性名为:name和http-equiv。<br>1)<meta name="某个设置值" content="对该设置进行具体补充说明的信息"><br>2)<meta http-equiv="某个设置值" content="对该设置值进行具体补充说明的信息"><br><br>·name属性用于在网页中加入一些关于网页的描述信息,例如:网页的关键字(可供<br>网页搜索引擎机器人查找、分类)、网页的描述信息等。<br>·http-equiv属性用于在HTML文档中模拟HTTP协议的响应消息头,例如:告诉浏览器<br>是否缓存网页、使用什么样的字符集来显示网页内容、隔多长时间自动刷新网页等等。<br><br>-----------<br>·name属性值:<br>1)Keywords:<br>告诉搜索机器人(Robots,Spider)搜索关键字以及Content提供的关键字内容。多个关键字<br>用逗号隔开。<br>例如:<meta name="keywords" content="vc,java,培训"><br><br>2)Description:<br>告诉Robot把Content内容作为网页的简要描述添加到搜索引擎数据库中。<br>例如:<meta name="description" content="本网站提供……"><br>搜索引擎会把这段内容放在搜索结果超链接下面,如果没有指定,会显示网页的头几行内容。<br><br>3)Robots:<br>根据Content的值来决定Robots的行动方式。<br>值: 【1】(不)允许搜索并收录这个页面:index(noindex);<br>【2】(不)允许搜索引擎顺着这个页面的超链接往下搜索:follow(nofollow);<br>【3】对于index和follow都(不)允许:all(none)。<br><br>4)Generator:<br>编辑本网页的IDE工具名称;<br><br>5)Author:<br>作者;<br><br>6)Copyright:<br>版权生命;<br><br>---------<br><br>http-equiv:<br>值: <br>1)Content-Type:指定MIME类型.<br>例如:<meta http-equiv="Content-Type" content="text/html;charse<br></p><p>t=gb2312"><br>说明:文档为html格式,gb2312编码格式。<br><br>2)Refresh:刷新网页,或指定时间跳到指定的网页上去;<br>例如:<meta http-equiv="Refresh" content="1;url=http://www.wendangku.net/doc/b46bed7402020740be1e9bba.html"><br>说明:打开网页1秒钟后跳到http://www.wendangku.net/doc/b46bed7402020740be1e9bba.html这里。<br>注意:<meta >放在body中也生效,并且执行到这条语句是起作用。(尤其是论坛的留<br>言中,必须评比它们,比如把左右的尖括号改为特殊字符:lt;gt;就没有问题了)<br><br>3)Expires头:设定网页缓存的到期时间!<br>content中指定GMT格式的时间文本!如果设置为0,可以禁止浏览器使用缓存页面。<br>例如:<meta http-equiv="Expires" content="Mon,12 May 2001 00:20:00 GMT"><br><br>4)Windows-Target:固定在某个窗口显示.<br>例如:避免被别人的网站作为frame引用:<br><meta http-equiv="Windows-Target" content="_top">必须显示在最顶层的窗口。<br><br>5)Pragma头:禁止缓存页面;<br>例如:<meta http-equiv="Progma" content="no-catche">.<br><meta http-equiv="Catche-Control" content="no-catche">这比上面的更可靠!<br><br>6)Page-Enter和Page-Exit:<br>进入界面和退出页面所采用的特殊效果。<br>例如:<br>进入页面的特殊效果:<br><meta http-equiv="Page-Enter" content="revealTrans(Transition=23,Duration=1.000)"><br><br><br>------------------------------------------------------------------------------------------------<br>*************************************************************************************************<br>六、【分区标签】<br><br>·区域块:<div></div><br>1)可以用来组合其他的html元素。<br>2)但不能嵌套在段落元素中,例如:<p><div>bb</div>cc</p>的结果是不确定的。<br><br>·专用于CSS和客户端脚本编程用<span></span><br>例如: 要将文本“ZhangSan”中的前半部分“Zhang”单独选取出来,就可以<br>使用<span>Zhang</span>San.<br>文本级的定义元素。<br><br>·div和span显著的区别:<br><div>aaa</div>bbb <!--显示在两行了--><br><br /><br><span>aaa</span>bbb <!--显示和没有使用一样--><br><br>·下面的内容很好的说明了它们的区别:<br><div><br><span class="name">Name:</span>zxx<br><span class="tel">Telephone:</span>010-********<br><span class="email">Email:</span>zxx@http://www.wendangku.net/doc/b46bed7402020740be1e9bba.html<br></div><br><br>------------------------------------------------------------------------------------------------<br>*************************************************************************************************<br>【思考与实践】<br><br>1、描述表格标签的作用,分析http://www.wendangku.net/doc/b46bed7402020740be1e9bba.html网站首页是如何使用表格标签来控制页面布局的,<br>画出其中各个表格标签在网页中的位置和嵌套关系。<br><br>2、用一个框架集将网页文档划分成两个水平方向上的帧窗口,这两个帧窗口的宽度固定为640<br>个象素。如果浏览器在800×600的显示器分辨率下最大化显示,这两个帧窗口的总宽度将是800<br>个象素,而不是640个象素。<br></p><p>有什么方法让这两个帧窗口以640个象素的宽度,在浏览器文档窗口<br>的水平方向上居中显示呢?<br><br>3、结合<table>表格标签和<form>表单标签,设计一个用户注册界面。<br><br>4、描述<meta>标签的http-equiv属性的作用。<br><br>------------------------------------------------------------------------------------------------<br>============================================<br>完 2006-12-23 16:37:53<br><br><br>第3讲 CSS<br><br>第3讲 CSS<br>=============<br>一、【何为层叠样式表】<br>CSS是Cascading Style Sheets的简写,它除了可以轻松设置网页元素的显示位置和格式外,<br>甚至还能产生虑镜,图象淡化,网页淡入淡出的渐变效果。简而言之,CSS就是对网页的显示<br>效果实现与Word一样的排版控制。<br><br>************************************************************************************************<br>二、【设置CSS的几种方式】:<br>【1】内联样式表(Inline styles):<br>CSS代码写在标签的style属性值中:<br>如: <body style="background-color:rgb(255,0,0)"></body><br><meta http-equiv="Content-Style-Type" content="text/css"><br><br>【2】嵌入样式表(Embedded style sheets):建议在head标签对中写上。<br><head><br><style type="text/css" media="screen,projection"><br><!--<br>p { font-size:20pt; }<br>--><br></style><br></head><br>说明: 为了让不支持<style>标签的浏览器能够使用,加上了注释符,但支持的浏览器<br>会正常识别。<br>格式: selector{property:value; property:value; ...}<br>selector:当定义一条样式规则时,必须指定受这条样式规则作用的网页元素,在<br>一条规则中定义的网页元素就是selector(选择器),也就是选择该样式规则作<br>用于的网页元素。(选择器分三类:标签,ID,类)<br>property:指定那些将要被修改的样式名称,既CSS属性,如color、font-size等。<br>value:赋给property的值,既CSS属性值。<br><br>【3】外部样式表(Linked style sheets):<br>说明: 将CSS代码写在一个“.css”中,通过下面的代码包含它:<br><link rel="StyleSheet" href="style.css" type="text/css" media="screen">放在head中。<br><br>【4】输入样式表(imported style sheets):<br>说明: 可以使用CSS的 @import 声明将一个外部样式表文件(CSS文件)输入到另外一个CSS文件<br>中,被输入的CSS文件中的样式规则定义语句就成为了输入到CSS文件的一部分。也可以使用<br>@import声明将一个CSS文件输入到网页文件的<style></style>标签中,被输入的CSS文件<br>中的样式规则定义语句就成了<style></style>标签对中的语句。<br>举例: <style type="text/css" media="screen,projection"><br><!--<br>@import url("http://www.wendangku.net/doc/b46bed7402020740be1e9bba.html");<br>p { color:yellow }<br>--><br></style><br>如果@import放在前<br></p><p>面,后面定义的CSS规则就会覆盖调@import输入的规则。<br>************************************************************************************************<br>三、【样式规则的选择器】<br>【1】HTML selector:直接定义HTML元素。<br>举例: p { color:red }<br>【2】Class selector:实现同一种元素的分类。<br>举例1: <style><br>P.stop { color:red }<br>P.warning { color:yellow }<br>P.normal { color:green }<br></style><br><p class="stop">paragraph1</p><br><p class="warning">paragraph2</p><br><p class="normal">paragraph3</p><br>说明1: 上面的样式规则支队P标签指定class属性的有效,<br>这种称作“关联Class”。<br>举例2: <style><br>.blueone { color:blue }<br></style><br>说明2: 上面的样式规则对HTML中指定class属性为blueone的元素都有效,<br>这种称作“独立Class”。<br>【3】ID selector:ID属性用来定义某一个特定的HTML元素,一个网页文件中只能有<br>一个元素能使用某一ID属性值,ID Selector就是为样式规则定义语句<br>选择具有某一ID属性值的HTML元素。<br>举例: <span id="yellowone">text here<span><br><style><br>#yellowone { color:yellow }<br></style><br>经验总结:-·ID Selector只能为单个HTML标签元素设置样式规则,因此具有一定<br>的局限性,在CSS中应该尽量少用。JavaScript和CSS-P可以根据这个ID<br>值来操作和定位这个特定的HTML标签,所以ID属性在JavaScript中会广<br>泛使用。<br>-·CSS-P:是CSS的一个扩展,用来控制任何HTML标签元素的样式。<br>-·如果网页只在某种媒体介质上输出时,才需要对单个元素进行演示设置<br>的话,应该使用ID Selector代替直接设置HTML元素的Style属性的内联样<br>式表。<br>-·在网页中使用了嵌入和链接样式表后,对某个元素的显示效果需要对样<br>式表中已定义的相关样式重新设定,这就要用到内联样式表来直接设置HTML<br>元素的style属性。<br>【4】关联选择器:是指一个用空格隔开的两个或更多的单一选择器组成的字符串,<br>例如:P EM{ background:yellow }<br>其中的“P EM”就是关联选择器,它表示段落中的强调文本(<em></em><br>标签对中的内容)的背景为黄色,而其他地方出现的强调文本则不受影响。<br>关联选择器定义的样式规则的优先权比单一选择器定义的样式规则的优先权高(局部变<br>量),即使在<br>P EM{ background:yellow }<br>的后面 部分定义了如下样式规则:<br>EM{ background:green }<br>但是,在段落标签(<p>)中定义的强调文本仍用黄色背景。<br>【5】组合选择器:为了减少样式表的重复声明,可以在一条样式规则定义语句中组合若干个选<br>择器,每个选择器之间用逗号(,)隔开,<br>例如:h1, h2, h3, h4, h5, h6, td { color:red; }<br>【6】伪元素选择器:是指对同一个HTMl元素<br></p><p>的各种状态和其所包括的部分内容的一种定义方式。<br>例如,对于超链接标签(<a></a>)的正常状态(没有任何动作前)、访问郭的状态、<br>选中状态、光标移到链接文本上的状态,对于段落的首字符和首行,都可以使用伪元素<br>选择器来定义。<br>-·使用伪元素作为选择器的样式规则定义格式:<br>HTML元素:伪元素{ 属性:值 }<br>-·常用的伪元素(l-v-h-a顺序才能保证都正常工作):<br>a:link:超链接的正常状态(没有任何动作时),<br>a:visited:访问过的超链接状态,<br>a:hover:光标移动到超链接上的状态,<br>a:active:选中超链接时的状态,<br>p.first-line:段落中的第一行文本,<br>p.first-letter:段落中的第一个字符。<br>-·类选择器与伪元素一起使用的格式:<br>HTML元素 . 类名 : 伪元素 { 属性:值 }<br>************************************************************************************************<br>四、【样式规则的注释与有效范围】<br><br><br><br><br><br>************************************************************************************************<br><br><br>============================================<br>完 2006-12-23 16:37:53<br><br><br>第3讲<br><br>第3讲<br>=============<br>一、【】:<br>1、<br><br>************************************************************************************************<br>-------------------------------------------------------------------------------------------------<br><br>============================================<br>完 2006-12-23 16:37:53<br><br><br>第3讲<br><br>第3讲<br>=============<br>一、【】:<br>1、<br><br><br>-------------------------------------------------------------------------------------------------<br><br>============================================<br>完 2006-12-23 16:37:53<br><br><br>第3讲<br><br>第3讲<br>=============<br>一、【】:<br>1、<br><br><br>-------------------------------------------------------------------------------------------------<br><br>============================================<br>完 2006-12-23 16:37:53<br><br><br><br></p> </div> </div> <div id="downcontainer"></div> <div class="adbottom"><script type="text/javascript">bdasync('u5589834',1);</script></div> <div class="about"> <h2><a href="#">TOP</a>相关主题</h2> <ul class="clearfix"><li><a href="/search/html%e8%af%ad%e8%a8%80%e5%9f%ba%e7%a1%80.html" target="_blank">html语言基础</a></li><li><a href="/search/html%e8%af%ad%e8%a8%80%e5%9f%ba%e7%a1%80%e7%9f%a5%e8%af%86.html" target="_blank">html语言基础知识</a></li><li><a href="/search/html%e5%9f%ba%e7%a1%80%e8%af%ad%e8%a8%80%e6%95%99%e7%a8%8b.html" target="_blank">html基础语言教程</a></li><li><a href="/search/%e7%ac%ac%e4%ba%8c%e8%ae%b2html%e8%af%ad%e8%a8%80%e5%9f%ba%e7%a1%80.html" target="_blank">第二讲html语言基础</a></li><li><a href="/search/%e7%bd%91%e9%a1%b5%e5%88%b6%e4%bd%9c%e5%9f%ba%e7%a1%80%e8%af%ad%e8%a8%80html.html" target="_blank">网页制作基础语言html</a></li></ul> </div> </div> <div class="category"> <h2 class="navname">推荐阅读:</h2> <ul class="lista"> <li><a href="/doc/456dc30b763231126edb11a3.html" target="_blank">高二文科数学周周清(5)</a></li><li><a href="/doc/b116cd595122aaea998fcc22bcd126fff6055d7a.html" target="_blank">峨眉山五分钟导游词</a></li><li><a href="/doc/056c55eedc36a32d7375a417866fb84ae55cc3f2.html" target="_blank">三分钟童话故事1:小树叶童话3篇</a></li><li><a href="/doc/e956d0d528ea81c758f578d7.html" target="_blank">文始真经白话文</a></li><li><a href="/doc/91ed46badcccda38376baf1ffc4ffe473268fdf8.html" target="_blank">人教新起点小学英语六年级下册《Unit 2 All around me》PPT课件 (2)</a></li><li><a href="/doc/6a7cebe226fff705cc170a94.html" target="_blank">消费者行为学试题及答案[1]</a></li><li><a href="/doc/61801fca64ce0508763231126edb6f1afe007127.html" target="_blank">粤教版高中物理选修3-2课件章末整合1</a></li><li><a href="/doc/7a88528f6d85ec3a87c24028915f804d2a16876d.html" target="_blank">幼儿园中班活动区游戏优秀教学案例:《有趣的管子》</a></li><li><a href="/doc/129e9bc108a1284ac850434a.html" target="_blank">外国文学简答题 (3)</a></li><li><a href="/doc/c49a0f4552d380eb63946d42.html" target="_blank">单级离心泵装配的标准、要求和步骤</a></li><li><a href="/doc/12258c150b4e767f5acfce69.html" target="_blank">祝桥B地块商业项目</a></li><li><a href="/doc/5b281d84d4d8d15abe234e2a.html" target="_blank">十二顺序查找和二分查找</a></li><li><a href="/doc/cb050721aaea998fcc220ed9.html" target="_blank">Protel原理图PCB到Cadence的数据转换</a></li><li><a href="/doc/4529ab78a216147917112884.html" target="_blank">城市管理重点</a></li><li><a href="/doc/a4bb4dcf65ce05087732133f.html" target="_blank">共筑幼儿安全防火墙</a></li><li><a href="/doc/fa298506e718964bcf84b9d528ea81c759f52e46.html" target="_blank">常用的种安全评价方法对比</a></li><li><a href="/doc/ecb90fce3c1ec5da51e2704e.html" target="_blank">2016毛中特考点总结:挡在过渡时期的总路线</a></li><li><a href="/doc/acd348a0534de518964bcf84b9d528ea81c72f1a.html" target="_blank">广东药学院公共关系课程复习资料</a></li><li><a href="/doc/186ab517af02de80d4d8d15abe23482fb4da0236.html" target="_blank">西游记有感_西游记读后感600字</a></li><li><a href="/doc/92e52362cd22bcd126fff705cc17552707225ead.html" target="_blank">旅游景区广告语</a></li><li><a href="/doc/070ca04c67ec102de2bd89cf.html" target="_blank">sensor_data</a></li><li><a href="/doc/f04aad604b7302768e9951e79b89680202d86b7b.html" target="_blank">2018酒店社会实践报告</a></li><li><a href="/doc/3499404227fff705cc1755270722192e4436581e.html" target="_blank">傅雷家书读后感_400字</a></li><li><a href="/doc/ae24f8659a89680203d8ce2f0066f5335b81676e.html" target="_blank">英语人教版四年级下册U3 weather</a></li><li><a href="/doc/4b1109ad4b35eefdc9d3334d.html" target="_blank">Free Hugs 自由拥抱</a></li><li><a href="/doc/36d3139351e79b89680226aa.html" target="_blank">宿舍卫生安全检查表</a></li><li><a href="/doc/0e641cd033d4b14e852468ea.html" target="_blank">推销学考试题</a></li></ul> </div> </div> <script type="text/javascript"> var did='b46bed7402020740be1e9bba'; var downblock = ''; if(downblock!="") document.getElementById("downcontainer").innerHTML=downblock; </script> <div class="footer"> <p><a href="/tousu.html" target="_blank">侵权投诉</a> &nbsp;&copy; 2013-2016 www.wendangku.net &nbsp;<a href="/sitemap.html">站点地图</a>&nbsp;|&nbsp;<a href="http://m.wendangku.net">手机版</a></p> <p>本站文档均来自互联网及网友上传分享,本站只负责收集和整理,有任何问题可通过上访投诉通道进行反馈</p> </div> <script type="text/javascript">foot();</script> </div> </body> </html>