版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡(jiǎn)介
第1章
網(wǎng)頁(yè)開(kāi)發(fā)基礎(chǔ)《JavaWeb程序設(shè)計(jì)任務(wù)教程（第3版）（AIGC版）》學(xué)習(xí)目標(biāo)/Target了解HTML，能夠簡(jiǎn)述HTML的概念
了解CSS，能夠簡(jiǎn)述CSS的作用和定義CSS樣式的基本語(yǔ)法格式了解JavaScript，能夠簡(jiǎn)述JavaScript的特性、主要組成部分和3種代碼引入方式掌握HTML常見(jiàn)標(biāo)簽，能夠使用HTML常見(jiàn)標(biāo)簽構(gòu)建網(wǎng)頁(yè)學(xué)習(xí)目標(biāo)/Target掌握CSS樣式的引入方式，能夠使用內(nèi)聯(lián)樣式、內(nèi)部樣式表、外部樣式表引入CSS樣式掌握CSS選擇器的使用方式，能夠使用元素選擇器、ID選擇器、class選擇器和通用選擇器選擇特定元素并應(yīng)用CSS樣式熟悉CSS常用屬性，能夠使用CSS常用屬性對(duì)元素進(jìn)行樣式設(shè)置熟悉JavaScript基礎(chǔ)語(yǔ)法，能夠在程序中正確使用JavaScript的數(shù)據(jù)類(lèi)型、變量、運(yùn)算符、流程控制、函數(shù)、對(duì)象學(xué)習(xí)目標(biāo)/Target掌握DOM和BOM的使用方法，能夠使用DOM和BOM在瀏覽器環(huán)境中操作和控制網(wǎng)頁(yè)掌握J(rèn)avaScript事件的使用方法，能夠?yàn)榫W(wǎng)頁(yè)元素綁定常見(jiàn)的事件掌握AI編程助手的使用，能夠使用AI編程助手實(shí)現(xiàn)代碼自動(dòng)補(bǔ)全章節(jié)概述/Summary在學(xué)習(xí)JavaWeb之前，對(duì)網(wǎng)頁(yè)開(kāi)發(fā)有基礎(chǔ)的認(rèn)知很重要。通常來(lái)說(shuō)，網(wǎng)頁(yè)是基于HTML（HyperTextMarkupLanguage，超文本標(biāo)記語(yǔ)言）編寫(xiě)的文檔，它可以包含多種內(nèi)容，如文字、圖像、視頻、音頻以及超鏈接等，這些內(nèi)容組合在一起，以圖形化界面的形式向用戶展示各種信息、服務(wù)和功能。要構(gòu)建一個(gè)功能全面且用戶吸引力強(qiáng)的網(wǎng)頁(yè)，通常需要開(kāi)發(fā)人員掌握HTML、CSS（CascadingStyleSheets，層疊樣式表）以及JavaScript等技術(shù)，本章將圍繞HTML、CSS、JavaScript對(duì)網(wǎng)頁(yè)開(kāi)發(fā)基礎(chǔ)進(jìn)行講解。目錄/Contents0102HTML概述HTML常見(jiàn)標(biāo)簽03CSS04JavaScript05AI編程助手HTML概述1.11.1
HTML概述HTML是用來(lái)創(chuàng)建網(wǎng)頁(yè)結(jié)構(gòu)和內(nèi)容的標(biāo)記語(yǔ)言，隨著互聯(lián)網(wǎng)的發(fā)展，HTML經(jīng)歷了多個(gè)版本的更新和演進(jìn)，目前HTML5是最新的HTML標(biāo)準(zhǔn)，它為網(wǎng)頁(yè)開(kāi)發(fā)帶來(lái)了諸多的改進(jìn)和新特性。因此，下面將以HTML5為基礎(chǔ)對(duì)HTML進(jìn)行介紹。1.1.1HTML中的標(biāo)簽和屬性先定一個(gè)小目標(biāo)！
先定一個(gè)小目標(biāo)！熟悉HTML中的標(biāo)簽和屬性，能夠簡(jiǎn)述HTML中的標(biāo)簽和屬性的概念和作用1.1.1HTML中的標(biāo)簽和屬性使用HTML編寫(xiě)的文件稱為HTML文檔，HTML文檔的擴(kuò)展名為htm或html，這兩種擴(kuò)展名在本質(zhì)上并沒(méi)有區(qū)別，一般使用html作為HTML文檔的擴(kuò)展名。HTML提供了一系列預(yù)定義的標(biāo)簽和屬性來(lái)定義網(wǎng)頁(yè)的結(jié)構(gòu)、格式和表現(xiàn)方式。1.1.1HTML中的標(biāo)簽和屬性在HTML中，使用標(biāo)簽“<>”符號(hào)對(duì)關(guān)鍵詞（即標(biāo)簽名）的進(jìn)行標(biāo)識(shí)，每個(gè)標(biāo)簽都代表著特定的功能或信息展示方式。標(biāo)簽通常成對(duì)出現(xiàn)，包括一個(gè)開(kāi)始標(biāo)簽和一個(gè)結(jié)束標(biāo)簽，結(jié)束標(biāo)簽通過(guò)在標(biāo)簽名前加上斜線（/）來(lái)標(biāo)識(shí)。有些標(biāo)簽是自閉合的，自閉合標(biāo)簽不需要結(jié)束標(biāo)簽，而是使用斜線（/）結(jié)尾。示例代碼如下：1.標(biāo)簽<p>HelloHTML!</p><br/>1.1.1HTML中的標(biāo)簽和屬性屬性用在開(kāi)始標(biāo)簽中，用于定義標(biāo)簽的一些特征。每個(gè)屬性都有名稱和值，名稱和值之間用等號(hào)（=）連接，值用一對(duì)單引號(hào)（''）或雙引號(hào)（""）包裹。屬性的示例代碼如下：2.屬性<ahref="./html">html</a>1.1.1HTML中的標(biāo)簽和屬性標(biāo)簽在HTML中主要用于定義文檔的結(jié)構(gòu)和指示瀏覽器如何呈現(xiàn)內(nèi)容，所以大部分標(biāo)簽會(huì)結(jié)合需要呈現(xiàn)的內(nèi)容一起使用。非自閉合的標(biāo)簽通常將內(nèi)容書(shū)寫(xiě)在開(kāi)始標(biāo)簽和結(jié)束標(biāo)簽之間，在HTML中，非閉合標(biāo)簽的開(kāi)始標(biāo)簽、內(nèi)容、結(jié)束標(biāo)簽這個(gè)整體稱為一個(gè)元素，而自閉合標(biāo)簽自身就是一個(gè)完整的元素。1.1.2HTML文檔的基本格式先定一個(gè)小目標(biāo)！
先定一個(gè)小目標(biāo)！熟悉HTML文檔的基本格式，能夠簡(jiǎn)述HTML文檔基本格式中主要包含的標(biāo)簽1.1.2HTML文檔的基本格式編寫(xiě)一個(gè)完整HTML文檔需要遵循一定的格式。HTML文檔基本格式主要包含<!DOCTYPE>（文檔類(lèi)型聲明）、<html>（根標(biāo)簽）、<head>（頭部標(biāo)簽）注釋內(nèi)容和<body>（主體標(biāo)簽）等。下面通過(guò)一個(gè)HTML文檔說(shuō)明HTML文檔的基本格式，具體如下。<!DOCTYPEhtml><htmllang="en"> <head><metacharset="UTF-8"><title>我的第一個(gè)網(wǎng)頁(yè)</title></head><!--body標(biāo)簽里是網(wǎng)頁(yè)的主要內(nèi)容--><body>HelloHTML!</body></html>1.1.2HTML文檔的基本格式0102030405<!DOCTYPE>位于文檔的最前面，也被稱為文檔類(lèi)型聲明，用于向?yàn)g覽器說(shuō)明當(dāng)前文檔使用哪種HTML標(biāo)準(zhǔn)規(guī)范。<html>位于<!DOCTYPE>之后，也被稱為根標(biāo)簽。根標(biāo)簽標(biāo)示了HTML文檔的開(kāi)始和結(jié)束<head>用于定義HTML文檔的頭部?jī)?nèi)容，也被稱為頭部標(biāo)簽，該標(biāo)簽緊跟在<html>之后。注釋內(nèi)容不會(huì)被瀏覽器解釋或執(zhí)行。HTML文檔中的注釋內(nèi)容需要書(shū)寫(xiě)在<!---->標(biāo)簽中<body>用于定義HTML文檔所要顯示的內(nèi)容，也被稱為主體標(biāo)簽。<!DOCTYPE><html><head>注釋內(nèi)容HTML文檔的結(jié)構(gòu)<body>1.1.2HTML文檔的基本格式HTML文檔可以通過(guò)文本編輯器來(lái)打開(kāi)或者創(chuàng)建，下面選擇在記事本中編寫(xiě)代碼并保存，并將文件的擴(kuò)展名修改為.html。編寫(xiě)好的HTML文檔可以使用瀏覽器進(jìn)行展示，使用瀏覽器打開(kāi)該HTML文檔。HTML常見(jiàn)標(biāo)簽1.21.2
HTML常見(jiàn)標(biāo)簽在使用HTML編寫(xiě)網(wǎng)頁(yè)時(shí)，經(jīng)常需要構(gòu)建各種不同類(lèi)型的網(wǎng)頁(yè)內(nèi)容，以呈現(xiàn)豐富多彩的網(wǎng)頁(yè)效果。這些網(wǎng)頁(yè)內(nèi)容的構(gòu)建離不開(kāi)HTML中的各種標(biāo)簽，如頁(yè)面格式化標(biāo)簽、表格標(biāo)簽、多媒體標(biāo)簽等。下面對(duì)HTML的常見(jiàn)標(biāo)簽進(jìn)行講解。1.2.1
頁(yè)面格式化標(biāo)簽先定一個(gè)小目標(biāo)！
先定一個(gè)小目標(biāo)！掌握頁(yè)面格式化標(biāo)簽的使用，能夠在HTML文檔中正確標(biāo)題標(biāo)簽、段落標(biāo)簽、換行標(biāo)簽、列表標(biāo)簽、<div>標(biāo)簽進(jìn)行頁(yè)面格式化1.2.1
頁(yè)面格式化標(biāo)簽標(biāo)題標(biāo)簽一般用于在頁(yè)面上定義一些標(biāo)題性的內(nèi)容，如新聞標(biāo)題，文章標(biāo)題等。HTML中提供了從<h1>到<h6>6個(gè)級(jí)別的標(biāo)題標(biāo)簽，<h1>標(biāo)簽的級(jí)別最高，<h6>標(biāo)簽的級(jí)別最低。示例代碼如下：1.標(biāo)題標(biāo)簽<h1>一級(jí)標(biāo)題</h1><h2>二級(jí)標(biāo)題</h2>1.2.1
頁(yè)面格式化標(biāo)簽在HTML中<p>標(biāo)簽為段落標(biāo)簽，用于定義段落，在網(wǎng)頁(yè)中，使用多個(gè)段落標(biāo)簽可以把文字內(nèi)容分為若干個(gè)段落。示例代碼如下：2.段落標(biāo)簽<p>我國(guó)積極推動(dòng)綠色能源利用和生態(tài)保護(hù)工作，為建設(shè)美麗中國(guó)貢獻(xiàn)力量。</p>1.2.1
頁(yè)面格式化標(biāo)簽在HTML中，一個(gè)段落中的文字會(huì)從左到右依次排列，直到瀏覽器窗口的右端，然后自動(dòng)換行。如果希望將指定文本內(nèi)容在瀏覽器中換行顯示，將文本內(nèi)容中直接使用“Enter”鍵換行是不會(huì)起作用的，可以使用換行標(biāo)簽<br>實(shí)現(xiàn)換行。需要說(shuō)明的是，HTML5中允許<br>不進(jìn)行自閉合，即支持<br>和<br/>兩種寫(xiě)法，示例代碼如下：3.換行標(biāo)簽<p>這是第一行文字。<br>這是第二行文字。</p>1.2.1
頁(yè)面格式化標(biāo)簽下面通過(guò)一個(gè)案例演示標(biāo)題標(biāo)簽、段落標(biāo)簽和換行標(biāo)簽的使用。1.2.1
頁(yè)面格式化標(biāo)簽列表標(biāo)簽用于在頁(yè)面中創(chuàng)建列表，讓若干條相關(guān)的內(nèi)容看起來(lái)更加有條理，主要包括有序列表標(biāo)簽<ol>和無(wú)序列表標(biāo)簽<ul>。有序列表和無(wú)序列表中的列表項(xiàng)標(biāo)簽都是<li>，創(chuàng)建后有序列表標(biāo)簽中的列表項(xiàng)帶有順序特征；無(wú)序列表標(biāo)簽中的列表項(xiàng)不帶有順序特征。4.列表標(biāo)簽1.2.1
頁(yè)面格式化標(biāo)簽列表和列表之間還可以嵌套，實(shí)現(xiàn)某一項(xiàng)內(nèi)容的詳細(xì)展示。下面通過(guò)一個(gè)案例演示這兩種標(biāo)簽的使用。1.2.1
頁(yè)面格式化標(biāo)簽<div>標(biāo)簽是一個(gè)塊級(jí)元素，其中，div是division的縮寫(xiě)，意為分區(qū)或區(qū)塊。<div>標(biāo)簽本身不帶有任何特定的語(yǔ)義或樣式，它的主要作用是作為其他HTML元素的容器，并通過(guò)CSS進(jìn)行樣式化。由于<div>標(biāo)簽是塊級(jí)元素，它會(huì)獨(dú)占一行，并可以設(shè)置寬度、高度、內(nèi)外邊距等樣式屬性。這使得<div>標(biāo)簽非常適合用于頁(yè)面的布局和分區(qū)，如頁(yè)眉、頁(yè)腳、導(dǎo)航欄、文章區(qū)塊等。5.<div>標(biāo)簽1.2.2
文本樣式標(biāo)簽先定一個(gè)小目標(biāo)！
先定一個(gè)小目標(biāo)！掌握文本樣式標(biāo)簽的使用，能夠在HTML文檔中通過(guò)文本樣式標(biāo)簽設(shè)置文本的顏色、大小和字體等屬性1.2.2
文本樣式標(biāo)簽文本樣式標(biāo)簽在HTML頁(yè)面中用于控制文本的外觀和樣式，可以通過(guò)這些標(biāo)簽設(shè)置文本的顏色、字號(hào)和字體等屬性。常用的文本樣式標(biāo)簽如下。①<b>：加粗文本。②<i>：傾斜文本。③<u>：給文本添加下劃線。④<span>：用于封裝行內(nèi)元素，可以配合CSS樣式來(lái)設(shè)置文本樣式。例如，<spanstyle="color:red;">紅色文本</span>。⑤<sub>：用于設(shè)置下標(biāo)文本。⑥<sup>：用于設(shè)置上標(biāo)文本。1.2.2
文本樣式標(biāo)簽下面通過(guò)一個(gè)案例演示常用文本樣式標(biāo)簽的使用。1.2.3
表格標(biāo)簽先定一個(gè)小目標(biāo)！
先定一個(gè)小目標(biāo)！掌握表格標(biāo)簽的使用，能夠在HTML文檔中通過(guò)表格標(biāo)簽創(chuàng)建表格1.2.3
表格標(biāo)簽在HTML中的表格標(biāo)簽用于創(chuàng)建表格，表格標(biāo)簽提供了一種結(jié)構(gòu)化的方式來(lái)展示數(shù)據(jù)。常見(jiàn)的表格標(biāo)簽如下所示。①<table>：用于定義表格的開(kāi)始和結(jié)束。②<thead>：用于定義表格的表頭。③<tbody>：用于定義表格的主體部分。④<tfoot>：用于定義表格的表尾。⑤<tr>：用于定義表格中的行。⑥<td>：用于定義表格中的數(shù)據(jù)單元格，必須嵌套在<tr></tr>標(biāo)簽中。⑦<th>：用于定義表格中的表頭單元格，通常用于表格的第一行或第一列。⑧<caption>：用于定義表格的標(biāo)題。1.2.3
表格標(biāo)簽當(dāng)表格中的單元格需要跨多行或多列時(shí)，可以使用如下兩個(gè)屬性指定需要跨越的行數(shù)和列數(shù)。①rowspan屬性：用于指定單元格要跨越的行數(shù)。②colspan屬性：用于指定單元格要跨越的列數(shù)。1.2.3
表格標(biāo)簽下面通過(guò)一個(gè)案例演示表格標(biāo)簽的使用。1.2.4
表單標(biāo)簽先定一個(gè)小目標(biāo)！
先定一個(gè)小目標(biāo)！掌握表單標(biāo)簽的使用，能夠在HTML文檔中通過(guò)表單標(biāo)簽創(chuàng)建表單1.2.4
表單標(biāo)簽表單標(biāo)簽用于在HTML頁(yè)面中創(chuàng)建交互式的用戶輸入表單，也就是說(shuō)，用戶可以在表單中輸入信息，并向網(wǎng)站提交數(shù)據(jù)，從而將這些信息傳遞給后臺(tái)進(jìn)行處理。例如，注冊(cè)頁(yè)面中的用戶名和密碼輸入，提交按鈕等都是用表單中的相關(guān)標(biāo)簽定義的。HTML中使用<form>標(biāo)簽創(chuàng)建表單，<form>標(biāo)簽的基本語(yǔ)法格式如下。①action屬性：用于指定當(dāng)表單提交時(shí)，表單中的數(shù)據(jù)提交的目標(biāo)地址。②method屬性：用于指定提交表單時(shí)的HTTP請(qǐng)求方法，如GET、POST等。③name屬性：用于指定表單的名稱。<formaction="URL"method="提交方式"name="表單名稱">表單控件</form>1.2.4
表單標(biāo)簽表單表單提供了多種類(lèi)型的控件，以滿足不同的用戶輸入需求。<inputtype="type_of_input"name="name_of_input"value="initial_value"/><input>標(biāo)簽是HTML中用于創(chuàng)建輸入控件，它非常靈活，可以根據(jù)type屬性的不同值來(lái)創(chuàng)建不同類(lèi)型的輸入字段。<input>標(biāo)簽的基本語(yǔ)法格式如下。①type屬性：用于指定輸入字段的類(lèi)型。常見(jiàn)的表單項(xiàng)類(lèi)型有text、password、checkbox、radio、file、button、reset、submit等，分別表示單行文本輸入框、密碼輸入框、復(fù)選框、單選按鈕、文件選擇、普通按鈕、重置按鈕、提交按鈕。②name屬性：用于指定提交的參數(shù)名。③value屬性：用于設(shè)置輸入框的初始值。1.<input>標(biāo)簽1.2.4
表單標(biāo)簽<selectname="space"id="cn"><optionvalue="1">東方紅一號(hào)</option><optionvalue="2">神舟十二號(hào)</option><optionvalue="3">嫦娥六號(hào)</option></select><select>標(biāo)簽用于創(chuàng)建下拉列表，<select>
元素內(nèi)通常包含一系列的
<option>
標(biāo)簽，每個(gè)
<option>
標(biāo)簽都代表了一個(gè)可選項(xiàng)。用戶可以通過(guò)單擊下拉箭頭來(lái)查看所有和選擇指定的選項(xiàng)。<select>標(biāo)簽的使用示例如下。2.<select>標(biāo)簽 1.2.4
表單標(biāo)簽<textarea>標(biāo)簽用于創(chuàng)建多行文本輸入框，通過(guò)屬性rows和cols分別指定文本的行數(shù)和列數(shù)，即可以顯示多少行文本，每行可以顯示多少個(gè)字符。3.<textarea>標(biāo)簽<button> 標(biāo)簽用于創(chuàng)建按鈕。4.<button>標(biāo)簽1.2.4
表單標(biāo)簽下面通過(guò)案例演示表單標(biāo)簽和表單控件對(duì)應(yīng)的標(biāo)簽的使用，在html文件中定義一個(gè)用戶注冊(cè)表單，在表單中添加用于輸入用戶名、密碼、性別、興趣愛(ài)好、頭像、個(gè)人簡(jiǎn)介的相關(guān)控件。1.2.5超鏈接標(biāo)簽先定一個(gè)小目標(biāo)！
先定一個(gè)小目標(biāo)！掌握超鏈接標(biāo)簽的使用，能夠在HTML文檔中定義超鏈接標(biāo)簽1.2.5超鏈接標(biāo)簽一個(gè)網(wǎng)站通常由多個(gè)頁(yè)面構(gòu)成，當(dāng)我們需要從一個(gè)網(wǎng)頁(yè)跳轉(zhuǎn)到另一個(gè)網(wǎng)頁(yè)時(shí)，可以通過(guò)單擊指向?qū)?yīng)網(wǎng)頁(yè)的超鏈接實(shí)現(xiàn)，在HTML中超鏈接使用<a>標(biāo)簽創(chuàng)建，<a>標(biāo)簽的基本語(yǔ)法格式如下。①href屬性：用于指定鏈接的目標(biāo)地址。②target屬性：用于指定鏈接目標(biāo)頁(yè)面的打開(kāi)方式，常用的屬性取值如下。_blank：用于指定在新窗口或標(biāo)簽頁(yè)中打開(kāi)鏈接。_self：target屬性的默認(rèn)值，用于指定在當(dāng)前窗口或標(biāo)簽頁(yè)中打開(kāi)鏈接。_parent：用于指定在父框架集中打開(kāi)鏈接。_top：用于指定在頂級(jí)的窗口中打開(kāi)鏈接，忽略任何框架。<ahref="鏈接的目標(biāo)地址"target="目標(biāo)頁(yè)面的打開(kāi)方式">單擊這里跳轉(zhuǎn)到目標(biāo)頁(yè)面</a>1.2.5超鏈接標(biāo)簽通過(guò)一個(gè)案例演示超鏈接標(biāo)簽的使用。1.2.6
多媒體標(biāo)簽先定一個(gè)小目標(biāo)！
先定一個(gè)小目標(biāo)！掌握多媒體標(biāo)簽的使用，能夠在HTML文檔中通過(guò)多媒體標(biāo)簽引入圖片和視頻1.2.6
多媒體標(biāo)簽<imgsrc="img/logo.png"title="黑馬程序員"alt="黑馬logo"/><img>標(biāo)簽是圖片標(biāo)簽，用于在頁(yè)面上引入圖片。<img>標(biāo)簽的使用示例如下。①src屬性：用于指定圖片的URL（UniformResourceLocator，統(tǒng)一資源定位符）。②title屬性：用于指定鼠標(biāo)指針懸停時(shí)顯示的文字。③alt屬性：用于指定圖片加載失敗時(shí)顯示的提示文字。1.<img>標(biāo)簽1.2.6
多媒體標(biāo)簽<videosrc="video/video.mp4"autoplaymutedcontrolsloop/><video>標(biāo)簽是視頻標(biāo)簽，用于在頁(yè)面中引入一段視頻，使用示例如下。①src屬性：用于指定視頻的URL地址。②autoplay屬性：用于指定視頻在頁(yè)面加載后自動(dòng)播放。③muted：用于指定視頻默認(rèn)以靜音方式播放。當(dāng)前大部分主流瀏覽器的自動(dòng)播放策略中，要求視頻必須靜音才能自動(dòng)播放，否則視頻將不會(huì)播放。④controls屬性：用于指定展示控制面板。⑤loop屬性：用于指定視頻進(jìn)行循環(huán)播放。2.<video>標(biāo)簽1.2.6
多媒體標(biāo)簽下面通過(guò)一個(gè)案例演示以上兩種多媒體標(biāo)簽的使用。CSS1.31.3CSS在前面的學(xué)習(xí)中可以了解到，HTML能夠定義頁(yè)面的結(jié)構(gòu)和內(nèi)容。隨著社會(huì)的快速發(fā)展，人們對(duì)網(wǎng)頁(yè)的需求不再是單純地展示文字、表單等元素，而是視覺(jué)更為震撼、設(shè)計(jì)更為卓越的體驗(yàn)。為了達(dá)成這一目標(biāo)，CSS（CascadingStyleSheets，層疊樣式表）成為不可或缺的工具之一。通過(guò)CSS，開(kāi)發(fā)人員能夠精細(xì)控制網(wǎng)頁(yè)的外觀、布局，創(chuàng)造豐富多彩的動(dòng)畫(huà)效果，進(jìn)而打造出既精美又極具吸引力的網(wǎng)頁(yè)界面，滿足用戶日益增長(zhǎng)的視覺(jué)需求。下面將對(duì)CSS進(jìn)行詳細(xì)講解。1.3.1
CSS概述先定一個(gè)小目標(biāo)！
先定一個(gè)小目標(biāo)！了解CSS，能夠簡(jiǎn)述CSS的作用和定義CSS樣式的基本格式1.3.1
CSS概述CSS是用來(lái)描述網(wǎng)頁(yè)上元素如何呈現(xiàn)的一種樣式描述語(yǔ)言，它能夠?qū)W(wǎng)頁(yè)中元素位置的排版進(jìn)行像素級(jí)的精確控制，還能夠設(shè)置字體、顏色、大小、間距、背景、邊框等網(wǎng)頁(yè)屬性，同時(shí)還能實(shí)現(xiàn)網(wǎng)頁(yè)樣式的統(tǒng)一性和一致性，提供更精美的頁(yè)面效果和更好的用戶體驗(yàn)。CSS由一系列規(guī)則構(gòu)成，通過(guò)CSS定義的、用于描述網(wǎng)頁(yè)元素外觀和布局的具體樣式規(guī)則通常也稱為CSS樣式。CSS樣式被Web瀏覽器解析后，能夠精準(zhǔn)地應(yīng)用于HTML文檔中的各個(gè)元素。每個(gè)CSS樣式通常由選擇器、屬性和值三部分組成，這三者共同協(xié)作，定義了網(wǎng)頁(yè)的視覺(jué)效果。1.3.1
CSS概述選擇器是CSS樣式中規(guī)則的起點(diǎn)，選擇器通過(guò)識(shí)別HTML元素的ID、類(lèi)名、元素標(biāo)簽名等信息，精確指定了樣式所應(yīng)用的HTML元素。例如，選擇器p表示作用于頁(yè)面中所有的<p>段落標(biāo)簽，為它們統(tǒng)一設(shè)置樣式。1.選擇器1.3.1
CSS概述屬性用于指定希望為HTML元素賦予的樣式特征，它們由一系列標(biāo)準(zhǔn)化的關(guān)鍵詞構(gòu)成，涵蓋了顏色、邊框、字體等樣式特征。CSS提供了豐富的屬性選項(xiàng)，以滿足各種設(shè)計(jì)需求。2.屬性1.3.1
CSS概述值與屬性緊密相關(guān)，值是對(duì)屬性效果的進(jìn)一步細(xì)化和量化，通常由數(shù)值、單位或特定的關(guān)鍵字組成。例如color屬性的值可以是顏色名red，也可以是十六進(jìn)制顏色代碼#F1F1F1，從而精確控制元素的色彩展示。3.值1.3.1
CSS概述選擇器{屬性1:值1;屬性2:值2;屬性3:值3;……}開(kāi)發(fā)人員可以按照如下語(yǔ)法格式來(lái)定義CSS樣式。屬性和值之間通過(guò)冒號(hào)（:）進(jìn)行分隔，每個(gè)由屬性和值構(gòu)成的組合，稱之為一個(gè)聲明，為了確保CSS代碼的清晰與完整，每個(gè)聲明的末尾都必須加上分號(hào)（;）。屬于同一選擇器的所有聲明需要被組織在一起，并通過(guò)大括號(hào)（{}）進(jìn)行標(biāo)識(shí)。1.3.2
CSS樣式的引入方式先定一個(gè)小目標(biāo)！
先定一個(gè)小目標(biāo)！掌握CSS引入方式，能夠使用內(nèi)聯(lián)樣式、內(nèi)部樣式表、外部樣式表引入CSS樣式1.3.2
CSS樣式的引入方式內(nèi)聯(lián)樣式，也稱為行內(nèi)式，用于將樣式直接定義在開(kāi)始標(biāo)簽的style屬性中，由于內(nèi)聯(lián)樣式定義在標(biāo)簽內(nèi)部，所以它只對(duì)所在的標(biāo)簽有效。通過(guò)內(nèi)聯(lián)樣式引入CSS樣式的示例如下1.內(nèi)聯(lián)樣式<標(biāo)簽style="屬性1:值1;屬性2:值2;……屬性n：值n">內(nèi)容</標(biāo)簽><inputtype="button"value="內(nèi)聯(lián)樣式"style="width:100px;height:50px;background-color:yellow;font-size:22px;border-radius:5px;margin-left:170px;"/>1.3.2
CSS樣式的引入方式內(nèi)部樣式表，也稱為內(nèi)嵌式樣式表，它允許開(kāi)發(fā)人員直接在HTML文檔的<head>部分通過(guò)<style>標(biāo)簽定義CSS樣式。這種樣式定義方式使得樣式信息與HTML內(nèi)容緊密相關(guān)聯(lián)，而無(wú)須外部CSS文件的加載。定義語(yǔ)法格式如下。2.內(nèi)部樣式表<head><style>選擇器{屬性1:值1;屬性2:值2;屬性3:值3;……}</style></head>1.3.2
CSS樣式的引入方式外部樣式表是將CSS樣式定義好后保存在一個(gè)獨(dú)立的.css文件中，然后在HTML文檔中通過(guò)<link>標(biāo)簽或@import指令引入。3.外部樣式表1<head>2<linkhref="css/style.css"rel="stylesheet"type="text/css"/>3</head>4<head>5 <styletype="text/css">6 @importurl("css/styles.css");7 </style>8</head>1.3.2
CSS樣式的引入方式通過(guò)<link>標(biāo)簽引入樣式時(shí)涉及href、rel和type三個(gè)屬性，這三個(gè)屬性的說(shuō)明如下。①href屬性：用于指定被鏈接的CSS樣式表文件的URL。②rel屬性：用于定義當(dāng)前文檔與被鏈接文檔之間的關(guān)系。在引入外部樣式表時(shí)，一般會(huì)將rel屬性值設(shè)為stylesheet，表示被鏈接的文檔是一個(gè)樣式表文件。③type屬性：用于告訴瀏覽器被鏈接的文檔內(nèi)容類(lèi)型。在<link>標(biāo)簽中，type屬性常用于指定被鏈接的文檔為CSS樣式表。通過(guò)@import指令引入時(shí)，url()函數(shù)用于指定要導(dǎo)入的CSS文件的路徑。1.3.2
CSS樣式的引入方式下面通過(guò)一個(gè)案例演示如何使用外部樣式表中通過(guò)<link>標(biāo)簽引入CSS樣式。1.3.3
CSS選擇器先定一個(gè)小目標(biāo)！
先定一個(gè)小目標(biāo)！掌握CSS選擇器，能夠使用元素選擇器、ID選擇器、class選擇器和通用選擇器選擇特定元素并應(yīng)用CSS樣式1.3.3
CSS選擇器CSS選擇器使得開(kāi)發(fā)人員能夠精確地指定HTML文檔中的特定元素，以便為這些元素應(yīng)用樣式規(guī)則。CSS選擇器種類(lèi)繁多，每種都有其獨(dú)特的用途和優(yōu)勢(shì)，常見(jiàn)的CSS選擇器有元素選擇器、ID選擇器、class選擇器、通用選擇器等。1.3.3
CSS選擇器元素名稱{屬性1:值1;屬性2:值2;……}元素選擇器在CSS中通常也被稱為標(biāo)簽選擇器，它基于HTML文檔的標(biāo)簽名稱來(lái)選擇元素。元素選擇器常用于為頁(yè)面中某一類(lèi)元素指定統(tǒng)一的樣式，用元素選擇器定義的樣式對(duì)頁(yè)面中該類(lèi)型的元素都有效。使用元素選擇器定義CSS樣式的基本語(yǔ)法格式如下。1.元素選擇器1.3.3
CSS選擇器#id值{屬性1:值1;屬性2:值2;……}ID選擇器是指根據(jù)HTML元素的id屬性的值確定樣式的作用范圍。使用ID選擇器定義CSS樣式的基本語(yǔ)法格式如下所示。2.ID選擇器1.3.3
CSS選擇器.class值{屬性1:值1;屬性2:值2;……}class選擇器是指根據(jù)HTML元素的class屬性的值確定樣式的作用范圍。使用class選擇器定義CSS樣式的基本語(yǔ)法格式如下所示。3.class選擇器1.3.3
CSS選擇器*{屬性1:值1;屬性2:值2;……}通用選擇器是指用來(lái)選擇文檔中所有元素的選擇器。通用選擇器使用星號(hào)*表示，它會(huì)匹配文檔中的所有元素，從而將樣式應(yīng)用到所有元素上。通用選擇器的基本語(yǔ)法格式如下。4.通用選擇器1.3.3
CSS選擇器下面通過(guò)一個(gè)案例演示常用的CSS選擇器的使用，在該HTML文件中定義一個(gè)表單，在表單中定義多個(gè)控件，并使用內(nèi)部樣式表的方式定義四種常用的CSS選擇器，在選擇器中為表單的控件定義樣式。1.3.4
CSS常用屬性先定一個(gè)小目標(biāo)！
先定一個(gè)小目標(biāo)！熟悉CSS常用屬性，能夠使用常用的CSS屬性對(duì)元素進(jìn)行樣式設(shè)置1.3.4
CSS常用屬性在使用CSS控制網(wǎng)頁(yè)元素外觀和布局時(shí)，經(jīng)常需要用到各種樣式屬性，熟悉常用的屬性及其作用對(duì)設(shè)計(jì)良好的網(wǎng)頁(yè)具有很大的幫助。屬性描述color用于指定文本顏色，可以使用顏色名、十六進(jìn)制顏色值（如#FF0000）、RGB顏色值（如rgb(255,0,0)）或RGBA顏色值（增加了透明度，如rgba(255,0,0,0.5)）指定font-size用于指定文本字體的大小，常用單位有像素（px）font-family用于指定文本的字體，可以使用字體名稱或字體列表指定text-align用于指定文本的對(duì)齊方式，常見(jiàn)的屬性值有l(wèi)eft（靠左對(duì)齊）、center（居中對(duì)齊）、right（靠右對(duì)齊）、justify（兩端對(duì)齊）等background-color用于指定元素的背景顏色，常見(jiàn)屬性值寫(xiě)法同color1.3.4
CSS常用屬性屬性描述borderborder是一個(gè)簡(jiǎn)寫(xiě)屬性，用于同時(shí)設(shè)置元素的邊框?qū)挾?、邊框樣式和邊框顏色，即指定border-width、border-style、border-color三個(gè)屬性的值padding用于指定元素內(nèi)容與邊框之間的間距?？梢允褂脝蝹€(gè)值表示上下左右相同間距，也可以使用四個(gè)值表示上下左右的不同間距margin用于指定元素與其他元素之間的間距，常見(jiàn)的屬性值寫(xiě)法同paddingdisplay用于指定元素的顯示方式，常見(jiàn)的屬性值有block（元素顯示塊級(jí)元素，獨(dú)占一行）、inline（元素顯示行內(nèi)元素，與其他元素在一行內(nèi)）height用于指定元素的高度width用于指定元素的寬度JavaScript1.41.4
JavaScriptHTML賦予了開(kāi)發(fā)人員定義網(wǎng)頁(yè)結(jié)構(gòu)與元素的能力，CSS則進(jìn)一步美化了這些元素的外觀與布局。然而，當(dāng)面對(duì)用戶日益增長(zhǎng)的對(duì)高度交互性及動(dòng)態(tài)內(nèi)容展示的需求時(shí)，單純的HTML與CSS組合顯得力不從心。這時(shí)，可以引入JavaScript，JavaScript能夠無(wú)縫嵌入HTML文檔中，通過(guò)其強(qiáng)大的功能動(dòng)態(tài)地修改HTML元素，從而實(shí)現(xiàn)豐富的頁(yè)面交互效果。本節(jié)將圍繞JavaScript的相關(guān)知識(shí)進(jìn)行講解。1.4.1JavaScript概述先定一個(gè)小目標(biāo)！
先定一個(gè)小目標(biāo)！了解JavaScript，能夠簡(jiǎn)述JavaScript的特點(diǎn)、主要組成部分1.4.1JavaScript概述JavaScript是Web開(kāi)發(fā)中的一種腳本語(yǔ)言，它可以在瀏覽器中直接執(zhí)行，從而賦予網(wǎng)頁(yè)強(qiáng)大的交互能力和動(dòng)態(tài)數(shù)據(jù)處理功能。JavaScript的特性如下。①基于對(duì)象：JavaScript是一種基于對(duì)象的腳本語(yǔ)言，它不僅可以創(chuàng)建對(duì)象，也能使用現(xiàn)有的對(duì)象。②弱類(lèi)型：JavaScript中也有明確的數(shù)據(jù)類(lèi)型，但是聲明一個(gè)變量后，它可以接收任何類(lèi)型的數(shù)據(jù)，并在程序執(zhí)行過(guò)程中根據(jù)上下文自動(dòng)轉(zhuǎn)換類(lèi)型。③事件驅(qū)動(dòng)：JavaScript是一種采用事件驅(qū)動(dòng)的腳本語(yǔ)言，它不需要經(jīng)過(guò)Web服務(wù)器就可以對(duì)用戶的輸入做出響應(yīng)。④跨平臺(tái)性：JavaScript的運(yùn)行能夠獨(dú)立于操作系統(tǒng)，具有良好的跨平臺(tái)特性。1.4.1JavaScript概述ECMAScript是由ECMA國(guó)際標(biāo)準(zhǔn)化組織制定的一項(xiàng)標(biāo)準(zhǔn)，是JavaScript的核心。ECMAScript定義了JavaScript語(yǔ)言的基礎(chǔ)語(yǔ)法、類(lèi)型、語(yǔ)句、關(guān)鍵字、運(yùn)算符、對(duì)象等核心要素。1.ECMAScriptDOM是DocumentObjectModel（文檔對(duì)象模型）的縮寫(xiě)，它以一種結(jié)構(gòu)化的形式（即節(jié)點(diǎn)樹(shù)）表示HTML或XML文檔，并允許程序和腳本動(dòng)態(tài)地訪問(wèn)和更新文檔的內(nèi)容、結(jié)構(gòu)和樣式2.DOMBOM是BrowserObjectModel（瀏覽器對(duì)象模型）的縮寫(xiě)。BOM提供了與瀏覽器交互的接口，允許JavaScript操作瀏覽器窗口、歷史記錄、定時(shí)器等BOM組件。3.BOMJavaScript主要組成部分1.4.2
JavaScript的引入方式先定一個(gè)小目標(biāo)！
先定一個(gè)小目標(biāo)！掌握J(rèn)avaScript的引入，能夠使用行內(nèi)式、內(nèi)嵌式和外鏈?zhǔn)揭隞avaScript。1.4.2
JavaScript的引入方式<標(biāo)簽屬性名稱="要執(zhí)行的JavaScript代碼">行內(nèi)式引入是指將JavaScript代碼直接寫(xiě)在HTML標(biāo)簽的事件屬性中，具體語(yǔ)法格式如下。1.行內(nèi)式1.4.2
JavaScript的引入方式內(nèi)嵌式是指在HTML文檔中使用<script>標(biāo)簽引入JavaScript代碼的一種方式，<script>標(biāo)簽內(nèi)可以編寫(xiě)任何JavaScript代碼，包括定義函數(shù)、事件處理等。通常<script>標(biāo)簽放在HTML文檔的<head>標(biāo)簽中或<body>標(biāo)簽的底部。2.內(nèi)嵌式1.4.2
JavaScript的引入方式外鏈?zhǔn)绞侵笇avaScript代碼放在獨(dú)立的JavaScript文件中，通過(guò)<script>標(biāo)簽的src屬性引入外部的JavaScript文件。3.外鏈?zhǔn)?.4.3JavaScript基礎(chǔ)語(yǔ)法任何一種編程語(yǔ)言都有一套明確的語(yǔ)法規(guī)則，JavaScript作為一種客戶端腳本語(yǔ)言，也有它自己的語(yǔ)法規(guī)則，包括數(shù)據(jù)類(lèi)型、變量、運(yùn)算符、流程控制、函數(shù)等內(nèi)容。下面對(duì)JavaScript的基礎(chǔ)語(yǔ)法進(jìn)行講解。1.4.3JavaScript基礎(chǔ)語(yǔ)法數(shù)據(jù)類(lèi)型是編程語(yǔ)言中用于定義和區(qū)分程序中可存儲(chǔ)及操作值的種類(lèi)，JavaScript中定義了一套獨(dú)特的數(shù)據(jù)類(lèi)型集合，這些類(lèi)型覆蓋了文本、數(shù)值等多種類(lèi)型。每種數(shù)據(jù)類(lèi)型都設(shè)計(jì)用于高效且準(zhǔn)確地存儲(chǔ)和處理特定類(lèi)型的數(shù)據(jù)，從而支持程序的有效運(yùn)行和數(shù)據(jù)的準(zhǔn)確表達(dá)。1.數(shù)據(jù)類(lèi)型1.4.3JavaScript基礎(chǔ)語(yǔ)法類(lèi)型數(shù)據(jù)類(lèi)型描述基本數(shù)據(jù)類(lèi)型Number數(shù)字類(lèi)型，可以是整數(shù)或浮點(diǎn)數(shù)。例如：3，3.14String字符串類(lèi)型，表示文本字符串，需要使用一對(duì)單引號(hào)('')或雙引號(hào)("")對(duì)內(nèi)容進(jìn)行標(biāo)識(shí)。例如："Hello，World！"Boolean布爾類(lèi)型，表示邏輯值，只有兩個(gè)取值：true和falseNull表示空值或空對(duì)象Undefined表示聲明了但沒(méi)有被賦值，當(dāng)一個(gè)變量被聲明了但沒(méi)有被賦值時(shí)，它的默認(rèn)值是undefined。引用數(shù)據(jù)類(lèi)型Object表示復(fù)雜的數(shù)據(jù)結(jié)構(gòu)，可以容納多個(gè)屬性和方法1.4.3JavaScript基礎(chǔ)語(yǔ)法JavaScript是一種弱類(lèi)型的語(yǔ)言，它在創(chuàng)建變量時(shí)無(wú)須指定變量的類(lèi)型，不需要提前指定變量的類(lèi)型，變量的類(lèi)型是在程序運(yùn)行過(guò)程中由JavaScript引擎動(dòng)態(tài)決定。此外，同一個(gè)變量可以存儲(chǔ)不同類(lèi)型的數(shù)據(jù)。2.變量1.4.3JavaScript基礎(chǔ)語(yǔ)法在JavaScript中，變量的標(biāo)識(shí)符嚴(yán)格區(qū)分大小寫(xiě)，可以使用關(guān)鍵字var、let定義變量，使用關(guān)鍵字const定義常量，具體說(shuō)明如下。(1)使用var定義變量使用var定義變量時(shí)，如果變量是在函數(shù)外部聲明，該變量將成為全局變量；如果變量是在函數(shù)內(nèi)部聲明，則該變量為局部變量。var聲明的變量可以被重新賦值，且變量使用var申明后，該變量聲明的位置會(huì)默認(rèn)提升到其作用域的頂部，但變量的賦值不會(huì)被提升，即變量可以在聲明之前使用，但其初始值為undefined。1.4.3JavaScript基礎(chǔ)語(yǔ)法(2)使用let定義變量let關(guān)鍵字允許開(kāi)發(fā)人員聲明一個(gè)僅限于在塊級(jí)作用域（如if語(yǔ)句、for循環(huán)或{}塊）內(nèi)可用的變量。與var不同，let聲明的變量不會(huì)被提升，并且同一個(gè)作用域內(nèi)不能重復(fù)聲明同一個(gè)變量。1.4.3JavaScript基礎(chǔ)語(yǔ)法(3)使用const定義常量盡管
const
聲明的是一個(gè)變量，其值在初始化后不能被重新賦值，通常稱之為常量。與let一樣，const也具有塊級(jí)作用域，并且不會(huì)被提升。1.4.3JavaScript基礎(chǔ)語(yǔ)法JavaScript中的運(yùn)算符是用來(lái)告訴JavaScript引擎執(zhí)行某種特定操作的符號(hào)，這些運(yùn)算符可以針對(duì)單個(gè)值、多個(gè)值進(jìn)行操作。JavaScript中的運(yùn)算符包括算術(shù)運(yùn)算符、關(guān)系運(yùn)算符、邏輯運(yùn)算符、賦值運(yùn)算符、條件運(yùn)算符等。3.運(yùn)算符1.4.3JavaScript基礎(chǔ)語(yǔ)法(1)算術(shù)運(yùn)算符算術(shù)運(yùn)算符用于對(duì)數(shù)值進(jìn)行基本的數(shù)學(xué)運(yùn)算，例如加、減、乘、除、取模等。運(yùn)算符含義舉例+加3+5//結(jié)果為8-減7–2//結(jié)果為5*乘4*6//結(jié)果為24/除10/4//結(jié)果為2.5%取模（取余）11%3//結(jié)果為2++自增vara=5;a++;//a最終的值為6--自減varb=8;b--;//b最終的值為71.4.3JavaScript基礎(chǔ)語(yǔ)法JavaScript的算術(shù)運(yùn)算符和Java中的算術(shù)運(yùn)算符的作用大部分都相同，但是JavaScript在處理除法和取模運(yùn)算時(shí)有如下區(qū)別。①當(dāng)使用除法運(yùn)算符（/）進(jìn)行除法操作時(shí)，在JavaScript中，無(wú)論操作數(shù)是整數(shù)還是浮點(diǎn)數(shù)，除法運(yùn)算符的結(jié)果都是浮點(diǎn)數(shù)。②除法運(yùn)算符“/”在除0時(shí)不會(huì)報(bào)錯(cuò)。在JavaScript中，任何非零數(shù)除以0會(huì)得到Infinity或-Infinity③當(dāng)使用取模運(yùn)算符‘%’進(jìn)行模0操作時(shí)不會(huì)報(bào)錯(cuò)。當(dāng)使用取模運(yùn)算符%且除數(shù)為0時(shí)，會(huì)返回NaN（NotaNumber），而不會(huì)報(bào)錯(cuò)。1.4.3JavaScript基礎(chǔ)語(yǔ)法(2)關(guān)系運(yùn)算符關(guān)系運(yùn)算符用于對(duì)數(shù)值進(jìn)行大小關(guān)系的比較，比較的結(jié)果是一個(gè)布爾類(lèi)型的值。運(yùn)算符含義舉例>大于20>10//結(jié)果為true<小于15<10//結(jié)果為false==等于10==10//結(jié)果為true>=大于等于10>=10//結(jié)果為true<=小于等于5<=10//結(jié)果為true===全等（值和類(lèi)型都相等才返回true）10==='10'//結(jié)果為false!=不相等10!=5//結(jié)果為true1.4.3JavaScript基礎(chǔ)語(yǔ)法(3)邏輯運(yùn)算符邏輯運(yùn)算符用于判斷運(yùn)算符兩側(cè)的表達(dá)式的真假，其結(jié)果仍為一個(gè)布爾類(lèi)型的值。運(yùn)算符含義舉例&&邏輯與（僅當(dāng)運(yùn)算符左右兩個(gè)條件都滿足時(shí)才返回true）12>5&&6<10//結(jié)果為true||邏輯或（只要運(yùn)算符左右任意一個(gè)條件滿足就返回true）12>5||12<10//結(jié)果為true!邏輯非（將條件取反）!(12>5)//結(jié)果為false!(12<5)//結(jié)果為true1.4.3JavaScript基礎(chǔ)語(yǔ)法(4)賦值運(yùn)算符賦值運(yùn)算符用于給變量賦值，可以將常量、變量或表達(dá)式賦值給變量。運(yùn)算符含義舉例=賦值運(yùn)算符x=10;+=先進(jìn)行加法運(yùn)算，再將結(jié)果賦值給運(yùn)算符左側(cè)的變量x+=10;等同于x=x+10;-=先進(jìn)行減法運(yùn)算，再將結(jié)果賦值給運(yùn)算符左側(cè)的變量x-=5;等同于x=x–5;*=先進(jìn)行乘法運(yùn)算，再將結(jié)果賦值給運(yùn)算符左側(cè)的變量x*=2;等同于x=x*2;/=先進(jìn)行除法運(yùn)算，再將結(jié)果賦值給運(yùn)算符左側(cè)的變量x/=5;等同于x=x/5;%=先進(jìn)行取模運(yùn)算，再將結(jié)果賦值給運(yùn)算符左側(cè)的變量x%=3;等同于x=x%3;1.4.3JavaScript基礎(chǔ)語(yǔ)法(5)條件運(yùn)算符條件運(yùn)算符也叫三元運(yùn)算符，用于根據(jù)條件是否滿足來(lái)決定返回兩個(gè)不同的值。條件運(yùn)算符的語(yǔ)法格式如下：條件?值1:值2上述語(yǔ)法格式中，若條件為真，則整個(gè)表達(dá)式返回值1，否則返回值2。1.4.3JavaScript基礎(chǔ)語(yǔ)法JavaScript中常用的流程控制語(yǔ)句分為條件語(yǔ)句和循環(huán)語(yǔ)句。條件語(yǔ)句包括if條件語(yǔ)句和switch條件語(yǔ)句，循環(huán)語(yǔ)句包括while循環(huán)語(yǔ)句、for循環(huán)語(yǔ)句和foreach循環(huán)語(yǔ)句。其中，除if條件語(yǔ)句與Java中的使用有些不同之處，其他語(yǔ)句基本和Java中的使用相同，下面對(duì)JavaScript中if條件語(yǔ)句進(jìn)行說(shuō)明。JavaScript中的if條件語(yǔ)句與Java中的條件語(yǔ)句基本相似，唯一不同是if語(yǔ)句中的判斷條件為非空字符串或?yàn)榉橇銛?shù)字時(shí)，都會(huì)被視為true。4.流程控制1.4.3JavaScript基礎(chǔ)語(yǔ)法JavaScript中的函數(shù)是一種可以重復(fù)使用的代碼，類(lèi)似于Java中的方法，但是JavaScript中函數(shù)的定義與Java中方法的定義方式有較大的區(qū)別。在JavaScript中，使用關(guān)鍵字function定義函數(shù)，具體語(yǔ)法格式如下。5.函數(shù)function函數(shù)名稱(參數(shù)1,參數(shù)2,…){//函數(shù)體returnresult;//返回值（可選）}1.4.3JavaScript基礎(chǔ)語(yǔ)法在定義和調(diào)用函數(shù)時(shí)，需要注意以下幾點(diǎn)。①函數(shù)沒(méi)有權(quán)限控制符。②函數(shù)無(wú)須聲明返回值類(lèi)型，也無(wú)須使用關(guān)鍵字void，如果需要返回?cái)?shù)據(jù)直接在函數(shù)體中return即可。③參數(shù)列表中不需要寫(xiě)參數(shù)的數(shù)據(jù)類(lèi)型。④在調(diào)用函數(shù)時(shí)，實(shí)參與形參的個(gè)數(shù)可以不一致。⑤
函數(shù)可以被賦值給變量，也就是說(shuō)，可以將函數(shù)存儲(chǔ)在變量中1.4.3JavaScript基礎(chǔ)語(yǔ)法通過(guò)一個(gè)案例演示JavaScript中函數(shù)的定義和調(diào)用。1.4.3JavaScript基礎(chǔ)語(yǔ)法在JavaScript中，對(duì)象是一種復(fù)合數(shù)據(jù)類(lèi)型，可以用來(lái)存儲(chǔ)和組織相關(guān)的數(shù)據(jù)和功能。對(duì)象由一組鍵值對(duì)組成，鍵通常是字符串類(lèi)型，值可以是任意的Javascript類(lèi)型，包括基本類(lèi)型和引用數(shù)據(jù)類(lèi)型。創(chuàng)建對(duì)象一般有兩種格式，具體語(yǔ)法格式如下所示。6.對(duì)象//方式一：使用newObject()創(chuàng)建對(duì)象var對(duì)象名=newObject();對(duì)象名.屬性名=屬性值;對(duì)象名.函數(shù)名=function(){/*函數(shù)體*/};//方式二：通過(guò)大括號(hào){}形式創(chuàng)建對(duì)象var對(duì)象名={屬性名:"屬性值",屬性名:"屬性值",函數(shù)名:function(){/*函數(shù)體*/}};1.4.3JavaScript基礎(chǔ)語(yǔ)法獲取對(duì)象的屬性值、調(diào)用對(duì)象的函數(shù)的語(yǔ)法格式如下：對(duì)象名.屬性名;
//獲取對(duì)象的屬性值對(duì)象名.函數(shù)名();//調(diào)用對(duì)象的函數(shù)1.4.3JavaScript基礎(chǔ)語(yǔ)法JavaScript提供了多種基本對(duì)象，下面介紹幾種常用的基本對(duì)象。(1)Array對(duì)象Array對(duì)象用于在單個(gè)變量中存儲(chǔ)多個(gè)值，也稱為數(shù)組，其長(zhǎng)度是可變的。JavaScript中常見(jiàn)的創(chuàng)建數(shù)組的方式有以下幾種。var數(shù)組名=newArray();
//創(chuàng)建空數(shù)組var數(shù)組名=newArray(5);
//創(chuàng)建指定長(zhǎng)度的數(shù)組var數(shù)組名=newArray(元素1,元素2,元素3,…);//創(chuàng)建指定元素的數(shù)組var數(shù)組名=[元素1,元素2,元素3,…];
//第三種方式的簡(jiǎn)寫(xiě)1.4.3JavaScript基礎(chǔ)語(yǔ)法Array對(duì)象常見(jiàn)的方法如下。方法描述concat()連接兩個(gè)或多個(gè)數(shù)組，并返回已連接數(shù)組的副本push()向數(shù)組末尾添加一個(gè)或更多元素，并返回新數(shù)組長(zhǎng)度pop()刪除并返回?cái)?shù)組的最后一個(gè)元素shift()刪除并返回?cái)?shù)組的第一個(gè)元素splice()對(duì)數(shù)組進(jìn)行修改，從指定位置開(kāi)始刪除或替換元素sort()對(duì)數(shù)組進(jìn)行排序1.4.3JavaScript基礎(chǔ)語(yǔ)法(2)Date對(duì)象Date對(duì)象用于處理日期和時(shí)間，使用new關(guān)鍵字進(jìn)行創(chuàng)建，具體語(yǔ)法格式如下。var對(duì)象名稱=newDate();1.4.3JavaScript基礎(chǔ)語(yǔ)法Date對(duì)象常見(jiàn)的方法如下。方法描述getFullYear()返回4位數(shù)年份getMonth()返回當(dāng)前日期對(duì)象中的月份，返回值是從0到11的整數(shù)，0～11依次表示1月～12月getDate()返回日期值（1~31）getDay()返回星期值（0~6）getHours()返回小時(shí)值（0~23）getMinutes()返回分鐘值（0~59）getSeconds()返回秒數(shù)值（0~59）getTime()返回從1970年1月1日至今的毫秒數(shù)1.4.3JavaScript基礎(chǔ)語(yǔ)法(3)String對(duì)象String對(duì)象是JavaScript提供的字符串處理對(duì)象，它提供了一系列處理字符串的方法，String對(duì)象常見(jiàn)的方法如下。方法描述charAt()返回在指定位置的字符concat()連接兩個(gè)或更多字符串，并返回新的字符串indexOf()返回值在字符串中第一次出現(xiàn)的位置lastIndexOf()返回值在字符串中最后一次出現(xiàn)的位置replace()在字符串中搜索值或正則表達(dá)式，并返回替換值的字符串1.4.3JavaScript基礎(chǔ)語(yǔ)法方法描述split()將字符串拆分為子字符串?dāng)?shù)組search()檢索字符串中與正則表達(dá)式匹配的子串slice()提取字符串的一部分并返回新的字符串substr()從字符串中抽取子串startsWith()檢查字符串是否以指定字符開(kāi)頭1.4.4DOM和BOM先定一個(gè)小目標(biāo)！
先定一個(gè)小目標(biāo)！掌握DOM和BOM，能夠使用DOM和BOM在瀏覽器環(huán)境中操作網(wǎng)頁(yè)1.4.4DOM和BOMDOM和BOM是JavaScript在瀏覽器環(huán)境中的兩個(gè)重要的對(duì)象模型，它們提供了許多與文檔內(nèi)容、網(wǎng)頁(yè)元素、瀏覽器窗口、歷史記錄等有關(guān)的屬性和方法，使得JavaScript程序在瀏覽器環(huán)境中可以方便地操作和控制網(wǎng)頁(yè)。1.DOMDOM是HTML或XML文檔的對(duì)象表示，它將整個(gè)文檔看作由多個(gè)對(duì)象節(jié)點(diǎn)組成的樹(shù)形結(jié)構(gòu)，由多個(gè)對(duì)象節(jié)點(diǎn)組成，這些對(duì)象代表文檔中不同的元素、屬性和文本。1.4.4DOM和BOM1.4.4DOM和BOMJavaScript中內(nèi)置了一個(gè)document對(duì)象，這個(gè)對(duì)象代表了加載到瀏覽器窗口中的HTML文檔，它是DOM的入口點(diǎn)，通過(guò)document對(duì)象，開(kāi)發(fā)人員可以訪問(wèn)和操作網(wǎng)頁(yè)中的HTML元素。document對(duì)象提供了許多方法和屬性來(lái)與文檔進(jìn)行交互，常見(jiàn)的方法如下。方法描述getElementById(id)用于通過(guò)元素的ID獲取元素getElementsByTagName(tagName)用于通過(guò)標(biāo)簽名獲取一組元素getElementsByClassName(className)用于通過(guò)類(lèi)名獲取一組元素createElement(tagName)用于創(chuàng)建一個(gè)新的HTML元素createTextNode(text)用于創(chuàng)建一個(gè)文本節(jié)點(diǎn)appendChild(node)用于將節(jié)點(diǎn)添加到文檔的指定位置removeChild(node)用于從文檔中移除指定的節(jié)點(diǎn)1.4.4DOM和BOMElement對(duì)象提供的一系列方法和屬性來(lái)操作這個(gè)元素和元素中的屬性，Element對(duì)象的常見(jiàn)方法。方法描述getAttribute(name)用于獲取指定屬性的值setAttribute(name,value)用于設(shè)置指定屬性的值。如果屬性不存在，則創(chuàng)建該屬性removeAttribute(name)用于移除指定的屬性removeChild(node)用于從元素中移除一個(gè)子節(jié)點(diǎn)insertBefore(newNode,referenceNode)用于在指定子節(jié)點(diǎn)之前插入一個(gè)新的子節(jié)點(diǎn)1.4.4DOM和BOMElement對(duì)象的常見(jiàn)屬性。方法描述id用于獲取或設(shè)置元素的IDclassName用于獲取或設(shè)置元素的類(lèi)名innerHTML用于獲取或設(shè)置元素內(nèi)部的HTML內(nèi)容，不包括元素本身outerHTML用于獲取或設(shè)置元素的HTML內(nèi)容，包括元素本身及其所有子節(jié)點(diǎn)textContent用于獲取或設(shè)置元素的文本內(nèi)容style用于獲取或設(shè)置元素的樣式屬性1.4.4DOM和BOM2.BOMBOM提供了處理瀏覽器和頁(yè)面之間交互的對(duì)象。簡(jiǎn)單來(lái)說(shuō)，BOM將瀏覽器的各個(gè)組成部分封裝成了對(duì)象，當(dāng)需要操作瀏覽器的部分功能時(shí)，可以通過(guò)BOM提供的相關(guān)屬性或函數(shù)來(lái)完成。BOM模型的頂級(jí)對(duì)象是window，表示瀏覽器窗口對(duì)象。window對(duì)象下還提供了一系列內(nèi)置對(duì)象，用于訪問(wèn)瀏覽器，稱為瀏覽器對(duì)象。這些瀏覽器對(duì)象按照某種層次組織起來(lái)的模型稱為瀏覽器對(duì)象模型。1.4.4DOM和BOM1.4.4DOM和BOMwindow對(duì)象常用的屬性。屬性描述history用于獲取history對(duì)象，代表瀏覽器的訪問(wèn)歷史location用于獲取location對(duì)象，代表瀏覽器的地址欄screen用于獲取screen對(duì)象，代表瀏覽器屏幕navigator用于獲取navigator對(duì)象，代表瀏覽器軟件本身document用于獲取document對(duì)象，代表瀏覽器窗口目前解析的HTML文檔console用于獲取console對(duì)象，代表瀏覽器開(kāi)發(fā)人員工具的控制臺(tái)1.4.4DOM和BOMWindow對(duì)象常用的方法。方法描述alert()彈出帶有一段消息和一個(gè)確認(rèn)按鈕的警告框confirm()彈出帶有一段消息以及確認(rèn)按鈕和取消按鈕的對(duì)話框close()關(guān)閉瀏覽器窗口open()打開(kāi)一個(gè)新的瀏覽器窗口或查找一個(gè)已命名的窗口setInterval()按照指定的周期（以毫秒計(jì)）來(lái)調(diào)用函數(shù)或計(jì)算表達(dá)式setTimeout()在指定的毫秒數(shù)后調(diào)用函數(shù)或計(jì)算表達(dá)式1.4.5JavaScript事件先定一個(gè)小目標(biāo)！
先定一個(gè)小目標(biāo)！掌握J(rèn)avaScript事件，能夠?yàn)榫W(wǎng)頁(yè)元素綁定常見(jiàn)的事件1.4.5JavaScript事件JavaScript中的事件是指用戶或?yàn)g覽器本身在特定條件下發(fā)生的動(dòng)作或行為，這些事件可以被JavaScript捕獲并用于執(zhí)行相應(yīng)的代碼，從而為用戶提供動(dòng)態(tài)和交互式的網(wǎng)頁(yè)體驗(yàn)。JavaScript事件有多種類(lèi)型，常見(jiàn)的事件包括鼠標(biāo)事件、鍵盤(pán)事件、表單事件、文檔加載事件等。1.4.5JavaScript事件JavaScript常見(jiàn)的事件。類(lèi)型事件名稱描述鼠標(biāo)事件click單擊某個(gè)元素時(shí)觸發(fā)mouseover鼠標(biāo)指針懸停在某個(gè)元素上時(shí)觸發(fā)mouseout鼠標(biāo)指針從某個(gè)元素上移出時(shí)觸發(fā)鍵盤(pán)事件keydown某個(gè)鍵盤(pán)按鍵被按下時(shí)觸發(fā)表單事件focus元素獲取焦點(diǎn)時(shí)觸發(fā)blur元素失去焦點(diǎn)時(shí)觸發(fā)change表單元素內(nèi)容改變時(shí)觸發(fā)submit表單提交時(shí)觸發(fā)reset表單重置時(shí)觸發(fā)文檔加載事件load文檔加載完畢時(shí)觸發(fā)DOMContentLoadedDOM結(jié)構(gòu)構(gòu)建完畢時(shí)觸發(fā)1.4.5JavaScript事件通過(guò)屬性進(jìn)行綁定是指直接在HTML元素的屬性中指定事件處理函數(shù)，具體語(yǔ)法格式如下。1.通過(guò)屬性進(jìn)行綁定<標(biāo)簽名稱屬性1="屬性值1"屬性2="屬性值2"…on事件名稱="事件處理函數(shù)"></標(biāo)簽名稱>JavaScript對(duì)于事件的綁定提供了兩種方式，下面講解這兩種方式。1.4.5JavaScript事件在DOM編程中，HTML中的標(biāo)簽會(huì)被加載成元素對(duì)象，因此可以通過(guò)操作元素對(duì)象的屬性來(lái)操作標(biāo)簽的屬性，從而為該標(biāo)簽綁定事件處理函數(shù)。2.通過(guò)DOM進(jìn)行綁定1.4.5JavaScript事件下面通過(guò)一個(gè)案例演示JavaScript中事件的綁定和觸發(fā)。AI編程助手1.51.5AI編程助手高效編寫(xiě)高質(zhì)量的代碼是每個(gè)開(kāi)發(fā)人員追求的目標(biāo)，然而，面對(duì)日益復(fù)雜的項(xiàng)目和不斷更新的技術(shù)棧，單靠人力難以完全避免錯(cuò)誤和低效的問(wèn)題。在這種背景下，AI（ArtificialIntelligence，人工智能）編程助手應(yīng)運(yùn)而生。下面將對(duì)AI編程助手的相關(guān)知識(shí)進(jìn)行講解。1.5.1
AI編程助手概述先定一個(gè)小目標(biāo)！
先定一個(gè)小目標(biāo)！了解AI編程助手概述，能簡(jiǎn)述AI編程助手的主要特點(diǎn)1.5.1
AI編程助手概述0102030405AI編程助手能夠根據(jù)開(kāi)發(fā)人員的需求或輸入代碼的上下文，自動(dòng)生成相應(yīng)的程序腳本或代碼片段。AI編程助手通常都提供智能問(wèn)答功能，能夠根據(jù)項(xiàng)目需求和歷史數(shù)據(jù)推薦合適的技術(shù)棧、工具和最佳實(shí)踐AI編程助手能夠識(shí)別代碼中的性能瓶頸和冗余部分，提出優(yōu)化方案當(dāng)代碼運(yùn)行出現(xiàn)異常報(bào)錯(cuò)時(shí)，提供智能排查建議和修復(fù)代碼AI編程助手能夠根據(jù)代碼自動(dòng)生成注釋和解釋，提高代碼的可讀性和維護(hù)性智能生成代碼智能問(wèn)答優(yōu)化代碼檢測(cè)與修復(fù)錯(cuò)誤AI編程助手的主要特點(diǎn)生成代碼注釋和代碼解釋AI編程助手是一種使用人工智能技術(shù)，輔助開(kāi)發(fā)人員實(shí)現(xiàn)編程的工具，AI編程助手為開(kāi)發(fā)人員提升編程效率和代碼質(zhì)量提供了強(qiáng)大的支持。1.5.1
AI編程助手概述當(dāng)前較為常見(jiàn)的AI編程助手如下。名稱所屬的公司GitHubCopilot微軟+OpenAIAmazonQ亞馬遜BaiduComate（文心快碼）百度TONGYILingma（通義靈碼）阿里巴巴CodeGeeX智普MarsCode（豆包）字節(jié)跳動(dòng)1.5.2
AI編程助手快速入門(mén)先定一個(gè)小目標(biāo)！
先定一個(gè)小目標(biāo)！掌握AI
溫馨提示
- 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ì)自己和他人造成任何形式的傷害或損失。
最新文檔
- 2026年重慶商務(wù)職業(yè)學(xué)院?jiǎn)握新殬I(yè)技能考試題庫(kù)帶答案詳解
- 2026年云南外事外語(yǔ)職業(yè)學(xué)院?jiǎn)握芯C合素質(zhì)考試題庫(kù)及參考答案詳解一套
- 2026年福建省南平市單招職業(yè)傾向性考試題庫(kù)及參考答案詳解
- 2026年福建師范大學(xué)協(xié)和學(xué)院?jiǎn)握新殬I(yè)技能測(cè)試題庫(kù)及參考答案詳解1套
- 2026年河北能源職業(yè)技術(shù)學(xué)院?jiǎn)握新殬I(yè)傾向性測(cè)試題庫(kù)及完整答案詳解1套
- 2026年遼寧省遼陽(yáng)市單招職業(yè)適應(yīng)性考試題庫(kù)及參考答案詳解
- 2026年菏澤醫(yī)學(xué)?？茖W(xué)校單招職業(yè)技能考試題庫(kù)附答案詳解
- 2026年宿州職業(yè)技術(shù)學(xué)院?jiǎn)握新殬I(yè)適應(yīng)性測(cè)試題庫(kù)參考答案詳解
- 2026年河南經(jīng)貿(mào)職業(yè)學(xué)院?jiǎn)握新殬I(yè)技能考試題庫(kù)含答案詳解
- 2026年呂梁師范高等?？茖W(xué)校單招職業(yè)技能測(cè)試題庫(kù)及完整答案詳解1套
- 2025年廣東省第一次普通高中學(xué)業(yè)水平合格性考試（春季高考）語(yǔ)文試題（含答案詳解）
- 項(xiàng)目經(jīng)理答辯題庫(kù)題
- 抗菌藥物使用分級(jí)授權(quán)表
- JJF 1851-2020α譜儀校準(zhǔn)規(guī)范
- GB/T 7441-2008汽輪機(jī)及被驅(qū)動(dòng)機(jī)械發(fā)出的空間噪聲的測(cè)量
- GB 2707-2016食品安全國(guó)家標(biāo)準(zhǔn)鮮(凍)畜、禽產(chǎn)品
- 衰弱量表（FARIL）及預(yù)防措施
- 全球化視角的國(guó)際投資-課件
- 浙江省金華市各縣區(qū)鄉(xiāng)鎮(zhèn)行政村村莊村名居民村民委員會(huì)明細(xì)
- 反滲透(卷式膜組件的結(jié)構(gòu)圖比較清清晰)課件
- 1379國(guó)開(kāi)電大本科《人文英語(yǔ)3》歷年期末考試(第四大題寫(xiě)作)題庫(kù)
評(píng)論
0/150
提交評(píng)論