《Web前端開(kāi)發(fā)與應(yīng)用教程》全套教學(xué)課件

項(xiàng)目一 Web前端概述網(wǎng)站建設(shè)基礎(chǔ)

Web簡(jiǎn)介全套可編輯PPT課件任務(wù)一

Web簡(jiǎn)介從本章開(kāi)始我們將逐步深入的講解網(wǎng)頁(yè)、網(wǎng)站的相關(guān)知識(shí)和技能。自互聯(lián)網(wǎng)技術(shù)傳入我國(guó)，從此注定要給人們的工作、學(xué)習(xí)和生活帶來(lái)巨大的變化。人們?cè)絹?lái)越習(xí)慣于運(yùn)用網(wǎng)絡(luò)獲取各類(lèi)信息，網(wǎng)絡(luò)直播、網(wǎng)絡(luò)購(gòu)物、電子銀行、網(wǎng)絡(luò)理財(cái)?shù)日o人們帶來(lái)一種前所未有的、全新的生活體驗(yàn)。面對(duì)著每天不絕于眼、耳的各類(lèi)網(wǎng)絡(luò)資訊，我們有沒(méi)有建立一個(gè)自己的主題網(wǎng)站的想法呢？面對(duì)這個(gè)想法我們準(zhǔn)備儲(chǔ)備什么知識(shí)與技能呢？章節(jié)概要?

?學(xué)習(xí)目標(biāo)熟悉了解了解12認(rèn)識(shí)網(wǎng)頁(yè)和網(wǎng)站，能夠了解二者之間的聯(lián)系了解Web歷史3熟悉網(wǎng)絡(luò)相關(guān)術(shù)語(yǔ)，知道術(shù)語(yǔ)代表的含義1.

認(rèn)識(shí)網(wǎng)頁(yè)和網(wǎng)站說(shuō)到網(wǎng)頁(yè)、網(wǎng)站其實(shí)大家并不陌生，我們用電腦瀏覽新聞、查詢(xún)信息、網(wǎng)絡(luò)購(gòu)物等都是在瀏覽網(wǎng)頁(yè)。網(wǎng)頁(yè)和網(wǎng)站基本概念網(wǎng)頁(yè)和網(wǎng)站基本概念網(wǎng)頁(yè)是一種可以在互聯(lián)網(wǎng)傳輸，能被瀏覽器識(shí)別和翻譯成頁(yè)面并顯示出來(lái)的文件，是網(wǎng)站的基本構(gòu)成元素。1.1認(rèn)識(shí)網(wǎng)頁(yè)特殊的符號(hào)和文本瀏覽器渲染圖文并茂的頁(yè)面網(wǎng)頁(yè)和網(wǎng)站基本概念網(wǎng)站是由多個(gè)網(wǎng)頁(yè)組成，網(wǎng)頁(yè)之間并不是雜亂無(wú)章，將網(wǎng)頁(yè)有序鏈接在一起就組成了一個(gè)網(wǎng)站。1.2認(rèn)識(shí)網(wǎng)站多個(gè)頁(yè)面集合在一起通過(guò)超鏈接網(wǎng)站網(wǎng)頁(yè)的基本構(gòu)成要素文字圖片超鏈接多媒體網(wǎng)頁(yè)的基本構(gòu)成要素文字作為信息傳達(dá)的重要載體，也是網(wǎng)頁(yè)構(gòu)成的基礎(chǔ)要素。網(wǎng)頁(yè)中文字主要包括標(biāo)題、信息、文字鏈接等幾種形式。文字網(wǎng)頁(yè)的基本構(gòu)成要素圖像具有比文字更加直觀、強(qiáng)烈的視覺(jué)表現(xiàn)效果，在網(wǎng)頁(yè)中主要是承擔(dān)提供信息、展示作品、裝飾網(wǎng)頁(yè)、表現(xiàn)風(fēng)格和超鏈接的功能。圖像網(wǎng)頁(yè)的基本構(gòu)成要素在網(wǎng)頁(yè)中主要是超鏈接是指從一個(gè)網(wǎng)頁(yè)指向一個(gè)目標(biāo)的連接關(guān)系。超鏈接網(wǎng)頁(yè)的基本構(gòu)成要素在網(wǎng)頁(yè)中主要是超鏈接是指從一個(gè)網(wǎng)頁(yè)指向一個(gè)目標(biāo)的連接關(guān)系。多媒體網(wǎng)站頁(yè)面構(gòu)成進(jìn)入網(wǎng)站首先看到的是首頁(yè)，首頁(yè)承載了一個(gè)網(wǎng)站中最重要的內(nèi)容展示。首頁(yè)作為網(wǎng)站的門(mén)面，是給予用戶(hù)第一印象的核心頁(yè)面，也是品牌形象呈現(xiàn)的窗口。首頁(yè)網(wǎng)站頁(yè)面構(gòu)成列表頁(yè)主要用于展示產(chǎn)品的相關(guān)信息，該頁(yè)面展示了比首頁(yè)更多的產(chǎn)品信息，還可以對(duì)產(chǎn)品信息進(jìn)行初步的篩選。列表頁(yè)網(wǎng)站頁(yè)面構(gòu)成詳情頁(yè)主要是對(duì)網(wǎng)站公司簡(jiǎn)介、服務(wù)等方面進(jìn)行宣傳，作為子級(jí)頁(yè)面要與首頁(yè)的色彩風(fēng)格一致，頁(yè)面中裝飾元素也要與其他頁(yè)面保持一致，使得整個(gè)網(wǎng)站具有整體性。詳情頁(yè)網(wǎng)站類(lèi)型企業(yè)類(lèi)網(wǎng)站門(mén)戶(hù)類(lèi)網(wǎng)站網(wǎng)站類(lèi)型電商類(lèi)網(wǎng)站個(gè)人網(wǎng)站2.

Web的誕生學(xué)習(xí)任何一個(gè)新事物前來(lái)了解一下他的歷史，更有助于激發(fā)我們的學(xué)習(xí)興趣。Web的誕生Web是Internet的一個(gè)應(yīng)用。它的誕生極其戲劇性。1984年，蒂姆·伯默斯進(jìn)入由歐洲原子核研究會(huì)建立的粒子實(shí)驗(yàn)室。需要開(kāi)發(fā)一個(gè)軟件，實(shí)現(xiàn)資料共享。1989年夏天，成功開(kāi)發(fā)出世界上第一個(gè)Web服務(wù)器和第一個(gè)Web客戶(hù)機(jī)。1989年12月，正式命名為World

Wide

Web即www。1991年8月，蒂姆·伯默斯建立了世界上第一個(gè)網(wǎng)站，該網(wǎng)站解釋了www是什么，以及如何使用網(wǎng)頁(yè)瀏覽器和如何建立一個(gè)網(wǎng)頁(yè)服務(wù)器等。此時(shí)，Web正式誕生。3.

Web相關(guān)術(shù)語(yǔ)與互聯(lián)網(wǎng)相關(guān)的一些專(zhuān)業(yè)術(shù)語(yǔ)。名詞名詞釋義Internet網(wǎng)絡(luò)就是通常所說(shuō)的互聯(lián)網(wǎng)，是由一些使用公用語(yǔ)言互相通信的計(jì)算機(jī)連接而成的網(wǎng)絡(luò)。WWWWWW（英文WorldWideWeb的縮寫(xiě)）中文譯為“萬(wàn)維網(wǎng)”是Intertnet提供的一種網(wǎng)頁(yè)瀏覽服務(wù)。W3C組織W3C（英文WorldWideWebConsortium的縮寫(xiě)）中文譯為“萬(wàn)維網(wǎng)聯(lián)盟”。萬(wàn)維網(wǎng)聯(lián)盟是國(guó)際最著名的標(biāo)準(zhǔn)化組織。Website中文名為網(wǎng)站。我們可以通過(guò)網(wǎng)站發(fā)布自己想要公開(kāi)的資訊，或者利用網(wǎng)站提供相關(guān)的網(wǎng)絡(luò)服務(wù)。URLURL（英文UniformResourceLocator的縮寫(xiě)）中文譯為“統(tǒng)一資源定位符”URL其實(shí)就是Web地址，俗稱(chēng)“網(wǎng)址”。WebWeb通常指互聯(lián)網(wǎng)的使用環(huán)境。但對(duì)于網(wǎng)站制作者來(lái)說(shuō)，它是一系列技術(shù)的復(fù)合總稱(chēng)，通常稱(chēng)之為網(wǎng)頁(yè)。web標(biāo)準(zhǔn)Web應(yīng)用開(kāi)發(fā)需要遵循的標(biāo)準(zhǔn)，他是一系列標(biāo)準(zhǔn)的集合。由結(jié)構(gòu)標(biāo)準(zhǔn)：表現(xiàn)標(biāo)準(zhǔn)：行為標(biāo)準(zhǔn):三部門(mén)組成。名詞名詞釋義DNSDNS（英文DomainNameSystem的縮寫(xiě)）是域名解析系統(tǒng)。HTTPHTTP(英文Hypertexttransferprotocol的縮寫(xiě))中文譯為超文本傳輸協(xié)議，是一種詳細(xì)規(guī)定了瀏覽器和萬(wàn)維網(wǎng)服務(wù)器之間互相通信的規(guī)則。Web瀏覽器目前互聯(lián)網(wǎng)上的三大主流瀏覽器IE、火狐和谷歌。Web服務(wù)器當(dāng)Web服務(wù)器接收到一個(gè)HTTP請(qǐng)求時(shí)，會(huì)返回HTTP響應(yīng)，客戶(hù)端就可以從服務(wù)器上獲取網(wǎng)頁(yè)，包括CSS、JS、音頻、視頻等資源。Web開(kāi)發(fā)Web開(kāi)發(fā)主要分為前端和后端兩部分。前端指的是直接與用戶(hù)接觸的網(wǎng)頁(yè)，網(wǎng)頁(yè)上通常有HTML、CSS、JavaScript等內(nèi)容；后端指的是程序、數(shù)據(jù)庫(kù)和服務(wù)器層面的開(kāi)發(fā)。ThankYou!項(xiàng)目一 Web前端概述網(wǎng)站建設(shè)基礎(chǔ)

