HTML+CSS+JS-入門基礎(chǔ)-課件_第1頁
HTML+CSS+JS-入門基礎(chǔ)-課件_第2頁
HTML+CSS+JS-入門基礎(chǔ)-課件_第3頁
HTML+CSS+JS-入門基礎(chǔ)-課件_第4頁
HTML+CSS+JS-入門基礎(chǔ)-課件_第5頁
已閱讀5頁，還剩137頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

HTML+CSS+JS入門基礎(chǔ)目錄1.HTML/CSS/JavaScript先睹為快2.HTML3.CSS4.JavaScriptHTML+CSS+JS入門基礎(chǔ)1.1HTML代碼<html><head><title>未使用css，JavaScript的html網(wǎng)頁</title></head>

<body><h2>未使用css，JavaScript的html網(wǎng)頁</h2><hr><p>這是一個未使用css，JavaScript的html網(wǎng)頁</body></html>使用記事本即可編寫HTML代碼，擴展名是html或htm。使用瀏覽器就可以查看其效果。HTML+CSS+JS入門基礎(chǔ)1.2CSS代碼<html><head><title>使用了css的html網(wǎng)頁</title>

<styletype="text/css">h2{font-size:50}p{font-size:20;font-style:italic}</style></head>

<body><h2>使用了css的html網(wǎng)頁</h2><hr><p>這是一個使用了css的html網(wǎng)頁</body></html>HTML+CSS+JS入門基礎(chǔ)1.3JavaScript代碼<html><head><title>使用了css和JavaScript的html網(wǎng)頁</title><styletype="text/css">h2{font-size:50}p{font-size:20;font-style:italic}</style>

<scripttype="text/JavaScript">alert("這是JavaScript起的作用");</script></head>

<body><h2>使用了css和JavaScript的html網(wǎng)頁</h2><hr><p>這是一個使用了css和JavaScript的html網(wǎng)頁</body></html>HTML+CSS+JS入門基礎(chǔ)1.4HTML、CSS、JavaScript的角色HTML：超文本標(biāo)記語言。是網(wǎng)頁設(shè)計的主要語言。無論網(wǎng)頁是否包括動畫、多媒體、圖形等各種復(fù)雜的元素，其基本架構(gòu)都是HTML.CSS：層疊樣式表。是目前唯一的網(wǎng)頁排版樣式標(biāo)準(zhǔn)，彌補了HTML在網(wǎng)頁格式化方面的不足，幫助用戶對頁面的布局加以更多的控制。JavaScript用于開發(fā)Internet客戶端應(yīng)用程序，實現(xiàn)了一種實時、動態(tài)、交互的頁面功能。它的出現(xiàn)使靜態(tài)的HTML頁面逐漸本客戶端可做出響應(yīng)的動態(tài)頁面所取代?？梢栽贖TML語言中直接編寫CSS和JavaScript代碼，也可以獨立編寫。擴展名分別是.css和.jsHTML+CSS+JS入門基礎(chǔ)2HTML1:HTML簡介2:基本標(biāo)記3:列表list4:表格table5:表單form6:框架frame7:層divHTML+CSS+JS入門基礎(chǔ)2.1.1HTML概念HTMLHyperTextMarkupLanguage超文本標(biāo)識語言是一種用來制作超文本文檔的簡單標(biāo)記語言。用HTML編寫的超文本文檔稱為HTML文檔HTML文檔：*.htm或*.html文件名區(qū)分大小寫瀏覽HTML文件的工具:瀏覽器例：NetscapeNavigator,MicrosoftIE,MazillaFireFoxHTML+CSS+JS入門基礎(chǔ)2.1.2HTML文檔的編寫方法手工直接編寫記事本等，存成.htm.html格式，要求用戶必須掌握HTML使用可視化HTML編輯器Frontpage、Dreamweaver等,容易產(chǎn)生廢碼HTML+CSS+JS入門基礎(chǔ)2.1.3HTML文檔結(jié)構(gòu)<html><head> <title>myfirstpage</title></head><bodybgcolor="blue"><palign="center">Thisismyfirsthomepage!<hrsize=7width="75%"color="red"><palign="right">這是我的第一張網(wǎng)頁！</body></html>HTML+CSS+JS入門基礎(chǔ)2.1.3HTML文檔結(jié)構(gòu)標(biāo)記(簽)是HTML語言的基本部分，比如<html>、<head>、<body>、<hr>、<p>。大多數(shù)標(biāo)記總是成對出現(xiàn)，每一對標(biāo)記一般都有一個開始的標(biāo)記并且結(jié)束的標(biāo)記總是在開始的標(biāo)記前加一個斜杠。屬性：HTML標(biāo)記有自己的相關(guān)屬性，每一個屬性還可以由我們網(wǎng)頁編制者賦一定的值。<palign=rightcolor=red>myfirsthomepage</p><hrsize=7align=centerwidth="75%"color="red"

>

注意：標(biāo)記不區(qū)分大小寫。例<html><HTML>都可以標(biāo)記中不要有空格，否則瀏覽器無法識別。例<title>錯誤任何空格和回車在代碼中無效。插入空格和回車分別用<br>和 屬性的值可以用雙引號引起來，也可以不引，最好引起來各屬性之間無先后次序，屬性也可省略（即取默認(rèn)值）HTML+CSS+JS入門基礎(chǔ)2.1.3HTML文檔結(jié)構(gòu)-head(title)<head>標(biāo)記出現(xiàn)在文檔的開頭部分。<head>與</head>之間的內(nèi)容不會在瀏覽器的文檔窗口顯示，但是其間的元素有特殊重要的意義。

1:<title>

<title>標(biāo)記定義HTML文檔的標(biāo)題。<title>與</title>之間的內(nèi)容將顯示在瀏覽器窗口的標(biāo)題欄。HTML+CSS+JS入門基礎(chǔ)2.1.3HTML文檔結(jié)構(gòu)-head(meta)2:<meta>標(biāo)記

<meta>標(biāo)記定義網(wǎng)頁的一些相關(guān)信息，例文件的關(guān)鍵字，作者，網(wǎng)頁過期時間等，這些信息不會在瀏覽器的文檔窗口顯示<metaname="keywords"content="study,computer">用來標(biāo)記搜索引擎在搜索你的頁面時所取出的關(guān)鍵詞。<metaname="author"content=“l(fā)iukl">

用來標(biāo)記文檔的作者。<metahttp-equiv="Content-Type"content="text/html;charset=gb2312">

用來標(biāo)記你的頁面的解碼方式。<metahttp-equiv="refresh"content="5;URL=http://">

