Java-Web程序設(shè)計任務(wù)教程第1章-網(wǎng)頁開發(fā)課件_第1頁
Java-Web程序設(shè)計任務(wù)教程第1章-網(wǎng)頁開發(fā)課件_第2頁
Java-Web程序設(shè)計任務(wù)教程第1章-網(wǎng)頁開發(fā)課件_第3頁
Java-Web程序設(shè)計任務(wù)教程第1章-網(wǎng)頁開發(fā)課件_第4頁
Java-Web程序設(shè)計任務(wù)教程第1章-網(wǎng)頁開發(fā)課件_第5頁
已閱讀5頁，還剩123頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

第一章網(wǎng)頁開發(fā)基礎(chǔ)HTML的常用標(biāo)記JavaScript的使用CSS選擇器和常用屬性傳智書城首頁和注冊頁面設(shè)計第一章網(wǎng)頁開發(fā)基礎(chǔ)HTML的常用標(biāo)記CSS選擇器和常用屬性掌握HTML+CSS+JavaScript的開發(fā)基礎(chǔ)13熟悉CSS選擇器和常用屬性2熟悉HTML的常用標(biāo)記掌握熟悉熟悉學(xué)習(xí)目標(biāo)掌握HTML+CSS+13熟悉CSS選擇器和常用1.1HTML技術(shù)1.2CSS技術(shù)1.3JavaScript基礎(chǔ)1.4階段案例：傳智書城注冊頁面設(shè)計?點擊查看本小節(jié)知識架構(gòu)?點擊查看本小節(jié)知識架構(gòu)?點擊查看本小節(jié)知識架構(gòu)?點擊查看本小節(jié)知識架構(gòu)目錄1.1HTML技術(shù)1.2CSS技術(shù)1.3JavaScript返回目錄1.1HTML技術(shù)1.1.11.1.21.1.31.1.41.1.51.1.61.1.71.1.8HTML簡介單標(biāo)記和雙標(biāo)記文件控制與文本樣式標(biāo)記圖像標(biāo)記表格標(biāo)記表單標(biāo)記列表標(biāo)記和超鏈接標(biāo)記<div>標(biāo)記知識架構(gòu)返回目錄1.1HTML技術(shù)1.1.11.1.21.1.31返回目錄1.2.11.2.21.2.3簡介CSS樣式的引用方式CSS選擇器和常用屬性1.2CSS技術(shù)知識架構(gòu)返回目錄1.2.11.2.21.2.3簡介CSS樣式的引用方返回目錄1.3.11.3.21.3.3DOM相關(guān)知識JavaScript概述JavaScript的使用1.3JavaScript基礎(chǔ)知識架構(gòu)返回目錄1.3.11.3.21.3.3DOM相關(guān)知識Java返回目錄【任務(wù)1-1】傳智書城首頁設(shè)計【任務(wù)1-2】傳智書城注冊頁面設(shè)計1.4JavaScript基礎(chǔ)知識架構(gòu)返回目錄【任務(wù)1-1】傳智書城首頁設(shè)計【任務(wù)1-2】傳智書城HTML是英文HyperTextMarkupLanguage的縮寫，中文譯為“超文本標(biāo)記語言”，其主要作用是通過HTML標(biāo)記對網(wǎng)頁中的文本、圖片、聲音等內(nèi)容進行描述。HTML網(wǎng)頁就是一個后綴名為“.html”或“.htm”的文件，它可以用記事本打開，所以簡單的html代碼可以在記事本中編寫。編寫完成后，將文件后綴名修改為“.html”即可生成一個HTML網(wǎng)頁。在實際開發(fā)中，項目的靜態(tài)頁面通常由專門的網(wǎng)頁制作人員設(shè)計，開發(fā)人員只需了解頁面元素，能夠使用和修改頁面中的元素，并在項目運行時能夠展示出相應(yīng)的后臺數(shù)據(jù)即可。網(wǎng)頁制作人員通常會使用一些專業(yè)軟件來創(chuàng)建HTML頁面，由于本教材中，HTML技術(shù)只作為JavaWeb學(xué)習(xí)的輔助技術(shù)，所以這里不會詳細(xì)介紹如何使用專業(yè)工具制作網(wǎng)頁，只需要讀者了解頁面元素的構(gòu)成，會調(diào)試基本的頁面效果即可。HTML簡介1.1HTML技術(shù)HTML是英文HyperTextMarkupLangu

了解了什么是HTML后，接下來通過一個基本的HTML文檔來講解其內(nèi)部的構(gòu)成，請查看教材文件1-1。案例代碼1.1HTML技術(shù)了解了什么是HTML后，接下來通過一個基本的H<!DOCTYPE>標(biāo)記<!DOCTYPE>標(biāo)記位于文檔的最前面，用于向瀏覽器說明當(dāng)前文檔使用哪種HTML標(biāo)準(zhǔn)規(guī)范，如文件1-1中使用的是HTML4.01版本。網(wǎng)頁必需在開頭處使用<!DOCTYPE>標(biāo)記為所有的HTML文檔指定HTML版本和類型，只有這樣瀏覽器才能將該網(wǎng)頁作為有效的HTML文檔，并按指定的文檔類型進行解析。<!DOCTYPE>標(biāo)記和瀏覽器的兼容性相關(guān)，刪除<!DOCTYPE>后，會把如何展示HTML頁面的權(quán)利交給瀏覽器，這時，有多少種瀏覽器，頁面就有可能有多少種顯示效果，在實際開發(fā)中，這是不被允許的。<html>標(biāo)記<html>標(biāo)記位于<!DOCTYPE>標(biāo)記之后，也稱為根標(biāo)記，用于告知瀏覽器其自身是一個HTML文檔，<html>標(biāo)記標(biāo)志著HTML文檔的開始，</html>標(biāo)記標(biāo)志著HTML文檔的結(jié)束，在他們之間的是文檔的頭部和主體內(nèi)容。1.1HTML技術(shù)<!DOCTYPE>標(biāo)記1.1HTML技術(shù)<head>標(biāo)記<head>標(biāo)記用于定義HTML文檔的頭部信息，也稱為頭部標(biāo)記，緊跟在<html>標(biāo)記之后，主要用來封裝其他位于文檔頭部的標(biāo)記，例如<title>、<meta>、<link>及<style>等，其中<title>標(biāo)記用來描述文檔的標(biāo)題，<meta>標(biāo)記可提供有關(guān)頁面的元信息，<link>標(biāo)記用于定義文檔與外部資源的關(guān)系，其最常見的用途是鏈接樣式表，<style>標(biāo)記用于為HTML文檔定義樣式信息。一個HTML文檔只能含有一對<head>標(biāo)記，絕大多數(shù)文檔頭部包含的數(shù)據(jù)都不會真正作為內(nèi)容顯示在頁面中。<body>標(biāo)記<body>標(biāo)記用于定義HTML文檔所要顯示的內(nèi)容，也稱為主體標(biāo)記。瀏覽器中顯示的所有文本、圖像、音頻和視頻等信息都必須位于<body>標(biāo)記內(nèi)，<body>標(biāo)記中的信息才是最終展示給用戶看的。一個HTML文檔只能含有一對<body>標(biāo)記，且<body>標(biāo)記必須在<html>標(biāo)記內(nèi)，位于<head>頭部標(biāo)記之后，與<head>標(biāo)記是并列關(guān)系。1.1HTML技術(shù)<head>標(biāo)記1.1HTML技術(shù)