Web簡(jiǎn)介任務(wù)二網(wǎng)站建設(shè)基礎(chǔ)?學(xué)習(xí)目標(biāo)了解掌握掌握了解了解網(wǎng)頁(yè)的設(shè)計(jì)流程和設(shè)計(jì)原則12掌握網(wǎng)頁(yè)內(nèi)容元素的設(shè)計(jì)方法,能夠合理設(shè)計(jì)網(wǎng)頁(yè)元素掌握網(wǎng)頁(yè)配色方法，能夠?yàn)轫?yè)面合理搭配顏色3了解常用的網(wǎng)頁(yè)設(shè)計(jì)軟件4然而該如何進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)呢？本章將從網(wǎng)頁(yè)設(shè)計(jì)原則、流程、內(nèi)容元素設(shè)計(jì)以及配色方案等幾個(gè)方面介紹網(wǎng)頁(yè)設(shè)計(jì)的相關(guān)技巧。大量文字堆積的網(wǎng)頁(yè)，雖然能夠讓訪問(wèn)者獲取信息，但是不利于瀏覽閱讀，頁(yè)面的美觀度也大打折扣。想要制作一個(gè)優(yōu)秀的網(wǎng)頁(yè)，還需要設(shè)計(jì)師精心的設(shè)計(jì)，這樣才能給訪問(wèn)者提供一個(gè)視覺(jué)效果突出、便于閱讀的頁(yè)面。概要2.1網(wǎng)頁(yè)設(shè)計(jì)原則網(wǎng)頁(yè)設(shè)計(jì)原則以用戶(hù)為中心視覺(jué)美觀主題明確內(nèi)容與形式統(tǒng)一網(wǎng)頁(yè)的色彩處理的好，可以錦上添花，達(dá)到事半功倍的效果。生活充滿(mǎn)色彩！~2.2

網(wǎng)頁(yè)配色基礎(chǔ)網(wǎng)頁(yè)配色原則2.2網(wǎng)頁(yè)配色基礎(chǔ)使用網(wǎng)頁(yè)安全色遵循配色方案網(wǎng)頁(yè)安全色是指顏色十六進(jìn)制值的組合內(nèi)部含有ff、cc、99、66、33、00，只有這樣值的組合才是網(wǎng)頁(yè)安全色。使用同類(lèi)色、鄰近色、對(duì)比色進(jìn)行配色。網(wǎng)頁(yè)設(shè)計(jì)流程2.3網(wǎng)頁(yè)設(shè)計(jì)流程確定網(wǎng)站主題網(wǎng)站整體規(guī)劃收集素材設(shè)計(jì)網(wǎng)頁(yè)效果圖本章將從網(wǎng)站建設(shè)流程、工具的使用以及網(wǎng)站上傳等幾個(gè)方面對(duì)網(wǎng)站建設(shè)的基礎(chǔ)知識(shí)做詳細(xì)講解。一個(gè)優(yōu)秀的網(wǎng)站不僅包括前期的設(shè)計(jì)，還包括后期的建設(shè)。網(wǎng)站建設(shè)包括靜態(tài)頁(yè)面搭建、動(dòng)態(tài)模塊開(kāi)發(fā)以及后期的發(fā)布、維護(hù)、推廣等諸多事宜，因此在進(jìn)行網(wǎng)站建設(shè)之前，我們有必要掌握一些網(wǎng)站建設(shè)的基本知識(shí)，為后面的學(xué)習(xí)夯實(shí)基礎(chǔ)。概要2.4網(wǎng)站建設(shè)流程頁(yè)面觀察和搭建顏色尺寸和模塊輔助圖片網(wǎng)站建設(shè)后期事宜測(cè)試上傳推廣服務(wù)2.4網(wǎng)站建設(shè)流程開(kāi)發(fā)動(dòng)態(tài)網(wǎng)站模塊PHP即HypertextPreprocessor（中文譯為：“超文本預(yù)處理器”）是一種通用的開(kāi)源腳本語(yǔ)言。PHP語(yǔ)法吸收了C語(yǔ)言、Java（C語(yǔ)言和Java均是編程語(yǔ)言）的特點(diǎn)，利于學(xué)習(xí)，使用廣泛，主要適用于Web開(kāi)發(fā)領(lǐng)域。并且PHP提供了標(biāo)準(zhǔn)的數(shù)據(jù)庫(kù)接口，數(shù)據(jù)庫(kù)連接方便，兼容性和擴(kuò)展性非常強(qiáng)，是目前使用較廣泛的技術(shù)。1、PHP2.5開(kāi)發(fā)動(dòng)態(tài)網(wǎng)站模塊開(kāi)發(fā)動(dòng)態(tài)網(wǎng)站模塊ASP即ActiveServerPages（中文譯為“動(dòng)態(tài)服務(wù)器頁(yè)面”），是一種局限于微軟的操作系統(tǒng)平臺(tái)之上動(dòng)態(tài)網(wǎng)站開(kāi)發(fā)技術(shù)，主要工作環(huán)境為微軟的IIS應(yīng)用程序結(jié)構(gòu)。ASP入門(mén)比較簡(jiǎn)單，但是安全性較低，而且不宜構(gòu)架大中型站點(diǎn)，其升級(jí)版ASP.NET雖然解決了這一問(wèn)題，但又被詬病成開(kāi)放程度低，操作麻煩。2、ASP2.5開(kāi)發(fā)動(dòng)態(tài)網(wǎng)站模塊開(kāi)發(fā)動(dòng)態(tài)網(wǎng)站模塊JSP即JavaServerPages（中文譯為“Java服務(wù)器頁(yè)面”），是基于JavaServlet以及整個(gè)Java體系的Web開(kāi)發(fā)技術(shù)，它與ASP有一定的相似之處。并且JSP被認(rèn)為是網(wǎng)站建設(shè)技術(shù)中安全性最好的，雖然學(xué)習(xí)和操作均較為復(fù)雜，目前被認(rèn)為是三種動(dòng)態(tài)網(wǎng)站技術(shù)中有前途的技術(shù)。3、JSP2.5開(kāi)發(fā)動(dòng)態(tài)網(wǎng)站模塊2.6常用的網(wǎng)站建設(shè)工具常用的網(wǎng)站建設(shè)工具Dreamweaver簡(jiǎn)稱(chēng)“DW”（中文譯為“夢(mèng)想編織者”），是美國(guó)MACROMEDIA公司開(kāi)發(fā)的集網(wǎng)頁(yè)制作和網(wǎng)站管理于一身的“所見(jiàn)即所得”網(wǎng)頁(yè)編輯器。1、Dreamweaver常用的網(wǎng)站建設(shè)工具Sublime全稱(chēng)為“SublimeText”是一個(gè)代碼編輯器，最早由程序員JonSkinner于2008年1月份開(kāi)發(fā)出來(lái)。SublimeText具有漂亮的用戶(hù)界面和強(qiáng)大的功能，例如代碼縮略圖、功能插件等，同時(shí)SublimeText還是一個(gè)跨平臺(tái)的編輯器，支持Windows、Linux、Mac等操作系統(tǒng)。2、Sublime2.6常用的網(wǎng)站建設(shè)工具常用的網(wǎng)站建設(shè)工具HBuilder是DCloud推出的一款支持HTML5的Web開(kāi)發(fā)軟件?！翱臁笔荋Builder的最大優(yōu)勢(shì)，通過(guò)完整的語(yǔ)法提示、代碼輸入法以及代碼塊等，HBuilder可以大幅提升HTML、JavaScript的開(kāi)發(fā)效率。3、HBuilder2.6常用的網(wǎng)站建設(shè)工具常用的網(wǎng)站建設(shè)工具4、VScode2.6常用的網(wǎng)站建設(shè)工具VS

Code是一款開(kāi)源的、免費(fèi)、跨平臺(tái)、高性能、輕量級(jí)的代碼編輯器。并且可用于Windows和Linux。它具有對(duì)JavaScript，TypeScript和Node.js的內(nèi)置支持，并具有豐富的其他語(yǔ)言擴(kuò)展的生態(tài)系統(tǒng)。

域名和服務(wù)器空間域名服務(wù)器空間2.7網(wǎng)站上傳發(fā)布

域名和服務(wù)器空間多學(xué)一招：域名和URL的區(qū)別雖然域名和URL相似，但是二者仍有區(qū)別。域名只是一個(gè)網(wǎng)站的標(biāo)識(shí)，不可以直接訪問(wèn)網(wǎng)站，只有當(dāng)域名經(jīng)過(guò)解析之后，這個(gè)域名才能成為一個(gè)URL（網(wǎng)址）。URL（網(wǎng)址）包含域名，是Internet上的地址簿，通過(guò)URL可以到達(dá)任何一個(gè)網(wǎng)站頁(yè)面。【總結(jié)】域名級(jí)別域名和服務(wù)器空間頂級(jí)域名通常分為兩類(lèi)，一類(lèi)是國(guó)際頂級(jí)域名，另一類(lèi)是國(guó)家頂級(jí)域名。1、頂級(jí)域名頂級(jí)域名分類(lèi)com公司企業(yè)國(guó)際頂級(jí)域名net網(wǎng)絡(luò)服務(wù)機(jī)構(gòu)org非營(yíng)利性組織int國(guó)際組織edu教育機(jī)構(gòu)gov政府部門(mén)mil軍事部門(mén)cn中國(guó)國(guó)家頂級(jí)域名us美國(guó)uk英國(guó)域名級(jí)別

域名和服務(wù)器空間二級(jí)域名指的是頂級(jí)域名之下的域名，通常分為兩類(lèi)。一類(lèi)是指域名注冊(cè)的網(wǎng)站名稱(chēng)，另一類(lèi)是指國(guó)家頂級(jí)域名之下，表示注冊(cè)企業(yè)類(lèi)別的符號(hào)。2、二級(jí)域名二級(jí)域名分類(lèi)ac科研機(jī)構(gòu)類(lèi)別域名com工、商、金融等企業(yè)edu中國(guó)的教育機(jī)構(gòu)gov中國(guó)的政府機(jī)構(gòu)mil中國(guó)的國(guó)防機(jī)構(gòu)net提供互聯(lián)網(wǎng)網(wǎng)絡(luò)服務(wù)的機(jī)構(gòu)org非營(yíng)利性的組織bj北京行政區(qū)域名sh上海js江蘇域名級(jí)別