用來自動刷新網(wǎng)頁HTML+CSS+JS入門基礎(chǔ)2.1.3HTML文檔結(jié)構(gòu)-(head)meta編寫一個網(wǎng)頁，要求3秒鐘后自動跳轉(zhuǎn)到北軟教育首頁。<html><head><title>myfirstpage</title><metahttp-equiv="refresh"content="3;URL="></head><body><palign=“center”>三秒鐘后本網(wǎng)頁將自動跳轉(zhuǎn)到北軟教育首頁</p></body></html>HTML+CSS+JS入門基礎(chǔ)2.1.3HTML文檔結(jié)構(gòu)-body<body>表明是HTML文檔內(nèi)容主體部分。在<body>與</body>之間，通常都會有很多其它標(biāo)記；這些標(biāo)記和標(biāo)記屬性構(gòu)成HTML文檔的主體部分。<body>自身屬性主要有：1)bgcolorbgcolor屬性標(biāo)志HTML文檔的背景顏色。如：bgcolor="#CCFFCC"。2)backgroundbackground屬性標(biāo)志HTML文檔的背景圖片?？梢允褂玫膱D片格式為gif,jpg如：background=“images/bg.gif"。3)texttext屬性標(biāo)志HTML文檔的正文文字顏色。如：text=“#FF6666”。text定義的顏色將應(yīng)用于整篇文檔。HTML+CSS+JS入門基礎(chǔ)2.1.3HTML文檔結(jié)構(gòu)-body顏色顏色名和RGB值黑色Black=”#000000”銀色Silver=”#c0c0c0”紅色Red=”#ff0000”藍(lán)色Blue=”#0000ff”白色White=”#ffffff”黃色Yellow=”ffff00”綠色Green=”#00ff00”海藍(lán)色Aqua=”#00ffff”HTML+CSS+JS入門基礎(chǔ)2.2基本HTML標(biāo)記1.標(biāo)題標(biāo)記<h#>2.文字標(biāo)記<font>3.段落級標(biāo)記<p><br>4.字符級標(biāo)記5.水平標(biāo)尺標(biāo)記<hr>6.HTML注釋<!---->6.超級鏈接<a>7.圖像標(biāo)記<img>8.移動的文字<marquee>HTML+CSS+JS入門基礎(chǔ)2.2.1標(biāo)題標(biāo)記可顯示六種大小的標(biāo)題，即<H1>到<H6>，<H1>為最大，<H6>為最小<HTML> <HEAD> <TITLE>HTML簡介</TITLE> </HEAD><BODY> <H1>HTML簡介</H1> <H2>HTML簡介</H2> <H3>HTML簡介</H3> <H4>HTML簡介</H4> <H5>HTML簡介</H5> <H6>HTML簡介</H6></BODY></HTML>HTML+CSS+JS入門基礎(chǔ)2.2.2文字標(biāo)記文字屬性標(biāo)記1.文字顏色<fontcolor=#>...</font>#=RRGGBB16進(jìn)制數(shù)碼2.文字字體<fontface=“#”>...</font>

#=客戶端可獲得的字體3.文字大小<fontsize=#>...</font>#=1,2,3,4,5,6,7等HTML+CSS+JS入門基礎(chǔ)2.2.3.段落級標(biāo)記段落標(biāo)記(paragraph)<p>換行符標(biāo)記<br>預(yù)格式化標(biāo)記<pre>：HTML的段落與段落之間有一定的空隔。如果不希望出現(xiàn)空隔而只想換行的話，就要用到另一個元素，即<br>元素。利用<pre>標(biāo)記對網(wǎng)頁中文字段落進(jìn)行預(yù)格式化，在輸入過程中，按鍵盤上的回車鍵，就可以生成一個段落。即瀏覽器會以文本輸入格式顯示用三種標(biāo)記分別實現(xiàn)登鸛雀樓的顯示HTML+CSS+JS入門基礎(chǔ)2.2.4字符級標(biāo)記常用字符級標(biāo)記

<i>傾斜文本</i>

<b>粗體文本</b>

<u>下劃線文本</u> <s>刪除線文本</s><em>強調(diào)文本</em><center>居中顯示文本</center>空格標(biāo)記 HTML+CSS+JS入門基礎(chǔ)2.2.5水平線標(biāo)記水平線

<hrsize=#>：設(shè)定線寬

<hrwidth=#>：設(shè)定線長

<hralign=#>：設(shè)定對齊方式#=left,right

<hrcolor=#>：設(shè)定線的顏色<hrsize=7align=centerwidth="75%"color="red">HTML+CSS+JS入門基礎(chǔ)2.2.6HTML注釋HTML文檔可以插入注釋。不但便于對程序排錯，也使其他人更易讀懂自己的代碼HTML注釋的格式為：

<!--注釋內(nèi)容-->

源碼依然存在，不會被瀏覽器所解釋

<BODY><!--以下是程序的主體-->注釋語句的特點是僅用于程序中某一句或一段語句的作用說明，瀏覽器在執(zhí)行過程中將忽略掉注釋語句的內(nèi)容，對其視而不見。HTML+CSS+JS入門基礎(chǔ)2.2.7超級鏈接超級鏈接是用錨元素<a>定義的在<a>元素下，有元素屬性href,href的屬性值為一個URL地址如：<ahref="">指向?qū)W院的超級鏈接</a>如：<ahref="top.htm">普通超級鏈接</a>如：<ahref="../pic/left.htm">普通超級鏈接</a>開一個新的(瀏覽器)窗口(TargetWindow)<ahref="URL"target=“_blank">...</a>HTML+CSS+JS入門基礎(chǔ)2.2.7超級鏈接超級鏈接的路徑絕對路徑：指文件的完整路徑，包括協(xié)議，主機地址等，一般用于網(wǎng)站的外部鏈接。相對路徑：指相對于當(dāng)前文件的路徑，它包含了從當(dāng)前文件指向目的文件的路徑，一般用于網(wǎng)站的內(nèi)部鏈接。相對位置如何輸入同一目錄輸入要鏈接的文檔名鏈接上一目錄先輸入../，再輸入目錄名鏈接下一目錄先輸入目錄名，后加/HTML+CSS+JS入門基礎(chǔ)2.2.8圖像標(biāo)記<imgsrc=“圖片名稱”><img>的基本屬性是src屬性，src的屬性值為所引用的圖片的URL地址。src屬性是必須的。src的URL可以是絕對地址，也可以是相對地址<imgsrc="sample.jpg"width=100height=100>width指定寬度，height指定高度。它們的屬性值可以是象素，也可以是%。定義圖片替代文本的方法是：<img

src=“圖片名稱”alt=“這是一張圖片”>替代文本有兩個作用：提示：若圖片下載成功，把鼠標(biāo)放在圖片上，會出現(xiàn)提示文本。替代：若圖片下載不成功，在圖片位置出現(xiàn)替代文本。圖片的對齊方式<img

