《HTML5+CSS3任務(wù)驅(qū)動(dòng)教程(第2版)（微課版）》課件全套 趙峰 模塊1-11 網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)知識(shí) - 綜合案例

模塊一網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)知識(shí)目錄任務(wù)一任務(wù)二任務(wù)三

HBuilderX的安裝網(wǎng)站的建立網(wǎng)頁(yè)的基本知識(shí)1.1HBuilderX的新增功能1．全新的代碼編輯器2．開(kāi)發(fā)人員工作區(qū)3．CSS預(yù)處理器支持4．實(shí)時(shí)瀏覽器預(yù)覽5．HTML文檔中的快速CSS編輯任務(wù)1

HBuilderX的安裝1.1HBuilderX的新增功能6．無(wú)鼠標(biāo)操作7．用于重復(fù)任務(wù)的多個(gè)光標(biāo)8．新式UI（UserInterface，用戶界面）9．UI顏色主題任務(wù)1HBuilderX的安裝任務(wù)實(shí)現(xiàn)（1）進(jìn)入官網(wǎng)：https://dcloud.io/，單擊“HBuilderX極客開(kāi)發(fā)工具”圖標(biāo)，進(jìn)入下載界面。根據(jù)自己的計(jì)算機(jī)系統(tǒng)選擇合適的版本，單擊“Download”下載，如圖所示。（2）HBuilderX安裝好后，解壓安裝包，雙擊HBuilderX.exe文件，如圖所示。任務(wù)1HBuilderX的安裝任務(wù)實(shí)現(xiàn)（3）HBuilderX啟動(dòng)成功，如圖所示。任務(wù)1HBuilderX的安裝任務(wù)實(shí)現(xiàn)任務(wù)1HBuilderX的安裝（4）雙擊打開(kāi)HBuilderX.exe文件或者桌面上HBuilderX快捷方式，從菜單欄中選擇“文件”|“新建”|“項(xiàng)目”|選項(xiàng)，出現(xiàn)“新建項(xiàng)目”對(duì)話框，輸入項(xiàng)目名稱chapter01，項(xiàng)目存放位置為“D:/Web前端源碼”，如圖所示。在“選擇模板”中選擇“基本HTML項(xiàng)目”，單擊“創(chuàng)建”按鈕。任務(wù)實(shí)現(xiàn)任務(wù)1HBuilderX的安裝（5）此時(shí)，在選擇的路徑中創(chuàng)建了一個(gè)項(xiàng)目名稱命名的文件夾chapter01,并在該文件夾中自動(dòng)創(chuàng)建了css、img、js文件夾和index.html文件。這就建立了一個(gè)完整的靜態(tài)網(wǎng)站所必需的文件結(jié)構(gòu)。在HBuilderX左側(cè)的項(xiàng)目管理器中，單擊chapter01項(xiàng)目，可以看到該項(xiàng)目中的所有文件，如圖所示。css文件夾用于存放網(wǎng)站中的樣式文件；img文件夾用于存放網(wǎng)站中的圖片文件等；js文件夾用于存放網(wǎng)站中的腳本文件；index.html文件為網(wǎng)站的首頁(yè)文件。引入知識(shí)點(diǎn)任務(wù)2網(wǎng)站的建立1.2網(wǎng)頁(yè)、網(wǎng)站、首頁(yè)1.3靜態(tài)網(wǎng)頁(yè)和動(dòng)態(tài)網(wǎng)頁(yè)1.4IP地址、域名和URL任務(wù)2網(wǎng)站的建立1.2網(wǎng)頁(yè)、網(wǎng)站、首頁(yè)1．網(wǎng)頁(yè)網(wǎng)頁(yè)（WebPage）是一種網(wǎng)絡(luò)信息傳遞的載體，是構(gòu)成網(wǎng)站的基本元素，同時(shí)是承載各種網(wǎng)站應(yīng)用的平臺(tái)，可以簡(jiǎn)單地認(rèn)為：網(wǎng)站就是由網(wǎng)頁(yè)組成的。用戶需要通過(guò)瀏覽器來(lái)瀏覽網(wǎng)頁(yè)，從網(wǎng)頁(yè)中獲得相關(guān)信息。網(wǎng)頁(yè)本身就是一個(gè)文件，網(wǎng)頁(yè)中可以有文字、圖像、音頻及視頻等信息，它存放在世界某個(gè)角落的某臺(tái)計(jì)算機(jī)中，如果想訪問(wèn)或者瀏覽它，這臺(tái)計(jì)算機(jī)必須與互聯(lián)網(wǎng)相連。任務(wù)2網(wǎng)站的建立1.2網(wǎng)頁(yè)、網(wǎng)站、首頁(yè)2．網(wǎng)站網(wǎng)站（WebSite）由網(wǎng)頁(yè)組成，因此，網(wǎng)站就是一個(gè)存放網(wǎng)絡(luò)服務(wù)器上的完整信息的集合體。它是由單個(gè)或者多個(gè)網(wǎng)頁(yè)組成的集合，如Google、新浪，以及一些政府機(jī)關(guān)、企事業(yè)單位和個(gè)人網(wǎng)站等。任務(wù)2網(wǎng)站的建立1.2網(wǎng)頁(yè)、網(wǎng)站、首頁(yè)3．首頁(yè)首頁(yè)（HomePage）是一個(gè)特殊的網(wǎng)頁(yè)，它作為一個(gè)單獨(dú)的網(wǎng)頁(yè)時(shí)，和一般網(wǎng)頁(yè)一樣，可以存放一些相關(guān)信息，同時(shí)，它也可以作為整個(gè)網(wǎng)站的起始點(diǎn)和匯總點(diǎn)。首頁(yè)和主頁(yè)的區(qū)別在于：在建立網(wǎng)站時(shí)，通常會(huì)將信息分類并建立一個(gè)網(wǎng)頁(yè)，放置網(wǎng)站相關(guān)信息的目錄，也就是主頁(yè)。但是，不是所有的網(wǎng)站都會(huì)將主頁(yè)設(shè)置為首頁(yè)，一些網(wǎng)站還會(huì)將動(dòng)畫(huà)放在首頁(yè)上，并將主頁(yè)鏈接放在首頁(yè)上，用戶需要單擊鏈接進(jìn)而進(jìn)入主頁(yè)。任務(wù)2網(wǎng)站的建立1.3靜態(tài)網(wǎng)頁(yè)和動(dòng)態(tài)網(wǎng)頁(yè)1．靜態(tài)網(wǎng)頁(yè)靜態(tài)網(wǎng)頁(yè)也稱平面頁(yè)，其文件名通常以.htm、.html、.shtml、.xml（可擴(kuò)展標(biāo)記語(yǔ)言）等為后綴。用戶只能被動(dòng)地瀏覽網(wǎng)頁(yè)設(shè)計(jì)者提供的網(wǎng)頁(yè)內(nèi)容，網(wǎng)頁(yè)內(nèi)容不會(huì)發(fā)生變化（除非網(wǎng)頁(yè)設(shè)計(jì)者修改了網(wǎng)頁(yè)的內(nèi)容）。靜態(tài)網(wǎng)頁(yè)不能實(shí)現(xiàn)和瀏覽網(wǎng)頁(yè)的用戶之間的交互，其信息流向是單向的。任務(wù)2網(wǎng)站的建立1.3靜態(tài)網(wǎng)頁(yè)和動(dòng)態(tài)網(wǎng)頁(yè)靜態(tài)網(wǎng)頁(yè)的特點(diǎn)如下：（1）靜態(tài)網(wǎng)頁(yè)的每個(gè)頁(yè)面都有一個(gè)固定的URL（UniformResourceLocator，統(tǒng)一資源定位符），且網(wǎng)頁(yè)的URL以.htm、.html、.shtml等常見(jiàn)的形式為后綴；（2）靜態(tài)網(wǎng)頁(yè)內(nèi)容一經(jīng)發(fā)布到網(wǎng)站服務(wù)器上，無(wú)論是否有用戶訪問(wèn)，都是保存在網(wǎng)站服務(wù)器上的，也就是說(shuō)，靜態(tài)網(wǎng)頁(yè)是保存在服務(wù)器上的文件，每個(gè)靜態(tài)網(wǎng)頁(yè)都是一個(gè)獨(dú)立的文件；（3）靜態(tài)網(wǎng)頁(yè)的內(nèi)容相對(duì)穩(wěn)定，因此容易被搜索引擎檢索；任務(wù)2網(wǎng)站的建立1.3靜態(tài)網(wǎng)頁(yè)和動(dòng)態(tài)網(wǎng)頁(yè)（4）靜態(tài)網(wǎng)頁(yè)沒(méi)有數(shù)據(jù)庫(kù)的支持，在網(wǎng)站維護(hù)方面比較麻煩，因此當(dāng)網(wǎng)站信息量很大時(shí)，完全依靠靜態(tài)網(wǎng)頁(yè)的網(wǎng)站制作方式比較困難；（5）靜態(tài)網(wǎng)頁(yè)的交互性較差，在功能方面有很大的限制；（6）靜態(tài)網(wǎng)頁(yè)頁(yè)面瀏覽速度很快，整個(gè)過(guò)程無(wú)須鏈接數(shù)據(jù)庫(kù)，開(kāi)啟頁(yè)面的速度快于動(dòng)態(tài)頁(yè)面；（7）靜態(tài)網(wǎng)頁(yè)減輕了服務(wù)器的負(fù)擔(dān)，工作量較少，降低了數(shù)據(jù)庫(kù)的成本。任務(wù)2網(wǎng)站的建立1.3靜態(tài)網(wǎng)頁(yè)和動(dòng)態(tài)網(wǎng)頁(yè)2．動(dòng)態(tài)網(wǎng)頁(yè)動(dòng)態(tài)網(wǎng)頁(yè)，是指與靜態(tài)網(wǎng)頁(yè)相對(duì)應(yīng)的一種網(wǎng)頁(yè)編程技術(shù)。動(dòng)態(tài)網(wǎng)頁(yè)顯示的內(nèi)容是可以隨著時(shí)間、環(huán)境或者數(shù)據(jù)庫(kù)操作的結(jié)果而發(fā)生改變的。從某種意義上來(lái)講，凡是結(jié)合了HTML以外的高級(jí)程序設(shè)計(jì)語(yǔ)言和數(shù)據(jù)庫(kù)技術(shù)進(jìn)行的網(wǎng)頁(yè)編程生成的網(wǎng)頁(yè)都是動(dòng)態(tài)網(wǎng)頁(yè)。動(dòng)態(tài)網(wǎng)頁(yè)能與后臺(tái)數(shù)據(jù)庫(kù)進(jìn)行交互和數(shù)據(jù)傳遞，動(dòng)態(tài)網(wǎng)頁(yè)的URL的后綴不是.htm、.html、.shtml、.xml等靜態(tài)網(wǎng)頁(yè)的常見(jiàn)格式，而是.aspx、.asp、.jsp、.php、.perl、.cgi等形式。在動(dòng)態(tài)網(wǎng)頁(yè)網(wǎng)址中有一個(gè)標(biāo)志性的符號(hào)——“?”。動(dòng)態(tài)網(wǎng)頁(yè)一般由服務(wù)器端和客戶端實(shí)現(xiàn)交互。任務(wù)2網(wǎng)站的建立1.3靜態(tài)網(wǎng)頁(yè)和動(dòng)態(tài)網(wǎng)頁(yè)服務(wù)器端是一個(gè)在Web服務(wù)器上運(yùn)行的程序（服務(wù)器端腳本），用來(lái)改變不同網(wǎng)頁(yè)上的網(wǎng)頁(yè)內(nèi)容，或調(diào)節(jié)序列，或重新加載網(wǎng)頁(yè)。服務(wù)器端的響應(yīng)用來(lái)確定各種情況，例如，超文本標(biāo)記語(yǔ)言表單里面的數(shù)據(jù)，URL中的參數(shù)，所使用的瀏覽器類型，數(shù)據(jù)庫(kù)、服務(wù)器的狀態(tài)等?？蛻舳司褪菫g覽器端，客戶端腳本完全在瀏覽器中運(yùn)行，并控制著用戶與瀏覽器之間的交互，同時(shí)，客戶端的源代碼一般都可以看到，其對(duì)最終訪問(wèn)用戶相對(duì)公開(kāi)。任務(wù)2網(wǎng)站的建立1.3靜態(tài)網(wǎng)頁(yè)和動(dòng)態(tài)網(wǎng)頁(yè)動(dòng)態(tài)網(wǎng)頁(yè)的特點(diǎn)如下：（1）動(dòng)態(tài)網(wǎng)頁(yè)一般以數(shù)據(jù)庫(kù)技術(shù)為基礎(chǔ)，可以大大降低維護(hù)網(wǎng)站的工作量；（2）采用動(dòng)態(tài)網(wǎng)頁(yè)技術(shù)的網(wǎng)站可以實(shí)現(xiàn)更多的功能，如用戶注冊(cè)、用戶登錄、在線調(diào)查、用戶管理等；（3）動(dòng)態(tài)網(wǎng)頁(yè)實(shí)際上并不是獨(dú)立存在于服務(wù)器的網(wǎng)頁(yè)文件，只有當(dāng)用戶請(qǐng)求時(shí)，服務(wù)器才返回一個(gè)完整的網(wǎng)頁(yè)；（4）動(dòng)態(tài)網(wǎng)頁(yè)中的“?”，在搜索引擎檢索時(shí)存在一定問(wèn)題。搜索引擎一般不可能從一個(gè)網(wǎng)站的數(shù)據(jù)庫(kù)中訪問(wèn)全部網(wǎng)頁(yè)，出于技術(shù)方面的考慮，搜索時(shí)其不會(huì)抓取網(wǎng)址中“?”后面的內(nèi)容，因此采用動(dòng)態(tài)網(wǎng)頁(yè)的網(wǎng)站在進(jìn)行搜索引擎推廣時(shí)，需要進(jìn)行一定的技術(shù)處理才能適應(yīng)搜索引擎的要求。任務(wù)2網(wǎng)站的建立1.4IP地址、域名和URL1．IP地址每個(gè)連接到互聯(lián)網(wǎng)上的主機(jī)都會(huì)被分配一個(gè)IP地址，IP地址是用來(lái)唯一標(biāo)識(shí)互聯(lián)網(wǎng)上計(jì)算機(jī)的邏輯地址，機(jī)器之間的訪問(wèn)就是通過(guò)IP地址來(lái)進(jìn)行的。目前IPv4版本的IP地址采用32位二進(jìn)制數(shù)的形式表示。為了便于使用，IP地址經(jīng)常被寫(xiě)成十進(jìn)制數(shù)的形式，每8位二進(jìn)制數(shù)用“.”分開(kāi)，稱為“點(diǎn)分十進(jìn)制表示法”，如。任務(wù)2網(wǎng)站的建立1.4IP地址、域名和URL2．域名IP地址畢竟是數(shù)字標(biāo)識(shí)，使用時(shí)不好記憶和書(shū)寫(xiě)，因此在IP地址的基礎(chǔ)上又發(fā)展出一種符號(hào)化的地址方案，來(lái)代替數(shù)字型的IP地址。域名是由一串用點(diǎn)分隔的名字組成的互聯(lián)網(wǎng)上某一臺(tái)計(jì)算機(jī)或計(jì)算機(jī)組的名稱，用于在數(shù)據(jù)傳輸時(shí)標(biāo)識(shí)計(jì)算機(jī)的電子方位（有時(shí)也指地理位置）。網(wǎng)域名稱系統(tǒng)（DomainNameSystem，DNS）簡(jiǎn)稱域名系統(tǒng)，是互聯(lián)網(wǎng)中的一項(xiàng)核心服務(wù)，它作為可以將域名和IP地址相互映射的一個(gè)分布式數(shù)據(jù)庫(kù)，能夠使用戶更方便地訪問(wèn)互聯(lián)網(wǎng)，而不用去記住能夠被機(jī)器直接讀取的IP地址數(shù)串，如。任務(wù)2網(wǎng)站的建立1.4IP地址、域名和URL3．URL統(tǒng)一資源定位符（URL），俗稱網(wǎng)址。網(wǎng)址格式為：<協(xié)議>://<域名或IP>:<端口>/<路徑>。其中，<協(xié)議>://<域名或IP>是必需的，<端口>/<路徑>有時(shí)可省略。如/。任務(wù)2網(wǎng)站的建立1.5HTTP和FTP1．HTTPHTTP（HyperTextTransferProtocol）即超文本傳輸協(xié)議，它是Web的核心。HTTP是一種為了將位于全球各個(gè)地方的Web服務(wù)器中的內(nèi)容發(fā)送給不特定的多數(shù)用戶而制定的協(xié)議。HTTP用于從服務(wù)器端讀取Web頁(yè)面內(nèi)容，從Web瀏覽器下載Web服務(wù)器中的HTML文檔及圖像文件等，并臨時(shí)保存在個(gè)人計(jì)算機(jī)硬盤(pán)及內(nèi)存中以供顯示。2．FTPFTP（FileTransferProtocol）即文件傳輸協(xié)議，它是互聯(lián)網(wǎng)上使用非常廣泛的一種通信協(xié)議，是為了互聯(lián)網(wǎng)上的用戶進(jìn)行文件傳輸（包括文件的上傳和下載）而制定的。任務(wù)實(shí)現(xiàn)任務(wù)2網(wǎng)站的建立（1）打開(kāi)HBuilderX，執(zhí)行“文件”>“新建”>“項(xiàng)目”命令，如圖所示。任務(wù)實(shí)現(xiàn)任務(wù)2網(wǎng)站的建立（2）在彈出的“新建項(xiàng)目”對(duì)話框中，根據(jù)個(gè)人喜好設(shè)置項(xiàng)目名稱和本項(xiàng)目的路徑，然后單擊“新建”按鈕，新建項(xiàng)目文件夾，如圖所示。任務(wù)實(shí)現(xiàn)任務(wù)2網(wǎng)站的建立（3）新建站點(diǎn)后，若沒(méi)有顯示項(xiàng)目，可以執(zhí)行“視圖”→“顯示項(xiàng)目管理器等左側(cè)視圖”命令，如圖所示。任務(wù)實(shí)現(xiàn)任務(wù)2網(wǎng)站的建立（4）成功創(chuàng)建一個(gè)站點(diǎn)，效果如圖所示。1.6網(wǎng)頁(yè)的基本結(jié)構(gòu)任務(wù)3網(wǎng)頁(yè)的基本知識(shí)1．導(dǎo)航欄導(dǎo)航欄是構(gòu)成網(wǎng)頁(yè)的重要元素之一，是網(wǎng)站頻道入口的集合區(qū)域，相當(dāng)于網(wǎng)站的菜單。導(dǎo)航欄設(shè)計(jì)的目的是將站點(diǎn)內(nèi)的信息分類處理，然后放在網(wǎng)頁(yè)中以幫助用戶快速查找站內(nèi)信息。同時(shí)，導(dǎo)航欄的形式多種多樣，包括文本導(dǎo)航欄、圖像導(dǎo)航欄及動(dòng)畫(huà)導(dǎo)航欄等。2．欄目欄目是指網(wǎng)頁(yè)中存放相同性質(zhì)內(nèi)容的區(qū)域。在對(duì)網(wǎng)頁(yè)內(nèi)容進(jìn)行布局時(shí)，把性質(zhì)相同的內(nèi)容安排在網(wǎng)頁(yè)的相同區(qū)域，可以幫助用戶快速獲取所需信息，對(duì)網(wǎng)站內(nèi)容起到非常好的導(dǎo)航作用。3．正文內(nèi)容正文內(nèi)容是指網(wǎng)頁(yè)中的主體內(nèi)容。例如，對(duì)于文章類的網(wǎng)頁(yè)，正文內(nèi)容就是文章本身；而對(duì)于展示產(chǎn)品的網(wǎng)頁(yè)，正文內(nèi)容就是產(chǎn)品信息。1.7網(wǎng)頁(yè)的基本內(nèi)容任務(wù)3網(wǎng)頁(yè)的基本知識(shí)1．網(wǎng)站logo2．Banner3．內(nèi)容模塊4．版尾或版權(quán)模塊5．文本6．圖片7．超鏈接8．動(dòng)畫(huà)9．聲音10．表格11．表單1.8網(wǎng)頁(yè)的表現(xiàn)任務(wù)3網(wǎng)頁(yè)的基本知識(shí)網(wǎng)頁(yè)的表現(xiàn)是指網(wǎng)頁(yè)對(duì)信息在顯示上的控制，如版式、顏色、大小等樣式上的控制。好的表現(xiàn)會(huì)使用戶在瀏覽頁(yè)面時(shí)更加舒適。1.9網(wǎng)頁(yè)的行為任務(wù)3網(wǎng)頁(yè)的基本知識(shí)網(wǎng)頁(yè)的行為也就是網(wǎng)頁(yè)的交互操作，既可以從網(wǎng)頁(yè)上獲得所需的信息，也可以把自己的一些觀念信息、見(jiàn)解和意見(jiàn)傳遞出去與其他人交流。1.10網(wǎng)頁(yè)的Web標(biāo)準(zhǔn)任務(wù)3網(wǎng)頁(yè)的基本知識(shí)網(wǎng)頁(yè)的Web標(biāo)準(zhǔn)不是某一個(gè)標(biāo)準(zhǔn)，而是一系列標(biāo)準(zhǔn)的集合。Web標(biāo)準(zhǔn)由萬(wàn)維網(wǎng)聯(lián)盟（W3C）制定，分為結(jié)構(gòu)標(biāo)準(zhǔn)、表現(xiàn)標(biāo)準(zhǔn)、行為標(biāo)準(zhǔn)和代碼標(biāo)準(zhǔn)。1.10網(wǎng)頁(yè)的Web標(biāo)準(zhǔn)任務(wù)3網(wǎng)頁(yè)的基本知識(shí)1．結(jié)構(gòu)標(biāo)準(zhǔn)（1）可擴(kuò)展標(biāo)記語(yǔ)言（ExtensibleMarkupLanguage，XML）和HTML一樣，XML同樣來(lái)源于標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言，可擴(kuò)展標(biāo)記語(yǔ)言和標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言都是能定義其他語(yǔ)言的語(yǔ)言。XML設(shè)計(jì)的最初目的是彌補(bǔ)HTML的不足，以強(qiáng)大的擴(kuò)展性滿足網(wǎng)絡(luò)信息發(fā)布的需要，后來(lái)逐漸用于網(wǎng)絡(luò)數(shù)據(jù)的轉(zhuǎn)換和描述。（2）可擴(kuò)展超文本標(biāo)記語(yǔ)言（ExtensibleHyperTextMarkupLanguage，XHTML）雖然XML的數(shù)據(jù)轉(zhuǎn)換能力強(qiáng)大，大多數(shù)情況下完全可以替代HTML，但面對(duì)成千上萬(wàn)已有的站點(diǎn)，直接采用XML還為時(shí)過(guò)早。因此，在HTML4.0的基礎(chǔ)上，用XML的規(guī)則對(duì)其進(jìn)行擴(kuò)展，得到了XHTML。簡(jiǎn)單地說(shuō)，建立XHTML的目的就是實(shí)現(xiàn)HTML向XML的過(guò)渡。1.10網(wǎng)頁(yè)的Web標(biāo)準(zhǔn)任務(wù)3網(wǎng)頁(yè)的基本知識(shí)2．表現(xiàn)標(biāo)準(zhǔn)層疊樣式表（CSS）：W3C創(chuàng)建CSS標(biāo)準(zhǔn)的目的是以CSS取代HTML表格式布局、幀和其他表現(xiàn)語(yǔ)言。純CSS布局與結(jié)構(gòu)式XHTML相結(jié)合能幫助網(wǎng)頁(yè)設(shè)計(jì)者分離外觀與結(jié)構(gòu)，使站點(diǎn)的訪問(wèn)及維護(hù)更加容易。1.10網(wǎng)頁(yè)的Web標(biāo)準(zhǔn)任務(wù)3網(wǎng)頁(yè)的基本知識(shí)3．行為標(biāo)準(zhǔn)文檔對(duì)象模型（DocumentObjectModel，DOM）：根據(jù)W3C的DOM規(guī)范（http:///DOM/），DOM是一種與瀏覽器、平臺(tái)、語(yǔ)言的接口，使用戶可以訪問(wèn)頁(yè)面上其他的標(biāo)準(zhǔn)組件。簡(jiǎn)單地說(shuō)，DOM解決了Netscape的JavaScript和Microsoft的JScript之間的沖突，給予Web設(shè)計(jì)師和開(kāi)發(fā)者一個(gè)標(biāo)準(zhǔn)的方法，讓他們能訪問(wèn)他們站點(diǎn)中的數(shù)據(jù)、腳本和表現(xiàn)層對(duì)象。4．代碼標(biāo)準(zhǔn)代碼標(biāo)準(zhǔn)包括結(jié)束標(biāo)記、大小寫(xiě)元素、嵌套、屬性、特殊符號(hào)、屬性賦值以及注釋等。謝謝模塊二HTML5開(kāi)發(fā)基礎(chǔ)目錄任務(wù)一任務(wù)二任務(wù)三寫(xiě)一個(gè)簡(jiǎn)單的HTML5頁(yè)面設(shè)置“在線學(xué)習(xí)網(wǎng)”的首頁(yè)文件頭部信息引入知識(shí)點(diǎn)2.1HTML簡(jiǎn)介2.2HTML文件的基本結(jié)構(gòu)任務(wù)1編寫(xiě)一個(gè)簡(jiǎn)單的HTML5頁(yè)面2.1HTML簡(jiǎn)介HTML是一切網(wǎng)頁(yè)實(shí)現(xiàn)的基礎(chǔ)，在網(wǎng)絡(luò)中瀏覽的網(wǎng)頁(yè)都是一個(gè)個(gè)由HTML標(biāo)記構(gòu)成的文件。瀏覽器只要看到HTML源代碼，就能解析成網(wǎng)頁(yè)。HTML文件本身是一種純文本文件，我們可以使用任意一種文本編輯工具進(jìn)行編寫(xiě)。比如，使用最簡(jiǎn)單的記事本工具，或Editplus、HBuilder、Sublime、InterlliJIDEA等文本編輯工具，或Dreamweaver可視化編輯工具編寫(xiě)。目前，最新的HTML文件是HTML5。任務(wù)1編寫(xiě)一個(gè)簡(jiǎn)單的HTML5頁(yè)面2.1HTML簡(jiǎn)介2.1.1HTML的定義HTML（HyperTextMarkupLanguage，超文本標(biāo)記語(yǔ)言）是由W3C（WorldWideWebConsortium，萬(wàn)維網(wǎng)聯(lián)盟）所提出的，是用于描述網(wǎng)頁(yè)文檔的一種標(biāo)記語(yǔ)言，其主要用途是制作網(wǎng)頁(yè)。用HTML編寫(xiě)的超文本文檔稱為HTML文檔，也叫網(wǎng)頁(yè)。它能獨(dú)立于各種操作系統(tǒng)平臺(tái)。任務(wù)1編寫(xiě)一個(gè)簡(jiǎn)單的HTML5頁(yè)面2.1HTML簡(jiǎn)介2.1.2HTML的發(fā)展歷史HTML（第一版）：在1993年6月作為互聯(lián)網(wǎng)工程工作小組（IETF）工作草案發(fā)布，并非標(biāo)準(zhǔn)。

