任務(wù)2 搭建簡單學(xué)院網(wǎng)站_第1頁
任務(wù)2 搭建簡單學(xué)院網(wǎng)站_第2頁
任務(wù)2 搭建簡單學(xué)院網(wǎng)站_第3頁
任務(wù)2 搭建簡單學(xué)院網(wǎng)站_第4頁
任務(wù)2 搭建簡單學(xué)院網(wǎng)站_第5頁
已閱讀5頁，還剩68頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

任務(wù)2搭建簡單學(xué)院網(wǎng)站W(wǎng)eb前端開發(fā)案例教程HTML5+CSS3微課版制作網(wǎng)站是從搭建網(wǎng)頁結(jié)構(gòu)開始的，本項目使用HTML5語言常用標(biāo)記構(gòu)建網(wǎng)頁內(nèi)容，分別創(chuàng)建網(wǎng)站主頁、學(xué)院簡介頁面、學(xué)院新聞頁面、新聞詳情頁面。使用文本標(biāo)記、圖像標(biāo)記、超鏈接標(biāo)記、列表標(biāo)記等知識點實現(xiàn)頁面的創(chuàng)建，通過該任務(wù)的實現(xiàn)，掌握HTML5網(wǎng)頁的基本結(jié)構(gòu)、HTML5的語法、常用的HTML5標(biāo)記等。任務(wù)3搭建簡單學(xué)院網(wǎng)站任務(wù)2任務(wù)效果圖2-1網(wǎng)站首頁圖2-2學(xué)院簡介頁面綜合利用HTML5標(biāo)記，搭建一個簡單的學(xué)院網(wǎng)站，頁面瀏覽效果如圖2-1～圖2-4所示。任務(wù)效果圖2-3學(xué)院新聞頁面圖2-4新聞詳情頁面知識點

HTML5文檔基本結(jié)構(gòu)01HTML標(biāo)記及屬性02HTML文本標(biāo)記03HTML列表標(biāo)記04

HTML超鏈接標(biāo)記05HTML圖像標(biāo)記06任務(wù)3搭建簡單學(xué)院網(wǎng)頁任務(wù)22.2.1HTML5文檔的基本結(jié)構(gòu)使用HBuilderX新建網(wǎng)頁文件時會自動生成一些源代碼，這些自帶的源代碼構(gòu)成了HTML5文檔的基本結(jié)構(gòu)。2.2.1HTML5文檔的基本結(jié)構(gòu)

京東網(wǎng)主頁

