首頁 > 開發者 > CSS

WEB開發必看(一):html和css的使用

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

 從今天開始我要出幾期關於WEB開發技巧的文章，希望給大家有所協助！這一篇主要介紹html和css的提示，在後期的文章中將會有javascript,jsp等與web開發相關的文章發表。

 

HTML篇

介紹一些常用的代碼，供大家參考：
一：顏色代碼
如果你想使用某種顏色，取得它的顏色值即可。比如，您想改變某些文字的顏色，您可以使用下面的代碼：<font color=#ffc060 size=2>改變#符號後的代碼即可改變顏色</font>

二：文字加粗 傾斜的代碼
◆文字加粗的代碼是: <b>你好</b> ◆文字傾斜的代碼是: <i>你好！</i> ◆底線字：<u></u>

三：文字連結代碼
如果您想點擊某處文字會串連到另外一個網頁的效果，這是超連結，代碼是這樣：
<a href="網站地址";>共用空間</a>如果要點了這個文字以後重新開啟一個視窗的話，代碼是：<a href="網站地址";; target="_blank">共用空間</a>

四：在網站上放圖片的代碼
如果你看到一個好看的圖片想放到網站上，代碼是這樣的：
<img src="/Article/UploadFiles/200605/20060507081900201.gif"; width="150" height="100">
後面的數字調節圖片的尺寸大小。

五：圖片連結代碼
如果要點一片就能開啟一個網站的連結代碼是這樣的：
<a href="http://www.163.com/";><img src="/Article/UploadFiles/200605/20060507081900201.gif"; width="150" height="100"></a>
如果要點一片就能開啟一個網站的連結，並且重新開啟一個視窗。代碼是這樣的：
<a href="http://www.163.com/";; target="_blank"><img src="/Article/UploadFiles/200605/20060507081900201.gif"; width="150" height="100"></a>上面的數字都能調節圖片尺寸大小。

六：換行代碼
如果你想換行，直接用Enter鍵是不行的，需要在您想換行的位置輸入<br>
，這樣就會分成兩行顯示 ，整個網站看起來也不會是一大片了，而是段落分明。

七：文字移動的代碼是
<marquee>這裡寫文字</marquee>

八：移動圖片的代碼
<marquee><img src="/Article/UploadFiles/200605/20060507081900241.jpg";><img src="/Article/UploadFiles/200605/20060507081900700.jpg";><img src="/Article/UploadFiles/200605/20060507081900831.jpg";><marquee>
把裡面的圖片地址換成你的就行 想多放一個圖片就按照格式在中間插入：
<img src="/Article/UploadFiles/200605/20060507081900700.jpg";>
裡面的圖片地址自己定。

九：背景音樂的代碼
如果想在你的網站上放上一段好聽的背景音樂，代碼是： <bgsound src="http://xxxxx.com/xxx.mid";loop=10>
<bgsound src="http://www.midifan.com/midi/music.ASP?id=3073";loop=30> 裡面的背景音樂地址你能自己替換。
前面的是音樂地址，一般都以mid或者mp3的形式結尾 後面的數字是播放次數。
http://www.midifan.com/midi/
這個網站都有好的背景音樂

十：在網站中插入一個flash動畫的代碼是
<embed width=200 height=200
src="http://flash.shangdu.com/view/2/fff.swf";> 裡面的動畫地址換成你的.動畫地址都要以swf的形式結尾。這點需要注意。

十一：開啟網站時候出現的歡迎詞代碼
<body onLoad= alert("你好，歡迎訪問本網站！")>

十二：關閉網站的時候出現的話
<body onUnload="window.alert('謝謝您的光臨,誠邀加盟.請記住本站網域名稱：http://www.yz126.com/ 站長信箱：****@yahoo.com.cn 歡迎諮詢')">

十三：開啟網站的時候自己做一個快顯視窗的廣告
<script language="javascript">
var TimerID=1;
window.open('http://163.com'/;,'','width=600,height=300,left=100,top=50');
</script>
裡面的 http://163.com/ 這個是你預先做好的一個網頁，後面的數字是調節大小和位置的，你自己多實驗幾次。

