Web前端開發(fā)技術(shù)項(xiàng)目教程（HTML5 CSS3 JavaScript）（微課版）-課件 項(xiàng)目1 創(chuàng)建非遺項(xiàng)目站點(diǎn)_第1頁(yè)
Web前端開發(fā)技術(shù)項(xiàng)目教程（HTML5 CSS3 JavaScript）（微課版）-課件 項(xiàng)目1 創(chuàng)建非遺項(xiàng)目站點(diǎn)_第2頁(yè)
Web前端開發(fā)技術(shù)項(xiàng)目教程（HTML5 CSS3 JavaScript）（微課版）-課件 項(xiàng)目1 創(chuàng)建非遺項(xiàng)目站點(diǎn)_第3頁(yè)
Web前端開發(fā)技術(shù)項(xiàng)目教程（HTML5 CSS3 JavaScript）（微課版）-課件 項(xiàng)目1 創(chuàng)建非遺項(xiàng)目站點(diǎn)_第4頁(yè)
Web前端開發(fā)技術(shù)項(xiàng)目教程（HTML5 CSS3 JavaScript）（微課版）-課件 項(xiàng)目1 創(chuàng)建非遺項(xiàng)目站點(diǎn)_第5頁(yè)
已閱讀5頁(yè)，還剩85頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

項(xiàng)目1

創(chuàng)建非遺項(xiàng)目站點(diǎn)信息安全技術(shù)應(yīng)用ApplicationofInformationSecurityTechnology《前端技術(shù)開發(fā)》網(wǎng)頁(yè)開發(fā)入門任務(wù)1.1

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

</p> </body></html>任務(wù)實(shí)施二有樣式表的網(wǎng)頁(yè)<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>任務(wù)實(shí)施二加腳本的網(wǎng)頁(yè)<scripttype="text/javascript">function

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

創(chuàng)建非遺項(xiàng)目站點(diǎn)信息安全技術(shù)應(yīng)用ApplicationofInformationSecurityTechnology《前端技術(shù)開發(fā)》網(wǎng)頁(yè)開發(fā)入門任務(wù)1.2

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

水平線屬性：粗細(xì)為1，對(duì)齊方式為左對(duì)齊，寬度為整個(gè)瀏覽器的75%。

水平線屬性：粗細(xì)為5，對(duì)齊方式為右對(duì)齊，寬度為整個(gè)瀏覽器的100%。

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

溫馨提示

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

最新文檔

評(píng)論

0/150

提交評(píng)論