域名和服務(wù)器空間三級(jí)域名是位于頂級(jí)域名和二級(jí)域名左邊的域名。3、三級(jí)域名域名的意義域名和服務(wù)器空間無(wú)形資產(chǎn)域名具有唯一性，所謂物以稀為貴，越是簡(jiǎn)單易記憶的域名越具備價(jià)值。例如，京東最原始的域名是“360”，后來(lái)為了優(yōu)化域名，花費(fèi)3000萬(wàn)高價(jià)收購(gòu)了“”這個(gè)域名。品牌競(jìng)爭(zhēng)力隨著信息飛速發(fā)展，域名已成為企業(yè)在網(wǎng)絡(luò)上的品牌形象。一個(gè)好的域名，能夠便于用戶(hù)記憶、便于用戶(hù)傳播、便于用戶(hù)輸入，會(huì)在無(wú)形中增強(qiáng)企業(yè)在市場(chǎng)上的差異化競(jìng)爭(zhēng)，獲取更多的用戶(hù)。選取域名

域名和服務(wù)器空間域名選取原則●域名應(yīng)該簡(jiǎn)短易記憶。●域名要有一定的內(nèi)涵和意義。域名選取技巧●用單位名稱(chēng)的漢語(yǔ)拼音或諧音作為域名?！裼闷髽I(yè)名稱(chēng)相應(yīng)的英文名作為域名。●用企業(yè)名稱(chēng)的拼音或英文縮寫(xiě)作為域名。注冊(cè)域名

域名和服務(wù)器空間對(duì)于注冊(cè)域名的個(gè)人或企業(yè)，需要提供電子版的身份證或企業(yè)的營(yíng)業(yè)執(zhí)照。目前國(guó)內(nèi)有很多的代理域名注冊(cè)公司，可以直接通過(guò)這些公司注冊(cè)域名。登錄域名注冊(cè)的代理網(wǎng)站可以在相應(yīng)的界面查詢(xún)域名是否被注冊(cè)，如果未被注冊(cè)，就可以進(jìn)行后續(xù)的域名注冊(cè)繳費(fèi)流程。查到想要注冊(cè)的域名，并且確認(rèn)域名為可申請(qǐng)的狀態(tài)后，就可以注冊(cè)域名并繳納年費(fèi)。準(zhǔn)備申請(qǐng)資料尋找域名注冊(cè)商查詢(xún)域名申請(qǐng)域名購(gòu)買(mǎi)服務(wù)器空間的注意事項(xiàng)

域名和服務(wù)器空間空間購(gòu)買(mǎi)者要根據(jù)所做的網(wǎng)站大小及類(lèi)型選擇合適的空間，如果做的網(wǎng)站是關(guān)于下載、媒體類(lèi)、商城類(lèi)、論壇類(lèi)等網(wǎng)站，那就需要選擇較大的網(wǎng)站空間，以免日后出現(xiàn)空間不夠用的問(wèn)題。1、選擇大小合適的空間購(gòu)買(mǎi)服務(wù)器空間的注意事項(xiàng)

域名和服務(wù)器空間購(gòu)買(mǎi)服務(wù)器空間時(shí)，還要確定服務(wù)器空間支持哪些功能。通常服務(wù)器空間會(huì)有多種不同的配置，如操作系統(tǒng)、支持的腳本語(yǔ)言及數(shù)據(jù)庫(kù)配置等，使用者要根據(jù)配置需求進(jìn)行購(gòu)買(mǎi)。2、確定支持功能購(gòu)買(mǎi)服務(wù)器空間的注意事項(xiàng)域名和服務(wù)器空間速度和穩(wěn)定性是衡量服務(wù)器空間質(zhì)量的重要標(biāo)準(zhǔn)。如果網(wǎng)站打開(kāi)速度慢或者網(wǎng)站穩(wěn)定性差，隔三差五的出現(xiàn)問(wèn)題，網(wǎng)站的瀏覽量就會(huì)降低，從而影響網(wǎng)站的訪問(wèn)量、轉(zhuǎn)化率以及網(wǎng)站的排名。在購(gòu)買(mǎi)服務(wù)器空間時(shí)選擇知名的服務(wù)器空間運(yùn)營(yíng)商，是保證速度和穩(wěn)定性最簡(jiǎn)單的辦法。3、確保速度和穩(wěn)定性購(gòu)買(mǎi)服務(wù)器空間的注意事項(xiàng)

域名和服務(wù)器空間速度和穩(wěn)定性是衡量服務(wù)器空間質(zhì)量的重要標(biāo)準(zhǔn)。如果網(wǎng)站打開(kāi)速度慢或者網(wǎng)站穩(wěn)定性差，隔三差五的出現(xiàn)問(wèn)題，網(wǎng)站的瀏覽量就會(huì)降低，從而影響網(wǎng)站的訪問(wèn)量、轉(zhuǎn)化率以及網(wǎng)站的排名。在購(gòu)買(mǎi)服務(wù)器空間時(shí)選擇知名的服務(wù)器空間運(yùn)營(yíng)商，是保證速度和穩(wěn)定性最簡(jiǎn)單的辦法。4、服務(wù)器空間的價(jià)格購(gòu)買(mǎi)服務(wù)器空間的注意事項(xiàng)

域名和服務(wù)器空間網(wǎng)站有時(shí)難免會(huì)遇到各種攻擊、入侵，又或者服務(wù)器故障，如網(wǎng)絡(luò)故障、機(jī)房斷電等，這些意外會(huì)導(dǎo)致網(wǎng)站的數(shù)據(jù)丟失。這就要求虛擬主機(jī)有備份能力，在意外發(fā)生后能夠及時(shí)恢復(fù)網(wǎng)站的數(shù)據(jù)。5、空間安全性購(gòu)買(mǎi)服務(wù)器空間的注意事項(xiàng)

域名和服務(wù)器空間購(gòu)買(mǎi)服務(wù)器空間時(shí)，售后服務(wù)十分重要。一旦服務(wù)器出現(xiàn)問(wèn)題，是需要有技術(shù)人員進(jìn)行解決的，而這時(shí)就體現(xiàn)到網(wǎng)站空間的售后問(wèn)題了。一般較好的服務(wù)器空間運(yùn)營(yíng)商都非常重視售后服務(wù)，能夠及時(shí)解決空間出現(xiàn)的問(wèn)題，保證網(wǎng)站的正常運(yùn)轉(zhuǎn)。6、售后服務(wù)網(wǎng)站的上傳（案例）2.8網(wǎng)站上傳發(fā)布ThankYou!項(xiàng)目2

HTML入門(mén)·認(rèn)識(shí)HTML

HTML·

文本標(biāo)記·

圖像標(biāo)記掌握HTML文檔基本格式，能夠書(shū)寫(xiě)規(guī)范的HTML網(wǎng)頁(yè)。12掌握文字標(biāo)記。掌握掌握掌握3掌握?qǐng)D像標(biāo)記，學(xué)會(huì)制作圖文混排頁(yè)面。?學(xué)習(xí)目標(biāo)任務(wù)一

認(rèn)識(shí)HTML

1.1HTML文檔基本格式HTML作為一門(mén)標(biāo)記語(yǔ)言，主要用來(lái)描述網(wǎng)頁(yè)中的文字和圖像等信息。但是怎樣書(shū)寫(xiě)HTML代碼，又該如何使用HTML標(biāo)記控制網(wǎng)頁(yè)元素？下面，將進(jìn)行具體講解。

1.1HTML文檔基本格式

HTML頁(yè)面主體結(jié)構(gòu)文檔聲明<html>

<head> <!–-對(duì)html文檔進(jìn)行詮釋、定義、描述不會(huì)顯示在文檔當(dāng)中--> </head>

<body> <!-–對(duì)頁(yè)面內(nèi)容進(jìn)行排版、編輯、顯示在頁(yè)面當(dāng)中，是html頁(yè)面的主體--> </body></html>例如：使用Dreamweaver生成的HTML文檔<!DOCTYPEhtml><html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>無(wú)標(biāo)題文檔</title></head><body></body></html>

1.1HTML文檔基本格式1、<!DOCTYPE>文檔類(lèi)型聲明2、<html>根標(biāo)記2、<head>頭部標(biāo)記2、<body>主體標(biāo)記1.DOCTYPE文檔聲明

1.1HTML文檔基本格式?<!DOCTYPEhtml>?DOCTYPE作用是告知瀏覽器當(dāng)前文檔所使用的是哪種超文本或

可擴(kuò)展超文本規(guī)范。?DOCTYPE聲明位于文檔最前端。用于向?yàn)g覽器說(shuō)明當(dāng)前文檔使用哪種HTML，此標(biāo)記和瀏覽器的兼容性相關(guān)，在不同的瀏覽器中有多種效果。2.<html>標(biāo)記

標(biāo)簽元素

1.1HTML文檔基本格式?<html>

</html>?html標(biāo)記位于<!DOCTYPE>標(biāo)記之后也稱(chēng)為根標(biāo)記，用于告知瀏覽器其自身是一個(gè)HTML文檔。3.<head>標(biāo)記

1.1HTML文檔基本格式?<head

>

</head

>head標(biāo)記用于定義HTML文檔的頭部信息，緊跟在<html>標(biāo)記之后，主要用來(lái)封裝其他位于文檔頭部的標(biāo)記，例如<title>、<meta>、<link>及<style>等，用來(lái)描述文檔的標(biāo)題，作者以及和其他文檔的關(guān)系等。4.<body>標(biāo)記

1.1HTML文檔基本格式?<body

>

