《網頁設計與制作（HTML5+CSS3）立體化項目教程》 課件 01.前導知識

網頁設計與制作（HTML5+CSS3）主講教師：周禮萍0

1課程引導02網頁的相關概念03主流瀏覽器04Web標準目錄contentsPART1課程引導互聯網的發展簡史1996--2024第一次互聯網浪潮自1996年起1997年丁磊創建了網易1998年馬化騰創建了騰訊1999年馬云創建了阿里巴巴1996張朝陽創建搜狐網2000年李彥宏創建了百度1998年汪延創建了新浪當時的互聯網企業主要是做新聞資訊1996第一次互聯網浪潮：信息展示（新聞資訊）1999互聯網泡沫破裂，互聯網前景不被看好（報紙也可以看新聞...）2001第二次互聯網浪潮：信息輸入（web2.0概念）

...）web:全球廣域網技術，后來用來代指電腦網頁。這些都是基于PC端的。同年：中國移動通信“移動夢網”正式開通，可惜那時手機的網速和性能都達不到，很快就夭折了。2007喬布斯發布第一代IPHONE2008HTC發布第一臺安卓手機（谷歌研發安卓操作系統與HTC合作）從此人們開始逐漸用手機開始上網。2010第三次互聯網浪潮：信息分發（大數據、人能智能）行業代表：字節跳動2015李克強總理發表“互聯網+”計劃（滴滴出行、美團等）電腦階段手機階段第二次互聯網浪潮自2001年起1997年丁磊創建了網易1998年馬化騰創建了騰訊1999年馬云創建了阿里巴巴1996張朝陽創建搜狐網2000年李彥宏創建了百度1998年汪延創建了新浪這一時期停滯不前的搜狐一度被超越學了網頁能做什么？可以考取哪些證書？能參與競賽嗎？

賽

事賽

項專

業世界技能大賽網站設計與開發計算機應用技術軟件技術大數據技術金磚國家職業技能競賽Web技術一帶一路暨金磚國家技能發展與技術創新大賽Web技術全國職業院校技能大賽移動應用開發藍橋杯全國軟件和信息技術專業人才大賽Web應用開發巴渝工匠杯重慶市職業院校技能大賽Web技術競賽可以獲得面試專升本的機會，具體詳見技能競賽免試生政策1+XWeb前端開發職業技能等級證書網頁設計師證書人社局的技師證書人社局的高技工證書怎樣才能學好這門課程呢？教學安排HTML部分CSS基礎H5C3提高課時：25%學習HTML5基礎，主要學習最常見的HTML標簽課時：55%學習CSS3基礎，主要學習最常見的網頁布局（PC）端為主課時：20%學習HTML5新增標簽，CSS3的高級屬性如何學好這門課程？再動手練習最后分享交流231先聽與看立體化學習資源重慶高校在線開放課程平臺：http://www.cqooc.net學銀在線：/detail/218844070精品開放課程菜鳥教程：《HTML5》、《Bootstrap》在線參考手冊Bootstrap中文網：/按需搜索、演示、下載...插件資源下載立體化學習資源--重慶高校在線開放課程平臺立體化學習資源--學銀在線立體化學習資源--菜鳥教程問題1：什么是網頁？什么是網站?問題2：網頁有哪些元素？如：文字、圖片...問題3：你都知道哪些瀏覽器？你最喜歡使用的瀏覽器是？是指在因特網上根據一定的規則，使用HTML（超文本標簽語言）等工具制作的用于展示特定內容相關網頁的集合。網站以.html或.htm為后綴名的文本，稱為HTML文件，是網站中的一“頁”。網頁

構成網頁的基本元素圖片、文字、音頻、視頻、鏈接、程序等HTML

是用來描述網頁的一種語言（英文HyperTextMarkupLanguage的縮寫）中文譯為“超文本標簽語言”。HTML不是一種編程語言，而是一種

標記語言（一套標記標簽）可以加入圖片、聲音、動畫、多媒體等內容（超越了文本的限制）可以從一個文件跳轉到另一個文件，與世界各地主機的文件連接（超級鏈接文本）前端人員的編寫用戶看到的畫面瀏覽器的渲染主流瀏覽器瀏覽器是網頁顯示、運行的平臺，常用的瀏覽器有IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等。我們平時稱為五大瀏覽器。-------國產瀏覽器一般使用的是webkit或者blink內核，如360，騰訊，搜狗等--------/research/瀏覽器占有市場份額CSS前綴由于瀏覽器內核的不同，導致了部分css樣式需要加前綴才生效，下面的常見的瀏覽器內核和前綴：瀏覽器內核前綴Chrome(谷歌瀏覽器)WebKit內核-webkit-Safari(蘋果瀏覽器)WebKit內核-webkit-Firefox(火狐瀏覽器)Gecko內核-moz-Opera(歐朋瀏覽器)Trident內核-o-IE(IE瀏覽器)Presto內核-ms--------內核的作用：負責讀取網頁的內容，整理訊息，計算網頁的顯示方式并顯示頁面--------為什么需要Web標準Web標準是由W3C和其他標準化組織制定的一系列標準的集合。遵循Web標準除了可以讓開發人員寫出的頁面更標準、更統以外，還有以下優點:1.讓Web的發展前景更廣闊。2.內容能被更廣泛的設備訪問。3.更容易被搜尋引擎搜索。4.降低網站流量費用。5.使網站更易于維護。6.提高頁面瀏覽速度。Web標準構成

主要包括結構（Structure）、表現（Presentation）和行為（Behavior）三個方面。結構標準：結構用于對網頁元素進行整理和分類，主要是HTML。表現標準：表現用于設置網頁元素的版式、顏色、大小等外觀樣式，主要指CSS。行為標準：行為指網頁模型的定義及交互的編寫，主要是Javascript。結構：使內容更清晰，更有邏輯性表現：用于修飾內容的樣式行為：內容的交互及操作效果Web標準結構標準：決定你是否有個好天然身體！表現標準：決定你是否打扮的美麗外觀！行為標準：

決定你是否有吸引人的行為DOMHTMLCSSJavaScript超文本標記樣式定義動態交互哪一項最重要呢？任務實踐（1