HTML2.0：1995年11月作為RFC1866發(fā)布，在RFC2854于2000年6月發(fā)布之后被宣布已經(jīng)過(guò)時(shí)。

HTML3.2：1996年1月14日，W3C推薦標(biāo)準(zhǔn)。

HTML4.0：1997年12月18日，W3C推薦標(biāo)準(zhǔn)。

HTML4.01（微小改進(jìn)）：1999年12月24日，W3C推薦標(biāo)準(zhǔn)。HTML5：2014年10月29日，W3C宣布，經(jīng)過(guò)接近8年的艱苦努力，HTML5標(biāo)準(zhǔn)規(guī)范終于制定完成。任務(wù)1編寫(xiě)一個(gè)簡(jiǎn)單的HTML5頁(yè)面2.2HTML文件的基本結(jié)構(gòu)HTML文檔包含標(biāo)記和純文本，它被Web瀏覽器讀取并解析后以網(wǎng)頁(yè)的形式顯示出來(lái)。每個(gè)網(wǎng)頁(yè)都有其基本的結(jié)構(gòu)，包括HTML文檔的結(jié)構(gòu)，標(biāo)記的語(yǔ)法格式，語(yǔ)法規(guī)范等。2.2.1HTML的語(yǔ)法格式HTML的語(yǔ)法結(jié)構(gòu)主要有標(biāo)記、屬性和元素組成，其基本語(yǔ)法格式如下：<標(biāo)記名屬性1=“屬性值1”屬性2=“屬性值2”…>內(nèi)容</標(biāo)記名>任務(wù)1編寫(xiě)一個(gè)簡(jiǎn)單的HTML5頁(yè)面2.2HTML文件的基本結(jié)構(gòu)1.標(biāo)記HTML標(biāo)記組成HTML文檔的元素，每一個(gè)標(biāo)記描述了一個(gè)功能。標(biāo)記分為單標(biāo)記，雙標(biāo)記兩種。（1）單標(biāo)記：只需單獨(dú)使用就能完整地表達(dá)意思，這類標(biāo)記的基本語(yǔ)法格式如下：<標(biāo)記名>（2）雙標(biāo)記：這類標(biāo)記的基本語(yǔ)法格式如下：<標(biāo)記名>內(nèi)容</標(biāo)記名>任務(wù)1編寫(xiě)一個(gè)簡(jiǎn)單的HTML5頁(yè)面2.2HTML文件的基本結(jié)構(gòu)2.標(biāo)記的屬性使用HTML制作網(wǎng)頁(yè)時(shí)，如果想讓HTML標(biāo)記提供更多的信息，可以使用HTML標(biāo)記的屬性來(lái)實(shí)現(xiàn)，許多單標(biāo)記和雙標(biāo)記的始標(biāo)記內(nèi)可以包含一些屬性。在HTML中，屬性要在開(kāi)始標(biāo)記中指定，用來(lái)表示該標(biāo)記的性質(zhì)和特性。基本語(yǔ)法格式如下：<標(biāo)記名屬性1=“屬性值1”屬性2=“屬性值2”…>任務(wù)1編寫(xiě)一個(gè)簡(jiǎn)單的HTML5頁(yè)面2.2HTML文件的基本結(jié)構(gòu)3.元素HTML（element）元素是由“標(biāo)記（tag）”和“屬性（attribute）”所組成，指的是從開(kāi)始標(biāo)記到結(jié)束標(biāo)記的所有代碼。沒(méi)有內(nèi)容的HTML元素被稱為空元素，空元素是在開(kāi)始標(biāo)記中關(guān)閉的。例如，以下代碼片段所示：<p>歡迎來(lái)到廣東創(chuàng)新科技職業(yè)學(xué)院信息工程學(xué)院</p><!--該p元素為有內(nèi)容的元素-->任務(wù)1編寫(xiě)一個(gè)簡(jiǎn)單的HTML5頁(yè)面2.2HTML文件的基本結(jié)構(gòu)2.2.2HTML的文檔結(jié)構(gòu)HTML5文件的基本結(jié)構(gòu)如下：<!doctypehtml><!--文檔類型的聲明--><html><!--文檔的開(kāi)始--><head><!--文檔頭部的開(kāi)始--><title>此處是網(wǎng)頁(yè)標(biāo)題</title><!--文檔標(biāo)題信息的開(kāi)始和結(jié)束--></head><!--文檔頭部的結(jié)束--><body><!--文檔主體的開(kāi)始-->此處是網(wǎng)頁(yè)文件內(nèi)容</body><!--文檔主體的結(jié)束--></html><!--文檔的結(jié)束-->任務(wù)1編寫(xiě)一個(gè)簡(jiǎn)單的HTML5頁(yè)面2.2HTML文件的基本結(jié)構(gòu)2.2.3HTML的常用標(biāo)記HTML5文檔核心是HTML5標(biāo)記，標(biāo)記是用來(lái)實(shí)現(xiàn)網(wǎng)頁(yè)元素的最小單位。學(xué)習(xí)HTML語(yǔ)言時(shí)，除要知道HTML語(yǔ)言結(jié)構(gòu)外，更多是學(xué)習(xí)掌握這些標(biāo)記的使用方法。HTML語(yǔ)言的常用標(biāo)記包含文件結(jié)構(gòu)標(biāo)記、文本段落標(biāo)記、鏈接標(biāo)記、表格標(biāo)記、列表標(biāo)記等等任務(wù)1編寫(xiě)一個(gè)簡(jiǎn)單的HTML5頁(yè)面任務(wù)1編寫(xiě)一個(gè)簡(jiǎn)單的HTML5頁(yè)面任務(wù)實(shí)現(xiàn)（1）創(chuàng)建一個(gè)HTML5頁(yè)面。（3）該網(wǎng)頁(yè)頁(yè)面顯示的內(nèi)容為“讓我們開(kāi)始HTML語(yǔ)言的新旅程！”。（2）該網(wǎng)頁(yè)頁(yè)面標(biāo)題為“第一個(gè)HTML頁(yè)面”。引入知識(shí)點(diǎn)任務(wù)2設(shè)置“在線學(xué)習(xí)網(wǎng)”的首頁(yè)文件頭部信息2.3頁(yè)面的頭部摘要信息2.3頁(yè)面的頭部摘要信息在網(wǎng)頁(yè)的頭部<head>和</head>標(biāo)記所包含的部分中，通常存放一些介紹頁(yè)面內(nèi)容的信息，例如頁(yè)面標(biāo)題、關(guān)鍵字、描述、頁(yè)面大小，更新日期和網(wǎng)頁(yè)快照等。其中，網(wǎng)頁(yè)標(biāo)題及頁(yè)面描述稱為網(wǎng)頁(yè)的摘要信息。如果希望自己發(fā)布的網(wǎng)頁(yè)能被百度、谷歌等搜索引擎搜索到，在制作網(wǎng)頁(yè)時(shí)就需要注意編寫(xiě)網(wǎng)頁(yè)的摘要信息。接下來(lái)就介紹一下網(wǎng)頁(yè)的摘要信息，<meta>標(biāo)記如何去使用。任務(wù)2設(shè)置“在線學(xué)習(xí)網(wǎng)”的首頁(yè)文件頭部信息2.3頁(yè)面的頭部摘要信息2.3.1<meta>標(biāo)記元數(shù)據(jù)（metadata）是關(guān)于數(shù)據(jù)的信息。<meta>標(biāo)記是頁(yè)面頭部部分中的一個(gè)輔助性標(biāo)記，提供關(guān)于HTML文檔的元數(shù)據(jù)。元數(shù)據(jù)不會(huì)顯示在頁(yè)面上，但是對(duì)于機(jī)器是可讀的。meta元素被用于規(guī)定頁(yè)面的描述、關(guān)鍵詞、文檔的作者、最后修改時(shí)間以及其他元數(shù)據(jù)。任務(wù)2設(shè)置“在線學(xué)習(xí)網(wǎng)”的首頁(yè)文件頭部信息2.3頁(yè)面的頭部摘要信息2.3.2<meta>標(biāo)記屬性<meta>設(shè)置的內(nèi)容包括字符集、網(wǎng)頁(yè)關(guān)鍵字、網(wǎng)頁(yè)描述信息、頁(yè)面的刷新及跳轉(zhuǎn)等，這些內(nèi)容都是通過(guò)設(shè)置meta標(biāo)記的相應(yīng)屬性來(lái)實(shí)現(xiàn)。任務(wù)2設(shè)置“在線學(xué)習(xí)網(wǎng)”的首頁(yè)文件頭部信息2.3頁(yè)面的頭部摘要信息2.3.3使用<meta>設(shè)置頁(yè)面字符集在HTML5中，有一個(gè)新的charset屬性，它使字符集的設(shè)置更加簡(jiǎn)化?；菊Z(yǔ)法格式如下：<metacharset="字符集">例如，下列代碼告訴瀏覽器，網(wǎng)頁(yè)使用字符集為utf-8，代碼如下：<metacharset="utf-8">任務(wù)2設(shè)置“在線學(xué)習(xí)網(wǎng)”的首頁(yè)文件頭部信息2.3頁(yè)面的頭部摘要信息2.3.4使用<meta>設(shè)置作者信息基本語(yǔ)法格式如下：<metaname="author"content="作者的姓名">例如，將作者的姓名“李小茗”添加到網(wǎng)頁(yè)的源代碼中，代碼如下：<metaname="author"content="李小茗">任務(wù)2設(shè)置“在線學(xué)習(xí)網(wǎng)”的首頁(yè)文件頭部信息2.3頁(yè)面的頭部摘要信息2.3.5使用<meta>設(shè)置網(wǎng)頁(yè)搜索關(guān)鍵字基本語(yǔ)法格式如下：<metaname="keywords"content="關(guān)鍵字1,關(guān)鍵字2,關(guān)鍵字3,…">例如，定義針對(duì)搜索引擎的關(guān)鍵字，代碼如下：<metaname="keywords"content="網(wǎng)頁(yè)制作,HTML,Dreamweaver">任務(wù)2設(shè)置“在線學(xué)習(xí)網(wǎng)”的首頁(yè)文件頭部信息2.3頁(yè)面的頭部摘要信息2.3.6使用<meta>設(shè)置網(wǎng)頁(yè)描述信息基本語(yǔ)法格式如下：<metaname="discription"content="描述內(nèi)容">例如，在網(wǎng)頁(yè)中設(shè)置為網(wǎng)站設(shè)計(jì)者提供網(wǎng)頁(yè)制作的說(shuō)明信息，代碼如下：<metaname="discription"content="這是一個(gè)網(wǎng)頁(yè)制作等在線學(xué)習(xí)平臺(tái)，擁有系統(tǒng)的前端和移動(dòng)開(kāi)發(fā)等課程。">任務(wù)2設(shè)置“在線學(xué)習(xí)網(wǎng)”的首頁(yè)文件頭部信息2.3頁(yè)面的頭部摘要信息2.3.7使用<meta>設(shè)置網(wǎng)頁(yè)刷新時(shí)間基本語(yǔ)法格式如下：<metahttp-equiv="refresh"content="刷新間隔時(shí)間">例如，將網(wǎng)頁(yè)設(shè)置為每隔10秒自動(dòng)刷新，代碼如下：<metahttp-equiv="refresh"content="10">任務(wù)2設(shè)置“在線學(xué)習(xí)網(wǎng)”的首頁(yè)文件頭部信息2.3頁(yè)面的頭部摘要信息2.3.8使用<meta>設(shè)置網(wǎng)頁(yè)自動(dòng)跳轉(zhuǎn)基本語(yǔ)法格式如下：<metahttp-equiv="refresh"content="刷新間隔時(shí)間";url="頁(yè)面地址">例如，將網(wǎng)頁(yè)設(shè)置10秒之后，網(wǎng)頁(yè)自動(dòng)跳轉(zhuǎn)到中國(guó)大學(xué)慕課網(wǎng)站首頁(yè)，代碼如下：<metahttp-equiv="refresh"content="10";url="">任務(wù)2設(shè)置“在線學(xué)習(xí)網(wǎng)”的首頁(yè)文件頭部信息任務(wù)實(shí)現(xiàn)（1）設(shè)置制作的study.html頁(yè)面的頭部?jī)?nèi)容，該網(wǎng)頁(yè)文檔的標(biāo)題為“在線學(xué)習(xí)網(wǎng)”。（3）添加頁(yè)面作者信息，作者為“李小茗”。（2）設(shè)定網(wǎng)頁(yè)字符集為“utf-8”。（4）設(shè)定頁(yè)面關(guān)鍵字“IT在線學(xué)習(xí)，IT在線教育，IT在線培訓(xùn)，IT精品課，移動(dòng)端學(xué)習(xí)，HTML學(xué)習(xí)，PHP學(xué)習(xí)，Web前端學(xué)習(xí)，Python學(xué)習(xí)，數(shù)字媒體軟件學(xué)習(xí)，多媒體軟件培訓(xùn)”。任務(wù)2設(shè)置“在線學(xué)習(xí)網(wǎng)”的首頁(yè)文件頭部信息謝謝模塊三文本與段落目錄任務(wù)一任務(wù)二任務(wù)三文字的基本排版對(duì)文字進(jìn)行加強(qiáng)描述使用塊級(jí)元素和行內(nèi)元素制作專業(yè)信息頁(yè)面任務(wù)四任務(wù)五特殊符號(hào)的使用添加注釋引入知識(shí)點(diǎn)任務(wù)1文字的基本排版3.2換行3.3預(yù)格式化3.4水平線3.5各級(jí)標(biāo)題3.1段落3.1段落在將頁(yè)面中的文字標(biāo)記為段落時(shí)，通常會(huì)使用<p>…</p>對(duì)文字進(jìn)行標(biāo)記，瀏覽器會(huì)自動(dòng)地在段落的前后添加空行。并且這個(gè)標(biāo)記必須要成對(duì)出現(xiàn)，在段落開(kāi)始處添加<p>，結(jié)束處添加</p>。例如：任務(wù)1文字的基本排版<p>這是一個(gè)段落</p>3.2換行任務(wù)1文字的基本排版在對(duì)HTML文檔進(jìn)行編輯時(shí)，回車鍵是不能實(shí)現(xiàn)換行功能的，若要實(shí)現(xiàn)換行，則需要使用<br/>標(biāo)記，在需要換行的位置添加<br/>即可。一個(gè)<br/>標(biāo)記表示換一行，要實(shí)現(xiàn)換多行需要使用多個(gè)<br/>。雖然兩個(gè)<br/>標(biāo)記效果上和<p>標(biāo)記類似，但是從文檔結(jié)構(gòu)上分析還是有所不同的，換行標(biāo)記不能視為描述文檔結(jié)構(gòu)的行為，若要實(shí)現(xiàn)段落，還應(yīng)使用<p>標(biāo)記。例如，對(duì)一段文字強(qiáng)制換行的代碼如下：<p>截止到2023年12月，圖書(shū)館館藏圖書(shū)總量達(dá)155.28萬(wàn)冊(cè)，其中紙質(zhì)圖書(shū)120.38萬(wàn)冊(cè)，電子圖書(shū)34.90萬(wàn)冊(cè)；中外文報(bào)刊4433種，其中紙質(zhì)報(bào)刊111種，電子報(bào)刊4322種。<br/>隨著學(xué)院規(guī)模的發(fā)展，根據(jù)《普通高等學(xué)?；巨k學(xué)條件指標(biāo)(試行)》中規(guī)定的生均圖書(shū)冊(cè)數(shù)的相關(guān)指標(biāo)要求，我們將繼續(xù)逐步分階段地進(jìn)行館藏資源建設(shè)。同時(shí)圖書(shū)館正著手建設(shè)各種數(shù)據(jù)庫(kù)資源，并探求館際合作，為學(xué)院教學(xué)以及科研提供良好的信息資源保障。</p>3.3預(yù)格式化任務(wù)1文字的基本排版在對(duì)HTML文檔進(jìn)行編輯時(shí)，有時(shí)會(huì)希望一些文本在瀏覽器中顯示的效果就是在HTML文檔中編輯的格式，這個(gè)時(shí)候我們可以使用<pre>來(lái)進(jìn)行標(biāo)記，這個(gè)標(biāo)記也是成對(duì)出現(xiàn)的<pre></pre>，被這對(duì)標(biāo)簽括起來(lái)的文本通常會(huì)保留其空格及一些換行等格式。我們以一段文字為例，具體使用方法如下：<pre>9月7日—8日，廣東創(chuàng)新科技職業(yè)學(xué)院迎來(lái)了近7000名2023級(jí)高職新生，錄取報(bào)到人數(shù)再創(chuàng)新高（因受天氣影響，報(bào)到將延續(xù)至9月11日）。同學(xué)們從五湖四海如約而至，在青春洋溢的創(chuàng)新學(xué)院開(kāi)啟嶄新的人生篇章和探索之旅。為了順利保障2023級(jí)新生平安入學(xué)、有序報(bào)到，做到讓學(xué)生滿意，家長(zhǎng)放心，學(xué)校專門(mén)成立迎新工作專項(xiàng)領(lǐng)導(dǎo)小組，多次召開(kāi)專項(xiàng)工作會(huì)議，制定《2023年新生工作方案》，針對(duì)迎新工作統(tǒng)籌規(guī)劃、統(tǒng)一部署，各職能部門(mén)和二級(jí)學(xué)院迅速響應(yīng)、分工協(xié)作，用實(shí)際行動(dòng)做好各項(xiàng)準(zhǔn)備工作和應(yīng)急預(yù)案迎接新生入校。</pre>3.4水平線任務(wù)1文字的基本排版在瀏覽網(wǎng)頁(yè)時(shí)會(huì)經(jīng)常看到用水平線來(lái)分割文字類別或內(nèi)容，在編輯HTML文檔時(shí)我們可以使用<hr>來(lái)標(biāo)記出一條橫線，它和<br>一樣是一個(gè)空標(biāo)記。我們以信工學(xué)院簡(jiǎn)介的樣式為例來(lái)看一下橫線標(biāo)記的用法：<pre>信息工程學(xué)院簡(jiǎn)介</pre><hr/><pre>廣東創(chuàng)新科技職業(yè)學(xué)院信息工程學(xué)院經(jīng)過(guò)十二年的發(fā)展，現(xiàn)有在校學(xué)生近4050名，已開(kāi)設(shè)計(jì)算機(jī)應(yīng)用技術(shù)（省級(jí)重點(diǎn)專業(yè)）、通信技術(shù)、計(jì)算機(jī)網(wǎng)絡(luò)技術(shù)(華為信息與網(wǎng)絡(luò)技術(shù)學(xué)院)、軟件技術(shù)、電子信息工程技術(shù)、動(dòng)漫制作技術(shù)、物聯(lián)網(wǎng)應(yīng)用技術(shù)、大數(shù)據(jù)技術(shù)、云計(jì)算技術(shù)應(yīng)用、人工智能技術(shù)應(yīng)用、應(yīng)急救援技術(shù)、安全智能監(jiān)測(cè)技術(shù)、信息安全技術(shù)應(yīng)用（籌）等13個(gè)專業(yè)。2021年由計(jì)算機(jī)應(yīng)用技術(shù)牽頭，聯(lián)合計(jì)算機(jī)網(wǎng)絡(luò)技術(shù)、軟件技術(shù)、物聯(lián)網(wǎng)應(yīng)用技術(shù)、大數(shù)據(jù)技術(shù)等專業(yè)，申報(bào)省高職院校高水平專業(yè)群，獲教育廳立項(xiàng)。</pre>3.5各級(jí)標(biāo)題任務(wù)1文字的基本排版在使用Word軟件編輯文檔時(shí)，經(jīng)常會(huì)使用標(biāo)題樣式直接創(chuàng)建不同樣式的標(biāo)題。在一段文字中，最基本的文本結(jié)構(gòu)通常會(huì)分為不同等級(jí)的標(biāo)題和正文，利用不同等級(jí)的標(biāo)題使文字的結(jié)構(gòu)更加清晰。HTML文檔中包含6級(jí)標(biāo)題，分別用<h1>~<h6>來(lái)標(biāo)記，數(shù)字越大，字號(hào)越小，即<h1>標(biāo)記字號(hào)最大的標(biāo)題，<h6>標(biāo)記字號(hào)最小的標(biāo)題。設(shè)置這幾個(gè)級(jí)別的標(biāo)題的代碼如下：<h1>一級(jí)標(biāo)題</h1><h2>二級(jí)標(biāo)題</h2><h3>三級(jí)標(biāo)題</h3><h4>四級(jí)標(biāo)題</h4><h5>五級(jí)標(biāo)題</h5><h6>六級(jí)標(biāo)題</h6>具體任務(wù)任務(wù)1文字的基本排版（1）創(chuàng)建一個(gè)HTML5頁(yè)面，為文檔各個(gè)標(biāo)題添加不同級(jí)別的標(biāo)題標(biāo)記；（2）添加水平線分隔題目和主體內(nèi)容；（3）使內(nèi)容保留文檔原有格式。任務(wù)實(shí)現(xiàn)任務(wù)1文字的基本排版（1）在HBuilderX中創(chuàng)建一個(gè)空白HTML5頁(yè)面，保存為test.html，文檔中包含<head>、<body>等基本的HTML結(jié)構(gòu)。代碼如下：<!doctypehtml><html><head><metacharset="utf-8"/><title>文字基本樣式設(shè)計(jì)</title></head><body></body></html>任務(wù)實(shí)現(xiàn)任務(wù)1文字的基本排版（2）在<body>標(biāo)記中，使用標(biāo)題標(biāo)記<h1>將標(biāo)題名設(shè)置為一級(jí)標(biāo)題，并利用<h3>將作者名等信息設(shè)置為三級(jí)標(biāo)題：<h1align="center">報(bào)刊資源建設(shè)</h1><h3align="center"><b>時(shí)間：2023-12-12來(lái)源：作者：點(diǎn)擊量：</b></h3>任務(wù)實(shí)現(xiàn)任務(wù)1文字的基本排版（3）添加一條水平線，使用<pre>標(biāo)記添加原有格式的內(nèi)（4）運(yùn)行代碼，得到如圖所示的效果。<hr/><pre>目前我館征訂有中外文報(bào)刊達(dá)520種，其中紙質(zhì)報(bào)刊170余種，電子報(bào)刊350余種，免費(fèi)報(bào)刊1307種。 配置有觸摸屏閱報(bào)機(jī)，同時(shí)開(kāi)通試用博看期刊數(shù)據(jù)庫(kù)，該數(shù)據(jù)庫(kù)收錄有3600多種40000多本人文類暢銷報(bào)刊,每天更新期刊80-200種,可以較大程度地滿足我院師生的相關(guān)信息需求。</pre>3.6強(qiáng)調(diào)文本任務(wù)2對(duì)文字進(jìn)行加強(qiáng)描述在對(duì)文本信息進(jìn)行強(qiáng)調(diào)時(shí)，可以使用<b>、<strong>、<i>和<em>標(biāo)記，其中<b>和<strong>對(duì)文本進(jìn)行加粗處理，<i>和<em>對(duì)文本進(jìn)行傾斜處理。1．<b>標(biāo)記<b>標(biāo)記能對(duì)文字進(jìn)行加粗處理，用來(lái)突出文字。此標(biāo)記也是成對(duì)出現(xiàn)的，中間的文本即為要加粗處理的文本，其語(yǔ)法格式如下：<b>加粗突出文本</b>2．<strong>標(biāo)記<strong>標(biāo)記在HTML4.0中為加強(qiáng)強(qiáng)調(diào)文本（strongemphasizedtext），在HTML5中變?yōu)橹匾谋荆╥mportanttext）。其語(yǔ)法格式如下：<strong>重要文本</strong>3.6強(qiáng)調(diào)文本任務(wù)2對(duì)文字進(jìn)行加強(qiáng)描述3．<i>標(biāo)記<i>標(biāo)記原本用于使文本傾斜，現(xiàn)在主要用其來(lái)表示一些與文本不同的部分內(nèi)容。例如，外文及一些專業(yè)術(shù)語(yǔ)等，其語(yǔ)法格式如下：<i>斜體文本</i>4．<em>標(biāo)記<em>標(biāo)記在HTML5中表示強(qiáng)調(diào)文本（emphasizedtext），其語(yǔ)法格式如下<em>強(qiáng)調(diào)文本</em>這4個(gè)突出文檔內(nèi)容的標(biāo)記，從視覺(jué)上看，<b>和<strong>呈現(xiàn)出了文字加粗的效果，<em>和<i>呈現(xiàn)出了文字傾斜的效果，但從定義上看，四者存在著一定的區(qū)別。3.7作品標(biāo)題任務(wù)2對(duì)文字進(jìn)行加強(qiáng)描述在一段文字中有時(shí)會(huì)涉及一些作品名、書(shū)籍名、歌曲名及電視節(jié)目名等標(biāo)題，這時(shí)可以使用<cite>標(biāo)記來(lái)處理。其語(yǔ)法格式如下：<p><cite>《高等數(shù)學(xué)》</cite>是大學(xué)生的必修課。</p>3.8小型文本任務(wù)2對(duì)文字進(jìn)行加強(qiáng)描述在瀏覽網(wǎng)頁(yè)時(shí)，會(huì)發(fā)現(xiàn)在有的網(wǎng)頁(yè)下方有一些注解或者版權(quán)等信息用小型文本進(jìn)行呈現(xiàn)，一般使用<small>來(lái)標(biāo)記小型文本，小型文本不會(huì)忽略文本的強(qiáng)調(diào)也不會(huì)降低重要性。其語(yǔ)法格式如下：<small>舉報(bào)電話：010-XXXXXXX</small>3.9標(biāo)記文本的更改任務(wù)2對(duì)文字進(jìn)行加強(qiáng)描述在編輯HTML文檔時(shí)，可以使用<ins>和<del>標(biāo)記來(lái)描述文檔的更新和修正。通常情況下兩者會(huì)一起使用，<del>表示刪除的文本，呈現(xiàn)出刪除線，<ins>表示更改的文本，呈現(xiàn)出下畫(huà)線。其語(yǔ)法格式如下：<del>刪除的文本</del><ins>插入的更改文本</ins>3.10文本的上下標(biāo)任務(wù)2對(duì)文字進(jìn)行加強(qiáng)描述在對(duì)HTML文本編輯時(shí)，會(huì)遇到設(shè)置文本上下標(biāo)的情況。當(dāng)然，上下標(biāo)的設(shè)置在數(shù)學(xué)相關(guān)公式的編輯上比較常用，一般使用<sub>來(lái)標(biāo)記文本下標(biāo)，<sup>來(lái)標(biāo)記文本上標(biāo)。其語(yǔ)法格式如下：_{文本下標(biāo)}^{文本上標(biāo)}3.11時(shí)間和日期任務(wù)2對(duì)文字進(jìn)行加強(qiáng)描述日期標(biāo)記是HTML5的新增標(biāo)記，網(wǎng)頁(yè)中會(huì)經(jīng)常出現(xiàn)關(guān)于日期的信息，但是一直沒(méi)有標(biāo)準(zhǔn)的方式去標(biāo)記，<time>標(biāo)記就是用來(lái)解決這個(gè)問(wèn)題的，這個(gè)標(biāo)記可以使其他搜索引擎較快、較便捷地獲取到相關(guān)的時(shí)間信息。其語(yǔ)法格式如下：<timedatetime=""pubdate="">元素內(nèi)容</time>其中，datetime屬性用來(lái)定義元素的日期和時(shí)間，如果沒(méi)有定義此屬性，那么就要在元素內(nèi)容中給出時(shí)間信息。pubdate屬性是一個(gè)邏輯值，表示<time>元素中的日期和時(shí)間是否就是文檔的發(fā)布時(shí)間。此標(biāo)記不會(huì)使不同的日期和時(shí)間元素有不同的顯示形式，僅是方便其他搜索引擎獲取相關(guān)的日期和時(shí)間信息。3.12其他相關(guān)元素任務(wù)2對(duì)文字進(jìn)行加強(qiáng)描述除了上面提到的相關(guān)強(qiáng)調(diào)文本標(biāo)記，還有一些標(biāo)記可以使文本信息產(chǎn)生一定的效果，如表所示。標(biāo)記功能描述<dfn>定義一個(gè)定義項(xiàng)目<code>定義計(jì)算機(jī)代碼文本<samp>定義樣本文本<kbd>定義鍵盤(pán)文本<var>定義變量<blockquote>定義另一個(gè)源的塊引用<q>定義一個(gè)短引用<address>定義文檔作者或者作者的聯(lián)系信息<abbr>定義縮寫(xiě)形式<mark>定義帶記號(hào)文本<m>定義突出顯示文本具體任務(wù)任務(wù)2對(duì)文字進(jìn)行加強(qiáng)描述（1）創(chuàng)建一個(gè)HTML頁(yè)面，添加特定文章中的相關(guān)文本內(nèi)容；（2）對(duì)簡(jiǎn)介中的不同內(nèi)容添加不同的強(qiáng)調(diào)標(biāo)記以達(dá)到突出的效果。任務(wù)實(shí)現(xiàn)任務(wù)2對(duì)文字進(jìn)行加強(qiáng)描述（1）在HBuilderX中創(chuàng)建一個(gè)空白的HTML5頁(yè)面，保存為test.html，文檔中包含<head>、<body>等基本的HTML結(jié)構(gòu)，并添加相關(guān)文本內(nèi)容。<!doctypehtml><html><head><metacharset="utf-8"/><title>文本強(qiáng)調(diào)</title></head><body><palign="center">在大學(xué)有個(gè)明確的目標(biāo)很重要</p><palign="center">期次：第1期</p><p>大學(xué)是一個(gè)能鍛煉自己、培養(yǎng)自己、證明自己的地方。但并非每個(gè)人都能得償所愿，在大學(xué)里，我們會(huì)遇到來(lái)自五湖四海的老師和同學(xué)。大學(xué)里也充滿了許多誘惑，一不小心就會(huì)墮落和迷失自己，在大學(xué)里，有個(gè)明確的目標(biāo)很重要！在平時(shí)看《時(shí)代》雜志時(shí)會(huì)希望自己也可以有個(gè)美麗的未來(lái)。</p></body></html>任務(wù)實(shí)現(xiàn)任務(wù)2對(duì)文字進(jìn)行加強(qiáng)描述（2）對(duì)正文段落中的文本信息進(jìn)行不同形式的突出，具體實(shí)現(xiàn)如下：<body><palign="center"><b>在大學(xué)有個(gè)明確的目標(biāo)很重要</b></p><palign="center"><em>期次：第1期</em></p><small><strong>大學(xué)</strong><i>是一個(gè)能鍛煉自己、培養(yǎng)自己、證明自己的地方。</i>但并非每個(gè)人都能得償所愿，在大學(xué)里，我們會(huì)遇到來(lái)自五湖四海的老師和同學(xué)。大學(xué)里也充滿了許多誘惑，一不小心就會(huì)墮落和迷失自己，在大學(xué)里，有個(gè)明確的目標(biāo)很重要！在平時(shí)看<cite>《時(shí)代》</cite>雜志時(shí)會(huì)希望自己也可以有個(gè)美麗的未來(lái)。</small></body>其中，<b>和<strong>為文本加粗突出，<i>和<em>為文本傾斜突出，<cite>表示作品名稱，<small>表示小型文本。任務(wù)實(shí)現(xiàn)任務(wù)2對(duì)文字進(jìn)行加強(qiáng)描述（3）運(yùn)行代碼，最終得到如圖所示的效果。3.13塊級(jí)元素任務(wù)3使用塊級(jí)元素和行內(nèi)元素制作專業(yè)信息頁(yè)面塊級(jí)（block）元素在瀏覽器中的顯示就像在其首尾部都有一個(gè)換行符一樣，常見(jiàn)的塊級(jí)元素如表所示。文檔節(jié)div段落p圍繞元素邊框fieldset表格行tr視頻video文檔節(jié)section無(wú)序列表ul邊框上標(biāo)題legend表格單元格th媒介源source導(dǎo)航nav有序列表ol選擇列表select表格單元td文本軌道track頁(yè)眉header項(xiàng)目li組合選擇列表optgroup表格列屬性col聲音內(nèi)容audio文章article列表dl選擇列表選項(xiàng)option表格格式化列組colgroup換行br文章側(cè)欄aside列表項(xiàng)目dt下拉列表datalist內(nèi)聯(lián)框架iframe水平分割線hr頁(yè)腳footer項(xiàng)目描述dd表格table媒介內(nèi)容分組figure格式文本pre元素的細(xì)節(jié)details命令菜單menu表格標(biāo)題captionfigure標(biāo)題figcaption塊引用blockquotedetails元素可見(jiàn)標(biāo)題summary菜單項(xiàng)目menuitem組合表內(nèi)容thead圖像映射map文檔聯(lián)系信息address對(duì)話窗口dialog命令按鈕command組合主題內(nèi)容tbody圖像區(qū)域area居中文本center標(biāo)題h1~h6表單form組合表注內(nèi)容tfoot圖形容器canvas水平垂直方向插入空間spacer3.13塊級(jí)元素任務(wù)3使用塊級(jí)元素和行內(nèi)元素制作專業(yè)信息頁(yè)面塊級(jí)元素的特點(diǎn)如下：（1）總是在新行上開(kāi)始；（2）高度、行高及外邊距和內(nèi)邊距都可控制；（3）寬度默認(rèn)是其容器的全部（除非設(shè)定一個(gè)寬度）；（4）可以容納行內(nèi)元素和其他塊元素。HTML5新增的塊級(jí)元素包括：header、section、footer、aside、nav、article、figure。3.14行內(nèi)元素任務(wù)3使用塊級(jí)元素和行內(nèi)元素制作專業(yè)信息頁(yè)面行內(nèi)元素（inline，又稱內(nèi)聯(lián)元素）可以出現(xiàn)在某一行句子中，并且不用新起一行，常見(jiàn)的行內(nèi)元素如表所示。內(nèi)聯(lián)容器span大字體big禁止換行nobr錨點(diǎn)a注音rt縮寫(xiě)abbr小字體small單詞換行時(shí)機(jī)wbr圖片img進(jìn)度條progress強(qiáng)調(diào)em上標(biāo)sup打字機(jī)文本tt內(nèi)嵌embed度量meter粗體強(qiáng)調(diào)strong下標(biāo)sub鍵盤(pán)文本kbdinput標(biāo)記label定義變量var突出顯示的文本mark刪除文本del時(shí)間日期time輸入框input計(jì)算機(jī)代碼文本code加粗b刪除線strike引用cite按鈕button計(jì)算機(jī)代碼樣本samp斜體i刪除線s短引用q生成密鑰keygen字段dfn文本方向bdi插入更改的文本ins字體設(shè)置font多行文本輸入框textarea輸出結(jié)果output文字方向bdo下劃線u

