HTML5+CSS3 Web前端設(shè)計基礎(chǔ)教程 第3版 課件 第1、2章 Web前端職業(yè)前景與重要理念、HTML 5面的構(gòu)建與簡單控制

第1章本章將從職業(yè)發(fā)展前景出發(fā)，立足職位需求，向讀者介紹有關(guān)Web前端所涉及的入門知識。Web前端職業(yè)前景與重要理念1.1了解Web前端工程師表1-1主流招聘網(wǎng)站職位需求量對比招聘網(wǎng)站“Web前端工程師”職位需求數(shù)量“Java工程師”職位需求數(shù)量“PHP工程師”職位需求數(shù)量前程無憂（/）11207個37965個7050個備注：數(shù)據(jù)參考時間點2020年3月1日，地域范圍：北京、上海、廣州、深圳1.1了解Web前端工程師1．前景

（1）支持HTML5的設(shè)備快速增長

（2）大面積使用HTML5

（3）知名企業(yè)關(guān)注HTML51.1.1HTML5前端開發(fā)的前景與必要認(rèn)知1.1了解Web前端工程師2．認(rèn)知（1）認(rèn)知HTML

超文本標(biāo)記語言（HyperTextMarkupLanguage，簡稱為HTML）是為“網(wǎng)頁創(chuàng)建和其它可在網(wǎng)頁瀏覽器中看到的信息”設(shè)計的一種標(biāo)記語言。1.1了解Web前端工程師圖1-1百度網(wǎng)站首頁的源代碼

1.1了解Web前端工程師

（2）認(rèn)知HTML

簡單來說，HTML5是對HTML標(biāo)準(zhǔn)的第五次修訂，其主要的目標(biāo)是將互聯(lián)網(wǎng)語義化。

圖1-3圍住神經(jīng)貓（html5小游戲）圖1-4微信小程序“跳一跳”1.1了解Web前端工程師狹義的HTML5HTML5草案的前身名為WebApplications1.0，該規(guī)范定義了第五次重大版本，在這個版本中新功能不斷推出，以幫助Web應(yīng)用程序的作者，努力提高新元素互操作性。廣義的HTML5廣義的HTML5包括HTML、CSS和JavaScript在內(nèi)的一套技術(shù)組合，其目標(biāo)是減少瀏覽器對于插件的依賴。1.1了解Web前端工程師1.1.2認(rèn)識網(wǎng)頁的構(gòu)成元素