十四：滑鼠感應字型變紅色的代碼如下：插在<body></body>之間

<STYLE type=text/css>TD {
FONT-SIZE: 12px
}
BODY {
FONT-SIZE: 12px
}
INPUT {
FONT-SIZE: 12px
}
A:link {
COLOR: #000000; TEXT-DECORATION: none
}
A:visited {
COLOR: #000000; TEXT-DECORATION: none
}
A:active {
COLOR: blue; TEXT-DECORATION: none
}
A:hover {
COLOR: red; TEXT-DECORATION: underline
} .so {
BORDER-RIGHT: 1px ridge; BORDER-TOP: #ffffff 1px ridge; FONT-SIZE: 12px; BORDER-LEFT: #ffffff 1px ridge; BORDER-BOTTOM: 1px ridge; BACKGROUND-COLOR: #cccccc
}
</STYLE>

十五：禁止他人複製你網頁的代碼：

<body bgcolor="#ffffff"oncontextmenu="return false"onselectstart="return false">

十六：把其它網頁放入自已網頁中的代碼：

<IFRAME name=smjh align=center src="../../這裡換成你要放入網站的網址" frameBorder=0 width=760 scrolling=no height=300></IFRAME>

多視窗和應用

一、 什麼叫多視窗
　　我們用一個例子說明多視窗概念， 本內容首頁是一個多視窗網頁，它有三個視窗， 上面一個視窗，下面兩個視窗，左下方的視窗帶有捲軸。 從螢幕上我們可以看到，這三個視窗內容有一定的聯絡。螢幕上方的視窗是辦公電話的大分類，將辦公電話分成六類，每一類用一個矩形表徵圖表示，當滑鼠點擊上方視窗中的某一類時，左下方視窗的內容隨之改變，左下方視窗列出該類電話的部門。當滑鼠點擊左下方某個部門後，右下方視窗出現該部門的電話號碼。和單視窗的螢幕相比，多視窗的資訊量增加了，而且易於操作，非常直觀。
二、 分割視窗
　　在螢幕上分割多個視窗是如何?的呢？下面介紹用HTML書寫多視窗格式。在HTML中，使用<FRAMESET>做為分割視窗的標記。<FRAMESET>是一個雙向標記，有開始和結束標記。
　　<FRAMESET>標記內使用了一個標記符號<FRAME>，用它來指定每一個視窗的內容。包含<FRAMESET>的HTML文檔中不能包含<BODY>標記，如果在<FRAMESET>的定義中又使用了<BODY>標記，則瀏覽器只解釋<BODY>包含的內容，而忽略<FRAMESET>。
　　用<FRAMESET>……</FRAMESET>取代<BODY>……</BODY>標記後，可以在螢幕上安排多個視窗。
1：橫向分割視窗
　　<FRAMESET>的ROWS屬性說明視窗的橫向分割，ROWS的等號後面是一串數字，它們之間用逗號隔開，有幾個數字就劃分成幾個視窗，視窗之間有明顯的分隔線。ROWS後面的數字可以用像素值、 百分比或剩餘值以及這三種方式的混合使用。 下面用百分比表求法說明視窗的橫向分割。
　　ROWS等號後面使用百分比是最直觀的，每一個百分比數字表示視窗佔總視窗的百分比。例如，ROWS後面的百分數取值為20%、40%、40%，一般百數值在1%-100%之間，如果幾個視窗的取值總和超過百分之百，則每個視窗按比例縮小。如果不足百分之百，則每個視窗按比例擴大。
如例29其代碼如下
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>例29</title>
</head>

<frameset rows="20%,40%,40%">

<frame src="file1.htm">
<frame src="file2.htm">
<frame src="file3.htm">
</frameset><noframes>
</noframes>
</html>
顯示結果是將螢幕橫向分成三個視窗，視窗的比例是2：4：4。注意暗綠色字本代碼。
2：縱向分橫視窗
　　縱向分割視窗是在<FRAMESET>標記中，用COLS屬性實現的，COLS的使用方法與ROWS屬性使用方法相同。例如仿照橫向分割視窗的方法，按照百分比對螢幕做縱向分割。
例30 縱向分割視窗，其代碼如下:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>例30</title>
</head>

