動(dòng)力節(jié)點(diǎn)教程drp分銷資源計(jì)劃相關(guān)html css javascript_第1頁(yè)
動(dòng)力節(jié)點(diǎn)教程drp分銷資源計(jì)劃相關(guān)html css javascript_第2頁(yè)
動(dòng)力節(jié)點(diǎn)教程drp分銷資源計(jì)劃相關(guān)html css javascript_第3頁(yè)
動(dòng)力節(jié)點(diǎn)教程drp分銷資源計(jì)劃相關(guān)html css javascript_第4頁(yè)
動(dòng)力節(jié)點(diǎn)教程drp分銷資源計(jì)劃相關(guān)html css javascript_第5頁(yè)
已閱讀5頁(yè)，還剩98頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

HTML授課：王勇HyperTextMarkupLanguage超文本標(biāo)記語(yǔ)言，WEB開發(fā)語(yǔ)言HTML簡(jiǎn)介HTML語(yǔ)法HTML文檔結(jié)構(gòu)HTML字體HTML文字布局HTML圖像HTML表單HTML表格HTML框架總結(jié)培訓(xùn)內(nèi)容HyperTextMarkupLanguage超文本(文字+圖片+音視+鏈接…)標(biāo)記語(yǔ)言(瀏覽器根據(jù)標(biāo)記顯示內(nèi)容)來(lái)自于SGML(標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言)專注于在Web上傳遞信息是寫給瀏覽器的語(yǔ)言歷史HTML1.0–HTML2.0(IETF制定)–HTML4.0(最終版)W3CIETF–InternetEngineeringTaskForceHTTP協(xié)議RFC等RFC2616Http1.1RFC1521MIMEW3C–WorldWideWebConsortium()HTMLXML等XHTML符合XML標(biāo)準(zhǔn)的HTMLDHTMLDy’namicHTML（X）HTML/CSS/JavaScript的綜合運(yùn)用HTML簡(jiǎn)介<html> <head> <title></title> <meta> ...... </haed> <body>

…… </body></html>HTML文檔結(jié)構(gòu)注意：HTML中不區(qū)分大小寫，可以大小寫混合寫，一般都小寫的比較多<head>標(biāo)簽<title>標(biāo)簽：設(shè)置標(biāo)題，設(shè)置完成后可以顯示到IE窗口的標(biāo)題上<style>標(biāo)簽：引入css文件<script>標(biāo)簽：引入javascript文件<head> <title></title> <style></style> <script></script></head>01.html<meta><meta>：用于設(shè)置一些頭信息<metahttp-equiv=“content-type”content=“text/html;charset=gb2312”><metahttp-equiv=“refresh”content=“”><metaname="keywords"content=“"><metaname="description"content=“"><metahttp-equiv="expires"content="0">

<metahttp-equiv="pragma"content="no-cache"><style>…</style>定義CSS樣式<scriptlanguage=“”>…</Script>,引入js文件body中常用標(biāo)簽bgcolor指背景顏色background指背景圖片<bodybgcolor=""background=""></body>02.html03.html橫線-<hr>size—長(zhǎng)度width—寬度color—顏色，color為16進(jìn)制RGB數(shù)字，或者是下列預(yù)定義色彩,blue/yellow/red……

<hrsize=""width=""color="">04.html超級(jí)鏈接-<a>href—urltarget—目標(biāo)窗口，關(guān)于目標(biāo)窗口講解frame幀的時(shí)候再說(shuō)<ahref=""target=""></a>05.html路徑問(wèn)題絕對(duì)路徑：c:\window\xxx.html或相對(duì)路徑：images/tt.gif../imeage/tt.gif../../test.html相對(duì)路徑其實(shí)就是相對(duì)URL的地址URL、URI、URNURI(統(tǒng)一資源標(biāo)識(shí))，URL(統(tǒng)一資源定位)，URN（統(tǒng)一資源名稱）URI標(biāo)識(shí)網(wǎng)絡(luò)上的資源URL與URN的區(qū)別，前者不僅標(biāo)識(shí)資源，而且還指出了訪問(wèn)資源的方式，如：用何種協(xié)議(http,ftp…..),URN則沒(méi)有

URIURLURN標(biāo)題字體-<h1~6>可以取值1,2,3,4,5,6標(biāo)題顯示為黑體字這些標(biāo)記自動(dòng)插入一個(gè)空行，不必用<p>標(biāo)記再加空行數(shù)字越小字體越大<h#>…</h#>06.html字體設(shè)置size—1,2,3,4,5,6,7color—字體顏色，color為16進(jìn)制RGB數(shù)字，或者是下列預(yù)定義色彩,blue/yellow/red……

<fontsize=""color="">…</font>07.html文字設(shè)置標(biāo)簽描述<b>…</b>黑體<i>…</i>斜體<u>…</u>下劃線<s>…</s>中劃線<sup>…</sup>上標(biāo)<sub>…</sub>下標(biāo)08.html特殊字符<<>>&&

