ROCKLV个人主页空间 - 宣扬个性的主页空间

(X)HTML/CSS教程

XHTML/HTML/CSS教程

HTML 語法介紹
CSS快速入门
XHTML标准规范

HTML 語法介紹

<A HREF TARGET> 指定超連結的分割視窗
<A HREF=#錨的名稱> 指定錨名稱的超連結
<A HREF> 指定超連結
<A NAME=錨的名稱> 被連結點的名稱
<ADDRESS>....</ADDRESS> 用來顯示電子郵箱地址

<B> 粗體字
<BASE TARGET> 指定超連結的分割視窗
<BASEFONT SIZE> 更改預設字形大小
<BGSOUND SRC> 加入背景音樂
<BIG> 顯示大字體
<BLINK> 閃爍的文字
<BODY TEXT LINK VLINK> 設定文字顏色
<BODY> 顯示本文
<BR> 換行

<CAPTION ALIGN> 設定表格標題位置
<CAPTION>...</CAPTION> 為表格加上標題
<CENTER> 向中對齊
<CITE>...<CITE> 用於引經據典的文字
<CODE>...</CODE> 用於列出一段程式碼
<COMMENT>...</COMMENT> 加上註解

<DD> 設定定義列表的項目解說
<DFN>...</DFN> 顯示"定義"文字
<DIR>...</DIR> 列表文字標籤
<DL>...</DL> 設定定義列表的標籤
<DT> 設定定義列表的項目

<EM> 強調之用

<FONT FACE> 任意指定所用的字形
<FONT SIZE> 設定字體大小
<FORM ACTION> 設定戶動式表單的處理方式
<FORM METHOD> 設定戶動式表單之資料傳送方式
<FRAME MARGINHEIGHT> 設定視窗的上下邊界
<FRAME MARGINWIDTH> 設定視窗的左右邊界
<FRAME NAME> 為分割視窗命名
<FRAME NORESIZE> 鎖住分割視窗的大小
<FRAME SCROLLING> 設定分割視窗的捲軸
<FRAME SRC> 將HTML檔加入視窗
<FRAMESET COLS> 將視窗分割成左右的子視窗
<FRAMESET ROWS> 將視窗分割成上下的子視窗
<FRAMESET>...</FRAMESET> 劃分分割視窗

<H1>~<H6> 設定文字大小
<HEAD> 標示文件資訊
<HR> 加上分格線
<HTML> 文件的開始與結束

<I> 斜體字
<IMG ALIGN> 調整圖形影像的位置
<IMG ALT> 為你的圖形影像加註
<IMG DYNSRC LOOP> 加入影片
<IMG HEIGHT WIDTH> 插入圖片並預設圖形大小
<IMG HSPACE> 插入圖片並預設圖形的左右邊界
<IMG LOWSRC> 預載圖片功能
<IMG SRC BORDER> 設定圖片邊界
<IMG SRC> 插入圖片
<IMG VSPACE> 插入圖片並預設圖形的上下邊界
<INPUT TYPE NAME VALUE> 在表單中加入輸入欄位
<ISINDEX> 定義查詢用表單

<KBD>...</KBD> 表示使用者輸入文字

<LI TYPE>...</LI> 列表的項目 ( 可指定符號 )

<MARQUEE> 跑馬燈效果
<MENU>...</MENU> 條列文字標籤
<META NAME="REFRESH" CONTENT URL> 自動更新文件內容
<MULTIPLE> 可同時選擇多項的列表欄

<NOFRAME> 定義不出現分割視窗的文字

<OL>...</OL> 有序號的列表
<OPTION> 定義表單中列表欄的項目

<P ALIGN> 設定對齊方向
<P> 分段
<PERSON>...</PERSON> 顯示人名
<PRE> 使用原有排列

<SAMP>...</SAMP> 用於引用字
<SELECT>...</SELECT> 在表單中定義列表欄
<SMALL> 顯示小字體
<STRIKE> 文字加橫線
<STRONG> 用於加強語氣
<SUB> 下標字
<SUP> 上標字