京東網(wǎng)主頁源代碼查看網(wǎng)頁文件源代碼的方法：在頁面上右擊，選擇“查看源代碼”。2.2.1HTML5文檔的基本結(jié)構(gòu)HTML5文檔類型聲明文檔的開始標(biāo)記頭部的開始標(biāo)記元數(shù)據(jù)標(biāo)記標(biāo)題標(biāo)記頭部結(jié)束標(biāo)記主體開始標(biāo)記主體結(jié)束標(biāo)記文檔的結(jié)束標(biāo)記文檔類型聲明，位于文檔的最前面，用于向瀏覽器說明當(dāng)前文檔使用哪種HTML標(biāo)準(zhǔn)規(guī)范。HTML5文檔中的文檔類型聲明代碼如下。<！DOCTYPE><!DOCTYPEhtml>2.2.1HTML5文檔的基本結(jié)構(gòu)<html>標(biāo)記標(biāo)志著HTML文檔的開始，</html>標(biāo)記標(biāo)志著HTML文檔的結(jié)束。在它們之間的是文檔的頭部和主體內(nèi)容。<html>標(biāo)記2.2.1HTML5文檔的基本結(jié)構(gòu)<head>標(biāo)記用于定義HTML文檔的頭部信息，也稱為頭部標(biāo)記。<head>標(biāo)記緊接在<html>標(biāo)記之后，主要用來封裝其他位于文檔頭部的標(biāo)記，例如，<title>、<meta>、<link>和<style>等用來描述文檔的標(biāo)題、作者以及樣式等。一個HTML文檔只能含有一對<head>標(biāo)記。<head>標(biāo)記2.2.1HTML5文檔的基本結(jié)構(gòu)<body>標(biāo)記用于定義HTML文檔所要顯示的內(nèi)容，也稱為主體標(biāo)記。瀏覽器中顯示的所有文本、圖像、音頻和視頻等信息都必須位于<body>標(biāo)記內(nèi)。一個HTML文檔只能含有一對<body>標(biāo)記，且<body>標(biāo)記必須在<html>標(biāo)記內(nèi)，位于<head>標(biāo)記之后，與<head>標(biāo)記有并列關(guān)系。<body>標(biāo)記2.2.1HTML5文檔的基本結(jié)構(gòu)<html>標(biāo)記、<head>標(biāo)記和<body>標(biāo)記都是HTML文檔中的基本標(biāo)記，除了這些標(biāo)記之外，HTML5還提供了大量其他標(biāo)記，下面對標(biāo)記及標(biāo)記中的屬性進(jìn)行簡要說明。2.2.2HTML標(biāo)記及其屬性標(biāo)記2.2.2HTML標(biāo)記及其屬性標(biāo)記的屬性2.2.2HTML標(biāo)記及其屬性<標(biāo)記屬性1="屬性值1"屬性2="屬性值2"...>受標(biāo)記影響的內(nèi)容</標(biāo)記>標(biāo)記可以通過不同的屬性展現(xiàn)各種效果，屬性在標(biāo)記中的使用格式如下。例如，<ahref="">未來信息學(xué)院</a>標(biāo)記的屬性2.2.2HTML標(biāo)記及其屬性注釋標(biāo)記2.2.2HTML標(biāo)記及其屬性<!--注釋文字-->如果需要在HTML文檔中添加一些便于讀者閱讀和理解，但又不需要顯示在頁面中的注釋文字，就需要使用注釋標(biāo)記。其基本語法格式如下。例如，<ahref="">未來信息學(xué)院</a><!--給文字設(shè)置超鏈接-->標(biāo)題標(biāo)記2.2.3HTML文本標(biāo)記<hn>標(biāo)題文字</hn>標(biāo)題標(biāo)記基本語法格式如下。用于設(shè)置文檔中的標(biāo)題，其中n表示1～6的數(shù)字，分別表示一～六級標(biāo)題，<h1>表示一級標(biāo)題，<h6>表示六級標(biāo)題。標(biāo)題標(biāo)記2.2.3HTML文本標(biāo)記例：example02.html段落標(biāo)記2.2.3HTML文本標(biāo)記<p>段落文字</p>段落標(biāo)記基本語法格式如下?！皃”是英文“paragraph”（段落）的縮寫。<p>和</p>之間的文字表示一個段落，多個段落需要用多對<p>標(biāo)記。段落標(biāo)記2.2.3HTML文本標(biāo)記例：example03.html水平線標(biāo)記2.2.3HTML文本標(biāo)記<hr>水平線標(biāo)記基本語法格式如下?！癶r”是英文“horizontalrule”（水平線）的縮寫，其作用是繪制一條水平線。該標(biāo)記為單標(biāo)記。水平線標(biāo)記2.2.3HTML文本標(biāo)記例：example04.html換行標(biāo)記2.2.3HTML文本標(biāo)記<br>換行標(biāo)記基本語法格式如下?！癰r”是英文“break”的縮寫，其作用是強(qiáng)制換行。該標(biāo)記為單標(biāo)記。換行標(biāo)記2.2.3HTML文本標(biāo)記例：example05.html字體樣式標(biāo)記2.2.3HTML文本標(biāo)記字體樣式標(biāo)記可以設(shè)置文字的粗體、斜體、刪除線和下畫線效果。字體樣式標(biāo)記2.2.3HTML文本標(biāo)記例：example06.html特殊字符2.2.3HTML文本標(biāo)記在網(wǎng)頁設(shè)計過程中，除了顯示文字以外，有時還需要插入一些特殊的字符，如版權(quán)符號、注冊商標(biāo)、貨幣符號等。這些字符需要用一些符號代碼來表示。特殊字符符號代碼備注空格