src=“sample.jpg”align=“#”>#=left,right,top,middle,bottomHTML+CSS+JS入門基礎(chǔ)2.2.8圖像標(biāo)記HTML文檔中的圖片GIF（GraphicsInterchangeFormat）圖像(.GIF)支持無損壓縮只支持256色JPEG（JointPhotographicExpertsGroup）圖像(.JPG)有損壓縮，但這個損失是剔除一些視覺上不易察覺的部分。通常用來保存超過256色的圖片文件PNG（PortableNetworkGraphics）新興的網(wǎng)絡(luò)圖片格式，結(jié)合了gif和jpeg的優(yōu)點。可以將圖片文件以最小的方式壓縮而不造成圖片失真支持48bit的色彩。HTML+CSS+JS入門基礎(chǔ)2.2.8圖像標(biāo)記圖像的超級鏈接圖像的超級鏈接是指整個圖像的超級鏈接，當(dāng)點擊圖像的任何部分時，都會打開這個超級鏈接。定義默認(rèn)超級鏈接的方法是：<ahref=“”><imgsrc="sample.jpg"></a>圖像的熱區(qū)鏈接熱區(qū)就是在圖片中特意劃分出一個熱點區(qū)域。當(dāng)點擊圖象的熱區(qū)時，才會打開這個超級鏈接。需要使用map標(biāo)記指定熱區(qū)。HTML+CSS+JS入門基礎(chǔ)2.2.9移動的文字基本語法<marquee>...</marquee>文字移動屬性(1)方向：direction=##=left,right,up,down(2)方式：behavior=##=scroll(循環(huán)),slide(只走一次),alternate(來回走)(3)循環(huán):loop=##=次數(shù)；若未指定則循環(huán)不止(infinite)(4)速度:scrollamount=#(5)延時:

scrolldelay=#HTML+CSS+JS入門基礎(chǔ)2.3.1無序列表無序列表由<ul>和<li>元素定義的:<ul><li>sports</li><li>food</li><li>drink</li><li>friends</li></ul>無序列表的默認(rèn)符號是圓點。

<ul>元素有type屬性，通過定義不同的type屬性可以改變列表的項目符號。目前，type屬性的屬性值有：disc(圓)、circle（圓圈）、square（方塊）支持嵌套定義HTML+CSS+JS入門基礎(chǔ)2.3.2有序列表有序列表由<ol>和<li>定義:<ol>

<li>sports</li>

<li>drink</li>

<li>friends</li></ol><ol>元素也有自己的type屬性，type屬性的屬性值有1、A、a、I、i等。例如，我們以A、B、C……作為列表的編號<ol>元素還可以定義列表的起始編號，如我們希望列表的第一個編號為5，而不是1，則需要定義<ol>元素的start屬性支持嵌套定義HTML+CSS+JS入門基礎(chǔ)2.4.1表格的基本結(jié)構(gòu)<table>定義表格<tr> <th>定義表頭</th></tr><tr>定義表行<td>…</td>定義單元格</tr>……..<tr>定義表行<td>…</td>定義單元格</tr></table>HTML+CSS+JS入門基礎(chǔ)2.4.1表格的基本結(jié)構(gòu)<table>元素：定義一個表格。每一個表格只有一對<table>和</table>，一張頁面中可以有多個表格。<tr>元素：定義表格的行，一個表格可以有多行，所以<tr>對于一個表格來說不是唯一的。<td>元素：定義表格的一個單元格。每行可以有不同數(shù)量的單元格，在<td>和</td>之間是單元格的具體內(nèi)容。需要注意的是：上述的三個元素必須、而且只能夠配對使用。缺少任何一個元素，都無法定義出一個表格。<th>元素：定義表格的表頭行，一個表格只能有一個表頭行或者沒有，所以<th>對于一個表格來說是唯一的或沒有。HTML+CSS+JS入門基礎(chǔ)2.4.2表格的屬性表格的屬性width屬性：指定表格或某一個表格單元格的寬度。單位可以是%或者象素。height屬性：指定表格或某一個表格單元格的高度。單位可以是%或者象素。border屬性：表格邊線粗細(xì)bgcolor屬性：指定表格或某一個單元格的背景顏色。background屬性：指定表格或某一個單元格的背景圖片。其屬性值為一個URL地址align屬性：指定表格或某一個單元格里的內(nèi)容（文本、圖片等）的對齊方式(left,center,right)。HTML+CSS+JS入門基礎(chǔ)2.4.3單元格的屬性單元格屬性valign屬性：指定某一個單元格里的內(nèi)容（文本、圖片等）的垂直對齊方式。垂直對齊方式的屬性值包括：

top：頂端對齊；

middle：居中對齊；

bottom：底端對齊;baseline：相對于基線對齊;align屬性：指定某一個單元格里的內(nèi)容（文本、圖片等）的水平對齊方式（left,center,right）colspan：屬性值表示當(dāng)前單元格跨越幾列rowspan：屬性值表示當(dāng)前單元格跨越幾行HTML+CSS+JS入門基礎(chǔ)2.4.4行的屬性行屬性1、valign屬性：指定某一個單元格里的內(nèi)容（文本、圖片等）的垂直對齊方式。垂直對齊方式的屬性值包top：頂端對齊；middle：居中對齊；

bottom：底端對齊。baseline：相對于基線對齊。2、align屬性：指定表格或某一個單元格里的內(nèi)容（文本、圖片等）的水平對齊方式(left,center,right)3、height屬性：指定表格中某一行的高度。單位可以是%或者象素HTML+CSS+JS入門基礎(chǔ)2.4.5表格的嵌套在<td></td>之間插入表格，實現(xiàn)表格嵌套<tableborder=3><tr><td><tableborder=1><tr><td>導(dǎo)航列表</td></tr><tr><td>計算機</td></tr><tr><td>政治</td></tr><tr><td>軍事</td></tr><tr><td>法律</td></tr></table></td><td>正文內(nèi)容</td></tr></table>HTML+CSS+JS入門基礎(chǔ)2.4.5表格的作用表格是用于在HTML頁面上設(shè)計數(shù)據(jù)和圖像布局的常用工具，可使用表格來組織數(shù)據(jù)，控制頁面布局制作網(wǎng)頁時，為了以一定的形式將網(wǎng)頁中的信息組織起來，同時使網(wǎng)頁便于閱讀和頁面美觀，需要對頁面的版式進(jìn)行設(shè)計或進(jìn)行頁面布局。而表格能將網(wǎng)頁分成多個任意的矩形區(qū)域，表格是網(wǎng)頁制作中是常用的一種簡單布局工具。表格的作用一般只是控制文本和圖像的顯示，而不顯示表格的邊框HTML+CSS+JS入門基礎(chǔ)2.4.6表格舉例<TABLEBORDER=2BGCOLOR=lavender><TR><THALIGN=CENTERCOLSPAN=3>第一季度</TH> <THALIGN=CENTERCOLSPAN=3>第二季度</TH> </TR><TR> <TD>一月</TD> <TD>二月</TD> <TD>三月</TD> <TD>四月</TD> <TD>五月</TD> <TD>六月</TD> </TR> <TR> <TD>1000</TD> <TD>550</TD> <TD>240</TD> <TD>1500</TD> <TD>2765</TD> <TD>1240</TD> </TR>