1．網(wǎng)頁2．網(wǎng)站3．首頁4．靜態(tài)網(wǎng)頁和動態(tài)網(wǎng)頁5．網(wǎng)頁的構(gòu)成元素1.1了解Web前端工程師圖1-5網(wǎng)頁構(gòu)成元素圖像文本鏈接圖像鏈接借助JavaScript實現(xiàn)的圖像滾動效果表單5．網(wǎng)頁的構(gòu)成元素（1）文本（2）圖像（3）超鏈接（4）表單（5）動畫（6）音頻和視頻1.1了解Web前端工程師1.1.3了解專業(yè)術(shù)語1．WWWWWW是環(huán)球信息網(wǎng)的縮寫，英文全稱為“WorldWideWeb”，中文名字為“萬維網(wǎng)”。2．InternetInternet（互聯(lián)網(wǎng)）是網(wǎng)絡(luò)與網(wǎng)絡(luò)之間所串連成的龐大網(wǎng)絡(luò)，這些網(wǎng)絡(luò)以一組通用的協(xié)議相連，形成邏輯上的單一巨大國際網(wǎng)絡(luò)。3．W3CW3C英文全稱為WorldWideWebConsortium（萬維網(wǎng)聯(lián)盟），它是Web技術(shù)領(lǐng)域最具權(quán)威和影響力的國際中立性技術(shù)標(biāo)準(zhǔn)機構(gòu)。4．HTTPHTTP是HypertextTransferProtocol的縮寫，即超文本傳輸協(xié)議。1.1了解Web前端工程師5．URL統(tǒng)一資源標(biāo)識符（UniformResourceLocator，URL），這是一個世界通用的負(fù)責(zé)給萬維網(wǎng)上每個“資源”定位的系統(tǒng)。6．DNSDNS（DomainNameSystem，域名系統(tǒng)）。通過主機名，最終得到該主機名對應(yīng)的IP地址的過程叫做域名解析。7．JavaScriptJavaScript一種直譯式腳本語言，是一種動態(tài)類型、弱類型、基于原型的語言，它的解釋器被稱為JavaScript引擎。8．CSSCSS（CascadingStyleSheets，層疊樣式表）是一種用來表現(xiàn)網(wǎng)頁樣式的語言，能夠?qū)W(wǎng)頁中的對象的位置排版進行精確控制。1.2重要理念——表現(xiàn)和結(jié)構(gòu)相分離1．什么是“表現(xiàn)和結(jié)構(gòu)相分離”內(nèi)容：內(nèi)容就是頁面實際要傳達的真正信息，包含數(shù)據(jù)、文檔或者圖片等。結(jié)構(gòu)：盛裝內(nèi)容的框架。樣式：用來改變內(nèi)容外觀的東西，稱為外在表現(xiàn)。行為：行為就是對內(nèi)容的交互操作。1.2.1體驗“表現(xiàn)和結(jié)構(gòu)相分離”圖1-6MIDCENTURYMODERN樣式主題圖1-7AROBOTNAMEDJIMMY樣式主題1.2重要理念——表現(xiàn)和結(jié)構(gòu)相分離2．體驗“表現(xiàn)和結(jié)構(gòu)相分離”1.2重要理念——表現(xiàn)和結(jié)構(gòu)相分離圖1-8Web標(biāo)準(zhǔn)示意圖1.2.2認(rèn)識WEB標(biāo)準(zhǔn)1.2重要理念——表現(xiàn)和結(jié)構(gòu)相分離1．結(jié)構(gòu)標(biāo)準(zhǔn)結(jié)構(gòu)標(biāo)準(zhǔn)其實指的就是編寫網(wǎng)頁的語言標(biāo)準(zhǔn)，即超文本標(biāo)識語言（HyperTextMarkupLanguage，縮寫為：HTML）。2．表現(xiàn)標(biāo)準(zhǔn)CSS（CascadingStyleSheets，層疊樣式表）它是一種用來表現(xiàn)HTML等文件樣式的計算機語言，它的主要優(yōu)點是提供了便利的更新功能。3．行為標(biāo)準(zhǔn)（1）DOMDOM（DocumentObjectModel，文檔對象模型）是一種與瀏覽器、平臺、語言的接口，使得用戶可以訪問頁面其他的標(biāo)準(zhǔn)組件。1.2重要理念——表現(xiàn)和結(jié)構(gòu)相分離（2）ECMAScriptECMAScript是ECMA（EuropeanComputerManufacturersAssociation，歐洲電腦廠商協(xié)會）制定的一種基于NetscapeJavaScript的標(biāo)準(zhǔn)腳本語言。4．如何驗證訪問W3C的驗證地址（/css-validator/）進行驗證。圖1-9在線驗證服務(wù)

圖1-10通過驗證后顯示的圖標(biāo)1.3Web前端開發(fā)基本流程1.3.1開發(fā)流程

1．人員配置2．基本流程（1）需求分析與調(diào)查階段。（2）設(shè)計（3）整理素材，制定規(guī)范。（4）選擇服務(wù)器解決方案確定開發(fā)意向需求分析調(diào)研產(chǎn)品原型設(shè)計

根據(jù)調(diào)研結(jié)果撰寫項目整體策劃草案，并確定服務(wù)器解決方案審閱

簽訂正式合同

代碼編寫

前端框架搭建后臺業(yè)務(wù)流程前端內(nèi)側(cè)嵌套程序內(nèi)側(cè)驗收審查產(chǎn)品發(fā)布維護與更新圖1-11網(wǎng)站建設(shè)的基本流程圖1.3Web前端開發(fā)基本流程1.3Web前端開發(fā)基本流程（5）代碼編寫（6）內(nèi)部測試與后續(xù)優(yōu)化（7）后臺程序開發(fā)（8）項目整體測試（9）維護與更新1.3.2常用開發(fā)軟件介紹

1．WebStorm2．記事本

3．Dreamweaver4．Photoshop5．GoogleChrome1.3Web前端開發(fā)基本流程1.3Web前端開發(fā)基本流程圖1-12Google瀏覽器的調(diào)試模式1.4使用“記事本”創(chuàng)建HTML5頁面圖1-13在“記事本”中輸入HTML5代碼圖1-14預(yù)覽效果1.4使用“記事本”創(chuàng)建HTML5頁面謝謝觀看！第2章本章除了介紹Dreamweaver的基本使用方法以外，還著重介紹HTML5的文檔結(jié)構(gòu)和常見標(biāo)簽等內(nèi)容。HTML5頁面的構(gòu)建與簡單控制2.1Dreamweaver的工作環(huán)境概述2.1.1界面介紹2.1Dreamweaver的工作環(huán)境概述2.1.2常用工具欄和面板1．工具欄圖2-2工具欄新版Dreamweaver的工具欄在整個操作界面的左側(cè)，如圖2-2所示，單擊按鈕可以在彈出的“自定義工具欄”對話框中，增加或減少按鈕的顯示。2.1Dreamweaver的工作環(huán)境概述2．屬性檢查器圖2-3屬性檢查器（選定對象為文本）圖2-4屬性檢查器（選定對象為圖像）2.1Dreamweaver的工作環(huán)境概述3．插入面板圖2-5HTML類別圖2-6表單類別圖2-7Bootstrap類別2.1Dreamweaver的工作環(huán)境概述5．CSS面板6．設(shè)置主、次瀏覽器圖2-9CSS面板

