網(wǎng)頁制作案例教程HTML5+CSS3 課件 項目1 網(wǎng)頁制作入門_第1頁
網(wǎng)頁制作案例教程HTML5+CSS3 課件 項目1 網(wǎng)頁制作入門_第2頁
網(wǎng)頁制作案例教程HTML5+CSS3 課件 項目1 網(wǎng)頁制作入門_第3頁
網(wǎng)頁制作案例教程HTML5+CSS3 課件 項目1 網(wǎng)頁制作入門_第4頁
網(wǎng)頁制作案例教程HTML5+CSS3 課件 項目1 網(wǎng)頁制作入門_第5頁
已閱讀5頁，還剩34頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

HTMLCSS項目1網(wǎng)頁制作入門網(wǎng)頁制作案例教程（HTML5+CSS3）教學(xué)目標(biāo)了解網(wǎng)頁基本概念及Web標(biāo)準(zhǔn)。1了解熟悉熟悉掌握2熟悉HTML語言的發(fā)展歷史。3掌握VSCode

工具的使用。能夠使用VSCode創(chuàng)建簡單的網(wǎng)頁熟悉HTML5頁面文檔結(jié)構(gòu)。41Web的基本概念2HTML和HTML53Web前端開發(fā)工具4制作簡單HTML5頁面任務(wù)分解5HTML5頁面基礎(chǔ)PART0101Web的基本概念Web的基本概念網(wǎng)頁網(wǎng)頁是網(wǎng)站中的一個頁面，是Internet用于展示信息的一種形式。網(wǎng)頁主要由文字、圖像和超鏈接等元素構(gòu)成。圖像文字超鏈接Web的基本概念開發(fā)者眼中的網(wǎng)頁？一般人見到的網(wǎng)頁？Web的基本概念網(wǎng)站多個頁面集合在一起組成網(wǎng)站。Web的基本概念網(wǎng)站每個網(wǎng)站有一個站點(diǎn)文件夾（又稱站點(diǎn)根目錄），里面包含了內(nèi)容相關(guān)的網(wǎng)頁文件、網(wǎng)頁中使用的圖像文件、樣式文件以及腳本文件。為了分類管理，站點(diǎn)文件夾下可以有很多子文件夾。Web的基本概念瀏覽器瀏覽器是用來檢索、展示以及傳遞Web信息資源的應(yīng)用程序。主流的瀏覽器分為IE、Chrome、Firefox、Safari、Opera等幾大類。Web的基本概念W3CW3C（英文WorldWideWebConsortium的縮寫）中文譯為“萬維網(wǎng)聯(lián)盟”，是一個國際標(biāo)準(zhǔn)化組織。W3C最重要的工作是發(fā)展Web規(guī)范，制定了一系列標(biāo)準(zhǔn)，HTML、XML、CSS的標(biāo)準(zhǔn)就是由W3C來定制的。Web開發(fā)者遵循這些標(biāo)準(zhǔn)。Web的基本概念Web標(biāo)準(zhǔn)Web標(biāo)準(zhǔn)是由W3C和其他標(biāo)準(zhǔn)化組織制定的一系列標(biāo)準(zhǔn)的集合。包含HTML、XHTML、CSS、JavaScript等等。結(jié)構(gòu)標(biāo)準(zhǔn)表現(xiàn)標(biāo)準(zhǔn)行為標(biāo)準(zhǔn)結(jié)構(gòu)標(biāo)準(zhǔn)用于對網(wǎng)頁元素進(jìn)行組織和分類，主要包括XML、HTML和XHTML。表現(xiàn)標(biāo)準(zhǔn)用于設(shè)置網(wǎng)頁元素的版式、顏色、大小等外觀樣式，主要指的是CSS。行為標(biāo)準(zhǔn)是指網(wǎng)頁模型的定義及交互的編寫，主要包括DOM和ECMAScript。Web的基本概念相關(guān)名詞名詞名詞釋義WWWWWW（英文WorldWideWeb的縮寫）中文譯為“萬維網(wǎng)”，是Intertnet提供的一種網(wǎng)頁瀏覽服務(wù)。URLURL（英文UniformResourceLocator的縮寫）中文譯為“統(tǒng)一資源定位符”URL其實就是Web地址，俗稱“網(wǎng)址”。DNSDNS（英文DomainNameSystem的縮寫）是域名解析系統(tǒng)。HTTPHTTP(英文Hypertexttransferprotocol的縮寫)中文譯為超文本傳輸協(xié)議，規(guī)定了瀏覽器和萬維網(wǎng)服務(wù)器之間互相通信的規(guī)則。http信息是明文傳輸，https則是加密傳輸協(xié)議。PART0202HTML和HTML5HTML和HTML5HTML(HyperTextMarkupLanguage)，譯為“超文本標(biāo)記語言”，是一種用于創(chuàng)建網(wǎng)頁的標(biāo)準(zhǔn)標(biāo)記語言。HTML網(wǎng)頁主要是通過HTML標(biāo)記對網(wǎng)頁中的文本、圖片、超鏈接等內(nèi)容進(jìn)行描述。<img>是一個圖像標(biāo)記，它定義了在網(wǎng)頁中要顯示一副圖像，并通過src屬性指定了圖像的位置，width屬性指定了圖像的寬度。HTML和HTML5HTML2.01995年11月作為RFC1866發(fā)布，在RFC2854于2000年6月發(fā)布之后被宣布過時。超文本標(biāo)記語言（第一版）在1993年6月作為互聯(lián)網(wǎng)工程工作小組（IETF）工作草案發(fā)布。HTML3.21997年1月14日，W3C推薦標(biāo)準(zhǔn)。HTML4.01997年12月18日，W3C推薦標(biāo)準(zhǔn)。HTML4.011999年12月24日，W3C推薦標(biāo)準(zhǔn)。HTML52008年1月22日公布第一份正式草案，2014年10月底定稿。由于各個瀏覽器支持的不是很統(tǒng)一，所以還沒有得到廣泛應(yīng)用。HTML語言發(fā)展至今，經(jīng)歷了六個版本，這個過程中新增了許多HTML標(biāo)記，同時也淘汰了一些標(biāo)記。任務(wù)實現(xiàn)

