Web前端開發技術項目教程（HTML5 CSS3 JavaScript）（微課版）-課件 項目1 創建非遺項目站點_第1頁
Web前端開發技術項目教程（HTML5 CSS3 JavaScript）（微課版）-課件 項目1 創建非遺項目站點_第2頁
Web前端開發技術項目教程（HTML5 CSS3 JavaScript）（微課版）-課件 項目1 創建非遺項目站點_第3頁
Web前端開發技術項目教程（HTML5 CSS3 JavaScript）（微課版）-課件 項目1 創建非遺項目站點_第4頁
Web前端開發技術項目教程（HTML5 CSS3 JavaScript）（微課版）-課件 項目1 創建非遺項目站點_第5頁
已閱讀5頁，還剩85頁未讀， 繼續免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

項目1

創建非遺項目站點信息安全技術應用ApplicationofInformationSecurityTechnology《前端技術開發》網頁開發入門任務1.1

認識網頁前端技術開發任務實施二312查看CSS源代碼以及網頁的變化查看網頁的源代碼以及網頁的顯示效果查看Javascript源代碼以及網頁的變化樣式表的網頁純HTML網頁有腳本的網頁任務引入一3個內容一樣的網頁，網頁包含一個標題、一個按鈕和一個消息文本任務描述認識網頁1.依次打開三個網頁，查看網頁界面的變化。2.認識HTML5、CSS3和JavaScript在網頁開發中的作用。任務實施二純HTML代碼的網頁<!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <title>純HTML網頁</title> </head> <body> <h1>Hello,World!</h1> <buttonid="myButton">單擊我</button> <pid="message">消息將在這里顯示。

</p> </body></html>任務實施二有樣式表的網頁<styletype="text/css">body{ background-color:aquamarine;}button{ padding:10px20px; font-size:16px; background-color:blanchedalmond; border:1pxsandybrownsolid;}#message{ font-size:18px; color:red;}</style>任務實施二加腳本的網頁<scripttype="text/javascript">function