空格""09.html<div>…</div><span>…</span>文字的分區(qū)顯示<ul><li>…</ul>無(wú)序列表<ol><li>…</ol>有序列表<p>回車換行<br>換行<pre>…<pre>保留原始格式文字布局10.html圖片-<imag>src--圖片路徑，最好使用相對(duì)路徑alt--當(dāng)鼠標(biāo)放到圖片上顯示出提示信息width—圖片寬度，如果不指定按原始寬度height—圖片高度，如果不指定按原始高度<imgsrc=""alt=""width=""height="">11.html表單-<form>action提交給服務(wù)器的那個(gè)程序來(lái)處理（如：把表單中的數(shù)據(jù)保存到數(shù)據(jù)庫(kù)中）method，可以取值get或postget—發(fā)送數(shù)據(jù)的大小有限制（256byte），表單中的數(shù)據(jù)顯示在url后面，如：user.html?userid=zhangsan&username=張三post—發(fā)送數(shù)據(jù)的大小沒(méi)有限制，而且不會(huì)現(xiàn)在在url后面<inputtype=""name"">type可以取值text/password/checkbox/radio/select/textarea/submit/reset/button/image/hiddenname輸入域的名字基本語(yǔ)法<formaction=""method=""><inputtype=""name="">

……

……</form>文字輸入-textid—唯一標(biāo)識(shí)name—名稱value—值size—長(zhǎng)度maxlength—最大長(zhǎng)度<inputtype="text"name=""value=""size=""maxlength="">12.html密碼輸入-passwordid—唯一標(biāo)識(shí)name—名稱value—值size—長(zhǎng)度maxlength—最大長(zhǎng)度<inputtype="password"name=""value=""size=""maxlength="">13.html復(fù)選框-checkboxid—唯一標(biāo)識(shí)name—名稱，多個(gè)時(shí)名稱相同value—值checked—選中的checkbox<inputtype="checkbox"name=""value=""checked>14.html單選框-radioid—唯一標(biāo)識(shí)name—名稱，多個(gè)時(shí)名稱相同value—值checked—選中的radio<inputtype="radio"name=""value=""checked>15.html列表框-selectid—唯一標(biāo)識(shí)name--名稱size--列表框的長(zhǎng)度multiple—可以實(shí)現(xiàn)多選的列表框<option>,可以有optionvalue—列表框中的值selected—指定哪一項(xiàng)被選中 <selectname=""size=""multiple><optionvalue=""selected>…</option></select>16.html文本區(qū)域-textareaid—唯一標(biāo)識(shí)name--名稱rows-行數(shù) cols-列數(shù)<textareaname=""rows=""cols="">…</textarea>17.html按鈕-buttontypebutton—點(diǎn)擊按鈕可以提交數(shù)據(jù)，一般適合于表單中多個(gè)buttonsubmit—點(diǎn)擊按鈕將該form中的信息提交reset—點(diǎn)擊按鈕將該form中的信息重置image—可以點(diǎn)擊圖片提交<inputtype=""name=""value="">18.html隱藏表單-hidden隱含域其實(shí)和正常的輸入域一樣，只是不會(huì)將數(shù)據(jù)顯示到頁(yè)面上，因?yàn)榉诺诫[含域中的數(shù)據(jù)，沒(méi)有必要讓用戶看，因?yàn)檫@些數(shù)據(jù)大部分是控制數(shù)據(jù)<inputtype="hidden"name=""value="">19.html表格border--表格邊框尺寸width—表格寬度，可以用百分比，可以用數(shù)值align—對(duì)齊方式,left/right/center<tr>--行<td>--列align—對(duì)齊方式，left/right/centercolspan—跨多列<tableborder=""width=""align=""><tr><tdalign=""width=""colspan=""></td> </tr></talbe>20.html框架窗口中正常情況下只能顯示一個(gè)網(wǎng)頁(yè)，采用幀可以將窗口分隔出多個(gè)窗口，每個(gè)窗口對(duì)應(yīng)一個(gè)html文件<html> <head><title>Frame</title></head>

<!--注意不能有body標(biāo)簽--> <!-- <body> --> <framesetcols="18%,*"> <framename="left"src="21_1.html"> <framename="right"src="21_2.html"> </frameset> <!-- </body> --></html>cols表示列，如果多列采用逗號(hào)間隔，百分比表示列的寬度，星號(hào)表示剩余寬度，如果是行可以采用rows,用法同cols,如以下為兩列：一列幀大小為18%,另一列幀大小為屏幕的剩余部分src為每幀對(duì)應(yīng)的文件名稱21.htmlHTML中target屬性的4個(gè)內(nèi)定名稱_blank，表示新開啟一個(gè)瀏覽器窗口_self，此屬性為默認(rèn)屬性，在當(dāng)前窗口顯示_parent，表示在當(dāng)前窗口的直接父幀窗口（直接上一級(jí)窗口）顯示_top,在最頂層窗口顯示target屬性值可以直接賦值幀的名稱22.html隱含幀隱含幀使用的標(biāo)簽為<iframe>，隱含幀不需要放到<frameset>標(biāo)簽中，使用隱含幀，可以實(shí)現(xiàn)網(wǎng)頁(yè)局部數(shù)據(jù)的顯示的滾動(dòng)和局部數(shù)據(jù)刷新23.html總結(jié)編輯器ultraeditDreamveaver是重點(diǎn)表格表單參考資料google或百度多參考其他網(wǎng)站的html設(shè)計(jì)