<TR> <TD>3000</TD> <TD>2430</TD> <TD>2500</TD> <TD>1250</TD> <TD>900</TD> <TD>3400</TD></TR></TABLE>HTML+CSS+JS入門基礎(chǔ)2.5.1表單formHTML表單是HTML頁面與瀏覽器端實現(xiàn)交互的重要手段。利用表單可以收集客戶端提交的有關(guān)信息。在HTML里，我們可以定義表單，并且使表單與CGI或ASP等服務(wù)器端的表單處理程序配合。我們在網(wǎng)頁設(shè)計課程中不會涉及程序編制。表單是網(wǎng)頁上的一個特定區(qū)域。這個區(qū)域是由一對<form>元素定義的。HTML+CSS+JS入門基礎(chǔ)2.5.2表單舉例設(shè)計一個注冊表單，輸入姓名，年齡，密碼，密碼確認(rèn)，電子郵件，性別，愛好，身份，個人簡歷，單擊提交按鈕提交，單擊重置按鈕重置。姓名，年齡，電子郵件：text密碼，密碼確認(rèn)：password性別：radio愛好：checkbox身份：select個人簡歷：textarea提交按鈕：submit重置按鈕：resetHTML+CSS+JS入門基礎(chǔ)2.5.2表單舉例HTML+CSS+JS入門基礎(chǔ)2.5.2表單舉例<formaction=""method="post"name="register">姓名<inputtype="text"name="name"value="lkl"disabled><br>密碼<inputtype="password"name="pwd"><br>密碼確認(rèn)<inputtype="password"name="confirm"><br>性別<inputtype="radio"name="sex"value="1"checked>男<inputtype="radio"name="sex"value="2">女<br>年齡<inputtype="text"name="age"><br>電子郵件<inputtype="text"name="email"><br>愛好<inputtype="checkbox"name="aihao"value=1checked>體育<inputtype="checkbox"name="aihao“value=2>音樂<inputtype="checkbox"name="aihao“value=3>美術(shù)<br>身份<selectname="id"><optionvalue="1">學(xué)生<optionvalue="2"selected>教師<optionvalue="3">解放軍</select><br>個人經(jīng)歷<textarearows="4"cols="50">請輸入個人簡歷</textarea><br><inputtype=submitname="submit"value="提交"><inputtype=resetname="reset"value="重置"></form>HTML+CSS+JS入門基礎(chǔ)2.5.2表單舉例HTML+CSS+JS入門基礎(chǔ)2.5.2表單舉例<formaction=""method="post"name="register"><table><tr><td>姓名</td><td><inputtype="text"name="name"value="lkl"disabled></td></tr><tr><td>密碼</td><td><inputtype="password"name="pwd"></td></tr><tr><td>密碼確認(rèn)</td><td><inputtype="password"name="confirm"></td></tr><tr><td>性別</td><td><inputtype=“radio”name=“sex”value=“1”checked=“checked”>男<inputtype="radio"name="sex"value="2">女</td></tr><tr><td>年齡</td><td><inputtype="text"name="age"></td></tr>

HTML+CSS+JS入門基礎(chǔ)2.5.2表單舉例<tr><td>電子郵件</td><td><inputtype="text"name="email"></td></tr><tr><td>愛好</td><td><inputtype="checkbox"name="aihao"value=1checked>體育<inputtype=“checkbox”name=“aihao”value=2>音樂<inputtype="checkbox"name="aihao“value=3>美術(shù)</td></tr><tr><td>身份</td><td><selectname="id"><optionvalue="1">學(xué)生<optionvalue="2"selected>教師<optionvalue="3">解放軍</select></td></tr><tr><td>個人經(jīng)歷</td><td><textarearows="4"cols="50">請輸入個人簡歷</textarea></td></tr><tralign=center><tdcolspan=2><inputtype=submitname="submit"value="提交"><inputtype=resetname="reset"value="重置"></td></tr></table></form>HTML+CSS+JS入門基礎(chǔ)2.5.3表單基本語法1.表單的基本語法:<formaction="url"

method=*name=?>

...<inputtype=submit><inputtype=reset></form>

action屬性：用來定義表單處理程序（一個ASP、JSP等程序）的位置(相對地址或絕對地址)。method定義表單結(jié)果從瀏覽器傳送到服務(wù)器的方法，一般有兩種方法：get、post。GET有數(shù)據(jù)量限制，POST無以上限制,以文件形式傳輸HTML+CSS+JS入門基礎(chǔ)2.5.3表單基本語法2.文本框的基本語法:<inputname=?type=textvalue=**size=***maxlength=??>?文本框的名字**默認(rèn)值***長度??最大輸入字符數(shù)3.密碼框的基本語法：數(shù)據(jù)以圓點形式顯示，提高密碼安全性<inputname=?type=passwordsize=***maxlength=??>HTML+CSS+JS入門基礎(chǔ)2.5.3表單基本語法3.復(fù)選框的基本語法:在一個表單里的所有多選框可以有一個或多個被選中。<inputname=?type=checkboxvalue=？checked>//默認(rèn)選中

<inputname=?type=checkboxvalue=？>4.單選框的基本語法:一個表單里的所有變量名相同的單選框只能夠有一個被選中。

<inputtype=radioname=sexvalue=**><inputtype=radioname=sexvalue=**checked>//默認(rèn)選中各個選項的name必須一樣才能達(dá)到預(yù)期效果5.標(biāo)準(zhǔn)按鈕的基本語法:

<inputname=?type=buttonvalue=？>HTML+CSS+JS入門基礎(chǔ)2.5.3表單基本語法6.提交按鈕和重置按鈕的基本語法:<inputtype="submit"value="提交"name=“B1"><inputtype="reset"value="重寫"name=“B2">7.圖象域的基本語法:：相當(dāng)于漂亮的submit按鈕。

<inputname=?type=imagesrc=?width=?height=?>8.隱藏域的基本語法隱藏域在網(wǎng)頁中對用戶是不可見的，用戶單擊提交按鈕提交表單時，隱藏域的信息也被一起發(fā)送到服務(wù)器。

<inputname=?type=hiddenvalue=？>HTML+CSS+JS入門基礎(chǔ)2.5.3表單基本語法9.文本區(qū)域的基本語法:

<textareaname=*rows=**cols=**>...</textarea>10.下拉菜單的基本語法<selectname="愛好"><optionvalue=1

selected>音樂<optionvalue=2>美術(shù)<optionvalue=3>體育</select>HTML+CSS+JS入門基礎(chǔ)2.5.3表單基本語法TYPE此屬性指定表單元素的類型?？捎玫倪x項有TEXT、PASSWORD、CHECKBOX、RADIO、SUBMIT、RESET、和BUTTON。默認(rèn)值為TEXT。NAME此屬性指定表單元素的名稱。例如，如果表單上有幾個文本框，可以按照名稱來標(biāo)識它們-TEXT1、TEXT2或用戶選擇的任何名稱。VALUE此屬性是可選屬性，它指定表單元素的初始值SIZE此屬性指定表單元素的顯示長度。用于文本輸入的表單元素即輸入類型是TEXT或PASSWORD的MAXLENGHT此屬性用于指定在TEXT或PASSWORD表單元素中可以輸入的最大字符數(shù)。默認(rèn)值為無限的CHECKED此屬性是一個Boolean屬性，指定按鈕是否是被選中的。當(dāng)輸入類型為RADIO或CHECKBOX時，使用此屬性。SRCSRC="URL"。當(dāng)使用IMAGE作為輸入類型時使用此屬性，它用于標(biāo)識圖像的位置。HTML+CSS+JS入門基礎(chǔ)2.6.1框架舉例<framesetrows=30%,20%,*><framesrc="left1.html"name=1scrolling=yes><framesrc="left4.html"name=2><framesrc="left5.html"name=3></frameset><framesetcols=300,200,*><framesrc="left.html"name=1noresize><framesrc="left2.html"name="2"><framesrc="right.html"name="3"></frameset>HTML+CSS+JS入門基礎(chǔ)2.6.1框架舉例框架的嵌套<framesetrows="150,*"><framesrc="top.html"frameborder=1name="1"noresize>

<framesetcols="200,*"><framesrc="left.html"frameborder=1name="2"noresize><framesrc="right.html"frameborder=1name="3"noresize></frameset></frameset>HTML+CSS+JS入門基礎(chǔ)2.6.2框架簡介框架是一種在一個網(wǎng)頁中顯示多個網(wǎng)頁的技術(shù)，通過超級鏈接可以為框架之間建立內(nèi)容之間的聯(lián)系，從而實現(xiàn)頁面導(dǎo)航。在網(wǎng)頁文件中，框架常用于網(wǎng)頁的布局。框架的基本結(jié)構(gòu)分為框架集frameset和框架frame兩個部分。使用框架集的頁面的<body>標(biāo)記將被<frameset>標(biāo)記替代，然后在利用<frame>標(biāo)記去定義框架結(jié)構(gòu)。每個框架frame由一個單獨的HTML頁面組成?？蚣苤С智短?。當(dāng)一個框架集中既有左右分割，又有上下分割是，就要用到框架嵌套。HTML+CSS+JS入門基礎(chǔ)2.6.2framset基本語法<framesetrows=“#,#,#”><framesrc="url"><framesrc="url"><framesrc="url"></frameset>框架由一對<frameset>定義<frameset>有兩個屬性：rows和colsrows定義上下分割的框架的大??；cols定義左右分割的框架的大??；在定義大小時，rows和cols可使用相對大小或以百分比為單位HTML+CSS+JS入門基礎(chǔ)2.6.2frame基本語法<frame>的屬性

<framesrc="left.html"frameborder=1name="2"noresizescrolling=yes>src：在本框架里顯示的網(wǎng)頁的URL。frameborder：是否顯示邊框name：定義該框架的名字。這個名字可以被一些網(wǎng)頁元素引用，如被<a>元素引用。noresize：框架在瀏覽器里不可以被調(diào)整大小。scrolling：是否顯示滾動條。yes,no,auto

HTML+CSS+JS入門基礎(chǔ)2.6.2frame基本語法<framesrc="left.html"frameborder=1name="2"><framesrc="right.html"frameborder=1name="3">left.html:<ahref=“l(fā)eft1.html”target=3>快樂的生活</a>在當(dāng)前框架中打開超鏈接頁面默認(rèn)就是在當(dāng)前框架頁中打開,也可以采用

target=“_self”在指定框架中打開超級鏈接頁面

target=“name”新開窗口打開鏈接頁面

target=“_blank”跳出整個框架集

target=“_parent”HTML+CSS+JS入門基礎(chǔ)2.7.1圖層圖層也是網(wǎng)頁制作中用于定位元素或布局的一種技術(shù)，圖層比表格的布局更加靈活，它能夠?qū)又械膬?nèi)容擺放到瀏覽器的任意位置，放入到層中的HTML元素包括：文字、圖像、動畫甚至是圖層。一個網(wǎng)頁中可以使用多個層，層與層之間可以重疊，在網(wǎng)頁制作中，使用層可以將網(wǎng)頁中的任何元素布局到網(wǎng)頁的任意位置，同時可以以任何方式重疊。可以想象在word文檔中不同圖片之間的上下左右位置和前后重疊關(guān)系。圖層也可以實現(xiàn)嵌套的功能。嵌套圖層最主要的特點就是可以保證子層永遠(yuǎn)位于父層之上。HTML+CSS+JS入門基礎(chǔ)2.7.2圖層舉例<HTML><HEAD><TITLE>將元素分組</TITLE></HEAD><BODYBGCOLOR=lavender><DIVid="Layer1"style="position:absolute;left:25px;top:27px;width:360px;height:315px;z-index:1;background-color:aqua;"><fontcolor=red><H1>第一層</H1><P>這是第一部分內(nèi)的一個段落元素</P><P>第一層的內(nèi)容。</P><P>該部分之外</P><H2>第二部分</H2><P>這是第二部分內(nèi)的一個段</P><P>第一層的內(nèi)容。</P></font></DIV></BODY></HTML>HTML+CSS+JS入門基礎(chǔ)2.7.3圖層屬性講解基本語法<DIVid=“Layer1”//圖層名稱style=“position:absolute;//定位方式(absolute/relative)left:25px;//設(shè)置圖層左邊距top:27px;//設(shè)置圖層頂端間距width:360px;//設(shè)置圖層寬度height:315px;//設(shè)置圖層高度z-index:1;//設(shè)置圖層的疊放層次。background-color:aqua;“>//設(shè)置圖層背景色…………..//圖層的具體內(nèi)容</DIV>HTML+CSS+JS入門基礎(chǔ)3.1CSS的作用CSS是CascadingStyleSheets(層疊樣式表)的簡稱.,是一系列格式規(guī)則，它們控制網(wǎng)頁內(nèi)容的外觀。css簡單來說就是用來美化網(wǎng)頁用的。使用CSS樣式可以非常靈活并更好地控制確切的網(wǎng)頁外觀，從精確的布局定位到特定的字體和樣式。