<frameset cols="20%,40%,40%">

<frame src="file4.htm"><frame src="file5.htm"><frame src="file6.htm"></frameset><noframes></noframes>
</html>
（注意暗綠色字型代碼）代碼中<fram>將在下面解釋。
3：縱向、橫向同時分割視窗
　　如果想在同一螢幕上同時做縱向和橫向分隔，則需要使用<FRAMESET>嵌套。格式如下：
　　<FRAMESET COLS=….>
　　<FRAMESET ROWS=….>
　　</FRAMESET>
　　<FRAMESET ROWS=…>
　　……….
　　</FRAMESET>
　　….
　　</FRAMESET>
　　例如，用ROWS和COLS兩個屬性可以設定這樣的視窗，將螢幕縱向分成左右兩部分，左邊分成上下兩個視窗，右邊分成上下三個視窗。
例31 在螢幕橫向縱向同時分割視窗。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>例31</title>
</head>

<frameset cols=50%,50%">
<frameset rows="50%,50%">
<frame src="file7.htm"><frame src="file8.htm"></frameset>
<frameset rows="33%,33%,33%">
<frame src="file9.htm"><frame src="file10.htm"><frame src="file11.htm"></frameset>
</frameset><noframes></noframes>
</html>
要仔細理解暗綠色字型的意思。其中<fram>將在下面解釋。
　　這個例31將螢幕縱向平均分隔成兩部分，每部分佔50%；左半部分用<FRAME>語句上下分成兩部分，每部分各佔50%;右半部分用<FRAME>語句上下分成三部分，每部分各佔33%。所以，這段語句執行的結果是螢幕上共有五個視窗，左邊兩上，右邊三個。
三、 視窗修飾
　　用FRAMESET分割視窗之後，需要在視窗內加入內容以及對視窗加以修飾，這裡介紹一個新的標記<frame>可以完成這兩個功能，本節介紹如何用<FRAME>修飾視窗。
　　<FRAME>是個單向標記。使朦朧和時將它寫在<frameset>的開始和結束標記之間，它用六個屬性描述每個視窗風格，這六個屬性是:SRC、NAME、MARGINWIDTH、MARGINHEIGHT、SCROLLING、NORESIZE。
應用<FRAM>的格式是：
　　<FRAMESET ROLS……>
　　<FRAME….>
１：下面介紹<FRAME>六個屬性
①：SRC屬性
SRC屬性用來連結一個HTML檔案，格式如下：
　SRC="URL"
如果一個<FRAME>中沒有SRC屬性，則該視窗顯示為空白。
②;NAME屬性
　NAME屬性工作表示該視窗的名字，該屬性是可選的。
③：MARGINWIDTH屬性
　MARGINWIDTH屬性是用來控制視窗內顯示的內容與視窗左右邊緣的距離，該屬性是取一個像素值，預設為1，若設定值小於1，則各個視窗與視窗之間的內容距離太近，顯示效果不好，該屬性是可選的。格式如下：
　MARGINWIDTH=n
④：MARGINHEIGHT屬性
　　MARGINHEIGHT屬性用來控制視窗內顯示內容與視窗上下邊緣的距離，與MARGINWIDTH使用相同，該屬性也是可選的。格式如下：
　MARGINHEIGHT=n
⑤：SCROLLING屬性
　 SCROLLING屬性，用於描述該視窗是否設有捲軸，它可以有YES/NO/AUTO三種取值。YES表示無論什麼情況都有捲軸；NO表示無論什麼情況都沒有捲軸；AUTO表示根據具體情況決定有無捲軸。也就是說，前兩種取值表示捲軸與視窗內容多少無關，而第三種取值表示當內容充滿窗時，才有捲軸。該屬性也是可選的，預設值是AUTO。格式如下：
　SCROLLING=YES或NO或AUTO
⑥：NORESIZE屬性
　NORESIZE屬性是一個標記，沒有取值。它說明使用者是否可以自行用滑鼠調整視窗大小，如果設定了NORESIZE屬性，則視窗不能調整。如果預設，則可以自行調整視窗大小。
2：<NOFRAMES>標記的使用
　　<NOFRAMES>標記是一個雙向標記，包含在<NOFRAMES>標記之間的內容，是給不能使用多視窗的使用者瀏覽的，而能夠使用多視窗的使用者，看不到<NOFRAMES>標記之間的內容。
　　例如，<NOFRAMES>的語句，給讀者一個提示，如果讀者使用版本低的瀏覽器，就會看到該語句標記的內容。格式如下：
<NOFRAMES>
如果你看到這個資訊，說明你的瀏覽器不能閱讀FRAME視窗的內容，請更換瀏覽器版本。
</NOFRAMES>
四:將檔案內容放入相應視窗
　　多視窗建立起來以後，要在各個視窗內放入相應內容。如本章前面的例子所述，螢幕上的每一個視窗對應一個FRAME語句。有<FRAME>標誌中的SRC屬性連結相應的檔案，該檔案內容就顯示在<FRAME>對應的視窗之中。各個視窗內容可以是互相獨立的，也可以是互相關聯的。如本頁面所求，右邊是列出目錄，當按一下滑鼠一個目錄時，右邊視窗中出現該目錄所對應的內容。
例32 將螢幕縱向分成兩個視窗，左視窗放一個檔案內容，右視窗放另一個檔案的內容，兩個視窗的內容相互獨立。其代碼如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>例32</title>
</head>
<FRAMESET COLS="50%,50%">
<frame src="UntitledFrame-1.htm">
<frame src="UntitledFrame-2.htm">
</FRAMESET><noframes></noframes>

