《前端設計與開發(fā)》高職全套教學課件

《前端設計與開發(fā)》模塊1Web基礎知識模塊2HTML5語言基礎模塊3HTML5中新增的標簽及屬性模塊4CSS基礎模塊5盒子模型及應用模塊6HTML5的表單及應用模塊7網(wǎng)頁多媒體元素及應用模塊8JavaScript基礎模塊9綜合實戰(zhàn)全套可編輯PPT課件

本課件是可編輯的正常PPT課件模塊1Web基礎知識本課件是可編輯的正常PPT課件“尋找家鄉(xiāng)記憶”網(wǎng)站制作準備任務1.1本課件是可編輯的正常PPT課件任務描述家鄉(xiāng)是夢想出發(fā)的地方，情系家鄉(xiāng)沉淀依戀，是當代學子寄托鄉(xiāng)愁、找尋鼓舞力量的地方。家鄉(xiāng)的一聲鄉(xiāng)音、一彎明月、美景、名人古跡等無不承載著在外學子的鄉(xiāng)源情懷。通過整理素材，了解家鄉(xiāng)的文化歷史，厚植鄉(xiāng)源情懷；通過制作網(wǎng)頁，將家鄉(xiāng)厚重歷史挖掘和宣傳相結合，以專業(yè)系家鄉(xiāng)情源。任務分析在創(chuàng)建“尋找家鄉(xiāng)記憶”網(wǎng)站之前，首先要對網(wǎng)頁、網(wǎng)站及網(wǎng)頁的基本構成元素有所了解，然后選擇并安裝一款適合的網(wǎng)頁開發(fā)工具、掌握網(wǎng)站的建設流程，最后建立站點并根據(jù)需要創(chuàng)建目錄、整理素材。相關知識網(wǎng)頁和網(wǎng)站是兩個相關但不同的概念，網(wǎng)站就是網(wǎng)頁的集合。也就是說，網(wǎng)站的設計者先把整個網(wǎng)站的結構規(guī)劃好，再依據(jù)結構制作出不同的網(wǎng)頁，并讓網(wǎng)頁間彼此相連，這種完整的結構就稱為“網(wǎng)站”。本課件是可編輯的正常PPT課件1.1.1認識網(wǎng)頁網(wǎng)頁基礎概念01網(wǎng)頁定義網(wǎng)頁是互聯(lián)網(wǎng)上由HTML等語言編寫的頁面，經(jīng)瀏覽器編譯展示信息，含文字、圖像、動畫等元素02首頁功能首頁是網(wǎng)站的門面，負責導航和展示最新消息，引導瀏覽者快速找到感興趣的主題并跳轉(zhuǎn)至詳細內(nèi)容本課件是可編輯的正常PPT課件1.1.2網(wǎng)頁與網(wǎng)站靜態(tài)網(wǎng)頁與動態(tài)網(wǎng)頁內(nèi)容固定，需手動更新HTML，維護困難，信息更新慢靜態(tài)網(wǎng)頁內(nèi)容視覺動態(tài)如.GIF動畫，無交互，功能限制大，搜索引擎友好靜態(tài)網(wǎng)頁動態(tài)效果無數(shù)據(jù)庫支持，信息量大時維護困難，交互性差靜態(tài)網(wǎng)頁維護本課件是可編輯的正常PPT課件動態(tài)網(wǎng)頁的特點01動態(tài)網(wǎng)頁定義服務器根據(jù)用戶請求生成內(nèi)容，與數(shù)據(jù)庫交互，使用ASP、JSP、PHP等技術02動態(tài)網(wǎng)頁特點基于數(shù)據(jù)庫，減少維護，實現(xiàn)用戶注冊、登錄等功能，按需生成頁面本課件是可編輯的正常PPT課件網(wǎng)頁是網(wǎng)站的組成部分，網(wǎng)站由多個網(wǎng)頁集合而成，如新浪網(wǎng)含新聞、財經(jīng)等多板塊，每個板塊有多網(wǎng)頁網(wǎng)頁是單一頁面，網(wǎng)站是多個網(wǎng)頁的集合，網(wǎng)站有整體結構和導航，網(wǎng)頁則側(cè)重內(nèi)容展示，二者在規(guī)模和功能上存在差異網(wǎng)頁是展示網(wǎng)站內(nèi)容和功能的頁面，由HTML、CSS、JavaScript等語言編寫，可包含文章、圖片、音頻或視頻等元素網(wǎng)頁展示信息、播放多媒體，還提供交互功能如在線購物、用戶認證。網(wǎng)站是這些網(wǎng)頁的集合，包含豐富媒體資源和后臺技術，構成互聯(lián)網(wǎng)應用生態(tài)系統(tǒng)網(wǎng)頁與網(wǎng)站基礎網(wǎng)頁與網(wǎng)站區(qū)別內(nèi)容功能網(wǎng)頁是獨立的HTML文件或網(wǎng)址部分，網(wǎng)站是多個相關聯(lián)網(wǎng)頁的整體，彼此可相互鏈接獨立性本課件是可編輯的正常PPT課件1.1.3網(wǎng)頁的基本構成元素網(wǎng)頁包含了許多元素，內(nèi)容豐富，引人入勝，其基本構成元素包括文本、圖像、多媒體、超鏈接等1.文本網(wǎng)頁主要通過文字傳達信息，可設置字體、字號、顏色等屬性改變文本視覺效果本課件是可編輯的正常PPT課件2.圖像圖像可以用來豐富網(wǎng)頁的內(nèi)容，提高用戶體驗。通過插入圖片，可以讓網(wǎng)頁更加生動、直觀，讓用戶更容易理解網(wǎng)頁的內(nèi)容。同時，圖片也可以用來美化網(wǎng)頁，讓網(wǎng)頁看起來更加吸引人。在網(wǎng)頁中可以使用GIF、JPEG、BMP、TIFF和PNG等格式的圖像文件。本課件是可編輯的正常PPT課件多媒體是計算機結合聲音、圖像、視頻等信息載體的交互技術，網(wǎng)頁中的多媒體常指音頻和視頻功能3.多媒體超鏈接是網(wǎng)頁中指向其他網(wǎng)頁或位置的鏈接關系，按路徑可分為內(nèi)部、錨點和外部鏈接4.超鏈接本課件是可編輯的正常PPT課件1.1.4網(wǎng)站建設流程在建設網(wǎng)站之前應該有一個整體的規(guī)劃和目標。在規(guī)劃好網(wǎng)頁的大概結構后，就可以著手設計頁面了。因此，前期策劃對網(wǎng)站的運作至關重要。在規(guī)劃一個網(wǎng)站時，可以使用網(wǎng)站制作流程圖，先把每個頁面的內(nèi)容大致列出來本課件是可編輯的正常PPT課件1.分析客戶需求明確網(wǎng)站目標，與客戶溝通網(wǎng)站主題，是制作網(wǎng)站前的關鍵步驟本課件是可編輯的正常PPT課件2.規(guī)劃站點01網(wǎng)站規(guī)劃結構采用樹形目錄結構，如家鄉(xiāng)記憶網(wǎng)站，規(guī)劃家鄉(xiāng)簡介、美食、風景、人物等一級目錄，每個最低級模塊對應一個網(wǎng)頁，包含文字、圖片、動畫等元素02文件存放方式每個一級模塊對應一個文件夾，下設圖片、動畫等子文件夾，共用部分單獨存放，便于管理和使用本課件是可編輯的正常PPT課件3.搜集素材搜集素材是創(chuàng)建網(wǎng)站的關鍵步驟，包括圖片、文字、音頻、視頻和動畫，它們能豐富網(wǎng)站內(nèi)容，吸引瀏覽者本課件是可編輯的正常PPT課件4.頁面設計根據(jù)客戶需求和品牌形象創(chuàng)建頁面布局，考慮顏色方案、圖像元素和交互元素，確保設計符合網(wǎng)站受眾喜好常見網(wǎng)頁布局形式包括“廠”字型、清晰主次，適合企業(yè)二級頁面；“口”字型，布局緊湊信息豐富；“同”字型，適用于大型網(wǎng)站首頁；“海報”型，吸引人但下載慢；“三”字型，視覺沖擊強；“框架”型，結構清晰一目了然本課件是可編輯的正常PPT課件本課件是可編輯的正常PPT課件前端頁面開發(fā)完成后，程序員進行后臺程序開發(fā)，依據(jù)設計師和前端工程師的成果編寫代碼5.程序開發(fā)網(wǎng)站發(fā)布后需持續(xù)維護和更新，以確保運行順暢和內(nèi)容的新鮮度，吸引并保持用戶訪問7.后期維護及更新完成網(wǎng)頁設計后，需進行功能性測試、完整性測試和安全性測試，以確保所有鏈接正常工作，并兼容各種設備和瀏覽器6.測試網(wǎng)站本課件是可編輯的正常PPT課件1.1.5網(wǎng)頁的設計基礎1.網(wǎng)頁設計的基本原則網(wǎng)站內(nèi)容應合理分類，便于訪問者快速定位，提升用戶體驗分類合理網(wǎng)站設計需圍繞明確主題，所有頁面緊扣目的，確保內(nèi)容聚焦主題明確首頁設計至關重要，直接影響第一印象，需精心布局吸引訪問者首頁設計本課件是可編輯的正常PPT課件互動性良好及時更新和維護避免濫用技術圖像應用技巧良好互動性增強用戶參與感，設計應響應用戶操作，提升網(wǎng)站吸引力恰當使用圖像可美化網(wǎng)頁，注意圖像大小與格式，優(yōu)化加載速度技術應服務于內(nèi)容，避免過度使用導致用戶反感，保持頁面簡潔定期更新網(wǎng)站內(nèi)容，保持信息新鮮，吸引并留住訪問者本課件是可編輯的正常PPT課件2.網(wǎng)頁設計的色彩搭配01色彩原理顏色源于光的折射，網(wǎng)頁色彩以RGB為主，非彩色為黑、白、灰，色彩變化產(chǎn)生數(shù)百萬種色相02網(wǎng)頁色彩搭配技巧統(tǒng)一色彩調(diào)整透明度或飽和度，使用對比色豐富頁面，選用一個色系或黑色搭配彩色，避免色彩過多，確保對比度本課件是可編輯的正常PPT課件3.網(wǎng)頁設計要點整體布局干凈整潔，條理清晰，避免過多色彩與動畫，確保瀏覽舒適信息價值提供有價值內(nèi)容，如資訊、娛樂或聯(lián)系方式，吸引并留住瀏覽者下載速度主頁打開速度關鍵，控制圖像大小，確保快速加載，提升用戶體驗文字可讀性使用通用字體，如宋體、微軟雅黑，確保正文易讀，特殊字體限標題導航清晰采用超文本或圖片鏈接，放置左側(cè)，底部設簡單導航，便于瀏覽操作本課件是可編輯的正常PPT課件1.HTML5概述HTML是互聯(lián)網(wǎng)上編寫網(wǎng)頁的主要語言，它是純文本類型的，允許通過文本編輯器查看和編輯源代碼HTML簡介01網(wǎng)頁瀏覽器主要負責解釋HTML代碼，將文字轉(zhuǎn)化為豐富多彩的頁面。精簡高效的HTML源代碼對網(wǎng)頁顯示速度至關重要瀏覽器與HTML02HTML是通過簡潔的語法創(chuàng)建超文本鏈接和多媒體信息的解釋型語言，瀏覽器在打開網(wǎng)頁時動態(tài)生成效果HTML的工作原理03任務規(guī)劃本課件是可編輯的正常PPT課件HTML（HypertextMarkupLanguage，超文本標記語言）是Internet上用于編寫網(wǎng)頁的主要語言。HTML是純文本類型的語言，使用HTML編寫的網(wǎng)頁文件也是標準的純文本文件。可以用任何文本編輯器（如Windows系統(tǒng)中的“記事本”程序）打開，查看其中的HTML源代碼。查看網(wǎng)頁內(nèi)容必須使用網(wǎng)頁瀏覽器，瀏覽器的主要作用就是解釋超文本文件中的代碼，將單調(diào)乏味的代碼顯示為豐富多彩的內(nèi)容。HTML的語法非常簡單，它采用簡潔明了的語法命令，通過對各種標記、元素、屬性、對象等進行設置，建立圖形、音頻、視頻等多媒體信息及其他超文本的鏈接。1.HTML5概述本課件是可編輯的正常PPT課件2.常用開發(fā)工具及安裝VSCode是一款由微軟公司開發(fā)的免費、開源的跨平臺代碼編輯器。它在軟件開發(fā)和編程任務中廣受歡迎，提供了豐富的功能和靈活的擴展性。VisualStudioCode01WebStorm是一款由JetBrains公司開發(fā)的集成開發(fā)環(huán)境（IDE），主要用于前端開發(fā)。WebStorm02HBuilderX是一款基于Eclipse的HTML5開發(fā)工具，它支持多種前端框架和語言，如Vue.js、React、TypeScript等。HBuilder03SublimeText是輕量級代碼編輯器，支持多平臺，具備友好界面和豐富插件，可自定義設置，提高編碼效率SublimeText04本課件是可編輯的正常PPT課件VSCode下載從VSCode官網(wǎng)上下載VSCode安裝包HBuliderX安裝右擊該安裝包，在彈出的快捷菜單中選擇“以管理員身份運行”命令，打開“安裝-MicrosoftVisualStudioCode”窗口，開始安裝。本課件是可編輯的正常PPT課件任務實施1.站點的創(chuàng)建和素材的整理可以通過站點對網(wǎng)站的相關頁面及各類素材進行統(tǒng)一管理，還可以借助站點管理實現(xiàn)將文件上傳到網(wǎng)頁服務器中。本課件是可編輯的正常PPT課件本課件是可編輯的正常PPT課件2.網(wǎng)頁文檔的創(chuàng)建與保存網(wǎng)頁文檔的創(chuàng)建本課件是可編輯的正常PPT課件本課件是可編輯的正常PPT課件網(wǎng)頁文檔的保存單擊主菜單內(nèi)的“文件”菜單中的“保存”命令，或者按Ctrl+S組合鍵，即可保存網(wǎng)頁文檔。在通常情況下，第一次保存文件時，VSCode會自動將文件保存在與當前工作區(qū)相關的文件夾中。本課件是可編輯的正常PPT課件3.網(wǎng)站的運行LiveServer是一個具有實時加載功能的小型服務器，可以實現(xiàn)自動刷新，也就是文件重新編輯、保存后可以即時看到最新運行效果，無須手動刷新。本課件是可編輯的正常PPT課件本課件是可編輯的正常PPT課件本課件是可編輯的正常PPT課件本課件是可編輯的正常PPT課件4.更換VSCode主題顏色在VSCode中，可以通過更換主題來個性化編輯環(huán)境，使其適應開發(fā)者的喜好和工作風格。主題可以改變編輯器的外觀，包括顏色、背景、語法高亮等，為開發(fā)者提供一個舒適和個性化的編輯體驗。本課件是可編輯的正常PPT課件本課件是可編輯的正常PPT課件本課件是可編輯的正常PPT課件任務驗證在編輯器中的空白位置右擊，在彈出的快捷菜單中選擇“OpenwithLiveServer”命令，系統(tǒng)默認的瀏覽器將會打開該文件，本課件是可編輯的正常PPT課件謝謝本課件是可編輯的正常PPT課件模塊2

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