了解了文件1-1中的HTML標(biāo)記后，接下來講解一下HTML文件的創(chuàng)建以及運行，請查看教材1.1.1小節(jié)。案例代碼要資源？搶紅包？找播妞！QQ、微信：2086958271.1HTML技術(shù)了解了文件1-1中的HTML標(biāo)記后，接下來講解不同標(biāo)記描述的內(nèi)容在瀏覽器中的顯示效果是不一樣的。頁面中的信息，必須放在相應(yīng)的HTML標(biāo)記中，才能被瀏覽器正確解析。大部分標(biāo)記都是成對出現(xiàn)的，如頭部標(biāo)記<head>、主體標(biāo)記<body>，然而也有單個出現(xiàn)的標(biāo)記，如水平線標(biāo)記<hr/>。通常將HTML標(biāo)記分為兩大類，分別是“單標(biāo)記”與“雙標(biāo)記”，對這兩個標(biāo)記的具體介紹如下：1．單標(biāo)記單標(biāo)記也稱空標(biāo)記，是指用一個標(biāo)記符號即可完整地描述某個功能的標(biāo)記。其基本語法格式如下：單標(biāo)記和雙標(biāo)記1.1HTML技術(shù)不同標(biāo)記描述的內(nèi)容在瀏覽器中的顯示效果是不一樣的。頁面中的信例如標(biāo)記<hr/>就是單標(biāo)記，該標(biāo)記用于定義一條水平線。需要注意的是，在標(biāo)記名與“/”之間有一個空格，雖然在顯示效果上有沒有空格都一樣，但是按照規(guī)范的要求，建議加上空格。2．雙標(biāo)記雙標(biāo)記也稱體標(biāo)記，是指由開始和結(jié)束兩個標(biāo)記符組成的標(biāo)記。其基本語法格式如下：在上述的語法中，<標(biāo)記名>表示該標(biāo)記的作用開始，一般稱為開始標(biāo)記（starttag），</標(biāo)記名>表示該標(biāo)記的作用結(jié)束，一般稱為結(jié)束標(biāo)記（endtag），和開始標(biāo)記相比，結(jié)束標(biāo)記只是在前面加了一個關(guān)閉符“/”。例如文件1-1中的<html></html>、<head></head>等都是雙標(biāo)記。1.1HTML技術(shù)例如標(biāo)記<hr/>就是單標(biāo)記，該標(biāo)記用于定義一條水平線。需多學(xué)一招：為什么要有單標(biāo)記？HTML標(biāo)記的作用原理就是選擇網(wǎng)頁內(nèi)容，從而進行描述，也就是說需要描述誰，就選擇誰，所以才會有雙標(biāo)記的出現(xiàn)，用于定義標(biāo)記作用的開始與結(jié)束。而單標(biāo)記本身就可以描述一個功能，不需要選擇誰，例如水平線標(biāo)記<hr/>,按照雙標(biāo)記的語法，它應(yīng)該寫成“<hr></hr>”，但是水平線標(biāo)記不需要選擇誰，它本身就代表一條水平線，此時寫成雙標(biāo)記就顯得有點多余，但是又不能沒有結(jié)束符號。所以單標(biāo)記的語法格式就是在標(biāo)記名稱后面加一個關(guān)閉符，即為<標(biāo)記名/>。多學(xué)一招多學(xué)一招：為什么要有單標(biāo)記？多學(xué)一招1．段落標(biāo)記<p></p>和換行標(biāo)記<br/>為了使網(wǎng)頁中的文字有條理地顯示出來，HTML提供了段落標(biāo)記<p></p>，如果希望某段文本強制換行顯示，就需要使用換行標(biāo)記<br/>。2．文本樣式標(biāo)記在HTML中，使用<font>標(biāo)記來控制網(wǎng)頁中文本的樣式，如字體、字號和顏色。其基本語法格式如下：

接下來通過案例來演示<p>、<br/>和<font>三個種標(biāo)記的使用，請查看教材文件1-2和1-3。案例代碼1.1HTML技術(shù)1．段落標(biāo)記<p></p>和換行標(biāo)記<br/>要想在HTML網(wǎng)頁中顯示圖像就需要使用圖像標(biāo)記<img/>。其基本的語法格式如下：在上述的語法中，src屬性用于指定圖像文件的路徑，該屬性是<img/>標(biāo)記的必需屬性。要想在網(wǎng)頁中靈活地應(yīng)用<img/>標(biāo)記，只使用src屬性是不行的，還需要其他屬性的配合。圖像標(biāo)記

接下來通過一個案例來演示<img/>標(biāo)記的用法，請查看教材文件1-4。案例代碼1.1HTML技術(shù)要想在HTML網(wǎng)頁中顯示圖像就需要使用圖像標(biāo)記<img/>在制作網(wǎng)頁時，為了使網(wǎng)頁中的數(shù)據(jù)能夠有條理地顯示，可以使用表格對網(wǎng)頁進行規(guī)劃。在Word文檔中，要創(chuàng)建表格只需要插入表格，而在HTML網(wǎng)頁中要想創(chuàng)建表格，需要使用相關(guān)的表格標(biāo)記才能創(chuàng)建表格。在HTML網(wǎng)頁中創(chuàng)建表格的基本語法格式如下所示：在上述的語法中，包含三對HTML標(biāo)記，分別為<table></table>、<tr></tr>、<td></td>，它們是創(chuàng)建表格的基本標(biāo)記，缺一不可。<table></table>用于定義一個表格，<tr></tr>用于定義表格中的行，必須嵌套在<table></table>標(biāo)記中，<td></td>用于定義表格中的單元格，也可稱為表格中的列，必須嵌套

在<tr></tr>標(biāo)記中。表格標(biāo)記1.1HTML技術(shù)在制作網(wǎng)頁時，為了使網(wǎng)頁中的數(shù)據(jù)能夠有條理地顯示，可以使用表

接下來，通過一個案例來演示<table>標(biāo)記的使用，請查看教材文件1-5。案例代碼1.1HTML技術(shù)接下來，通過一個案例來演示<table>標(biāo)記的學(xué)習(xí)表單標(biāo)記之前，首先需要理解表單的概念。簡單的說，表單就是在網(wǎng)頁上用于輸入信息的區(qū)域，它的主要功能是收集用戶信息，并將這些信息傳遞給后臺服務(wù)器。其實表單在互聯(lián)網(wǎng)上隨處可見，例如注冊頁面中的用戶名和密碼輸入、性別選擇、提交按鈕等都是用表單中的相關(guān)標(biāo)記定義的。。表單主要由3部分構(gòu)成，分別為表單控件、提示信息和表單域，詳細(xì)介紹如下所示：表單控件：包含了具體的表單功能項，如單行文本輸入框、密碼輸入框、復(fù)選框提交按鈕等。提示信息：一個表單中通常還需要包含一些說明性的文字即表單控件前的文字說明，用于提示用戶進行填寫和操作。表單域：它相當(dāng)于一個容器，用來容納所有的表單控件和提示信息。表單標(biāo)記1.1HTML技術(shù)學(xué)習(xí)表單標(biāo)記之前，首先需要理解表單的概念。簡單的說，表單就是1．創(chuàng)建表單在HTML中，<form>標(biāo)記用于定義表單域，即創(chuàng)建一個表單，其基本語法如下所示：在上述的語法中，action、method、name為<form>標(biāo)記的常用屬性，action屬性用于指定表單提交的地址，例如action="login.jsp"表示表單數(shù)據(jù)會提交到名為login.jsp的頁面去處理。method屬性用于設(shè)置表單數(shù)據(jù)的提交方式，其取值為GET或POST，其中，GET為默認(rèn)值，這種方式提交的數(shù)據(jù)將顯示在瀏覽器的地址欄中，保密性差且有數(shù)據(jù)量限制，而使用POST提交方式不但保密性好，還可以提交大量的數(shù)據(jù)，所以開發(fā)中通常使用POST方式提交表單。1.1HTML技術(shù)1．創(chuàng)建表單1.1HTML技術(shù)2．表單控件<input>瀏覽網(wǎng)頁時經(jīng)常會看到單行文本輸入框、單選按鈕、復(fù)選框、重置按鈕等，使用<input/>控件可以在表單中定義這些元素，其基本語法格式如下：在上述語法中type屬性為其最基本的屬性，取值有多種，用來指定不同的控件類型。除type屬性外，<input/>控件還可以定義很多其他屬性，其中，比較常用的如id、name、value、size，它們分別用來指定input控件的ID值、名稱、控件中的默認(rèn)值和控件在頁面中的顯示寬度。

接下來通過一個案例來演示<input/>控件的使用，請查看教材文件8-1。案例代碼1.1HTML技術(shù)2．表單控件<input>接下來通過一個案例來演多學(xué)一招：HTML的多行文本標(biāo)記通過前面的學(xué)習(xí)可知，使用<input/>標(biāo)記可以定義單行文本輸入框。但是，如果需要輸入大量的文本信息，單行文本框?qū)o法顯示全部的輸入信息，為此HTML語言提供了<textarea></textarea>標(biāo)記。通過此標(biāo)記可以創(chuàng)建多行文本框，其基本語法格式如下。

接下來通過一個案例來演示<textarea></textarea>標(biāo)記的使用，請查看教材文件8-1。案例代碼多學(xué)一招多學(xué)一招：HTML的多行文本標(biāo)記接下來通過一個1．無序列表<ul>列表標(biāo)記分為有序列表和無序列表，由于在HTML中無序列表較為常用，所以下面針對無序列表進行詳細(xì)的講解。為了使網(wǎng)頁更易讀，經(jīng)常將網(wǎng)頁信息以列表的形式呈現(xiàn)，例如淘寶商城首頁的商品分類就是以列表的形式呈現(xiàn)的。無序列表的各個列表項之間沒有順序級別之分，通常是并列的。定義無須列表的基本語法格式如下所示。在上述的語法中，<ul></ul>標(biāo)記用于定義無序列表，<li></li>標(biāo)記嵌套在<ul></ul>標(biāo)記中，用于描述具體的列表項，每對<ul></ul>中至少應(yīng)包含一對<li></li>。列表標(biāo)記和超鏈接標(biāo)記1.1HTML技術(shù)1．無序列表<ul>列表標(biāo)記和超鏈接標(biāo)記1.1HTML技術(shù)2．超鏈接標(biāo)記

一個網(wǎng)站通常由多個頁面構(gòu)成，進入網(wǎng)站時首先看到的是其首頁面，如果想從首頁面跳轉(zhuǎn)到子頁面，就需要在首頁面的相應(yīng)位置添加超鏈接。在HTML中創(chuàng)建超鏈接非常簡單，只需用<a></a>標(biāo)記環(huán)繞需要被鏈接的對象即可。其基本語法格式如下所示。在上述語法中，<a></a>標(biāo)記是一個行內(nèi)標(biāo)記，用于定義超鏈接，href屬性用于指定鏈接指向的頁面的URL，當(dāng)在<a></a>標(biāo)記中使用href屬性時，該標(biāo)記就具有了超鏈接的功能；target屬性用于指定頁面的打開方式，其取值有_self和_blank，其中_self為默認(rèn)值，意為在原窗口打開，_blank為在新窗口打開。接下來通過一個案例來演示<a></a>標(biāo)記的使用。1.1HTML技術(shù)2．超鏈接標(biāo)記1.1HTML技術(shù)