表示一個英文字符的空格>>大于號<<小于號??版權(quán)符號??注冊商標(biāo)￥￥人民幣符號特殊字符2.2.3HTML文本標(biāo)記例：example07.html無序列表2.2.4HTML列表標(biāo)記無序列表的基本語法格式如下。<ul><li>列表項1</li><li>列表項2</li><li>列表項3</li>...</ul>ul是英文“unorderedlist”（無序列表）的縮寫。瀏覽器在顯示無序列表時，會以特定的項目符號對列表項進(jìn)行排列。無序列表2.2.4HTML列表標(biāo)記例：example08.html有序列表2.2.4HTML列表標(biāo)記有序列表的基本語法格式如下。<ol><li>列表項1</li><li>列表項2</li><li>列表項3</li>...</ol>ol是英文“orderedlist”（有序列表）的縮寫。瀏覽器在顯示有序列表時，會用數(shù)字對列表項進(jìn)行排列。有序列表2.2.4HTML列表標(biāo)記例：example09.html。列表嵌套2.2.4HTML列表標(biāo)記在HTML中可以實現(xiàn)列表的嵌套，也就是說，無序列表或有序列表的列表項中還可以包含有序列表或無序列表。列表嵌套2.2.4HTML列表標(biāo)記例：example10.html。自定義列表2.2.4HTML列表標(biāo)記自定義列表用于對條目或術(shù)語進(jìn)行解釋或描述。與無序列表和有序列表的列表項不同，自定義列表的列表項前沒有任何項目符號或數(shù)字。自定義列表2.2.4HTML列表標(biāo)記自定義列表的基本語法格式如下。<dl><dt>條目1</dt><dd>數(shù)據(jù)</dd><dd>數(shù)據(jù)</dd>...<dt>條目2</dt><dd>數(shù)據(jù)</dd><dd>數(shù)據(jù)</dd>...</dl>dl是英文“definitionlist”（定義列表）的縮寫。dt是“definitionterm”（定義項）的縮

寫，表示條目名稱；dd是“definitiondata”（定義數(shù)據(jù)）的縮寫，表示條目的數(shù)據(jù)內(nèi)容。自定義列表2.2.4HTML列表標(biāo)記<dl>標(biāo)記中可以有多對<dt>標(biāo)記，每對<dt>標(biāo)記下可以有多對<dd>標(biāo)記。自定義列表在顯示時，條目的數(shù)據(jù)內(nèi)容會自動縮進(jìn)，使列表結(jié)構(gòu)更加清晰。自定義列表2.2.4HTML列表標(biāo)記例：example11.html超鏈接一般有以下幾種形式2.2.5HTML超鏈接標(biāo)記2.2.5HTML超鏈接標(biāo)記超鏈接的語法格式如下。<ahref="目標(biāo)地址"target="目標(biāo)窗口"title="提示文本">熱點文字</a>說明：（1）href：定義超鏈接指向的文檔的

URL，URL

可以是絕對

URL，也可以是相對URL。①

絕對URL：也稱絕對路徑，是指資源的完整地址，包含協(xié)議名稱、計算機(jī)域名以及路徑等。代碼如下。<ahref="">百度</a>2.2.5HTML超鏈接標(biāo)記②

相對URL：也稱相對路徑，是指目標(biāo)地址相對當(dāng)前頁面的路徑。代碼如下。<ahref="webs/page1.html">熱點文字</a>webs/page1.html表示page1.html是在當(dāng)前目錄下webs子目錄中的文件。若目標(biāo)文件在當(dāng)前目錄的上一級目錄中，則應(yīng)該寫成下面的格式。<ahref="../page1.html">熱點文字</a>其中，..表示當(dāng)前目錄的上一級目錄。2.2.5HTML超鏈接標(biāo)記（2）target：定義超鏈接的目標(biāo)文件在哪個窗口打開。其常用取值有_blank和_self。_blank表示在新的瀏覽器窗口打開；_self表示在原來的窗口打開，_self是默認(rèn)取值。（3）title：定義鼠標(biāo)指針指向超鏈接文字時顯示的提示文字。例如，<ahref="news1.html"title="學(xué)院2023年新年賀詞：風(fēng)正勁帆高揚提質(zhì)培優(yōu)譜新篇">學(xué)院2021年新年賀詞…</a>