HTML5是超文本標(biāo)記語言的第5代版本，是最新的HTML標(biāo)準(zhǔn)，HTML5由不同的技術(shù)構(gòu)成，在互聯(lián)網(wǎng)中得到了非常廣泛的應(yīng)用。HTML4是為了適應(yīng)pc時代產(chǎn)生的，HTML5是為了適應(yīng)移動互聯(lián)網(wǎng)時代產(chǎn)生的。HTML和HTML5HTML和HTML5良好的用戶體驗增加了許多實用的特性化繁為簡的優(yōu)勢解決了跨瀏覽器問題新的語義元素：<header>,<footer>,<nav>,<aside>...新的表單控件：數(shù)字、日期、時間...媒體和畫布功能：<video>、<audio><canvas>強(qiáng)大的新API：本地存儲取代cookie...之前由于各個瀏覽器不統(tǒng)一，因為修改瀏覽器兼容引起的bug浪費(fèi)了大量的時間。在HTML5中視頻、音頻、圖像、動畫都會標(biāo)準(zhǔn)化，會解決瀏覽器兼容這個問題。HTML5規(guī)范以“用戶至上”為原則。簡化了DOCTYPE和字符集的聲明。新增了部分功能，這些功能可以代替JavaScript，代碼頁面更簡潔。HTML5的優(yōu)勢HTML和HTML5文檔結(jié)構(gòu)變化HTML4文檔結(jié)構(gòu)HTML5文檔結(jié)構(gòu)VS<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"><title>無標(biāo)題文檔</title></head><body></body></html><!doctypehtml><html><head><metacharset="utf-8"><title>無標(biāo)題文檔</title></head><body></body></html>HTML和HTML5

目前大部分主流的瀏覽器都支持HTML5特性，最新版本的

Safari、Chrome、Firefox以及Opera支持某些HTML5特性。InternetExplorer9及其以上版本將支持某些HTML5特性。HTML5的對瀏覽器的支持PART0303Web前端開發(fā)工具Notepad++是一款Windows環(huán)境下的免費(fèi)的代碼編輯器，記事本的增強(qiáng)版。支持HTML，CSS，JavaScript，Java，PHP等多種計算機(jī)程序語言?？梢宰鳛榍岸碎_發(fā)一個的入門工具。開發(fā)工具WebStorm是一個比較專業(yè)前端開發(fā)軟件，支持代碼高亮、智能補(bǔ)全、Git等功能，還支持代碼調(diào)試、重構(gòu)等功能，相對其他軟件來說，體積比較大，功能也更復(fù)雜，在項目管理、團(tuán)隊協(xié)作開發(fā)中經(jīng)常會用到。Dreamweaver是集網(wǎng)頁制作和管理于一身的所見即所得網(wǎng)頁代碼編輯器。支持HTML、CSS、JavaScript、PHP等語言，使用可視化工具，可以快速制作和進(jìn)行網(wǎng)站建設(shè)?？梢暬ぞ邥a(chǎn)生冗余代碼，適合做入門工具。VisualStudioCode簡稱“VSCode”，是由微軟推出的一款跨平臺、開源、免費(fèi)的代碼編輯器，支持多種編程語言和框架，由于其豐富的功能和良好的用戶體驗，成為了眾多開發(fā)者的首選。開發(fā)工具開源免費(fèi)開源免費(fèi)的工具對于初學(xué)者來說非常方便。跨平臺VSCode支持Windows、macOS和Linux等多種操作系統(tǒng)。簡單易用VSCode具有語法高亮顯示、智能代碼補(bǔ)全、自定義快捷鍵和代碼匹配等功能?？蓴U(kuò)展，插件豐富VSCode的插件擴(kuò)展系統(tǒng)非常強(qiáng)大，通過安裝插件，可以輕松擴(kuò)展VSCode的功能。運(yùn)行速度快VSCode的文件大小和占用內(nèi)存較小，輕巧極速。VSCode特點(diǎn)開發(fā)工具VSCode官網(wǎng)下載地址下載開發(fā)工具如果下載速度慢，可以復(fù)制下載網(wǎng)址，使用國內(nèi)鏡像服務(wù)器。/stable/695af097c7bd098fbf017ce3ac85e09bbc5dda06/VSCodeUserSetup-x64-1.79.2.exe（原地址）。在瀏覽器地址欄中粘貼原地址，并修改為鏡像服務(wù)器地址，按回車鍵進(jìn)行下載：/stable/695af097c7bd098fbf017ce3ac85e09bbc5dda06/VSCodeUserSetup-x64-1.79.2.exe（鏡像服務(wù)器地址）下載開發(fā)工具用戶界面編輯區(qū)菜單欄標(biāo)題欄側(cè)邊欄活動欄狀態(tài)欄開發(fā)工具漢化