接下來通過一個案例來演示<ul></ul>標(biāo)記和<a></a>標(biāo)記的使用，請查看教材文件1-8和1-9。案例代碼1.1HTML技術(shù)接下來通過一個案例來演示<ul></ul>標(biāo)記div是英文DIVision的縮寫，意為“分割、區(qū)域”。<div>標(biāo)記簡單而言就是一個區(qū)塊容器標(biāo)記，可以將網(wǎng)頁分割為獨立的、不同的部分，以實現(xiàn)網(wǎng)頁的規(guī)劃和布局。在HTML頁面中，它以<div>開頭，并以</div>結(jié)尾，在<div>與</div>之間可以容納段落、標(biāo)題、圖像等各種網(wǎng)頁元素，也就是說大多數(shù)HTML標(biāo)記都可以嵌套在<div>標(biāo)記中，并且<div>還可以嵌套多層<div>。在實際開發(fā)中<div>標(biāo)記常常與CSS技術(shù)搭配使用，在下一小節(jié)講解CSS技術(shù)的過程中會對<div>標(biāo)記的使用進行舉例，這里不多贅述。<div>標(biāo)記1.1HTML技術(shù)div是英文DIVision的縮寫，意為“分割、區(qū)域”。<dCSS是CascadingStyleSheet的縮寫，譯作“層疊樣式表單”，是用于(增強)控制網(wǎng)頁樣式并允許將樣式信息與網(wǎng)頁內(nèi)容分離的一種標(biāo)記性語言。在實際開發(fā)中，主要用于設(shè)置HTML頁面中的文本內(nèi)容（字體、大小、對齊方式等）、圖片的外形（寬高、邊框樣式、邊距等）以及版面的布局等外觀顯示樣式。CSS定義的規(guī)則具體如下：在上述的樣式規(guī)則中，選擇器用于指定CSS樣式作用的HTML對象，花括號內(nèi)的屬性是對該對象設(shè)置的具體樣式。其中，屬性和屬性值以“鍵值對”的形式出現(xiàn)，例如字體大小、文本顏色等。屬性和屬性值之間用“:”（英文冒號）連接，多個“鍵值對”之間用“;”（英文分號）進行分隔。簡介1.1HTML技術(shù)CSS是CascadingStyleSheet的縮接下來通過CSS樣式對<div>標(biāo)記進行設(shè)置，具體示例如下：上面的代碼就是一個完整的CSS樣式。其中，div為選擇器，表示CSS樣式作用的HTML對象，border、width和height為CSS屬性，分別表示邊框、寬度和高度，其中border屬性有3個值“1pxsolidred;”分別表示該邊框為1像素、實心邊框線、紅色。在CSS中，通常使用像素單位px作為計量文本、邊框等元素的標(biāo)準(zhǔn)量，px是相對于顯示器屏幕分辨率而言的。而百分比（%）是相對于父對象而言的，例如一個元素呈現(xiàn)的寬度是400px，子元素設(shè)置為50%，那么子元素所呈現(xiàn)的寬度為200px。1.1HTML技術(shù)接下來通過CSS樣式對<div>標(biāo)記進行設(shè)置，具體示例如下：在CSS中顏色的取值方式有3種：預(yù)定義的顏色值：如red、green、blue等。十六進制：如#FF0000、#FF6600、#29D794等。實際工作中，十六進制是最常用的定義顏色的方式。RGB代碼：如紅色可以用rgb(255,0,0)或rgb(100%,0%,0%)來表示。如果使用RGB代碼百分比方式取顏色值時，即使值為0，也不能省略百分號，必須寫為0%。1.2CSS技術(shù)在CSS中顏色的取值方式有3種：1.2CSS技術(shù)要想使用CSS修飾網(wǎng)頁，就需要在HTML文檔中引入CSS。引入CSS的方式有4種，分別為鏈入式、行內(nèi)式（也稱為內(nèi)聯(lián)樣式）、內(nèi)嵌式和導(dǎo)入式。下面對開發(fā)中常用的內(nèi)嵌式和鏈入式這2種引入方式進行講解，具體如下：1．內(nèi)嵌式內(nèi)嵌式是將CSS代碼集中寫在HTML文檔的<head>頭部標(biāo)記中，并用<style>標(biāo)記定義，其基本語法格式如下：CSS樣式的引用方式1.2CSS技術(shù)要想使用CSS修飾網(wǎng)頁，就需要在HTML文檔中引入CSS。引在上述語法中，<style>標(biāo)記一般位于<head>標(biāo)記中的<title>標(biāo)記之后，因為瀏覽器是從上到下解析代碼的，把CSS代碼放在頭部便于提前被加載和解析，以避免網(wǎng)頁內(nèi)容加載后沒有樣式修飾帶來的問題。同時，必須設(shè)置type的屬性值為“text/css”，這樣瀏覽器才知道<style>標(biāo)記包含的是CSS代碼。

接下來通過一個案例來學(xué)習(xí)如何在HTML文件中使用內(nèi)嵌式加入CSS，請查看教材文件1-10。案例代碼1.2CSS技術(shù)在上述語法中，<style>標(biāo)記一般位于<head>標(biāo)記中的2．鏈入式鏈入式是將所有的樣式放在一個或多個以.css為擴展名的外部樣式表文件中，通過<link/>標(biāo)記將外部樣式表文件鏈接到HTML文件中，其基本語法格式如下：在上面語法中，<link/>標(biāo)記需要放在<head>頭部標(biāo)記中，并且必須指定<link/>標(biāo)記的三個屬性，具體如下：href：定義所鏈接外部樣式表文件的地址，可以是相對路徑，也可以是絕對路徑。type：定義所鏈接文檔的類型，這里需要指定為“text/css”，表示鏈接的外部文件為CSS。rel：定義當(dāng)前文檔與被鏈接文檔之間的關(guān)系，這里需要指定為“stylesheet”，表示被鏈接的文檔是一個樣式表文件。1.2CSS技術(shù)2．鏈入式1.2CSS技術(shù)

接下來通過修改文件1-10來演示鏈入式CSS的引用方式，請查看教材1.2.2小計。案例代碼1.2CSS技術(shù)接下來通過修改文件1-10來演示鏈入式CSS要想將CSS樣式應(yīng)用于特定的HTML元素，首先需要找到該目標(biāo)元素。在CSS中，執(zhí)行這一樣式任務(wù)的部分被稱為選擇器。1．標(biāo)記選擇器標(biāo)記選擇器是指用HTML標(biāo)記名稱作為選擇器，按標(biāo)記名稱分類，為頁面中某一類標(biāo)記指定統(tǒng)一的樣式。其基本語法格式如下：上述語法中，所有的HTML標(biāo)記都可以作為標(biāo)記選擇器的標(biāo)記名，例如<body>標(biāo)記、<h1>標(biāo)記、<p>標(biāo)記等。用標(biāo)記選擇器定義的樣式對頁面中該類型的所有標(biāo)記都有效，這是它的優(yōu)點，但同時這也是其缺點，因為這樣不

能設(shè)計差異化樣式。CSS選擇器和常用屬性1.2CSS技術(shù)要想將CSS樣式應(yīng)用于特定的HTML元素，首先需要找到該目標(biāo)2．類選擇器類選擇器使用“.”（英文點號）進行標(biāo)識，后面緊跟類名，語法格式如下：上述語法中，類名即為HTML頁面中元素的class屬性值，大多數(shù)HTML元素都可以定義class屬性。類選擇器最大的優(yōu)勢是可以為元素對象定義單獨或相同的樣式。3．id選擇器id選擇器使用“#”進行標(biāo)識，后面緊跟id名，其基本語法格式如下：上述語法中，id名即為HTML頁面中元素的id屬性值，大多數(shù)HTML元素都可以定義id屬性，元素的id值是唯一的，只能對應(yīng)于文檔中某一個具體的元素。1.2CSS技術(shù)2．類選擇器1.2CSS技術(shù)4．通配符選擇器通配符選擇器用“*”號表示，它是所有選擇器中作用范圍最廣的，能匹配頁面中所有的元素。其基本語法格式如下：例如下面使用通配符選擇器定義的樣式，該樣式能夠清除所有HTML標(biāo)記的默認(rèn)邊距。如下所示：在實際網(wǎng)頁開發(fā)中，不建議使用通配符選擇器，因為它設(shè)置的樣式對所有的HTML標(biāo)記都生效，這是其優(yōu)點也是其缺點，因為這樣不能設(shè)計差異化樣式。1.2CSS技術(shù)4．通配符選擇器1.2CSS技術(shù)