<TABLE BORDER=n> 調整表格的寬線高度
<TABLE CELLPADDING> 調整資料欄位之邊界
<TABLE CELLSPACING> 調整表格線的寬度
<TABLE HEIGHT> 調整表格的高度
<TABLE WIDTH> 調整表格的寬度
<TABLE>...</TABLE> 產生表格的標籤
<TD ALIGN> 調整表格欄位之左右對齊
<TD BGCOLOR> 設定表格欄位之背景顏色
<TD COLSPAN ROWSPAN> 表格欄位的合併
<TD NOWRAP> 設定表格欄位不換行
<TD VALIGN> 調整表格欄位之上下對齊
<TD WIDTH> 調整表格欄位寬度
<TD>...</TD> 定義表格的資料欄位
<TEXTAREA NAME ROWS COLS> 表單中加入多少列的文字輸入欄
<TEXTAREA WRAP> 決定文字輸入欄是自動否換行
<TH>...</TH> 定義表格的標頭欄位
<TITLE> 文件標題
<TR>...</TR> 定義表格美一行
<TT> 打字機字體

<U> 文字加底線
<UL TYPE>...</UL> 無序號的列表 ( 可指定符號 )

<VAR>...</VAR> 用於顯示變數

CSS快速入门

　　在当今的网页制作中，几乎所有漂亮的网页都用了CSS。 CSS是 Cascading Style Sheet的缩写，有些书上把它译为 “层叠样式表”。有了CSS的控制，我们的网页便会给人一种赏心悦目、工工整整的感觉，同时字体的色彩变化也使主页变得更加生动活泼。虽然只短短的十几行代码，得到的效果却不同凡响。其基本用法是在网页中插入如下格式的一段代码：
　　下面以一段比较典型的CSS代码为例介绍其具体用法。
　　例：这段代码中间的部分共七行，可看出有这样的特点：前两行的格式分别为P {……} 和 TD {……} 。后五行均是 A:命令词 {……} 的格式。其中前两行的作用是对网页文字的字体、大小、颜色等的控制，而后五行则是对链接的色彩及下划线的控制。
　　1.文字控制
　　例中的前两行:
　　P {FONT－FAMILY: 宋体; FONT－SIZE: 9pt; LINE－HEIGHT: 12pt; color:＃000000} TD {FONT－FAMILY: 宋体; FONT－SIZE: 9pt} 说明：FONT－FAMILY:宋体;(指定网页文字的字体) FONT－SIZE:9pt;（指定网页文字的字号大小，pt是表示大小的单位）LINE－HEIGHT:12pt;（指定行与行的垂直距离，即行高）color:＃000000（指定网页文字的颜色，＃000000 代表黑色，为十六进制数）TD {FONT－FAMILY:宋体;FONT－SIZE:9pt}（对网页表格里的文字进行控制）
　　2.链接色彩变化及下划线的控制
　　例中的后5行说明：
　　A:hover {BACKGROUND－COLOR: ＃ffccff; COLOR: ＃0080ff}
　　(hover表示鼠标指示时,链接文字背景色为＃ffccff;前景色为＃0080ff)
　　A:link {color:＃000000;TEXT－DECORATION: none}
　　(link表示未被访问时,链接颜色为黑色,链接无下划线.)
　　A:visited {color:gray;TEXT－DECORATION: none}
　　(visited表示被访问后,链接颜色为灰色,链接无下划线.)
　　A:active {color:green;text－decoration: none}
　　(active表示鼠标点击时,链接颜色为绿色,链接无下划线.)
　　A:hover {TEXT－DECORATION: underline}
　　(hover表示鼠标指示时,链接显示下划线)
　　注释：
　　none——没有下划线
　　underline——下划线
　　overline——上划线
　　line－through——中划线
　　以上是比较典型的一段CSS代码，代码中的参数值可随意更换调试。有了CSS的预先设置，你会发现制作网页变得更轻松了。

一个外部的样式表可以通过HTML的LINK元素连接到HTML文档中:
<LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen>

一个样式表可以使用STYLE元素在文档中嵌入:
<STYLE TYPE="text/css" MEDIA=screen>

</STYLE>

一个样式表可以使用CSS的@import 声明被输入。这个声明用于一个CSS文件或内部的STYLE元素:
<STYLE TYPE="text/css" MEDIA="screen, projection">

</STYLE>

样式可以使用STYLE属性内联。STYLE属性可以应用于任意BODY元素(包括BODY本身)，除了BASEFONT、PARAM和SCRIPT。这个属性将任何数量的CSS声明当作自己的值，而每个声明用分号隔开。以下是一个例子:
<P STYLE="color: red; font-family: 'New Century Schoolbook', serif"> 这段的样式是红色的New Century Schoolbook字，如果字体可用的话。</P>