</body>body標(biāo)記用于定義HTML文檔所要顯示的內(nèi)容，也稱(chēng)為主體標(biāo)記。瀏覽器中顯示的所有文本、圖像、音頻和視頻等信息都必須位于<body>標(biāo)記內(nèi)，<body>標(biāo)記中的信息才是最終展示給用戶(hù)看的。<title><meta/><link><style><title>標(biāo)記用于定義HTML頁(yè)面的標(biāo)題，即給網(wǎng)頁(yè)取一個(gè)名字，必須位于<head>標(biāo)記之內(nèi)。<meta/>標(biāo)記用于定義頁(yè)面的元信息，可重復(fù)出現(xiàn)在<head>頭部標(biāo)記中。在<head>中使用<link>標(biāo)記可引用外部文件，一個(gè)頁(yè)面允許使用多個(gè)<link>標(biāo)記引用多個(gè)外部文件。<style>標(biāo)記用于為HTML文檔定義樣式信息，位于<head>頭部標(biāo)記中。1.2HTML文檔頭部相關(guān)標(biāo)記

<title><meta/><link><style><meta/><link><style>一個(gè)HTML文檔只能含有一對(duì)<title></title>標(biāo)記，<title></title>之間的內(nèi)容將顯示在瀏覽器窗口的標(biāo)題欄中。<title>網(wǎng)頁(yè)標(biāo)題名稱(chēng)</title>基本語(yǔ)法格式：1.2HTML文檔頭部相關(guān)標(biāo)記1.<title>標(biāo)記<title><meta/><link><style><meta/><link><style>

<title>meta定義頁(yè)面參數(shù)設(shè)置網(wǎng)頁(yè)關(guān)鍵字設(shè)置網(wǎng)頁(yè)描述設(shè)置網(wǎng)頁(yè)作者設(shè)置字符集設(shè)置頁(yè)面自動(dòng)刷新與跳轉(zhuǎn)<metaname=“keywords”content=“JAVA,php"/><metaname=“description“content=“正方大學(xué)”/><metaname=“author”content=“正方軟件股份有限公司"/><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><metahttp-equiv="refresh"content="10;url="/>1.2HTML文檔頭部相關(guān)標(biāo)記2.<meta>標(biāo)記<metaname="名稱(chēng)"content="值"/>

meta定義頁(yè)面參數(shù)設(shè)置網(wǎng)頁(yè)關(guān)鍵字<metaname=“keywords”content=“JAVA,php"/>1.2HTML文檔頭部相關(guān)標(biāo)記2.<meta>標(biāo)記

在<meta>標(biāo)記中使用name/content屬性可以為搜索引擎提供信息，其中name屬性提供搜索內(nèi)容名稱(chēng)，content屬性提供對(duì)應(yīng)的搜索內(nèi)容值。

其中name屬性的值為keywords，用于定義搜索內(nèi)容名稱(chēng)為網(wǎng)頁(yè)關(guān)鍵字，content屬性用于定義關(guān)鍵字的具體內(nèi)容，多個(gè)關(guān)鍵字內(nèi)容之間可以用“,”分隔。<metaname="名稱(chēng)"content="值"/>

meta定義頁(yè)面參數(shù)設(shè)置網(wǎng)頁(yè)描述

<metaname=“description“content=“正方大學(xué)”/>1.2HTML文檔頭部相關(guān)標(biāo)記2.<meta>標(biāo)記

其中name屬性的值為description，用于定義搜索內(nèi)容名稱(chēng)為網(wǎng)頁(yè)描述，content屬性的值用于定義描述的具體內(nèi)容。需要注意的是網(wǎng)頁(yè)描述的文字不必過(guò)多。<metaname="名稱(chēng)"content="值"/>

meta定義頁(yè)面參數(shù)設(shè)置網(wǎng)頁(yè)作者

<metaname=“author”content=“正方軟件股份有限公司"/>1.2HTML文檔頭部相關(guān)標(biāo)記2.<meta>標(biāo)記

其中name屬性的值為author，用于定義搜索內(nèi)容名稱(chēng)為網(wǎng)頁(yè)作者，content屬性的值用于定義具體的作者信息。

meta定義頁(yè)面參數(shù)設(shè)置字符集

<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>1.2HTML文檔頭部相關(guān)標(biāo)記2.<meta>標(biāo)記

在<meta>標(biāo)記中使用http-equiv/content屬性可以設(shè)置服務(wù)器發(fā)送給瀏覽器的HTTP頭部信息，為瀏覽器顯示該頁(yè)面提供相關(guān)的參數(shù)。其中，http-equiv屬性提供參數(shù)類(lèi)型，content屬性提供對(duì)應(yīng)的參數(shù)值。

其中http-equiv屬性的值為Content-Type，content屬性的值為text/html和charset=utf-8，中間用“;”隔開(kāi)，用于說(shuō)明當(dāng)前文檔類(lèi)型為HTML，字符集為utf-8(國(guó)際化編碼)。強(qiáng)調(diào)一下，此頭文件一定要設(shè)置，否則網(wǎng)頁(yè)運(yùn)行亂碼。<metahttp-equiv="Content-Type"content="text/html;charset=utf-8/>什么是HTML標(biāo)記？

1.3HTML標(biāo)記帶有“<>”符號(hào)的元素被稱(chēng)為HTML標(biāo)記例如：<html>、<head>、<body>都是HTML標(biāo)記也稱(chēng)為HTML標(biāo)簽或HTML元素1.3HTML標(biāo)記雙標(biāo)記單標(biāo)記雙標(biāo)記也稱(chēng)體標(biāo)記，是指由開(kāi)始和結(jié)束兩個(gè)標(biāo)記符組成的標(biāo)記。單標(biāo)記也稱(chēng)空標(biāo)記，是指用一個(gè)標(biāo)記符號(hào)即可完整地描述某個(gè)功能的標(biāo)記。<標(biāo)記名>內(nèi)容</標(biāo)記名><標(biāo)記名/>表示該標(biāo)記的作用結(jié)束，一般稱(chēng)為“結(jié)束標(biāo)記”1.3HTML標(biāo)記表示該標(biāo)記的作用開(kāi)始，一般稱(chēng)為“開(kāi)始標(biāo)記1.3HTML標(biāo)記運(yùn)行效果如圖所示:

[點(diǎn)擊操作演示]1.4注釋標(biāo)記語(yǔ)法：<!--注釋內(nèi)容-->

注釋其實(shí)就是對(duì)代碼的解釋說(shuō)明，在代碼書(shū)寫(xiě)過(guò)程中合理運(yùn)用

注釋是十分有必要的。

瀏覽器不會(huì)解析注釋。說(shuō)白了，注釋是給人看的，不是給瀏覽器看的。

文本標(biāo)記的屬性微軟雅黑（字體）居中顯示字號(hào)顏色語(yǔ)法格式<標(biāo)記名

屬性1="屬性值1"屬性2="屬性值2"…>內(nèi)容</標(biāo)記名>1.5標(biāo)記的屬性多學(xué)一招：何為鍵值對(duì)？“鍵值對(duì)”簡(jiǎn)單地說(shuō)即為對(duì)“屬性”設(shè)置“值”。例如：color="red";width:200px;鍵鍵值值【總結(jié)】在HTML開(kāi)始標(biāo)記中，可以通過(guò)“屬性="屬性值"的方式為標(biāo)記添加屬性，其中“屬性”和“屬性值”是以“鍵值對(duì)”的形式出現(xiàn)的。1.5標(biāo)記的屬性運(yùn)行效果如下圖所示:

1.5標(biāo)記的屬性[點(diǎn)擊操作演示]ThankYou!項(xiàng)目2

HTML入門(mén)·認(rèn)識(shí)HTML

HTML·

文本標(biāo)記·

圖像標(biāo)記掌握HTML文檔基本格式，能夠書(shū)寫(xiě)規(guī)范的HTML網(wǎng)頁(yè)。12掌握文字標(biāo)記。掌握掌握掌握3掌握?qǐng)D像標(biāo)記，學(xué)會(huì)制作圖文混排頁(yè)面。?學(xué)習(xí)目標(biāo)任務(wù)二

HTML文本控制標(biāo)記在一個(gè)網(wǎng)頁(yè)中文字往往占有較大的篇幅，為了讓文字能夠排版整齊、結(jié)構(gòu)清晰，HTML提供了一系列的文本控制標(biāo)記。下面，將詳細(xì)講解這些標(biāo)記。

HTML提供了6個(gè)等級(jí)的標(biāo)題，即<h1>、<h2>、<h3>、<h4>、<h5>和<h6>，從<h1>到<h6>重要性遞減?；菊Z(yǔ)法格式<hnalign=”對(duì)其方式”>標(biāo)題文本</hn>。h1h2h3h4h5h6標(biāo)題標(biāo)記

2.1標(biāo)題標(biāo)記該語(yǔ)法中n的取值為1到6，align屬性為可選屬性，用于指定標(biāo)題的對(duì)其方式。運(yùn)行效果如圖所示:

[點(diǎn)擊操作演示]

2.1標(biāo)題標(biāo)記

標(biāo)題標(biāo)記的對(duì)齊屬性left：設(shè)置標(biāo)題文字左對(duì)齊（默認(rèn)值）center：設(shè)置標(biāo)題文字居中對(duì)齊right：設(shè)置標(biāo)題文字右對(duì)齊

2.1標(biāo)題標(biāo)記標(biāo)題標(biāo)記重點(diǎn)強(qiáng)調(diào)

2.1標(biāo)題標(biāo)記1.一個(gè)頁(yè)面中只能使用一個(gè)<h1>標(biāo)記，常常被用在網(wǎng)站的logo部分。2.h元素?fù)碛写_切的語(yǔ)義，初學(xué)者禁止僅僅使用h標(biāo)記設(shè)置文字加粗或更改文字的大小。3.HTML不贊成使用h標(biāo)記的align對(duì)齊屬性，可使用style屬性或通過(guò)CSS設(shè)置。段落標(biāo)記主要用于把文字有條理地顯示出來(lái)基本語(yǔ)法格式<palign="對(duì)齊方式">段落文本</p>