clickButton(){ varmessageElement=document.getElementById('message'); messageElement.innerText='按鈕被單擊了!'; messageElement.style.color='blue';}</script>感謝觀看信息安全技術應用ApplicationofInformationSecurityTechnology《前端技術開發》網頁和網站概述信息安全技術應用ApplicationofInformationSecurityTechnology《前端技術開發》前端技術開發知識儲備網頁概述1HTTP協議2URL地址3網站概述401網頁概述前端技術開發網頁概述前端技術開發01網頁定義網頁是構成網站的基本元素，是承載各種網站應用的平臺，通過鏈接可以從一個頁面跳轉到另一個頁面。網頁功能網頁具有信息展示、用戶交互、數據傳遞等多種功能，是互聯網信息傳播和交流的重要工具。網頁概述前端技術開發01網頁組成要素文字網頁中的文字是傳遞信息的主要方式，包括標題、段落、列表等多種形式。圖片網頁中的圖片可以豐富頁面內容，提高用戶體驗，包括靜態圖片和動態圖片。動畫動畫可以使網頁更加動態和吸引人。可以是GIF動畫，也可以是CSS或JavaScript動畫。視頻視頻是多媒體元素中最為生動的一種。通過視頻，網頁可以展示教學內容、廣告宣傳等。網頁概述前端技術開發01網頁分類靜態網頁是事先編寫好的HTML文件，內容相對穩定，用戶訪問時直接從服務器上獲取。靜態網頁動態網頁可以根據用戶請求動態生成內容，具有更強的交互性和實時性。動態網頁010202HTTP協議介紹前端技術開發HTTP協議介紹前端技術開發02HTTP（HyperTextTransferProtocol，超文本傳輸協議）是一種用于傳輸超文本（如HTML）的協議，它在互聯網上應用非常廣泛，構成了WWW（WorldWideWeb，萬維網）的基礎。定義HTTP協議用于從Web服務器傳輸超文本到本地瀏覽器的傳輸協議。它可以使瀏覽器更加高效，使網絡傳輸減少。它不僅保證計算機正確快速地傳輸超文本文檔，還確定傳輸文檔中的哪一部分，以及哪部分內容首先顯示(如文本先于圖形)等。作用HTTP協議介紹前端技術開發02InternetWeb服務器客戶機(瀏覽器)home.html用戶通過瀏覽器訪問某個網頁后，瀏覽器和Web服務器執行以下動作：HTTP1瀏覽器與服務器建立TCP連接(80端口)2瀏覽器請求文檔：GET/home.html3服務器作出響應，將文檔home.html發送給瀏覽器4釋放TCP連接5瀏覽器顯示home.html中的內容TCP連接建立TCP連接請求文檔HTTP請求報文響應文檔HTTP響應報文釋放TCP連接03URL地址前端技術開發URL地址前端技術開發03URL功能通過URL可以訪問互聯網上的各種資源，如網頁、圖片、視頻、音頻、文檔等。它是互聯網上資源之間互相鏈接的基礎。URL定義URL（UniformResourceLocator，統一資源定位符）是用于完整地描述互聯網上某個資源的地址（包括協議類型、主機名、路徑及文件名等）。URL地址前端技術開發03URL的基本結構：協議類型://域名:端口號/路徑[?查詢]http://localhost:8080/news/detail.jsp?id=1協議域名：端口號文件路徑查詢字符串04網站概述前端技術開發網站概述前端技術開發04定義網站是指在因特網上根據一定的規則，使用HTML等工具制作的用于展示特定內容相關網頁的集合。功能提供信息發布、產品展示、在線交流、網上交易等功能，是企業、組織或個人在互聯網上展示形象和提供服務的重要窗口。小結前端技術開發05030201網頁概述URL地址HTTP協議04網站概述感謝觀看信息安全技術應用ApplicationofInformationSecurityTechnology《前端技術開發》HTML、CSS、JS三者之間的關系信息安全技術應用ApplicationofInformationSecurityTechnology《前端技術開發》前端技術開發知識儲備HTML5概述1CSS3概述2JavaScript概述3三者的關系401HTML5概述前端技術開發HTML5概述前端技術開發01HTML5是一種超文本標記語言，用于構建和呈現網頁內容，是Web技術的核心標準之一。定義HTML5自2004年開始起草，經歷了多個版本迭代和完善，最終于2014年正式發布。其發展過程中，不斷吸收了Web開發領域的最佳實踐和技術創新，逐漸成為了現代Web開發的基礎。發展歷程網頁概述前端技術開發01HTML5的主要特點跨平臺性HTML5具有良好的跨平臺性，可以在不同操作系統和設備上實現一致的網頁呈現效果。語義化標簽HTML5引入了大量語義化標簽，使網頁結構更加清晰易懂，有利于搜索引擎優化（SEO）和無障礙訪問。多媒體支持HTML5原生支持音頻和視頻等多媒體元素，無需依賴第三方插件即可實現豐富的媒體展示功能。離線應用HTML5支持離線應用（OfflineApplication）功能，使得Web應用可以在用戶設備上緩存數據，提高訪問速度和用戶體驗。0103020402CSS3概述前端技術開發CSS3概述前端技術開發02定義CSS3是CascadingStyleSheets（層疊樣式表）的第三版，用于描述HTML或XML（包括SVG、MathML等）文檔的樣式。發展歷程CSS3的發展始于2000年左右，隨著Web技術的不斷進步，CSS3逐漸成為了Web設計領域不可或缺的一部分。經過多年的發展，CSS3已經得到了廣泛的瀏覽器支持，為Web設計師提供了更多的創作手段和可能性。CSS3概述前端技術開發02CSS3引入了眾多新特性，如圓角、陰影、漸變、動畫等，使得Web頁面更加美觀、生動。同時，CSS3還支持媒體查詢，可以根據設備的屏幕尺寸和分辨率等條件來應用不同的樣式，從而實現了響應式設計。特點CSS3的優勢在于其強大的樣式控制能力和跨平臺性。通過CSS3，設計師可以輕松地控制頁面的布局、顏色、字體等各個方面，實現高度個性化的設計。此外，CSS3的跨平臺性也使得Web頁面能夠在不同的設備和瀏覽器上保持一致的外觀和體驗。優勢03JavaScript概述前端技術開發JavaScript概述前端技術開發03發展歷程起源于1995年，最初由Netscape公司開發并命名為LiveScript，后改名為JavaScript。隨著Web技術的不斷發展，JavaScript已成為前端開發的基礎語言。定義JavaScript是一種高級的、解釋型的編程語言，被廣泛用于Web應用開發。JavaScript概述前端技術開發03功能實現網頁上的動態交互效果，如表單驗證、彈出窗口、動態修改頁面內容等。特點動態類型語言，支持面向對象編程，具有函數優先的編程風格，可以方便地操作DOM元素，與HTML和CSS緊密集成。010204三者的關系前端技術開發三者的關系前端技術開發04HTML5提供了豐富的標簽和API，用于構建和呈現網頁內容，是網頁的骨架。HTML5定義網頁結構CSS3通過樣式規則對HTML元素進行美化，實現復雜的頁面布局和視覺效果。CSS3負責樣式與布局JavaScript為網頁添加動態效果和交互功能，提升用戶體驗。JavaScript實現交互功能010203小結前端技術開發05030201HTML定義了網頁的結構和內容。JavaScript為網頁添加了交互性和動態功能。CSS負責這些內容的布局和樣式。感謝觀看信息安全技術應用ApplicationofInformationSecurityTechnology《前端技術開發》HTML5和CSS3新增功能信息安全技術應用ApplicationofInformationSecurityTechnology《前端技術開發》前端技術開發知識儲備HTML5新增功能1CSS3新增功能2響應式設計301HTML5新增功能前端技術開發HTML5新增功能前端技術開發01<header>表示頁面或頁面區域（如區段或部分）的介紹性內容。<footer>表示頁面或頁面區域的底部（頁腳）。<article>表示頁面中的獨立內容區域，如博客條目、新聞報道等。<section>表示頁面中的一個獨立區段，如章節、頁眉、頁腳或頁面中的其他部分。<nav>表示頁面中的導航鏈接部分。<aside>表示與頁面主要內容相關，但又是獨立的內容區域，如側邊欄。語義化標簽HTML5新增功能前端技術開發01媒體支持增強<video>和<audio>標簽允許開發人員將視頻和音頻嵌入到HTML文檔中，而無需依賴第三方插件。支持多種視頻和音頻格式如MP4、WebM、Ogg等，提供了更廣泛的兼容性。媒體API提供了JavaScriptAPI來控制媒體播放、暫停、音量等，增強了交互性。HTML5新增功能前端技術開發01010203使用GeolocationAPI獲取用戶位置提供高精度和低精度兩種定位模式可用于構建基于位置的服務和應用HTML5地理定位HTML5新增功能前端技術開發01HTML5畫布010203提供了通過JavaScript在網頁上繪制圖形的方法支持圖像、矩形、圓形、線條等基本圖形的繪制可用于實現動態圖表、動畫和游戲等交互功能HTML5新增功能前端技術開發01HTML5拖放功能010203拖放API支持元素間的拖放交互可自定義拖放行為及數據傳遞增強了Web應用的交互性和用戶體驗02CSS3新增功能前端技術開發CSS3新增功能前端技術開發02屬性選擇器CSS3引入了更多強大的屬性選擇器，允許開發者根據元素的屬性和屬性值來選擇元素，提供了更靈活和精確的樣式定位能力。偽類選擇器新增了諸如`:nth-child()`,`:nth-last-child()`,`:nth-of-type()`,`:nth-last-of-type()`,`:last-child`,`:only-child`,`:only-of-type`等偽類選擇器，為選擇特定順序或類型的子元素提供了便利。結構化偽類選擇器如`:not()`,`:empty`,`:root`等，允許根據文檔結構來選擇元素，增強了選擇器的表達能力。選擇器升級CSS3新增功能前端技術開發02視覺樣式效果提升漸變效果CSS3支持線性漸變和徑向漸變，允許開發者創建豐富的背景效果，提升了頁面的視覺吸引力。圓角與邊框圖片border-radius屬性允許創建圓角元素，而border-image屬性則支持使用圖片作為邊框，提供了更多樣化的邊框樣式。變形與動畫CSS3引入了`transform`屬性，支持對元素進行旋轉、縮放、傾斜等操作。同時，通過`transition`和`animation`屬性，可以創建平滑的過渡效果和復雜的動畫效果。陰影與光照效果通過`box-shadow`和`text-shadow`屬性，可以為元素和文本添加陰影效果，增強了頁面的立體感和層次感。CSS3新增功能前端技術開發02布局方式創新網格布局（Grid）CSSGrid是一種二維布局系統，允許開發者將頁面劃分為行和列，并在其中放置元素。它提供了更高級和靈活的布局控制能力，適用于復雜的網頁設計和響應式設計。多列布局通過`column-count`、`column-width`等屬性，CSS3支持將文本內容劃分為多列顯示，提高了文本的可讀性和頁面的美觀性。彈性盒子布局（Flexbox）Flexbox是一種現代的布局方式，允許開發者以更直觀和靈活的方式對元素進行排列和對齊。它提供了強大的對齊和分布選項，使得復雜的布局變得簡單而高效。03020103響應式設計前端技術開發響應式設計前端技術開發03媒體查詢使用CSS3的媒體查詢功能，根據設備特性（如視口寬度）調整布局和樣式，實現響應式設計。彈性布局采用Flexbox或Grid等CSS3布局技術，創建靈活且響應式的網頁布局。流式布局通過設置元素的百分比寬度，使元素能夠隨著視口寬度的變化而自動調整大小。適配不同設備確保網頁在不同設備上（如手機、平板、桌面電腦）都能良好地顯示和使用。小結前端技術開發05CSS3樣式增強CSS3引入了圓角、陰影、漸變、動畫等視覺效果，使頁面更加美觀和動態。HTML5功能增強HTML5引入了大量語義化標簽，媒體支持增強，本地存儲，地理定位，畫布和拖放功能。感謝觀看信息安全技術應用ApplicationofInformationSecurityTechnology《前端技術開發》項目1