3.14行內(nèi)元素任務(wù)3使用塊級(jí)元素和行內(nèi)元素制作專業(yè)信息頁(yè)面行內(nèi)元素的特點(diǎn)如下：（1）和其他元素都在一行上；（2）高、行高及外邊距和內(nèi)邊距不可改變；（3）寬度就是其文字或圖片的寬度，不可改變；（4）只能容納文本或者其他行內(nèi)元素。3.15<span>標(biāo)記任務(wù)3使用塊級(jí)元素和行內(nèi)元素制作專業(yè)信息頁(yè)面一般使用<span>標(biāo)記來(lái)組合文檔中的行內(nèi)元素，如果不對(duì)<span>應(yīng)用樣式，那么span元素中的文本與其他文本不會(huì)有任何視覺(jué)上的差異。盡管如此，span元素仍然可為p元素增加額外的結(jié)構(gòu)。其語(yǔ)法格式如下：<p><span>文本1</span>文本2</p>具體任務(wù)任務(wù)3使用塊級(jí)元素和行內(nèi)元素制作專業(yè)信息頁(yè)面（1）創(chuàng)建一個(gè)HTML5頁(yè)面，添加關(guān)于計(jì)算機(jī)應(yīng)用專業(yè)的信息文本；（2）利用塊級(jí)元素和行內(nèi)元素對(duì)這些文本信息進(jìn)行修飾。任務(wù)實(shí)現(xiàn)任務(wù)3使用塊級(jí)元素和行內(nèi)元素制作專業(yè)信息頁(yè)面（1）在HBuilderX中創(chuàng)建一個(gè)空白的HTML5頁(yè)面，保存為test.html，文檔中包含<head>、<body>等基本的HTML結(jié)構(gòu)，添加專業(yè)信息文本，代碼如下：任務(wù)實(shí)現(xiàn)任務(wù)3使用塊級(jí)元素和行內(nèi)元素制作專業(yè)信息頁(yè)面<!doctypehtml><html><head><metacharset="utf-8"/><title>招聘信息</title></head><body><h1>計(jì)算機(jī)應(yīng)用技術(shù)</h1> <pre>專業(yè)名稱：計(jì)算機(jī)應(yīng)用技術(shù)專業(yè)代碼：610201招生對(duì)象：高中畢業(yè)或3+證書(shū)（文理科） </pre><pre>專業(yè)培養(yǎng)目標(biāo)本專業(yè)以服務(wù)廣東和珠三角地區(qū)經(jīng)濟(jì)社會(huì)發(fā)展為宗旨，面向各類企事業(yè)單位，培養(yǎng)德、智、體、美全面發(fā)展，具有良好的綜合素質(zhì)，系統(tǒng)地掌握計(jì)算機(jī)專業(yè)領(lǐng)域必備的基本理論知識(shí)和基本技能，能夠完成職業(yè)典型工作任務(wù)，具備團(tuán)隊(duì)合作能力、溝通能力和社會(huì)責(zé)任感，能夠直接進(jìn)入相應(yīng)工作崗位，熟練運(yùn)用一到兩種程序設(shè)計(jì)語(yǔ)言，掌握網(wǎng)絡(luò)技術(shù)和計(jì)算機(jī)系統(tǒng)維護(hù)技術(shù)；能從事程序設(shè)計(jì)、數(shù)據(jù)庫(kù)應(yīng)用、計(jì)算機(jī)系統(tǒng)維護(hù)、網(wǎng)頁(yè)制作與網(wǎng)站設(shè)計(jì)、技術(shù)支持與IT產(chǎn)品銷售等工作，具有創(chuàng)新精神、實(shí)踐精神和良好職業(yè)道德的的高等應(yīng)用型技術(shù)人才。</pre><pre>專業(yè)核心能力1．具備編程開(kāi)發(fā)能力，掌握PHP+MySQL或Jsp網(wǎng)絡(luò)編程技術(shù)。2．具有使用Photoshop、Flash進(jìn)行網(wǎng)頁(yè)美工UI設(shè)計(jì)開(kāi)發(fā)能力。3．具有使用HTML、Javascript、AJAX、jQuery等技術(shù)進(jìn)行特效網(wǎng)頁(yè)設(shè)計(jì)能力。4．具備移動(dòng)互聯(lián)網(wǎng)HTML5、CSS3響應(yīng)式移動(dòng)互聯(lián)網(wǎng)開(kāi)發(fā)能力。5．具備精通使用PHP+MySQL或Jsp編程技術(shù)進(jìn)行編碼能力。6．具有基于B/S架構(gòu)的系統(tǒng)開(kāi)發(fā)能力。7．具有Windows和Linux操作系統(tǒng)下軟件布署和優(yōu)化能力。</pre><small>學(xué)校地址</small><small>廣東省東莞市厚街鎮(zhèn)教育園區(qū)學(xué)府路</small></body></html>任務(wù)實(shí)現(xiàn)任務(wù)3使用塊級(jí)元素和行內(nèi)元素制作專業(yè)信息頁(yè)面（2）利用塊級(jí)元素和行內(nèi)元素對(duì)文本信息進(jìn)行修飾，使其更有助于用戶獲取信息，具體實(shí)現(xiàn)如下：其中，<b>為文本加粗突出，<address>表示地址，<br/>表示換行，<h1>表示一級(jí)標(biāo)題。<body><h1>計(jì)算機(jī)應(yīng)用技術(shù)</h1> <pre>專業(yè)名稱：計(jì)算機(jī)應(yīng)用技術(shù)專業(yè)代碼：610201招生對(duì)象：高中畢業(yè)或3+證書(shū)（文理科） </pre><pre><b>專業(yè)培養(yǎng)目標(biāo)</b><br/>本專業(yè)以服務(wù)<b>廣東</b>和<b>珠三角地區(qū)</b>經(jīng)濟(jì)社會(huì)發(fā)展為宗旨，面向各類企事業(yè)單位，培養(yǎng)德、智、體、美全面發(fā)展，具有良好的綜合素質(zhì)，系統(tǒng)地掌握計(jì)算機(jī)專業(yè)領(lǐng)域必備的基本理論知識(shí)和基本技能，能夠完成職業(yè)典型工作任務(wù)，具備團(tuán)隊(duì)合作能力、溝通能力和社會(huì)責(zé)任感，能夠直接進(jìn)入相應(yīng)工作崗位，熟練運(yùn)用一到兩種程序設(shè)計(jì)語(yǔ)言，掌握網(wǎng)絡(luò)技術(shù)和計(jì)算機(jī)系統(tǒng)維護(hù)技術(shù)；能從事程序設(shè)計(jì)、數(shù)據(jù)庫(kù)應(yīng)用、計(jì)算機(jī)系統(tǒng)維護(hù)、網(wǎng)頁(yè)制作與網(wǎng)站設(shè)計(jì)、技術(shù)支持與IT產(chǎn)品銷售等工作，具有創(chuàng)新精神、實(shí)踐精神和良好職業(yè)道德的的高等應(yīng)用型技術(shù)人才。<br/></pre><pre><b>專業(yè)核心能力</b><br/>1．具備編程開(kāi)發(fā)能力，掌握PHP+MySQL或Jsp網(wǎng)絡(luò)編程技術(shù)。<br/>2．具有使用Photoshop、Flash進(jìn)行網(wǎng)頁(yè)美工UI設(shè)計(jì)開(kāi)發(fā)能力。<br/>3．具有使用HTML、Javascript、AJAX、jQuery等技術(shù)進(jìn)行特效網(wǎng)頁(yè)設(shè)計(jì)能力。<br/>4．具備移動(dòng)互聯(lián)網(wǎng)HTML5、CSS3響應(yīng)式移動(dòng)互聯(lián)網(wǎng)開(kāi)發(fā)能力。<br/>5．具備精通使用PHP+MySQL或Jsp編程技術(shù)進(jìn)行編碼能力。<br/>6．具有基于B/S架構(gòu)的系統(tǒng)開(kāi)發(fā)能力。<br/>7．具有Windows和Linux操作系統(tǒng)下軟件布署和優(yōu)化能力。<br/></pre><small>學(xué)校地址</small><small><address>廣東省東莞市厚街鎮(zhèn)教育園區(qū)學(xué)府路</address></small></body>任務(wù)實(shí)現(xiàn)任務(wù)3使用塊級(jí)元素和行內(nèi)元素制作專業(yè)信息頁(yè)面（3）運(yùn)行代碼，最終得到如圖所示的效果。3.16字符實(shí)體任務(wù)4特殊符號(hào)的使用如果要正確地插入一些特殊符號(hào)，或者在插入多個(gè)空格時(shí)能夠正確顯示，那么就一定要插入字符實(shí)體（characterentities）。字符實(shí)體的語(yǔ)法格式一般如下:&實(shí)體名或者&#實(shí)體號(hào)常用的字符實(shí)體如表所示。3.16字符實(shí)體任務(wù)4特殊符號(hào)的使用顯示結(jié)果描述實(shí)體名稱實(shí)體編號(hào)