2.2段落標(biāo)記語(yǔ)法格式說(shuō)明

2.2段落標(biāo)記該語(yǔ)法中align屬性為<p>標(biāo)記的可選屬性，和標(biāo)題標(biāo)記<h1>～<h6>一樣，同樣可以使用align屬性設(shè)置段落文本的對(duì)齊方式。

<p>是HTML文檔中最常見(jiàn)的標(biāo)記，默認(rèn)情況下，文本在一個(gè)段落中會(huì)根據(jù)瀏覽器窗口的大小自動(dòng)換行。運(yùn)行效果如圖所示:

[點(diǎn)擊操作演示]

2.2段落標(biāo)記基本語(yǔ)法格式<hr屬性="屬性值"/>

2.3水平線標(biāo)記【結(jié)論】<hr/>是單標(biāo)記，在網(wǎng)頁(yè)中輸入一個(gè)<hr/>，就添加了一條默認(rèn)樣式的水平線。水平線用于段落與段落之間隔開(kāi)，使得文檔結(jié)構(gòu)清晰，層次分明。

2.3水平線標(biāo)記<hr/>標(biāo)記的常用屬性屬性名含義屬性值align設(shè)置水平線的對(duì)齊方式可選擇left、right、center三種值，默認(rèn)為center，居中對(duì)齊size設(shè)置水平線的粗細(xì)以像素為單位，默認(rèn)為2像素color設(shè)置水平線的顏色可用顏色名稱(chēng)、十六進(jìn)制#RGB、rgb(r,g,b)width設(shè)置水平線的寬度可以是確定的像素值，也可以是瀏覽器窗口的百分比，默認(rèn)為100%如果希望某些文本片段強(qiáng)制換行顯示，就需要使用換行標(biāo)記<br/>，這時(shí)如果還像在word中直接敲回車(chē)鍵換行就不起作用了。

2.4換行標(biāo)記在HTML中，一個(gè)段落中的文字會(huì)從左到右依次排列，直到瀏覽器窗口的右端，然后自動(dòng)換行。運(yùn)行效果如圖所示:

[點(diǎn)擊操作演示]2.4換行標(biāo)記文本樣式標(biāo)記用來(lái)控制網(wǎng)頁(yè)中文本的字體、字號(hào)和顏色?；菊Z(yǔ)法格式<font屬性="屬性值">文本內(nèi)容</font>2.5文本樣式標(biāo)記文本樣式標(biāo)記常用屬性屬性名含義face設(shè)置文字的字體，例如微軟雅黑、黑體、宋體等size設(shè)置文字的大小，可以取1到7之間的整數(shù)值color設(shè)置文字的顏色2.5文本樣式標(biāo)記運(yùn)行效果如圖所示:

[點(diǎn)擊操作演示]2.5文本樣式標(biāo)記2.6文本格式化標(biāo)記在網(wǎng)頁(yè)中，有時(shí)需要為文字設(shè)置粗體、斜體或下劃線效果，為此HTML提供了專(zhuān)門(mén)的文本格式化標(biāo)記，使文字以特殊的方式顯示。標(biāo)記顯示效果<b></b>和<strong></strong>文字以粗體方式顯示（XHTML推薦使用strong）<i></i>和<em></em>文字以斜體方式顯示（XHTML推薦使用em）<s></s>和<del></del>文字以加刪除線方式顯示（XHTML推薦使用del）<u></u>和<ins></ins>文字以加下劃線方式顯示（XHTML不贊成使用u）2.6文本格式化標(biāo)記常用文本格式化標(biāo)記運(yùn)行效果如圖所示:

[點(diǎn)擊操作演示]2.6文本格式化標(biāo)記2.7特殊字符標(biāo)記瀏覽網(wǎng)頁(yè)時(shí)常常會(huì)看到一些包含特殊字符的文本，如數(shù)學(xué)公式、版權(quán)信息等。那么如何在網(wǎng)頁(yè)上顯示這些包含特殊字符的文本呢？就拿HTML來(lái)說(shuō)，如何在網(wǎng)頁(yè)上顯示一個(gè)HTML標(biāo)記呢？由于“<”和“>”在HTML中已經(jīng)作為標(biāo)記的定界符，當(dāng)作為尖括號(hào)，小于或大于號(hào)使用時(shí)將被瀏覽器解析為標(biāo)記符號(hào)，出現(xiàn)錯(cuò)誤。其實(shí)HTML早就想到了這一點(diǎn)，HTML為這些特殊字符準(zhǔn)備了專(zhuān)門(mén)的替代代碼。特殊字符描述字符的代碼

空格符

<

小于號(hào)<>

大于號(hào)>&和號(hào)&￥人民幣¥?版權(quán)©?注冊(cè)商標(biāo)®°攝氏度°±正負(fù)號(hào)±×乘號(hào)×÷除號(hào)÷2平方2（上標(biāo)2）²3立方3（上標(biāo)3）³2.7特殊字符標(biāo)記特殊字符標(biāo)記空格符“

”瀏覽器對(duì)空格符“

”的解析是有差異的，導(dǎo)致了使用空格符的頁(yè)面在各個(gè)瀏覽器中顯示效果的不同，因此不推薦使用，可使用CSS樣式替代。2.7特殊字符標(biāo)記ThankYou!項(xiàng)目2

HTML入門(mén)·認(rèn)識(shí)HTML

HTML·

文本標(biāo)記·

圖像標(biāo)記掌握HTML文檔基本格式，能夠書(shū)寫(xiě)規(guī)范的HTML網(wǎng)頁(yè)。12掌握文字標(biāo)記。掌握掌握掌握3掌握?qǐng)D像標(biāo)記，學(xué)會(huì)制作圖文混排頁(yè)面。?學(xué)習(xí)目標(biāo)任務(wù)三

HTML圖像標(biāo)記瀏覽網(wǎng)頁(yè)時(shí)我們常常會(huì)被網(wǎng)頁(yè)中的圖像所吸引，巧妙地在網(wǎng)頁(yè)中使用圖像可以為網(wǎng)頁(yè)增色不少。下面介紹幾種常用的圖像格式、如何在網(wǎng)頁(yè)中插入圖像以及如何設(shè)置圖像的樣式。

瀏覽網(wǎng)頁(yè)時(shí)經(jīng)常會(huì)看到精美的圖片在網(wǎng)頁(yè)中常用的圖像格式有哪些呢？

3.1常用圖像格式GIFPNGJPGPNGJPGGIF最突出的地方就是它支持動(dòng)畫(huà)，同時(shí)GIF也是一種無(wú)損的圖像格式，也就是說(shuō)修改圖片之后，圖片質(zhì)量幾乎沒(méi)有損失。再加上GIF支持透明（全透明或全不透明），因此很適合在互聯(lián)網(wǎng)上使用。GIF格式常常用于Logo、小圖標(biāo)及其他色彩相對(duì)單一的圖像。

3.1常用圖像格式GIFPNGJPGJPGGIFPNG包括PNG-8和真色彩PNG（PNG-24和PNG-32）。相對(duì)于GIF，PNG最大的優(yōu)勢(shì)是體積更小，支持alpha透明（全透明，半透明，全不透明），并且顏色過(guò)渡更平滑，但PNG不支持動(dòng)畫(huà)。IE6是可以支持PNG-8，但在處理PNG-24的透明時(shí)會(huì)顯示灰色。

3.1常用圖像格式GIFPNGJPGGIFPNGJPG所能顯示的顏色比GIF和PNG要多的多，可以用來(lái)保存超過(guò)256種顏色的圖像，但是JPG是一種有損壓縮的圖像格式，這就意味著每修改一次圖片都會(huì)造成一些圖像數(shù)據(jù)的丟失。小圖片考慮GIF或PNG-8，半透明圖像考慮PNG-24，類(lèi)似照片的圖像則考慮JPG。

3.1常用圖像格式基本語(yǔ)法格式<imgsrc="圖像URL"/>src屬性用于指定圖像文件的路徑和文件名HTML網(wǎng)頁(yè)中任何元素的實(shí)現(xiàn)都要依靠HTML標(biāo)記，要想在網(wǎng)頁(yè)中顯示圖像就需要使用圖像標(biāo)記。

3.2圖像標(biāo)記在過(guò)去網(wǎng)速比較慢的時(shí)候，alt屬性主要用于使看不到圖像的用戶(hù)了解圖像內(nèi)容。隨著互聯(lián)網(wǎng)的發(fā)展，alt屬性又有了新的作用。Google和百度等搜索引擎在收錄頁(yè)面時(shí)，會(huì)通過(guò)alt屬性的內(nèi)容來(lái)分析網(wǎng)頁(yè)的內(nèi)容。因此如果在制作網(wǎng)頁(yè)時(shí)，能夠?yàn)閳D像都設(shè)置清晰明確的替換文本，就可以幫助搜索引擎更好地理解網(wǎng)頁(yè)內(nèi)容，從而更有利于搜索引擎的優(yōu)化。

alt圖像的替換文本屬性，在圖像無(wú)法顯示時(shí)告訴用戶(hù)該圖片的內(nèi)容。圖像標(biāo)記的相關(guān)屬性

3.2圖像標(biāo)記運(yùn)行效果如圖所示:

[點(diǎn)擊操作演示]

3.2圖像標(biāo)記

widthheight用來(lái)定義圖片的寬度和高度，通常我們只設(shè)置其中的一個(gè)，另一個(gè)會(huì)按原圖等比例顯示。通常情況下，如果不給<img/>標(biāo)記設(shè)置寬和高，圖片就會(huì)按照它的原始尺寸顯示，當(dāng)然也可以手動(dòng)更改圖片的大小。圖像標(biāo)記的相關(guān)屬性

3.2圖像標(biāo)記

border圖像標(biāo)記的相關(guān)屬性

3.2圖像標(biāo)記為圖像添加邊框、設(shè)置邊框的寬度。但邊框顏色的調(diào)整僅僅通過(guò)HTML屬性是不能夠?qū)崿F(xiàn)的。align圖像的對(duì)齊屬性align。用于調(diào)整圖像的位置。