即使不改動HTML，只是通過添加不同的CSS規(guī)則，就可以得到各種不同樣式的網(wǎng)頁?？梢酝ㄟ^簡單的更改CSS文件,改變網(wǎng)頁的整體表現(xiàn)形式,從而減少我們的工作量,所以她是每一個網(wǎng)頁設(shè)計人員的必修課.

CSS可以嵌入到html文檔中，也可以單獨文件形式存在，擴展名是.cssHTML+CSS+JS入門基礎(chǔ)3.1CSS的作用當(dāng)樣式定義在外部文件中時，一個樣式表可以用于多個頁面，甚至整個工作點，因此具有更好的易用性和擴展性?？偟膩碚f，CSS可以完成下列工作：（1）彌補HTML對網(wǎng)頁格式化功能的不足，如段落間距、行距等。（2）設(shè)置字體變化和大小。（3）設(shè)置頁面格式的動態(tài)更新。（4）進(jìn)行排版定位。CSS的特點（1）控制頁面中的每一個元素（精確定位）。（2）對HTML語言處理樣式的最好補充。（3）把內(nèi)容和格式處理相分離，減少工作量。HTML+CSS+JS入門基礎(chǔ)3.2樣式表規(guī)則CSS的樣式規(guī)則css樣式規(guī)則由兩部分組成：選擇器和聲明。選擇器是樣式名稱（如TR或P）。聲明是用于定義樣式元素。p{font-style:italic;font-weight:bold;color:limegreen}.water{color:blue}用法：RuleSelector

{property:value;property:value;...}規(guī)則選擇器聲明屬性屬性值HTML+CSS+JS入門基礎(chǔ)3.3樣式表中的選擇器1：簡單選擇器(僅描述元素，而不考慮該元素在文檔結(jié)構(gòu)中的位置)1.1HTML選擇器--選擇器是HTML標(biāo)記的名稱1.2類選擇器—使用HTML元素的CLASS屬性1.3ID選擇器—使用HTML元素的ID屬性2：上下文選擇器(引用元素的上下文)HTML+CSS+JS入門基礎(chǔ)3.3樣式表中的選擇器1.1：HTML選擇器示例<HTML><HEAD><STYLETYPE="text/css">h1,h2,h3,h4,h5,h6{color:green}P{font-style:italic;font-weight:bold;color:red}</STYLE></HEAD><Body><h2>測試HTML選擇器</h2><p>這些選擇器使用HTML元素的名稱唯一區(qū)別是刪除了尖括號。</P></BODY></HTML>HTML+CSS+JS入門基礎(chǔ)3.3樣式表中的選擇器1.2：類選擇器示例<HTML><HEAD><STYLETYPE="text/css">.water{color:blue;text-align:right}p.danger{color:red;text-align:center}</STYLE></HEAD><BODY><h2class=water>測試CSS</h2><Pclass=water>測試水</P><Pclass=danger>測試危險</P><P>無樣式</P></BODY></HTML>HTML+CSS+JS入門基礎(chǔ)3.3樣式表中的選擇器1.3：ID選擇器示例<HTML> <HEAD> <TITLE>ID選擇器</TITLE> <STYLETYPE="text/css">

#control{color:red} </STYLE> </HEAD> <BODY>

<Pid="control">這是火焰的顏色</P> <P>本段沒有應(yīng)用樣式</P> </BODY></HTML>HTML+CSS+JS入門基礎(chǔ)3.3樣式表中的選擇器所有的HTML標(biāo)簽都可以作為類選擇器。省略HTML標(biāo)記的類選擇器是最常用的CSS方法，使用這種方法，可以很方便的在任意元素上套用預(yù)先定義好的類樣式

HTML頁面中ID參數(shù)指定了某個單一元素，ID選擇器用來對這個單一元素定義單獨的樣式。由于ID選擇器局限性很大，只能單獨定義某個元素的樣式，一般只在特殊情況下使用。ID是先給某個元素定義標(biāo)簽，再給它定義樣式；class是先定義好一種樣式，再套給多個元素。

用多個相同ID“一般情況下”也能正常顯示。但是當(dāng)你需要用JavaScript通過id控制這個元素時(如div)，那就會出現(xiàn)錯誤HTML+CSS+JS入門基礎(chǔ)3.3樣式表中的選擇器2：上下文選擇器示例<styletype="text/css">a{color:red;font-size:20}tablea{color:green;font-size:25}tablea:hover{color:blue}</style><body><ahref="">北軟教育</a><table><tr><td><ahref="">北軟教育</a></td><td>北軟教育</td></tr></table></body>HTML+CSS+JS入門基礎(chǔ)3.3樣式表中的選擇器2：上下文選擇器示例<HTML><HEAD><TITLE>上下文選擇器</TITLE><STYLETYPE="text/css">BODY{color:blue;background:lavender;font-family:Arial;}UL{color:red}ula{color:green;font-size:15}

</STYLE><HEAD><BODY><UL><LI><ahref="">芒果</a><LI>桔子<LI>蘋果</UL><OL><LI>芒果<LI>桔子<LI>蘋果</OL></BODY></HTML>HTML+CSS+JS入門基礎(chǔ)3.4在HTML中引用樣式表1：使用Style元素2：使用Style屬性3：使用Link元素HTML+CSS+JS入門基礎(chǔ)3.4在HTML中引用樣式表1：使用Style元素STYLE元素應(yīng)插入文檔的<HEAD>元素部分中，所有規(guī)則都放置在開始標(biāo)記和結(jié)束標(biāo)記之間。顯示頁面時，只有嵌入了STYLE元素的文檔會受到影響<head><STYLETYPE="text/css">H1 {color:maroon;} P {color:hotpink;font-family:Arial;}</STYLE></head>HTML+CSS+JS入門基礎(chǔ)3.4在HTML中引用樣式表2：使用Style屬性style屬性用于將樣式表應(yīng)用于單個元素。直接將在HTML標(biāo)記里加入style參數(shù)，而style參數(shù)的內(nèi)容就是CSS的屬性和值。<BODY><P