了解了幾種選擇器的語法結(jié)構(gòu)后，接下來通過一個案例來學(xué)習(xí)這幾種選擇器的使用，請查看教材文件1-11。案例代碼1.2CSS技術(shù)了解了幾種選擇器的語法結(jié)構(gòu)后，接下來通過一個案為了使讀者更方便的了解網(wǎng)頁中各種標(biāo)記的樣式，下面介紹一些常用的CSS屬性。如表所示：1.2CSS技術(shù)1.2CSS技術(shù)DOM是DocumentObjectModel（文檔對象模型）的簡稱，是W3C組織推薦的處理可擴展標(biāo)志語言的標(biāo)準(zhǔn)編程接口，它可以以一種獨立于平臺和語言的方式訪問和修改一個文檔的內(nèi)容和結(jié)構(gòu)。W3C中將DOM標(biāo)準(zhǔn)分為3個不同的部分：核心DOM、XMLDOM和HTMLDOM，其中核心DOM是針對任何結(jié)構(gòu)化文檔的標(biāo)準(zhǔn)模型，XMLDOM是針對XML文檔的標(biāo)準(zhǔn)模型，而HTMLDOM是針對HTML文檔的標(biāo)準(zhǔn)模型。由于本章中主要講解的是網(wǎng)頁開發(fā)的基礎(chǔ)知識，而主要涉及的DOM內(nèi)容就是HTMLDOM，所以本節(jié)將主要介紹HTMLDOM的知識。DOM相關(guān)知識1.3JavaScript基礎(chǔ)DOM是DocumentObjectModel（文檔對象HTMLDOM模型被構(gòu)造為對象的樹，該樹的根節(jié)點是文檔（Document）對象，該對象有一個documentElement的屬性引用，表示文檔根元素的Element對象。HTML文檔中表示文檔根元素的Element對象是<html>元素，<head>和<body>元素可以看做樹的枝干。HTMLDOM樹的結(jié)構(gòu)如右圖所示。在圖中，每個元素被稱為一個節(jié)點，直接位于一個節(jié)點之下的節(jié)點被稱為該節(jié)點的子節(jié)點（childNode），直接位于一個節(jié)點之上的節(jié)點被稱為該節(jié)點的父節(jié)點（parentNode），具有相同父節(jié)點的兩個節(jié)點稱為兄弟節(jié)點（siblingNode）。1.3JavaScript基礎(chǔ)HTMLDOM模型被構(gòu)造為對象的樹，該樹的根節(jié)點是文檔（D1．節(jié)點的訪問在DOM中，HTML文檔的各個節(jié)點被視為各種類型的Node對象。如果想要通過某個節(jié)點的子節(jié)點找到該元素，其語法如下所示：Node對象的常用屬性如表所示。2．獲取文檔中的指定元素通過遍歷節(jié)點的訪問可以找到文檔中指定的元素，但是這種方法有些麻煩，document對象中提供了直接搜索文檔中指定元素的方法，具體如下。1.3JavaScript基礎(chǔ)1．節(jié)點的訪問1.3JavaScript基礎(chǔ)（1）通過元素的id屬性獲取元素Document的getElementById()方法可以通過元素的id屬性獲取元素。例如，獲取id屬性值為userId節(jié)點的代碼如下所示：（2）通過元素的name屬性獲取元素Document的getElementsByName()方法可以通過元素的name屬性獲取元素。由于多個元素可能有相同的name值，所以該方法返回值為一個數(shù)組，而不是一個元素。如果想獲得唯一的元素，可以通過獲取返回數(shù)組中下標(biāo)值為0的元素進行獲取。例如，獲取name值為userName節(jié)點的代碼如下所示：1.3JavaScript基礎(chǔ)（1）通過元素的id屬性獲取元素1.3JavaScriptJavaScript是Web中一種功能強大的腳本語言，被設(shè)計為向HTML頁面增加交互性，常用來為網(wǎng)頁添加各式各樣的動態(tài)功能，它不需要進行編譯，直接嵌入在HTML頁面中，就可以把靜態(tài)的頁面轉(zhuǎn)變成支持用戶交互并響應(yīng)事件的動態(tài)頁面。1．JavaScript的引入在HTML文檔中，較為常用的引入JavaScript的方式有兩種，一種是在HTML文檔中直接嵌入JavaScript腳本，稱為內(nèi)嵌式；另一種是鏈接外部JavaScript腳本文件，稱為外鏈?zhǔn)健＞唧w介紹如下：JavaScript概述1.3JavaScript基礎(chǔ)JavaScript是Web中一種功能強大的腳本語言，被設(shè)計（1）內(nèi)嵌式在HTML文檔中，通過<script></script>標(biāo)簽及其相關(guān)屬性可以引入JavaScript代碼。當(dāng)瀏覽器讀取到<script>標(biāo)簽時，就會解釋執(zhí)行其中的腳本。JavaScript的內(nèi)嵌式的使用方式如下：在上述代碼中，type屬性用來指定HTML文檔引用的腳本語言類型，當(dāng)type屬性的值為text/javascript時，表示<script></script>元素中包含的是JavaScript腳本。需要注意的是，在老舊的瀏覽器中，引入javascript腳本時type=”text/javascript”是必須編寫的，但現(xiàn)在已經(jīng)可以不使用了，因為JavaScript是所有現(xiàn)代瀏覽器以及HTML5中的默認(rèn)腳本語言。1.3JavaScript基礎(chǔ)（1）內(nèi)嵌式1.3JavaScript基礎(chǔ)JavaScript中有三種彈出對話框的方式，分別是使用alert()、confirm()以及prompt()。由于篇幅有限，這里將不單獨介紹這三種方法的具體使用方式，在方法具體使用時再做介紹。如果不想使用彈出對話框，也可使用document.write()方法直接將信息顯示在頁面上。

了解了一些簡單的JavaScript知識后，接下來，通過一個具體的案例來演示如何在HTML文檔中使用內(nèi)嵌式JavaScript，請查看教材文件1-12。案例代碼1.3JavaScript基礎(chǔ)JavaScript中有三種彈出對話框的方式，分別是使用al（2）外鏈?zhǔn)疆?dāng)腳本代碼比較復(fù)雜或者同一段代碼需要被多個網(wǎng)頁文件使用時，可以將這些腳本代碼放置在一個擴展名為.js的文件中，然后通過外鏈?zhǔn)揭朐搄s文件。在Web頁面中使用外鏈?zhǔn)揭隞avaScript文件的方式如下：

接下來，通過修改文件1-12，來演示如何在HTML文件中通過外鏈?zhǔn)揭隞avaScript，請查看教材文件1-13。案例代碼1.3JavaScript基礎(chǔ)（2）外鏈?zhǔn)浇酉聛恚ㄟ^修改文件1-12，來演2．?dāng)?shù)據(jù)類型JavaScript中的幾種常見數(shù)據(jù)類型如表所示。3．變量在JavaScript中，使用var命令聲明變量，由于JavaScript是一種弱類型語言，所以在聲明變量時，不需要指定變量的類型，變量的類型將根據(jù)變量的賦值來確定，其語法格式如下所示。1.3JavaScript基礎(chǔ)2．?dāng)?shù)據(jù)類型1.3JavaScript基礎(chǔ)變量的命名必須遵循命名規(guī)則，變量名可以由字母、下劃線（_）、美元符號（$），甚至中文組成，但中文命名的方式不建議使用，中間可以是數(shù)字、字母或下劃線，但是不能有空格、加號、減號等符號，不能使用JavaScript的關(guān)鍵字。JavaScript中的關(guān)鍵字如下所示：需要注意的是，以上關(guān)鍵字同樣不可以用作函數(shù)名、對象名及自定義的方法名等。1.3JavaScript基礎(chǔ)變量的命名必須遵循命名規(guī)則，變量名可以由字母、下劃線（_）、4．運算符運算符是程序執(zhí)行特定算術(shù)或操作的符號，用于執(zhí)行程序代碼運算。JavaScript中的運算符主要包括算術(shù)運算符、比較運算符、賦值運算符、邏輯運算符和條件運算符5種，具體介紹如下。（1）算術(shù)運算符