3.2圖像標(biāo)記圖文混排是網(wǎng)頁(yè)中常見(jiàn)的效果，默認(rèn)情況下圖像的底部會(huì)相對(duì)于文本的第一行文字對(duì)齊，但是在制作網(wǎng)頁(yè)時(shí)經(jīng)常需要實(shí)現(xiàn)其他的圖像和文字環(huán)繞效果。運(yùn)行效果如圖所示:

[點(diǎn)擊操作演示]

3.2圖像標(biāo)記什么是路徑？

3.3相對(duì)路徑和絕對(duì)路徑實(shí)際工作中，通常新建一個(gè)文件夾專(zhuān)門(mén)用于存放圖像文件。路徑這時(shí)再插入圖像，就需要采用“路徑”的方式來(lái)指定圖像文件的位置。通過(guò)設(shè)置“路徑”來(lái)幫助瀏覽器找到圖像文件。圖像文件文件夾

3.3相對(duì)路徑和絕對(duì)路徑相對(duì)路徑絕對(duì)路徑相對(duì)路徑是相對(duì)于當(dāng)前文件的路徑，不帶有盤(pán)符，通常是以HTML網(wǎng)頁(yè)文件為起點(diǎn)，通過(guò)層級(jí)關(guān)系描述目標(biāo)圖像的位置。絕對(duì)路徑是網(wǎng)頁(yè)上的文件或目錄在硬盤(pán)上的真正路徑，或完整的網(wǎng)絡(luò)地址。網(wǎng)頁(yè)中不推薦使用絕對(duì)路徑，因?yàn)榫W(wǎng)頁(yè)制作完成之后我們需要將所有的文件上傳到服務(wù)器。例如完整的網(wǎng)絡(luò)地“/images/logo.gif”。

3.3相對(duì)路徑和絕對(duì)路徑相對(duì)路徑設(shè)置分類(lèi)1圖像文件和html文件位于同一文件夾只需輸入圖像文件的名稱(chēng)即可，如<imgsrc=“l(fā)ogo.gif”/>。2圖像文件位于html文件的下一級(jí)文件夾輸入文件夾名和文件名，之間用“/”隔開(kāi)，如<imgsrc="img/img01/logo.gif"/>。3圖像文件位于html文件的上一級(jí)文件夾在文件名之前加入“../”

，如果是上兩級(jí)，則需要使用

“../../”，以此類(lèi)推，如<imgsrc="../logo.gif"/>。

3.3相對(duì)路徑和絕對(duì)路徑ThankYou!項(xiàng)目3 CSS入門(mén)·

CSS優(yōu)先級(jí)·CSS核心基礎(chǔ)·CSS文本相關(guān)樣式

HTML?學(xué)習(xí)目標(biāo)掌握CSS樣式規(guī)則，能夠書(shū)寫(xiě)規(guī)范的CSS樣式代碼。1理解CSS層疊性、繼承性與優(yōu)先級(jí)，學(xué)會(huì)高效控制網(wǎng)頁(yè)元素。42掌握CSS字體樣式及文本外觀屬性，能夠控制頁(yè)面中的文本樣式。3掌握CSS復(fù)合選擇器，可以快捷選擇頁(yè)面中的元素。掌握掌握理解掌握任務(wù)一

CSS核心技術(shù)下面將對(duì)CSS樣式規(guī)則、引入CSS樣式表、CSS基礎(chǔ)選擇器進(jìn)行詳細(xì)講解。CSS中文譯為“層疊樣式表”。CSS主要是對(duì)HTML標(biāo)記的內(nèi)容進(jìn)行更加豐富的裝飾，并將網(wǎng)頁(yè)表現(xiàn)樣式與網(wǎng)頁(yè)結(jié)構(gòu)分離的一種樣式設(shè)計(jì)語(yǔ)言?？梢允褂肅SS控制HTML頁(yè)面中的文本內(nèi)容、圖片外形以及版面布局等外觀的顯示樣式。CSS發(fā)展史

1.1CSS發(fā)展史20世紀(jì)90年代初，HTML語(yǔ)言誕生，各種形式的樣式表也隨之出現(xiàn)。發(fā)展至今CSS已經(jīng)出現(xiàn)了4個(gè)版本，雖然完整的、規(guī)范權(quán)威的CSS3標(biāo)準(zhǔn)還沒(méi)有塵埃落定，但是各主流瀏覽器已經(jīng)開(kāi)始支持其中的絕大部分特性。什么是CSS樣式規(guī)則？

1.2CSS樣式規(guī)則選擇器{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;}基本語(yǔ)法格式在上面的樣式規(guī)則中，選擇器用于指定CSS樣式作用的HTML對(duì)象，花括號(hào)內(nèi)是對(duì)該對(duì)象設(shè)置的具體樣式。其中，屬性和屬性值以“鍵值對(duì)”的形式出現(xiàn)，用英文“:”連接，多個(gè)“鍵值對(duì)”之間用英文“;”進(jìn)行區(qū)分。

1.2CSS樣式規(guī)則遵循CSS樣式規(guī)則之外，還要注意以下幾個(gè)問(wèn)題：

1.2CSS樣式規(guī)則CSS樣式中的選擇器嚴(yán)格區(qū)分大小寫(xiě)，屬性和值不區(qū)分大小寫(xiě)，按照書(shū)寫(xiě)習(xí)慣一般將“選擇器、屬性和值”都采用小寫(xiě)的方式。如果屬性的值由多個(gè)單詞組成且中間包含空格，則必須為這個(gè)屬性值加上英文狀態(tài)下的引號(hào)。為了提高代碼的可讀性，書(shū)寫(xiě)CSS代碼時(shí)，通常會(huì)加上CSS注釋。屬性的值和單位之間是不允許出現(xiàn)空格的。引入CSS樣式表的方式有哪些？

1.3引入CSS樣式表行內(nèi)式內(nèi)嵌式鏈入式內(nèi)嵌式鏈入式行內(nèi)式也稱(chēng)為內(nèi)聯(lián)樣式，是通過(guò)標(biāo)記的style屬性來(lái)設(shè)置元素的樣式。語(yǔ)法格式<標(biāo)記名style="屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;">內(nèi)容</標(biāo)記名>

1.3引入CSS樣式表運(yùn)行效果如圖所示:

[點(diǎn)擊操作演示]

1.3引入CSS樣式表行內(nèi)式內(nèi)嵌式鏈入式內(nèi)嵌式鏈入式內(nèi)嵌式是將CSS代碼集中寫(xiě)在HTML文檔的<head>頭部標(biāo)記中，并且用<style>標(biāo)記定義。行內(nèi)式語(yǔ)法格式<head><styletype="text/css">選擇器{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;}</style></head>

1.3引入CSS樣式表運(yùn)行效果如圖所示:

[點(diǎn)擊操作演示]

1.3引入CSS樣式表行內(nèi)式內(nèi)嵌式鏈入式內(nèi)嵌式鏈入式鏈入式是將所有的樣式放在一個(gè)或多個(gè)以.css為擴(kuò)展名的外部樣式表文件中，通過(guò)<link/>標(biāo)記將外部樣式表文件鏈接到HTML文檔中。行內(nèi)式語(yǔ)法格式<head><linkhref="CSS文件的路徑"type="text/css"rel="stylesheet"/></head>

1.3引入CSS樣式表運(yùn)行效果如圖所示:

[點(diǎn)擊操作演示]

1.3引入CSS樣式表CSS鏈入式最大的好處是同一個(gè)CSS樣式表可以被不同的HTML頁(yè)面鏈接使用，同時(shí)，一個(gè)HTML頁(yè)面也可以通過(guò)多個(gè)<link/>標(biāo)記鏈接多個(gè)CSS樣式表。鏈入式是使用頻率最高，也最實(shí)用的CSS樣式表。它將HTML代碼與CSS代碼分離為兩個(gè)或多個(gè)文件，實(shí)現(xiàn)了結(jié)構(gòu)和表現(xiàn)的完全分離，使得網(wǎng)頁(yè)的前期制作和后期維護(hù)都十分方便。

1.3引入CSS樣式表什么是CSS基礎(chǔ)選擇器？

1.4CSS基礎(chǔ)選擇器要想將CSS樣式應(yīng)用于特定的HTML元素，首先需要找到該目標(biāo)元素。在CSS中，執(zhí)行這一任務(wù)的樣式規(guī)則部分被稱(chēng)為選擇器。

1.4CSS基礎(chǔ)選擇器標(biāo)記選擇器類(lèi)選擇器id選擇器通配符選擇器類(lèi)選擇器id選擇器通配符選擇器標(biāo)記選擇器是指用HTML標(biāo)記名稱(chēng)作為選擇器，按標(biāo)記名稱(chēng)分類(lèi)，為頁(yè)面中某一類(lèi)標(biāo)記指定統(tǒng)一的CSS樣式。語(yǔ)法格式標(biāo)記名{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;}

1.4CSS基礎(chǔ)選擇器標(biāo)記選擇器最大優(yōu)點(diǎn)是能快速為頁(yè)面中同類(lèi)型的標(biāo)記統(tǒng)一樣式，同時(shí)這也是它的缺點(diǎn)，既不能設(shè)計(jì)差異化樣式。標(biāo)記選擇器類(lèi)選擇器id選擇器通配符選擇器類(lèi)選擇器id選擇器通配符選擇器類(lèi)選擇器使用“.”（英文點(diǎn)號(hào)）進(jìn)行標(biāo)識(shí)，后面緊跟類(lèi)名。類(lèi)選擇器最大的優(yōu)勢(shì)是可以為元素對(duì)象定義單獨(dú)或相同的樣式。語(yǔ)法格式.類(lèi)名{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;}標(biāo)記選擇器

1.4CSS基礎(chǔ)選擇器類(lèi)名的第一個(gè)字符不能使用數(shù)字，并且顏色區(qū)分大小寫(xiě)，一般采用小寫(xiě)的英文字符。運(yùn)行效果如圖所示:

[點(diǎn)擊操作演示]