style="color:aqua;font-Style:italic;">本段應(yīng)用了內(nèi)嵌樣式<BR><P>本段以默認(rèn)樣式顯示。<BR><P>您能發(fā)現(xiàn)本行中的<SPANstyle="color:red">不同之處</SPAN>嗎？</BODY>HTML+CSS+JS入門基礎(chǔ)3.4在HTML中引用樣式表3：使用Link元素－－鏈入外部樣式表鏈入外部樣式表是把樣式表保存為一個樣式表文件，然后在頁面中用<link>標(biāo)記鏈接到這個樣式表文件，這個<link>標(biāo)記必須放到頁面的<head>區(qū)內(nèi)<HTML> <HEAD><TITLE>設(shè)置屬性</TITLE><LINKrel=stylesheethref="stylesmine.css"type="text/css"></HEAD><BODY>。。。。。。。。。。。。。。。。。。。。</BODY></HTML>HTML+CSS+JS入門基礎(chǔ)3.5樣式表屬性類型CSS屬性值字體屬性font-familyArial，serif，宋體…font-sizeSmall，medium，large…或直接指定字體大小font-stylenormal,italic…font-weightnormal,bold,lighter,100,200…文本屬性text-alignleft,right,center,justifytext-indent度量或%text-decorationnone,blink,underline,overline,line-throughtext-transformnone,capitalize,uppercase,lowercasevertical-alignBaseline,super,sub,top,text-top,middle-bottom,text-bottomword-spacing度量letter-spacing度量HTML+CSS+JS入門基礎(chǔ)3.5樣式表屬性類型CSS屬性值框?qū)傩詁orderNone,solid,double,ridge,inset,outset,groove,dotteddashedborder-style同上border-width度量，thick，medium，thinborder-color#RRGGBB，顏色名稱margin-top度量或%Margin-left度量或%定位屬性top度量width度量或%height度量或%left度量顏色屬性color#RRGGBB，顏色名稱background-color#RRGGBB，顏色名稱，transparentbackground-imageurlbackground-repeatrepeat,repeat-x,repeat-y,no-repeatHTML+CSS+JS入門基礎(chǔ)JavaScriptJavaScript概述JavaScript基本語法JavaScript事件JavaScript對象HTML+CSS+JS入門基礎(chǔ)4.1.1JavaScript先睹為快舉例在HTML頁面中顯示“你好,歡迎學(xué)習(xí)JavaScript！”創(chuàng)建交互式的網(wǎng)頁允許用戶以適當(dāng)?shù)母袷捷斎霐?shù)據(jù)；使用彈出窗口為用戶顯示信息等控制瀏覽器的行為設(shè)置頁面的背景顏色；在狀態(tài)欄顯示信息等HTML+CSS+JS入門基礎(chǔ)4.1.1JavaScript先睹為快用HTML代碼實現(xiàn)在頁面中顯示“你好,歡迎你學(xué)習(xí)JavaScript!”1、在HMTL中嵌入JavaScript<SCRIPTtype="text/JavaScript“>

document.write("你好，歡迎你學(xué)習(xí)JavaScript！")</SCRIPT>

2、鏈接JavaScript文件

<html>

<head>

<title>鏈接JavaScript代碼</title>

</head><body>

<SCRIPTtype="text/JavaScript“src="test.js">

</SCRIPT>

</body></html>

test.js文件要顯示的內(nèi)容如下：

document.write("你好，歡迎你學(xué)習(xí)JavaScript！")HTML+CSS+JS入門基礎(chǔ)4.1.1JavaScript先睹為快<Scripttype="text/JavaScript">functioncheckPw(){fm=document.form1;if(fm.pw2.value!=fm.pw1.value){alert("密碼不符，請重新輸入");

document.form1.pw2.select();}elsealert("謝謝你，"+.value);}</Script><BODYonLoad=.focus()><FORMNAME="form1">姓名：<INPUTTYPE="text"NAME="name"><BR>輸入密碼：<INPUTTYPE="password"NAME="pw1"><BR>重新輸入：<INPUTTYPE="password"NAME="pw2"><BR><INPUTTYPE="button"VALUE="填好了"onClick=checkPw()>

<INPUTTYPE="reset"VALUE="重填"></FORM></BODY>HTML+CSS+JS入門基礎(chǔ)4.1.1JavaScript先睹為快<Scripttype="text/JavaScript">document.bgColor="green";document.fgColor="white"functionmOver(object,msg){

status=msg;object.color="red";object.face="華文楷體";}functionmOut(object){status='謝謝指向';object.color="blue";object.face="黑體";}</Script><Body><FONTSTYLE="cursor:hand"onClick="location=''"onMouseOver="mOver(this,'最棒的java學(xué)習(xí)網(wǎng)站');"onMouseOut="mOut(this)">Javapro技術(shù)學(xué)習(xí)網(wǎng)</FONT></Body>HTML+CSS+JS入門基礎(chǔ)4.1.2什么是JavaScriptJavaScript是由Netscape（網(wǎng)景）公司研發(fā)出來的一種在它的Navigator瀏覽器上執(zhí)行的程序語言。JavaScript是一種基于對象(object-based)和事件驅(qū)動(EventDriven)并具有安全性能的腳本語言。使用它的目的是與HTML超文本標(biāo)記語言、Java腳本語言（Java小程序）一起實現(xiàn)在一個Web頁面中連接多個對象，與Web客戶交互作用,從而可以開發(fā)客戶端的應(yīng)用程序等。它是通過嵌入或調(diào)入到標(biāo)準(zhǔn)的HTML語言中實現(xiàn)的。它的出現(xiàn)彌補了HTML語言只能制作靜態(tài)網(wǎng)頁的缺陷，它是Java與HTML折衷的選擇HTML+CSS+JS入門基礎(chǔ)4.1.3JavaScript的基本特點1、腳本編寫語言

腳本語言是一種簡單的程序，這些程序是由一些ASCII字符構(gòu)成，可以使用任何一種文本編輯器編寫。一些程序語言（如C、C++、Java等）都必須經(jīng)過編譯，將源代碼編譯成二進(jìn)制的可執(zhí)行文件之后才能運行，而腳本語言不需要事先編譯，只要有一個與其相適應(yīng)的解釋器就可以執(zhí)行。腳本語言是指在web瀏覽器內(nèi)有解釋器解釋執(zhí)行的編程語言，每次運行程序的時候，解釋器會把程序代碼翻譯成可執(zhí)行的格式。HTML+CSS+JS入門基礎(chǔ)4.1.3JavaScript的基本特點2、基于對象的語言

面向?qū)ο笥腥筇攸c（封裝，繼承，多態(tài)）卻一不可通?！盎趯ο蟆笔鞘褂脤ο?，但是無法利用現(xiàn)有的對象模板產(chǎn)生新的對象類型，也就是說“基于對象”沒有繼承的特點。沒有了繼承的概念也就無從談?wù)摗岸鄳B(tài)”?，F(xiàn)在的很多流行技術(shù)都是基于對象的，它們使用一些封裝好的對象，調(diào)用對象的方法，設(shè)置對象的屬性。但是它們無法讓程序員派生新對象類型。他們只能使用現(xiàn)有對象的方法和屬性。HTML+CSS+JS入門基礎(chǔ)4.1.3JavaScript的基本特點3、簡單性

