前端設(shè)計與開發(fā) 課件 模塊2 HTML5語言基礎(chǔ)_第1頁
前端設(shè)計與開發(fā) 課件 模塊2 HTML5語言基礎(chǔ)_第2頁
前端設(shè)計與開發(fā) 課件 模塊2 HTML5語言基礎(chǔ)_第3頁
前端設(shè)計與開發(fā) 課件 模塊2 HTML5語言基礎(chǔ)_第4頁
前端設(shè)計與開發(fā) 課件 模塊2 HTML5語言基礎(chǔ)_第5頁
已閱讀5頁，還剩28頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

模塊2

HTML5語言基礎(chǔ)制作“校史館參觀需知”網(wǎng)頁任務(wù)2.1任務(wù)描述校史館是連接過去與未來的橋梁，是傳承紅色基因、弘揚愛國主義精神的圣地，是培育時代新人、造就社會主義建設(shè)者和接班人的搖籃。通過制作“校史館參觀需知”網(wǎng)頁，引導(dǎo)青年學(xué)子樹立正確的歷史觀、民族觀、國家觀、文化觀，堅定理想信念，不忘初心，牢記使命，為實現(xiàn)中華民族偉大復(fù)興的中國夢貢獻青春力量。任務(wù)分析首先要對HTML5文檔的格式有所了解，然后掌握基本標(biāo)簽和序列標(biāo)簽，最后根據(jù)相關(guān)知識制作“校史館參觀須知”網(wǎng)頁。相關(guān)知識2.1.1HTML5文檔格式HTML5文件包括標(biāo)題、段落、列表、表格、圖像以及各種嵌入對象，其基本文檔格式1.<!DOCTYPEhtml><!DOCTYPEhtml>標(biāo)簽位于文檔的最前面，用于向瀏覽器說明當(dāng)前文檔使用哪種HTML標(biāo)準(zhǔn)規(guī)范。<!DOCTYPEhtml>是HTML5的文檔聲明。只有在開頭使用<!DOCTYPE>聲明，瀏覽器才能將該網(wǎng)頁作為有效的HTML文檔，并按指定的文檔類型進行解析。使用HTML5的DOCTYPE聲明，會觸發(fā)瀏覽器以標(biāo)準(zhǔn)兼容模式來顯示頁面。2.<html></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é)束，在<html></html>標(biāo)簽之間的是文檔的頭部和主體內(nèi)容。3.<head></head>標(biāo)簽<head>標(biāo)簽用于定義HTML文檔的頭部信息，也被稱為頭部標(biāo)簽，緊跟在<html>標(biāo)簽之后，主要用來封裝其他位于文檔頭部的標(biāo)簽，例如<title>，<meta>，<link>及<style>等，用來描述文檔的標(biāo)題、作者、以及與其他文檔的關(guān)系等。一個HTML文檔只能含有一對<head></head>標(biāo)簽，絕大多數(shù)文檔頭部包含的數(shù)據(jù)都不會真正作用為內(nèi)容顯示在頁面中。主要用來幫助瀏覽器或搜索引擎來解析網(wǎng)頁。4.<body></body>標(biāo)簽<body>標(biāo)簽用于定義HTML文檔所要顯示的內(nèi)容，也被稱為主體標(biāo)簽。瀏覽器中現(xiàn)實的所有文本、圖像、音頻和視頻等信息都必須位于<body></body>標(biāo)簽內(nèi)，<body>標(biāo)簽中的信息才是最終展示給用戶看的。一個HTML文檔只能含有一對<body>標(biāo)簽，且<body>標(biāo)簽必須在<html>標(biāo)簽內(nèi)，位于<head>頭部標(biāo)簽之后，與<head>是并列關(guān)系。1.標(biāo)題標(biāo)簽HTML中的基本標(biāo)簽構(gòu)成了網(wǎng)頁的基礎(chǔ)結(jié)構(gòu)，并且每個標(biāo)簽都有其特定的用途。下面介紹一些常用的基本標(biāo)簽HTML標(biāo)題是提升內(nèi)容結(jié)構(gòu)、可讀性和SEO的關(guān)鍵HTML標(biāo)題的重要性HTML標(biāo)題標(biāo)簽<h1>至<h6>代表六級標(biāo)題，字號逐級減小，可用CSS自定義樣式HTML標(biāo)題等級與樣式使用標(biāo)題標(biāo)簽示例代碼如下。HTML標(biāo)題標(biāo)簽示例代碼使用瀏覽器預(yù)覽，其效果如圖2-2所示。瀏覽器預(yù)覽效果描述2.1.2基本標(biāo)簽2.段落標(biāo)簽HTML5中的段落標(biāo)簽與對齊HTML5中，段落由<p></p>標(biāo)簽定義，通過align屬性可設(shè)置段落的對齊方式使用段落標(biāo)簽示例使用段落標(biāo)簽示例代碼如下.效果3.換行標(biāo)簽HTML中的換行標(biāo)簽使用在HTML中通過使用<br>標(biāo)簽來實現(xiàn)換行，該標(biāo)簽的作用與普通文檔里插入回車符的作用相同，都表示強制性換行?？諛?biāo)簽與換行示例空標(biāo)簽不會成對出現(xiàn)，如<br/>和<img/>，它們是不閉合的。換行在代碼中用\n表示4.水平線標(biāo)簽01水平線作用區(qū)分文本內(nèi)容，提升閱讀體驗，標(biāo)示主題變化，美化頁面布局02水平線應(yīng)用文章、報告分隔，網(wǎng)頁內(nèi)容復(fù)雜時使用，調(diào)整屬性美化設(shè)計5.字體樣式標(biāo)簽使用<strong>加粗</strong>突出關(guān)鍵詞，用<em>斜體</em>強調(diào)語義重點，確保文本層次清晰，視覺效果突出標(biāo)題樣式應(yīng)用01正文樣式規(guī)范02段落中融入<mark>高亮</mark>以顯示關(guān)鍵信息，使用<code>代碼塊</code>展示技術(shù)術(shù)語或代碼，增強可讀性加粗顯示加粗文字用于強調(diào)，HTML中用<b></b>或<strong></strong>標(biāo)簽實現(xiàn)斜體作用區(qū)別正常文本，用于引用或強調(diào)，西文常見于書籍、報紙，表達特殊語境如諷刺、幽默字體樣式標(biāo)簽應(yīng)用斜體強調(diào)文本，HTML中<em>和<i>標(biāo)簽實現(xiàn)，示例代碼展示詩歌《春曉》斜體效果在編寫文檔、構(gòu)建網(wǎng)頁或進行數(shù)據(jù)分析時，列表提供了一種清晰且結(jié)構(gòu)化的方式來展示一系列的項目。無論是有序列表（其中每一項都按照特定的順序排列并通常由數(shù)字引導(dǎo)），還是無序列表（其中的內(nèi)容不分先后，只通過符號或圖標(biāo)來分隔條目），都是使信息條理化的關(guān)鍵元素。HTML支持有序列表、無序列表和自定義列表。2.1.3序列標(biāo)簽在編寫文檔、構(gòu)建網(wǎng)頁或進行數(shù)據(jù)分析時，列表提供了一種清晰且結(jié)構(gòu)化的方式來展示一系列的項目。無論是有序列表（其中每一項都按照特定的順序排列并通常由數(shù)字引導(dǎo)），還是無序列表（其中的內(nèi)容不分先后，只通過符號或圖標(biāo)來分隔條目），都是使信息條理化的關(guān)鍵元素。HTML支持有序列表、無序列表和自定義列表。1.無序列表01無序列表以<ul>...</ul>包裹，用<li>標(biāo)簽定義列表項，常用于展示無順序的項目無序列表基本語法02HTML代碼示例，展示了一個包含四句古詩的無序列表無序列表示例代碼03效果2.有序列表有序列表與普通列表的不同之處在于有序列表存在序號，類似于Word中的編號列表。在HTML中，使用<ol>和</ol>標(biāo)簽來分別標(biāo)記有序列表的開始和結(jié)束，其基本語法如下：<ol><li>列表項</li><li>列表項</li>…</ol>3.自定義列表01自定義列表結(jié)構(gòu)使用<dl><dt><dd>標(biāo)簽，<dl>定義列表，<dt>頂層項目，<dd>子項目詳情02自定義列表示例HTML、CSS、JavaScript為示例，展示自定義列表排版效果任務(wù)規(guī)劃在校史館的數(shù)字化建設(shè)過程中，為了方便訪客了解并遵守校史館的參觀規(guī)則，需要設(shè)計并制作一個“校史館參觀需知”網(wǎng)頁。任務(wù)實施（1）打開開發(fā)工具VSCode，在本地磁盤中新建項目文件夾，并命名為school。（2）在VSCode中打開項目文件夾school，在該項目文件夾上右擊，在彈出的快捷菜單中選擇“新建文件”命令，在出現(xiàn)的文本框中輸入文件的名稱“visitingNotice.html”（開發(fā)中文件命名一般要做到見名知意），然后按Tab鍵或Enter鍵完成HTML文件的創(chuàng)建。（3）在<title></title>標(biāo)簽對和<body></body>標(biāo)簽對中分別添加網(wǎng)頁標(biāo)題和段落。（4）在<body></body>標(biāo)簽對中繼續(xù)添加<ol></ol>標(biāo)簽對和參觀須知內(nèi)容（5）在<body></body>標(biāo)簽對中添加<ul></ul>標(biāo)簽對和其他相關(guān)內(nèi)容。制作“家鄉(xiāng)美食及制作流程展示”網(wǎng)頁任務(wù)2.2任務(wù)描述在新時代的背景下，我們要以家鄉(xiāng)美食為載體，傳承和弘揚中華優(yōu)秀傳統(tǒng)文化，傳播正能量，培養(yǎng)家國情懷。讓我們在品嘗美食的過程中，不忘初心，牢記使命，為實現(xiàn)中華民族偉大復(fù)興的中國夢貢獻力量。任務(wù)分析首先了解圖像類型和路徑分類，然后掌握圖像標(biāo)簽、超鏈接標(biāo)簽及鏈接的分類，最后利用相關(guān)知識制作“家鄉(xiāng)美食及制作流程展示”網(wǎng)頁。相關(guān)知識2.2.1圖像類型及圖像標(biāo)簽網(wǎng)頁常用GIF、JPEG等6種格式，GIF、JPEG因文件小、支持廣最常用1.圖像類型JPEG（JointPhotographicExpertsGroup）是一種常用的圖像格式。它通過有損壓縮算法將彩色和灰度圖像的文件大小減小，方便存儲和傳輸。JPEG圖片格式PNG是無損壓縮的網(wǎng)絡(luò)圖像格式，支持透明度，但某些瀏覽器可能需要插件PNG圖像格式01GIF是Web常用的圖像格式，擅長存儲線條、圖標(biāo)，支持動態(tài)、透明和交織圖像，壓縮后最多支持256色GIF圖像格式01BMP格式，常見于多媒體演示和視頻輸出，能展現(xiàn)16M色彩的豐富圖像BMP圖像格式02TIFF格式適用于高色彩圖像，支持24個通道及多于4個通道的數(shù)據(jù)，常用于印刷和高質(zhì)量輸出TIFF圖像格式03TGA格式，與TIFF一樣，用于處理高質(zhì)量色彩通道圖形；PDD、PSD格式常用于存儲包含通道的RGB圖像TGA（Targa）042.圖像標(biāo)簽圖像在網(wǎng)頁設(shè)計中的作用圖像在網(wǎng)頁設(shè)計中扮演關(guān)鍵角色，通過直觀展示內(nèi)容、吸引用戶注意、增強視覺效果和引發(fā)情感共鳴，提升用戶體驗0102HTML中的圖像標(biāo)簽<img>標(biāo)簽用于插入圖像，屬性包括src、alt、height、width、title、ismap和usemap，常用于設(shè)置圖像路徑和提供額外信息2.2.2路徑分類1.絕對路徑：從根目錄開始，完整寫出文件位置，適用于所有網(wǎng)站鏈接HTML文件路徑類型2.相對路徑：基于當(dāng)前文件位置，相對指明所需文件位置，簡化內(nèi)部鏈接路徑1.相對文件路徑父子關(guān)系路徑引用：上一級使用../，下一級使用/。如網(wǎng)頁1引入bg2.jpg，寫成src=“../bg2.jpg”；網(wǎng)頁2引入bg1.jpg，寫成src="img/bg1.jpg"父子關(guān)系路徑引用同一文件夾下的文件是兄弟關(guān)系，可直接引用，如網(wǎng)頁2.html引用bg2.jpg，src="bg2.jpg"兄弟關(guān)系路徑引用相對路徑是描述文件與當(dāng)前位置的關(guān)系，用于指向其他文件或文件夾的路徑相對路徑基礎(chǔ)概念絕對路徑是文件在硬盤上的完全路徑，包括盤符和正斜杠或反斜杠分隔的目錄名2.絕對文件路徑2.2.3鏈接標(biāo)簽超鏈接是HTML中用于連接網(wǎng)頁的元素，它使用戶能從一個頁面跳轉(zhuǎn)至另一個頁面，實現(xiàn)網(wǎng)頁間的導(dǎo)航超鏈接概述與作用01HTML5的<a>標(biāo)簽用于創(chuàng)建超鏈接，基本格式：<ahref=URL>鏈接內(nèi)容</a>，點擊內(nèi)容可跳轉(zhuǎn)至新頁面或當(dāng)前頁面的特定位置HTML5超鏈接結(jié)構(gòu)特性02默認(rèn)瀏覽器中，未訪問鏈接是藍色加下劃線，已訪問過的鏈接是紫色加下劃線，點擊時顯示為紅色加下劃線鏈接在瀏覽器中的顯示效果03<a>標(biāo)簽的屬性包括：href用于指定鏈接的URL，target決定瀏覽器如何打開鏈接，title提供額外信息，rel定義與目標(biāo)的關(guān)系<a>標(biāo)簽的屬性詳解042.2.4鏈接的分類1.文本鏈接文本鏈接使用<a>標(biāo)簽，如：<ahref="">訪問示例網(wǎng)站</a>，有四種狀態(tài)：普通、鼠標(biāo)滑過、單擊和已訪問2.圖像鏈接將圖像設(shè)置為鏈接的代碼示例：`<ahref="URL"><imgsrc="example.jpg"alt="描述"></a>`3.錨點鏈接創(chuàng)建內(nèi)部鏈接以在頁面內(nèi)跳轉(zhuǎn)，如：<ahref="#section2">跳轉(zhuǎn)到第二部分</a>，目標(biāo)位置使用<aname="section2"></a>定義標(biāo)簽5.新窗口鏈接在HTML中，使用<a>標(biāo)簽的target屬性可控制鏈接在新窗口或當(dāng)前窗口打開，例如"_blank"表示在新窗口打開4.下載鏈接使用download屬性可使鏈接變?yōu)槲募螺d，例如：<ahref="document.pdf"download>下載文檔</a>任務(wù)規(guī)劃通過網(wǎng)頁的形式全面、生動、詳盡地展示你家鄉(xiāng)的代表性美食，展現(xiàn)你家鄉(xiāng)獨特的飲食文化，讓更多的人了解和認(rèn)識你的家鄉(xiāng)。詳細(xì)介紹每一道美食的歷史淵源、食材選擇、制作步驟、口感特點等，通過高品質(zhì)的內(nèi)容輸出，提升家鄉(xiāng)美食的知名度和影響力，吸引游客前來品嘗，助力本地餐飲業(yè)和旅游業(yè)的發(fā)展。任務(wù)實施（1）打開開發(fā)工具VSCode，在本地磁盤中新建項目文件夾，并命名為hometown。（2）在VSCode中打開項目文件夾hometown，在該項目文件夾上右擊，在彈出的快捷菜單中選擇“新建文件”命令，在出現(xiàn)的文本框中輸入文件的名稱“foodList.html”（開發(fā)中文件命名一般要做到見名知意），然后按Tab鍵或Enter鍵完成HTML文件的創(chuàng)建。（3）單擊foodList.html文件，進入代碼編輯窗口。在<title></title>標(biāo)簽對中設(shè)置網(wǎng)頁的標(biāo)題為“家鄉(xiāng)美食列表”。（4）在<body></body>標(biāo)簽對中添加一級標(biāo)題“家鄉(xiāng)美食列表”。（5）在<body></body>標(biāo)簽對中插入第一道美食的圖片、名稱、描述、詳細(xì)制作流程的超鏈接，并設(shè)置好相關(guān)屬性，同時將美食圖片的源文件放入項目文件夾hometown下的img文件夾。（6）繼續(xù)在<body></body>標(biāo)簽中插入水平線，以及第二道美食的圖片、名稱、描述、詳細(xì)制作流程的超鏈接，并設(shè)置

溫馨提示

  • 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

提交評論