CLASS属性用于指定元素属于何种样式的类。例如，样式表可以加入punk和warning类:
.punk { color: lime; background: #ff80c0 }
P.warning { font-weight: bolder; color: red; background: white }
这些类可以使用CLASS属性在HTML中引用:
<H1 CLASS=punk>属性扩展</H1>
<P CLASS=warning>一些属性扩展会有负值的边效果，产生于支持和不支持的浏览器上...

ID属性用于定义一个元素的独特的样式。一个CSS规则如
#wdg97 { font-size: larger }
可以通过ID属性应用到HTML中:
<P ID=wdg97>欢迎访问Web Design Group及TV water 168!</P>
整个文档当中的每个ID属性的值都必须是唯一的。其值必须是一个以字母开头紧接字母、识字或连字符。字母限于A-Z和a-z。

SPAN元素被加入到HTML中以允许网页制作者给出样式但无须附加在一个HTML的结构元素上。SPAN在样式表中作为一个选择符使用，而且它也能接受STYLE、CLASS和ID属性。

SPAN是一个内联元素，所以它可以作为HTML中的元素如EM和STRONG使用。最重要的差别在于虽然EM和STRONG带有结构的意义，但SPAN就没有这样的意义。它的存在纯粹是应用样式，所以当样式表失效时它就没有任何的作用。

一些SPAN例子如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>SPAN的例子</TITLE>
<STYLE TYPE="text/css" MEDIA="screen, print, projection">

</STYLE>
</HEAD>
<BODY>
<P><SPAN CLASS=firstwords>The first few words</SPAN>前面是
段落中少数的文字，会是小型大写字母。样式也可以内联，如改变文
字的样式为<SPAN STYLE="font-family: Arial">Arial</SPAN>.</P>

DIV元素在功能上与SPAN元素相似，最主要的差别在于DIV ("division"，"部分"的简称)是一个块级元素。DIV可以包含段落、标题、表格甚至其它部分。这使DIV便于建立不同集成的类，如章节、摘要或备注。例如:

<DIV CLASS=note>
<H1>Divisions/部分</H1>
<P>DIV元素在HTML 3.2中有定义，但HTML 3.2中只有ALIGN属性能兼容。HTML 4.0在属性中加入CLASS、STYLE、和ID属性。</P>
<P>因为DIV可以包含其他块级集成，在用于建立文档的大型章节例如本备注是很有用的。</P>
<P>要求关闭标记。</P>
</DIV>

XHTML标准规范

1.所有的标记都必须要有一个相应的结束标记
以前在HTML中，你可以打开许多标签，例如<p>和<li>而不一定写对应的</p>和< /li>来关闭它们。但在XHTML中这是不合法的。XHTML要求有严谨的结构，所有标签必须关闭。如果是单独不成对的标签，在标签最后加一个 "/"来关闭它。例如:

<br /><img height="80" alt="网页设计师" src="../images/logo_w3cn_200x80.gif" width="200" />
2.所有标签的元素和属性的名字都必须使用小写
与HTML不一样，XHTML对大小写是敏感的，<title>和<TITLE>是不同的标签。XHTML要求所有的标签和属性的名字都必须使用小写。例如：<BODY>必须写成<body> 。大小写夹杂也是不被认可的，通常dreamweaver自动生成的属性名字"onMouseOver"也必须修改成"onmouseover"。

3.所有的XML标记都必须合理嵌套
同样因为XHTML要求有严谨的结构，因此所有的嵌套都必须按顺序，以前我们这样写的代码：

<p><b></p>/b>
必须修改为：

<p><b></b>/p>
就是说，一层一层的嵌套必须是严格对称。

4.所有的属性必须用引号""括起来
在HTML中，你可以不需要给属性值加引号，但是在XHTML中，它们必须被加引号。例如:

<height=80>
必须修改为：

<height="80">
特殊情况，你需要在属性值里使用双引号，你可以用"，单引号可以使用'，例如：

<alt="say'hello'">
5.把所有<和&特殊符号用编码表示
任何小于号（<），不是标签的一部分，都必须被编码为& l t ;
任何大于号（>），不是标签的一部分，都必须被编码为& g t ;
任何与号（&），不是实体的一部分的，都必须被编码为& a m p;
注：以上字符之间无空格。

6.给所有属性赋一个值
XHTML规定所有属性都必须有一个值，没有值的就重复本身。例如：

<td nowrap> <input type="checkbox" name="shirt" value="medium" checked>
必须修改为：

<td nowrap="nowrap"> <input type="checkbox" name="shirt" value="medium" checked="checked">

7.不要在注释内容中使“--”
“--”只能发生在XHTML注释的开头和结束，也就是说，在内容中它们不再有效。例如下面的代码是无效的:



用等号或者空格替换内部的虚线。



以上这些规范有的看上去比较奇怪，但这一切都是为了使我们的代码有一个统一、唯一的标准，便于以后的数据再利用。