算術(shù)運算符用于連接運算表達式，主要包括加（+）、減（-）、乘（*）、除（/）、取模（%）、自增（++）、自減（--）等運算符，如表所示。1.3JavaScript基礎(chǔ)4．運算符1.3JavaScript基礎(chǔ)（2）比較運算符比較運算符在邏輯語句中使用，用于判斷變量或值是否相等。返回布爾類型值true或false，常用的比較運算符如表所示。1.3JavaScript基礎(chǔ)（2）比較運算符1.3JavaScript基礎(chǔ)（3）邏輯運算符邏輯運算符是根據(jù)表達式的值來返回真值或假值，常用的邏輯運算符如表所示。1.3JavaScript基礎(chǔ)（3）邏輯運算符1.3JavaScript基礎(chǔ)（4）賦值運算符最基本的賦值運算符是等于號“=”，用于對變量進行賦值。其他運算符可以和賦值運算符聯(lián)合使用，構(gòu)成組合賦值運算符。如表所示。1.3JavaScript基礎(chǔ)（4）賦值運算符1.3JavaScript基礎(chǔ)（5）條件運算符條件運算符是JavaScript中的一種特殊的三目運算符，它與Java中的三目運算符的使用類似，其語法格式如下。如果操作數(shù)的值為true，則整個表達式的結(jié)果為“結(jié)果1”，否則為“結(jié)果2”。其示例代碼如下所示。在上述js代碼中，由于聲明的變量a和b的值相同，所以通過使用比較運算符“==”的比較結(jié)果為true，此時整個alert()語句的結(jié)果就為true；如果變量a與b的值不相等時，則整個語句的執(zhí)行結(jié)果為false。1.3JavaScript基礎(chǔ)（5）條件運算符1.3JavaScript基礎(chǔ)5．條件語句if所謂條件語句就是對語句中不同條件的值進行判斷，進而根據(jù)不同的條件執(zhí)行不同的語句。條件語句中最常用的是if判斷語句，它的使用與Java語言中的if判斷語句相似，是通過判斷條件表達式的值為true或者false，來確定是否執(zhí)行某一條語句。可將if語句分為單向判斷語句、雙向判斷語句和多向判斷語句，具體講解如下。（1）單向判斷語句單向判斷語句是結(jié)構(gòu)最簡單的條件語句，如果程序中存在絕對不執(zhí)行某些指令的情況，就可以使用單向判斷語句，其語法格式如下：1.3JavaScript基礎(chǔ)5．條件語句if1.3JavaScript基礎(chǔ)在上面的語法結(jié)構(gòu)中，if可以理解為“如果”，小括號“()”內(nèi)用于指定if語句中的執(zhí)行條件，大括號“{}”內(nèi)用于指定滿足執(zhí)行條件后需要執(zhí)行的語句，當(dāng)執(zhí)行語句只有一行時，也可以不寫{}。（2）雙向判斷語句雙向判斷語句是if條件語句的基礎(chǔ)形式，其基本語法格式如下：雙向判斷語句的語法格式和單向判斷語句類似，只是在其基礎(chǔ)上增加了一個else從句。表示如果條件成立則執(zhí)行“語句1”，否則，則執(zhí)行“語句2”。1.3JavaScript基礎(chǔ)在上面的語法結(jié)構(gòu)中，if可以理解為“如果”，小括號“()”內(nèi)

（3）多向判斷語句多向判斷語句是根據(jù)表達式的結(jié)果判斷一個條件，然后根據(jù)返回值做進一步的判斷，其基本語法格式如下：在多向判斷語句的語法中，通過elseif語句可以對多個條件進行判斷，并且根據(jù)判斷的結(jié)果執(zhí)行相關(guān)的語句。1.3JavaScript基礎(chǔ)（3）多向判斷語句1.3JavaScript基礎(chǔ)1．函數(shù)的定義及調(diào)用在JavaScript中，定義函數(shù)是通過function語句實現(xiàn)的。其語法格式如下：在上述語法中，functionName是必選項，用于指定函數(shù)名，在同一個頁面中，函數(shù)名必須是唯一的，并且區(qū)分大小寫；parameter1,parameter2,…是可選項，代表參數(shù)列表，當(dāng)使用多個參數(shù)時，參數(shù)間使用逗號進行分隔，一個函數(shù)最多可以有255個參數(shù)；statements是必選項，代表用于實現(xiàn)函數(shù)功能的語句；returnexpression是可選項，用于返回函數(shù)值，expression為任意表達式、變量或常量。JavaScript的使用1.3JavaScript基礎(chǔ)1．函數(shù)的定義及調(diào)用JavaScript的使用1.3Jav在JavaScript中，由于函數(shù)區(qū)分大小寫，所以在調(diào)用函數(shù)時需要注意函數(shù)名稱大小寫。不帶參數(shù)的函數(shù)使用函數(shù)名加上括號即可調(diào)用，帶參數(shù)的函數(shù)需要根據(jù)參數(shù)的個數(shù)和類型在括號中傳遞相應(yīng)的參數(shù)進行調(diào)用。如果函數(shù)有返回值，可以使用賦值語句將函數(shù)值賦給一個變量進行返回。2．事件處理采用事件驅(qū)動是JavaScript語言的一個最基本的特征，所謂的事件是指用戶在訪問頁面時執(zhí)行的操作。當(dāng)瀏覽器探測到一個事件時，比如，單擊鼠標(biāo)或按鍵，它可以觸發(fā)與這個事件相關(guān)聯(lián)的事件處理程序。事件處理的過程通常分為三步：發(fā)生事件、啟動事件處理程序和事件處理程序作出反應(yīng)。1.3JavaScript基礎(chǔ)在JavaScript中，由于函數(shù)區(qū)分大小寫，所以在調(diào)用函數(shù)值得一提的是，在上面的事件處理過程中，要想事件處理程序能夠啟動，就需要調(diào)用事件處理程序，事件處理程序可以是任意JavaScript語句，但通常使用特定的自定義函數(shù)（Function）來對事件進行處理。除onclick事件外，JavaScript中還有很多常用的事件類型，如下表所示。

接下來通過一個案例來演示如何在HTML中調(diào)用事件處理程序，請查看教材文件1-14。案例代碼1.3JavaScript基礎(chǔ)值得一提的是，在上面的事件處理過程中，要想事件處理程序能夠啟3．常用對象（1）window對象window對象表示整個瀏覽器窗口，它處于對象層次的頂端，可用于獲取瀏覽器窗口的大小、位置，或設(shè)置定時器等。在使用時，JavaScript允許省略window對象的名稱。window對象常用的屬性和方法如表所示。1.3JavaScript基礎(chǔ)3．常用對象1.3JavaScript基礎(chǔ)（2）Date對象Date對象是一個有關(guān)日期和時間的對象。它具有動態(tài)性，必須使用new關(guān)鍵字創(chuàng)建一個實例，語法如下所示。Date對象沒有提供直接訪問的屬性，只有獲取和設(shè)置日期的方法，如表所示。1.3JavaScript基礎(chǔ)（2）Date對象1.3JavaScript基礎(chǔ)（3）String對象String對象是JavaScript提供的字符串處理對象，創(chuàng)建對象實例后才能引用，它提供了對字符串進行處理的屬性和方法，具體如表所示：1.3JavaScript基礎(chǔ)（3）String對象1.3JavaScript基礎(chǔ)任務(wù)案例案例代碼接下來，通過傳智書城首頁的設(shè)計來熟悉本階段的知識點，請查看教材【任務(wù)1-1】。【任務(wù)1-1】傳智書城首頁設(shè)計任務(wù)案例案例代碼接下來，通過傳智書城首頁的設(shè)計來熟悉任務(wù)案例案例代碼接下來，通過傳智書城注冊頁面的設(shè)計來熟悉本階段的知識點，請查看教材【任務(wù)1-2】。【任務(wù)1-1】傳智書城首頁設(shè)計任務(wù)案例案例代碼接下來，通過傳智書城注冊頁面的設(shè)計來

本章主要介紹了HTML技術(shù)、CSS技術(shù)和JavaScript技術(shù)的基礎(chǔ)知識，然后使用這些技術(shù)完成階段案例-傳智書城首頁和注冊頁面的實現(xiàn)。通過本章的學(xué)習(xí)，讀者可以對HTML+CSS+JavaScript的基礎(chǔ)有個大致的了解，并且能夠?qū)W會這些技術(shù)在開發(fā)時如何使用。1.4本章小結(jié)本章主要介紹了HTML技術(shù)、CSS技術(shù)和JavaJava-Web程序設(shè)計任務(wù)教程第1章-網(wǎng)頁開發(fā)課件第一章網(wǎng)頁開發(fā)基礎(chǔ)HTML的常用標(biāo)記JavaScript的使用CSS選擇器和常用屬性傳智書城首頁和注冊頁面設(shè)計第一章網(wǎng)頁開發(fā)基礎(chǔ)HTML的常用標(biāo)記CSS選擇器和常用屬性掌握HTML+CSS+JavaScript的開發(fā)基礎(chǔ)13熟悉CSS選擇器和常用屬性2熟悉HTML的常用標(biāo)記掌握熟悉熟悉學(xué)習(xí)目標(biāo)掌握HTML+CSS+13熟悉CSS選擇器和常用1.1HTML技術(shù)1.2CSS技術(shù)1.3JavaScript基礎(chǔ)1.4階段案例：傳智書城注冊頁面設(shè)計?點擊查看本小節(jié)知識架構(gòu)?點擊查看本小節(jié)知識架構(gòu)?點擊查看本小節(jié)知識架構(gòu)?點擊查看本小節(jié)知識架構(gòu)目錄1.1HTML技術(shù)1.2CSS技術(shù)1.3JavaScript返回目錄1.1HTML技術(shù)1.1.11.1.21.1.31.1.41.1.51.1.61.1.71.1.8HTML簡介單標(biāo)記和雙標(biāo)記文件控制與文本樣式標(biāo)記圖像標(biāo)記表格標(biāo)記表單標(biāo)記列表標(biāo)記和超鏈接標(biāo)記<div>標(biāo)記知識架構(gòu)返回目錄1.1HTML技術(shù)1.1.11.1.21.1.31返回目錄1.2.11.2.21.2.3簡介CSS樣式的引用方式CSS選擇器和常用屬性1.2CSS技術(shù)知識架構(gòu)返回目錄1.2.11.2.21.2.3簡介CSS樣式的引用方返回目錄1.3.11.3.21.3.3DOM相關(guān)知識JavaScript概述JavaScript的使用1.3JavaScript基礎(chǔ)知識架構(gòu)返回目錄1.3.11.3.21.3.3DOM相關(guān)知識Java返回目錄【任務(wù)1-1】傳智書城首頁設(shè)計【任務(wù)1-2】傳智書城注冊頁面設(shè)計1.4JavaScript基礎(chǔ)知識架構(gòu)返回目錄【任務(wù)1-1】傳智書城首頁設(shè)計【任務(wù)1-2】傳智書城HTML是英文HyperTextMarkupLanguage的縮寫，中文譯為“超文本標(biāo)記語言”，其主要作用是通過HTML標(biāo)記對網(wǎng)頁中的文本、圖片、聲音等內(nèi)容進行描述。HTML網(wǎng)頁就是一個后綴名為“.html”或“.htm”的文件，它可以用記事本打開，所以簡單的html代碼可以在記事本中編寫。編寫完成后，將文件后綴名修改為“.html”即可生成一個HTML網(wǎng)頁。在實際開發(fā)中，項目的靜態(tài)頁面通常由專門的網(wǎng)頁制作人員設(shè)計，開發(fā)人員只需了解頁面元素，能夠使用和修改頁面中的元素，并在項目運行時能夠展示出相應(yīng)的后臺數(shù)據(jù)即可。網(wǎng)頁制作人員通常會使用一些專業(yè)軟件來創(chuàng)建HTML頁面，由于本教材中，HTML技術(shù)只作為JavaWeb學(xué)習(xí)的輔助技術(shù)，所以這里不會詳細(xì)介紹如何使用專業(yè)工具制作網(wǎng)頁，只需要讀者了解頁面元素的構(gòu)成，會調(diào)試基本的頁面效果即可。HTML簡介1.1HTML技術(shù)HTML是英文HyperTextMarkupLangu