頁面間的超鏈接2.2.5HTML超鏈接標(biāo)記例：example12_1.html和example12_2.html，通過超鏈接實現(xiàn)兩個頁面的相互跳轉(zhuǎn)。代碼略。錨點鏈接2.2.5HTML超鏈接標(biāo)記當(dāng)同一頁面中內(nèi)容較多，瀏覽時需要不斷拖動滾動條來查看內(nèi)容時，為了提高信息檢索速度，可以在頁面上創(chuàng)建錨點鏈接來快速定位到要查看的內(nèi)容。創(chuàng)建錨點鏈接需要以下兩步。第一步：定義錨點的位置，使用id="錨點名稱"來標(biāo)注。第二步：創(chuàng)建指向錨點的鏈接，使用格式<ahref="#錨點名稱">熱點文字</a>。錨點鏈接2.2.5HTML超鏈接標(biāo)記例：example13.html代碼略。空鏈接2.2.5HTML超鏈接標(biāo)記空鏈接的語法格式如下。<ahref="#">熱點文字</a>單擊空鏈接時不進(jìn)行任何跳轉(zhuǎn)。在制作網(wǎng)頁時，如果暫時無法確定超鏈接的目標(biāo)文件，就可以將其建立為空鏈接。說明：常用的Web圖像格式2.2.6HTML圖像標(biāo)記常用的Web圖像格式2.2.6HTML圖像標(biāo)記顯示顏色豐富特別為照片設(shè)計的的文件格式

有損壓縮的圖像格式JPG格式常用的Web圖像格式2.2.6HTML圖像標(biāo)記支持動畫制作LOGO、小圖標(biāo)等相對單一的圖像支持透明無損壓縮GIF格式常用的Web圖像格式2.2.6HTML圖像標(biāo)記體積更小不支持動畫顏色過渡更光滑支持alpha透明PNG格式圖像標(biāo)記2.2.6HTML圖像標(biāo)記<imgsrc="圖像路徑"alt="替換文本"title="提示文本"width="圖像寬度"height="圖像高度">語法格式：說明：height屬性設(shè)置圖像的高度。src屬性設(shè)置圖像的來源，必需屬性。alt屬性圖像不能顯示時的替換文本，必需屬性。width屬性設(shè)置圖像的寬度。title屬性鼠標(biāo)指向圖像時顯示的文本。圖像標(biāo)記2.2.6HTML圖像標(biāo)記例：example14.html給圖像創(chuàng)建超鏈接2.2.6HTML圖像標(biāo)記例：example15.html給圖像創(chuàng)建超鏈接2.2.6HTML圖像標(biāo)記效果如圖所示。

單擊百度Logo跳轉(zhuǎn)到百度網(wǎng)站單擊第二個圖像跳轉(zhuǎn)到圖像本身任務(wù)3搭建簡單學(xué)院網(wǎng)站任務(wù)22.3.1創(chuàng)建項目簡單學(xué)院網(wǎng)站由多個頁面構(gòu)成，而且用到了圖像，為了便于操作和組織這些文件，先創(chuàng)建網(wǎng)站項目。打開HBuilderX工具，右擊項目名稱chapter02，選擇“新建”|“目錄”選項，創(chuàng)建目錄school。2.3.1創(chuàng)建項目右擊目錄名稱school，選擇“新建”|“目錄”選項，創(chuàng)建目錄images，用于存放圖像文件，把本任務(wù)提供的素材中的圖像復(fù)制到該目錄中。2.3.2創(chuàng)建網(wǎng)站首頁下面對首頁的結(jié)構(gòu)進(jìn)行分析，然后在項目中創(chuàng)建頁面文件，使用HTML相應(yīng)標(biāo)記添加頁面的內(nèi)容。頁面分析2.3.2創(chuàng)建網(wǎng)站首頁標(biāo)題水平線段落（包含換行）圖像超鏈接版權(quán)信息創(chuàng)

溫馨提示

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

最新文檔

評論

0/150

提交評論