圖2-10設(shè)置主、次瀏覽器2.2創(chuàng)建和管理站點2.2.1創(chuàng)建站點進行網(wǎng)頁制作的第一步就是創(chuàng)建本地站點，站點管理會讓用戶的工作變得簡單而富有成效，況且許多功能必須在站點中才能實現(xiàn)?？傊?，如果不是僅編輯需要的單個頁面，那么就必須創(chuàng)建站點。圖2-12站點設(shè)置對象圖2-13創(chuàng)建“MySite”站點2.2創(chuàng)建和管理站點2.2.2“文件”面板的使用方法1．新建文件夾和文件圖2-14右鍵菜單圖2-15新建文件夾圖2-16嵌套文件夾2.2創(chuàng)建和管理站點2.2.2“文件”面板的使用方法圖2-18站點內(nèi)的基本操作圖2-19更新文件2．站點內(nèi)的基本操作2.2創(chuàng)建和管理站點2.2.3管理站點圖2-20“管理站點”對話框2.3HTML5入門2.3.1使用Dreamweaver構(gòu)建“H5標(biāo)準(zhǔn)頁面”圖2-21結(jié)構(gòu)示意圖2.3HTML5入門圖2-22標(biāo)簽1．標(biāo)簽的含義2．元素的含義3．屬性和值2.3HTML5入門2.3.2DOCTYPE文檔類型與基本結(jié)構(gòu)元素<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>鳳凰網(wǎng)</title><metacontent="鳳凰,鳳凰網(wǎng),鳳凰新媒體,鳳凰衛(wèi)視,鳳凰衛(wèi)視中文臺,phoenix"name="keywords"/><metaname="description"content="鳳凰網(wǎng)是中國領(lǐng)先的綜合門戶網(wǎng)站，提供含文圖音視頻的全方位綜合新聞資訊、深度訪談、觀點評論、財經(jīng)產(chǎn)品等服務(wù)。"/><metacontent="index,follow"name="robots"/><metacontent="鳳凰網(wǎng)"name="author"/><metacontent="Copyright1999-2014..AllRightsReserved."name="copyright"/><scriptsrc="/20150625/fa.min.js"></script><linkhref="/index/72x72_2520ifeng.png"rel="apple-touch-icon"/></head>

<body></body></html>

2.3HTML5入門

1．DOCTYPE文檔類型以下是HTML5的DOCTYPE聲明：<!doctypehtml>以下是XHTML的DOCTYPE聲明：<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd">以下是HTML4.01的DOCTYPE聲明：<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd">2.3HTML5入門

2．基本結(jié)構(gòu)元素——html元素3．基本結(jié)構(gòu)元素——head元素、title元素、meta元素、script元素、link元素（3）script元素（4）link元素（1）title元素圖2-23title元素預(yù)覽效果（2）meta元素name屬性：http-equiv屬性2.3HTML5入門2.3.3HTML5常見元素

1．標(biāo)題元素（塊級元素）圖2-24標(biāo)題元素預(yù)覽效果2.3HTML5入門2．段落元素（塊級元素）

圖2-25段落元素預(yù)覽效果2.3HTML5入門3．img元素（內(nèi)聯(lián)元素）

圖2-28

img元素預(yù)覽效果2.3HTML5入門4．a(chǎn)元素（內(nèi)聯(lián)元素）

內(nèi)部鏈接：這種鏈接的目標(biāo)是本站點中的其他文檔。利用這種鏈接，可以在本站點內(nèi)的頁面中相互跳轉(zhuǎn)。郵件鏈接：這種鏈接可以啟動電子郵件程序書寫郵件，并發(fā)送到指定地址。外部鏈接：這種鏈接目標(biāo)是互聯(lián)網(wǎng)中的某個頁面。利用這種鏈接，可以跳轉(zhuǎn)到其他的網(wǎng)站上。錨點鏈接：這種鏈接的目標(biāo)是文