|
| 校内网涂鸦版教程之CSS入门 |
| 作者:佚名 来源:不详 发布时间:2007-10-14 0:23:19 |
减小字体
增大字体
|
涂鸦攻略系列之——CSS入门篇
此攻略的目的是为了授人以渔,是为那些没有CSS基础,但又想学习这方面知识的同学而写,如果您只是想知道什么样的代码能实现你所想要的效果,那您不必在此浪费时间,到其它帖里去找就是了。如果您是高手或对此知之甚详,也不必在此浪费时间,当然,欢迎大家指出其中的错误和不足。
此教程参考了网上一些文章,结合校内网的实际而写,仅为入门级教程,如果想更深入的学习,请自行查找相关资源。
一、什么是css
1、什么是CSS CSS即Cascading Style Sheet(层叠样式表单)的缩写,我们又常称之为风格样式单Style Sheet,是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。简单来说,就是网页内容由HTML来定义,而网页内容表现出来的样式,如字体,颜色,图片位置等由css来定义。
为什么称样式单为层叠的呢?在你还没有对它有一个较全面的了解前,可打一个不很准确的比喻:如我们评价一个人,需要听取大家的意见再汇总,有人说,这个人诚实,有的说干事踏实,有的说很有责任心.....,这样通过这些意见的“层叠”,就可大体地知道这个人的品质;即使是同样的标志,也可以通过层叠使它们显示出不同的特性来,随着学习的深入,你会发现层叠的具体含义及一些妙用的。
2、css能做些什么 css能做到的会超出很多人的想象,下面给出两个实例 动态光源效果 Glow滤镜 这属于css+js的高级应用了,下面我们从基础开始讲起。
3、如何将样式表加入网页 你可以用以下三种方式将样式表加入您的网页。而越接近目标的样式定义优先权越高。高优先权样式将继承低优先权样式的未重叠定义但覆盖重叠的定义。
a、链入外部样式表文件 (Linking to a Style Sheet) 你可以先建立外部样式表文件(.css),然后使用HTML的link对象。示例如下: <link rel=stylesheet href="http://www.xiaonei.com/css/main.css" type="text/css">
b、定义内部样式块对象 (Embedding a Style Block) 你可以在你的HTML文档的<HTML>和<BODY>标记之间插入一个<STYLE>...</STYLE>块对象。示例如下: <style type=text/css> <!-- A:link{COLOR: #999999;FONT-SIZE:9pt;FONT-FAMILY: 隶书} A:visited{COLOR:#999999;FONT-SIZE:9pt;FONT-FAMILY: 隶书} A:active{COLOR: #999999;FONT-SIZE:9pt;FONT-FAMILY: 隶书} A:hover{COLOR: #999999} body{COLOR:#999999;FONT-SIZE:9pt; FONT-WEIGHT: bolder;FONT-FAMILY:隶书} --> </style>
c、内联定义 (Inline Styles) 内联定义即是在对象的标记内使用对象的style属性定义适用其的样式表属性。示例如下: <p style="margin-left: 0.5in; margin-right:0.5in">这一行被增加了左右的外补丁<p>
前两种方式是我们经常用到的,尤其是第二种方式用得最多,而第三种方式用得相对较少,一般只有在修改涂鸦板内对象属性或自定义的对象属性时才会使用。
二、css入门基础
1、CSS的基本语法 在建立样式表之前,我们必须要具有一些 HTML 的基础知识。我们知道, HTML 语言由标志和属性构成, CSS 也是如此。
样式表基本语法:
HTML 标志 { 标志属性:属性值;标志属性:属性值;标志属性:属性值;…… }
放置样式表有内联和外联等三种不同的方法。现在首先讨论在涂鸦板内直接引用样式表的方法。
这个方法必须把样式表信息包括在 < style> 和 < /style> 标记中。
例如我们要设置页面中所有 H3 标题字显示为红色,其代码如下:
< STYLE TYPE="text/css"> < !-- H3 { color: red } --> < /STYLE>
注意, < STYLE> 标记中包括了 TYPE = "text/css" ,这是让浏览器知道你是使用 CSS 样式规则。加入 < !-- 和 --> 这一对注释标记是防止有些老式的浏览器不认识样式表规则,可以把该部分代码忽略不计。
在使用样式表过程中,经常会有几个标志用到同一个属性,比如我们规定 HTML 页面中凡是粗体字、斜体字、3 号标题字显示为红色,按照上面介绍的方法应书写为:
B { color: red}
I { color: red}
H3 { color: red}
显然这样书写十分麻烦,引进分组的概念会使其变得简洁明了,我们可以写成:
B,I,H3 {color: red}
用逗号分隔各个 HTML 标志,把三行代码合并成一行。
此外,同一个 HTML 标志,可能定义到多种属性,例如,我们规定把从 H1 到 H6 各级标题定义为红色黑体字,带下划线,则应写为:
H1,H2,H3,H4,H5,H6 {
color: red;
text-decoration: underline;
font-family: " 黑体 "
}
注意各个标志属性之间用分号隔开。
2、如何建立样式表 样式表的建立要符合CSS规则,它们一般被定义成以下形式的句法:
HTML标志{标志属性:属性值;标志属性:属性值;标志属性:属性值;标志属性:属性值;...}
下面我们分别讲述: a、HTML标志:在上一节我们已简要地介绍了一下, 有点需要注意的是,这些标志不带尖括号,如P,Div、Table等而不是<>、<Div>以及<Table>。 b、标志属性:属性值,这是一一对应的,每个属性与属性值对之间用分号隔开。有一点要说明的是,在CSS的属性设置与脚本语言中对属性设置有一点不同,即属性名称的写法,在CSS中,凡属性名为两个或两个以上的单词构成时,单词之间以"-"隔开,比如,背景颜色属性background-color, 而在脚本中,对象属性则连写成backgroundColor,第二个单词首字母大写,如有三个单词则第三个单词首字母也要大写,注意,在中,是严格区分大小写的。 下面看一个具体的例子,比如我们对一个H3标题建立一个样式表: H3{background-color:#0000ff;font-size:12pt;color:#ffff00}
上面我们分别设置了背景色,字体大小,以及字体颜色等。 为了看起来直观一些,上边的例子还可以写成: H3{background-color:#0000ff; font-size:12pt; color:#ffff00}
有一点值得注意的是,有些属性可以表示多个属性的值,如字体设置,有字体字样:font-family、字体大小:font-size、字体风格:font-style,这些可用一个font属性来表示, 如:H3{font-size:15pt; font-family:'宋体'; font-style:italic } 可直接用 H3{font:15pt 宋体 italic}来表示。 3、样式类的创建与引用 结合校内网的实际,可以分为两种情况,一种是修改已有内容的属性,另一种是修改自己创建内容的属性。
相关知识点:CSS中Class与ID的区别 一个Class是用来根据用户定义的标准对一个或多个元素进行定义的。打个比较恰当的比方就是剧本:一个Class可以定义剧本中每个人物的故事线,你可以通过CSS,等来使用这个类。因此你可以在一个页面上使用class="Frodo" ,class="Gandalf", class="Aragorn"来区分不同的故事线。还有一点非常重要的是你可以在一个文档中使用任意次数的Class。 至于 ID,通常用于定义页面上一个仅出现一次的标记。在对页面排版进行结构化布局时(比如说通常一个页面都是由一个页眉,一个报头< masthead>,一个内容区域和一个页脚等组成),一般使用ID比较理想,因为一个ID在一个文档中只能被使用一次。而这些元素在同一页面中很少会出现大于一次的情况。 a、已有内容 修改已有内容的属性,我们首先要获得该内容的HTML标识,例如我要修改顶部导航栏里文字的属性,先看一下源文件里关于header的定义: <div id="header"> <h1 id="logo"><a href ="http://xiaonei.com/SysHome.do" title="校内网"><img src ="http://static.xiaonei.com/img/logo.gif" alt="校内网(Logo)" /></a></h1> <p id="tagline"><a href ="http://xiaonei.com/SysHome.do">大学生互动空间</a></p> <div id="utility">你好,<a href ="http://xiaonei.com/BasicInfo.do">李响</a><span class="pipe">|</span><a href ="http://xiaonei.com/info/Help.do">帮助</a><span class="pipe">|</span><a href ="http://xiaonei.com/Logout.do">退出</a></div> <div id="jumpnav"> <h3>跳到:</h3> <ul> <li><a href ="#navigation">导航</a></li> <li><a href ="#content">内容</a></li> <li><a href ="#footer">底部</a></li> </ul> </div> <div id="navigation"> <h3>主导航:</h3> <ul> <li><a href ="http://home.xiaonei.com/Home.do">我的首页</a></li> <li><a href ="http://browse.xiaonei.com/SocialNet.do">随便看看</a></li> <li><a href ="http://school.xiaonei.com/university.do?id=5001">学校</a></li> <li><a href ="http://blog.xiaonei.com/freshblog.do">日志</a></li> <li><a href ="http://photo.xiaonei.com/freshalbum.do">相册</a></li> <li><a href ="http://group.xiaonei.com/RandomTribe.do">群</a></li> <li><a href ="http://event.xiaonei.com/GetEventList.do?univ=5001">活动</a></li> <li><a href ="http://xiaonei.com/Search.do">搜索</a></li> <li><a href ="http://xiaonei.com/Invite.do">邀请</a></li> </ul> </div> </div> 相关知识点:什么是DIV 这个又是一个涵盖比较大的概念,可以在网上搜索一下DIV CSS,简单点说就是DIV是HTML中的一种标签名称,作用是定义一块区域,而
CSS可以用来修饰它。如果把DIV比作一块桌布的话,CSS是剪刀,可以裁减DIV,CSS还可以是画笔,来给这块没有内容的DIV加上图案或修边,网页上说的DIV+CSS是运用这两者来搭建网页的布局,并用CSS加以修饰。 这里面有很多标识符,初学者看了可能会头大,其实一开始我们并不用知道这些标识符都是很么意义,有什么作用,先找到我们要修改的内容,然后再顺藤摸瓜,往上找就行了,在有了一定基础之后,再去研究这些标识符的意义和作用吧。
这里以修改“我的首页”等文字属性为例。在源文件里找到“我的首页”这几个字,我们看到<a href ="http://home.xiaonei.com/Home.do">我的首页</a>的是这样的一行代码,<a></a>表示这是一个链接,接着往上找,<li><ul>这些我们暂时可以不予理会,只看这个链接是包含在哪个id或class内的,这时我们找到了<div id="navigation">,如果再住上找,我们就找到了<div id="header">,这个时候就不必再往上找了,因为这已经是一个功能比较独立的区域 了,接下来就是对这些文字属性的修改,我们先看下main.css里关于header部分的定义
/* Header */ #header { position:relative; width:760px; height:57px; overflow:hidden; font-family:Tahoma, Helvetica, sans-serif;} #header #logo { position:absolute; left:0; top:0; width:132px; height:57px;} #header #tagline { position:absolute; left:132px; top:0; width:628px; height:33px; background:#3b5998 url() 0 0 no-repeat; color:#fff; font-size:14px; text-indent:15px; line-height:33px;} #header #tagline a { color:#fff; text-decorationne;} #accessiblenavigation { displayne;} #utility { position:absolute; right:0; top:0; width:270px; height:33px; padding:0 15px; background:#3b5998 url() 100% 0 no-repeat; color:#d8dfea; text-align:right; line-height:33px;} #utility .pipe { visibility:hidden;} #utility a { color:#d8dfea; text-decorationne;} #utility a:hover { color:#fff;} #navigation { position:absolute; left:132px; top:33px; width:628px; height:23px; border-bottom:1px solid #3b5998; background:#6d84b4; font-family:Arial, Helvetica, sans-serif; font-size:13px;} #navigation h3 { display:none;} #navigation p { padding-left:15px; color:#fff; line-height:24px;} #navigation ul { list-style-type:none; padding-left:5px;} #navigation li { display:inline;} #navigation a { float:left; height:22px; margin-right:3px; padding:1px 11px 0 9px; color:#fff; text-decoration:none; line-height:22px;} #navigation a:hover { height:20px; padding:3px 10px 0; line-height:20px;} /*.widthHeader #navigation { background:#6d84b4 url ) 72% 50% no-repeat;}*/ .widthHeader #navigation { background:#6d84b4} 相关知识点:关于main.css和home.css 这两个是校内网个人页面预定义的两个css样式表,用的是链入外部样式表文件的方式 这两个文件内容是不同的,大体上说,main.css是从总体上定义页面的样式,而home.css是一些细节部分的样式
下载地址: http://static.xiaonei.com/css/main.css http://static.xiaonei.com/css/home.css
这是服务器端预定义的样式,我们要做的就是在涂鸦板内通过css代码来自定义它的样式,我们从上往下找,看一下main.css里关于a的定义,我们找到这样一行代码 #navigation a { float:left; height:22px; margin-right:3px; padding:1px 11px 0 9px; color:#fff; text-decoration:none; line-height:22px;} 这里是预定义的内容,我们可以套用这个模式,修改我们想要修改的内容,比如我们要修改这些字的颜色,大小,字体,那么就可以用下面的代码修改 #navigation a { color:文字颜色; font-size:文字大小; font-family:字体; }
main.css和home.css里已经预定义的内容,我们可以参照着来修改,没有定义的,找到相应的html标识符,参考其它对象的定义修改即可。
b、自定义内容
自定义内容多指一些放在涂鸦板内的文字,图片等,当然,我们也可以通过绝对定位使其定位到页面任意位置。
这里面的对象属性修改起来比较灵活,因为在这里我们不仅可以用css来定义,也可以使用html来定义,比如下面的代码 <font color=#009999 ; face="隶书" ; size=3.5>我是文字</font> 这就是用html语法来定义的文字属性,而下面的代码 <div style="position:absolute;Top:1000px;left:266px;width:100px;">我是文字</div> 就是用css来定义的,也可以两种结合着用 <div style="position:absolute;Top:1000px;left:266px;width:100px;"><font color=#009999 ; face="隶书" ; size=3.5>我是文字</font></div> 如果想用html来定义对象,而用css来修改其属性,就上面例子而言,可以这样做 <div id="myfont">我是文字</div> <style type=text/css><!--#myfont{ position:absolute; Top:1000px; left:266px; width:100px; color:red; font-size:15px; font-family:隶书; ;}--></style>
当然,在大多数情况我不用上面这种形式,怎么方便,怎么写代码比较精简就怎么写即可。
三、相关知识及技巧
1、如何写外部样式表文件 内部样式代码如下 <style type=text/css> <!-- A:link{COLOR: #999999;FONT-SIZE:9pt;FONT-FAMILY: 隶书} A:visited{COLOR:#999999;FONT-SIZE:9pt;FONT-FAMILY: 隶书} A:active{COLOR: #999999;FONT-SIZE:9pt;FONT-FAMILY: 隶书} A:hover{COLOR: #999999} body{COLOR:#999999;FONT-SIZE:9pt; FONT-WEIGHT: bolder;FONT-FAMILY:隶书} --> </style> 如果想把它写到外部样式文件内,然后用第一种方式链入,去掉代码前后的标识符,保留中间的功能代码即可 A:link{COLOR: #999999;FONT-SIZE:9pt;FONT-FAMILY: 隶书} A:visited{COLOR:#999999;FONT-SIZE:9pt;FONT-FAMILY: 隶书} A:active{COLOR: #999999;FONT-SIZE:9pt;FONT-FAMILY: 隶书} A:hover{COLOR: #999999} body{COLOR:#999999;FONT-SIZE:9pt; FONT-WEIGHT: bolder;FONT-FAMILY:隶书}
2、读代码 看完这篇攻略,也许你还不会去写代码,因为那需要经验的积累的,但是我希望你至少能做到会读,很多经验都是由别人那里借鉴来的,下面说一下读代码的方法吧。
随便找个代码 <style type=text/css><!--#userAlbum{display:none;} --></style> 通过以上的讲解,我们知道 < STYLE> 标记中包括了 TYPE = "text/css" ,这是让浏览器知道你是使用 CSS 样式规则。加入 < !-- 和 --> 这一对注释标记是防止有些老式的浏览器不认识样式表规则,可以把该部分代码忽略不计。所以这些都是标记,我们可以不理会,而#userAlbum{display:none;}是功能代码,我们先看一下#userAlbum,“#”告诉我们,这个html标识符在源文件里是一个id,那么我们可以在源文件里搜索一下,可以找到<div class="box" id="userAlbum">,看一下它后面的内容,我们知道这是相册部分,而display:none;实现的功能就是把相册部分隐藏。
接下来我们就可以举一反三,尝试着去写了,既然相册的隐藏代码是这个,那么与处于同一级的日志部分我们就可以参照着写出来了,在源文件里搜索一下“××的日志”,可以找到它上面的一行代码<div class="box" id="userBlog">,那么隐藏日志的代码就可以这么写 <style type=text/css><!--#userBlog{display:none;} --></style>
3、关于标记 html和css是弱标记性语言(可能说法不是很准确,以前在书上看过这方面的术语,记不清了),简单说就是它是大小写不敏感的,结束标识符也不是强制要求的,举个例子 <style type=text/css><!--#userBlog{display:none;} --></style> 这行代码,代用下面几种方式写都是可用的 <STYLE type=text/css><!--#userBlog{display:none;} --></STYLE> <STYLE type=text/css><!--#userBlog{display:NONE;} --></style> <style type=text/css><!--#userBlog{display:none;} --> 但是不推荐最后一种写法,这样平时应用是可用的,但是与其它代码一起使用时就可能会出问题,所以最好是带上结束标识符。
4、常用CSS缩写语法总结
使用缩写可以帮助减少你CSS文件的大小,更加容易阅读。css缩写的主要规则如下:
颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如: #000000可以缩写为#000;#336699可以缩写为#369;
盒尺寸 通常有下面四种书写方法:
property:value1; 表示所有边都是一个值value1; property:value1 value2; 表示top和bottom的值是value1,right和left的值是value2 property:value1 value2 value3; 表示top的值是value1,right和left的值是value2,bottom的值是value3 property:value1 value2 value3 value4; 四个值依次表示top,right,bottom,left 方便的记忆方法是顺时针,上右下左。具体应用在margin和padding的例子如下: margin:1em 0 2em 0.5em;
边框(border) 边框的属性如下:
border-width:1px; border-style:solid; border-color:#000; 可以缩写为一句:border:1px solid #000;
语法是border:width style color;
背景(Backgrounds) 背景的属性如下:
background-color:#f00; background-image:url(background.gif); background-repeat:no-repeat; background-attachment:fixed; background-position:0 0; 可以缩写为一句:background:#f00 url(background.gif) no-repeat fixed 0 0;
语法是background:color image repeat attachment position;
你可以省略其中一个或多个属性值,如果省略,该属性值将用浏览器默认值,默认值为:
color: transparent image: none repeat: repeat attachment: scroll position: 0% 0% 字体(fonts) 字体的属性如下:
font-style:italic; font-variant:small-caps; font-weight:bold; font-size:1em; line-height:140%; font-family:"Lucida Grande",sans-serif; 可以缩写为一句:font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;
注意,如果你缩写字体定义,至少要定义font-size和font-family两个值。
四、应用举例
1、拒绝单调,让网页超链接拥有多姿多彩的下划线
首先,自定义HTML链接下划线的第一步是创建一个图形,在水平方向重复放置这个图形即形成下划线效果。如果要显示出下划线背后的网页背景,可以使用透明的.gif图形。
其次,如果下划线图形的高度较大,则必须适当增加文本的高度,使得一行文本的底部与下一行文本的顶部之间有较大的空间,例如p { line-height: 1.5; }。
第三,为显示出自定义的下划线,必须隐藏默认的下划线,即a { text-decoration: none; }。
第四,为链接元素设置下划线图形,构造出自定义的下划线。假设下划线图形是underline.gif,则设置下划线图形的CSS代码为a { background-image: url(underline.gif); }。
第五,我们要让下划线图形在水平方向反复出现,但不能在垂直方向重复出现,否则它将被隐藏到文本的背后。要求下划线只在水平方向重复出现的代码为:a { background-repeat: repeat-x; }。
第六,为保证图形出现在链接文字的下方(不管字体的大小),用background-position属性将图形放在链接元素的底部。对于箭头之类的下划线图形,可能还要考虑图形在水平方向的对齐方向。假设要将下划线图形放在右下角,CSS代码为:a { background-position: 100% 100%; }。
第七,为了在链接文本的下方给自定义图形留出空间,必须加入适当的空白。下划线图形相对于链接文字的具体位置与文字的大小有关,但一般而言,可以先让底部空白等于下划线图形的高度,必要时再作调整。例如:a { padding-bottom: 4px; }。
第八,由于下划线图形放在链接元素的底部,必须保证链接不折行(如允许链接跨越多个行,则只有下面一行的链接文本下面会有自定义的下划线)。用CSS的white-space属性可以防止链接文字折行,即a { white-space: nowrap; }。
综上所述,为链接元素定义CSS样式属性的完整例子如:
a { text-decoration: none; background: url(underline.gif) repeat-x 100% 100%; padding-bottom: 4px; white-space: nowrap; }
如果要让自定义下划线只在鼠标停留时出现,只要把原来直接设置在链接元素上的CSS background属性改到:hover ,例如:
a { text-decoration: none; padding-bottom: 4px; white-space: nowrap; }
a:hover { background: url(underline.gif) repeat-x 100% 100%; }
实例如下: 下划线
2、css导航栏 在写导航栏——flash的时候,就有了写导航栏——css篇的想法了,不过由于时间的关系,一直没有写,其实只运用css也可以实现很酷的效果的,而且速度要比flash快,实例如下 Glow滤镜 个人页面左侧导航栏的css修饰代码如下,可以放到涂鸦板里看下效果 <style type=text/css><!--#sidebar {z-index:1; position:absolute;; left:100px; top:50px;}#sidebar{width: 130px; margin: 10px; }#sidebar li{border:0px; }#sidebar li a { voice-family: "\"}\""; voice-family: inherit; height: 24px; text-decoration: none; margin-right :5px}#sidebar li a:link, #sidebar li a:visited { color: #CCC; display: block; background: url(); padding: 8px 0 0 10px; }#sidebar li a:hover { color: #FFF; background: url() 0 -32px; padding: 8px 0 0 10px; }--></style>
五、附录
html标记总览 文件标记 <HTML> 文件声明 让浏览器知道这是 HTML 文件 <HEAD> 开头 提供文件整体资讯 <TITLE> 标题 定义文件标题,将显示于浏览顶端 <BODY> 本文 设计文件格式及内文所在
排版标记 <!--注解--> 说明标记 为文件加上说明,但不被显示 <> 段落标记 为字、画、表格等之间留一空白行 <BR> 换行标记 令字、画、表格等显示于下一行 <HR> 水平线 插入一条水平线 <CENTER> 居中 令字、画、表格等显示于中间 反对 <RE> 预设格式 令文件按照原始码的排列方式显示 <DIV> 区隔标记 设定字、画、表格等的摆放位置 <NOBR> 不折行 令文字不因太长而绕行 <WBR> 建议折行 预设折行部位
字体标记 <STRONG> 加重语气 产生字体加粗 Bold 的效果 <B> 粗体标记 产生字体加粗的效果 <EM> 强调标记 字体出现斜体效果 <I>斜体标记 字体出现斜体效果 <TT> 打字字体 Courier字体,字母宽度相同 <U> 加上底线 加上底线 反对 <H1> 一级标题标记 变粗变大加宽,程度与级数反比 <H2> 二级标题标记 将字体变粗变大加宽 <H3> 三级标题标记 将字体变粗变大加宽 <H4> 四级标题标记 将字体变粗变大加宽 <H5> 五级标题标记 将字体变粗变大加宽 <H6> 六级标题标记 将字体变粗变大加宽 <FONT> 字形标记 设定字形、大小、颜色 反对 <BASEFONT>基准字形标记 设定所有字形、大小、颜色 反对 <BIG> 字体加大 令字体稍为加大 <SMALL> 字体缩细 令字体稍为缩细 <STRIKE> 画线删除 为字体加一删除线 反对 <CODE> 程式码 字体稍为加宽如<TT> <KBD>键盘字 字体稍为加宽,单一空白 <SAMP> 范例 字体稍为加宽如<TT> <VAR> 变数 斜体效果 <CITE> 传记引述 斜体效果 <BLOCKQUOTE> 引述文字区块 缩排字体 <DFN> 述语定义 斜体效果 <ADDRESS>地址标记 斜体效果 <SUB> 下标字 指数 <SUP>下标字 下标字
清单标记 <OL> 顺序清单 清单项目将以数字、字母顺序排列 <UL>无序清单 清单项目将以圆点排列 <LI>清单项目 每一标记标示一项清单项目 <MENU>选单清单 清单项目将以圆点排列,如<UL> 反对 <DIR> 目录清单 清单项目将以圆点排列,如<UL> 反对 <DL>定义清单 清单分两层出现 <DT> 定义条目 标示该项定义的标题 <DD> 定义内容 标示定义内容
表格标记 <TABLE> 表格标记 设定该表格的各项参数 <CAPTION> 表格标题 做成一打通列以填入表格标题 <TR> 表格列 设定该表格的列 <TD> 表格栏 设定该表格的栏 <TH> 表格标头 相等于<TD>,但其内之字体会变粗
表单标记 <FORM> 表单标记 决定单一表单的运作模式 <TEXTAREA> 文字区块 提供文字方盒以输入较大量文字 <INPUT> 输入标记 决定输入形式 <Select> 选择标记 建立 pop-up 卷动清单 <OPTION> 选项 每一标记标示一个选项
图形标记 <IMG> 图形标记 用以插入图形及设定图形属性
连结标记 <A> 连结标记 加入连结 <BASE> 基准标记 可将相对 URL 转绝对及指定连结目标
框架标记 <FRAMESET> 框架设定 设定框架 <FRAME> 框窗设定 设定框窗 <IFRAME> 页内框架 于网页中间插入框架 IE <NOFRAMES> 不支援框架 设定当浏览器不支援框架时的提示
影像地图 <MAP> 影像地图名称 设定影像地图名称 <AREA> 连结区域 设定各连结区域
多媒体 <BGSOUND> 背景声音 于背景播放声音或音乐 IE <EMBED> 多媒体 加入声音、音乐或影像
其他标记 <MARQUEE> 走动文字 令文字左右走动 IE <BLINK> 闪烁文字 闪烁文字 NC <ISINDEX> 页内寻找器 可输入关键字寻找于该一页 反对 <META> 开头定义 让浏览器知道这是 HTML 文件 <LINK> 关系定义 定义该文件与其他 URL 的关系
StyleSheet <STYLE> 样式表 控制网页版面 <span> 自订标记 独立使用或与样式表同用
|
|
|
[]
[返回上一页]
[打 印]
|
|
|
| 文章评论 (评论内容只代表网友观点,与本站立场无关!) |
|
|
|
|