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

下載本文檔

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

文檔簡介

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

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

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

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

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

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

分析標題水平線圖像段落制作簡單HTML5頁面制作

步驟新建項目文件夾，準備素材1新建文件，生成頁面基本代碼3打開VSCode，打開項目文件夾24輸入網頁標題和內容制作簡單HTML5頁面<body>

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

<hr/>

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

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

</p>

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

溫馨提示

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

最新文檔

評論

0/150

提交評論