CSS授課：王勇CascadeStyleSheet層疊樣式表，可以修飾HTML綱要什么是CSSCSS工作原理顏色與背景字體文本鏈接邊框Id選擇器類選擇器總結(jié)什么是CSSCSS是CascadingStyleSheets（級(jí)聯(lián)樣式表）的縮寫。可以用CSS做什么？CSS是一種樣式表語(yǔ)言，用于為HTML文檔定義布局。例如，CSS涉及字體、顏色、邊距、高度、寬度、背景圖像、高級(jí)定位等方面。HTML可以用于為網(wǎng)站添加布局效果，但有可能被誤用。而CSS則提供了更多選擇，而且更為精確、完善?，F(xiàn)在所有瀏覽器都支持CSS。CSS跟HTML的區(qū)別在哪里？HTML用于結(jié)構(gòu)化內(nèi)容；CSS用于格式化結(jié)構(gòu)化的內(nèi)容。也就是CSS是裝飾HTML的采用CSS有哪些好處？通過(guò)單個(gè)樣式表控制多個(gè)文檔的布局；更精確的布局控制；為不同的媒體類型（屏幕、打印等）采取不同的布局；無(wú)數(shù)高級(jí)、先進(jìn)的技巧?？梢造`活的更換網(wǎng)頁(yè)風(fēng)格CSS工作原理基本的CSS語(yǔ)法用HTML設(shè)置紅色作為網(wǎng)頁(yè)的背景色：<bodybgcolor="#FF0000">用CSS設(shè)置紅色作為網(wǎng)頁(yè)的背景色body{background-color:#FF0000;}

CSS語(yǔ)法由三部分構(gòu)成：選擇器、屬性和值：selector{property:value}選擇器(selector)通常是你希望定義的HTML元素或標(biāo)簽，屬性(property)是你希望改變的屬性，并且每個(gè)屬性都有一個(gè)值。屬性和值被冒號(hào)分開，并由花括號(hào)包圍，這樣就組成了一個(gè)完整的樣式聲明為HTML文檔應(yīng)用CSS，有三種方法可供選擇。下面對(duì)這三種方法進(jìn)行了概括。我們建議你對(duì)第三種方法（即外部樣式表）予以關(guān)注。CSS工作原理方法1：行內(nèi)樣式表（style屬性）為HTML應(yīng)用CSS的一種方法是使用HTML屬性style。我們?cè)谏侠幕A(chǔ)之上，通過(guò)行內(nèi)樣式表將頁(yè)面背景設(shè)為紅色：<html><head> <title>例子</title></head><bodystyle="background-color:#FF0000;"><p>這個(gè)頁(yè)面是紅色的</p></body></html>css_01.htmlCSS工作原理方法2：內(nèi)部樣式表（style元素）為HTML應(yīng)用CSS的另一種方法是采用HTML元素style。比如像這樣：html><head><title>例子</title><styletype="text/css">body{background-color:#FF0000;}</style></head><body><p>這個(gè)頁(yè)面是紅色的</p></body></html>css_02.htmlCSS工作原理方法3：外部樣式表（引用一個(gè)樣式表文件），推薦此方法外部樣式表就是一個(gè)擴(kuò)展名為css的文本文件。跟其他文件一樣，你可以把樣式表文件放在Web服務(wù)器上或者本地硬盤 上。例如，樣式表文件名為style.css，它通常被存放于名為style的目錄中。style.css文件內(nèi)容如下：

body{background-color:#FF0000;}如何在一個(gè)HTML文檔里引用一個(gè)外部樣式表文件（style.css）<html><head><title>我的文檔</title><linkrel="stylesheet"type="text/css"href=“style/style.css"/></head><body> <h1>我的第一個(gè)樣式表</h1></body></html>

這一方法可以令你省去許多工作。例如，假設(shè)你要修改某網(wǎng)站的所有網(wǎng)頁(yè)（比方說(shuō)有100個(gè)網(wǎng)頁(yè)）的背景顏色，采用外部樣式表可以避免你手工一一修改這100個(gè)HTML文檔的工作。css_03.html顏色與背景主要屬性colorbackground-colorbackground-imagebackground-repeatbackground顏色與背景-colorcolor用于指定元素的前景色例如，假設(shè)你要讓頁(yè)面中的所有標(biāo)題（headline）都顯示為深紅色，而這些標(biāo)題采用的都是h1元素，那么可以用下面的代碼來(lái)實(shí)現(xiàn)把h1元素的前景色設(shè)為紅色。h1{ color:#ff0000;}顏色值可以用十六進(jìn)制表示（比如上例中的#ff0000），也可以用顏色名稱（比如“red”）或RGB值（比如rgb(255,0,0)）表示。color-test.html顏色與背景-background-colorbackground-color用于指定元素的背景色因?yàn)閎ody元素包含了HTML文檔的所有內(nèi)容，所以，如果要改變整個(gè)頁(yè)面的背景色的話，那么為body元素應(yīng)用background-color屬性就行了。你也可以為其他包含標(biāo)題或文本的元素單獨(dú)應(yīng)用背景色。在下例中，我們?yōu)閎ody和h1元素分別應(yīng)用了不同的背景色。body{ background-color:#FFCC66;}h1{ color:#990000; background-color:#FC9804;}注意：我們?yōu)閔1元素應(yīng)用了兩個(gè)CSS屬性，它們之間以分號(hào)（“;”）分隔background-color-test.html顏色與背景-background-imagebackground-image用于設(shè)置背景圖像如果要把圖片作為網(wǎng)頁(yè)的背景圖像，只要在body元素上應(yīng)用background-image屬body{ background-color:#FFCC66; background-image:url("butterfly.gif");}注意我們指定圖片存放位置的方式：url("butterfly.gif")。這表明圖片文件和樣式表存放在同一目錄下。你也可以引用存放在其他目錄的圖片，只需給出存放路徑即可（比如url("../images/butterfly.gif")）；此外，你甚至可以通過(guò)給出圖片的地址來(lái)引用因特網(wǎng)（Internet）上的圖片（比如url("")）background-image-test.html顏色與背景-background-repeatbackground-repeat就是用于控制平鋪的background-repeat的四種不同取值background-repeat:repeat-x圖像橫向平鋪background-repeat:repeat-y圖像縱向平鋪background-repeat:repeat圖像橫向和縱向都平鋪（默認(rèn)）background-repeat:no-repeat圖像不平鋪為了避免平鋪背景圖像，代碼應(yīng)該這樣body{ background-color:#FFCC66; background-image:url("butterfly.gif"); background-repeat:no-repeat;}background-repeat-test.html顏色與背景-background縮寫[background]CSS屬性background是上述所有與背景有關(guān)的屬性的縮寫用法。使用background屬性可以減少屬性的數(shù)目，因此令樣式表更簡(jiǎn)短易讀。比如說(shuō)下面五行代碼：background-color:#FFCC66;background-image:url("butterfly.gif");background-repeat:no-repeat;background-attachment:fixed;background-position:rightbottom;如果使用background屬性的話，實(shí)現(xiàn)同樣的效果只需一行代碼即可background:#FFCC66url("butterfly.gif")no-repeatfixedrightbottom;各個(gè)值應(yīng)按下列次序來(lái)寫：[background-color]|[background-image]|[background-repeat]|[background-attachment]|[background-position]如果省略某個(gè)屬性不寫出來(lái)，那么將自動(dòng)為它取缺省值。background-test.html字體主要屬性font-familyfont-stylefont-sizefont字體-font-family字體族[font-family]CSS屬性font-family的作用是設(shè)置一組按優(yōu)先級(jí)排序的字體列表，如果該列表中的第一個(gè)字體未在訪問(wèn)者計(jì)算機(jī)上安裝，那么就嘗試列表中的下一個(gè)字體，依此類推，直到列表中的某個(gè)字體是已安裝的。下面是一個(gè)按優(yōu)先級(jí)排列的字體列表的例子：h1{font-family:arial,verdana,sans-serif;}h2{font-family:"TimesNewRoman",serif;}h1標(biāo)題將采用Arial字體顯示。如果訪問(wèn)者的計(jì)算機(jī)未安裝Arial，那么就使用Verdana字體。假如Verdana字體也沒(méi)安裝的話，那么將采用一個(gè)屬于sans-serif族類的字體來(lái)顯示這個(gè)h1標(biāo)題。注意我們?yōu)椤癟imesNewRoman”采用的寫法：因?yàn)槠渲邪崭?，所以我們用引?hào)將它括起來(lái)。font-family-test.html字體-font-style字體樣式[font-style]CSS屬性font-style定義所選字體的顯示樣式：normal（正常）、italic（斜體）或oblique（傾斜）。在下例中，所有h2標(biāo)題都將顯示為斜體。 h1{font-family:arial,verdana,sans-serif;}h2{font-family:"TimesNewRoman",serif;font-style:italic;}font-style-test.html字體-font-size字體大小[font-size]字體大小可通過(guò)多種不同單位（比如像素或百分比等）來(lái)設(shè)置。在本教程中，我們將關(guān)注于最常用和最合適的單位。比如：h1{font-size:30px;}h2{font-size:12pt;}h3{font-size:120%;}p{font-size:1em;}上面四種單位有著本質(zhì)的區(qū)別?！畃x’和‘pt’將字體設(shè)置為固定大小，而‘%’和‘em’允許頁(yè)面瀏覽者自行調(diào)整字體的顯示尺寸。font-size-test.html字體-fontCSS屬性font是上述各有關(guān)字體的CSS屬性的縮寫用法。比如說(shuō)下面四行應(yīng)用于p元素的代碼：p{ font-style:italic; font-weight:bold; font-size:30px; font-family:arial,sans-serif;}如果用font屬性的話，上述四行代碼可簡(jiǎn)化為：p{ font:italicbold30pxarial,sans-serif;}font屬性的值應(yīng)按以下次序書寫：font-style|font-variant|font-weight|font-size|font-familyfont-test.html文本主要屬性text-aligntext-decorationletter-spacingtext-transform文本-text-align文本對(duì)齊[text-align]CSS屬性text-align與HTML屬性align的功能相同。該屬性的值可以是：left（左對(duì)齊）、right（右對(duì)齊）或者center（居中）。除了上面三種選擇以外，你還可以將該屬性的值設(shè)為justify（兩端對(duì)齊），即伸縮行中的文字以左右靠齊。報(bào)刊雜志經(jīng)常采用這種布局。在下例中，表中數(shù)據(jù)（td）被設(shè)置為居中。正常的文本段落被設(shè)置為兩端對(duì)齊。td{ text-align:center;}p{ text-align:justify;}text-align-test.html文本-text-decoration文本裝飾[text-decoration]CSS屬性text-decoration令我們可以為文本增添不同的“裝飾”或“效果”。例如，你可以為文本增添下劃線、刪除線、上劃線等等。在接下來(lái)的例子中，我們?yōu)閔1標(biāo)題增添了下劃線，為h2標(biāo)題增添了上劃線，為h3標(biāo)題增添了刪除線。h1{ text-decoration:underline;}h2{ text-decoration:overline;}h3{ text-decoration:line-through;}text-decoration-test.html文本-letter-spacing字符間距[letter-spacing]CSS屬性letter-spacing用于設(shè)置文本的水平字間距。我們可以把期望的字間距寬度作為這個(gè)屬性的值。例如，假如你希望p元素里的文本段落的字間距為3個(gè)像素，而h1標(biāo)題的字間距為6個(gè)像素，代碼可以這樣寫：h1{ letter-spacing:6px;}p{ letter-spacing:3px;}letter-spacing-test.html文本-text-transform文本轉(zhuǎn)換[text-transform]CSS屬性text-transform用于控制文本的大小寫。無(wú)論字母本來(lái)的大小寫，你可以通過(guò)該屬性令它首字母大寫（capitalize）、全部大寫（uppercase）或者全部小寫（lowercase）。比如，單詞“headline”在展現(xiàn)給網(wǎng)頁(yè)瀏覽者時(shí)，可以是“HEADLINE”或者“Headline”。text-transform屬性有四個(gè)可選值：capitalize，將每個(gè)單詞的首字母轉(zhuǎn)換為大寫。例如：“johndoe”將被轉(zhuǎn)換為“JohnDoe”。uppercase，所有字母都轉(zhuǎn)換為大寫。例如：“johndoe”將被轉(zhuǎn)換為“JOHNDOE”。lowercase，所有字母都轉(zhuǎn)換為小寫。例如：“JOHNDOE”將被轉(zhuǎn)換為“johndoe”。none，不作任何轉(zhuǎn)換——文本怎么寫的就怎么顯示。來(lái)舉個(gè)例子，我們將使用一個(gè)姓名列表。所有姓名都用<li>（列表項(xiàng)）標(biāo)簽來(lái)標(biāo)記。我們希望對(duì)姓名采用首字母大寫的方式，而對(duì)標(biāo)題采用全部大寫的方式。查看過(guò)該例的HTML代碼后你會(huì)發(fā)現(xiàn)，其實(shí)在HTML代碼里我們寫的姓名和標(biāo)題全部都是小寫h1{ text-transform:uppercase;}li{ text-transform:capitalize;}letter-spacing-test.html鏈接前面幾課學(xué)到的屬性也可以應(yīng)用到鏈接上（比如修改顏色、字體、添加下劃線等）。但不同的是，CSS允許你根據(jù)鏈接是未訪問(wèn)的、已訪問(wèn)的、活動(dòng)的、是否有鼠標(biāo)懸停等分別定義不同的屬性。這樣，我們便可為網(wǎng)站增添奇特而有用的效果。你需要通過(guò)偽類（pseudo-class）來(lái)控制這些效果。偽類是什么？偽類（pseudo-class）令你可以在為HTML元素定義CSS屬性的時(shí)候?qū)l件和事件考慮在內(nèi)我們來(lái)看一個(gè)例子。正如你所知道的，在HTML里，鏈接是通過(guò)a元素來(lái)定義的。因此，在CSS里，我們可以將a作為一個(gè)選擇器selectora{ color:blue;}

鏈接一個(gè)鏈接可以有不同的狀態(tài)。例如，它可以是已訪問(wèn)過(guò)的，也可以是未訪問(wèn)過(guò)的。你可以通過(guò)偽類分別為訪問(wèn)過(guò)的鏈接和未訪問(wèn)過(guò)的鏈接設(shè)置不同的樣式。a:link{ color:blue;}a:visited{ color:red;}為未訪問(wèn)過(guò)的鏈接和已訪問(wèn)過(guò)的鏈接分別使用偽類a:link和a:visited?；顒?dòng)的鏈接對(duì)應(yīng)的偽類為a:active，有鼠標(biāo)懸停的鏈接對(duì)應(yīng)的偽類為a:hover。鏈接-偽類：link和偽類：visited偽類:link用于瀏覽者從未訪問(wèn)過(guò)的鏈接。在下面的示例代碼中，我們將未訪問(wèn)過(guò)的鏈接設(shè)為淺藍(lán)色。a:link{ color:#6699CC;}偽類：visited偽類:visited用于瀏覽者已訪問(wèn)過(guò)的鏈接。比如，下面的代碼將已訪問(wèn)過(guò)的鏈接設(shè)為深紫色：a:visited{ color:#660099;}鏈接-偽類：active和偽類：hover偽類：active偽類:active用于活動(dòng)的鏈接（即獲得當(dāng)前焦點(diǎn)的鏈接）。下例將活動(dòng)的鏈接設(shè)為具有黃色背景：a:active{ background-color:#FFFF00;}偽類：hover偽類:hover用于有鼠標(biāo)懸停的鏈接。這能制造出有趣的效果。例如，如果你要當(dāng)鼠標(biāo)光標(biāo)移到鏈接上時(shí)將鏈接顯示為橙色斜體，那么CSS可以這樣寫：a:hover{ color:orange; font-style:italic;}鏈接-有鼠標(biāo)懸停的鏈接的效果例1a：字符間距可以用letter-spacing屬性來(lái)調(diào)整字符間距。現(xiàn)在為了取得特殊效果，我們將它應(yīng)用到鏈接上a:hover{ letter-spacing:10px; font-weight:bold; color:red;}例1b：大寫和小寫可以通過(guò)text-transform屬性來(lái)轉(zhuǎn)換字母的大小寫。這也可用于為鏈接制造效果：a:hover{ text-transform:uppercase; font-weight:bold; color:blue; background-color:yellow;}鏈接-去掉鏈接的下劃線要去掉下劃線，只要把text-decoration屬性的值設(shè)為none就行了a{ text-decoration:none;}除此以外，text-decoration屬性也可以與其它屬性一起應(yīng)用在偽類上。a:link{ color:blue; text-decoration:none;}a:visited{ color:purple; text-decoration:none;}a:active{ background-color:yellow; text-decoration:none;}a:hover{ color:red; text-decoration:none;}a-link-visited-active-hover-test1.htmla-link-visited-active-hover-test2.html邊框設(shè)置對(duì)象的邊框樣式。border:border-width||border-style||border-colorborder-widthlength:由浮點(diǎn)數(shù)字和單位標(biāo)識(shí)符組成的長(zhǎng)度值,不可為負(fù)值border-stylenone:無(wú)邊框,默認(rèn)值solid:實(shí)線邊框double:雙線邊框border-colorcolor:指定顏色border-collapseseparate:默認(rèn)值。邊框獨(dú)立（標(biāo)準(zhǔn)HTML）collapse:相鄰邊被合并邊框,制作表格示例，表格寬度為1px，實(shí)線，黑色

table{ border:1pxsolidblack; border-collapse:collapse; } td{ border:1pxsolidblack; border-collapse:collapse; }border-test.htmlID選擇器id選擇器可以為標(biāo)有特定id的HTML元素指定特定的樣式。id選擇器以"#"來(lái)定義。下面的兩個(gè)id選擇器，第一個(gè)可以定義元素的顏色為紅色，第二個(gè)定義元素的顏色為綠色：#red{color:red;}#green{color:green;}下面的HTML代碼中，id屬性為red的p元素顯示為紅色，而id屬性為green的p元素顯示為綠色。<pid="red">這個(gè)段落是紅色。</p><pid="green">這個(gè)段落是綠色。</p>注意：id屬性只能在每個(gè)HTML文檔中出現(xiàn)一次id-selector-test.html類選擇器在CSS中，類選擇器以一個(gè)點(diǎn)號(hào)顯示：.center{text-align:center}在上面的例子中，所有擁有center類的HTML元素均為居中。在下面的HTML代碼中，h1和p元素都有center類。這意味著兩者都將遵守".center"選擇器中的規(guī)則。<h1class="center">Thisheadingwillbecenter-aligned</h1><pclass="center">Thisparagraphwillalsobecenter-aligned.</p>注意：類名的第一個(gè)字符不能使用數(shù)字！它無(wú)法在Mozilla或Firefox中起作用。class-selector-test.htmlID選擇器和類選擇器的區(qū)別？A1：二者主要的區(qū)別在哪里呢？id你只能用來(lái)定義單一元素，定義二個(gè)以后。頁(yè)面不會(huì)出現(xiàn)什么問(wèn)題，但是W3檢測(cè)的時(shí)候認(rèn)為你頁(yè)面不符合標(biāo)準(zhǔn)；class是類，同一個(gè)class可以定義多個(gè)元素。就頁(yè)面效果而言，兩個(gè)東西的視覺(jué)效果幾乎無(wú)差別。A2：id選擇符為什么要少用，它有有什么局限性？單一使用的樣式用id，需要程序、js動(dòng)態(tài)控制的樣式用id，id在頁(yè)面只能使用一次！提供少用id，因?yàn)閕d可能和頁(yè)面嵌的程序沖突（比如名稱相同等）！A3：我該在什么時(shí)候使用ID，什么時(shí)候使用class？單一的元素，或需要程序、JS控制的東西，需要用id定義；重復(fù)使用的元素、類別，用class定義。總結(jié)掌握基本的即可如果專業(yè)從事網(wǎng)頁(yè)設(shè)計(jì)必須對(duì)CSS有深入了解學(xué)習(xí)方法參考其他網(wǎng)站CSS的應(yīng)用Google或百度

JAVASCRIPT授課：王勇提高網(wǎng)頁(yè)的互動(dòng)能力綱要JavaScript概述第一個(gè)JavaScript程序JavaScript基本語(yǔ)法運(yùn)算符控制語(yǔ)句自定義JavaScript對(duì)象JavaScript內(nèi)置對(duì)象數(shù)組DOM編程JavaScript與正則表達(dá)式JavaScript概述JavaScript是一種腳本語(yǔ)言，主要提高網(wǎng)頁(yè)的互動(dòng)性驗(yàn)證表單Ajax技術(shù)操作網(wǎng)頁(yè)元素特效JavaScript可以被瀏覽器（IE，firefox）解析并運(yùn)行Javascript的替代品JavaAppletActiveXVBScriptJscriptCGIJavaScript與Java的區(qū)別？第一個(gè)JavaScript程序編寫網(wǎng)頁(yè)文件first-javascript.html，內(nèi)容如下<html> <head> <scriptlanguage="javascript"> alert("hellojavascript"); </script> </head></html>以上JavaScript會(huì)在瀏覽器打開的時(shí)候，顯示出一個(gè)提示框，如：first-javascript.htmlJavaScript基本語(yǔ)法JavaScript腳本可以方法頁(yè)面中的三個(gè)位置放在<script></script>標(biāo)簽中間，前面的示例就是這樣可以將腳本單獨(dú)放到一個(gè)文件中，向CSS文件一樣，推薦此種用法如該文件的命名為script.js，位于script目錄中，那么引用方式為：<scriptsrc=“/script.js”language=“javascript”/>將腳本直接放到html元素中，作為屬性值javascript-test01.htmljavascript-test02.htmljavascript-test03.htmlJavaScript基本語(yǔ)法JavaScript標(biāo)識(shí)符JavaScript標(biāo)識(shí)可以使數(shù)字，大小寫字母，下劃線，美元符號(hào)構(gòu)成，標(biāo)識(shí)不能以數(shù)字開頭以下為合法的標(biāo)識(shí)符user_namepassword_username$username以下為非法的標(biāo)識(shí)符33HellowolrdfalseJavaScript基本語(yǔ)法abstractfinallypackagedoublethrowsbooleanfloatprivateelsetransientbreakforprotectedextendstruebytefunctionpublicfalsetrycasegotoreturnfinalvarcatchifshortwhiledefaultcharimplementsstaticlongdoclassimportsupernativeintconstinswitchnewinterfacecontinueinstanceofsynchronizednull

throwvoidwiththis

注意:保留字不能用于標(biāo)識(shí)符JavaScript保留字JavaScript基本語(yǔ)法JavaScript嚴(yán)格區(qū)分大小寫JavaScript中的代碼必須以分號(hào)結(jié)束，但作為屬性值的JavaScript可以不用分號(hào)結(jié)束JavaScript中的注釋主要兩種單行注釋//這個(gè)單行注釋多行注釋/*這是多行注釋*/JavaScript基本語(yǔ)法基本數(shù)據(jù)類型和常量整型常量，可以使用10進(jìn)制，16進(jìn)制，8進(jìn)制，如:10進(jìn)制12345實(shí)型常量，如：123.45，也可以使用科學(xué)計(jì)數(shù)法布爾常量，取值為true和false字符串常量，字符串常量可以采用雙引號(hào)“”或單引號(hào)，如：”HelloWorld”null常量，表示變量指向的對(duì)象為空undefined，表示變量沒(méi)有賦值或此變量不存在base-type-test.htmlJavaScript基本語(yǔ)法JavaScript中的變量JavaScript中的變量是弱類型的，因此變量不用聲明類型，其類型在使用或賦值時(shí)自動(dòng)確定，聲明變量采用var，如聲明字符串變量:vars=“Hello”;如果未給s賦值，那么s的值為undefinedJavaScript基本語(yǔ)法JavaScript變量的作用域全局變量局部變量函數(shù)的定義function函數(shù)名稱（參數(shù)列表）{一條或多條語(yǔ)句return表達(dá)式；}funtcion-test01.htmlfuntcion-test02.htmlJavaScript基本語(yǔ)法JavaScript系統(tǒng)函數(shù)parseInt(數(shù)字字符串，進(jìn)制),可以將數(shù)字字符，按照進(jìn)制轉(zhuǎn)換成相應(yīng)的整數(shù)varv=“20”;vars=parseInt(v)+10;parseFloat(數(shù)字字符串),可以將數(shù)字字符轉(zhuǎn)換成相應(yīng)的浮點(diǎn)數(shù)

varv=“1.5”;vars=parseFloat(v)+1;eval（參數(shù)），可以將字符串作為JavaScript表達(dá)式執(zhí)行vari=1;eval(“vartemp”+i+“=”+i);以上語(yǔ)句相當(dāng)于vartemp1=1;sys-function-test.htmlJavaScript基本語(yǔ)法運(yùn)算符算術(shù)運(yùn)算符（+、-、*、/、++、--、%）賦值運(yùn)算符（=、+=、-=、*=、/=、%=）比較運(yùn)算符（>、<、>=、<=、==）邏輯運(yùn)算符（&&、||、!）位運(yùn)算符JavaScript控制語(yǔ)句控制選擇結(jié)構(gòu)語(yǔ)句if、ifelseswitch控制循環(huán)結(jié)構(gòu)語(yǔ)句whiledowhilefor改變控制語(yǔ)句順序breakcontinueJavaScript控制語(yǔ)句if條件控制語(yǔ)句格式1If(條件){//一條或多條語(yǔ)句}格式2If(條件){//一條或多條語(yǔ)句}else{//一條或多條語(yǔ)句}格式2可以使用三元運(yùn)算：條件？值1：值2格式3If(條件){//一條或多條語(yǔ)句}elseif(條件){//一條或多條語(yǔ)句}else{//一條或多條語(yǔ)句}ifelse-test.htmlJavaScript控制語(yǔ)句switch多分支控制語(yǔ)句switch(表達(dá)式){ case值1：

//一條或多條語(yǔ)句

break; case值2：

//一條或多條語(yǔ)句

break; default：

//一條或多條語(yǔ)句}javascript中的switch中的表達(dá)式可以是任意字符串switch-test01.htmlJavaScript控制語(yǔ)句while循環(huán)控制語(yǔ)句while(布爾表達(dá)式){

一條或多條語(yǔ)句}dowhile格式do{

語(yǔ)句}while(布爾表達(dá)式)；for語(yǔ)句格式如下：for(初始化部分表達(dá)式；條件表達(dá)式；更新表達(dá)式；){

一條或多條語(yǔ)句}break語(yǔ)句，break可以用在switch、循環(huán)語(yǔ)句中，表示跳出當(dāng)前switch或循環(huán)continue語(yǔ)句，continue只能用在循環(huán)語(yǔ)句中，表示在循環(huán)中執(zhí)行到continue時(shí)，自動(dòng)結(jié)束本次循環(huán)，然后判斷條件，決定是否進(jìn)行下一次循環(huán)while-test.htmldowhile-test.htmlfor-test.htmlbreak-continue-test.html自定義JavaScript對(duì)象對(duì)象構(gòu)造格式varobjectInstance=newObjecName(參數(shù)列表);創(chuàng)建Person，person中具有name和age屬性<!-自定義對(duì)象--><scriptlanguage="javascript"> //定義Person,person中具有屬性name和年齡

functionPerson(){

}

varp=newPerson(); ="張三" p.age=20; alert(+","+p.age);</script>person-object-test01.html自定義JavaScript對(duì)象創(chuàng)建Person，在構(gòu)造函數(shù)中加入?yún)?shù)<!-自定義對(duì)象--><scriptlanguage="javascript"> //定義Person,person中具有屬性name和年齡

//帶參數(shù)的構(gòu)造函數(shù)

functionPerson(name,age){

=name;//注意this關(guān)鍵字

this.age=age; }

varp=newPerson("張三",30); alert(+","+p.age);</script>person-object-test02.htmlJavaScript內(nèi)置對(duì)象Object對(duì)象JavaScript提供Object對(duì)象，可以利用Object對(duì)象簡(jiǎn)單的構(gòu)建自定義對(duì)象Person，如：<!-采用Object構(gòu)建Person對(duì)象--><scriptlanguage="javascript">

varperson=newObject(); ="張三" person.age=20; alert(+","+person.age); //也可以采用[]訪問(wèn)，如

alert(person["name"]+","+person["age"]);</script>可以采用對(duì)象加[]訪問(wèn)屬性O(shè)bject-test.htmlJavaScript內(nèi)置對(duì)象String對(duì)象使用String對(duì)象需要?jiǎng)?chuàng)建其對(duì)象，使用單引號(hào)‘’或雙引號(hào)“”，引起來(lái)的字符串就是一個(gè)字符串對(duì)象String對(duì)象常用屬性charAt()返回傳遞給此方法的索引處的字符indexOf()返回被傳遞給此方法的字符串在一個(gè)sting對(duì)象的實(shí)例中第一次出現(xiàn)的索引lastIndexOf()返回被傳遞給此方法的字符串在一個(gè)sting對(duì)象的實(shí)例中最后一次出現(xiàn)處的索引split()

返回被分割為段的字符串，這個(gè)分割由被傳遞給此方法的字符串和實(shí)例限制定義substring()返回被傳遞的開始和結(jié)束索引之間的字符toLowerCase()將字符串中的所有字符轉(zhuǎn)換為小寫toUpperCase()將字符串中的所有字符轉(zhuǎn)換為大寫length()返回字符串的長(zhǎng)度string-test.htmlJavaScript內(nèi)置對(duì)象Math對(duì)象常見屬性random()返回0~1之間的隨機(jī)數(shù)round(x)把一個(gè)數(shù)四舍五入為最接近的整數(shù)abs(x)返回?cái)?shù)的絕對(duì)值math-test.htmlJavaScript內(nèi)置對(duì)象Date對(duì)象常見屬性Date()返回當(dāng)日的日期和時(shí)間getDate()從Date對(duì)象返回一個(gè)月中的某一天(1~31)getDay()從Date對(duì)象返回一周中的某一天(0~6)getMonth()從Date對(duì)象返回月份(0~11)getYear()從Date對(duì)象以兩位或四位數(shù)字返回年份getHours()返回Date對(duì)象的小時(shí)(0~23)getMinutes()返回Date對(duì)象的分鐘(0~59)getSeconds()返回Date對(duì)象的秒數(shù)(0~59))getTime()返回1970年1月1日至今的毫秒數(shù)date-test.htmlJavaScript數(shù)組數(shù)組就是一組數(shù)據(jù)的集合簡(jiǎn)單的一維數(shù)組定義varids=[“001”,“002”,“003”];數(shù)組的訪問(wèn)采用[]加下標(biāo)的方式遍歷以上數(shù)組for(vari=0;i<ids.length;i++){alert(ids[i]);}簡(jiǎn)單二維數(shù)組定義(數(shù)組的元素是數(shù)組)varids=[[“001”,“002”],[“006”,“007”,“008”]];以上定義了二維數(shù)組，第一維2個(gè)元素，第二維3個(gè)元素array-test01.htmlJavaScript數(shù)組Array對(duì)象主要屬性join()把數(shù)組的所有元素放入一個(gè)字符串，元素通過(guò)指定的分隔符進(jìn)行分隔reverse()顛倒數(shù)組中元素的順序sort()對(duì)數(shù)組的元素進(jìn)行排序array-test02.htmlDOM編程HTMLDOM是一個(gè)W3C標(biāo)準(zhǔn)，它是HTML的文本對(duì)象模型(DocumentObjectModelforHTML)的縮寫。HTMLDOM定義了一套HTML的標(biāo)準(zhǔn)對(duì)象，以及對(duì)HTML文本對(duì)象訪問(wèn)和操作的標(biāo)準(zhǔn)方法。所有HTML元素，連同它們包含的文本和屬性，都可以通過(guò)DOM來(lái)訪問(wèn)。其內(nèi)容可以被修改或刪除，并可以生成新的元素。HTMLDOM是獨(dú)立于平臺(tái)和編程語(yǔ)言的。它可以被任何編程語(yǔ)言所使用，例如Java,JavaScript,和VBScript。下面列出主要的DOM對(duì)象主要DOM對(duì)象清單-1對(duì)象描述Document代表整個(gè)HTML文件，可以被用來(lái)訪問(wèn)一個(gè)頁(yè)面上的所有元素。Anchor代表一個(gè)<a>元素Area代表一個(gè)image-map中的<area>元素Base代表一個(gè)<base>元素Body代表一個(gè)the<body>元素Button代表一個(gè)<button>元素Event代表一個(gè)事件event的狀態(tài)Form代表一個(gè)<form>元素Frame代表一個(gè)<frame>元素Frameset代表一個(gè)<frameset>元素Iframe代表一個(gè)<iframe>元素Image代表一個(gè)<img>元素Inputbutton代表一個(gè)HTMLform中的一個(gè)按鈕(button)Inputcheckbox代表一個(gè)HTMLform中的一個(gè)復(fù)選框(checkbox)Inputfile代表一個(gè)HTMLform中的一個(gè)文件上載域(fileupload)主要DOM對(duì)象清單-2對(duì)象描述Inputhidden代表

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論