HTML5中新增的標簽及屬性本課件是可編輯的正常PPT課件制作“古都花城洛陽代表性古跡”網(wǎng)頁任務3.1本課件是可編輯的正常PPT課件任務描述作為中國歷史文化名城，洛陽有著幾千年的文明積淀和豐富的文化遺產(chǎn)，包括諸多聞名遐邇的古跡。這些古跡不僅見證了中國古代歷史的輝煌，也構成了洛陽獨特的城市文化底蘊和旅游資源。在全球信息化的時代背景下，通過網(wǎng)絡平臺向全世界展示洛陽的歷史古跡，不僅有助于增進人們對洛陽乃至中國傳統(tǒng)文化的認識與了解，也能夠推動洛陽文化旅游產(chǎn)業(yè)的發(fā)展，吸引更多的游客前往洛陽實地探訪。任務分析通過對本任務的學習，掌握HTML5中新增的語義化標簽和分組標簽，能夠利用所學知識制作“古都花城洛陽代表性古跡”網(wǎng)頁。相關知識本課件是可編輯的正常PPT課件3.1.1語義化標簽使用div無語義，HTML5引入新標簽改善協(xié)助內(nèi)容語義化，推動自然語言處理與AI智能語義化讓代碼更清晰，便于維護，提升AI解析能力語義化概念HTML5前的局限標簽語義化作用本課件是可編輯的正常PPT課件HTML5語義化標簽新增語義化標簽強化文檔結構表達，適應具體使用場景頁面結構劃分header、nav、section、article、aside、footer定義頁面區(qū)域0102本課件是可編輯的正常PPT課件1.header標簽<header>標簽是頁面加載的第一個標簽，包含了站點的標題、Logo、網(wǎng)站導航等，是一種具有引導和導航作用的結構標簽，通常用來放置整個頁面或頁面內(nèi)的一個內(nèi)容區(qū)塊的標題。<header></header>標簽對中可以包含多個<hl>~<h6>標簽、<hgroup></hgroup>標簽對、<nav></nav>標簽對、<form></form>標簽對等。本課件是可編輯的正常PPT課件2.nav標簽<nav>標簽用于構建頁面或站點內(nèi)的導航鏈接，表示一組可導航到其他頁面或當前頁面其他部分的鏈接本課件是可編輯的正常PPT課件3.section標簽<section>標簽用于定義文檔中的節(jié)（Section），如章節(jié)、頁眉、頁腳或文檔中的其他部分。它用于將內(nèi)容分塊，使其成為獨立的段落或區(qū)域。<section></section>標簽對通常由內(nèi)容及其標題組成，用于將相關內(nèi)容組織在一起，并在文檔流中創(chuàng)建一個新的節(jié)。01本課件是可編輯的正常PPT課件4.article標簽<article>標簽用于定義文檔、頁面、應用程序或站點中的自包含成分所構成的一個頁面的一部分，并且這部分專用于獨立地分類或復用。本課件是可編輯的正常PPT課件5.article標簽<aside>標簽用于定義除<article></article>標簽對中內(nèi)容以外的附加內(nèi)容。它常用于定義側(cè)欄、文章的鏈接集合、廣告、友情鏈接、相關產(chǎn)品列表等。本課件是可編輯的正常PPT課件6.footer標簽<footer>標簽用于定義與頁面、文章或內(nèi)容區(qū)塊相關的信息。它通常作為上層父級內(nèi)容區(qū)塊或根區(qū)塊的腳注，并定義相關區(qū)塊的附加信息，如文章的作者或日期等。本課件是可編輯的正常PPT課件7.figure標簽<figure>標簽用于定義獨立的流內(nèi)容，如圖像、圖表、照片、代碼等。figure元素的內(nèi)容應該與主要內(nèi)容相關，但<article>標簽的作用是定義獨立的完整的內(nèi)容，則不應對文檔的布局產(chǎn)生影響。本課件是可編輯的正常PPT課件8.figcaption標簽<figcaption>標簽用于定義<figure></figure>標簽對中內(nèi)容的標題，應該被放置于<figure>標簽的第一個或最后一個子標簽的位置。本課件是可編輯的正常PPT課件3.1.2分組標簽<hgroup>標簽用于對標題及其子標題進行分組。<hgroup>標簽一般會對<h1>～<h6>元素進行分組，如一個內(nèi)容區(qū)塊的標題及其子標題算一組。通常情況下，當文章只有一個主標題時，是不需要使用<hgroup>標簽的。本課件是可編輯的正常PPT課件任務規(guī)劃通過網(wǎng)頁設計，運用HTML5等現(xiàn)代Web技術，制作友好、直觀的用戶界面，包括合理的網(wǎng)頁布局、清晰的導航結構，深度挖掘和展示洛陽古跡背后的歷史故事與文化內(nèi)涵，促進各地游客對中國傳統(tǒng)歷史文化的學習和交流。本課件是可編輯的正常PPT課件任務實施（1）打開開發(fā)工具VSCode，在本地磁盤中新建項目文件夾，并命名為luoyang。（2）在VSCode中打開項目文件夾luoyang，在該項目文件夾上右擊，在彈出的快捷菜單中選擇“新建文件”命令，在出現(xiàn)的文本框中輸入文件的名稱“monument.html”（開發(fā)中文件命名一般要做到見名知意），然后按Tab鍵或Enter鍵完成HTML文件的創(chuàng)建。（3）單擊monument.html文件，進入代碼編輯窗口。在<title></title>標簽對中設置網(wǎng)頁的標題為“古都花城洛陽代表性古跡”。（4）在<body></body>標簽對中添加<header></header>標簽對，并在<header></header>標簽對內(nèi)添加一級標題和<nav></nav>標簽對。（5）在步驟（4）中添加的<nav></nav>標簽對內(nèi)添加導航鏈接。（6）繼續(xù)在<body></body>標簽對中添加<main></main>標簽對，并在<main></main>標簽對中添加一組<section></section>標簽對，用于放置第一個名勝古跡龍門石窟的介紹內(nèi)容。本課件是可編輯的正常PPT課件任務實施（7）在<main></main>標簽對中再次添加一組<section></section>標簽對，用于放置第二個名勝古跡白馬寺的介紹內(nèi)容。（8）仿照步驟在<main></main>標簽對中添加第三組<section></section>標簽對，用于放置第三個名勝古跡洛陽牡丹園的介紹內(nèi)容。（9）最后在<body></body>標簽對中添加一組<footer></footer>標簽對，然后在添加的<footer></footer>標簽對中添加版權相關內(nèi)容。（10）為了使頁面更加美觀，在<head></head>標簽對中添加<style></style>標簽對，對頁面樣式進行美化（CSS部分參考模塊4）。本課件是可編輯的正常PPT課件制作“數(shù)字圖書館”網(wǎng)頁任務3.2本課件是可編輯的正常PPT課件任務描述數(shù)字圖書館作為文化傳播的載體，能夠跨越地域界限，傳播中華文化，促進文化交流與互鑒。許多優(yōu)秀的國產(chǎn)數(shù)字圖書館走出國門，讓世界讀者了解中國的歷史、文化和社會發(fā)展現(xiàn)狀，不僅提升了國家文化軟實力，也為構建人類命運共同體貢獻了文化力量。數(shù)字圖書館的便捷性和普及性使得人們可以隨時隨地獲取知識，加深對各個領域的了解，并為個人的學習、研究和娛樂提供了豐富的資源和可能性。任務分析通過對本任務的學習，掌握頁面交互標簽，理解HTML元素的全局屬性，利用所學知識制作“數(shù)字圖書館”網(wǎng)頁。相關知識本課件是可編輯的正常PPT課件3.2.1頁面交互標簽