創建非遺項目站點信息安全技術應用ApplicationofInformationSecurityTechnology《前端技術開發》網頁開發入門任務1.2

制作非遺調研網頁前端技術開發任務引入一本任務制作非遺調研網頁，使用語義化標簽任務描述制作非遺調研網頁1.使用HTML5的語義標記定義來構建網頁內容的結構。2.網頁分成上中下三部分，分別用<header>、<main>和<footer>標注。3.設置網頁元素的背景樣式、文字樣式、填充和邊距等。任務實施二312使用section對主體內容進行分區，使用<article>標注文檔創建頭部、主體、尾部區域設置頁面的背景、對齊等樣式圖文排版創建網頁元素設置文檔樣式任務實施二非遺調研網頁主體框架代碼<header> <h1>調研</h1></header><main></main><footer><p>版權所有?2024非物質文化遺產</p></footer>任務實施二非遺調研網頁main區域代碼<main> <sectionid="projects"> <h2>非遺考察與實踐</h2> <article> <h3><ahref="dy_1.html">小鎮里的錦繡華章——國家級非遺項目蘇繡調研札記</a></h3> <p>鎮湖，一個名不見經傳的蘇州小鎮，迤邐于太湖之濱…</p> </article> <article> <h3><ahref="dy_2.html">非遺保護與鄉村振興的文坡實踐</a></h3> <p>文坡村作為侗錦織造技藝的…</p> </article></section> <sectionid="contact"> <h2>聯系方式</h2> <p>郵箱:<ahref="mailto:info@">info@</a></p> <p>電話:123-456-7890</p> </section></main>任務實施二非遺調研網頁CSS代碼<style> body{ font-size:14px; } header,footer{ background:url(img/bg.png); text-align:center; padding:10px0; }</style>感謝觀看信息安全技術應用ApplicationofInformationSecurityTechnology《前端技術開發》HTML5基礎語法信息安全技術應用ApplicationofInformationSecurityTechnology《前端技術開發》前端技術開發知識儲備標記概念1標記分類2標記屬性3標記案例401標記概述前端技術開發標記概述前端技術開發01標記定義HTML5標記是構成HTML文檔的基本元素，用于定義網頁的內容結構和呈現方式，它們是一組由尖括號<和>包圍的關鍵字或標識符。標記功能標記的作用是指定網頁中內容的格式和含義，如`<p>`表示段落，`<img>`表示圖像等。瀏覽器會根據HTML文檔中的標記來渲染網頁，呈現出相應的視覺效果。02標記分類前端技術開發標記分類前端技術開發02在網頁文檔中單獨出現的稱為單標記，形如<標記名稱>或<標記名稱/>，它們不需要結束標記，如：<br>或<br/>。單標記由起始標記（形如<標記名稱>）和結束標記（形如</標記名稱>）組成，在網頁文檔中會成對出現，如<p>標記內容</p>。雙標記03標記屬性前端技術開發標記屬性前端技術開發03屬性總是包含在開始標簽中，并且總是以名稱/值對的形式出現，如name="value"。有些屬性是必需的，有些則是可選的。必需屬性對于元素的正確顯示是必需的，而可選屬性則只是提供一些額外的信息或設置。屬性值可以用雙引號或單引號包裹起來，也可以不用引號包裹，但是推薦使用引號，這樣可以避免某些瀏覽器解析錯誤。<標記名稱[屬性名稱1="屬性值"[屬性名稱2="屬性值"…屬性n]]>標記屬性前端技術開發03<br><br>標簽是一個單標記，用于在文本中插入一個簡單的換行，<br>標簽沒有屬性。<hr><hr>標簽用于在HTML頁面中插入一條水平線，以分隔內容。align=”left|center|right”size=”像素值”width=“像素值|百分比”<hrsize="1px"align="left"width="75%">04標記案例前端技術開發標記屬性前端技術開發03<head><metacharset="utf-8"/><title>設置水平線</title></head><body>

