① 在dreamweaver中的CSS樣式中,vlink,alink,link和a:link什麼區別
他們的區別
1、類
:定義的時候前面必須加點(.),格式是.xxx,可以在一個頁面中調用多次。類一般就設文字顏色什麼的。
2、標簽:標簽就是body、table、h3……之類的網頁裡面的標簽,可以直接選擇定義樣式,網頁裡面的就會隨之變化的。標簽就是背景什麼的。
3、高級:
高級定義的方式可以在前面加(.)或者(#),加點就是和類差不多,在前面加#的話就是id調用,比如定義#top,那麼在調用的時候就是<div
id="top"></div>。記住#top只能調用一次。這點跟類不一樣。就是一些鏈接什麼的
alink
是a:active設置的是正在訪問超鏈接的顏色!
vlink
是a:visited設置的是已經訪問的超鏈接的顏色!
a:link是未訪問的鏈接的顏色
② web 是什麼意思
web(World Wide Web)即全球廣域網,也稱為萬維網,它是一種基於超文本和HTTP的、全球性的、動態交互的、跨平台的分布式圖形信息系統。
是建立在Internet上的一種網路服務,為瀏覽者在Internet上查找和瀏覽信息提供了圖形化的、易於訪問的直觀界面,其中的文檔及超級鏈接將Internet上的信息節點組織成一個互為關聯的網狀結構。
Web就是一種超文本信息系統,Web的一個主要的概念就是超文本鏈接。它使得文本不再像一本書一樣是固定的線性的,而是可以從一個位置跳到另外的位置並從中獲取更多的信息。
還可以轉到別的主題上。想要了解某一個主題的內容只要在這個主題上點一下,就可以跳轉到包含這一主題的文檔上。正是這種多連接性把它稱為Web。
web的特點:
1、圖形化
Web 非常流行的一個很重要的原因就在於它可以在一頁上同時顯示色彩豐富的圖形和文本的性能。在Web之前Internet上的信息只有文本形式。Web可以提供將圖形、音頻、視頻信息集合於一體的特性。
2、與平台無關
無論用戶的系統平台是什麼,都可以通過Internet訪問WWW。瀏覽WWW對系統平台沒有什麼限制。無論從Windows平台、UNIX平台、Macintosh等平台我們都可以訪問WWW。
對WWW的訪問通過一種叫做瀏覽器(browser)的軟體實現。如Mozilla的Firefox、Google的Chrome、Microsoft的Internet Explorer等。
3、分布式的
大量的圖形、音頻和視頻信息會佔用相當大的磁碟空間,我們甚至無法預知信息的多少。對於Web沒有必要把所有信息都放在一起,信息可以放在不同的站點上,只需要在瀏覽器中指明這個站點就可以了。在物理上並不一定在一個站點的信息在邏輯上一體化,從用戶來看這些信息是一體的。
4、動態的
由於各Web站點的信息包含站點本身的信息,信息的提供者可以經常對站上的信息進行更新。如某個協議的發展狀況,公司的廣告等等。一般各信息站點都盡量保證信息的時間性。所以Web站點上的信息是動態的、經常更新的,這一點是由信息的提供者保證的。
5、交互的
Web的交互性首先表現在它的超鏈接上,用戶的瀏覽順序和所到站點完全由他自己決定。另外通過FORM的形式可以從伺服器方獲得動態的信息。用戶通過填寫FORM可以向伺服器提交請求,伺服器可以根據用戶的請求返回相應信息。
③ HTML語言都有哪些(如,<a>...</a>)代表什麼意思
HTML 文件結構標記
<html>...</html> HTML文件全文的開始結束標記
<head>...</head> HTML文件頭部的開始結束標記
<body>...</body> HTML文件體部的開始結束標記
例1 head和body是包含在html標記內部的。頭部還可以包含五種標記。<title>, <base>, <link>, <isindex>, <meta>。原碼如下:
<HTML>
<HEAD>
<title>, <base>, <link>, <isindex>, <meta>
</HEAD>
<BODY>
HTML 文件的正文寫在這里... ...
</BODY>
</HTML>
語言字元集(Charsets)的信息
<meta http-equiv="Content-Type" content="text/html;charset=gb2312">
元標記meta必須置於頭部,用來設置內容的格式,頁面語言等。這里charset=gb2312表示字元集用簡體中文。但是如果 HTML 文件里寫明了設置,瀏覽器就會自動設置語言選項。
尤其是主頁里用到了字元實體(entities),則該主頁就應該寫明字元集信息。否則,在瀏覽該主頁時顯示可能混亂。
背景色彩和文字色彩
<body bgcolor=# text=# link=# alink=# vlink=#>
bgcolor --- 背景色彩
text --- 文字的色彩
link --- 含超鏈文字的色彩
alink --- 當前超鏈文字的色彩
vlink --- 已訪問過的超鏈文字的色彩
色彩是用16進制的RGB值來表示的,如#ff0000表示紅色。例如:
<body bgcolor="#dddddd" text="#FF0000" link="#0000ff" alink="#ff0000" vlink="#00ffff" >
<p>普通文字</p>
<p><a href="file:///D:/developweb/about.htm">超鏈文字</a></p>
背景圖象 <body background="image-URL">
無滾動背景圖<body bgproperties=FIXED>
頁面空白(Margin)
頁面左邊的空白 <body leftmargin=#>
頁面上方的空白 <body topmargin=#> #=象素值
超鏈接(Link)
<a href="URL">超鏈的文字</a>
其中URL是超鏈指向的目標網頁地址,「超鏈的文字」是加上了超鏈接的正文。例如:
<a href="samp/link.html">鏈接的例子</a>。
本頁內部的超鏈接 可跳轉到頁面的某個標記過的一個地方。
<a name="name"> 任意文字</a> name是一個標記名,好象路牌。
<a href="#name">超鏈文字 </a> 跳轉name 處,這里必須加#號。例如:
<a href="#jump-test">跳轉到下一個鏈接點</a><P>
<a name="jump-test">下一個鏈接點</a>
跳轉到下一個"鏈接點"
跳轉到其他頁面的某個地方
只要在上面的語法中的#name前加一個URL即可。
<a href="URL#name"> ... </a>
<a name="name"> ... </a>
跳轉到另一個頁面的<a href="samp/link.html#jump-test">某個地方</a>。
跳轉到另一個頁面的某個地方。
新開一個瀏覽器窗口 (Target Window)
<a href="URL" target="Window_Name"> ... </a>
<a href="html9.htm" target="window_name">
開一個新窗口!
</a>
顯示如下:
開一個新窗口!
插入一根水平線 <hr>
例如:<hr size=10>
<hr width=50> 和 <hr width=50%> 分別顯示如下:
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
<hr align=#> #=left, right
排列,左對齊,右對齊。例如:
<hr width=50% align=left>
<hr width=50% align=right> 顯示如下:
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
無影線<hr noshade>
下面這條水平線在編輯誠懇是看不到的。
--------------------------------------------------------------------------------
彩色線<hr color=#>
#=16進制RGB數碼,或者是下列預定義色彩:
Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime,
Fuchsia, White, Green, Purple, Silver, Yellow, Aqua
例如 <hr color="red"> 紅色水平線如下:
--------------------------------------------------------------------------------
④ HTML語言中<body alink=>表示什麼
連接時顏色
用法:<BODY ALINK="顏色代碼"> 設定「點擊連接」的顏色,也就是當你滑鼠點擊那個連接的瞬間所顯示的顏色。
原始代碼
<HTML>
<HEAD>
<TITLE>這是標題</TITLE>
</HEAD>
<BODY ALINK="#BLUE">
<A HREF="http://www.webjx.com">連接文字</A>
</BODY>
</HTML>
顯示結果
單擊這里查看演示效果(滑鼠點擊連接瞬間才會出現我們現在設定的藍色)
⑤ web中aling是什麼意思啊,跟align有什麼區別啊
align是設置文本或其他值在容器中的對齊方式的屬性,有left,center或right三種
aling屬性反正我沒學過也沒用過,問度娘無果,應該跟HTML無關,可能是align打錯了。
手打望採納
⑥ HTML中alink和vlink有什麼區別
alink => active link(活動鏈接)可以理解為沒有點擊過的鏈接
vlink => visted link(訪問過的鏈接)
⑦ 網頁設計中的:href是什麼意思啊
親,我的回答可以的話請採納我的意見哦
<a></a>是超級鏈接標識符,三角括弧裡面是要鏈接的內容。如:<a href=" http://www.holycity.com.cn/";>黃河服飾 婚紗禮服</a>,那麼這個形成網頁瀏覽的話,你就可以點「黃河服飾 婚紗禮服」鏈接到網站 http://www.holycity.com.cn 去。li是列表項,他可以獨立使用,但一般都是跟div一起使用的。格式:<div> <ul><li><a href=" http://www.holycity.com.cn/";>黃河服飾 婚紗禮服</a></li></ul></div>網頁的內容必須寫在<li></li>裡面。
⑧ active在web滑鼠屬性中的意思
有效的、快速,英文active就是有效的、快速的意思,代表滑鼠按下時一瞬間的屬性。
滑鼠的右鍵常常隱藏有快捷的功能,在打開滑鼠屬性時,我們也可以使用該功能
來到電腦桌面,空白處右鍵單擊,彈出的菜單中選擇最下面的「個性化」,進入以後,左邊欄將出現「更改滑鼠指針」的選項,點擊即可進入。
1、用戶在"通知 V 形 (按鈕)"上左鍵單擊。
2、用戶在"Lenovo 定點裝置屬性 (按鈕)"上右鍵單擊。
3、用戶在"定點裝置屬性(P) (菜單項目)"上左鍵單擊。
4、進入滑鼠屬性。
⑨ html 標簽 屬性
詳解HTML
標簽和屬性
在HTML中,通常標簽都是由開始標簽和結束標簽組成的,開始標簽用「<標簽名>」表示,結束標簽用「</標簽名>」表示。
元素指的是包含標簽在內的整體,除去標簽的部分叫做內容。
屬性要在開始標簽中指定,用來表示該標簽的性質和特性。通常都是以「屬性名=」值」」的形式來表示,用空格隔開後,還可以指定多個屬性。指定多個屬性時不用區分順序
顏色的指定方法
用HTML指定顏色有兩種方法
1、用16進制數值來指定:在#號的後面,把RGB的各個選項用十六進制的數值來表示,數值保持兩位數。
2、指定顏色的名稱:可以對基本的16色用名稱來指定其顏色
指定文件的位置
在對某部分設置鏈接的時候,需要指定鏈接端HTML文件的位置;同樣,如果想在該處顯示圖像也需要指定圖像的位置。在HTML中,這個位置用URL來表示,有以下兩種表示方法:
1、絕對URL:絕對URL就是用Web瀏覽器查看網頁時,地址欄中顯示的以http://開頭的路徑
2、相對URL:相對URL是在同一站點內進行設置,類似於在同一磁碟上管理文件的形式。這種方法是以當前文件的位置為基準。使用相對URL時,如果要指定的文件在當前文件的下級,就從目錄名開始一直寫到要指定的文件名,中間用「/」符號隔開。如果在當前文件的上級,每上一級就加一個「../」符號
2、基本內容
顯示HTML的版本
<!DOCTYPE~>
HTML的版本表明HTML文件是按照哪個版本進行編寫的(標明該HTML文件遵循的DTD文件),不同的版本和種類都有固定的書寫格式,要按照固定的格式輸入文件開頭,然後在文件開頭處寫明版本,按照這種版本的規定格式進行編寫
必須使用的標簽
<html>~</html>
<head>~</head>
<title>~</title>
<body>~</body>
HTML文件的開頭寫有<!DOCTYPE~>的部分,代表HTML的版本,其後是必須存在的四種標簽
首先,<!DOCTYPE~>後面的整個都要用html標簽(<html>~</html>)括起來,其中要按照head標簽(<head>~</head)和body標簽的順序(<body>~</body>)的順序進行排列。
在head標簽中填寫與該文件相關的信息,body標簽中填寫世紀要在瀏覽器上顯示的內容。另外,在head標簽中,只能有一個代表文件標題的title標簽
設置頁面的文字顏色
<body text=」顏色指定」>~</body>
設置頁面的背景顏色
<body bgcolor=」顏色指定」>~</body>
設置頁面的背景圖像
<body background=」圖像的URL」>~</body>
按照目的設定范圍
<div>~</div>
<span>~</span>
插入注釋
<!—注釋語句-->
3、設置文件信息
添加標題
<title>~</title>
title標簽用來給HTML文件添加標題
這個標簽一定要位於<head>~</head>圈定的范圍內。在這里指定的標題除了可以在通常的瀏覽器窗口的標題欄中顯示以外,還可以作為加入收藏夾時的標題
顯示文件編碼
<meta http-equiv="Content-Type" content="text/html; charset=文字編碼" />
meta標簽的charset屬性表示該HTML文件是用什麼文字編碼編寫的
注意,該標簽一定要位於<head>~</head>范圍內
添加關鍵字、內容介紹及作者姓名
<meta name="keywords" content="關鍵字1,關鍵字2,…" />
<meta name="description" content="內容介紹" />
<meta name="author" content="作者姓名" />
這些信息都不會在畫面上顯示出來,但是搜索引擎在收集信息時要用到
注意,該標簽一定要位於<head>~</head>范圍內
設置樣式表和腳本語言的種類
<meta http-equiv="Content-Style-Type" content="樣式表的種類" />
<meta http-equiv="Content-Script-Type" content="腳本的種類" />
在HTML文件內可以設置樣式表和腳本的默認語言
注意,該標簽一定要位於<head>~</head>范圍內
設置進入網頁
<link rel=」關系」 href=」URL」>
<link rev=」關系」 href=」URL」>
rel:在本頁看到的,與URL標明的網頁之間的關系
rev:在URL標明的網頁中看到的,與本頁之間的關系
link標簽表示的是該文件和與其相關的其他文件之間的關系
注意,該標簽一定要位於<head>~</head>范圍內
設置標准URL
<base href=」絕對URL」>
<base href=」絕對URL」 target=」目標名」>
base標簽用來設置將該頁中使用的相對URL的標准指向成絕對URL,指定了這個標簽之後,在該頁指定的相對URL就會全部認定為已在這里指定的絕對URL。如果不進行這項設置,就以當前頁的位置為標准,如果指定了Target屬性,就可以指定打開鏈接地址網頁的默認框架和窗口
注意,該標簽一定要位於<head>~</head>范圍內
設置自動倒入網頁功能
<meta http-equiv="refresh" content="秒數" />
<meta http-equiv="refresh" content="秒數";URL=要移動到的URL />
在經過數秒後,自動開始導入網頁。如果指定了要移動到的URL,就會導入URL指定的網頁。如果沒有指定,就會再次導入相同的頁
注意,該標簽一定要位於<head>~</head>范圍內
4、設置文本類型
設置各級標題
<h1>~<h1>
…
設置段落
<p>~</p>
p標簽表示的是該部分為一個段落
設置聯系地址
<address>~</address>
address標簽表示的內容是該網頁製作者的聯系地址和有關網頁內容的咨詢地址等信息
設置強調內容
<em>~</em>
<strong>~</strong>
這兩個標簽所圈內容表示該部分是強調的內容
設置較短的引用文字
<q>~</q>
<q cite=」引用頁的URL」>~</q>
q標簽代表的意思是該部分為較短的引用文,在引用段落的某一部分的時候使用,如果使用cite屬性,還能夠把引用頁的URL顯示出來
設置較長的引用文章
<blockquote>~</blockquote>
<blockquote cite=」引用頁的URL」>~</blockquote>
設置文字內容的出處
<cite>~</cite>
設置縮略語
<abbr title=」字元串」>~</abbr>
<acronym title=」字元串」>~</acronym>
title:不處於省略狀態下的詞彙(字元串)
設置添加的內容
<ins cite=」URL」 datetime=」添加日期時間」>~</ins>
設置需要刪除的內容
<de cite=」URL」 datetime=」刪除日期時間」>~</del>
突出顯示段落中的術語
<dfn>~</dfn>
表示與程序關聯的文本
<kbd>~</kbd>:輸入文本
<samp>~</samp>:輸出樣本
<code>~</code>:源代碼
<var>~</var>:變數
顯示特殊符號
<:<
>:>
":」
&:&
5、設置顯示方式
設置文字的換行
<br>
添加了br標簽之後,文本就會再該處換行。即使在HTML代碼中已經換行了,在瀏覽器上顯示的時候卻反映不出來,因此如果想在瀏覽器上換行的話,就要使用br標簽
添加不同橫線效果
<hr>
<hr size=」粗細」 width=」長度」 align=」對齊方式」 noshade>
加入了hr標簽後,就可以在其標注的地方顯示橫線
設置文本格式
<b>~</b>:黑體字
<i>~</i>:斜體字
<tt>~</tt>:等大字體
<sup>~</sup>:上標
<sub>~</sub>:下標
<u>~</u>:下劃線
<s>~</s>:刪除線
設置空格和換行
<pre>~</pre>
<pre>標簽可以保留文字在源代碼中的格式,使得頁面中顯示的內容和源代中的格式完全一致
設置居中效果
<center>~</center>
center標簽用於將指定范圍內的內容設置為居中
設置行對齊方式
<h1 align=」行對齊方式」>~<h1>
<p align=」行對齊方式」>~<p>
<div align=」行對齊方式」>~<div>
使用align屬性可以設置標題、段落以及指定范圍內的行對齊方式
設置文字顏色
<font color=」設置顏色」>~</font>
設置字體類型
<font>字體名」>~</font>
設置字體字型大小
<font size=」字型大小」>~</font>
相對改變字體大小
<big>~</big>:增大
<small>~</small>:減小
<font size=」+n」>:增大n號
<font size=」-n」>:減小n號
設置字型大小的基本大小
<basefont size=」字型大小」>
size:1~7
6、設置鏈接相關的屬性
鏈接到其他頁面
<a href=」鏈接目標URL」>~</a>
a標簽的href屬性能把指定的范圍鏈接到其他頁面上,鏈接部分的詞語要設置得讓人看到這個部分就能聯想到鏈接網頁上的具體內容
另外,在鏈接圖像的時候,一定要插入替代的文字(alt=」~」)使用戶能夠很明確的了解到鏈接的目標
鏈接到當前頁的特定位置
<a href=」#位置名」>~</a>:指定鏈接文件(從什麼位置開始鏈接)
<a name=」位置名」>~</a>:指定鏈接的地址(要鏈接的位置)
如果一頁上的內容非常多,可以在一個網頁中給特定的位置命名,然後再鏈接到該位置(跳轉)。在給鏈接對象位置命名的時候要使用name屬性。然後,在鏈接的時候,要用href屬性在鏈接地址名稱的前面加上#號
設置鏈接到其他頁面的特定位置
<a href=」URL#位置名」>~</a>:指定鏈接源(從什麼位置開始鏈接)
<a name=」位置名」>~</a>:指定鏈接的地址(要鏈接的位置)
在鏈接到其他網頁上的時候,可以先給那一頁上特定的位置命名,然後鏈接到該位置。在給鏈接對象位置命名的時候要使用name屬性。然後,在鏈接的時候,要用href屬性設置成」URL+#+位置名」這樣一種格式
設置鏈接文字的顏色
<body link=」指定顏色」 vlink=」指定顏色」 alink=」指定顏色」>~<body>
link:還沒有看見的鏈接部分的文字顏色
vlink:已經看見的鏈接部分的文字顏色
alink:滑鼠單擊鏈接部分的文字顏色
body標簽用於設置網頁整體鏈接部分的文字顏色
在新窗口中打開鏈接網頁
<a href=」 URL」 target=」窗口名」>~</a>
利用target屬性可以設置打開鏈接窗口的方式
通過設置鏈接來啟動郵箱
<a href=」mailto:郵箱地址」>~</a>
7、製作不同類型的列表
為列表添加不同類型的標記
<ul><li>列表項目1</li><><li>列表項目2</li>…<ul>
ul標簽的作用是將列表(條款形式)加上圓點或方括弧的標記。列表的整體要在<ul>~</ul>標簽范圍內,在這之間的各個項目要在<li>~</li>標簽之內
更改列表標記
<ul type=」標記種類」>~</ul>
<li type=」標記種類」>~</li>
標記的種類包括disc、cicle和square
製作帶序號的列表
<ol><li>列表項目1</li><><li>列表項目2</li>…<ol>
改變序號的樣式
<ol type=」序號樣式」>~</ol>
<li type=」序號樣式」>~</li>
改變序號的順序
<ol start=」開始序號」>~</ol>
<li value=」開始序號」>~</li>
製作包含專用語和解釋的列表
<dl><dt>專用語<dt><dd>對其解釋</dd>…<dl>
8、設置表格
表格的基本形式
<table border=」邊框的粗度」>~</table>:整個表格
<tr>~</tr>:單獨一行
<th>~</th>:單元格:標題用
<td>~</td>:單元格:數據用
表格的整體要圈在<table>~</table>之間顯示,表格當中某一個單元格用<th>~</th>表示或者<td>~</td>表示。每個單元格都在表的單獨以行,放置在<tr>~</tr>中。也就是說,table標簽的內容是由tr標簽構成的。各個tr標簽的內容是由表示單元格的th或者td標簽構成的。th標簽代表這個單元格的內容是標題。td標簽代表這個單元格的內容是數據
為表格添加標題
<caption>~</caption>
<caption align=」對齊方式」>~</caption>
caption標簽用來給表格添加標題
該標簽一定要放在table標簽的緊後面。標題的顯示位置(即對齊方式)可以指定在表格的上部,或者表格的下部
指定表格的大小
<table width=」寬度」>~</table>
寬度:針對像素或者窗口的百分比
指定單元格大小
<th width=」寬度」 height=」高度」>~</th>
<td width=」寬度」 height=」高度」>~</td>
合並單元格
<th rowspan=」垂直方向的合並數」>~</th>
<th colspan=」水平方向的合並數」>~</th>
<td rowspan=」垂直方向的合並數」>~</td>
<td colspan=」水平方向的合並數」>~</td>
垂直方向的合並數:從當前單元格開始向下合並的單元格數
水平方向的合並數:從當前單元格開始向右合並的單元格數
設置單元格之間的距離
<table cellspacing=」單元格的距離」>~</table>
設置單元格邊框與內容之間的距離
<table cellpadding=」單元格邊框與內容之間的距離」>~</table>
設置單元格中的行對齊方式和列對齊方式
align屬性用於設置單元格內的行對齊方式,valign屬性用來設置單元格內的列對齊方式
禁止在單元格內換行
<th nowrap>~</th>
<td nowrap>~</td>
設置表格和單元格的背景顏色
bgcolor屬性用於指定表格和單元格中的背景顏色
設置表格和單元格的背景圖像
background屬性用於指定表格和單元格中的背景圖像
設置表格外框的寬度
<table border=」外框的寬度」>~</table>
設置表格外框的顯示形式
<table frame=」外框的顯示形式」>~</table>
設置表格內補邊框線的顯示形式
<table rules=」內部邊框線的顯示形式」>~</table>
定義表格中的橫行
<thead>~</thead>:表頭部分
<tbody>~</tbody>:表體部分
<tfoot>~</tfoot>:表底部分
thead標簽、tbody標簽和tfoot標簽都是用來定義表格的橫行(tr標簽)的
這樣組合之後,就可以針對該組合的整體來應用屬性和樣式表。
使用這些標簽的時候,一定要以thead標簽、tfoot標簽和tbody標簽的順序進行排列。在一個表格里,只能放置一個thead標簽和一個tfoot標簽,而tbody標簽可以根據需要放置多個
利用縱列設置表格屬性和樣式表
<col span=」縱列數」>
<col span=」縱列數」 width=」寬度」>
col標簽不僅可以用來改變表格的縱列結構,還可以用來根據縱列,來綜合指定寬和行對齊方式等屬性以及樣式表
該標簽放置的位置要在caption標簽的緊後面(如果沒有caption標簽,就放在table標簽的開始標簽的緊後面),以及thead標簽和tr標簽的前面
設置表格居中
<table align=」center」>~</table>
將表格嵌入到文本中
<table align=」對齊方式」>~</table>
位置:left,right
將table標簽的align屬性指定為left或者right後,就可以將表格以居左或居右的方式嵌入到文字中間
如果想要解除嵌入狀態,可以使用<br>標簽的clear屬性
解除表格的嵌套
<br clear=」解除表格那一側的嵌套」>
left:解除左側表格的嵌套
right:解除右側表格的嵌套
all:解除兩側表格的嵌套
設置表格與嵌套文字之間的距離
<table vspace=」垂直距離」 hspace=」水平距離」>~</table>
垂直距離:表格的上下框與文字間的距離
水平距離:表格的左右框與文字間的距離
9、設置圖像與多媒體
插入圖像
<img src=」URL」 width=」寬度」 hignt=」高度」 alt=」替代文字」>
使用img標簽,可以把圖像插入到HTML文件中
圖像的格式一般可以使用GIF格式、JPEG格式和PNG格式
不管圖像實際的大小如何,都會按照在這里所指定的寬度和高度來顯示
alt屬性是在不能顯示圖像的情況下,指定替代圖像所使用的文字
設置圖像的邊框
<img src=」URL」 alt=」替代文字」 border=」邊框的粗度」>
設置圖像與文字的垂直位置關系
<img src=」URL」 alt=」替代文字」 align=」對齊方式」>
在同一行中,如果有圖像和文字,那麼就可以用align屬性來設置圖像和文字的垂直位置關系
製作圖像熱區
<img src=」URL」 alt=」替代文字」 usemap=」#map名」>
<map name=」map名」>~</map>
<area shape=」形狀」 cords=」坐標」 href=」URL」 alt=」替代文字」>
在map標簽中,用來設置實際單擊的區域和鏈接地址的是area標簽
在area標簽中,一定要指定表示鏈接地址的替代文字,之後要用image標簽的usemap屬性指定定義後的image map的名稱(名稱前面要加#),這樣圖像就可以作為image map產生相應的效果
將圖像嵌套在文本中
<img src=」URL」 alt=」替代文字」 align=」對齊方式」>
位置:left,right
解除圖像的嵌套
<br clear=」解除哪一側圖像的嵌套」>
設置圖像與周圍文字之間的距離
<img src=」URL」 alt=」替代文字」 vspace=」垂直距離」 hspace=」水平距離」>
放置Java小程序
<applet code=」類文件名」 width=」寬度」 height=」高度」 >~</applet>
<param name=」參數名」 value=」參數值」>
applet標簽是嵌入Java小程序時要使用的標簽
如果使用param標簽,在執行java小程序時,需事先指定一些必要值。這時,param標簽要位於<applet>~</applet>范圍的最開始部分
10、製作不同類型的表單
製作填寫表單
<form action=」URL」 method=」發送形式」 enctype=」MIME類型」 target=」窗口名稱」>~</form>
URL:用來處理發送後表格的程序的URL
發送形式:get,post
MIME類型:以post方式發送內容時的MIME類型
窗口名稱:先是發送結果的窗口或框架名
form標簽表示在表單中填寫的內容是可以發送的
製作發送按鈕
<input type=」submit」 value=」標簽」 name=」名稱」>
標簽:在按鈕上顯示的文字
名稱:按鈕的名稱
將input標簽的type屬性設置為submit,再根據form標簽的設置,可以製作發送填寫在表單中數據的按鈕
製作重置按鈕
<input type=」reset」 value=」標簽」>
製作通用按鈕
<input type=」button」 name=」名稱」 value=」標簽」>
通用按鈕通常與JavaScript等腳本語言組合使用
利用圖像來製作發送按鈕
<input type=」image」 src=」URL」 name=」名稱」 alt=」替代文字」 align=」對齊方式」>
通常,發送按鈕都使用input type=」submit」代碼,不過圖像也可以作為發送按鈕,具有發送功能。這時,圖像被單擊的位置將和表單的內容一起被發送
製作不同功能的發送按鈕
<button type=」類型」 name=」名稱」 value=」發送值」>~</button>
類型:submit,reset,button
button標簽是用來製作按鈕專用的
通過指定type屬性值,就可以產生具有不同功能的按鈕,包括發送按鈕、重置按鈕和通用按鈕。另外,在<button>~</button>中放置相應的內容,可以作為按鈕的標簽顯示出來。在需要進行其他處理並設置多個發送按鈕的情況下,根據name屬性和value屬性所顯示的值,接受方就可以分辨出單擊的是哪一個發送按鈕
製作單行文本框
<input type=」text」 name=」名稱」 value=」默認文字」 size=」寬度」 maxlength=」字元的最大輸入數量」>
製作多行文本框
<textarea name=」名稱」 rows=」行數」 cols=」寬度」>~</textarea>
製作輸入密碼的文本框
<input type=」password」 name=」名稱」 value=」默認文字」 size=」寬度」 maxlength=」字元的最大輸入數量」>
插入隱藏域
<input type=」hidden」 name=」名稱」 value=」發送值」 >
製作單選按鈕
<input type=」radio」 name=」名稱」 value=」發送文字」 >
<input type=」radio」 name=」名稱」 value=」發送文字」 checked>
將input標簽的type屬性設置為radio,可以用來製作單選按鈕。單選按鈕是多個選項當中只能選擇其一的按鈕。作為公共項目的選項而使用的單選按鈕,要把它們都指定為同一名稱。另外,發送數據的時候,為了識別所選的是哪一項,要用value屬性來指定相應的值
製作復選框
<input type=」checkbox」 name=」名稱」 value=」發送文字」 >
<input type=」 checkbox」 name=」名稱」 value=」發送文字」 checked>
將input標簽的type屬性設置為checkbox,可以用來製作復選框。復選框可以在多個選項當中進行多項選擇。作為公共項目的選項而使用的復選框,要把它們都指定為同一名稱。另外,發送數據的時候,為了識別所選的是哪一項,要用value屬性來指定相應的值
製作菜單
<select name=」名稱」>~</select>:菜單整體
<option value=」發送值」>~</option>:菜單項
<option selected>~</option>:菜單項
select標簽用來製作菜單
菜單的整體要在<select>~</select>范圍之內顯示,然後按需要的數量在其中放置表示選項的<option>~</option>。<option>~</option>范圍之內要寫上實際菜單要顯示的選項的名稱。另外,如果省略了value屬性,在這里記錄的文字本身就會作為所選值發送
組合菜單選項
<optgroup lable=」組合名稱」>~</optgroup>:製作組合菜單
<option lable=」次選項」>~</option>:組合內的選項
組合名稱:第一級顯示的組合標題
次選項:對應組合名稱下面的在第二級顯示出來的選項
製作的菜單選項可以利用<select>~</select>標簽組合起來
製作下拉列表
<select size=」行數」 name=」名稱」 multiple>~</select>:下拉列表框
<option value=」發送值」>~</option>:菜單項
<option selected>~</option>:菜單項
在用於製作菜單的select標簽中指定了size屬性後,就可以顯示下拉列表框
添加選擇文件的功能
<input type=」file」 name=」名稱」accept=」MIME」類型>
將input標簽的type屬性設置為file,可以自動做成能夠選擇發送表單數據的文件按鈕和文本框
綜合利用菜單選項
<fieldset>~</fieldset>:組合
<legend align=」對齊方式」>~</legend>:組合的標題
field標簽用來把填寫在表單中需要包含的輸入內容和選項組合起來
在<fieldset>~</fieldset>的最開始部分放置legend標簽,並且給該組合加上標題
將標簽文字與項目一體化
<label for=」參照ID」>~</lable>
參照ID:添加了標簽的對象的id屬性值
lable標簽的作用是在輸入項和選項及其標簽文字之間建立起明確的關聯,並使其一體化
11、利用框架布局網頁
設置框架整體結構
<frameset rows=」高度」>~</frameset>
<frameset cols=」寬度」>~</frameset>
<frame src=」URL」 name=」框架名稱」>
高度:在垂直方向上分布的多個框架的高度,按從上到下的順序依次用逗號隔開來指定
寬度:在水平方向上分布的多個框架的寬度,按從左到右的順序依次用逗號隔開來指定
URL:作為框架內容顯示的HTML文件的URL
框架名稱:在指定鏈接等顯示目標的時候使用的名稱
使用框架功能可以把窗口橫豎切割開,然後在不同的塊區域中顯示其他的HTML文件。在指定了框架的文件中,原來body標簽所在的位置,要放置frameset標簽,這主要是由於在框架頁面中不能使用body標簽
在<frameset>~</frameset>的范圍中要按照順序填入分割後框架內要填寫的內容。如果不需要再分割,就用frame標簽指定要導入的HTML文件,如果還要繼續分割的話,就需要放置frameset標簽(作為嵌套放置在裡面,並且指定蓋框架如何分割)
設置框架的顯示方法
<frame scrolling=」滾動控制」 noresize>
<frame marginwidth=」左右縮進」 marginheight=」上下縮進」>
設置是否顯示邊框
<frame frameborder=」顯示指定框架的邊框」>
frameborder屬性用來設置分割開相鄰框架的邊框是否顯示
去除分割框架的邊框
<frameset frameborder=」0」 framespacing=」0」 border=」0」>
在不支持框架的環境中顯示所需內容
<noframes>~</noframes>
這個標簽要在<frameset>~</frameset>范圍的最開始或者最後處放置一個。在<noframes>~</noframes>范圍內要首先放置body標簽,並在其中填寫所要顯示的內容。
指定鏈接目標在哪一個框架內顯示
<a href=」URL」 target=」框架名」>~</a>
如果對框架內的文件中指定的鏈接不進行設置的話,就會在原來的相同框架中顯示鏈接目標,如果想使這個鏈接目標在其他框架中顯示的話,就需要指定target屬性值,用想要顯示(frame標簽)的那個框架的name屬性來指定框架名稱
插入內嵌框架
<iframe src=」內容的URL」 name=」框架名」>~</iframe>
iframe標簽不僅可以放置分割窗口形式的框架,還可以在窗口中放置獨立顯示的內嵌框架。在框架內還可以顯示src屬性所指定的內容
如果瀏覽器不支持這種框架,要在<iframe>~</iframe>之間指定要顯示的內容
12、關於腳本
在HTML中插入腳本
<script type=」MME類型」>~</script>
<script type=」MME類型」 language=」語言名稱」 src=」URL」>~</script>
在HTML文件中編寫腳本的時候要用到script標簽,腳本語言要寫在這個標簽的范圍內
這時,在不支持這個標簽的瀏覽器上會在畫面上顯示出腳本的部分,為了避免這種現象,通常把腳本整體作為HTML的注釋。這個標簽可以放在<head>~</head>和<body>~</body>范圍內的任意位置上
在不能執行腳本的環境中添加所需的內容
<noscript>~</noscript>
在腳本不能運行的時候,可以使用noscript標簽來指定替代顯示的內容
這個標簽要放置在<body>~</body>的范圍內
⑩ 網頁製作方面的高手進來看看 `...
1.1 什麼是HTML
1.1.1 Web頁的基本概念
1.1.1.1 Internet與WWW
通俗地講,Internet就是許多不同功能的計算機通過網路設備連接起來組成一個覆蓋全球的網路。從信息資源的角度看,Internet是一個集各個部門、各個領域的各種信息資源為一體,供網上用戶共享信息資源網。
Internet能提供的服務包括:WWW服務、E-mail服務、FTP服務、TELNET服務、網上傳呼(ICQ;OICQ)、電子商務、網路炒股、在線聊天、聯網游戲等。
由此可見,WWW(World Wide Web,譯為「萬維網」)並不就是Internet,它只是Internet提供的服務之一,不過它是Internet上發展最為蓬勃的部分,相當多的其他Internet服務是基於WWW服務的。
1.1.1.2 WWW與瀏覽器
從技術的角度講,WWW是由遍布在Internet上稱為Web伺服器的計算機組成,它將不同的信息資源有機地組織在一起,能過一種叫瀏覽器的軟體進行瀏覽。
瀏覽器是獲取WWW服務的基礎,它的基本功能就是對網頁進行顯示。
1.1.1.3 網站與主頁
WWW是由Internet上無數的Web伺服器構成的,通過瀏覽器訪問這些伺服器上的網頁,不同的網頁通過超鏈接聯系在一起,構成了WWW的縱橫交織結構。
通常我們把一系列邏輯上可以視為一個整體的頁面叫做網站,或者說,網站就是一個有共同主題的頁面的集合。
主頁是網站中一個特殊頁面,它是網站的入口頁面,其中包含指向其他頁面的超鏈接。通常主頁的名稱是固定的,例如:index.html(.html或.htm後綴表示HTML文檔)
1.1.2 HTML的工作原理
HTML(HyperText Markup Language,超文本標記語言)是表示網頁的一種規范(或者說是一種標准),它通過標記符定義了網頁內容如何顯示。
網頁是用HTML語言寫成的文本文件,但它與文本文件不同的是,網頁中包含有指向其它位置的鏈接,通過這些鏈接使網頁組織成了網狀結構。
在HTML文檔中,通過使用標記符可以告訴瀏覽器如何顯示見網頁,即確定網頁內容的顯示格式。所以HTML文檔就是網頁文件,有時也稱為Web頁。
1.2 創建Web頁
1.2.1 標記符基礎
HTML語言是影響網頁內容顯示格式的標記符集合,瀏覽器根據標記符決定網頁的實際顯示效果。
1.2.1.1 基本的HTML語法
在HTML中所有的標記都用尖括弧括起來。絕大多數的標記符是成對出現的,即有開始標記符與結束標記符,開始標記符和相應的結束標記符定義了標記所影響的范圍。結束標記符與開始標記符的區別是多一個斜線。例如:
<h1>讓我們一起來學習HTML!!</h1>
但是,也有少數標記符是單一的不成對的,例如:<br>、<hr>等。
HTML標記符是不區分大小寫的。
1.2.1.2 標記符的屬性
屬性是用來描述對象特徵的特性。許多標記符還包含一些屬性,以便對標記符作用的內容進行更詳細的控制。
在HTML中,所有的屬性都放置在開始標記符的尖括弧里,屬性與標記符之間用空格分隔;屬性的值放在相應的屬性名之後,用等號分隔;而不同的屬性之間用空格分隔。例如:
<font size=7 color=red>大家好</font>
1.2.2 Web頁的基本結構
HTML文檔中通常都包括以下基本標記符:<html>和</html>、<head>和</head>、<body>和</body>。
1.2.2.1 HTML標記
<html>是Web頁的第一個標記符,</html>是最後一個標記符。Web頁的其它所有內容都必須位於這兩個標記符之間。
1.2.2.2 首部標記
<head>和</head>位於Web頁的開頭,其中不包括Web頁的任何實際內容,而是提供一些與Web頁有關的特定信息。首標記的內容也用特定的標記括起來。
(1) TITLE 標記符
在首標記符中,最基本、最常用的是標題標記符<title></title>,用於定義網頁的標題,網頁標題可被瀏覽器用書簽和收藏清單。
(2) META 標記符
它用於說明Web頁有關的信息。在META標記符中常用的屬性有:name、http-quiv以及content。name是給出關於網頁某一屬性的名稱,而content是給出屬性的值,http-equiv指定HTTP響應名稱,通常用於替換name屬性。
META 標記符的一個常用功能是設置自動頁面跳轉。即使瀏覽器自動從一個頁面跳馬轉到另一個頁面。語法格式如下:
<META http-equiv="Refresh" content="5; url=URL">
(3) BGSOUND標記符
它用於指定網頁的背景音樂。語法格式如下:
<BGSOUND src=音樂文件 loop=播放次數>
音樂文件的格式一般為.wav、.mid或.mp3。
1.2.2.3 正文標記符
正文標記符<BODY>和</BODY>包含 Web 頁的內容。文字、圖形、鏈接以及其他 HTML 元素都位於該標記符內。
注意:空格、回車這些格式控制在顯示時都不起作用,如要使它們起作用,應使用預格式化元素<PRE>和</PRE>。
1.2.3 設置頁面屬性
正文標記符包括一些常用屬性,用於設置網頁背景顏色和圖案,以及設置文檔和超鏈接的顏色。
(1) 顏色的表示
在HTML中可以用兩種方式來表示顏色:
通過顏色名表示顏色
通過設置RGB(Red Green Blue)值來表示顏色
通過顏色名表示顏色,直接給出要顯示顏色的英文名稱即可。但是,在HTML中只保留了16個顏色名,所以用顏色名所能表示的顏色很有限。
通過RGB值表示顏色,是利用三色光的相互混合調制出成千上萬種顏色。
RGB表示法的標准格式是:以「#」開頭,後面緊跟著6位16進制數,每2位為一組,代表一種顏色成分,按「#RRGGBB」方式排列。
#000000 #008000
#C0C0C0 #00FF00
#808080 #808000
#FFFFFF #FFFF00
#800000 #000080
#FF0000 #0000FF
#800080 #008080
#FF00FF #00FFFF
1.2.3.2 設置頁面背景圖像
設置頁面背景圖像是通過設置BODY標記符中的background屬性實現的,其語法格式如下:
<body background="圖像文件的URL">
1.2.3.3 設置背景圖像水印效果
Internet Explorer還支持BODY標記符的另一個屬性—bgproperties,該屬性可以設置背景圖案的水印效果。語法格式如下:
<body background=圖像文件URL bgproperties=效果>
1.2.3.4 設置文字和超鏈接的顏色
設置正文和超鏈接的顏色,可以使用BODY標記符的text、link、vlink和alink屬性。常用的語法格式如下:
<body text=#RRGGBB link=#RRGGBB vlink=#RRGGBB alink=#RRGGBB>
其中:
text 用於設置正文顏色
link 用於設置未被訪問的超鏈接的顏色
vlink 用於設置已被訪問的超鏈接的顏色
alink 用於設置激活超鏈接的顏色
1.2.4 添加註釋
不論是編寫程序還是製作網頁,為所做的工作添加註釋都是一種良好的工作習慣。HTML 的注釋由開始標記符<!-- 和結束標記符 --> 構成。注釋內容都將被瀏覽器解釋為注釋,而不在瀏覽器中顯示。
1.2.5 顯示特殊字元
如果需要在網頁中顯示某些特殊字元,例如: <(小於號)、>(大於號)、」(引號)等,則需使用參考字元來表示,而不能直接輸入。參考字元以「&」號開始,以「;」結束,既可以使用數字代碼,也可以使用代碼名稱。 最常見的特殊字元如下表所示(完整的編碼請參見附錄2)
特殊字元 數字代碼 代碼名稱
" + "
& & &
< < <
> > >
1.3 發布Web頁
1.3.1 創建本地站點
1.3.2 申請網頁空間
1.3.3 用FTP上傳網頁
.1 文本分段
在HTML文檔中對段落的控制包括:段落標記符P、換行標記符BR、水平線標記符HR、標題標記符Hn、用於設置段落對齊的align屬性、DIV標記符以及CENTER標記符。
2.1.1 段落標記符P和換行標記符BR
分段標記符
分段標記符用於將文檔劃分為段落,標記為<P></P>,其中結束標記符通常可省略。
換行標記符
換行標記符用於在文檔中強制斷行,標記為一個單獨的<BR>。
2.1.2 水平線標記符HR
在HTML中除了可以用P標記劃分落,還可以用添加水平線的方法分隔文檔的不同部分。
水平線的標記符為<HR>,它包括以下屬性:
SIZE 屬性用來改變水平線的粗細程度
WIDTH 屬性用來更改水平線的長度
NOSHADE 屬性用來使水平線以實線顯示
COLOR 屬性用來設置水平線的顏色
ALIGN 屬性用來設置水平線的對齊方式
其中:COLOR 屬性在 Microsoft Internet Explorer 3 及更高版本中,通過在<HR>中設置 COLOR 屬性可以控制水平線的顏色。
2.1.3 標題標記符Hn
在HTML中,用戶可以通過Hn標記符來標識文檔中的標題和副標題,其中:n是1-6的數字;<H1>表示最大的標題,<H6>表示最小的標題。使用標題樣式時,必須使用結束標記符。
2.1.4 段落對齊
在HTML中,一般使用標記符的align屬性來設置段落的對齊方式。
2.1.4.1 align屬性
ALIGN 屬性用於設置段落的對齊格式,其值包括:
RIGHT(右對齊)
LEFT(左對齊)
CENTER(居中對齊)
JUSTIFY(兩端對齊)
ALIGN 屬性可應用於多種標記符,最典型的是應用於 DIV、P、Hn(標題標記符)、HR 等標記符。
2.1.4.2 DIV標記符CENTER標記符
DIV 標記符
DIV 標記符用於為文檔分節,以便為文檔的不同部分應用不同的段落格式,其標記為<DIV></DIV>。位於 DIV 標記符中的多段文本將被認為是一個節,可為它們設置一致的對齊格式。
SPAN 標記符
SPAN標記符的功能及用法與DIV相似,但通常用於標記一行內的某些字元。
CENTER 標記符
如果要將文檔內容居中,還可使用 CENTER 標記符,方法為:將需居中的內容置於<CENTER>和</CENTER>之間。
2.2 控制文本的顯示效果
2.2.1 字體控制標記符FONT
FONT標記符用於控制字元的樣式,包括開始標記符<FONT>和結束標記符</FONT>,FONT標記符具有3個常用的屬性:
size 屬性
字型大小屬性的值可以從 1 到 7,3 是默認值,字型大小越大顯示的字元就越大。該屬性值也可以用 +n 或 -n 來作為相對值指定。
color 屬性
字體標記符的 COLOR 屬性可用來控制文字的顏色,使用方法與正文標記符<BODY>中使用的 BGCOLOR 屬性相同。但要注意一般不能將color的屬性值與bgcolor的屬性值設置為相同。
face 屬性
FACE 屬性用來指定字體樣式。在這個屬性中用戶可以指定一個或幾個字體名稱(用逗號隔開)。
2.2.2 用物理字元樣式
所謂物理字元樣式,是指標記符本身就說明了所修飾文字的效果的標記符。常用的物理標記符有:
標記符 功能 標記符 功能
<B></B> 粗體 <STRIKE></STRIKE> 刪除線
<BIG></BIG> 大字體 <SUB></SUB> 上標
<I></I> 斜體 <SUP></SUP> 下標
<S></S> 刪除線 <TT></TT> 等寬
<SMALL></SMALL> 小字體 <U></U> 下劃線
2.2.3 邏輯字元樣式
所謂邏輯字元樣式是指標記符本身從某種程度上反映了被修飾對象所表示的含義。例如:ADDRESS標記符用以修飾某個地址。常用邏輯字元樣式如下表:
標記 功能
<ADDRESS></ADDRESS> 用於修飾地址
<CITE></CITE> 用於說明文本屬於引用
<CODE></CODE> 用於說明程序代碼
<DFN></DFN> 用於表示定義了術語
<EM></EM> 用於強調某些字詞
<KBD></KBD> 用於說明用戶的鍵盤輸入
<SAMP></SAMP> 用於表示文本樣本
<STRONG><STRONG> 用於強調某些字詞
<VAR></VAR> 用於表示變數
2.2.4 滾動文字效果
滾動文字是用於IE的一種常用網頁效果,它使位於<MARQUEE>和</MARQUEE>標記符之間的內容可以以滾動方式顯示。
在MARQUEE標記符中常用的屬性如下:
width和height 這兩個屬性定義了字元滾動區域的寬度和高度。可以用像素數和百分比來表示。
align 指定了滾動字元如何於周圍對象對齊。
behavior 定義了字元如何滾動。
bgcolor 定義了滾動字元區域的背景。
direction 定義了字元滾動的方向。
hspace和vspace 定義了滾動字元四周水平和垂直方向上的間隙。
loop 指定滾動重復次數
scrollamount 指定文本滾動步長的像素數。
scrolldelay 指定兩次滾動間的毫秒延時數。
2.3 列表格式
2.3.1 有序列表
有序列表(Ordered list)也稱數字式列表,它是一種在表的各項前顯示有數字或字母的縮排列表。
定義有序列表需要使用有序列表的方法格式如下:
<ol [type=x][start=n]>
<li [type=x][value=n]>列表項1
<li [type=x][value=n]>列表項2
. . .
</ol>
其中:type和start分別用來設置數字序列樣式和數字序列的起始值。n為任意整數;x的取值見下表:
值 含義
1 阿拉伯數字,默認值
A 大寫字母
a 小寫字母
I 大寫羅馬字母
i 小寫羅馬字母
2.3.2 無序列表
無序列表(Unordered list)也稱強調式列表,它是一種在表的各項前顯示有特殊項目符號的縮排列表。
<ul [type=x]>
<li [type=x]>列表項1
<li [type=x]>列表項2
. . .
</ul>
其中:type用來控制列表項前特殊符號的顯示。x的取值如下表:
值 含義
disc 實心圓
circle 空心圓
square 實心或空方塊,取決於瀏覽器
注意:在IE中,type的值是區分大小寫的。
2.3.3 定義列表
定義列表用於定義術語,它是一種在表的各項前沒有任何數字和符號的縮排列表。語法格式如下:
<DL>
<DT>術語1[</DT>]
<DD>說明1[</DD>]
<DT>術語2[</DT>]
<DD>說明2[</DD>]
. . .
</DL>
2.4 格式的嵌套中的問題
格式嵌套的問題,也就是要考慮當不同的格式設置作用於同一段內容時HTML將如何處理,通常的原則是:
如果嵌套的格式是相容的,則取格式疊加的效果
如果嵌套的格式是沖突的,則取離被修飾內容最近的樣式符的修飾效果 .1 Web頁圖像基礎
3.1.1 點陣圖與矢量圖
點陣圖圖形由排列成網格的稱為像素的點組成,如果把圖像放大到一點程度會看到像馬賽克那樣拼合在一起形成的圖像。
矢量圖形使用稱為矢量的線條和曲線描述圖像,它是用數學信息來描述圖像的。
3.1.2 Web頁圖像格式
雖然有很多計算機圖像格式,但由於受網路帶寬和瀏覽器的限制,在Web上常用的圖像格式有以下三種:GIF、JPEG和PNG,它們都是標準的點陣圖格式。
3.1.2.1 GIF格式
GIF格式(Graphic Interchange Format,圖形交換格式)採用圖像的無損壓縮處理,是目前在Web上應用最廣泛的圖像格式之一。GIF格式具有以下特點:
無損壓縮
最多 256 色
能夠使用透明色
交錯式 Gif(interlaced gif)
動畫 Gif
3.1.2.2 JPEG格式
JPEG格式(Joint PhotoGraphics Exper,聯合圖形專家組圖片格式)使用有損壓縮來減小圖片文件的大小,因此用戶將看到隨著文件的減小,圖片的質量也降低了。JPEG格式具有以下特點:
有損壓縮
沒有顏色限制
可以控制壓縮比
不支持透明色
不支持動畫
3.1.2.3 PNG格式
PNG格式(Portable Networks Graphics,可移植網路圖形格式)是近年來新出現的一種圖像格式,它適於任何類型,任何顏色深度的圖片。該格式採用無損壓縮來減小圖片文件的大小。PNG格式具有以下特點:
無損壓縮
沒有顏色限制
支持透明色,且透明度可調(0%-100%)
3.1.3 使用網頁圖像的要點
在網頁上使用圖片,通常應注意以下三點:
圖像文件的大小
網頁中圖片的數量和質量
合理的使用動畫
3.2 圖像處理的基本操作(略)
3.3 圖像標記符IMG
3.3.1 插入圖像
在HTML中,使用IMG標記符可以在網頁中插入圖像,它有兩個基本屬性:
src 表示要插入圖像文件的URL
alt 表示圖像的簡單文本說明
3.3.2 設置圖像屬性
3.3.2.1 指定圖像的寬和高
IMG標記符中的width和height屬性可以指定圖像的寬度和高度,其單位可以是像素,也可以是百分數,如果用百分數,表示圖像占當前瀏覽器窗口大小的比例。
3.3.2.2 圖像的邊框
使用IMG標記符的border屬性,可以給圖像添加邊框效果,邊框的取值是像素數。
3.3.2.3 設置圖像周圍的空白
在IMG標記符內使用屬性hspace和vspace設置圖像周圍的空白,其中hspace表示水平方向的空白,vspace表示垂直方向的空白,它們的取值都是像素。
3.3.2.4 圖像的對齊
(1) 圖像在頁面中的對齊
設置圖像在頁面中的對齊,可以使用DIV或P標記符將IMG標記符括起開,然後使用DIV或P標記符的align屬性。
(2) 圖像與周圍內容的垂直對齊
使用IMG標記符的align屬性,可以控制圖像與周圍內容的垂直對齊。此時,align屬性的值可以是:
top 表示圖像的頂部與周圍內容的頂部對齊
middle 表示圖像的中央與周圍內容對齊
bottom 表示圖像的底部與周圍內容的底部對齊,此值為默認值
(3) 圖文混排時的圖像對齊
如果要在圖像的左、右一環繞文本,也是使用IMG標記符的align屬性,此時的align的取值是:
left 表示圖像居左,文本在圖像的右側
right 表示圖像居右,文本在圖像的左側
3.4 創建超鏈接
3.4.1 相對地址與絕對地址
3.4.1.1 什麼是URL
URL(Universal Resource Locator,統一資源定位器)是表示Web上資源的一種方法,通常可以理解為資源的地址,一個URL,通常包括三部分:一個協議代碼、一個主機地址,以及資源在主機上的路徑和文件名。
3.4.1.2 絕對URL與相對URL
(1) 絕對URL
絕對URL是指Internet上資源的完整地址,其形式通常如下:
協議://主機名[/[路徑/]資源文件名]
例如:
http://www.aust.e.cn
ftp://ftp.aust.e.cn/pub/j2sdk.zip
(2) 相對URL
相對URL是指Internet上資源相對於當前頁面的地址,它包含從當前頁面指向目標頁面的路徑。
當使用相對URL時,可以使用與DOS文件目錄類似的特殊符號:點(.)和雙點(..),分別表示當前目錄和上一級目錄。
相對URL本身並不能唯一資源,但瀏覽器會根據當前頁面的絕對URL正確理解相對URL。
3.4.2 頁面鏈接
創建超鏈接使用A標記符,它的最基本屬性是href用於指定鏈接的目標。其語法格式如下:
<a href=目標對象URL>超鏈接</a>
其中:在<a>與</a>之間可以用任何可單擊的對象作為超鏈接的源,例如:文字或圖像。
如果href屬性指定的文件格式是瀏覽器所能識別的格式,那麼單擊超鏈接時將會直接顯示其內容,若瀏覽器不能識別,那麼那麼瀏覽器將下載所鏈接的對象。
3.4.3 錨點鏈接
當頁面較長時,就需要在頁面內部進行跳轉,要實現這一功能,首先就為頁面中需要跳轉到的位置設立標志並命名,即建立「錨點」。這通過A標記符的name屬性來實現,語法格式如下:
<a name=標志名>[...]</a>
對於錨點的鏈接,就將href的值指定為符號#後標志名(錨點名)。如果將href的值指定為一個單獨的#號,則表示空鏈接,不做任何跳轉。
3.4.4 電子郵件鏈接
當瀏覽網頁的用戶單擊了電子郵件的超鏈接後,系統將自動啟動郵件客戶程序,並將郵件地址填寫到「收件人」欄中,用戶可能編輯並發該郵件。電子郵件超鏈接的格式如下:
<a href="mailto:收件人郵箱">聯系</a>
3.5 使用圖像映射
3.5.1 什麼是圖像映射
所謂圖像映射是指在一幅圖中定義若干個區域,每個區域中指定一個不同的超鏈接,當單擊不同的區域時便可以跳轉到相應的目標頁面。
3.5.2 創建圖像映射
3.5.2.1 定義映射區域
定義映射區域使用MAP標記符,在<MAP>和</MAP>之間添加映射區域。添加映射區域使用AREA標記符。該標記符具有三個基本屬性:
href 標識出目標的URL
shape 說明映射區域的形狀。取值可是:
rect 矩形
circle 圓形
poly 多邊形
default 整個圖像區域
coords 用於標識映射區域的邊界。
3.5.2.1 對映射區域進行引用
標記了映射區域之後,就可以通過在IMG標記符中使用usermap屬性來引用相應的映射信息。
一個完整的圖像映射語法如下:
<map name="mymap">
<area href=URL1 shape=rect coords="x1,y1,x2,y2">
<area href=URL2 shape=circle coords="x,y,r">
<area href=URL3 shape=poly coords="x1,y1,x2,y2,...,xn,yn">
</map>
<img src=image_URL usemap=#mymap>
注意:map標記符中,name屬性的取值必須與img標記符中,usemap屬性的取值相同,只是usemap屬性的值前面多了一個# 。
4.1 創建表格
4.1.1 表格的基本構成
表格由行和列組成,行列交叉構成了單元格,對於某些表格來說,還有用於說明表格用途的標題。
在HTML中創建一個普通的表格應包括以下標記符:
TABLE 用於定義整個表格,表格內的所有內容都應位於<TABLE>和</TABLE>之間。
CAPTION 用於定義表格的標題,表格的標題應置於<CAPTION>和</CAPTION>之間,該標記的align屬性說明標題的位置,其取值如下:
top 標題置於表格上部中央(默認)
bottom 標題置於表格下部中央
left 標題置於表格上部的左側
right 標題置於表格上部右側
TR(table row)用於定義表格的行,對於每一個表格行,都對應一個TR標記符。
TD(table data) 表格中和每一個單元格都對應於一個TD標記符。
TH(table heading)用來定義表格行或列的標題所在的單元格。
4.1.2 合並單元格
如果在網頁中需要創建不規則的表格,可以通過合並單元格來實現。
行合並
在<TD>或<TH>標記符內使用rowspan屬性可以進行行合並,rowspan的取值表示垂直方向上合並的行數。
列合並
在<TD>或<TH>標記符內使用colspan屬性可以進行列合並,colspan的取值表示水平方向上合並的列數。
4.2 表格的屬性設置
4.2.1 邊框與分隔線
4.2.1.1 frame屬性
frame屬性用於控制是否顯示邊框,以及如何顯示邊框,該屬性的取值可以是:
void 表示無邊框(默認值)
above 表示僅有頂部邊框
below 表示僅有底部邊框
hsides 表示僅有頂部和底部邊框
vsides 表示僅有左、右邊框
lhs 表示僅有左邊框
rhs 表示僅有右邊框
box 表示包含全部四個邊框
border 表示包含全部四個邊框
4.2.1.2 rules屬性
rules屬性用於控制是否顯示以及如何顯示單元格之間的分隔線,取值可以是以下幾種:
none 表示無分隔線(默認值)
rows 表示僅有行分隔線
cols 表示僅有列分隔線
all 表示有所有分隔線
groups 表示僅在行級和列組有分隔線(目前所有的瀏覽器都尚不支持)
4.2.1.3 border屬性
border屬性用於設置邊框的寬度,其值為像素數。如果設置border=「0」,則意味著frame=「void」,rules=「none」(除非另外設置);如果設置border為其它值(如何使用不指定值的單獨一個border,相當於border=「1」),則意味著frame=「border」,rules=「all」(除非另外設置)。
4.2.2 控制單元格空白
在TABLE標記符中使用cellspacing屬性可以控制單元格之間的空白,使用cellpadding屬性可以控製表格分隔線和單元格中數據之間的距離,這兩個屬性的取值通常都採用像素數。
4.2.3 表格的對齊
表格的對齊包括表格在頁面中的對齊和表格數據在單元格中的對齊。
4.2.3.1 表格的頁面對齊
表格在頁面中的對齊,可以直接在TABLE標記符中使用align屬性進行設置。另外,也可以使用DIV標記的align屬性設置表格的對齊,方法是將TABLE標記符嵌套在<DIV align="...">和</DIV>之間。
如果不使用TABLE標記符的align屬性進行設置,則跟在表格後的文本自動顯示在表格的下一行,不會形成環繞的效果。如果使用TABLE的align屬性進行設置,並且使用的是lefg或right值,則跟在表格後面的文本會僅次於表格的右邊或左邊,從而形成文本與表格的環繞效果。
4.2.3.2 表格內容的水平對齊
設置表格內容的水平對齊方法是:在標記符<TR>、<TH>、<TD>內使用align屬性進行設置,常的取值可以是:
center 表示單元格內容居中對齊
left 表示單元格內容左對齊(默認值)
right 表示單元格內容右對齊
justify 表示內容兩端對齊(有些瀏覽器不支持,如:IE)
4.2.3.3 表格內容的垂直對齊
設置表格內容的垂直對齊方法是:在標記符<TR>、<TH>、<TD>內使用valign屬性進行設置,常的取值可以是:
top 表示數據靠單元格頂部
bottom 表示數據靠單元格底部
middle 表示數據在單元格垂直方向上居中(默認值)
4.3 使用表格設計網頁布局
本節介紹表格在網頁中另一個重要的應用——設計頁面布局,其技術主要包括:控製表格和單元格的大小、設置表格和單元格的背景、使用嵌套表格等。
4.3.1 控製表格和單元格的大小
由於表格能將網頁劃分為任意大小的矩形區域,所以表格在網頁中更多地是用作排版工具。通過標記符的width和height屬性設置表格和單元格大小,這兩個屬性的取值可以是像素數,也可以是百分比。
4.3.2 設置表格和單元格的背景
在TABLE、TR、TH或TD標記符內使用bgcolor屬性設置背景顏色,在TABLE、TH或TD標記符內使用bac