1.progress標簽<progress>標簽屬于狀態(tài)交互標簽，用于在網(wǎng)頁中展示某個任務的完成進度。它可以呈現(xiàn)為一個進度條，并具有兩個屬性：max屬性表示任務的總量，默認值為1；value屬性表示當前的任務量。本課件是可編輯的正常PPT課件2.meter標簽meter標簽用于展示數(shù)據(jù)狀態(tài)，如投票比例、考試分數(shù)，其屬性包括form、value、max、min，其中value需在min和max之間本課件是可編輯的正常PPT課件details標簽/summary標簽details標簽用于創(chuàng)建可交互的細節(jié)控件，初始狀態(tài)是隱藏的，通過設置open屬性可顯示其內(nèi)容details標簽介紹01summary標簽用于為<details>元素設置可見標題，用戶點擊可展開詳細信息summary標簽02本課件是可編輯的正常PPT課件3.2.2全局屬性全局屬性是適用于所有HTML元素的共有屬性。這意味著這些屬性可以用于任何元素，即使某些屬性在某些元素上可能沒有實際效果。本課件是可編輯的正常PPT課件1.contenteditable屬性（HTML5新屬性）contenteditable屬性是一個枚舉屬性，用于指示元素是否可供用戶編輯。當元素沒有顯式設置contenteditable屬性時，它會從父元素繼承該屬性。本課件是可編輯的正常PPT課件2.class屬性（1）必須以英文字母A～Z或a～z開頭。（2）可以包含英文字母A～Z和a～z、數(shù)字0～9、連字符(-)和下劃線(_)。（3）在HTML中，類名是區(qū)分大小寫的。類名的命名規(guī)則class屬性的值是一個以空格分隔的元素的類名列表，它允許CSS和Javascript通過類選擇器或DOM方法document.getElementsByClassName()來選擇和訪問特定的元素。本課件是可編輯的正常PPT課件3.data-*屬性data-*屬性用于存儲私有的，頁面后應用的自定義數(shù)據(jù)，允許在HTML和其DOM表示之間交換專有信息，可由JavaScript腳本使用。所有這些自定義數(shù)據(jù)屬性都可以通過所屬元素的HTMLElement接口來訪問。需要注意的事項如下：（1）屬性名不要包含大寫字母，不要出現(xiàn)中文、空格和特殊字符，在“data-”的后面必須至少有一個字符。（2）屬性名可以是任何字符串。本課件是可編輯的正常PPT課件4.dir屬性dir屬性用于規(guī)定元素內(nèi)容的文本方向。本課件是可編輯的正常PPT課件5.draggable屬性draggable屬性用于規(guī)定元素是否可被拖動。本課件是可編輯的正常PPT課件6.dropzone屬性dropzone屬性用于規(guī)定當被拖動的數(shù)據(jù)在拖放到元素上時，是否被復制、移動或鏈接。本課件是可編輯的正常PPT課件7.hidden屬性hidden屬性用于隱藏元素。例如，它可以用于隱藏頁面中的元素，這些元素在登錄過程完成之前不可用。瀏覽器不會渲染被隱藏的元素。需要注意的是，hidden屬性不能用于隱藏本應合法顯示的內(nèi)容?？梢酝ㄟ^設置hidden屬性來使元素在滿足特定條件時對用戶可見，如選擇復選框等。然后，可以使用JavaScript來刪除hidden屬性，以使該元素變得可見。本課件是可編輯的正常PPT課件8.id屬性id屬性為元素提供了唯一的標識符，使得開發(fā)者可以通過CSS樣式表和腳本語言精確地選擇和操作特定元素。（1）必須以英文字母A～Z或a～z開頭。（2）可以包含英文字母A～Z和a～z、數(shù)字0～9、冒號(:)、點號(.)和下劃線(_)。ID的命名規(guī)范本課件是可編輯的正常PPT課件9.spellcheck屬性spellcheck屬性用于定義是否可以檢查元素是否存在拼寫錯誤，可對類型為text的input元素中的值（非密碼）、textarea元素中的值和可編輯元素中的值進行拼寫檢查。true：元素的拼寫會被檢查false：元素的拼寫檢查被禁用，不會顯示拼寫錯誤提示屬性值含義本課件是可編輯的正常PPT課件10.style屬性style屬性用于定義要應用于元素的CSS樣式聲明。請注意，建議在單獨的文件中定義樣式。該屬性和<style>元素主要用于快速添加樣式，如用于測試目的。本課件是可編輯的正常PPT課件11.translate屬性translate屬性用于規(guī)定一個元素的內(nèi)容在頁面載入時是否需要被翻譯。本課件是可編輯的正常PPT課件任務規(guī)劃隨著互聯(lián)網(wǎng)技術的快速發(fā)展，線上閱讀圖書已成為許多人日常學習和生活的一部分。與此同時，HTML5作為一種現(xiàn)代化的網(wǎng)頁標記語言，以其優(yōu)異的跨平臺特性成為構建圖書展示網(wǎng)頁的首選技術。本任務旨在創(chuàng)建一個既能有效地展示圖書內(nèi)容，又具有良好交互體驗和適應多種終端環(huán)境的HTML5圖書網(wǎng)頁。通過科學合理的標簽使用和巧妙的交互設計，從而吸引并留住用戶，提升網(wǎng)站的流量和口碑。本課件是可編輯的正常PPT課件任務實施（1）打開開發(fā)工具VSCode，在本地磁盤中新建項目文件夾，并命名為library。（2）在VSCode中打開項目文件夾library，在該項目文件夾上右擊，在彈出的快捷菜單中選擇“新建文件”命令，在出現(xiàn)的文本框中輸入文件的名稱“books.html”（開發(fā)中文件命名一般要做到見名知意），然后按Tab鍵或Enter鍵完成HTML文件的創(chuàng)建。（3）單擊books.html文件，進入代碼編輯窗口。在<title></title>標簽對中設置網(wǎng)頁的標題為“數(shù)字圖書館”。（4）在<body></body>標簽對中添加<header></header>標簽對，并在<header></header>標簽對內(nèi)添加一級標題和<nav></nav>標簽對，然后在添加的<nav></nav>標簽對中添加導航鏈接。（5）繼續(xù)在<body></body>標簽對中添加一組<main></main>標簽對，并在<main></main>標簽對中添加一組<section></section>標簽對，用于放置“最新圖書”部分的內(nèi)容，并插入二級標題“最新圖書”。（6）在步驟（5）中添加的<section></section>標簽對中添加兩組<article></article>標簽對，分別用于放置第一部圖書和第二部圖書的信息，并設置全局屬性data-id來存儲特定的數(shù)據(jù)，以及插入圖書封面圖片和閱讀按鈕。（7）在<main></main>標簽組中再次添加一組<section></section>標簽對，用于放置“熱門推薦”部分的內(nèi)容。（8）仿照步驟（6），在<main></main>標簽對中再次添加兩組<section></section>標簽對，將id屬性的值分別設置為“digital”和“free”。（9）最后在<body></body>標簽對中繼續(xù)放置一組<script></script>標簽對，并為之前步驟中的按鈕單擊事件定義函數(shù)，實現(xiàn)交互。本課件是可編輯的正常PPT課件謝謝本課件是可編輯的正常PPT課件模塊4CSS基礎本課件是可編輯的正常PPT課件制作“美文賞析”網(wǎng)頁任務4.1本課件是可編輯的正常PPT課件任務描述優(yōu)秀的美文常常以其深刻的思想內(nèi)涵、豐富的情感表達和精湛的藝術形式觸動人心，啟迪智慧。在賞析這些作品時，我們不僅要學會欣賞其文學價值，還要深入挖掘其思想內(nèi)涵，從而在現(xiàn)實生活中樹立正確的世界觀、人生觀和價值觀。任務分析通過對本任務的學習，了解CSS的概念、作用，掌握CSS的基本語法和基本屬性，學會CSS的3種樣式，能夠利用所學知識制作“美文賞析”網(wǎng)頁。相關知識本課件是可編輯的正常PPT課件4.1.1CSS簡介CSS（CascadingStyleSheets，層疊樣式表）是一種用來表現(xiàn)HTML或XML等文件樣式的計算機語言。CSS不僅可以靜態(tài)地修飾網(wǎng)頁，還可以配合各種腳本語言動態(tài)地對網(wǎng)頁中的各個元素進行格式化。CSS能夠?qū)W(wǎng)頁中元素位置的排版進行像素級的精確控制，支持幾乎所有的字體、字號樣式，擁有對網(wǎng)頁對象和模型樣式編輯的能力。CSS的樣式定義了如何顯示HTML元素，主要包括文字、盒模型、定位等。CSS的規(guī)則由兩個主要的部分構成：選擇器、一條或多條聲明。選擇器通常是用戶需要改變樣式的HTML元素，每條聲明由一個屬性和一個值組成。本課件是可編輯的正常PPT課件4.1.2CSS的基本語法CSS的規(guī)則由兩個主要的部分構成：選擇器、一條或多條聲明。其基本語法如下：選擇器{屬性1:值1;屬性2:值2;…屬性x:值x;}本課件是可編輯的正常PPT課件4.1.3CSS基本屬性CSS的屬性按照相關功能進行了分組，包括字體、文本、背景、列表、動畫等本課件是可編輯的正常PPT課件1.字體屬性字體屬性用于設置字體的尺寸、樣式、粗細等本課件是可編輯的正常PPT課件2.文本屬性文本屬性用于設置文本的顏色、方向、陰影、大小寫、縮進、水平對齊方式等本課件是可編輯的正常PPT課件3.背景屬性背景屬性用于設置元素的背景顏色、背景圖片、背景圖片的重復性、背景圖片的位置等本課件是可編輯的正常PPT課件4.邊框?qū)傩赃吙驅(qū)傩钥梢栽O置元素邊框的顏色、樣式、寬度等本課件是可編輯的正常PPT課件5.列表屬性列表屬性用于設置列表項標記的圖像、位置、樣式等本課件是可編輯的正常PPT課件6.尺寸屬性尺寸屬性用于設置元素的高度、最大高度、最小高度、寬度、最大高度、最小高度本課件是可編輯的正常PPT課件4.1.4CSS樣式分類根據(jù)CSS在HTML中的使用方法和作用范圍不同，CSS樣式類型分為內(nèi)聯(lián)式、嵌入式和外鏈式三類本課件是可編輯的正常PPT課件1.內(nèi)聯(lián)式內(nèi)聯(lián)式樣式也被稱為“行內(nèi)樣式”，是CSS使用中最直接的一種方法。內(nèi)聯(lián)式樣式通過在HTML標簽中使用全局屬性style，將CSS代碼直接寫入其中來實現(xiàn)。本課件是可編輯的正常PPT課件2.嵌入式嵌入式樣式也被稱為“內(nèi)部樣式表”，是一種將樣式放置在HTML文檔的<head></head>標簽對中，并使用<style>標簽進行定義的方法。3.外鏈式外鏈式樣式也被稱為“外部樣式表”，是一種將所有樣式放置在一個或多個以.css為擴展名的外部樣式表文件中，并通過<link/>標簽將外部樣式表文件鏈接到HTML文檔中的方法。本課件是可編輯的正常PPT課件任務規(guī)劃通過HTML5和CSS創(chuàng)建一個結構合理、樣式優(yōu)美、響應靈敏且具有一定交互性的“美文賞析”網(wǎng)頁，以此來提升用戶在閱讀過程中的舒適度和沉浸感。同時，通過靈活運用不同的CSS樣式引入方法，保證網(wǎng)頁的擴展性和可維護性。本課件是可編輯的正常PPT課件任務實施（1）打開開發(fā)工具VSCode，在本地磁盤中新建項目文件夾，并命名為bestArticles。（2）在VSCode中打開項目文件夾bestArticles，在該項目文件夾上右擊，在彈出的快捷菜單中選擇“新建文件”命令，在出現(xiàn)的文本框中輸入文件的名稱“l(fā)ist.html”（開發(fā)中文件命名一般要做到見名知意），然后按Tab鍵或Enter鍵完成HTML文件的創(chuàng)建。（3）單擊list.html文件，進入代碼編輯窗口。在<title></title>標簽對中設置網(wǎng)頁的標題為“美文賞析”，并引入外部樣式表文件。（4）在<body></body>標簽對中添加<header></header>標簽對，并在<header></header>標簽對內(nèi)添加一級標題和<nav></nav>標簽對，然后在添加的<nav></nav>標簽對中添加導航鏈接。這里通過內(nèi)聯(lián)式樣式的方法設置一級標題的顏色和字體大小。（5）在<body></body>標簽中添加一組<main></main>標簽對，并在<main></main>標簽對中添加一組<section></section>標簽對。（6）在步驟（5）中添加的<section></section>標簽對中添加一組<article></article>標簽對，用來放置第一篇美文，并在<article></article>標簽對中設置文章的標題、內(nèi)容、作者、圖片等信息。本課件是可編輯的正常PPT課件任務實施（7）在<body></body>標簽對中添加一組<footer></footer>標簽對，然后在添加的<footer></footer>標簽對中添加版權相關內(nèi)容。（8）在項目文件夾bestArticles上右擊，在彈出的快捷菜單中選擇“新建文件夾”命令，在出現(xiàn)的文本框中輸入文件夾的名稱“css”，然后按Tab鍵或Enter鍵，在css文件夾上右擊，在彈出的快捷菜單中選擇“新建文件”命令，在出現(xiàn)的文本框中輸入文件的名稱“style.css”，然后按Tab鍵或Enter鍵。（9）單擊步驟（8）中新建的styles.css文件進入代碼編輯窗口，設置頁面的基礎樣式和頁頭樣式。（10）繼續(xù)在styles.css文件中設置頁面的其他樣式，如主題內(nèi)容區(qū)域樣式、文章樣式、底部樣式。本課件是可編輯的正常PPT課件制作“大學生身高體重標準表”網(wǎng)頁任務4.2本課件是可編輯的正常PPT課件任務描述在當今社會，健康意識日益增強，大學生作為國家未來的棟梁之才，他們的身體健康狀況尤為重要。身高與體重是衡量人體發(fā)育水平和健康狀況的重要指標?；诖耍逃康认嚓P部門發(fā)布了大學生身高與體重標準，旨在指導大學生樹立正確的健康觀念，合理安排膳食，養(yǎng)成良好的生活習慣。任務分析通過對本任務的學習，掌握id選擇器、標簽選擇器、類選擇器及偽類選擇器的基本語法，并利用CSS中的表格屬性對表格樣式進行修改，最后利用所學知識制作“大學生身高體重標準表”網(wǎng)頁。相關知識本課件是可編輯的正常PPT課件4.2.1id選擇器id選擇器是一種用于選擇特定標簽的唯一性選擇器。與標簽選擇器和類選擇器不同，id選擇器僅適用于一個具體的標簽，不能同時應用于多個標簽。本課件是可編輯的正常PPT課件4.2.1標簽選擇器和類選擇器在HTML文檔中，最基本的構成單位是HTML標簽。如果要對HTML文檔中的所有相同類型的標簽應用相同的CSS樣式，則可以使用標簽選擇器。標簽選擇器是一種基本的選擇器，它通過選擇HTML標簽名來指定要應用樣式的標簽。通過使用標簽選擇器，可以一次性對所有相同類型的標簽應用相同的樣式。1．標簽選擇器本課件是可編輯的正常PPT課件2．類選擇器類選擇器用于描述一組標簽的樣式，一個類選擇器可以在多個標簽上使用。本課件是可編輯的正常PPT課件4.2.3偽類選擇器偽類選擇器用于向特定元素添加特殊的效果，例如為鏈接設置不同狀態(tài)的樣式，或者選擇特定的元素位置，如第1個或第n個元素。偽類選擇器依據(jù)是當前元素所處的狀態(tài)或特性，而非其靜態(tài)標識如id、class或?qū)傩?。由于元素狀態(tài)的動態(tài)性，當元素進入某一特定狀態(tài)時，可能會獲得相應的偽類樣式；而一旦狀態(tài)發(fā)生變化，該樣式便會隨之消失。偽類選擇器的功能和class有些類似，但由于它基于文檔之外的抽象，因此被稱為偽類。偽類的名稱不區(qū)分大小寫，但需要以冒號（:）開頭。另外，偽類需要與CSS中的選擇器結合使用本課件是可編輯的正常PPT課件本課件是可編輯的正常PPT課件本課件是可編輯的正常PPT課件4.2.4表格表格是由一行或多行組成的，而每行又是由一個或多個單元格組成的。在網(wǎng)頁中，通常使用表格來展示一些數(shù)據(jù)，如成績表、財務報表等。HTML5中的表格類似于Excel表格，一般由行、列和單元格組成本課件是可編輯的正常PPT課件在CSS中，通過table-layout屬性來設置表格布局時所用的布局算法1.表格布局本課件是可編輯的正常PPT課件2.設置表格邊框在CSS中，通過border-collapse屬性來設置是否合并表格中相鄰的邊框本課件是可編輯的正常PPT課件3.設置表格間距在CSS中，通過border-spacing屬性來設置相鄰單元格的邊框之間的距離本課件是可編輯的正常PPT課件4.設置表格標題在CSS中，通過caption-side屬性來設置表格標題的位置本課件是可編輯的正常PPT課件任務規(guī)劃通過HTML5創(chuàng)建一個帶有身高與體重數(shù)據(jù)的標準表格，使用id選擇器對整個表格進行樣式設置，然后使用標簽選擇器對表格的單元格進行統(tǒng)一樣式設置，并通過類選擇器分別設置男性、女性數(shù)據(jù)行的不同背景顏色，使網(wǎng)頁具有良好的可讀性。本課件是可編輯的正常PPT課件任務實施（1）打開開發(fā)工具VSCode，在本地磁盤中新建項目文件夾，并命名為standard。（2）在VSCode中打開項目文件夾standard，在該項目文件夾上右擊，在彈出的快捷菜單中選擇“新建文件”命令，在出現(xiàn)的文本框中輸入文件的名稱“bmi.html”（開發(fā)中文件命名一般要做到見名知意），然后按Tab鍵或Enter鍵完成HTML文件的創(chuàng)建。（3）單擊bmi.html文件，進入代碼編輯窗口。在<title></title>標簽對中設置網(wǎng)頁的標題為“大學生身高體重標準表”，并引入外部樣式表文件。（4）在<body></body>標簽對中添加<header></header>標簽對，并在<header></header>標簽對內(nèi)添加一級標題“大學生身高體重標準表”（5）在<body></body>標簽對中添加<main></main>標簽對，并在<main></main>標簽對中添加一組<table></table>標簽，設置<table>標簽的id屬性的值為“height-weight-table”（6）在步驟（5）中添加的<table></table>標簽對中添加一組<caption></caption>標簽對，并設置表格的標題為“大學生身高體重參照表”；繼續(xù)添加一組<thead></thead>標簽對，并在<thead></thead>標簽對中添加一組<tr></tr>標簽對，用來設置表頭。本課件是可編輯的正常PPT課件任務實施（7）在<table></table>標簽對中添加一組<tbody></tbody>標簽對，用來放置表格的核心內(nèi)容，在<tbody></tbody>標簽對中添加兩行數(shù)據(jù)，每行數(shù)據(jù)使用類選擇器設置樣式。（8）在<body></body>標簽對中添加一組<footer></footer>標簽對，然后在添加的<footer></footer>標簽對中添加相關內(nèi)容。（9）在VSCode中打開項目文件夾standard，并在該項目文件夾上右擊，在彈出的快捷菜單中選擇“新建文件夾”命令，在出現(xiàn)的文本框中輸入文件夾的名稱“css”，然后按Tab鍵或Enter鍵，在css文件夾上右擊，在彈出的快捷菜單中選擇“新建文件”命令，在出現(xiàn)的文本框中輸入文件的名稱“style.css”，然后按Tab鍵或Enter鍵。（10）單擊步驟（9）中新建的style.css文件，進入代碼編輯窗口，使用id選擇器對表格的整體樣式進行設置。（11）繼續(xù)在style.css文件中使用標簽選擇器對表格的單元格樣式進行設置，使用類選擇器對男性、女性數(shù)據(jù)行進行特殊樣式設置。本課件是可編輯的正常PPT課件制作“名人故事”網(wǎng)頁任務4.3本課件是可編輯的正常PPT課件任務描述在信息化高速發(fā)展的今天，互聯(lián)網(wǎng)已經(jīng)成為人們獲取信息、學習知識的重要渠道。名人故事作為一種富有教育意義和激勵作用的內(nèi)容，能夠引導青少年和廣大網(wǎng)友積極向上、汲取正能量?！懊斯适隆本W(wǎng)頁不僅能有效地傳播有價值的人物故事，還能提升用戶在網(wǎng)站的停留時間和滿意度，從而達到教育、啟迪和傳播正能量的目的。任務分析通過對本任務的學習，掌握復合選擇器中各個選擇器的基本語法和屬性，掌握通配符選擇器的基本語法和用法，最后利用所學知識制作“名人故事”網(wǎng)頁。相關知識本課件是可編輯的正常PPT課件4.3.1復合選擇器在CSS中，可以根據(jù)選擇器的類型把選擇器分為基礎選擇器和復合選擇器。復合選擇器是建立在基礎選擇器之上，對基本選擇器進行組合形成的。復合選擇器是由兩個或多個基礎選擇器通過不同的組合而形成的，包括后代選擇器、子選擇器、并集選擇器等。本課件是可編輯的正常PPT課件1.后代選擇器后代選擇器又被稱為“包含選擇器”，可以選擇父元素中的子元素。其寫法就是外層標簽寫在前面，內(nèi)標簽寫在后面，中間用空格分隔。本課件是可編輯的正常PPT課件2.子選擇器子選擇器僅能選取某個元素直接的下一級子元素本課件是可編輯的正常PPT課件3.并集選擇器并集選擇器是各類選擇器通過英文逗號（，）連接而成的，任何形式的選擇器都可以作為并集選擇器的一部分基本語法：元素1,元素2{屬性1:值1;屬性2:值2;…}，逗號代表并集，用于集體聲明樣式本課件是可編輯的正常PPT課件4.3.2通配符選擇器在CSS中，一個星號（*）就是一個通配選擇器。它可以匹配任意類型的HTML元素。在配合其他基本選擇器時，省略掉通配選擇器會有同樣的效果。本課件是可編輯的正常PPT課件任務規(guī)劃為了讓更多的人便捷地在線閱讀和學習名人故事，我們計劃通過HTML5技術制作一個專門展示名人故事的網(wǎng)頁。通過HTML5創(chuàng)建一個“名人故事”網(wǎng)頁，運用CSS對網(wǎng)頁進行視覺設計，包括但不限于字體、顏色、布局等，使用復合選擇器、通配符選擇器等對不同元素進行精細樣式控制，使網(wǎng)頁看起來美觀、大方，并且符合閱讀習慣。本課件是可編輯的正常PPT課件任務實施（1）打開開發(fā)工具VSCode，在本地磁盤中新建項目文件夾，并命名為story。（2）在VSCode中打開項目文件夾story，在該項目文件夾上右擊，在彈出的快捷菜單中選擇“新建文件”命令，在出現(xiàn)的文本框中輸入文件的名稱“mingrengushi.html”（開發(fā)中文件命名一般要做到見名知意），然后按Tab鍵或Enter鍵完成HTML文件的創(chuàng)建。（3）單擊mingrengushi.html文件，進入代碼編輯窗口。在<title></title>標簽對中設置網(wǎng)頁的標題為“名人故事-阿爾伯特·愛因斯坦”，并引入外部樣式表文件。（4）在<body></body>標簽對中添加一組<div></div>標簽作為頁面容器，在<div></div>標簽對中添加<header></header>標簽對，并在<header></header>標簽對內(nèi)添加一級標題。（5）在步驟（4）添加的<div></div>標簽對中添加一組<div></div>標簽對作為故事容器，并在該故事容器中繼續(xù)添加3組<div></div>標簽對，分別用來放置名人照片及標題、導航鏈接、故事主體內(nèi)容。（6）在VSCode中打開項目文件夾story，并在該項目文件夾上右擊，在彈出的快捷菜單中選擇“新建文件夾”命令，在出現(xiàn)的文本框中輸入文件夾的名稱“css”，然后按Tab鍵或Enter鍵，在css文件夾上右擊，在彈出的快捷菜單中選擇“新建文件”命令，在出現(xiàn)的文本框中輸入文件的名稱“style.css”，然后按Tab鍵或Enter鍵。本課件是可編輯的正常PPT課件任務實施（7）單擊步驟（6）中新建的styles.css文件，進入代碼編輯窗口，使用通配符選擇器匹配頁面上的所有元素，并為所有元素設置相同的盒模型模式（border-box），以及重置默認的外邊距和內(nèi)邊距。（8）在styles.css文件中，使用復合選擇器對頁面中其他內(nèi)容的樣式進行設置。本課件是可編輯的正常PPT課件謝謝本課件是可編輯的正常PPT課件模塊5盒子模型及應用本課件是可編輯的正常PPT課件制作“學習日用百科”網(wǎng)頁任務5.1本課件是可編輯的正常PPT課件任務描述隨著互聯(lián)網(wǎng)技術的快速發(fā)展和信息時代的到來，人們獲取知識的方式正在發(fā)生深刻變革。越來越多的人依賴網(wǎng)絡平臺來獲取日常生活所需的實用信息、科普知識及行業(yè)前沿動態(tài)。因此，建立一個集合各類學習資源和實用生活指南的在線“學習日用百科”網(wǎng)頁成為一種迫切的需求。這樣的平臺不僅可以方便用戶隨時隨地查閱所需信息，還可以通過合理的組織和展示，提高用戶的學習效率和生活質(zhì)量。任務分析通過對本任務的學習，了解盒子模型的概念，掌握設置邊框樣式、邊框?qū)挾燃斑吙蝾伾幕菊Z法和屬性，掌握設置內(nèi)邊距與外邊距的基本語法和屬性，最后利用所學知識制作“學習日用百科”網(wǎng)頁。相關知識本課件是可編輯的正常PPT課件5.1.1盒子模型的概念盒子模型（BoxModel）是一種用于描述HTML元素在頁面中呈現(xiàn)時的布局和大小的概念。本課件是可編輯的正常PPT課件01盒子模型基礎內(nèi)容為核心，內(nèi)邊距、邊框、外邊距依次向外擴展，外邊距透明不遮擋02內(nèi)容區(qū)域顯示文本圖像，為盒子核心部分，直接被內(nèi)邊距包圍03內(nèi)邊距透明區(qū)域，位于內(nèi)容與邊框間，影響元素間距04邊框圍繞內(nèi)容與內(nèi)邊距，形成盒子的可見邊界05外邊距邊框外透明區(qū)域，決定盒子與其他元素間距，不影響視覺本課件是可編輯的正常PPT課件盒子模型尺寸計算 元素的總寬度=寬度+左內(nèi)邊距+右內(nèi)邊距+左邊框+右邊框+左外邊距+右外邊距。 元素的總高度=高度+上內(nèi)邊距+下內(nèi)邊距+上邊框+下邊框+上外邊距+下外邊距。本課件是可編輯的正常PPT課件5.1.2邊框的設置盒子邊框使用border屬性來設置，該屬性可以設置所有邊框的樣式、寬度和顏色本課件是可編輯的正常PPT課件1.邊框樣式border-styleboborder-style控制邊框樣式，可單獨設置四邊，值包括none、dotted、dashed、solid、double、groove、ridge、inset、outset本課件是可編輯的正常PPT課件2.邊框?qū)挾萣order-widthborder-width屬性用來控制對象的邊框?qū)挾?，可以同時設置一個或多個邊框?qū)挾?。另外，還有4個分屬性：border-top-width、border-right-width、border-bottom-width和border-left-width，分別用于設置上、右、下、左4個邊的邊框?qū)挾取１菊n件是可編輯的正常PPT課件3．邊框顏色border-colorborder-color屬性用來控制對象的邊框顏色，可以同時設置一個或多個邊框顏色。另外，還有4個分屬性：border-top-color、border-right-color、border-bottom-color和border-left-color，分別用于設置上、右、下、左4個邊的邊框顏色。本課件是可編輯的正常PPT課件5.1.3內(nèi)邊距和外邊距的設置內(nèi)邊距和外邊距是網(wǎng)頁設計中不可或缺的元素，它們能夠幫助我們實現(xiàn)更好的頁面布局和視覺效果本課件是可編輯的正常PPT課件1.內(nèi)邊距內(nèi)邊距（padding）是指元素內(nèi)容與邊框之間的空白區(qū)域，它決定了元素內(nèi)部的空間大小。通過調(diào)整內(nèi)邊距，我們可以控制元素內(nèi)容的相對位置，使其更加美觀和易于閱讀。本課件是可編輯的正常PPT課件2.外邊距margin外邊距（margin）是指元素邊框與其他元素之間的空白區(qū)域，它決定了元素在頁面中的相對位置。通過調(diào)整外邊距，我們可以控制元素之間的距離，使頁面布局更加合理和舒適。本課件是可編輯的正常PPT課件任務規(guī)劃利用HTML5和CSS等現(xiàn)代Web技術構建界面友好、易于瀏覽和搜索的知識分享平臺，提升用戶體驗。通過合理運用CSS中的盒子模型和其他布局技術，使頁面布局清晰、結構分明，有利于用戶快速定位所需的內(nèi)容。匯聚各類學習資料和實用信息，形成一站式知識庫，滿足不同人群對于生活常識、科技前沿、教育方法等多領域知識的需求。本課件是可編輯的正常PPT課件任務實施（1）打開開發(fā)工具VSCode，在本地磁盤中新建項目文件夾，并命名為baike。（2）在VSCode中打開項目文件夾baike，在該項目文件夾上右擊，在彈出的快捷菜單中選擇“新建文件”命令，在出現(xiàn)的文本框中輸入文件的名稱“l(fā)ist.html”（開發(fā)中文件命名一般要做到見名知意），然后按Tab鍵或Enter鍵完成HTML文件的創(chuàng)建。（3）單擊list.html文件，進入代碼編輯窗口。在<title></title>標簽對中設置網(wǎng)頁的標題為“學習日用百科”，并引入外部樣式表文件。（4）在<body></body>標簽對中添加<header></header>標簽對，并在<header></header>標簽對內(nèi)添加<div></div>標簽對，然后在添加的<div></div>標簽對中添加導航鏈接。（5）在<body></body>標簽對中添加<main></main>標簽對，在<main></main>標簽對中添加一組<section></section>標簽對，并設置好id屬性和class屬性。然后在<section></section>標簽對中放置“生活常識”模塊的內(nèi)容。（6）仿照步驟（5），在<main></main>標簽對中添加第二組和第三組<section>標簽對，并分別放置“科技前沿”和“教育方法”模塊的內(nèi)容。本課件是可編輯的正常PPT課件任務實施（7）在<body></body>標簽對中添加一組<footer></footer>標簽對，然后在添加的<footer></footer>標簽對中添加版權相關內(nèi)容。（8）在項目文件夾bestArticles上右擊，在彈出的快捷菜單中選擇“新建文件夾”命令，在出現(xiàn)的文本框中輸入文件夾的名稱“css”，然后按Tab鍵或Enter鍵，在css文件夾上右擊，在彈出的快捷菜單中選擇“新建文件”命令，在出現(xiàn)的文本框中輸入文件的名稱“style.css”，然后按Tab鍵或Enter鍵。（9）單擊步驟（8）中新建的styles.css文件進入代碼編輯窗口，設置設置全局樣式。（10）在style.css文件中，對導航欄的樣式進行設置。（11）在style.css文件中，對主要內(nèi)容區(qū)的樣式進行設置，以及使用盒子模型對卡片的樣式進行設置。（12）在style.css文件中，對底部版權信息的樣式進行設置。本課件是可編輯的正常PPT課件制作網(wǎng)頁導航條任務5.2本課件是可編輯的正常PPT課件任務描述在當今互聯(lián)網(wǎng)環(huán)境下，網(wǎng)頁作為信息傳遞和用戶交互的重要載體，其設計與用戶體驗緊密相關。一個優(yōu)秀的網(wǎng)頁應當具備清晰、直觀的導航系統(tǒng)，幫助用戶快速定位和訪問所需的內(nèi)容。隨著HTML5的發(fā)展和廣泛應用，網(wǎng)頁開發(fā)者能夠更好地利用其強大的技術和特性創(chuàng)建更具可用性和易讀性的導航條。任務分析通過對本任務的學習，了解元素的類型并掌握元素類型的轉(zhuǎn)換方法，掌握Flex布局和overflow屬性的用法，掌握浮動和清除浮動的基本語法和屬性，最后利用所學知識制作網(wǎng)頁導航條。相關知識本課件是可編輯的正常PPT課件5.2.1元素的