了解了什么是HTML后，接下來通過一個基本的HTML文檔來講解其內(nèi)部的構(gòu)成，請查看教材文件1-1。案例代碼1.1HTML技術(shù)了解了什么是HTML后，接下來通過一個基本的H<!DOCTYPE>標(biāo)記<!DOCTYPE>標(biāo)記位于文檔的最前面，用于向瀏覽器說明當(dāng)前文檔使用哪種HTML標(biāo)準(zhǔn)規(guī)范，如文件1-1中使用的是HTML4.01版本。網(wǎng)頁必需在開頭處使用<!DOCTYPE>標(biāo)記為所有的HTML文檔指定HTML版本和類型，只有這樣瀏覽器才能將該網(wǎng)頁作為有效的HTML文檔，并按指定的文檔類型進行解析。<!DOCTYPE>標(biāo)記和瀏覽器的兼容性相關(guān)，刪除<!DOCTYPE>后，會把如何展示HTML頁面的權(quán)利交給瀏覽器，這時，有多少種瀏覽器，頁面就有可能有多少種顯示效果，在實際開發(fā)中，這是不被允許的。<html>標(biāo)記<html>標(biāo)記位于<!DOCTYPE>標(biāo)記之后，也稱為根標(biāo)記，用于告知瀏覽器其自身是一個HTML文檔，<html>標(biāo)記標(biāo)志著HTML文檔的開始，</html>標(biāo)記標(biāo)志著HTML文檔的結(jié)束，在他們之間的是文檔的頭部和主體內(nèi)容。1.1HTML技術(shù)<!DOCTYPE>標(biāo)記1.1HTML技術(shù)<head>標(biāo)記<head>標(biāo)記用于定義HTML文檔的頭部信息，也稱為頭部標(biāo)記，緊跟在<html>標(biāo)記之后，主要用來封裝其他位于文檔頭部的標(biāo)記，例如<title>、<meta>、<link>及<style>等，其中<title>標(biāo)記用來描述文檔的標(biāo)題，<meta>標(biāo)記可提供有關(guān)頁面的元信息，<link>標(biāo)記用于定義文檔與外部資源的關(guān)系，其最常見的用途是鏈接樣式表，<style>標(biāo)記用于為HTML文檔定義樣式信息。一個HTML文檔只能含有一對<head>標(biāo)記，絕大多數(shù)文檔頭部包含的數(shù)據(jù)都不會真正作為內(nèi)容顯示在頁面中。<body>標(biāo)記<body>標(biāo)記用于定義HTML文檔所要顯示的內(nèi)容，也稱為主體標(biāo)記。瀏覽器中顯示的所有文本、圖像、音頻和視頻等信息都必須位于<body>標(biāo)記內(nèi)，<body>標(biāo)記中的信息才是最終展示給用戶看的。一個HTML文檔只能含有一對<body>標(biāo)記，且<body>標(biāo)記必須在<html>標(biāo)記內(nèi)，位于<head>頭部標(biāo)記之后，與<head>標(biāo)記是并列關(guān)系。1.1HTML技術(shù)<head>標(biāo)記1.1HTML技術(shù)

了解了文件1-1中的HTML標(biāo)記后，接下來講解一下HTML文件的創(chuàng)建以及運行，請查看教材1.1.1小節(jié)。案例代碼要資源？搶紅包？找播妞！QQ、微信：2086958271.1HTML技術(shù)了解了文件1-1中的HTML標(biāo)記后，接下來講解不同標(biāo)記描述的內(nèi)容在瀏覽器中的顯示效果是不一樣的。頁面中的信息，必須放在相應(yīng)的HTML標(biāo)記中，才能被瀏覽器正確解析。大部分標(biāo)記都是成對出現(xiàn)的，如頭部標(biāo)記<head>、主體標(biāo)記<body>，然而也有單個出現(xiàn)的標(biāo)記，如水平線標(biāo)記<hr/>。通常將HTML標(biāo)記分為兩大類，分別是“單標(biāo)記”與“雙標(biāo)記”，對這兩個標(biāo)記的具體介紹如下：1．單標(biāo)記單標(biāo)記也稱空標(biāo)記，是指用一個標(biāo)記符號即可完整地描述某個功能的標(biāo)記。其基本語法格式如下：單標(biāo)記和雙標(biāo)記1.1HTML技術(shù)不同標(biāo)記描述的內(nèi)容在瀏覽器中的顯示效果是不一樣的。頁面中的信例如標(biāo)記<hr/>就是單標(biāo)記，該標(biāo)記用于定義一條水平線。需要注意的是，在標(biāo)記名與“/”之間有一個空格，雖然在顯示效果上有沒有空格都一樣，但是按照規(guī)范的要求，建議加上空格。2．雙標(biāo)記雙標(biāo)記也稱體標(biāo)記，是指由開始和結(jié)束兩個標(biāo)記符組成的標(biāo)記。其基本語法格式如下：在上述的語法中，<標(biāo)記名>表示該標(biāo)記的作用開始，一般稱為開始標(biāo)記（starttag），</標(biāo)記名>表示該標(biāo)記的作用結(jié)束，一般稱為結(jié)束標(biāo)記（endtag），和開始標(biāo)記相比，結(jié)束標(biāo)記只是在前面加了一個關(guān)閉符“/”。例如文件1-1中的<html></html>、<head></head>等都是雙標(biāo)記。1.1HTML技術(shù)例如標(biāo)記<hr/>就是單標(biāo)記，該標(biāo)記用于定義一條水平線。需多學(xué)一招：為什么要有單標(biāo)記？HTML標(biāo)記的作用原理就是選擇網(wǎng)頁內(nèi)容，從而進行描述，也就是說需要描述誰，就選擇誰，所以才會有雙標(biāo)記的出現(xiàn)，用于定義標(biāo)記作用的開始與結(jié)束。而單標(biāo)記本身就可以描述一個功能，不需要選擇誰，例如水平線標(biāo)記<hr/>,按照雙標(biāo)記的語法，它應(yīng)該寫成“<hr></hr>”，但是水平線標(biāo)記不需要選擇誰，它本身就代表一條水平線，此時寫成雙標(biāo)記就顯得有點多余，但是又不能沒有結(jié)束符號。所以單標(biāo)記的語法格式就是在標(biāo)記名稱后面加一個關(guān)閉符，即為<標(biāo)記名/>。多學(xué)一招多學(xué)一招：為什么要有單標(biāo)記？多學(xué)一招1．段落標(biāo)記<p></p>和換行標(biāo)記<br/>為了使網(wǎng)頁中的文字有條理地顯示出來，HTML提供了段落標(biāo)記<p></p>，如果希望某段文本強制換行顯示，就需要使用換行標(biāo)記<br/>。2．文本樣式標(biāo)記在HTML中，使用<font>標(biāo)記來控制網(wǎng)頁中文本的樣式，如字體、字號和顏色。其基本語法格式如下：

