版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認(rèn)領(lǐng)
文檔簡介
第1章Web前端基礎(chǔ)學(xué)習(xí)目的與要求本章對HTML、CSS與JavaScript進行簡要講述，包括HTML的常用標(biāo)簽、CSS的基本語法、JavaScript的語法基礎(chǔ)和JavaScript對象等內(nèi)容。通過本章的學(xué)習(xí)，掌握HTML的常用標(biāo)簽、CSS的使用方法以及JavaScript的語法基礎(chǔ)，能夠設(shè)計與開發(fā)靜態(tài)Web頁面，并編寫頁面中的JavaScript代碼?！禞avaWeb開發(fā)從入門到實戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
目錄1.1HTML1.2CSS1.3JavaScript《JavaWeb開發(fā)從入門到實戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
1.1.1HTML文件的基本結(jié)構(gòu)<html> <head>
……
</head>
<body>
……
</body></html>《JavaWeb開發(fā)從入門到實戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
1.1.2編寫HTML頁面HTML、CSS與JavaScript并不需要特殊的開發(fā)環(huán)境，它們都是由客戶端的瀏覽器執(zhí)行。HTML文件的擴展名為.html或.htm，CSS文件的擴展名為.css，JavaScript文件的擴展名為.js?！禞avaWeb開發(fā)從入門到實戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
1.1.3常用HTML標(biāo)簽常用HTML標(biāo)簽簡單劃分為以下4種格式：
<標(biāo)記名稱>單一型，無設(shè)置值。例如：<br> <標(biāo)記名稱屬性="屬性值">單一型，有設(shè)置值。例如：<hrcolor="red"> <標(biāo)記名稱></標(biāo)記名稱>對稱型，無設(shè)置值。例如：<title></title> <標(biāo)記名稱屬性="屬性值"></標(biāo)記名稱>對稱型，有設(shè)置值。例如：<bodybgcolor="red"></body>《JavaWeb開發(fā)從入門到實戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
1．標(biāo)題<h1>……</h1><h2>……</h2><h3>……</h3><h4>……</h4><h5>……</h5><h6>……</h6>h1到h6，作為標(biāo)題標(biāo)記，并且依據(jù)重要性遞減，字號從h1到h6由大變小。h1一級標(biāo)題代表重中之重，一般運用于網(wǎng)站標(biāo)題或者頭條新聞上。h2二級標(biāo)題主要出現(xiàn)在頁面的主體內(nèi)容的文章標(biāo)題和欄目標(biāo)題上。h3三級標(biāo)題一般出現(xiàn)在頁面的邊側(cè)欄上。《JavaWeb開發(fā)從入門到實戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
2．段落在HTML網(wǎng)頁中，使用<p>標(biāo)記實現(xiàn)一個新段落，語法格式如下：<p>段落的內(nèi)容</p><p>標(biāo)記中有個屬性align能夠設(shè)置段落中文字的對齊方式，對齊方式分為：左對齊、居中和兩端對齊，語法格式如下：<palign="對齊方式"></p>其中，align取值為left時，文字顯示左對齊；align取值為right時，文字顯示右對齊；align取值為center時，文字顯示居中對齊?！纠?-1】有3段文字，對齊方式依次為左、中、右?！禞avaWeb開發(fā)從入門到實戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
3．滾動（marquee）在HTML頁面中，可以使用marquee標(biāo)記讓文字滾動，該標(biāo)記有滾動方向（direction）、滾動方式（behavior）、滾動次數(shù)（loop）、滾動速度（scrollamount）、滾動延遲（scrolldelay）、背景顏色（bgcolor）、寬度和高度等常用屬性。語法格式如下：<marqueedirection="滾動方向"behavior="滾動方式">滾動的文字</marquee>其中，direction的值有up、down、left和right，分別表示向上、向下、向左和向右滾動，向左滾動是默認(rèn)情況；behavior的值有scroll、slide和alternate，分別表示循環(huán)滾動、只滾動一次和來回交替滾動；loop的值為整數(shù)；scrollamount的值為文字每次移動的長度，以像素為單位；scrolldelay的單位是毫秒?！禞avaWeb開發(fā)從入門到實戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
3．滾動（marquee）【例1-2】編寫一個網(wǎng)頁，網(wǎng)頁中有一段滾動的文字，文字滾動方向為默認(rèn)方向，文字滾動的背景色為藍色，文字滾動方式為來回交替滾動。《JavaWeb開發(fā)從入門到實戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
4．列表（1）無序列表標(biāo)記ulul標(biāo)記用于設(shè)置無序列表，在每個列表項目文字之前，以項目符號作為每條列表項的前綴，各個列表沒有級別之分。無序列表語法格式如下：<ul> <li>列表項</li> <li>列表項</li> ……</ul>無序列表的項目符號，默認(rèn)情況下是“
”，而通過ul標(biāo)記的type屬性可以改變無序列表的項目符號，避免項目符號的單調(diào)。type可取值disc、circle和square，分別代表“
”、“
”和“
”?！禞avaWeb開發(fā)從入門到實戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
（2）有序列表標(biāo)記ol有序列表中的項目采用數(shù)字或英文字母開頭，通常各項目之間是有先后順序的。有序列表語法格式如下：<ol> <li>列表項</li> <li>列表項</li> ……</ol>有序列表同無序列表一樣，也有項目類型，也可以通過type屬性設(shè)置自己的項目類型。默認(rèn)情況下，有序列表的項目序號是數(shù)字。也可以通過start屬性改變項目序號的起始值，起始數(shù)值只能是數(shù)字，但同樣對字母或羅馬數(shù)字起作用。如，項目類型為a，起始值為5，那么項目序號就從英文字母e開始編號。《JavaWeb開發(fā)從入門到實戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
4．列表【例1-3】編寫一個網(wǎng)頁，在網(wǎng)頁中分別定義一個無序列表和有序列表，無序列表項目符號為“
”，有序列表項目序號為“a、b、c、d……”?！禞avaWeb開發(fā)從入門到實戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
5．圖像與多媒體HTML圖像是通過img標(biāo)記進行插入。img標(biāo)記有很多屬性，其中src屬性是必需的，它指定要插入圖像文件的位置與名稱，語法格式如下：<imgsrc="圖像文件的路徑及名稱">在網(wǎng)頁中可以使用bgsound標(biāo)記給網(wǎng)頁添加背景音樂，語法格式如下：<bgsoundsrc="音樂文件的路徑及名稱"loop="播放次數(shù)">在網(wǎng)頁中可以使用embed標(biāo)記將多媒體文件（如Flash動畫、MP3音樂、ASF視頻等等）添加到網(wǎng)頁中，語法格式如下：<embedsrc="多媒體文件的路徑及名稱"width="播放器的寬度"height="播放器的高度"></embed>《JavaWeb開發(fā)從入門到實戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
6．超鏈接超鏈接的作用是建立從一個位置到另一個位置的鏈接。利用超鏈接不僅可以進行網(wǎng)頁間的相互訪問，還可以使網(wǎng)頁鏈接到其他相關(guān)的多媒體文件上。超鏈接標(biāo)記<a>是一個非常重要的標(biāo)記，它可以成對出現(xiàn)在文檔的任何位置，語法格式如下：<ahref="鏈接路徑"target="目標(biāo)窗口的打開方式">鏈接內(nèi)容</a>其中，“鏈接內(nèi)容”可以是文字內(nèi)容，也可以是一張圖片。target屬性值可以為_self、_blank、_top以及_parent，_self是target的默認(rèn)值。_blank表示目標(biāo)頁面會在一個新的空白窗口中打開。_top表示目標(biāo)頁面會在頂層框架中打開。_parent表示目標(biāo)頁面會在當(dāng)前框架的上一層打開?！纠?-4】假設(shè)有3個文件，分別為index.html、addGoods.html和updateGoods.html。其中index.html是起始頁面，addGoods.html和updateGoods.html在goods文件夾下，goods文件夾和index.html是在同一目錄。在index.html中可以鏈接到后面兩個頁面上?！禞avaWeb開發(fā)從入門到實戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
7．表格一個表格由行、列和單元格構(gòu)成，可以有多行，每行可以有多個單元格。創(chuàng)建表格要以<table>標(biāo)記開始和</table>標(biāo)記結(jié)束，語法格式如下：<table> <tr> <td>單元格中的內(nèi)容</td> <td>單元格中的內(nèi)容</td> …… </tr> <tr> <td>單元格中的內(nèi)容</td> <td>單元格中的內(nèi)容</td> …… </tr> ……</table>《JavaWeb開發(fā)從入門到實戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
7．表格在制作表格時，可能需要某個單元格占據(jù)多列的位置，這時就要使用單元格的colspan屬性設(shè)置單元格所跨的列數(shù)，語法格式如下：<tdcolspan="跨的列數(shù)值">同樣，當(dāng)需要某個單元格占據(jù)多行的位置時，就要使用rowspan屬性設(shè)置該單元格所跨的行數(shù)。<tdrowspan="跨的行數(shù)值">《JavaWeb開發(fā)從入門到實戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
7．表格【例1-5】編寫網(wǎng)頁example1_5.html，在網(wǎng)頁中有個表格，表格標(biāo)題為“個人簡歷”，邊框?qū)挾葹?，邊框顏色為green?！禞avaWeb開發(fā)從入門到實戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
8．表單表單是將用戶輸入的信息封裝提交給服務(wù)器，實現(xiàn)與用戶的交互。表單是用<form>標(biāo)記定義的，它類似于一個容器，表單對象必須在表單中才有效，如input。定義表單的語法格式如下：<formaction="表單的處理程序">．．．
input元素．．．</form>《JavaWeb開發(fā)從入門到實戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
（1）文本框與密碼框input標(biāo)記的type屬性值為text，代表的是單行文本框，在其中可以輸入任何類型的文本、數(shù)字或字母，輸入的內(nèi)容是以單行顯示。input標(biāo)記的type屬性值為password，代表的是密碼框，在其中輸入的字符都是以“*”或圓點“
”顯示。<form>
姓名：<inputtype="text"value=""name="userName"/> <br>
密碼：<inputtype="password"value="123456"name="pwd"/></form>《JavaWeb開發(fā)從入門到實戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
（2）單選按鈕與復(fù)選框單選按鈕用來讓用戶進行單一選擇，如讓用戶選擇性別。單選按鈕在頁面中以圓框（“
”）顯示，語法格式如下：<inputtype="radio"value="單選按鈕的值"name="單選按鈕的名稱"checked/>其中，name代表單選按鈕的名稱，一組單選按鈕的名稱都相同，action處理程序通過name獲取被選中的單選按鈕的value值。checked表示該單選按鈕被選中，而在一組單選按鈕中只有一個單選按鈕設(shè)置為checked。<form> <inputtype="radio"value="male"name="sex"checked/>男
<inputtype="radio"value="female"name="sex"/>女</form>《JavaWeb開發(fā)從入門到實戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
（2）單選按鈕與復(fù)選框復(fù)選框與單選按鈕不同的是復(fù)選框能夠?qū)崿F(xiàn)選項的多選，以一個方框（“
”）表示，語法格式如下：<inputtype="checkbox"value="復(fù)選框的值"name="復(fù)選框的名稱"checked/>其中，當(dāng)用戶選中復(fù)選框后，value屬性的值傳遞給處理程序。name代表的是復(fù)選框的名稱，一組復(fù)選框的名稱都相同，處理程序通過name獲取被選中的復(fù)選框的value值（以數(shù)組的形式返回，數(shù)組元素為被選中的復(fù)選框的value值）。checked表示該復(fù)選框被選中，一組復(fù)選框中可以同時有多個被選中。<form> <inputtype="checkbox"value="zhangsan"name="lover"checked/>張三
<inputtype="checkbox"value="lisi"name="lover"checked/>李四
<inputtype="checkbox"value="wangwu"name="lover"/>王五</form>《JavaWeb開發(fā)從入門到實戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
（3）按鈕普通按鈕主要是配合腳本語言（JavaScript）來進行表單的處理，語法格式如下：<inputtype="button"value="按鈕的值"name="按鈕的名稱"/>其中，value的取值就是顯示在按鈕上的文字，在普通按鈕中可以添加onclick、onfocus等JavaScript事件實現(xiàn)特定的功能。當(dāng)用戶在表單中輸入信息后，想清除輸入的信息，將表單恢復(fù)成初始狀態(tài)時，需要使用重置按鈕，語法格式如下：<inputtype="reset"value="按鈕的值"name="按鈕的名稱"/>用戶單擊提交按鈕時，可以實現(xiàn)表單內(nèi)容的提交，語法格式如下：<inputtype="submit"value="按鈕的值"name="按鈕的名稱"/>《JavaWeb開發(fā)從入門到實戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
（3）按鈕<form>
姓名：<inputtype="text"name="userName"/><br> <inputtype="submit"value="提交"/> <inputtype="reset"value="重置"/> <inputtype="button"value="關(guān)閉"onclick="window.close()"/></form>《JavaWeb開發(fā)從入門到實戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
（4）文件域文件域是由一個文本框和一個“瀏覽”按鈕組成的。用戶上傳文件時，可以直接在文本框中輸入要上傳文件的路徑，也可以單擊“瀏覽”按鈕選擇文件，語法格式如下：<inputtype="file"name="文件域的名稱"/>使用文件域上傳文件時，一定別忘記設(shè)置form表單信息提交的編碼方式為enctype="multipart/form-data"。如下面原始代碼：<formaction=""enctype="multipart/form-data">
你的靚照：<inputtype="file"name="fileName"/></form>《JavaWeb開發(fā)從入門到實戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
（5）下拉列表下拉列表語法格式如下：<selectname="下拉列表的名稱"size="顯示的項數(shù)"multiple> <optionvalue="選項值1"selected>選項1顯示內(nèi)容
<optionvalue="選項值2">選項2顯示內(nèi)容
……</select>其中，選項值是提交給服務(wù)器的值，而選項顯示內(nèi)容才是真正在頁面中要顯示的。selected表示此選項在默認(rèn)狀態(tài)下是選中的，size用來設(shè)定列表在頁面中最多顯示的項數(shù)，當(dāng)超出這個值時就會出現(xiàn)滾動條。multiple表示列表可以進行多項選擇?！禞avaWeb開發(fā)從入門到實戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
（5）下拉列表<selectname="cities"size="2"multiple> <optionvalue="beijing"selected>北京
<optionvalue="shanghai"selected>上海
<optionvalue="guangzhou">廣州 <optionvalue="shenzhen">深圳</select>《JavaWeb開發(fā)從入門到實戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
（6）文本區(qū)文本區(qū)是用來輸入多行文本。文本區(qū)和其他表單控件不一樣，它使用的是textarea標(biāo)記而不是input標(biāo)記，語法格式如下：<textareaname="文本區(qū)的名稱"cols="列數(shù)"rows="行數(shù)"></textarea>其中，cols用于設(shè)定文本區(qū)的列數(shù)，也就是其寬度；rows用于設(shè)定文本區(qū)的行數(shù)，也就是高度值，當(dāng)文本區(qū)的內(nèi)容超出這一范圍時就會出現(xiàn)滾動條。《JavaWeb開發(fā)從入門到實戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
1.1.4實踐環(huán)節(jié)——調(diào)查問卷制作《JavaWeb開發(fā)從入門到實戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
目錄1.1HTML1.2CSS1.3JavaScript《JavaWeb開發(fā)從入門到實戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
1.2.1CSS基本語法CSS的語法由三部分構(gòu)成：選擇符（selector）、屬性（property）和屬性值（value）。語法格式如下：選擇符{
屬性:值}選擇符用來指定針對哪個HTML標(biāo)簽應(yīng)用樣式表，任何一個HTML標(biāo)簽都可以是一個CSS的選擇符。如：body{ color:blue}其中，body就是選擇符，color就是屬性，blue就是屬性值。該規(guī)則表示在網(wǎng)頁body標(biāo)簽里的內(nèi)容為藍色。為選擇符指定多個樣式，需要在屬性之間用分號加以分隔。《JavaWeb開發(fā)從入門到實戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
1.2.2在網(wǎng)頁中添加CSS的方法CSS在網(wǎng)頁中按其位置可以分為三種：內(nèi)嵌樣式、內(nèi)部樣式和外部樣式。1．內(nèi)嵌樣式內(nèi)嵌樣式是將樣式代碼寫在標(biāo)記里面的，使用style作為屬性，樣式語句作為屬性值。內(nèi)嵌樣式只對所在標(biāo)記有效。如：<pstyle="font-size:20pt;color:red">這個style定義<p></p>里面的文字是20pt字號，字體顏色是紅色。</p>《JavaWeb開發(fā)從入門到實戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
1.2.2在網(wǎng)頁中添加CSS的方法2．內(nèi)部樣式內(nèi)部樣式是使用<style>標(biāo)記將樣式代碼寫在HTML的<head></head>里面的。內(nèi)部樣式只對所在網(wǎng)頁有效。如：<styletype="text/css">h1{ border-width:1; text-align:center; color:red}</style><body><h1>這個標(biāo)題使用了style。</h1></body>《JavaWeb開發(fā)從入門到實戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
1.2.2在網(wǎng)頁中添加CSS的方法3．外部樣式（1）鏈接樣式表將樣式代碼寫在一個以.css為后綴的CSS文件里，然后在每個需要用到這些樣式的網(wǎng)頁里引用這個CSS文件。通過HTML的link元素將外部的樣式文件鏈接到網(wǎng)頁里。如：<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>Inserttitlehere</title><linkrel="stylesheet"href="mystyle.css"type="text/css"/></head><body>
<h1>標(biāo)題</h1> <p>段落內(nèi)容</p></body></html>《JavaWeb開發(fā)從入門到實戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
1.2.2在網(wǎng)頁中添加CSS的方法（2）導(dǎo)入樣式表在<style>標(biāo)簽內(nèi)，使用@import導(dǎo)入外部樣式文件。例如：<styletype="text/css"> <!--
@importurl("mystyle.css"); h1{color:red} --></style></head><body> <h1>標(biāo)題</h1> <p>段落內(nèi)容</p></body></html>《JavaWeb開發(fā)從入門到實戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
1.2.2在網(wǎng)頁中添加CSS的方法使用外部樣式，相對于內(nèi)嵌樣式和內(nèi)部樣式，有以下優(yōu)點：①樣式代碼可以復(fù)用。一個外部CSS文件，可以被很多網(wǎng)頁共用。②便于修改。如果要修改樣式，只需要修改CSS文件，而不需要修改每個網(wǎng)頁。③提高網(wǎng)頁顯示的速度。如果樣式寫在網(wǎng)頁里，會降低網(wǎng)頁顯示的速度，如果網(wǎng)頁引用一個CSS文件，這個CSS文件已經(jīng)在緩存區(qū)（其它網(wǎng)頁早已經(jīng)引用過它），網(wǎng)頁顯示的速度就比較快?！禞avaWeb開發(fā)從入門到實戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
1.2.3選擇符的分類1．普通選擇符任意的HTML標(biāo)記都可以作為選擇符，這樣的選擇符稱為普通選擇符。其樣式僅僅作用在選擇符指定的HTML標(biāo)記上。如：p{ color:red}《JavaWeb開發(fā)從入門到實戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
1.2.3選擇符的分類2．類選擇符HTML標(biāo)記名加上類名，中間用“.”號分開，類名供該HTML標(biāo)記的class屬性使用。希望<p>有兩種樣式，一種是居中對齊，一種是居右對齊。那么可以寫成如下的樣式：p.right
{ text-align:right}p.center{ text-align:center}其中，right和center就是兩個class。在網(wǎng)頁中可以引用這兩個class設(shè)置段落的對齊方式。示例代碼如下：<pclass="center">這一段內(nèi)容是居中顯示。</p><pclass="right">這一段內(nèi)容是居右顯示。</p>如果省略HTML標(biāo)記名只寫“.類名”表示這個類名適用于所有的HTML標(biāo)記的class屬性，這種選擇符稱為通用類選擇符?！禞avaWeb開發(fā)從入門到實戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
1.2.3選擇符的分類3．id選擇符HTML標(biāo)記名加上id名，中間用“#”號分開，id名供該HTML標(biāo)記的id屬性使用。如：p#svp{ font-size:12pt}其中，svp是個id選擇符的名字，在網(wǎng)頁中可以引用這個id選擇符設(shè)置<p>的樣式。示例代碼如下：<pid="svp">這一段話的字體大小為12pt。</p>如果省略HTML標(biāo)記名只寫“#id名”表示這個id名適用于所有的HTML標(biāo)記的id屬性，這種選擇符稱為通用id選擇符。《JavaWeb開發(fā)從入門到實戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
1.2.4偽類及偽對象偽類及偽對象由CSS自動支持，屬于CSS的一種擴展類型。名稱不能被用戶自定義，使用時只能按照標(biāo)準(zhǔn)格式進行應(yīng)用。1．超鏈接偽類超鏈接偽類共有4個，它們是a:link、a:visited、a:hover和a:active。a:link表示未被訪問的鏈接，a:visited表示已被訪問過的鏈接，a:hover表示鼠標(biāo)懸浮在上的鏈接，a:active表示鼠標(biāo)點中激活鏈接。由于優(yōu)先級的關(guān)系，在寫超鏈接<a>的CSS時，一定要按照a:link、a:visited、a:hover、a:active的順序書寫。如：a:link{color:red}/*未被訪問的鏈接紅色*/a:visited{color:green}/*已被訪問過的鏈接綠色*/a:hover{color:yellow}/*鼠標(biāo)懸浮在上的鏈接黃色*/a:active{color:blue}/*鼠標(biāo)點中激活鏈接藍色*/《JavaWeb開發(fā)從入門到實戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
1.2.4偽類及偽對象2．常用偽對象:first-letter設(shè)置對象內(nèi)的第一個字符的樣式表屬性，如設(shè)置段落p標(biāo)記的第一個字符的樣式代碼如下：p:first-letter{ color:red; font-size:16px}:first-line設(shè)置對象內(nèi)的第一行的樣式表屬性，如設(shè)置body對象里第一行的樣式代碼如下：body:first-line{ color:red; font-size:16px}《JavaWeb開發(fā)從入門到實戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
1.2.5常見的DIV+CSS布局類型1．DIVDIV是一個放置內(nèi)容的容器，用于大面積、大區(qū)域的塊狀排版，樣式需要編寫CSS來實現(xiàn)。《JavaWeb開發(fā)從入門到實戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
1.2.5常見的DIV+CSS布局類型2．一列固定寬度的屬性值是固定像素，無論怎樣改變?yōu)g覽器窗口大小，DIV的寬度都不改變?！禞avaWeb開發(fā)從入門到實戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
1.2.5常見的DIV+CSS布局類型3．兩列固定寬度兩列的布局需要用到兩個DIV，寬度的屬性值是固定像素?！禞avaWeb開發(fā)從入門到實戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
1.2.5常見的DIV+CSS布局類型4．三列浮動中間寬度自適應(yīng)三列浮動中間寬度自適應(yīng)就是要求左邊DIV固定寬度且左顯示，右邊DIV固定寬度且右顯示，中間DIV根據(jù)左右DIV的間距變化寬度自適應(yīng)?！禞avaWeb開發(fā)從入門到實戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
1.2.5常見的DIV+CSS布局類型5．三行二列居中高度自適應(yīng)三行二列居中高度自適應(yīng)就是要求整個網(wǎng)頁內(nèi)容居中，第一行DIV固定高度且居頂端顯示，第三行DIV固定高度且居底端顯示，中間DIV根據(jù)內(nèi)容的變化高度自適應(yīng)?！禞avaWeb開發(fā)從入門到實戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
1.2.6實踐環(huán)節(jié)——頁面布局《JavaWeb開發(fā)從入門到實戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
目錄1.1HTML1.2CSS1.3JavaScript《JavaWeb開發(fā)從入門到實戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
1.3.1在網(wǎng)頁中添加JavaScript的方法1．嵌入使用在網(wǎng)頁代碼中任何位置都可嵌入JavaScript代碼，但建議嵌入到head標(biāo)記中。示例代碼如下：<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>JavaScript嵌入學(xué)習(xí)</title><scripttype="text/javascript"> alert("第一次看到警告框很興奮！");</script></head><body>
好好學(xué)習(xí)JavaScript知識。</body></html>《JavaWeb開發(fā)從入門到實戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
1.3.1在網(wǎng)頁中添加JavaScript的方法2．引入使用當(dāng)多個頁面使用相同的JavaScript代碼時，可以將共用的代碼保存在以.js為擴展名的文件中，然后在頁面中使用src屬性引入外部js文件。示例代碼如下：myFirst.jsalert("被引入到頁面中！");引入外部js文件學(xué)習(xí).html<html><head><metacharset="UTF-8"><title>引入外部js文件</title><scripttype="text/javascript"src="myFirst.js"charset="GBK"></script></head><body>
好好學(xué)習(xí)JavaScript知識。</body></html>《JavaWeb開發(fā)從入門到實戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
1.3.2JavaScript基本語法1．變量使用var可以聲明任意類型的變量，如：varfirstNumber=10;2．類型轉(zhuǎn)換JavaScript是弱類型語言，變量的類型對應(yīng)于其值的類型。可以對不同類型的變量執(zhí)行運算，解釋器強制轉(zhuǎn)換數(shù)據(jù)類型，然后進行處理。如：數(shù)值與字符串相加，將數(shù)值強制轉(zhuǎn)換為字符串；布爾值與字符串相加，將布爾值強制轉(zhuǎn)換為字符串；數(shù)值與布爾值相加，將布爾值強制轉(zhuǎn)換為數(shù)值。字符串到數(shù)值的轉(zhuǎn)換。如：parseInt(s)將字符串轉(zhuǎn)換為整數(shù)，parseFloat(s)將字符串轉(zhuǎn)換為浮點數(shù)，Number(s)將字符串轉(zhuǎn)換為數(shù)字。parseInt和parseFloat方法只對string類型有效，且需要是數(shù)字開頭的字符串。《JavaWeb開發(fā)從入門到實戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
賦值運算符《JavaWeb開發(fā)從入門到實戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
運算符示例說明=x=y;將變量y的值賦給x+=x+=y;x=x+y;-=x-=y;x=x-y;*=x*=y;x=x*y;/=x/=y;x=x/y;數(shù)學(xué)運算符《JavaWeb開發(fā)從入門到實戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
運算符示例說明+A=5+8//結(jié)果是13A="5"+8//結(jié)果是"58"如果操作數(shù)都是數(shù)字時執(zhí)行加法運算，如果其中的操作數(shù)有字符串時，會執(zhí)行連接字符串的運算。-A=8–5減法*A=8*5乘法/A=8/5//結(jié)果是1.6除法%10%3=1取余++++x返回遞增后的x值x++返回遞增前的x值遞增----x返回遞減后的x值x--返回遞減前的x值遞減-如果a等于5，則-a=-5此運算符返回操作數(shù)的相反數(shù)邏輯運算符《JavaWeb開發(fā)從入門到實戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
運算符示例說明&&expr1&&expr2邏輯與（表達式1錯誤，表達式2不再運算）||expr1||expr2邏輯或（表達式1正確，表達式2不再運算）!!expr邏輯非typeof運算符《JavaWeb開發(fā)從入門到實戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
示例返回結(jié)果說明typeof(true)boolean變量或值是boolean類型typeof(300)number變量或值是number類型typeof('abc')string變量或值是string類型typeof(null)object變量或值是一種引用類型或null類型typeof(f)function變量是一個函數(shù)4．注釋aGoodIdea="Commentyourcodethoroughly.";//這是單行注釋。/*這是多行注釋行一。這是多行注釋行二。*/《JavaWeb開發(fā)從入門到實戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
5．變量命名規(guī)則以字母、下劃線（_）或美元符號（$）開頭；余下的字符可以是下劃線、美元符號或任何的字母、數(shù)字；不能有空格，大小寫敏感；不能使用JavaScript中的關(guān)鍵字或保留字命名?！禞avaWeb開發(fā)從入門到實戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
6．部分保留字break、delete、function、return、typeof、case、do、if、switch、var、catch、else、in、this、void、continue、false、instanceof、throw、while、finally、new、true、with、default、for、null、try《JavaWeb開發(fā)從入門到實戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
1.3.3流程控制與函數(shù)if條件語句if(表達式){
語句}或if(表達式)){
語句}else{
語句}《JavaWeb開發(fā)從入門到實戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
1.3.3流程控制與函數(shù)switch條件語句switch(表達式){ casecase1:
語句
break; casecase2:
語句
break; …… default: default語句}《JavaWeb開發(fā)從入門到實戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
1.3.3流程控制與函數(shù)for循環(huán)語句for(表達式1;表達式2;表達式3){
語句}while循環(huán)語句while(表達式){
語句}do-while循環(huán)語句do{
語句}while(表達式)break/continue語句break語句讓執(zhí)行語句從循環(huán)語句或其它程序塊中跳出。continue語句讓執(zhí)行語句跳過本次循環(huán)的剩余語句進入下一次循環(huán)?！禞avaWeb開發(fā)從入門到實戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
1.3.3流程控制與函數(shù)2．函數(shù)將完成某個功能的一組語句常寫成一個函數(shù)，函數(shù)的定義格式如下：function函數(shù)名([參數(shù),參數(shù)]){
函數(shù)體}function是關(guān)鍵字，函數(shù)沒有類型，參數(shù)也沒有類型。例如：functiongogo(obj){
document.write("函數(shù)沒有類型，參數(shù)也沒有類型");}《JavaWeb開發(fā)從入門到實戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
1.3.3流程控制與函數(shù)3．a(chǎn)rguments對象函數(shù)可以接受任意個數(shù)的參數(shù)，通過arguments對象來訪問。示例代碼如下：functionsay(){if(arguments[1]!="你好"){ alert(arguments[0]);}else{ alert(arguments[1]);}alert(arguments.length);//返回參數(shù)的個數(shù)}調(diào)用函數(shù)如下：say("Howareyou?","你好");《JavaWeb開發(fā)從入門到實戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
1.3.3流程控制與函數(shù)4．系統(tǒng)函數(shù)JavaScript提供了與任何對象無關(guān)的系統(tǒng)函數(shù)，使用這些函數(shù)不需要創(chuàng)建任何對象就可以直接使用。
eval(字符串表達式)該函數(shù)的功能是返回字符串表達式的值，例如：vartest=eval("2+3");//test的值為5parseInt(字符串)該函數(shù)的功能是將以數(shù)字開頭的字符串轉(zhuǎn)換為整數(shù)，例如：vartest=parseInt("200.5abc");//test的值為200parseFloat(字符串)該函數(shù)的功能是將以數(shù)字開頭的字符串轉(zhuǎn)換為浮點數(shù)，例如：vartest=parseFloat("200.5abc");//test的值為200.5Number(字符串)該函數(shù)的功能是將數(shù)字字符串轉(zhuǎn)換為數(shù)字，字符串中有非數(shù)字字符則返回NaN。例如：vartest=Number("200.5abc");//test的值為NaN《JavaWeb開發(fā)從入門到實戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
1.3.3流程控制與函數(shù)【例1-12】編寫網(wǎng)頁example1_12.html，在網(wǎng)頁中嵌入使用JavaScript程序打印出九九乘法表?！禞avaWeb開發(fā)從入門到實戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
1.3.3流程控制與函數(shù)在鏈接中調(diào)用函數(shù)用戶單擊鏈接時，即調(diào)用函數(shù)，格式如下：<ahref="javascript:函數(shù)">……</a>在鏈接中調(diào)用函數(shù)的示例代碼如下：<scripttype="text/javascript">functiongogo(){ alert("被鏈接調(diào)用的函數(shù)");}</script></head><body>
<ahref="javascript:gogo()">鏈接調(diào)用函數(shù)</a></body>《JavaWeb開發(fā)從入門到實戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
1.3.3流程控制與函數(shù)由事件觸發(fā)調(diào)用函數(shù)觸發(fā)事件調(diào)用函數(shù)，格式如下：
事件="函數(shù)"觸發(fā)事件調(diào)用函數(shù)的示例代碼如下：<scripttype="text/javascript">functiongogo(param){ alert(param);}</script><formaction=""><inputtype="button"value="點擊我"onclick="gogo('O(∩_∩)O哈哈~')"/></form>《JavaWeb開發(fā)從入門到實戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
1.3.4JavaScript對象一個JavaScript對象中可包含若干屬性和方法。屬性是描述對象的狀態(tài)，對象用“.”運算符訪問屬性。方法是描述對象的行為動作，對象用“.”運算符調(diào)用方法。1．對象創(chuàng)建使用new關(guān)鍵字來創(chuàng)建對象，如：varoStringObject=newString();如果構(gòu)造函數(shù)無參數(shù)，則不必加括號?！禞avaWeb開發(fā)從入門到實戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
（1）數(shù)組（Array）對象 創(chuàng)建數(shù)組數(shù)組的創(chuàng)建，示例代碼如下：varmyArray=newArray();//新建一個長度為0的數(shù)組varmyArray=newArray(100);//新建一個長度為100的數(shù)組varmyArray=newArray(1,2,3);//新建一個指定長度的數(shù)組，并賦初值數(shù)組長度不固定，賦值即可改變長度。數(shù)組的主要屬性length，返回數(shù)組長度。 數(shù)組的常用方法reverse方法：將Javascript數(shù)組對象內(nèi)容反轉(zhuǎn)。concat方法：將兩個或更多數(shù)組組合在一起，如：varnewArray=tmpArray.concat(tmpArray);join方法：返回一個將數(shù)組所有元素用指定符號連在一起的字符串，如：varnewString=tmpArray.join(".");pop()方法：移除數(shù)組中的最后一個元素并返回該元素。shift()方法：移除數(shù)組中的第一個元素并返回該元素。slice方法：返回數(shù)組的一部分，如：varnewArray=tmpArray.slice(1，3);《JavaWeb開發(fā)從入門到實戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
（1）數(shù)組（Array）對象 數(shù)組的使用數(shù)組的使用，示例代碼如下：<scripttype="text/javascript">
varmyArray=newArray();
for(vari=0;i<5;i++){
myArray[i]=i;
}
for(varj=0;j<myArray.length;j++){
alert(myArray[j]);
}</script>《JavaWeb開發(fā)從入門到實戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
（2）日期（Date）對象Date對象可以用來表示任意的日期和時間。 創(chuàng)建Date對象必須使用new運算符創(chuàng)建一個Date對象。示例代碼如下：vardate=newDate("July8,2012");//2012年7月8日vardate=newDate(2012,7,8);//2012年8月8日vardate=newDate("2012/7/8");//2012年7月8日vardate=newDate(Milliseconds);//自1970年1月1日以來的毫秒數(shù)創(chuàng)建的日期對象vardate=newDate();//當(dāng)前系統(tǒng)的時間對象 獲取日期的時間方法getYear()：返回年數(shù)。getMonth()：返回當(dāng)月號數(shù)（比實際值小1）。getDate()：返回當(dāng)日號數(shù)。getDay()：返回星期幾（0表示周日）。getHours()：返回小時數(shù)。getMinutes()：返回分鐘數(shù)。getSeconds()：返回秒數(shù)。getTime()：返回毫秒數(shù)?！禞avaWeb開發(fā)從入門到實戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
（2）日期（Date）對象 設(shè)置日期和時間的方法setYear()：設(shè)置年數(shù)。setMonth()：設(shè)置當(dāng)月號數(shù)（set6表示7月）。setDate()：設(shè)置當(dāng)日號數(shù)。setHours()：設(shè)置小時數(shù)。setMinutes()：設(shè)置分鐘數(shù)。setSeconds()：設(shè)置秒數(shù)。setTime()：設(shè)置毫秒數(shù)。
Date對象的使用Date對象的使用，示例代碼如下：<scripttype="text/javascript">
vardate=newDate("2050/12/25");
document.write("2050的圣誕節(jié)是星期"+date.getDay()+"<br>");
vardatenow=newDate();//得到當(dāng)前日期對象
varmills=date-datenow;//兩個Date對象想減得到兩個日期的時間間隔（單位是毫秒）
document.write("2050的圣誕節(jié)距離現(xiàn)在還有"+mills+"毫秒<br>");
</script>《JavaWeb開發(fā)從入門到實戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
（3）String對象 創(chuàng)建String對象字符串對象的創(chuàng)建，示例代碼如下：varfirstString="Thisisastring";varsecondString=newString("Thisisastring");String對象的主要屬性length，返回字符串的長度。
String對象的常用方法charAt(i)：返回指定索引位置處的字符，索引從0開始。concat(str)：連接字符串。indexOf(str)：返回String對象內(nèi)第一次出現(xiàn)子字符串的字符位置（從左到右查找）。lastIndexOf(str)：返回String對象中子字符串最后出現(xiàn)的位置。replace(str1,str2)：返回將str1替換為str2后的字符串。split(separator,limit)：將字符串以separator作為分割符切割成多個子字符串，并將他們作為一個數(shù)組返回；如果有l(wèi)imit參數(shù)則返回數(shù)組的limit個元素。substring(start,end)：返回一個指定位置之間的子字符串，不包括end。toLowerCase()：返回一個字符串，字符串中的字母被轉(zhuǎn)換為小寫字母。toUpperCase()：返回一個字符串，字符串中的字母被轉(zhuǎn)換為大寫字母。《JavaWeb開發(fā)從入門到實戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
（3）String對象
String對象的使用String對象的使用，示例代碼如下：<scripttype="text/javascript">
varfirstString="Thisisastring";
for(vari=0;i<firstString.length;i++){
alert(firstString.charAt(i));
}</script>《JavaWeb開發(fā)從入門到實戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
（4）Math對象Math對象是個全局對象，使用時不需要創(chuàng)建。
Math對象的屬性LN10：10的自然對數(shù)。LN2：2的對數(shù)。PI：圓周率。SQRT1_2：1/2的平方根。SQRT2：2的平方根。
Math對象的常用方法abs(x)：返回x的絕對值。ceil(x)：返回大于等于x的最小整數(shù)。floor(x)：返回小于等于x的最大整數(shù)。round(x)：舍入到最近整數(shù)。sqrt(x)：返回x的平方根。random()：返回0-1之間的隨機數(shù)?！禞avaWeb開發(fā)從入門到實戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
（4）Math對象
Math對象的使用Math對象的使用，示例代碼如下：<scripttype="text/javascript">
alert(Math.SQRT2);
alert(Math.random());
</script>【例1-13】編寫網(wǎng)頁example1_13.html，在網(wǎng)頁中定義一個JavaScript函數(shù)，功能是去除字符串開頭及末尾的空格，并使用超鏈接來調(diào)用該函數(shù)?！禞avaWeb開發(fā)從入門到實戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
1.3.5JavaScript對象模型1．瀏覽器對象模型瀏覽器對象是提供獨立于內(nèi)容而與瀏覽器窗口進行交互的對象?！禞avaWeb開發(fā)從入門到實戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
2．窗口（window）對象（1）打開新窗口使用open()方法可打開一個新窗口，示例代碼如下：varwinObj=open("target.html","target_1","width=500,height=300,scrollbars=no");open方法有3個參數(shù)：第一個代表要載入新窗口頁面的URL，第二個代表新窗口的名稱，第三個代表新窗口的屬性，多個屬性間用逗號隔開。（2）對話框（與用戶交互）方法
alert()該方法的功能是彈出一個提示框。示例代碼如下：<scripttype="text/javascript">
alert("請點擊確定按鈕！");</script>《JavaWeb開發(fā)從入門到實戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
2．窗口（window）對象
prompt(message,defaultText)該方法的功能是彈出可以輸入信息的文本框，第一個參數(shù)代表用戶輸入信息的提示，第二個參數(shù)代表文本框的默認(rèn)值。示例代碼如下：<scripttype="text/javascript">
prompt("What'syourname?","chenheng");</script>《JavaWeb開發(fā)從入門到實戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
2．窗口（window）對象
confirm(message)該方法的功能是彈出對話框，提示確認(rèn)信息。示例代碼如下：<scripttype="text/javascript">
if(confirm("真的刪除嗎？")){
//單擊確定后的操作
}else{
//單擊取消后的操作
}</script>《JavaWeb開發(fā)從入門到實戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
3．history對象history對象記錄著瀏覽器所瀏覽過的每一個頁面，這些頁面組成了一個歷史記錄列表。它有3個主要方法：forward()：將歷史記錄向前移動一個頁面。back()：將歷史記錄向后移動一個頁面，在網(wǎng)頁中經(jīng)常使用該方法提供一個“返回”的功能。go()：轉(zhuǎn)向歷史記錄中指定地址，使用此方法需要一個參數(shù)，參數(shù)可以是正負(fù)整數(shù)或字符串。如果參數(shù)是字符串，那么瀏覽器就會搜索列表，找到最接近當(dāng)前頁面位置且URL地址中含有此字符串的頁面，然后轉(zhuǎn)到該頁面。history對象的使用，示例代碼如下：history.go(-3);//向后返回三個訪問過的頁面histroy.go(3);//向前返回三個訪問過的頁面history.back();//與history.go(-1);功能相同history.forward();//與history.go(1);功能相同《JavaWeb開發(fā)從入門到實戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
4．location對象window對象的location屬性可以直接改變URL地址：window.location="";或location="";還可以使用location對象的href屬性或replace(URL)方法改變URL地址：location.href="";或location.replace("");可以使用location對象的href屬性清空頁面：location.href="about:blank";//清空頁面《JavaWeb開發(fā)從入門到實戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
5．document對象
forms集合在同一個頁面上有多個表單，通過document.forms[]數(shù)組獲得這些表單對象要比使用表單名稱方便得多。
getElementById(id)方法該方法的功能是獲得指定id值的表單控件對象。
getElementsByName(name)方法該方法的功能是獲得指定name值的表單控件對象，返回的是對象數(shù)組。 獲取表單對象的方法獲取表單對象的方法如下：document.forms[0]; //通過forms對象的索引document.forms["myForm"];//通過forms對象和表單名稱document.myForm; //通過表單名稱《JavaWeb開發(fā)從入門到實戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
1.3.6操作HTML 窗口或頁面的事件處理《JavaWeb開發(fā)從入門到實戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
事件說明onBlur當(dāng)前元素失去焦點時觸發(fā)onFocus當(dāng)某個元素獲得焦點時觸發(fā)onLoad頁面內(nèi)容完成裝載時觸發(fā)onUnload當(dāng)前頁面被退出或重置時觸發(fā)1.3.6操作HTML 鍵盤或鼠標(biāo)的事件處理《JavaWeb開發(fā)從入門到實戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
事件說明onClick當(dāng)鼠標(biāo)單擊時觸發(fā)onDblClick當(dāng)鼠標(biāo)雙擊時觸發(fā)onMouseDown當(dāng)按下鼠標(biāo)時觸發(fā)onMouseMove當(dāng)鼠標(biāo)移動時觸發(fā)onMouseOut當(dāng)鼠標(biāo)離開某對象范圍時觸發(fā)onMouseOver當(dāng)鼠標(biāo)移動到某對象范圍的上方時觸發(fā)onMouseUp當(dāng)鼠標(biāo)按下后松開鼠標(biāo)時觸發(fā)onKeyPress當(dāng)鍵盤上的某個鍵被按下并且釋放時觸發(fā)onKeyDown當(dāng)鍵盤上某個鍵被按下時觸發(fā)onKeyUp當(dāng)鍵盤上某個鍵被按放開時觸發(fā)1.3.6操作HTML 表單元素的事件處理《JavaWeb開發(fā)從入門到實戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
表單元素主要事件button（按鈕）onClickonBluronFocuscheckbox（復(fù)選框）onClickonBluronFocusfile（上傳文件）onClickonBluronFocuspassword（密碼框）onBluronFocusonSelectradio（單選按鈕）onClickonBluronFocusselect（列表）onFocusonBluronChangetext（文本框）onClickonBluronFocusonChangetextarea（文本區(qū)）onClickonBluronFocusonChange1.3.6操作HTML 表單元素的通用屬性與方法form屬性：獲取該表單控件所屬的表單對象。name屬性：獲取或設(shè)置表單控件的名稱。type屬性：獲取表單控件的類型。value屬性：獲取和設(shè)置表單控件的值。focus方法：讓表單控件對象獲得焦點。blur方法：讓表單控件對象失去焦點?！禞avaWeb開發(fā)從入門到實戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
1.3.6操作HTML 文本框value屬性：獲得文本框的值，值是字符串類型。defaultValue屬性：獲得文本框的默認(rèn)值，值是字符串類型。readonly屬性：只讀，文本框中的內(nèi)容不能修改。focus方法：獲得焦點，即獲得鼠標(biāo)光標(biāo)。blur方法：失去焦點。select方法：選中文本框內(nèi)容，突出顯示輸入?yún)^(qū)域?！禞avaWeb開發(fā)從入門到實戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
1.3.6操作HTML 復(fù)選框checked屬性：復(fù)選框是否被選中，選中為true，未選中為false。value屬性：設(shè)置或獲取復(fù)選框的值。 單選按鈕checked屬性：單選按鈕是否被選中，選中為true，未選中為false。value屬性：設(shè)置或獲取單選按鈕的值?！禞avaWeb開發(fā)從入門到實戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
1.3.6操作HTML 下拉列表length屬性：選項個數(shù)。selectedIndex屬性：當(dāng)前被選中選項的索引。options屬性：所有的選項組成一個數(shù)組，options表示整個選項數(shù)組，第一個選項即為options[0]，第二個即為options[1]，其他以此類推。option的value屬性：<option>標(biāo)記中value所指定的值。option的text屬性：顯示于界面中的文本，即<option>…</option>之間的部分。增加選項：每個選項都是一個option對象，可以創(chuàng)建option對象，然后添加到select的末尾。如：select.options[select.length]=newOption(text,value);《JavaWeb開發(fā)從入門到實戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
1.3.7表單驗證用戶在表單中輸入的內(nèi)容提交到服務(wù)器之前，在客戶端利用表單控件產(chǎn)生的事件，運用JavaScript，驗證用戶輸入數(shù)據(jù)的有效性?！禞avaWeb開發(fā)從入門到實戰(zhàn)（第2版·微課視頻版）》陳恒
主編，清華大學(xué)出版社，2024
1.3.8實踐環(huán)節(jié)——表單驗證制作一個用戶注冊頁面practice1_3.html，具體要求如下： 有常用的登錄賬號、密碼、確認(rèn)密碼、姓名、身份證號碼（只考慮1
溫馨提示
- 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)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 股權(quán)收益權(quán)轉(zhuǎn)讓及回購合同
- 2024授權(quán)網(wǎng)站登載作品合同范本
- 2024至2030年燒成粘土制品項目投資價值分析報告
- 2024至2030年振動沸騰冷卻床項目投資價值分析報告
- 2024至2030年雙撥號電話機項目投資價值分析報告
- 2024至2030年中國銘牌絲印不干膠數(shù)據(jù)監(jiān)測研究報告
- 2024至2030年中國蒙賽爾土壤比色卡行業(yè)投資前景及策略咨詢研究報告
- 2024年儲熱式梭式窯項目可行性研究報告
- 橋梁蓋梁配筋課程設(shè)計
- 幼兒園矛盾調(diào)處處置工作預(yù)案
- 幼兒園世界地球日保護地球媽媽
- 豬肉配送服務(wù)應(yīng)急保障方案
- 供配電工程及配套設(shè)施 投標(biāo)方案（技術(shù)方案）
- AI技術(shù)在智能旅游中的應(yīng)用
- 財產(chǎn)損害諒解書
- 3D打印技術(shù)在教育領(lǐng)域的應(yīng)用案例報告
- 航天集團員工手冊
- 物聯(lián)網(wǎng)中的邊緣智能設(shè)備與邊緣計算
- 籃球培訓(xùn)年終總結(jié)報告
- 學(xué)校安全雙重預(yù)防體系建設(shè)
- 反洗錢：非自然人客戶信息登記表
評論
0/150
提交評論