它是一種基于Java基本語句和控制流之上的簡單而緊湊的設(shè)計,從而對于學(xué)習(xí)Java是一種非常好的過渡。它的變量類型是采用弱類型，并未使用嚴(yán)格的數(shù)據(jù)類型。

var

a,b,c;a=123;b=“abc”;a=b;

HTML+CSS+JS入門基礎(chǔ)4.1.3JavaScript的基本特點4、安全性JavaScript不能訪問本地的硬盤，不能將數(shù)據(jù)存入到服務(wù)器上，不能對網(wǎng)絡(luò)文檔進(jìn)行修改和刪除，而只能通過瀏覽器實現(xiàn)信息瀏覽或動態(tài)交互5、跨平臺性JavaScript依賴于瀏覽器本身，與操作平臺無關(guān)，只要計算機上安裝了支持JavaScript的瀏覽器（裝有JavaScript解釋器），JavaScript程序就可以正確執(zhí)行。HTML+CSS+JS入門基礎(chǔ)4.1.3JavaScript的基本特點6、動態(tài)性（交互性）JavaScript可以直接對客戶輸入在客戶端做出響應(yīng)，實現(xiàn)人機交互，無須經(jīng)過Web服務(wù)程序。它對用戶的反映響應(yīng)，是采用以事件驅(qū)動的方式進(jìn)行的。事件驅(qū)動：在網(wǎng)頁中執(zhí)行了某種操作的動作，被稱為“事件”(Event)，比如按下鼠標(biāo)、移動窗口、選擇菜單等都可以視為事件。當(dāng)事件發(fā)生后，可能會引起相應(yīng)的事件響應(yīng)。HTML+CSS+JS入門基礎(chǔ)4.1.3JavaScript的基本特點JavaScript的局限性各種瀏覽器支持JavaScript的程度是不一樣的，支持和不完全支持JavaScript的瀏覽器在瀏覽同一個帶有JavaScript腳本的網(wǎng)頁時，效果會有一定的差距，有時甚至?xí)@示不出來。當(dāng)把JavaScript的一個設(shè)計目標(biāo)設(shè)定為“Web安全性”時，就需要犧牲JavaScript的一些功能。這時，純粹的JavaScript將不能打開、讀寫和保存用戶計算機上的文件。它有權(quán)訪問的唯一信息就是它所嵌入的那個Web主頁中的信息，簡言之，JavaScript將只存在于它自己的小小世界Web網(wǎng)頁里。HTML+CSS+JS入門基礎(chǔ)4.1.4JavaScript的作用交互式操作表單驗證網(wǎng)頁特效Web游戲服務(wù)器腳本開發(fā)等HTML+CSS+JS入門基礎(chǔ)4.1.5其他腳本語言JScript:Microsoft公司在Netscape公司發(fā)布的JavaScript的基礎(chǔ)上，也開發(fā)了自己的JavaScript規(guī)范，叫JScriptECMAscript:國際上通用的標(biāo)準(zhǔn)化版本的JavaScript，是未來JavaScript的發(fā)展方向VBScript：Microsoft開發(fā)的VB家族的成員，與JavaScript運行原理相同。但是，目前只有IE瀏覽器支持VBScript注意：JavaScript也有服務(wù)器端和客戶端兩種形式，客戶端JavaScript就是指把JavaScript解釋器嵌入到web瀏覽器中，這是迄今為止最為普通的JavaScript，一般提到的JavaScript都是指客戶端JavaScriptHTML+CSS+JS入門基礎(chǔ)4.1.6JavaScript和Java的區(qū)別Java是SUN公司推出的新一代面向?qū)ο蟮某绦蛟O(shè)計語言，特別適合于Internet應(yīng)用程序開發(fā)；Java的前身是Oak語言。JavaScript是Netscape公司的產(chǎn)品，是為了擴展NetscapeNavigator功能而開發(fā)的一種可以嵌入Web頁面中的基于對象和事件驅(qū)動的解釋性語言，它的前身是LiveScript；HTML+CSS+JS入門基礎(chǔ)4.1.6JavaScript和Java的區(qū)別JavaScript是腳本語言，是一種基于對象（ObjectBased）和事件驅(qū)動（EventDriver）的編程語言。因而它本身提供了非常豐富的內(nèi)部對象供設(shè)計人員使用。不支持繼承和多態(tài)。Java是面向?qū)ο蟮模碕ava是一種真正的面向?qū)ο蟮恼Z言，即使是開發(fā)簡單的程序也必須設(shè)計對象。支持封裝、繼承和多態(tài)。

HTML+CSS+JS入門基礎(chǔ)4.1.6JavaScript和Java的區(qū)別JavaScript與Java在瀏覽器中執(zhí)行的方式不一樣。JavaScript是一種解釋性編程語言，其源代碼在發(fā)往客戶端執(zhí)行之前不需經(jīng)過編譯，而是將文本格式的字符代碼發(fā)送給客戶端，即JavaScript語句本身隨Web頁面一起下載下來，由瀏覽器解釋執(zhí)行。Java的源代碼在傳遞到客戶端執(zhí)行之前，必須經(jīng)過編譯，因而客戶端上須具有相應(yīng)平臺上的解釋器，傳到客戶端的是編譯后的字節(jié)碼。HTML+CSS+JS入門基礎(chǔ)4.1.6JavaScript和Java的區(qū)別兩種語言所采取的變量是不一樣的。Java采用強類型變量檢查，即所有變量在編譯之前必須聲明為某一指定類型。如:

intx=1234;

Strings=“abcd”;JavaScript中是弱類型變量。統(tǒng)一采用var聲明，可賦各種數(shù)據(jù)類型值。vara,b,c;a=123;b=“abc”;a=b;HTML+CSS+JS入門基礎(chǔ)4.1.6JavaScript和Java的區(qū)別Java是一種與HTML無關(guān)的格式，必須通過像HTML中引用外媒體那么進(jìn)行裝載，其代碼以字節(jié)代碼的形式保存在獨立的文檔中。在HTML文檔中，Java使用<applet>...</applet>來標(biāo)識。JavaScript的代碼是一種文本字符格式，可以直接嵌入或間接調(diào)入到HTML文檔中，并且可動態(tài)裝載。編寫HTML文檔就像編輯文本文件一樣方便。在HTML文檔中，JavaScript使用<Script>...</Script>來標(biāo)識HTML+CSS+JS入門基礎(chǔ)4.1.7在網(wǎng)頁中加入JavaScript在HTML中加入JavaScript代碼，必須將JavaScript代碼放在<script>與</script>標(biāo)簽之間。<ScriptLanguage="JavaScript“>//<Scriptty

溫馨提示

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

最新文檔

評論

0/150

提交評論