接下來通過案例來演示<p>、<br/>和<font>三個種標(biāo)記的使用，請查看教材文件1-2和1-3。案例代碼1.1HTML技術(shù)1．段落標(biāo)記<p></p>和換行標(biāo)記<br/>要想在HTML網(wǎng)頁中顯示圖像就需要使用圖像標(biāo)記<img/>。其基本的語法格式如下：在上述的語法中，src屬性用于指定圖像文件的路徑，該屬性是<img/>標(biāo)記的必需屬性。要想在網(wǎng)頁中靈活地應(yīng)用<img/>標(biāo)記，只使用src屬性是不行的，還需要其他屬性的配合。圖像標(biāo)記

接下來通過一個案例來演示<img/>標(biāo)記的用法，請查看教材文件1-4。案例代碼1.1HTML技術(shù)要想在HTML網(wǎng)頁中顯示圖像就需要使用圖像標(biāo)記<img/>在制作網(wǎng)頁時，為了使網(wǎng)頁中的數(shù)據(jù)能夠有條理地顯示，可以使用表格對網(wǎng)頁進行規(guī)劃。在Word文檔中，要創(chuàng)建表格只需要插入表格，而在HTML網(wǎng)頁中要想創(chuàng)建表格，需要使用相關(guān)的表格標(biāo)記才能創(chuàng)建表格。在HTML網(wǎng)頁中創(chuàng)建表格的基本語法格式如下所示：在上述的語法中，包含三對HTML標(biāo)記，分別為<table></table>、<tr></tr>、<td></td>，它們是創(chuàng)建表格的基本標(biāo)記，缺一不可。<table></table>用于定義一個表格，<tr></tr>用于定義表格中的行，必須嵌套在<table></table>標(biāo)記中，<td></td>用于定義表格中的單元格，也可稱為表格中的列，必須嵌套

在<tr></tr>標(biāo)記中。表格標(biāo)記1.1HTML技術(shù)在制作網(wǎng)頁時，為了使網(wǎng)頁中的數(shù)據(jù)能夠有條理地顯示，可以使用表

接下來，通過一個案例來演示<table>標(biāo)記的使用，請查看教材文件1-5。案例代碼1.1HTML技術(shù)接下來，通過一個案例來演示<table>標(biāo)記的學(xué)習(xí)表單標(biāo)記之前，首先需要理解表單的概念。簡單的說，表單就是在網(wǎng)頁上用于輸入信息的區(qū)域，它的主要功能是收集用戶信息，并將這些信息傳遞給后臺服務(wù)器。其實表單在互聯(lián)網(wǎng)上隨處可見，例如注冊頁面中的用戶名和密碼輸入、性別選擇、提交按鈕等都是用表單中的相關(guān)標(biāo)記定義的。。表單主要由3部分構(gòu)成，分別為表單控件、提示信息和表單域，詳細(xì)介紹如下所示：表單控件：包含了具體的表單功能項，如單行文本輸入框、密碼輸入框、復(fù)選框提交按鈕等。提示信息：一個表單中通常還需要包含一些說明性的文字即表單控件前的文字說明，用于提示用戶進行填寫和操作。表單域：它相當(dāng)于一個容器，用來容納所有的表單控件和提示信息。表單標(biāo)記1.1HTML技術(shù)學(xué)習(xí)表單標(biāo)記之前，首先需要理解表單的概念。簡單的說，表單就是1．創(chuàng)建表單在HTML中，<form>標(biāo)記用于定義表單域，即創(chuàng)建一個表單，其基本語法如下所示：在上述的語法中，action、method、name為<form>標(biāo)記的常用屬性，action屬性用于指定表單提交的地址，例如action="login.jsp"表示表單數(shù)據(jù)會提交到名為login.jsp的頁面去處理。method屬性用于設(shè)置表單數(shù)據(jù)的提交方式，其取值為GET或POST，其中，GET為默認(rèn)值，這種方式提交的數(shù)據(jù)將顯示在瀏覽器的地址欄中，保密性差且有數(shù)據(jù)量限制，而使用POST提交方式不但保密性好，還可以提交大量的數(shù)據(jù)，所以開發(fā)中通常使用POST方式提交表單。1.1HTML技術(shù)1．創(chuàng)建表單1.1HTML技術(shù)2．表單控件<input>瀏覽網(wǎng)頁時經(jīng)常會看到單行文本輸入框、單選按鈕、復(fù)選框、重置按鈕等，使用<input/>控件可以在表單中定義這些元素，其基本語法格式如下：在上述語法中type屬性為其最基本的屬性，取值有多種，用來指定不同的控件類型。除type屬性外，<input/>控件還可以定義很多其他屬性，其中，比較常用的如id、name、value、size，它們分別用來指定input控件的ID值、名稱、控件中的默認(rèn)值和控件在頁面中的顯示寬度。

接下來通過一個案例來演示<input/>控件的使用，請查看教材文件8-1。案例代碼1.1HTML技術(shù)2．表單控件<input>接下來通過一個案例來演多學(xué)一招：HTML的多行文本標(biāo)記通過前面的學(xué)習(xí)可知，使用<input/>標(biāo)記可以定義單行文本輸入框。但是，如果需要輸入大量的文本信息，單行文本框?qū)o法顯示全部的輸入信息，為此HTML語言提供了<textarea></textarea>標(biāo)記。通過此標(biāo)記可以創(chuàng)建多行文本框，其基本語法格式如下。

接下來通過一個案例來演示<textarea></textarea>標(biāo)記的使用，請查看教材文件8-1。案例代碼多學(xué)一招多學(xué)一招：HTML的多行文本標(biāo)記接下來通過一個1．無序列表<ul>列表標(biāo)記分為有序列表和無序列表，由于在HTML中無序列表較為常用，所以下面針對無序列表進行詳細(xì)的講解。為了使網(wǎng)頁更易讀，經(jīng)常將網(wǎng)頁信息以列表的形式呈現(xiàn)，例如淘寶商城首頁的商品分類就是以列表的形式呈現(xiàn)的。無序列表的各個列表項之間沒有順序級別之分，通常是并列的。定義無須列表的基本語法格式如下所示。在上述的語法中，<ul></ul>標(biāo)記用于定義無序列表，<li></li>標(biāo)記嵌套在<ul></ul>標(biāo)記中，用于描述具體的列表項，每對<ul></ul>中至少應(yīng)包含一對<li></li>。列表標(biāo)記和超鏈接標(biāo)記1.1HTML技術(shù)1．無序列表<ul>列表標(biāo)記和超鏈接標(biāo)記1.1HTML技術(shù)2．超鏈接標(biāo)記

一個網(wǎng)站通常由多個頁面構(gòu)成，進入網(wǎng)站時首先看到的是其首頁面，如果想從首頁面跳轉(zhuǎn)到子頁面，就需要在首頁面的相應(yīng)位置添加超鏈接。在HTML中創(chuàng)建超鏈接非常簡單，只需用<a></a>標(biāo)記環(huán)繞需要被鏈接的對象即可。其基本語法格式如下所示。在上述語法中，<a></a>標(biāo)記是一個行內(nèi)標(biāo)記，用于定義超鏈接，href屬性用于指定鏈接指向的頁面的URL，當(dāng)在<a></a>標(biāo)記中使用href屬性時，該標(biāo)記就具有了超鏈接的功能；target屬性用于指定頁面的打開方式，其取值有_self和_blank，其中_self為默認(rèn)值，意為在原窗口打開，_blank為在新窗口打開。接下來通過一個案例來演示<a></a>標(biāo)記的使用。1.1HTML技術(shù)2．超鏈接標(biāo)記1.1HTML技術(shù)