</html>
　　如果視窗之間的內容是關聯的，滑鼠在一個視窗操作，另外一個視窗的內容會隨之改變，這就需要在視窗之間建立連結。怎樣實現這種連結呢？這裡我們介紹一個新的屬性TARCET，用這個屬性可以國在HTML的多個標記中，其中常用的幾種方式是：
1：寫在<A>標記中：除了寫出被連結的檔案之外，還要寫出被連結檔案將顯示的視窗名。
格式如下：
<a href="url"tarcet+"被連結的檔案名稱">
2：寫在<BASE>標記中
　　如果在同一個HTML檔案中有多個連結，這多個連結的內容又想在同一個視窗顯示，可以在這個HTML檔案中加入一個語句，用<BASE>標記寫在<HEAD>標記中。
格式如下：
<base trget="檔案名稱">
五、本章小結
　　本章重點講解多視窗的製作，介紹了兩個標記：<FRAMESET>....</FRAMESET>和<FRAME> 以及它們的屬性，另外，擴充了一個屬性TARGET的應用。
　　<FRAMESET>和<FRAME>這兩個標記，用來劃分視窗，並定義每個視窗的名稱及大小。利用〈FRAMESET〉的屬性，可以根據使用者的需要劃分任意個視窗，而每個視窗內顯示的內容，用<FRAME>標記引出。
　　TARCET這個屬性可以用在許多標記中，本章介紹了它在<A>和<BASE>標記中的使用。
本章需要熟悉的標記及屬性。
標記、屬性 用 途
<FRAMESET>....</FRAMESET> 多視窗標記
<ROWS> <FRAMESET>中的一個屬性，橫向分隔視窗，它的取值有四種方式：