1.4CSS基礎(chǔ)選擇器標(biāo)記選擇器類(lèi)選擇器id選擇器通配符選擇器類(lèi)選擇器id選擇器通配符選擇器id選擇器使用“#”進(jìn)行標(biāo)識(shí)，后面緊跟id名，其基本語(yǔ)法格式如下：語(yǔ)法格式#id名{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;}標(biāo)記選擇器

1.4CSS基礎(chǔ)選擇器該語(yǔ)法中，id名即為HTML元素的id屬性值，元素的id值是唯一的，只能對(duì)應(yīng)文檔中某一個(gè)具體元素。運(yùn)行效果如圖所示:

[點(diǎn)擊操作演示]

1.4CSS基礎(chǔ)選擇器標(biāo)記選擇器類(lèi)選擇器id選擇器通配符選擇器類(lèi)選擇器id選擇器通配符選擇器通配符選擇器用“*”號(hào)表示，它是所有選擇器中作用范圍最廣的，能匹配頁(yè)面中所有的元素。語(yǔ)法格式*{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;}標(biāo)記選擇器實(shí)際網(wǎng)頁(yè)開(kāi)發(fā)不建議使用通配符選擇器，因?yàn)樗O(shè)置的樣式對(duì)所有的HTML都生效，不管標(biāo)記是否需要該樣式，這樣反而降低了代碼的執(zhí)行速度。

1.4CSS基礎(chǔ)選擇器ThankYou!項(xiàng)目3 CSS入門(mén)·CSS優(yōu)先級(jí)·CSS核心基礎(chǔ)·CSS文本相關(guān)樣式

HTML掌握CSS樣式規(guī)則，能夠書(shū)寫(xiě)規(guī)范的CSS樣式代碼。1理解CSS層疊性、繼承性與優(yōu)先級(jí)，學(xué)會(huì)高效控制網(wǎng)頁(yè)元素。42掌握CSS字體樣式及文本外觀屬性，能夠控制頁(yè)面中的文本樣式。3掌握CSS復(fù)合選擇器，可以快捷選擇頁(yè)面中的元素。掌握掌握理解掌握?學(xué)習(xí)目標(biāo)任務(wù)二

CSS控制文本樣式學(xué)習(xí)HTML時(shí)，可以使用文本樣式標(biāo)記及其屬性控制文本的顯示樣式，但是這種方式繁瑣且不利于代碼的共享和移植。為此，CSS提供了相應(yīng)的文本樣式屬性。下面將對(duì)常用的文本樣式屬性進(jìn)行詳細(xì)講解。為了更方便的控制網(wǎng)頁(yè)中各種各樣的字體，CSS提供了一系列的字體樣式屬性。1font-size屬性用于設(shè)置字號(hào)。2font-family屬性用于設(shè)置字體。3font-weight屬性用于定義字體的粗細(xì)。4font-variant屬性用于設(shè)置變體（字體變化）。5font-style屬性用于定義字體風(fēng)格。6font屬性用于對(duì)字體樣式進(jìn)行綜合設(shè)置。

2.1CSS字體樣式屬性1font-size屬性用于設(shè)置字號(hào)。相對(duì)長(zhǎng)度單位說(shuō)明em相對(duì)于當(dāng)前對(duì)象內(nèi)文本的字體尺寸px像素，最常用，推薦使用絕對(duì)長(zhǎng)度單位說(shuō)明in英寸cm厘米mm毫米pt點(diǎn)font-size屬性用于設(shè)置字號(hào)，該屬性的值可以使用相對(duì)長(zhǎng)度單位，也可以使用絕對(duì)長(zhǎng)度單位。

2.1CSS字體樣式屬性font-family屬性用于設(shè)置字體。網(wǎng)頁(yè)中常用的字體有宋體、微軟雅黑、黑體等。2font-family屬性用于設(shè)置字體。

2.1CSS字體樣式屬性可以同時(shí)指定多個(gè)字體，中間用逗號(hào)隔開(kāi)，如果瀏覽器不支持第一個(gè)字體，則會(huì)嘗試下一個(gè)，直到找到合適的字體，當(dāng)指定的字體沒(méi)有安裝時(shí)，就會(huì)使用瀏覽器默認(rèn)字體。2font-family屬性用于設(shè)置字體。

2.1CSS字體樣式屬性各種字體之間必須使用英文狀態(tài)下的逗號(hào)隔開(kāi)。中文字體需要加英文狀態(tài)下的引號(hào)，英文字體一般不需要加引號(hào)。當(dāng)需要

設(shè)置英文字體時(shí)，英文字體名必須位于中文字體名之前。盡量使用系統(tǒng)默認(rèn)字體，保證在任何用戶(hù)的瀏覽器中都能正確顯示。font-weight屬性用于定義字體的粗細(xì)。3font-weight屬性用于定義字體的粗細(xì)。值描述normal默認(rèn)值。定義標(biāo)準(zhǔn)的字符。bold定義粗體字符。bolder定義更粗的字符。lighter定義更細(xì)的字符。100~900（100的整數(shù)倍）定義由細(xì)到粗的字符。其中400等同于normal，700等同于bold，值越大字體越粗。

2.1CSS字體樣式屬性實(shí)際工作中，常用的font-weight的屬性值為normal和bold，用來(lái)定義正?；蚣哟诛@示的字體。font-style屬性用于定義字體風(fēng)格，如設(shè)置斜體、傾斜或正常字體。5font-style屬性用于定義字體風(fēng)格。normal：默認(rèn)值，瀏覽器會(huì)顯示標(biāo)準(zhǔn)的字體樣式;italic：瀏覽器會(huì)顯示斜體的字體樣式;oblique：瀏覽器會(huì)顯示傾斜的字體樣式;

2.1CSS字體樣式屬性font屬性用于對(duì)字體樣式進(jìn)行綜合設(shè)置?；菊Z(yǔ)法格式：6font屬性用于對(duì)字體樣式進(jìn)行綜合設(shè)置。選擇器{font:font-stylefont-variantfont-weightfont-size/line-heightfont-family;}

2.1CSS字體樣式屬性使用font屬性時(shí)，必須按上面語(yǔ)法格式中的順序書(shū)寫(xiě)，各個(gè)屬性以空格隔開(kāi)。其中不需要設(shè)置的屬性可以忽略（取默認(rèn)值），但必須保留font-size和font-family屬性，否則font屬性將不起作用。運(yùn)行效果如圖所示:

[點(diǎn)擊操作演示]

2.1CSS字體樣式屬性CSS文本樣式屬性有哪些？CSS樣式屬性修飾的文本隨處可見(jiàn)百度快照詩(shī)詞歌賦網(wǎng)址管家

2.2CSS文本外觀屬性

使用HTML可以對(duì)文本外觀進(jìn)行簡(jiǎn)單的控制，但是效果并不理想。為此CSS提供了一系列文本外觀樣式屬性，具體如下：text-transformtext-decorationtext-indentwhite-spacecolorletter-spacingword-spacingline-heighttext-align

2.2CSS文本外觀屬性colorletter-spacingword-spacingline-heighttext-aligntext-transformtext-decorationtext-indentwhite-spacetext-transformtext-decorationtext-indentwhite-spaceletter-spacingword-spacingline-heighttext-aligncolor屬性用于定義文本的顏色，其取值方式有如下3種：預(yù)定義的顏色值，如red，green，blue等。十六進(jìn)制，如#FF0000，#FF6600，#29D794等。實(shí)際工作中，十六進(jìn)制是最常用的定義顏色的方式。RGB代碼，如紅色可以表示為rgb(255,0,0)或rgb(100%,0%,0%)。

2.2CSS文本外觀屬性colorword-spacingline-heighttext-aligntext-transformtext-decorationtext-indentwhite-spacetext-transformtext-decorationtext-indentwhite-spaceword-spacingline-heighttext-alignletter-spacing屬性用于定義字間距，所謂字間距就是字符與字符之間的空白。letter-spacing屬性，其屬性值可為不同單位的數(shù)值，允許使用負(fù)值，默認(rèn)為normal。color

2.2CSS文本外觀屬性text-indentletter-spacingcolorletter-spacingline-heighttext-aligntext-transformtext-decorationtext-indentwhite-spacetext-transformtext-decorationtext-indentwhite-spaceletter-spacingline-heighttext-alignword-spacing屬性用于定義英文單詞之間的間距，對(duì)中文字符無(wú)效。word-spacing屬性用于定義英文單詞之間的間距，和letter-spacing一樣，其屬性值可為不同單位的數(shù)值，允許使用負(fù)值，默認(rèn)為normal。color

2.2CSS文本外觀屬性text-inentword-spacingcolorletter-spacingword-spacingtext-aligntext-transformtext-decorationtext-indentwhite-spacetext-transformtext-decorationtext-indentwhite-spaceletter-spacingword-spacingtext-alignline-height屬性用于設(shè)置行間距，所謂行間距就是行與行之間的距離，即字符的垂直間距，一般稱(chēng)為行高。line-height常用的屬性值單位有三種，分別為像素px，相對(duì)值em和百分比%，實(shí)際工作中使用最多的是像素px。color

2.2CSS文本外觀屬性text-indentline-heightcolorletter-spacingword-spacingline-heighttext-aligntext-decorationtext-indentwhite-spacetext-decorationtext-indentwhite-spaceletter-spacingword-spacingline-heighttext-aligntext-transform屬性用于控制英文字符的大小寫(xiě)。其可用屬性值如下：none：不轉(zhuǎn)換（默認(rèn)值）。capitalize：首字母大寫(xiě)。uppercase：全部字符轉(zhuǎn)換為大寫(xiě)。lowercase：全部字符轉(zhuǎn)換為小寫(xiě)。color

2.2CSS文本外觀屬性text-indenttext-trasformcolorletter-spacingword-spacingline-heighttext-aligntext-transformtext-indentwhite-spacetext-transformtext-indentwhite-spaceletter-spacingword-spacingline-heighttext-aligntext-decoration屬性用于設(shè)置文本的下劃線，上劃線，刪除線等裝飾效果。其可用屬性值如下：none：沒(méi)有裝飾（正常文本默認(rèn)值）。underline：下劃線。overline：上劃線。line-through：刪除線。color