接下來通過一個案例來演示<ul></ul>標(biāo)記和<a></a>標(biāo)記的使用，請查看教材文件1-8和1-9。案例代碼1.1HTML技術(shù)接下來通過一個案例來演示<ul></ul>標(biāo)記div是英文DIVision的縮寫，意為“分割、區(qū)域”。<div>標(biāo)記簡單而言就是一個區(qū)塊容器標(biāo)記，可以將網(wǎng)頁分割為獨立的、不同的部分，以實現(xiàn)網(wǎng)頁的規(guī)劃和布局。在HTML頁面中，它以<div>開頭，并以</div>結(jié)尾，在<div>與</div>之間可以容納段落、標(biāo)題、圖像等各種網(wǎng)頁元素，也就是說大多數(shù)HTML標(biāo)記都可以嵌套在<div>標(biāo)記中，并且<div>還可以嵌套多層<div>。在實際開發(fā)中<div>標(biāo)記常常與CSS技術(shù)搭配使用，在下一小節(jié)講解CSS技術(shù)的過程中會對<div>標(biāo)記的使用進行舉例，這里不多贅述。<div>標(biāo)記1.1HTML技術(shù)div是英文DIVision的縮寫，意為“分割、區(qū)域”。<dCSS是CascadingStyleSheet的縮寫，譯作“層疊樣式表單”，是用于(增強)控制網(wǎng)頁樣式并允許將樣式信息與網(wǎng)頁內(nèi)容分離的一種標(biāo)記性語言。在實際開發(fā)中，主要用于設(shè)置HTML頁面中的文本內(nèi)容（字體、大小、對齊方式等）、圖片的外形（寬高、邊框樣式、邊距等）以及版面的布局等外觀顯示樣式。CSS定義的規(guī)則具體如下：在上述的樣式規(guī)則中，選擇器用于指定CSS樣式作用的HTML對象，花括號內(nèi)的屬性是對該對象設(shè)置的具體樣式。其中，屬性和屬性值以“鍵值對”的形式出現(xiàn)，例如字體大小、文本顏色等。屬性和屬性值之間用“:”（英文冒號）連接，多個“鍵值對”之間用“;”（英文分號）進行分隔。簡介1.1HTML技術(shù)CSS是CascadingStyleSheet的縮接下來通過CSS樣式對<div>標(biāo)記進行設(shè)置，具體示例如下：上面的代碼就是一個完整的CSS樣式。其中，div為選擇器，表示CSS樣式作用的HTML對象，border、width和height為CSS屬性，分別表示邊框、寬度和高度，其中border屬性有3個值“1pxsolidred;”分別表示該邊框為1像素、實心邊框線、紅色。在CSS中，通常使用像素單位px作為計量文本、邊框等元素的標(biāo)準(zhǔn)量，px是相對于顯示器屏幕分辨率而言的。而百分比（%）是相對于父對象而言的，例如一個元素呈現(xiàn)的寬度是400px，子元素設(shè)置為50%，那么子元素所呈現(xiàn)的寬度為200px。1.1HTML技術(shù)接下來通過CSS樣式對<div>標(biāo)記進行設(shè)置，具體示例如下：在CSS中顏色的取值方式有3種：預(yù)定義的顏色值：如red、green、blue等。十六進制：如#FF0000、#FF6600、#29D794等。實際工作中，十六進制是最常用的定義顏色的方式。RGB代碼：如紅色可以用rgb(255,0,0)或rgb(100%,0%,0%)來表示。如果使用RGB代碼百分比方式取顏色值時，即使值為0，也不能省略百分號，必須寫為0%。1.2CSS技術(shù)在CSS中顏色的取值方式有3種：1.2CSS技術(shù)要想使用CSS修飾網(wǎng)頁，就需要在HTML文檔中引入CSS。引入CSS的方式有4種，分別為鏈入式、行內(nèi)式（也稱為內(nèi)聯(lián)樣式）、內(nèi)嵌式和導(dǎo)入式。下面對開發(fā)中常用的內(nèi)嵌式和鏈入式這2種引入方式進行講解，具體如下：1．內(nèi)嵌式內(nèi)嵌式是將CSS代碼集中寫在HTML文檔的<head>頭部標(biāo)記中，并用<style>標(biāo)記定義，其基本語法格式如下：CSS樣式的引用方式1.2CSS技術(shù)要想使用CSS修飾網(wǎng)頁，就需要在HTML文檔中引入CSS。引在上述語法中，<style>標(biāo)記一般位于<head>標(biāo)記中的<title>標(biāo)記之后，因為瀏覽器是從上到下解析代碼的，把CSS代碼放在頭部便于提前被加載和解析，以避免網(wǎng)頁內(nèi)容加載后沒有樣式修飾帶來的問題。同時，必須設(shè)置type的屬性值為“text/css”，這樣瀏覽器才知道<style>標(biāo)記包含的是CSS代碼。

接下來通過一個案例來學(xué)習(xí)如何在HTML文件中使用內(nèi)嵌式加入CSS，請查看教材文件1-10。案例代碼1.2CSS技術(shù)在上述語法中，<style>標(biāo)記一般位于<head>標(biāo)記中的2．鏈入式鏈入式是將所有的樣式放在一個或多個以.css為擴展名的外部樣式表文件中，通過<link/>標(biāo)記將外部樣式表文件鏈接到HTML文件中，其基本語法格式如下：在上面語法中，<link/>標(biāo)記需要放在<head>頭部標(biāo)記中，并且必須指定<link/>標(biāo)記的三個屬性，具體如下：href：定義所鏈接外部樣式表文件的地址，可以是相對路徑，也可以是絕對路徑。type：定義所鏈接文檔的類型，這里需要指定為“text/css”，表示鏈接的外部文件為CSS。rel：定義當(dāng)前文檔與被鏈接文檔之間的關(guān)系，這里需要指定為“stylesheet”，表示被鏈接的文檔是一個樣式表文件。1.2CSS技術(shù)2．鏈入式1.2CSS技術(shù)

接下來通過修改文件1-10來演示鏈入式CSS的引用方式，請查看教材1.2.2小計。案例代碼1.2CSS技術(shù)接下來通過修改文件1-10來演示鏈入式CSS要想將CSS樣式應(yīng)用于特定的HTML元素，首先需要找到該目標(biāo)元素。在CSS中，執(zhí)行這一樣式任務(wù)的部分被稱為選擇器。1．標(biāo)記選擇器標(biāo)記選擇器是指用HTML標(biāo)記名稱作為選擇器，按標(biāo)記名稱分類，為頁面中某一類標(biāo)記指定統(tǒng)一的樣式。其基本語法格式如下：上述語法中，所有的HTML標(biāo)記都可以作為標(biāo)記選擇器的標(biāo)記名，例如<body>標(biāo)記、<h1>標(biāo)記、<p>標(biāo)記等。用標(biāo)記選擇器定義的樣式對頁面中該類型的所有標(biāo)記都有效，這是它的優(yōu)點，但同時這也是其缺點，因為這樣不

能設(shè)計差異化樣式。CSS選擇器和常用屬性1.2CSS技術(shù)要想將CSS樣式應(yīng)用于特定的HTML元素，首先需要找到該目標(biāo)2．類選擇器類選擇器使用“.”（英文點號）進行標(biāo)識，后面緊跟類名，語法格式如下：上述語法中，類名即為HTML頁面中元素的class屬性值，大多數(shù)HTML元素都可以定義class屬性。類選擇器最大的優(yōu)勢是可以為元素對象定義單獨或相同的樣式。3．id選擇器id選擇器使用“#”進行標(biāo)識，后面緊跟id名，其基本語法格式如下：上述語法中，id名即為HTML頁面中元素的id屬性值，大多數(shù)HTML元素都可以定義id屬性，元素的id值是唯一的，只能對應(yīng)于文檔中某一個具體的元素。1.2CSS技術(shù)2．類選擇器1.2CSS技術(shù)4．通配符選擇器通配符選擇器用“*”號表示，它是所有選擇器中作用范圍最廣的，能匹配頁面中所有的元素。其基本語法格式如下：例如下面使用通配符選擇器定義的樣式，該樣式能夠清除所有HTML標(biāo)記的默認(rèn)邊距。如下所示：在實際網(wǎng)頁開發(fā)中，不建議使用通配符選擇器，因為它設(shè)置的樣式對所有的HTML標(biāo)記都生效，這是其優(yōu)點也是其缺點，因為這樣不能設(shè)計差異化樣式。1.2CSS技術(shù)4．通配符選擇器1.2CSS技術(shù)

了解了幾種選擇器的語法結(jié)構(gòu)后，接下來通過一個案例來學(xué)習(xí)這幾種選擇器的使用，請查看教材文件1-11。案例代碼1.2CSS技術(shù)了解了幾種選擇器的語法結(jié)構(gòu)后，接下來通過一個案為了使讀者更方便的了解網(wǎng)頁中各種標(biāo)記的樣式，下面介紹一些常用的CSS屬性。如表所示：1.2CSS技術(shù)1.2CSS技術(shù)DOM是DocumentObjectModel（文檔對象模型）的簡稱，是W3C組織推薦的處理可擴展標(biāo)志語言的標(biāo)準(zhǔn)編程接口，它可以以一種獨立于平臺和語言的方式訪問和修改一個文檔的內(nèi)容和結(jié)構(gòu)。W3C中將DOM標(biāo)準(zhǔn)分為3個不同的部分：核心DOM、XMLDOM和HTMLDOM，其中核心DOM是針對任何結(jié)構(gòu)化文檔的標(biāo)準(zhǔn)模型，XMLDOM是針對XML文檔的標(biāo)準(zhǔn)模型，而HTMLDOM是針對HTML文檔的標(biāo)準(zhǔn)模型。由于本章中主要講解的是網(wǎng)頁開發(fā)的基礎(chǔ)知識，而主要涉及的DOM內(nèi)容就是HTMLDOM，所以本節(jié)將主要介紹HTMLDOM的知識。DOM相關(guān)知識1.3JavaScript基礎(chǔ)DOM是DocumentObjectModel（文檔對象HTMLDOM模型被構(gòu)造為對象的樹，該樹的根節(jié)點是文檔（Document）對象，該對象有一個documentElement的屬性引用，表示文檔根元素的Element對象。HTML文檔中表示文檔根元素的Element對象是<html>元素，<head>和<body>元素可以看做樹的枝干。HTMLDOM樹的結(jié)構(gòu)如右圖所示。在圖中，每個元素被稱為一個節(jié)點，直接位于一個節(jié)點之下的節(jié)點被稱為該節(jié)點的子節(jié)點（childNode），直接位于一個節(jié)點之上的節(jié)點被稱為該節(jié)點的父節(jié)點（parentNode），具有相同父節(jié)點的兩個節(jié)點稱為兄弟節(jié)點（siblingNode）。1.3JavaScript基礎(chǔ)HTMLDOM模型被構(gòu)造為對象的樹，該樹的根節(jié)點是文

溫馨提示

  • 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)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論