剩餘值表示，如：*，*，
像素值表示：如20,30
百分比表示：如20%,30%
混合表示：如20%，30，*
CLOS <FRAMESET>中的一個屬性，縱向分隔視窗，它的取值與ROWS屬性相同
<FRAME> 定義一個視窗
SRC <FRAME>中的一個屬性，用於連結一個HTML檔案
NAME <FRAME>中的一個屬性，用於定義一個視窗的名稱
MARGINWIDTH <FRAME>的一個屬性，用於控制視窗內容與左右窗框的距離
MARGINHEIGHT <FRAME>的一個屬性，，用於控制視窗中內容與上下窗框的距離。
SCROLLING <FRAME>中的一個屬性，用於定義視窗是否設捲軸。有YES、NO、AUTO三種取值方式。
NOSIZE 是<FRAME>中的一個屬性，它是一個標誌性屬性，若<FRAME>中帶有NOSIZE，則視窗大小不能用滑鼠調整
<NOFRAME>...</NOFRAME> 當瀏覽器支援<FRAME>功能時，不顯示<NOFRAME>..</NOFRAME>之間的內容，當不支援時則顯示。
TARGET（<BAST>） 在多視窗顯示中，用於指定連結檔案的視窗，是<BASE>標記的一個屬性，同一個HTML檔案中被連結檔案放在由TARGET指定視窗中。
TARGET（<A>） 是<A>標記的一個屬性，<A>標記中連結的檔案內容放在由TARGET指定的視窗中。

網頁中使用CSS樣式表的五種方法

一、使用STYLE屬性

將STYLE屬性直接加在個別的元件標籤裡，<元件(標籤) STYLE="性質(屬性)1: 設定值1; 性質(屬性)2: 設定值2; ...}

例如：
<TD STYLE="COLOR:BLUE; font-size:9pt; font-family:"標楷體"; line-height:150%>
這種用法的優點 是可靈巧應用樣式於各標籤中，但是缺點則是沒有整篇檔案的『統一性』。

二、使用STYLE標籤

 將樣式規則寫在<STYLE>...</STYLE>標籤之中。
<STYLE TYPE="text/css">
<!--
樣式規則表
-->
</STYLE>
例如：
<STYLE TYPE="text/css">
<!--
BODY {
　　color: BLUE;
　　background: #FFFFCC;
　　font-size: 9pt}
TD, P {
　　COLOR: GREEN;
　　font-size: 9pt}
-->
</STYLE>
通常是將整個的 <STYLE>...</STYLE>結構寫在網頁的<HEAD> </HEAD>部份之中。這種用法的優點就是在於整篇檔案的統一性，只要是有聲明的的元件即會套用該樣式規則。缺點就是在個別元件的靈活度不足。

三、使用 LINK標籤

 將樣式規則寫在.css的樣式檔案中，再以<LINK>標籤引入。
假設我們把樣式規則存成一個example.css的檔案，我們只要在網頁中加入
<LINK REL=STYLESHEET TYPE="text/css" HREF="example.css">
即可套用該樣式檔案中所制定好的樣式了。 通常是將LINK標籤寫在網頁的<head></head>部份之中。這種用法的優點就是在於可以把要套用相同樣式規則的數篇檔案都指定到同一個樣式檔案即可。缺點也是在個別檔案或元件的靈活度不足。

四、使用@import引入

 跟LINK用法很像，但必　放在<STYLE>...</STYLE> 中。
<STYLE TYPE="text/css">
<!--
　　@import url(引入的樣式表的位址、路徑與檔名);
-->
</STYLE>
例如：
<STYLE TYPE="text/css">
<!--
　　@import url(http://yourweb/ example.css);
-->
</STYLE>
要注意的是，行末的分號是絕對不可少的！

五、使用<span></span>標記引入樣式

例如：<span style="font:12px/20px  宋體 #000000;">網頁教學網</span>

 

 

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
html css udemy udemy html css javascript html and css book html and css duckett search box html css html css editor html css crash course
相關文章
css實現滑鼠滑過改變文字(中文變英文)
selenium使用Xpath+CSS+JavaScript+jQuery的定位方法（治療selenium各種定位不到，點...
使用CSS巧妙地製作背景色漸層動畫執行個體
詳解css display屬性中常見的四個屬性值用法（代碼執行個體）
CSS修改iframe內的樣式問題
如何用CSS改變上劃線、底線以及刪除線的顏色呢？

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More