VSCodPART0404制作簡單HTML5頁面從火箭廠房到衛(wèi)星車間，從天和遨游到行星探測，隨著一項項追星逐月的重大航天工程的加速推進(jìn)，中國航天開啟了全面建設(shè)航天強(qiáng)國新征程。下面我們制作一個關(guān)于航天飛行任務(wù)的一個簡單網(wǎng)頁制作簡單HTML5頁面攀科技高峰，服務(wù)國家發(fā)展大局制作簡單HTML5頁面網(wǎng)頁

分析標(biāo)題水平線圖像段落制作簡單HTML5頁面制作

步驟新建項目文件夾，準(zhǔn)備素材1新建文件，生成頁面基本代碼3打開VSCode，打開項目文件夾24輸入網(wǎng)頁標(biāo)題和內(nèi)容制作簡單HTML5頁面<body>

<h2>神舟十三號載人飛船飛行任務(wù)</h2>

<hr/>

<imgsrc="img/ship.jpg"width="300px"alt="">

<p>2021年10月16日0時23分，搭載神舟十三號載人飛船的長征二號F遙十三運(yùn)載火箭在酒泉衛(wèi)星發(fā)射中心按照預(yù)定時間精準(zhǔn)點(diǎn)火發(fā)射。

</p>

</body>制作簡單HTML5頁面欣賞源自中國載人航天網(wǎng)：/fxrw/PART0505HTML5頁面基礎(chǔ)HTML5頁面基礎(chǔ)HTML5文檔基本格式文檔類型聲明語句用來向瀏覽器說明使用的是哪種HTML標(biāo)準(zhǔn)，<!DOCTYPEhtml>聲明文檔類型是html；meta標(biāo)記<metacharset=“utf-8”>，聲明使用utf-8字符集，也可以使用gb2312字符集；<title>標(biāo)記定義網(wǎng)頁的標(biāo)題。根標(biāo)記<html>，<html>標(biāo)記文檔開始，</html>標(biāo)記文檔結(jié)束；頭部<head>標(biāo)記，用于封裝位于頭部的標(biāo)記：<meta>、<title>、<link>、<style>等；主體<body>標(biāo)記，body標(biāo)記里面包含要顯示的網(wǎng)頁內(nèi)容；HTML5頁面基礎(chǔ)標(biāo)記<h1>飛行任務(wù)</h1><hr><imgsrc="img/shenzhou.jpg"alt=""width="300px"><p><strong>發(fā)射時間:</strong>2021年10月16日0時23分</p>帶有“<>”符號的元素被稱為HTML標(biāo)記，也稱為HTML標(biāo)簽或HTML元素通常將HTML標(biāo)記分為兩大類：“雙標(biāo)記”與“單標(biāo)記”。雙標(biāo)記由開始和結(jié)束兩個標(biāo)記符組成的標(biāo)記。<標(biāo)記名>內(nèi)容</標(biāo)記名>單標(biāo)記指用一個標(biāo)記符號即可完整地描述某個功能的標(biāo)記。<標(biāo)記名/>HTML5頁面基礎(chǔ)屬性基本語法格式<標(biāo)記名屬性1="屬性值1"屬性2="屬性值2"…>內(nèi)容</標(biāo)記名>在HTM

溫馨提示

  • 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

提交評論