空格

<小于號(hào)<<>大于號(hào)>>&和號(hào)&&"引號(hào)""'撇號(hào)'(IE不支持)'￠分（cent）￠￠￡鎊（pound）￡￡￥元（yen）￥￥€歐元（euro）€€§小節(jié)§§?版權(quán)（copyright）???注冊(cè)商標(biāo)???商標(biāo)??×乘號(hào)××÷除號(hào)÷÷具體任務(wù)任務(wù)4特殊符號(hào)的使用（1）創(chuàng)建一個(gè)HTML5頁(yè)面，添加反比例函數(shù)單調(diào)區(qū)間文本；（2）對(duì)特殊符號(hào)進(jìn)行修飾。任務(wù)實(shí)現(xiàn)任務(wù)4特殊符號(hào)的使用（1）在HBuilderX中創(chuàng)建一個(gè)空白HTML5頁(yè)面，保存為test.html，文檔中包含<head>、<body>等基本的HTML結(jié)構(gòu)，添加文本信息，并對(duì)其中特殊符號(hào)的書(shū)寫(xiě)進(jìn)行修改：<html><head><metacharset="utf-8"><!--TemplateBeginEditablename="doctitle"--><title>特殊符號(hào)添加</title><!--TemplateEndEditable--><!--TemplateBeginEditablename="head"--><!--TemplateEndEditable--></head><body><p><strong>反比例函數(shù)單調(diào)性</strong><br/>當(dāng)k>0時(shí)，圖象分別位于第一、三象限，每一個(gè)象限內(nèi)，從左往右，y隨x的增大而減??；<br/>當(dāng)k<0時(shí)，圖象分別位于第二、四象限，每一個(gè)象限內(nèi)，從左往右，y隨x的增大而增大。<br/>k>0時(shí)，函數(shù)在x<0上同為減函數(shù)、在x>0上同為減函數(shù)；k<0時(shí)，函數(shù)在x<0上為增函數(shù)、在x>0上同為增函數(shù)。</p></body></html>任務(wù)實(shí)現(xiàn)任務(wù)4特殊符號(hào)的使用（2）運(yùn)行代碼，最終得到如圖所示的效果。3.17旁注任務(wù)5添加注釋HTML5新增了<ruby>、<rt>和<rp>標(biāo)記，<ruby>用來(lái)標(biāo)記需要被旁注的文本，如拼音或解釋。<rt>標(biāo)記定義文本的拼音或解釋，還包括可選的<rp>元素，定義當(dāng)瀏覽器不支持<ruby>元素時(shí)顯示的內(nèi)容。其語(yǔ)法格式如下：<ruby>文本<rt>文本的拼音或解釋</rt></ruby>或者<ruby>文本<rt><rp>(</rp>文本的拼音或解釋<rp>)</rp></rt></ruby>3.18注釋任務(wù)5添加注釋為了提升代碼的可讀性，方便他人理解代碼和對(duì)代碼進(jìn)行維護(hù)，通常對(duì)代碼添加注釋說(shuō)明。添加注釋的語(yǔ)法格式如下：<!--注釋內(nèi)容-->具體任務(wù)任務(wù)5添加注釋（1）創(chuàng)建一個(gè)HTML5頁(yè)面，給漢字添加拼音旁注；（2）在網(wǎng)頁(yè)源代碼中添加注釋。任務(wù)實(shí)現(xiàn)任務(wù)5添加注釋（1）在HBuilderX中創(chuàng)建一個(gè)空白的HTML5頁(yè)面，保存為test.html，文檔中包含<head>、<body>等基本的HTML結(jié)構(gòu)，添加漢字以及旁注。<!doctypehtml><html><head><metacharset="utf-8"><!--TemplateBeginEditablename="doctitle"--><title>旁注</title><!--TemplateEndEditable--><!--TemplateBeginEditablename="head"--><!--TemplateEndEditable--></head><body><ruby>燚<rt>yì</rt></ruby><br/><ruby>燚<rt><rp>(</rp>yì<rp>)</rp></rt></ruby></body></html>任務(wù)實(shí)現(xiàn)任務(wù)5添加注釋（2）為代碼添加注釋。（3）運(yùn)行代碼，最終得到如圖所示的效果。<!doctypehtml><html><head><metacharset="utf-8"><!--TemplateBeginEditablename="doctitle"--><title>旁注</title><!--TemplateEndEditable--><!--TemplateBeginEditablename="head"--><!--TemplateEndEditable--></head>