水平線屬性：粗細為1，對齊方式為左對齊，寬度為整個瀏覽器的75%。

水平線屬性：粗細為5，對齊方式為右對齊，寬度為整個瀏覽器的100%。

</body></html>案例<hrsize="1px"align="left"width="75%"><hrsize="5px"align="right"width="100%">小結前端技術開發05HTML5標記的概念：HTML（HyperTextMarkupLanguage）是一種用于創建網頁的標記語言，通過標記來描述網頁的結構和內容。HTML5標記的語法：HTML標記通常由開始標識<、內容和結束標識>組成，具有特定的語法規則。HTML5標記的屬性：為HTML標記提供了額外的信息或指令，通常以鍵值對的形式出現在HTML標簽中。HTML5標記的分類：HTML中的標記可分為單標記和雙標記。單標記只有開始標記，沒有結束標記。而雙標記則具有開始標記和結束標記。感謝觀看信息安全技術應用ApplicationofInformationSecurityTechnology《前端技術開發》HTML5文檔整體結構信息安全技術應用ApplicationofInformationSecurityTechnology《前端技術開發》前端技術開發知識儲備文檔基本結構1<head>標記2<body>標記301文檔基本結構前端技術開發文檔基本結構前端技術開發01文檔頂級標記為<html></html>標記，它的直接子元素為<head>和<body>元素<html><head></head>標記表示文檔頭部。<head><body></body>標記創建文檔主體。<body>010203<HTML></HTML><head></head><title>文檔標題</title><body></body>文檔主體02<head>標記前端技術開發<head>標記前端技術開發02<head>標簽用于定義網頁的頭部內容，是HTML文檔中必須的部分。它包含了

溫馨提示

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

評論

0/150

提交評論