2.2CSS文本外觀屬性text-decoration后可以賦多個(gè)值，用于給文本添加多種顯示效果。text-indenttext-decorationcolorletter-spacingword-spacingline-heighttext-transformtext-decorationtext-indentwhite-spacetext-transformtext-decorationtext-indentwhite-spaceletter-spacingword-spacingline-heighttext-align屬性用于設(shè)置文本內(nèi)容水平對(duì)齊，相當(dāng)于html中的align對(duì)齊屬性。其可用屬性值如下：left：左對(duì)齊（默認(rèn)值）right：右對(duì)齊。center：居中對(duì)齊。color

2.2CSS文本外觀屬性

1.text-align屬性?xún)H適用于塊級(jí)元素，對(duì)行內(nèi)元素?zé)o效。

2.如果需要對(duì)圖像設(shè)置水平對(duì)齊，可以為圖片添加一個(gè)父標(biāo)記，如<p>或<div>，然后對(duì)父標(biāo)記應(yīng)用text-align屬性，即可實(shí)現(xiàn)圖像的水平對(duì)齊。text-indenttext-align運(yùn)行效果如圖所示:

[點(diǎn)擊操作演示]

2.2CSS文本外觀屬性text-indentcolorletter-spacingword-spacingline-heighttext-aligntext-transformtext-decorationwhite-spacetext-transformtext-decorationtext-indentwhite-spaceletter-spacingword-spacingline-heighttext-aligntext-indent屬性用于設(shè)置首行文本的縮進(jìn)。其屬性值可為不同單位的數(shù)值、em字符寬度的倍數(shù)、或相對(duì)于瀏覽器窗口寬度的百分比%，允許使用負(fù)值,建議使用em作為設(shè)置單位。color

2.2CSS文本外觀屬性

text-indent屬性?xún)H適用于塊級(jí)元素，對(duì)行內(nèi)元素?zé)o效。運(yùn)行效果如圖所示:

[點(diǎn)擊操作演示]

2.2CSS文本外觀屬性colorletter-spacingword-spacingline-heighttext-aligntext-transformtext-decorationtext-indentwhite-spacetext-transformtext-decorationtext-indentwhite-spaceletter-spacingword-spacingline-heighttext-alignwhite-space屬性可設(shè)置空白符的處理方式。使用HTML制作網(wǎng)頁(yè)時(shí)，不論源代碼中多少空格，在瀏覽器中只會(huì)顯示一個(gè)字符的空白。其屬性值如下：normal：常規(guī)（默認(rèn)值），文本中的空格、空行無(wú)效，滿(mǎn)行（到達(dá)區(qū)域邊界）后自動(dòng)換行。pre：預(yù)格式化，按文檔的書(shū)寫(xiě)格式保留空格、空行原樣顯示。nowrap：空格空行無(wú)效，強(qiáng)制文本不能換行，除非遇到換行標(biāo)記<br/>。內(nèi)容超出元素的邊界也不換行，若超出瀏覽器頁(yè)面則會(huì)自動(dòng)增加滾動(dòng)條。color

2.2CSS文本外觀屬性ThankYou!項(xiàng)目3 CSS入門(mén)·CSS優(yōu)先級(jí)·CSS核心基礎(chǔ)·CSS文本相關(guān)樣式

HTML掌握CSS樣式規(guī)則，能夠書(shū)寫(xiě)規(guī)范的CSS樣式代碼。1理解CSS層疊性、繼承性與優(yōu)先級(jí)，學(xué)會(huì)高效控制網(wǎng)頁(yè)元素。42掌握CSS字體樣式及文本外觀屬性，能夠控制頁(yè)面中的文本樣式。3掌握CSS復(fù)合選擇器，可以快捷選擇頁(yè)面中的元素。掌握掌握理解掌握?學(xué)習(xí)目標(biāo)任務(wù)4

CSS高級(jí)特性?xún)H僅學(xué)習(xí)CSS基礎(chǔ)選擇器、CSS控制文本樣式，并不能良好地控制網(wǎng)頁(yè)中元素的顯示樣式。想要使用CSS實(shí)現(xiàn)結(jié)構(gòu)與表現(xiàn)的分離，解決工作中出現(xiàn)的CSS調(diào)試問(wèn)題，就需要學(xué)習(xí)CSS高級(jí)特性。本節(jié)將對(duì)CSS復(fù)合選擇器、CSS層疊性與繼承性以及CSS優(yōu)先級(jí)進(jìn)行詳細(xì)講解。標(biāo)簽指定選擇器后代選擇器并集選擇器標(biāo)簽指定式選擇器又稱(chēng)交集選擇器，由兩個(gè)選擇器構(gòu)成，其中第一個(gè)為標(biāo)記選擇器，第二個(gè)為class選擇器或id選擇器，兩個(gè)選擇器之間不能有空格，如h3.special或p#one。

3.1CSS復(fù)合選擇器復(fù)合選擇器是由兩個(gè)或者多個(gè)基礎(chǔ)選擇器，通過(guò)不同的方式組合而成。運(yùn)行效果如圖所示:

[點(diǎn)擊操作演示]

3.1CSS復(fù)合選擇器標(biāo)簽指定選擇器后代選擇器并集選擇器后代選擇器用來(lái)選擇元素或元素組的后代，其寫(xiě)法就是把外層標(biāo)記寫(xiě)在前面，內(nèi)層標(biāo)記寫(xiě)在后面，中間用空格分隔。當(dāng)標(biāo)記發(fā)生嵌套時(shí)，內(nèi)層標(biāo)記就成為外層標(biāo)記的后代。

3.1CSS復(fù)合選擇器復(fù)合選擇器是由兩個(gè)或者多個(gè)基礎(chǔ)選擇器，通過(guò)不同的方式組合而成。運(yùn)行效果如圖所示:

[點(diǎn)擊操作演示]

3.1CSS復(fù)合選擇器標(biāo)簽指定選擇器后代選擇器并集選擇器并集選擇器是各個(gè)選擇器通過(guò)逗號(hào)連接而成的，任何形式的選擇器都可以作為并集選擇器的一部分。若某些選擇器定義的樣式完全或部分相同，可利用并集選擇器為它們定義相同的樣式。

3.1CSS復(fù)合選擇器復(fù)合選擇器是由兩個(gè)或者多個(gè)基礎(chǔ)選擇器，通過(guò)不同的方式組合而成。運(yùn)行效果如圖所示:

[點(diǎn)擊操作演示]

3.1CSS復(fù)合選擇器所謂層疊性是指多種CSS樣式的疊加。層疊性

3.2CSS層疊性與繼承性運(yùn)行效果如圖所示:

[點(diǎn)擊操作演示]

3.2CSS層疊性與繼承性所謂繼承性是指書(shū)寫(xiě)CSS樣式表時(shí)，子標(biāo)記會(huì)繼承父標(biāo)記的某些樣式，如文本顏色和字號(hào)。繼承性

3.2CSS層疊性與繼承性繼承性非常有用，它使設(shè)計(jì)師不必在元素的每個(gè)后代上添加相同的樣式。如果設(shè)置的屬性是一個(gè)可繼承的屬性，只需將它應(yīng)用于父元素即可。恰當(dāng)?shù)厥褂肅SS繼承性可以簡(jiǎn)化代碼，降低CSS樣式的復(fù)雜度。但是如果在網(wǎng)頁(yè)中所有的元素都大量繼承樣式，那么判斷樣式的來(lái)源就會(huì)很困難。所以，在實(shí)際工作中，網(wǎng)頁(yè)中通用的全局樣式可以使用繼承。

3.2CSS層疊性與繼承性并不是所有的CSS屬性都可以繼承，例如，下面的屬性就不具有繼承性：

邊框?qū)傩?/p>

內(nèi)/外邊距屬性背景屬性定位屬性布局屬性元素寬高屬性

3.2CSS層疊性與繼承性網(wǎng)頁(yè)制作時(shí)，對(duì)統(tǒng)一元素，應(yīng)用不同的背景，會(huì)出現(xiàn)什么情況？思考background-color:pink;background-color:blue;background-color:red;【結(jié)論】定義CSS樣式時(shí)，經(jīng)常出現(xiàn)兩個(gè)或更多規(guī)則應(yīng)用在同一元素上，這時(shí)就會(huì)出現(xiàn)優(yōu)先級(jí)的問(wèn)題。

3.3CSS優(yōu)先級(jí)

3.3CSS優(yōu)先級(jí)所謂的優(yōu)先級(jí)，指的就是哪條樣式規(guī)則會(huì)最終作用于指定的元素，如圖為優(yōu)先級(jí)低到高順序。繼承樣式的權(quán)重為0。行內(nèi)樣式優(yōu)先。權(quán)重相同時(shí)，CSS遵循就近原則。CSS定義了一個(gè)!important命令，該命令被賦予最大的優(yōu)先級(jí)。在考慮權(quán)重時(shí)，初學(xué)者還需要注意一些特殊的情況，具體如下：

3.3CSS優(yōu)先級(jí)運(yùn)行效果如圖所示:

[點(diǎn)擊操作演示]

3.3CSS優(yōu)先級(jí)ThankYou!項(xiàng)目4盒子模型掌握盒子相關(guān)屬性1了解盒子模型的概念42理解元素的轉(zhuǎn)換3熟悉元素的類(lèi)型掌握理解了解熟悉?學(xué)習(xí)目標(biāo)任務(wù)1認(rèn)識(shí)盒子模型盒子模型是CSS網(wǎng)頁(yè)布局的核心基礎(chǔ)，只有掌握盒子模型的結(jié)構(gòu)和用法，才可以更好的控制網(wǎng)頁(yè)中各個(gè)內(nèi)容元素的呈現(xiàn)效果。盒子模型是CSS的基石之一，布局最重要的概念，它指定元素如何呈現(xiàn)在頁(yè)面當(dāng)中。網(wǎng)頁(yè)就是由許多個(gè)盒子