<body><!--漢字上方添加拼音旁注--><ruby>燚<rt>yì</rt></ruby><br/><!--漢字右側(cè)添加拼音旁注--><ruby>燚<rt><rp>(</rp>yì<rp>)</rp></rt></ruby></body></html>謝謝模塊四網(wǎng)頁(yè)中的圖像與多媒體技術(shù)目錄任務(wù)一制作“在線學(xué)習(xí)網(wǎng)”的平面作品展示頁(yè)面任務(wù)二任務(wù)三制作“在線學(xué)習(xí)網(wǎng)”的廣告作品展示頁(yè)面制作“在線學(xué)習(xí)網(wǎng)”的多媒體作品展示頁(yè)面引入知識(shí)點(diǎn)4.1認(rèn)識(shí)網(wǎng)頁(yè)中的圖像4.2使用<img>標(biāo)記插入圖像任務(wù)1制作“在線學(xué)習(xí)網(wǎng)”的平面作品展示頁(yè)面4.1認(rèn)識(shí)網(wǎng)頁(yè)中的圖像在網(wǎng)絡(luò)帶寬的不斷提升以及人們的審美情趣越來(lái)越高的今天，圖像已經(jīng)成為網(wǎng)頁(yè)中必不可少的重要元素之一。網(wǎng)頁(yè)圖像運(yùn)用的好壞，決定了網(wǎng)頁(yè)設(shè)計(jì)的成敗。任務(wù)1制作“在線學(xué)習(xí)網(wǎng)”的平面作品展示頁(yè)面4.1認(rèn)識(shí)網(wǎng)頁(yè)中的圖像4.1.1網(wǎng)頁(yè)常用圖像格式了解網(wǎng)頁(yè)圖像的類型和格式是在網(wǎng)頁(yè)中合理使用圖像的基礎(chǔ)。圖像的文件格式有很多種，但由于受到網(wǎng)絡(luò)帶寬和瀏覽器的限制，通常在網(wǎng)頁(yè)中使用的有JPEG、GIF和PNG三種。其中JPEG和GIF圖像格式在網(wǎng)頁(yè)上使用最廣，能支持大多數(shù)瀏覽器。任務(wù)1制作“在線學(xué)習(xí)網(wǎng)”的平面作品展示頁(yè)面4.1認(rèn)識(shí)網(wǎng)頁(yè)中的圖像4.1.2網(wǎng)頁(yè)圖像使用原則目前，雖然寬帶在國(guó)內(nèi)普及，但在制作網(wǎng)頁(yè)時(shí)也要在速度和美觀之間取得較好地結(jié)合點(diǎn)。一般普通的首頁(yè)應(yīng)該限制在100KB以內(nèi)，其他頁(yè)面最好控制在500KB以內(nèi)。因?yàn)椋绻粋€(gè)網(wǎng)頁(yè)很大，在瀏覽器里超過(guò)30秒還沒(méi)有打開(kāi)，大部分瀏覽者都會(huì)選擇放棄。任務(wù)1制作“在線學(xué)習(xí)網(wǎng)”的平面作品展示頁(yè)面4.2使用<img>標(biāo)記插入圖像在網(wǎng)頁(yè)中插入圖像可以起到美化頁(yè)面的作用。HTML提供了<img>標(biāo)記來(lái)插入圖像。基本語(yǔ)法格式如下：<imgsrc="圖像文件路徑">任務(wù)1制作“在線學(xué)習(xí)網(wǎng)”的平面作品展示頁(yè)面4.2使用<img>標(biāo)記插入圖像4.2.1使用標(biāo)記屬性設(shè)置圖像大小使用<img>標(biāo)記插入圖像，默認(rèn)情況下將插入原始大小的圖像，如果想在插入時(shí)修改圖像的大小，可以使用height和width屬性來(lái)實(shí)現(xiàn)?；菊Z(yǔ)法格式如下：<imgsrc="圖像文件路徑"width="圖像的寬度"height="圖像的高度">任務(wù)1制作“在線學(xué)習(xí)網(wǎng)”的平面作品展示頁(yè)面4.2使用<img>標(biāo)記插入圖像4.2.2使用標(biāo)記屬性設(shè)置圖像描述信息和替換信息設(shè)置圖像提示信息使用title屬性，設(shè)置圖像的替換信息使用alt屬性?；菊Z(yǔ)法格式如下：<imgsrc="圖像文件的路徑"title="圖像描述信息"alt="圖像替換信息">任務(wù)1制作“在線學(xué)習(xí)網(wǎng)”的平面作品展示頁(yè)面4.2使用<img>標(biāo)記插入圖像4.2.3使用標(biāo)記屬性設(shè)置圖像的邊框默認(rèn)情況下，插入圖像是沒(méi)有邊框的，有時(shí)在我們?cè)O(shè)計(jì)網(wǎng)頁(yè)時(shí)為了獲得某種效果，需要讓圖像顯示邊框。設(shè)置圖像的邊框可以使用圖像的border屬性。基本語(yǔ)法如下：

<imgsrc="圖像文件的路徑"border="邊框?qū)挾?>語(yǔ)法說(shuō)明："邊框?qū)挾?的單位為像素，最小值是1。任務(wù)1制作“在線學(xué)習(xí)網(wǎng)”的平面作品展示頁(yè)面4.2使用<img>標(biāo)記插入圖像4.2.4使用標(biāo)記屬性設(shè)置圖像的對(duì)齊方式默認(rèn)情況下，插入圖像在水平方向放置在對(duì)象的左邊，在垂直方向則與baseline（基線）對(duì)齊。我們可以使用圖像的align屬性修改它的對(duì)齊方式?；菊Z(yǔ)法如下：<imgsrc="圖像文件的路徑"align="對(duì)齊方式">任務(wù)1制作“在線學(xué)習(xí)網(wǎng)”的平面作品展示頁(yè)面4.2使用<img>標(biāo)記插入圖像4.2.5使用標(biāo)記屬性設(shè)置圖像與周圍對(duì)象的間距默認(rèn)情況下，圖像與周圍對(duì)象的水平間距和垂直間距都比較緊湊，顯得較為擁擠。這樣的間距，很多時(shí)候都不符合我們的設(shè)計(jì)需要。使用圖像的hspace屬性和vspace屬性可以分別設(shè)置圖像與周圍對(duì)象的間距?；菊Z(yǔ)法格式如下：<imgsrc=“圖像文件的路徑”vspace=“垂直間距數(shù)值”hspace=“水平間距數(shù)值">任務(wù)1制作“在線學(xué)習(xí)網(wǎng)”的平面作品展示頁(yè)面任務(wù)實(shí)現(xiàn)（1）在“在線學(xué)習(xí)網(wǎng)”平面作品展示頁(yè)面中插入文字和5張平面作品的圖像。（2）設(shè)置文字和圖像的屬性，讓網(wǎng)頁(yè)頁(yè)面更加美觀。任務(wù)1制作“在線學(xué)習(xí)網(wǎng)”的平面作品展示頁(yè)面引入知識(shí)點(diǎn)任務(wù)2制作在“在線學(xué)習(xí)網(wǎng)”的廣告作品展示頁(yè)面4.3使用<object>標(biāo)記在網(wǎng)頁(yè)中插入Flash動(dòng)畫(huà)4.4使用<embed>標(biāo)記在網(wǎng)頁(yè)中插入多媒體內(nèi)容4.3使用<object>標(biāo)記在網(wǎng)頁(yè)中插入Flash動(dòng)畫(huà)<object>標(biāo)記用于包含音頻、視頻、Javaapplets、ActiveX、PDF以及Flash等對(duì)象。<object>標(biāo)記設(shè)計(jì)的初衷是取代<img>和<applet>標(biāo)記。不過(guò)由于漏洞以及缺乏瀏覽器支持，這一點(diǎn)并未實(shí)現(xiàn)。<object>標(biāo)記可用于WindowsIE3.0及以后瀏覽器或者其他支持ActiveX控件的瀏覽器。針對(duì)不同的瀏覽器，<object>標(biāo)記的語(yǔ)法也有所不同，下面分別對(duì)它們進(jìn)行介紹。任務(wù)2制作在“在線學(xué)習(xí)網(wǎng)”的廣告作品展示頁(yè)面1．針對(duì)IE9/IE8/IE7/IE6等低版本，基本語(yǔ)法格式如下：<objectclassid="clsid_value"codebase="url"width="value"><paramname="movie"value="media/star.swf"/><paramname="quality"value="high"/><paramname="wmode"value="transparent"/>…</object>任務(wù)2制作在“在線學(xué)習(xí)網(wǎng)”的廣告作品展示頁(yè)面4.3使用<object>標(biāo)記在網(wǎng)頁(yè)中插入Flash動(dòng)畫(huà)2．針對(duì)IE10/IE11和非IE瀏覽器，基本語(yǔ)法格式如下：<objectclassid="clsid_value"codebase="url"width="value"><paramname="movie"value="media/star.swf"/><paramname="quality"value="high"/><paramname="wmode"value="transparent"/>…<!--[if!IE]>--><objecttype="application/x-shockwave-flash"data="media/star.swf"width="value"height="value"><!--<![endif]--><paramname="quality"value="high"/><paramname="wmode"value="transparent"/>…<!--[if!IE]>--></object><!--<![endif]--></object>任務(wù)2制作在“在線學(xué)習(xí)網(wǎng)”的廣告作品展示頁(yè)面4.3使用<object>標(biāo)記在網(wǎng)頁(yè)中插入Flash動(dòng)畫(huà)<embed>標(biāo)記和<object>標(biāo)記一樣，也可以在網(wǎng)頁(yè)中插入Flash動(dòng)畫(huà)、音頻、視頻等多媒體內(nèi)容。不同于<object>標(biāo)記的是，<embed>標(biāo)記用于NetscapeNavigator2.0及以后的瀏覽器或者其它支持Netscape插件的瀏覽器，其中包括IE和Chrome瀏覽器。Firefox瀏覽器目前還不支持<embed>標(biāo)記?；菊Z(yǔ)法格式如下：<embedsrc="路徑"屬性1=value1屬性2=value2…></embed>任務(wù)2制作在“在線學(xué)習(xí)網(wǎng)”的廣告作品展示頁(yè)面4.4使用<embed>標(biāo)記在網(wǎng)頁(yè)中插入多媒體內(nèi)容任務(wù)實(shí)現(xiàn)（1）使用<object>在“在線學(xué)習(xí)網(wǎng)”廣告作品展示頁(yè)面的頂部位置插入Flash動(dòng)畫(huà)片頭。（2）使用<embed>在“在線學(xué)習(xí)網(wǎng)”廣告作品展示頁(yè)面中插入“vivo智能手機(jī)廣告”視頻作品。任務(wù)2設(shè)置“在線學(xué)習(xí)網(wǎng)”的首頁(yè)文件頭部信息引入知識(shí)點(diǎn)任務(wù)3制作“在線學(xué)習(xí)網(wǎng)”的多媒體作品展示頁(yè)面4.5認(rèn)識(shí)網(wǎng)頁(yè)中的多媒體內(nèi)容4.6使用<video>標(biāo)記在網(wǎng)頁(yè)中插入多媒體內(nèi)容4.7使用<audio>標(biāo)記在網(wǎng)頁(yè)中插入音頻4.5認(rèn)識(shí)網(wǎng)頁(yè)中的多媒體內(nèi)容HTML5提供的視頻、音頻插入方式簡(jiǎn)單易用，主要通過(guò)<video>標(biāo)記和<audio>標(biāo)記在頁(yè)面中插入視頻和音頻文件，這需要正確選擇視頻和音頻格式。任務(wù)3制作“在線學(xué)習(xí)網(wǎng)”的多媒體作品展示頁(yè)面4.5.1網(wǎng)頁(yè)常用視頻格式隨著網(wǎng)速的大幅提高，越來(lái)越多的設(shè)計(jì)者喜歡在網(wǎng)頁(yè)中加入視頻文件。視頻不但使網(wǎng)頁(yè)越來(lái)越精彩及富有動(dòng)感，同時(shí)也越來(lái)越受到瀏覽者的歡迎，像在線影視、視頻教程等。在HTML5中插入的視頻格式常用的包括MPEG4、Ogg、WebM等。任務(wù)3制作“在線學(xué)習(xí)網(wǎng)”的多媒體作品展示頁(yè)面4.5認(rèn)識(shí)網(wǎng)頁(yè)中的多媒體內(nèi)容4.5.2網(wǎng)頁(yè)常用音頻格式人類獲取信息的方式，除了視覺(jué)以外就是聽(tīng)覺(jué)了。為滿足人們聽(tīng)覺(jué)的需求，有時(shí)需要在網(wǎng)頁(yè)中插入聲音元素，包括插入背景音樂(lè)和插入音頻文件等。在HTML5中插入的音頻格式常用的包括MP3、WAV、OggVorbis等，任務(wù)3制作“在線學(xué)習(xí)網(wǎng)”的多媒體作品展示頁(yè)面4.5認(rèn)識(shí)網(wǎng)頁(yè)中的多媒體內(nèi)容4.6使用<video>標(biāo)記在網(wǎng)頁(yè)中插入多媒體內(nèi)容<video>標(biāo)記用于在網(wǎng)頁(yè)中插入視頻和音頻?；菊Z(yǔ)法格式如下：<videosrc="視頻文件或音頻文件的路徑"controls="controls">替代內(nèi)容</video>語(yǔ)法說(shuō)明：src屬性指定多媒體文件，這是一個(gè)必設(shè)屬性。在<video>與</video>之間插入的內(nèi)容是提供不支持<video>標(biāo)記的瀏覽器顯示的。任務(wù)3制作“在線學(xué)習(xí)網(wǎng)”的多媒體作品展示頁(yè)面4.7使用<audio>標(biāo)記在網(wǎng)頁(yè)中插入音頻<audio>用于在網(wǎng)頁(yè)中插入音頻?；菊Z(yǔ)法格式如下：<audiosrc="音頻的路徑"controls="controls">替代內(nèi)容</audio>語(yǔ)法說(shuō)明：src屬性指定多媒體文件，這是一個(gè)必設(shè)屬性。在<audio>與</audio>之間插入的內(nèi)容是提供不支持<audio>標(biāo)記的瀏覽器顯示的。任務(wù)3制作“在線學(xué)習(xí)網(wǎng)”的多媒體作品展示頁(yè)面任務(wù)實(shí)現(xiàn)（1）使用<video>標(biāo)記在“在線學(xué)習(xí)網(wǎng)”多媒體作品展示頁(yè)面中插入視頻作品。（3）使用<audio>標(biāo)記在“在線學(xué)習(xí)網(wǎng)”多媒體作品展示頁(yè)面中插入音頻作品（2）使用<video>標(biāo)記在“在線學(xué)習(xí)網(wǎng)”多媒體作品展示頁(yè)面中插入音頻作品。任務(wù)3制作“在線學(xué)習(xí)網(wǎng)”的多媒體作品展示頁(yè)面謝謝模塊五應(yīng)用表格布局頁(yè)面目錄任務(wù)一任務(wù)二任務(wù)三圖書(shū)借閱詳情頁(yè)面的制作課程表的制作學(xué)院首頁(yè)頁(yè)面的制作引入知識(shí)點(diǎn)任務(wù)1圖書(shū)借閱詳情頁(yè)面的制作5.1表格的基本結(jié)構(gòu)5.2創(chuàng)建表格5.3表格的其他元素任務(wù)1圖書(shū)借閱詳情頁(yè)面的制作5.1表格的基本結(jié)構(gòu)表格是由行和列構(gòu)成的，類似于Excel中的表格，每個(gè)表格均有若干行，每行均有若干列，行和列交叉所圍起來(lái)的區(qū)域稱為單元格，單元格用于存放數(shù)據(jù)，可以存放文本、圖片、水平線、列表、段落、表單、表格等。任務(wù)1圖書(shū)借閱詳情頁(yè)面的制作5.1表格的基本結(jié)構(gòu)表格的基本結(jié)構(gòu)任務(wù)1圖書(shū)借閱詳情頁(yè)面的制作5.2創(chuàng)建表格<table><tr><td>...</td><td>...</td></tr><tr><td>...</td><td>...</td></tr>...</table>基本語(yǔ)法格式表格一般由table元素及一個(gè)或者多個(gè)tr、td元素組成，tr