HTML5+CSS3+JavaScript網(wǎng)頁設(shè)計與制作項目教程PPT完整全套教學(xué)課件

上傳人：b*** IP屬地：浙江上傳時間：2023-09-07 格式：PPTX 頁數(shù)：441 大?。?2.31MB 積分：35 舉報 版權(quán)申訴

HTML5+CSS3+JavaScript網(wǎng)頁設(shè)計與制作項目教程PPT完整全套教學(xué)課件_第2頁

HTML5+CSS3+JavaScript網(wǎng)頁設(shè)計與制作項目教程PPT完整全套教學(xué)課件_第3頁

HTML5+CSS3+JavaScript網(wǎng)頁設(shè)計與制作項目教程PPT完整全套教學(xué)課件_第4頁

HTML5+CSS3+JavaScript網(wǎng)頁設(shè)計與制作項目教程PPT完整全套教學(xué)課件_第5頁

已閱讀5頁，還剩436頁未讀，繼續(xù)免費(fèi)閱讀

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

文檔簡介

HTML5+CSS3+JavaScript網(wǎng)頁設(shè)計與制作項目教程項目1認(rèn)識HTML5——布局網(wǎng)頁項目1認(rèn)識HTML5——布局網(wǎng)頁.pptx項目2認(rèn)識CSS3——美化網(wǎng)頁.pptx項目3圖像與多媒體的應(yīng)用——制作精彩的網(wǎng)頁.pptx項目4網(wǎng)頁布局與元素的精確定位——DIV+CSS應(yīng)用.pptx項目5布局交互功能——表單的應(yīng)用.pptx項目6讓頁面更酷炫——CSS3高級應(yīng)用.pptx項目7JavaScript應(yīng)用——實現(xiàn)網(wǎng)頁交互功能.pptx全套可編輯PPT課件目錄ENTERPRISEOPERATIONREPORT04.總結(jié)提升03.知識鏈接02.學(xué)習(xí)目標(biāo)01.項目導(dǎo)入項目導(dǎo)入PART01項目導(dǎo)入“旅行家——合作伙伴”頁面效果展示HTML5可實現(xiàn)頁面內(nèi)容的布局。常見的HTML標(biāo)記包括文本標(biāo)記、超鏈接標(biāo)記及列表標(biāo)記。本章我們將使用這些元素制作“旅行家合作伙伴”頁面學(xué)習(xí)目標(biāo)PART02知識目標(biāo)能力目標(biāo)1、了解HTML及其發(fā)展歷程，了解常用的瀏覽器及其特點(diǎn)2、了解常用的HTML編譯器3、掌握HTML文檔的基本結(jié)構(gòu)1、掌握VSCode的下載與安裝方法2、掌握文本控制標(biāo)記的使用3、掌握超鏈接標(biāo)記的使用4、掌握列表標(biāo)記的使用知識鏈接PART03一、HTML5概述1、什么是HTMLHTML全稱“超文本標(biāo)記語言（HyperTextMarkupLanguage）”，是一種標(biāo)記語言。它包括一系列標(biāo)簽．通過這些標(biāo)簽可以將網(wǎng)絡(luò)上的文檔格式統(tǒng)一，使分散的Internet資源連接為一個邏輯整體。需要強(qiáng)調(diào)的是，HTML不是一種編程語言，而是一種標(biāo)記語言。所謂標(biāo)記語言是一套標(biāo)記標(biāo)簽(markuptag)，HTML使用標(biāo)記標(biāo)簽來描述網(wǎng)頁。HTML標(biāo)簽可包括文字，圖形、動畫、聲音、表格、鏈接等。2、HTML的特點(diǎn)及其發(fā)展歷程HTML具有簡易型、可擴(kuò)展性、平臺無關(guān)性及通用性等特點(diǎn)。HTML最初于1989年由CERN的TimBerners-Lee發(fā)明，已經(jīng)經(jīng)歷了4個版本的更新，主要由W3C對其規(guī)則進(jìn)行管理。一、HTML5概述3、HTML與瀏覽器目前常用的瀏覽器包括谷歌（Chorme）、火狐（FireFox）、Safari及MicrosoftEdge等，如圖所示。各瀏覽器隨著HTML的更新迭代，不同版本對其有相應(yīng)的支持，同時具有各自的特點(diǎn)及優(yōu)勢。一、HTML5概述4、VSCode的下載與安裝VSCode，全稱VisualStudioCode，是Microsoft在發(fā)布的一個運(yùn)行于Windows、MacOSX和Linux

之上的，針對于編寫現(xiàn)代Web和云應(yīng)用的跨平臺源代碼編輯器。支持前端開發(fā)應(yīng)用的HTML、CSS、JavaScript等語言，并支持豐富的其他語言和運(yùn)行時擴(kuò)展的生態(tài)系統(tǒng)。VSCode軟件功能非常強(qiáng)大，界面簡潔明晰、操作方便快捷，設(shè)計得很人性化。本書中的案例將使用VSCode作為編譯工具。一、HTML5概述1、創(chuàng)建HTML5文檔(1)使用記事本創(chuàng)建HTML文檔步驟1：創(chuàng)建一個記事本文件；步驟2：打開新建文本文檔，選擇“文件→另存為”，重命名txt文件將其后綴改為html，注意將文件保存類型選擇為“所有文件”，點(diǎn)擊保存按鈕即可將文件保存為html文檔；步驟3：選中html文檔，點(diǎn)擊鼠標(biāo)右鍵，在快捷菜單中選擇打開方式，選擇記事本，即可打開html文檔并對其進(jìn)行編輯。步驟4：使用瀏覽器打開html文檔，可查看頁面效果。二、HTML5文檔及其基本語法2、使用VSCode創(chuàng)建HTML文檔步驟1：打開VSCode，選擇“文件→新建文件”步驟2：在界面右下角選擇語言模式為HTML步驟3：按“Ctrl+S”鍵打開另存為對話框，選擇文檔保存位置并命名文檔，點(diǎn)擊保存按鈕保存文檔步驟4：切換輸入法為英文，在代碼編輯區(qū)域輸入“!”，按Tab鍵，將自動生成html文檔基本結(jié)構(gòu)步驟5：在body標(biāo)簽中輸入“HelloWorld！”，按“Ctrl+S”保存文檔，在代碼編輯區(qū)域空白處點(diǎn)擊鼠標(biāo)右鍵，在快捷才到中選擇“OpeninDefaultBrowser”即可在默認(rèn)瀏覽器中預(yù)覽html頁面二、HTML5文檔及其基本語法2、HTML5文檔的基本結(jié)構(gòu)HTML5文檔由文檔類型聲明、根標(biāo)記、頭部標(biāo)記、主體標(biāo)記組成。【例1-1】HTML5文檔基本結(jié)構(gòu)<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>MyFirstPage</title></head><body>

</body></html>二、HTML5文檔及其基本語法<!doctypehtml>文檔類型聲明這個部分的用來說明該文檔是HTML文檔。所有的HTML文檔開始于文檔聲明之后，它說明了文檔的類型及其所遵守的標(biāo)準(zhǔn)規(guī)范集。本例中的<!doctype>是html5的文檔類型聲明，形式簡潔。<html>根標(biāo)記

根標(biāo)記位于文檔類型聲明之后，位于html文檔的最外層。根標(biāo)記是雙標(biāo)記，<html>標(biāo)志著html文檔的開始，</html>標(biāo)志著html文檔的結(jié)束。根標(biāo)記中嵌套著頭部標(biāo)記和主體標(biāo)記。lang屬性指定頁面內(nèi)容的默認(rèn)語言，例如：en表示英語。二、HTML5文檔及其基本語法<head>頭部標(biāo)記頭部標(biāo)記位于根標(biāo)記之后，是雙標(biāo)記，用來定義html文檔的頭部信息。Head標(biāo)記中通常嵌套著<meta>、<title>、<style>、<script>、<link>等標(biāo)記。其中：<meta>：元標(biāo)記，以屬性的形式來定義文檔信息的名稱、內(nèi)容等，包括文檔的關(guān)鍵字、作者、描述、編碼和語言等多種信息。其語法格式如下：<meta

http-equiv="屬性名"

content="屬性值"><meta

name="屬性名"

content="屬性值">例如：<!--設(shè)置關(guān)鍵字及描述信息，以便于搜索引擎更準(zhǔn)確的發(fā)現(xiàn)你的站點(diǎn)

--><meta

name="keywords"

content="HTML5論壇"><meta

name="description"

content="前端技術(shù)交流">

<title>：標(biāo)題標(biāo)記，描述頁面的名稱；<style>及<script>標(biāo)記：用來說明文檔包含的樣式及腳本；<link>：表示對外部資源（如CSS樣式表）的引用二、HTML5文檔及其基本語法<body>主體標(biāo)記主體標(biāo)記位于根標(biāo)記中，位于頭部標(biāo)記后，與頭部標(biāo)記是并列關(guān)系。其中嵌套著頁面中顯示的內(nèi)容，包括文字、圖片、音頻、視頻等元素。一個html文檔中只能有一個主體標(biāo)記。注意：HTML文檔中的標(biāo)記存在兩種關(guān)系，分別是嵌套關(guān)系和并列關(guān)系，以此基本文檔格式為例，<head>標(biāo)記與<title>標(biāo)記為嵌套關(guān)系，<head>標(biāo)記與<body>標(biāo)記為并列關(guān)系。二、HTML5文檔及其基本語法HTML標(biāo)記雙標(biāo)記在HTML文檔中，大多數(shù)標(biāo)記都是雙標(biāo)記，其語法格式如下：<標(biāo)記名>內(nèi)容</標(biāo)記名>

其中<標(biāo)記名>表示標(biāo)記的開始，稱為開始標(biāo)記；</標(biāo)記名>表示標(biāo)記的結(jié)束，稱為結(jié)束標(biāo)記；它們之間是內(nèi)容。例如：<h1>HTML基礎(chǔ)語法</h1>

這里標(biāo)題標(biāo)簽中添加了標(biāo)題內(nèi)容“HTML基礎(chǔ)語法。”二、HTML5文檔及其基本語法單標(biāo)記單標(biāo)記又稱空元素，用單標(biāo)簽來表示，里面不需要包含內(nèi)容，只有一個開始標(biāo)簽，而不需要關(guān)閉標(biāo)簽。<標(biāo)記名/>例如換行標(biāo)記：<br/>二、HTML5文檔及其基本語法注釋標(biāo)記注釋標(biāo)記是HTML中的一種特殊標(biāo)記，用來作為代碼的注解，并不顯示在頁面當(dāng)中。其語法格式如下例如：<metacharset="UTF-8"><!—此頁面使用UTF-8編碼格式-->二、HTML5文檔及其基本語法標(biāo)記的屬性在HTML中可以為標(biāo)記添加屬性，標(biāo)記的屬性以鍵值對的形式表示，單標(biāo)記和雙標(biāo)記都可以添加標(biāo)記的屬性，其語法格式如下：<標(biāo)記名屬性1=“屬性值1”屬性2=“屬性值2”……>內(nèi)容</標(biāo)記名><標(biāo)記名屬性1=“屬性值1”屬性2=“屬性值2”……/>例如：<h1color=“red”align=“center”>項目1認(rèn)識HTML5</h1>

<hrwidth=”1000”>

注意：屬性值可以放在單引號、雙引號中HTML文檔中允許不使用引號部分屬性值可省略二、HTML5文檔及其基本語法HTML文本控制標(biāo)記文字是網(wǎng)頁中最基本的組成元素，HTML提供了文本控制標(biāo)記，用于在網(wǎng)頁中添加文字，包括標(biāo)題標(biāo)記、段落標(biāo)記、水平線標(biāo)記、換行標(biāo)記、文本格式化標(biāo)記及特殊字符標(biāo)記等。二、HTML5文檔及其基本語法標(biāo)題標(biāo)記HTML提供了6個等級的標(biāo)題標(biāo)記，分別是<h1>、<h2>、<h3、<h4、<h5>及<h6>。從<h1>到<h6>標(biāo)題字體大小遞減。其語法格式如下：<hn>標(biāo)題內(nèi)容</hn>【例1-2】標(biāo)題標(biāo)記<!DOCTYPE

html><html

lang="en"><head>

<meta

charset="UTF-8">

<h6>六級標(biāo)題</h6></body></html>二、HTML5文檔及其基本語法段落標(biāo)記HTML提供了6個等級的標(biāo)題標(biāo)記，分別是<h1>、<h2>、<h3、<h4、<h5>及<h6>。從<h1>到<h6>標(biāo)題字體大小遞減。其語法格式如下：<p>段落內(nèi)容</p>【例1-3】段落標(biāo)記<!DOCTYPEhtml><htmllang="en">

<head><metacharset="UTF-8"><title>HTML簡介</title></head>

<body><h1align="center">HTML簡介</h1><palign="justify">HTML的全稱為超文本標(biāo)記語言，是一種標(biāo)記語言。

它包括一系列標(biāo)簽，通過這些標(biāo)簽可以將網(wǎng)絡(luò)上的文檔格式統(tǒng)一，

使分散的Internet資源連接為一個邏輯整體。

HTML文本是由HTML命令組成的描述性文本，

HTML命令可以是文字、圖形、動畫、聲音、表格、鏈接等。</p></body></html>二、HTML5文檔及其基本語法3、水平線標(biāo)記HTML中可以使用<hr/>標(biāo)記添加水平線，水平線標(biāo)記是單標(biāo)記，其語法格式如下：<hr/>水平線標(biāo)記也可以添加屬性設(shè)置其樣式，常用屬性如表1.2所示：表1.2水平線標(biāo)記屬性二、HTML5文檔及其基本語法屬性名屬性說明屬性值align對齊方式left、right、centersize設(shè)置水平線粗細(xì)以像素為單位，默認(rèn)2pxcolor設(shè)置水平線顏色顏色名稱、RGB值、十六進(jìn)制RGB值width設(shè)置水平線寬度像素值、百分比（占瀏覽器窗口寬度的百分比）換行標(biāo)記在HTML文檔中，按回車鍵無法使文字換行，需要插入換行標(biāo)記<br/>開始新的一行。<br/>標(biāo)記是單標(biāo)記?！纠?-4】古詩詞頁面<!DOCTYPEhtml><htmllang="en">

李白乘舟將欲行，<br/>

忽聞岸上踏歌聲。<br/>

桃花潭水深千尺，<br/>

不及汪倫送我情。</p></body></html>二、HTML5文檔及其基本語法文本格式化標(biāo)記HTML文檔提供了一些文本格式化標(biāo)記，使字體以斜體、加粗、下劃線和刪除線的樣式顯示，常見的文本格式化標(biāo)記如表1.3所示：表1.3文本格式化標(biāo)記二、HTML5文檔及其基本語法標(biāo)記顯示樣式<b></b>和<strong></strong>文字加粗<i></i>和<em></em>字體傾斜<s></s>和<del></del>字體添加刪除線<u></u>和<ins></ins>字體添加下劃線【例1-5】使用文本格式化標(biāo)記<!DOCTYPE

html><html

lang="en">

<head>

<meta

charset="UTF-8">

<title>文本格式化標(biāo)記</title></head>

<body>

<p>正常段落文字</p>

<strong>文字加粗效果</strong>

<em>文字傾斜效果</em>

<del>文字刪除線效果</del>

<ins>文字下劃線效果</ins></body></html>二、HTML5文檔及其基本語法轉(zhuǎn)義字符在網(wǎng)頁中經(jīng)常會使用到一些特殊符號，在HTML中輸入這些特殊符號需要使用轉(zhuǎn)義字符，常用的轉(zhuǎn)義字符如表1.4所示：表1.4HTML常用轉(zhuǎn)義字符二、HTML5文檔及其基本語法特殊字符說明轉(zhuǎn)義字符代碼

不斷行的空白格

小于<>

大于>&&符號&"雙引號"?版權(quán)©?已注冊商標(biāo)®?商標(biāo)（美國）™°攝氏度°±正負(fù)號±×乘號×÷除號÷HTML列表標(biāo)記在網(wǎng)頁中經(jīng)常使用列表來展示內(nèi)容，在HTML中列表有三種形式：無序列表、有序列表和自定義列表。在頁面布局中我們會經(jīng)常使用到列表。二、HTML5文檔及其基本語法無序列表ul無序列表(Unordered

List)是一個沒有特定順序的相關(guān)條目(或稱為列表項)的集合。在無序列表中，各個列表項之間屬并列關(guān)系，沒有先后順序之分，它們之間以一個項目符號來標(biāo)記。無序列表的語法格式如下：

<ul

type=”項目編號樣式”>

<li>

項目名稱

</li>

……

<li>

項目名稱

</li>

</ul>其中：<ul></ul>用來插入無序列表，<li></li>用來定義列表項序列。二、HTML5文檔及其基本語法無序列表標(biāo)記的type屬性，可以指定出現(xiàn)在列表項前項目符號的樣式，可以使用的項目符號樣式包括：disc：實心圓circle：空心圓square：實心方塊二、HTML5文檔及其基本語法【例1-6】無序列表<!DOCTYPE

html><html

lang="en"><head>

<meta

charset="UTF-8">

<ul>

<li>JavaScript</li>

</ul></body></html>二、HTML5文檔及其基本語法有序列表ol有序列表(Ordered

List)是一個有特定順序的相關(guān)條目(或稱為列表項)的集合。在有序列表中，各個列表項有先后順序之分，它們之間以編號來標(biāo)記。有序列表的語法格式如下：

<ol

type=”項目編號樣式”start=”編號起始值”>

<li>

項目名稱

</li>

……

<li>

項目名稱

</li>

</ol>其中：<ol></ol>用來插入有序列表；<li></li>用來定義列表項序列。二、HTML5文檔及其基本語法有序列表標(biāo)記的type屬性，可以指定出現(xiàn)在列表項前的項目編號的樣式，可以使用的項目符號樣式包括：1：指定項目編號為阿拉伯?dāng)?shù)字；a：指定項目編號為小寫英文字母；A：指定項目編號為大寫英文字母；i：指定項目編號為小寫羅馬數(shù)字；I：指定項目編號為大寫羅馬數(shù)字。有序列表默認(rèn)會從1、a、A、ⅰ、Ⅰ開始自動編號，也可使用start屬性改變標(biāo)號的起始值。start屬性值是一個整數(shù)，表示從哪一個數(shù)字或字母開始編號。在有序列表中還可以使用reversed屬性使編號倒敘排列。二、HTML5文檔及其基本語法【例1-7】有序列表<!DOCTYPE

html><html

lang="en"><head>

<meta

charset="UTF-8">

</ol>

<ol

type="a"

start="5">

</ol></body></html>二、HTML5文檔及其基本語法列表的嵌套列表還可以嵌套使用來展示多層次內(nèi)容。嵌套列表可以是無序列表的嵌套，也可以是有序列表的嵌套，還可以是有序列表和無序列表的混合嵌套。【例1-8】列表嵌套<!DOCTYPE

html><html

lang="en"><head>

<meta

charset="UTF-8">

二、HTML5文檔及其基本語法

<ol>

<li>流行

<ol

start="101">

</ol>

</li>

<li>電子

<ol

start="201">

</ol>

</li>

</ol></body></html>二、HTML5文檔及其基本語法自定義列表dl自定義列表(Definition

List)，它的每一項前既沒有項目符號，也沒有編號，它是通過縮進(jìn)的形式清晰展示內(nèi)容的層次結(jié)構(gòu)，其語法格式如下：<dl> <dt>列表標(biāo)題1</dt> <dd>列表內(nèi)容</dd> <dd>列表內(nèi)容</dd> …… <dt>列表標(biāo)題2</dt> <dd>列表內(nèi)容</dd> <dd>列表內(nèi)容</dd> ……</dl>其中：<dl></dl>標(biāo)記用來創(chuàng)建定義列表。<dt></dt>標(biāo)記用來定義列表標(biāo)題，內(nèi)容將左對齊。<dd></dd>標(biāo)記用來定義列表中的內(nèi)容，<dd></dd>標(biāo)記的內(nèi)容將相對于<dt></dt>標(biāo)記定義的內(nèi)容向右縮進(jìn)。二、HTML5文檔及其基本語法【例1-9】列表嵌套<!DOCTYPE

html><html

lang="en"><head>

<meta

charset="UTF-8">

<title>自定義列表</title></head><body>

<h1>中國小說top3</h1>

<dl>

<dd>《紅樓夢》是一部百科全書式的長篇小說。以寶黛愛情悲劇為主線，以四大家族的榮辱興衰為背景，描繪出18世紀(jì)中國封建社會的方方面面，以及封建專制下新興資本主義民主思想的萌動。結(jié)構(gòu)宏大，情節(jié)委婉，細(xì)節(jié)精致，人物形象栩栩如生，聲口畢現(xiàn)，堪稱中國古代小說中的經(jīng)典。</dd>

<dd>滾滾長江東逝水，浪花淘盡英雄。呂布趙云關(guān)羽，官渡赤壁街亭，斬華雄空城計長坂坡七擒七縱，一看三嘆，三國風(fēng)云起，幾度夕陽紅。該小說展現(xiàn)了歷史上一個豪強(qiáng)們?yōu)榫鹑∽罡呓y(tǒng)治權(quán)而進(jìn)行的政治斗爭和頻繁混戰(zhàn)的動亂時代，展示了魏、蜀、吳縱橫捭闔、逐鹿?fàn)幮鄣臍v史畫卷！</dd>

<dd>《西游記》的藝術(shù)虛構(gòu)是建立在傳統(tǒng)藝術(shù)經(jīng)驗和社會的宗教性觀念與風(fēng)習(xí)的基礎(chǔ)之上的，但它又以作者融會了傳統(tǒng)藝術(shù)經(jīng)驗所形成的藝術(shù)的獨(dú)創(chuàng)性批判了社會的宗教性觀念，或更正確地說，和社會的宗教性觀念開了玩笑，進(jìn)行了嘲弄。這正是這部演述超人間故事的神魔小說最突出、最優(yōu)異的品質(zhì)，也是它的藝術(shù)價值和魅力的最根本的所在。</dd>

</dl></body></html>二、HTML5文檔及其基本語法HTML超鏈接標(biāo)記超鏈接標(biāo)記及其屬性在制作網(wǎng)站時會使用到超鏈接實現(xiàn)頁面之間的跳轉(zhuǎn)，在HTML中使用<a></a>標(biāo)記添加超鏈接，其語法格式如下：<ahref=”鏈接目標(biāo)”target=”打開鏈接窗口的形式”>鏈接文本</a>其中：href：指定鏈接目標(biāo)url地址target：指定鏈接頁面的打開方式，其屬性值有4種。

_blank為在新窗口中打開，

_self為在自身窗口中打開(默認(rèn)值)，

_parent為在上一級窗口中打開，

_top為在本窗口中打開。注意：URL指的是統(tǒng)一資源定位符（UniformResourceLocator），是因特網(wǎng)的萬維網(wǎng)服務(wù)程序上用于指定信息位置的表示方法，俗稱網(wǎng)址。URL一般由協(xié)議、域名或IP地址、端口、路徑及文件名組成，如圖1.30所示。二、HTML5文檔及其基本語法URL可分為兩類，絕對路徑和相對路徑。絕對路徑：帶域名的文件的完整路徑。一般從盤符開始，例如：D:\proc1\images\pic1.png。相對路徑：相對于當(dāng)前文檔的路徑。在HTML文檔中，通常是以當(dāng)前HTML文檔為起點(diǎn)，描述其他資源的相對位置。當(dāng)目標(biāo)文件與當(dāng)前文件在同一文件夾中時，寫作"./文件名.后綴名"當(dāng)目標(biāo)文件在當(dāng)前文件上一級文件夾中時，寫作"../文件名.后綴名"當(dāng)目標(biāo)文件在當(dāng)前文件下一級文件夾中時，寫作"文件夾名/文件名.后綴名"注意：在相對路徑中有兩種相似的符號：‘./’、‘../’。其中“./”表示當(dāng)前目錄，可省略不寫；“../”表示上級目錄，即上一級文件夾，這里需要區(qū)分。二、HTML5文檔及其基本語法【例1-10】使用超鏈接標(biāo)記<!DOCTYPE

html><html

lang="en"><head>

<meta

charset="UTF-8">

<body>

<p>

href="/"

target="_blank">CSDN</a>

href="/html/index.asp">w3school</a>

</p>

</body></html>二、HTML5文檔及其基本語法錨點(diǎn)鏈接典型的網(wǎng)站布局大多使用超鏈接實現(xiàn)站點(diǎn)內(nèi)外頁面的跳轉(zhuǎn)，在極簡風(fēng)格網(wǎng)站中，經(jīng)常使用錨點(diǎn)鏈接實現(xiàn)頁面內(nèi)的跳轉(zhuǎn)。使用錨點(diǎn)鏈接指向同一頁面中內(nèi)容，實現(xiàn)方法分為兩步：創(chuàng)建錨點(diǎn)：在鏈接目標(biāo)位置定義其id屬性<aid=”錨點(diǎn)名稱”>顯示內(nèi)容</a>鏈接錨點(diǎn)：定義超鏈接屬性href="#id名"<ahref=”#錨點(diǎn)名稱”>顯示內(nèi)容</a>二、HTML5文檔及其基本語法圖像標(biāo)記網(wǎng)頁中常見的圖像格式一個成功的網(wǎng)頁中必然少不了豐富的圖像，圖像在網(wǎng)頁中不僅可以美化頁面，也是對文字重要的補(bǔ)充與說明。由于網(wǎng)絡(luò)的傳輸特性，網(wǎng)頁中的圖像需要具有載入速度快、圖像質(zhì)量高的特點(diǎn)。根據(jù)這樣的特點(diǎn)，網(wǎng)頁中常用的圖像格式有JPG、GIF和PNG三種。1、JPG格式JPG格式是一種最為常見的圖像文件格式，支持8位和24位色彩的壓縮位圖格式，顯示的顏色比GIF和PNG多，可以用來保存超過256種顏色的圖像，但JPG是一種有損壓縮格式。這就意味著每修改一次圖片都會用有損壓縮的方式去除冗余的圖像和顏色數(shù)據(jù)。JPG是特別為照片設(shè)計的文件格式，它的特點(diǎn)是文件尺寸小，下載速度快，同時支持多種瀏覽器，因此是目前網(wǎng)絡(luò)上最流行的圖像格式。二、HTML5文檔及其基本語法2、GIF格式GIF最突出的特點(diǎn)是支持動畫，且支持透明格式。它的壓縮率一般在50%左右，所占空間非常小，但GIF只能處理256種顏色，對復(fù)雜的顏色不能達(dá)到很好地表現(xiàn)效果，因此GIF格式常用于LOGO、小圖標(biāo)及其他相對單一的圖像。3、PNG格式PNG是一種高保真的圖像格式，可以用無損壓縮的方式把圖像文件壓縮到最小，同時支持alpha透明，并且顏色過渡更光滑，但PNG不支持動畫效果。鑒于PNG兼有GIF和JPG格式的大部分優(yōu)點(diǎn)，它既利于圖像傳播，又能保證圖片的高品質(zhì)。由以上常用的網(wǎng)絡(luò)圖像格式的特點(diǎn)可知，在網(wǎng)頁中小圖片或網(wǎng)頁基本元素如圖標(biāo)、按鈕等通常使用GIF或PNG-8格式，半透明圖片使用PNG-24格式，類似照片的圖像，如滾動顯示的圖片、網(wǎng)頁頭部圖片等，則使用JPG格式。二、HTML5文檔及其基本語法圖像標(biāo)記<img>及其基本屬性使用圖像標(biāo)記<img>可以在網(wǎng)頁中添加圖片，其基本語法格式如下：<imgsrc="url地址"/>其中，src屬性用來定義圖像文件的路徑和文件名。除此之外，圖像標(biāo)記還有其他常用屬性，具體如下：1、width屬性和height屬性。width：指定圖像的寬height：指定圖像的高圖像的寬、高屬性值，單位可以使像素（px），也可以是百分比（%）。不設(shè)置width和和height時，圖片在瀏覽器中顯示大小等于原圖；只設(shè)置width或height時，圖片會通過按比例縮放來決定沒有設(shè)置的width或height的值；同時設(shè)置width和height時，圖片會縮放到剛好等于設(shè)置的寬度和高度，圖片中的內(nèi)容會完整顯示，圖片可能變形（沒有按比例縮放的時候）。二、HTML5文檔及其基本語法2、title屬性和alt屬性title：指定鼠標(biāo)懸停在圖片上時顯示的文字alt：指定圖片無法顯示時的替代文字3、ismap屬性ismap屬性用來將圖像規(guī)定為服務(wù)器端圖像映射。設(shè)置了ismap屬性之后，當(dāng)用戶在ismap圖像上單擊時，瀏覽器會自動把鼠標(biāo)的x、y位置（相對于圖像的左上角）發(fā)送到服務(wù)器端。注意：只有當(dāng)

<img>

元素屬于帶有有效

href

屬性的

<a>

元素的后代元素時，才允許ismap屬性。ismap屬性將圖像定義為“服務(wù)器端圖像映射”?！皥D像映射”指的是帶有可點(diǎn)擊區(qū)域的圖像。二、HTML5文檔及其基本語法【例1-12】使用圖片標(biāo)記<!DOCTYPEhtml><htmllang="en"><head>

<metacharset="UTF-8">

<title>使用圖片標(biāo)記</title></head><body>

<ahref="#"><imgsrc="images/watermelon.jpg"title="西瓜"alt="水果功效"width="500"ismap></a>

<h2>西瓜的營養(yǎng)價值：</h2>

<p>西瓜堪稱“盛夏之王”，清爽解渴，味道甘味多汁，是盛夏佳果。

西瓜除不含脂肪和膽固醇外，含有大量葡萄糖、蘋果酸、果糖、

蛋白氨基酸、番茄素及豐富的維生素C等物質(zhì)，是一種富含很高

的營養(yǎng)、純凈、食用安全的食品。瓤肉含糖量一般為5%~12%，包括

葡萄糖、果糖和蔗糖。甜度隨成熟后期蔗糖的增加而增加。</p></body></html>二、HTML5文檔及其基本語法總結(jié)提升PART04HTML5新增標(biāo)簽為了更好地處理今天的互聯(lián)網(wǎng)應(yīng)用，HTML5提供了新的元素來創(chuàng)建更好的頁面結(jié)構(gòu)。這里將介紹HTML5新增的結(jié)構(gòu)元素、分組元素、頁面交互元素。

在HTML5出現(xiàn)以前，HTML布局所使用的標(biāo)簽存在文檔定義不明確的問題，需要使用HTML+CSS文檔結(jié)構(gòu)寫法來布局頁面，同時也不利于SEO搜索引擎對頁面內(nèi)容的抓取。在HTML5中新增了語義化標(biāo)簽來布局頁面。一、結(jié)構(gòu)元素HTML5語義化標(biāo)簽如下：header：

頭部標(biāo)簽，用來定義頁面的頁眉，可以包含標(biāo)題等元素，如logo、搜索表單等；nav：導(dǎo)航標(biāo)簽，頁面鏈接的集合。article

：內(nèi)容標(biāo)簽。用來定義一個獨(dú)立的、完整的相關(guān)內(nèi)容塊，可獨(dú)立于頁面其它內(nèi)容使用。例如一篇完整的論壇帖子，一篇博客文章，一個用戶評論等等。article可以嵌套，例如一篇博客的文章，可以用article顯示，然后一些評論可以以article的形式嵌入其中。section

：塊級標(biāo)簽，表示文檔中的一個區(qū)域，比如內(nèi)容中的一個專題組。aside：側(cè)邊欄標(biāo)簽，與一個和其余頁面內(nèi)容幾乎無關(guān)的部分，被認(rèn)為是獨(dú)立于該內(nèi)容的一部分并且可以被單獨(dú)的拆分出來而不會使整體受影響。其通常表現(xiàn)為側(cè)邊欄或者嵌入內(nèi)容。footer：尾部標(biāo)簽，

定義了頁面的頁腳，通常包含原創(chuàng)作者，版權(quán)信息，聯(lián)系方式和站點(diǎn)地圖,文檔相關(guān)的鏈接等信息。一、結(jié)構(gòu)元素figure元素和figcaption元素在HTML5中，可以使用<figure>標(biāo)簽標(biāo)記文檔中的一個圖像。<figure>標(biāo)簽帶有一個標(biāo)題，使用<figcaption>標(biāo)簽可以添加圖像的題注。其語法格式如下:

<img

src="圖片地址">

</figure>

二、分組元素【例1-13】圖片與題注<!DOCTYPE

html><html

lang="en"><head>

<meta

charset="UTF-8">

<title>圖片與題注</title></head><body>

<img

src="images/sywzz.jpg">

<figcaption>三亞蜈支洲島電影取景地</figcaption>

</figure>

</body></html>二、分組元素2、hgroup元素在HTML5中，可以使用hgroup>元素對網(wǎng)頁或區(qū)段（section）的標(biāo)題進(jìn)行組合。其語法格式如下：<hgroup><hn>標(biāo)題1</hn><hn>標(biāo)題2</hn>……</hgroup>二、分組元素【例1-14】hgroup標(biāo)題組<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>hgroup元素</title></head><body><hgroup><h3>《詩經(jīng)》</h3><h1>周南·桃夭</h1><h5>作者：佚名</h5></hgroup><p>

桃之夭夭，灼灼其華。之子于歸，宜其室家。<br/>

桃之夭夭，有蕡其實。之子于歸，宜其家室。<br/>

桃之夭夭，其葉蓁蓁。之子于歸，宜其家人。</p></body></html>二、分組元素1、details元素和summary元素details元素用于描述文檔或者文檔某個部分的細(xì)節(jié)。summary元素經(jīng)常與details元素配合使用，作為details元素的第一個子元素，用于為details定義標(biāo)題。標(biāo)題是可見的，當(dāng)用戶單擊標(biāo)題時，會顯示或隱藏details中的其他內(nèi)容。其語法格式如下：<details><summary>文檔簡介</summary><p>文檔內(nèi)容</p></details>三、頁面交互元素【例1-15】使用details元素和summary元素<!DOCTYPE

html><html

lang="en"><head>

<meta

charset="UTF-8">

<title>使用details元素</title></head><body>

<summary>HTML頁面交互元素</summary>

<ul>

<li>details元素和summary元素</li>

<li>progress元素</li>

<li>meter元素</li>

</ul>

</details></body></html>三、頁面交互元素2、progress元素progress元素用于表示一個任務(wù)的完成進(jìn)度?？梢杂?到某個最大數(shù)字（如100）之間的數(shù)字來表示準(zhǔn)確的進(jìn)度完成情況。其語法格式如下：<progress

value="當(dāng)前值"

max="最大值"></progress>其中：value：已經(jīng)完成的工作量。max：總共有多少工作量。注意：value和max屬性的值必須大于0，且value的值要小于或等于max屬性的值。三、頁面交互元素【例1-16】使用progress元素<!DOCTYPE

html><html

lang="en"><head>

<meta

charset="UTF-8">

<title>使用progress元素</title></head><body>

<progress

value="70"

max="100"></progress></body></html>三、頁面交互元素3、meter元素meter元素用于表示指定范圍內(nèi)的數(shù)值。例如，顯示硬盤容量或者對某個候選者的投票人數(shù)占投票總?cè)藬?shù)的比例等，都可以使用meter元素。Meter元素是雙標(biāo)記，其語法格式如下：<metervalue=""min=""max=""high=""low=""title=""optimum=""></meter>其中：value：定義度量的值max：定義最大值，默認(rèn)值是1min：定義最小值，默認(rèn)值是0high：說明定義度量的值位于那個點(diǎn)被界定為高的值low：定義度量的值位于哪個點(diǎn)被界定為低的值optimum：定義什么樣的度量值是最佳的值。如果該值高于high屬性，則意味著值越高越好。如果該值低于low屬性的值，則意味著值越低越好。三、頁面交互元素【例1-17】使用meter元素<!DOCTYPE

html><html

lang="en"><head>

<meta

charset="UTF-8">

<title>使用meter元素</title></head><body>

<p>

張三：<meter

value="80"

min="0"

max="100"

low="60"

high="80"

title="65票"

optimum="100">65</meter><br>

李四：<meter

value="73"

min="0"

max="100"

low="60"

high="80"

title="80票"

optimum="100">80</meter><br>

王五：<meter

value="40"

min="0"

max="100"

low="60"

high="80"

title="75票"

optimum="100">75</meter>

</p></body></html>三、頁面交互元素HTML5+CSS3+JavaScript網(wǎng)頁設(shè)計與制作項目教程項目2認(rèn)識CSS3——美化網(wǎng)頁目錄ENTERPRISEOPERATIONREPORT04.總結(jié)提升03.知識鏈接02.學(xué)習(xí)目標(biāo)01.項目導(dǎo)入05.拓展訓(xùn)練項目導(dǎo)入PART01項目導(dǎo)入“旅行家——聯(lián)系方式”頁面效果展示在進(jìn)行網(wǎng)頁頁面實現(xiàn)時，CSS3技術(shù)能夠讓原有的網(wǎng)站變得生動美觀，文字錯落有致。本章我們將使用HTML+CSS3制作“旅行家-聯(lián)系方式”頁面。學(xué)習(xí)目標(biāo)PART0202知識目標(biāo)能力目標(biāo)1、了解CSS3的發(fā)展歷史及主流瀏覽器的支持情況2、掌握CSS選擇器，能夠運(yùn)用CSS選擇器選擇頁面元素3、熟悉CSS文本樣式屬性，能夠運(yùn)用相應(yīng)的屬性定義文本樣式4、理解CSS優(yōu)先級，能夠區(qū)分復(fù)合選擇器權(quán)重的大小5、掌握CSS3新增的屬性選擇器6、理解關(guān)系選擇器的用法，能夠準(zhǔn)確判斷元素與元素之間的關(guān)系7、掌握常用的結(jié)構(gòu)化偽類選擇器、偽元素選擇器、CSS偽類等實現(xiàn)頁面的不同效果。1、能夠熟練運(yùn)用CSS3屬性選擇器為頁面中的元素添加樣式2、能夠靈活運(yùn)用CSS美化網(wǎng)頁02知識鏈接PART0303一、CSS3簡介CSS概述CSS(CascadingStyleSheets)通常稱為CSS樣式表或?qū)盈B樣式表（級聯(lián)樣式表），它以HTML為基礎(chǔ)，提供了豐富的功能，如字體、顏色、背景的控制及整體排版等，而且還可以針對不同的瀏覽器設(shè)置不同的樣式。如下圖，文字的顏色、大小、圖片間的間距等都是通過CSS來控制的。032.CSS歷史大事記20世紀(jì)90年代初，HTML語言誕生，各種形式的樣式表也隨之出現(xiàn)。但隨著HTML功能的增加，外來定義樣式的語言變得越來越?jīng)]有意義了。1994年，HkonWiumLie最初提出了CSS的想法，聯(lián)合當(dāng)時正在設(shè)計Argo的瀏覽器的BertBos，他們決定一起合作設(shè)計CSS，于是創(chuàng)造了CSS的最初版本。CSS發(fā)展至今出現(xiàn)了4個版本。一、CSS3簡介03一、CSS3簡介CSS11996年12月，W3C推出了CSS規(guī)范的第一版本。1997年，W3C頒布CSS1.0版本，CSS1.0較全面地規(guī)定了文檔的顯示樣式，可分為選擇器、樣式屬性、偽類/對象幾個部分。CSS21998年，W3C發(fā)布了CSS的第二個版本，目前的主流瀏覽器都采用這標(biāo)準(zhǔn)。CSS2的規(guī)范是基于CSS1設(shè)計的，包含了CSS1所有的功能，并擴(kuò)充和改進(jìn)了很多更加強(qiáng)大的屬性。包括選擇器、位置模型、布局、表格樣式、媒體類型、偽類、光標(biāo)樣式。CSS2.12004年2月，CSS2.1正式推出。它在CSS2的基礎(chǔ)上略微做了改動，刪除了許多不被瀏覽器支持的屬性。CSS32005年12月，W3C開始CSS3標(biāo)準(zhǔn)的制定，到目前為止該標(biāo)準(zhǔn)還沒有最終定稿。但是各主流瀏覽器已經(jīng)開始支持其中的絕大部分特性。3.CSS3瀏覽器支持情況CSS3給我們帶來眾多全新的設(shè)計體驗，但并不是所有的瀏覽器都完全支持它。各主流瀏覽器對CSS3模塊的支持情況如下。一、CSS3簡介CSS3模塊Chrome4Safari4Firefox3.6Opera10.5IE10RGBA?????HSLA?????MultipleBackground?????BorderImage?????BorderRadius?????BoxShadow?????Opacity?????CSSAnimations?????CSSColumns?????CSSGradients?????CSSReflections?????CSSTransforms?????CSSTransforms3D?????CSSTransitions?????CSSFontFace?????03各個瀏覽器廠商對CSS3各屬性的支持程度不一樣，因此在標(biāo)準(zhǔn)尚未明確的情況下，會用廠商的前綴加以區(qū)分，通常把這些加上私有前綴的屬性稱之為“私有屬性”。各主流瀏覽器都定義的自己的私有屬性，以便讓用戶更好的體驗CSS3的新特性！一、CSS3簡介內(nèi)核類型瀏覽器私有前綴TridentIE8/IE9/IE10-msWebkit谷歌（Chrome）/Safari-webkitGecko火狐（Firefox）-mozBlinkOpera-o當(dāng)運(yùn)用CSS3私有屬性時，先寫私有的CSS3屬性，再寫標(biāo)準(zhǔn)的CSS3屬性。當(dāng)一個屬性成為標(biāo)準(zhǔn)，并且被Firefox、Chrome等瀏覽器的最新版普遍兼容的時候，我們就可以去掉該屬性的CSS3前綴了。031、CSS樣式規(guī)則（1）CSS語法格式：CSS(Cascading

Style

Sheet)層疊樣式表，它是用來美化頁面的一種語言，即上面提到的W3C規(guī)范中的“樣式”?？梢悦阑缑?，也可以做頁面布局。CSS的樣式規(guī)則，具體結(jié)構(gòu)如下：選擇器{屬性1:屬性值1；屬性2:屬性值2；屬性3:屬性值3；}例子：二、CSS核心基礎(chǔ)03選擇器用于指定CSS樣式作用的HTML對象。花括號內(nèi)是對該對象設(shè)置的其體樣式；屬性和屬性值以“鍵值對”的形式出現(xiàn)；屬性是對指定的對象設(shè)置的樣式屬性，例如字體大小、文本顏色等，屬性和屬性值之間用英文”:”連接；多個“鍵值對”之間用英文”;”進(jìn)行區(qū)分。二、CSS核心基礎(chǔ)CSS語法格式說明：03在書寫CSS樣式時候，除了要遵循CSS樣式規(guī)則，還必須注意CSS代碼結(jié)構(gòu)中的幾個特點(diǎn)：CSS樣式中的選擇器要嚴(yán)格區(qū)分大小寫，而聲明不區(qū)分大小寫，按照書寫習(xí)慣一般將選擇器、聲明都采用小寫的方式。多個屬性之間必須用英文狀態(tài)下的分號隔開，最后一個屬性后的分號可以省略但是為了便于增加新樣式最好保留。如果屬性的屬性值由多個單詞組成且中間包含空格，則必須為這個屬性值加上英文狀態(tài)下的引號。例如:p{font-family:“TimesNewRoman"；}二、CSS核心基礎(chǔ)031、CSS樣式規(guī)則（2）CSS注釋語句在編寫CSS代碼時，為了提高代碼的可讀性，可使用注釋語句進(jìn)行注釋，其語法格式如下“/*注釋語句*/”例如：p{font-family:“TimesNewRoman"}/*注釋語句不會顯示在瀏覽器窗口中*/二、CSS核心基礎(chǔ)032、引入CSS樣式表CSS用于修飾網(wǎng)頁樣式，但是，如果希望CSS修飾的樣式起作用，就必須在html檔中引入CSS樣式表。引入樣式表的常用方式有三種：行內(nèi)式內(nèi)嵌式外鏈?zhǔn)蕉?、CSS核心基礎(chǔ)03（1）行內(nèi)式行內(nèi)式也稱內(nèi)聯(lián)樣式，是通過標(biāo)記的style屬性來設(shè)置標(biāo)記的樣式，其基本語法格式如下：<標(biāo)記名style=”屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;">內(nèi)容</標(biāo)記名>style是標(biāo)記的屬性，用來設(shè)置行內(nèi)式。屬性和屬性值的書寫規(guī)范與CSS樣式規(guī)則一樣，行內(nèi)式只對其所在的標(biāo)記及嵌套在其中的子標(biāo)記起作用。通常CSS的書寫位置是在<head>頭部標(biāo)記中，行內(nèi)式卻是寫在<html>根標(biāo)記中。單擊查看【案例2-1】二、CSS核心基礎(chǔ)03案例：【例2-1】使用行內(nèi)式添加CSS樣式在上述代碼中，使用<h1>標(biāo)記的style屬性設(shè)置行內(nèi)式CSS樣式，用來修飾一級標(biāo)題的字體大小和顏色。效果如圖所示。二、CSS核心基礎(chǔ)<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>使用行內(nèi)式引入CSS樣式</title></head><body><h1style="font-size:30px;color:red;">使用CSS行內(nèi)式修飾一級標(biāo)題的字體大小和顏色</h1></body></html>提醒：行內(nèi)式是通過標(biāo)記的屬性來控制樣式的，并沒有做到結(jié)構(gòu)與樣式分離，所以一般很少使用。03（2）內(nèi)嵌式內(nèi)嵌式是將CSS代碼集中寫在HTML文檔的<head>頭部標(biāo)記中，并且用<style>標(biāo)記定義，其基本語法格式如下：上述語法中，<style>標(biāo)記一般位于<head>標(biāo)記中title標(biāo)記之后，也可以把它放在HTML文檔的任何地方。把CSS代碼放在頭部有利于提前下載和解析，可以避免網(wǎng)頁內(nèi)容下載后沒有樣式修飾帶來的尷尬。除此之外，必須設(shè)置type的屬性值為“text/css”，這樣瀏覽器才知道<style>標(biāo)記包含的是CSS代碼。單擊查看【案例2-2】二、CSS核心基礎(chǔ)<head><styletype="text/css">

選擇器{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;}</style></head>03案例：【例2-2】使用內(nèi)嵌式引入CSS樣式二、CSS核心基礎(chǔ)<!DOCTYPE

html><html><head>

<meta

charset="utf-8">

<title>內(nèi)嵌樣式表案例演示</title>

<style

type="text/css">

{

text-align:

center;

}

{

font-size:

20px;

color:

#f00;

text-decoration:

underline;

}

</style></head><body>

<p>內(nèi)嵌樣式表一般將CSS代碼集中在head頭部標(biāo)記中。</p></body></html>03（3）外鏈?zhǔn)酵怄準(zhǔn)绞菍⑺械臉邮椒旁谝粋€或多個以“.css”為擴(kuò)展名的外部樣式表文件中，通過<link/>標(biāo)記將外部樣式表文件鏈接到HTML文檔中，其基本語法格式如下:<link>標(biāo)記需要放在<head>頭部標(biāo)記中，并且必須指定<link/>標(biāo)記的三個屬性:href：定義所鏈接外部樣式表文件的URL，可以是相對路徑，也可以是絕對路徑。type：定義所鏈接文檔的類型，在這里需要指定為“text/css”，表示鏈接的外部文件為CSS樣式表。rel：定義當(dāng)前文檔與被鏈接文檔之間的關(guān)系，在這里需要指定為“stylesheet”，表示被鏈接的文檔是一個樣式表文件。單擊查看【案例2-3】二、CSS核心基礎(chǔ)<head><1inkhref="css文件的路徑"type="text/css"rel="stylesheet"/></head>03案例：【例2-3】通過外鏈?zhǔn)揭隒SS樣式表外鏈?zhǔn)绞鞘褂妙l率最高是最實用的CSS樣式表，因為它將HTML代碼與CSS代碼分離為兩個或多個文件，實現(xiàn)了將結(jié)構(gòu)和樣式完全分離，使得網(wǎng)頁的前期制作和后期維護(hù)都十分方便。二、CSS核心基礎(chǔ)<!DOCTYPE

html><html><head>

<meta

charset="utf-8">

<title>使用內(nèi)嵌式引入CSS樣式</title>

<link

href="wls.css"

type="text/css"

rel="stylesheet"/></head><body>

<h2>外鏈樣式表</h2>

<p>通過link標(biāo)記將擴(kuò)展名為.CSS的外部樣式表文件鏈接到html文檔中來。

</p></body></html>h2

{

text-align:

center;}

{

font-size:

20px;

color:

#00f;

text-decoration:

underline;}03樣式表的三種引入方式的優(yōu)缺點(diǎn)及使用情況進(jìn)行總結(jié):二、CSS核心基礎(chǔ)樣式表優(yōu)點(diǎn)缺點(diǎn)使用情況控制范圍行內(nèi)式書寫方便，權(quán)重高沒有實現(xiàn)樣式和結(jié)構(gòu)相分離較少控制一個標(biāo)簽（少）內(nèi)嵌式部分結(jié)構(gòu)和樣式相分離沒有徹底分離較多控制一個頁面（中）外鏈?zhǔn)酵耆珜崿F(xiàn)結(jié)構(gòu)和樣式相分離需要引入最多，強(qiáng)烈推薦控制整個站點(diǎn)（多）033、CSS基礎(chǔ)選擇器要想將CSS樣式應(yīng)用于特定的HTML元素，首先需要找到該目標(biāo)元素。在CSS中，執(zhí)行這一任務(wù)的樣式規(guī)則部分被稱為選擇器（選擇符）。（1）標(biāo)簽選擇器（2）類選擇器（3）id選擇器（4）通配符選擇器（5）交集選擇器（6）并集選擇器（7）后代選擇器二、CSS核心基礎(chǔ)03（1）標(biāo)簽選擇器一個完整的HTML頁面是由很多不同的標(biāo)簽組成。標(biāo)簽選擇器是指用HTML標(biāo)簽名稱作為選擇器，按標(biāo)簽名稱分類，為頁面中某一類標(biāo)簽指定統(tǒng)一的CSS樣式。其基本格式如下：標(biāo)簽名{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;}如果設(shè)置HTML的樣式，選擇器通常將是某個HTML元素，比如p、h1、em、a，甚至可以是html本身。例如：以上CSS代碼會對整個文檔添加黑色背景；將所有p元素字體大小設(shè)置為30像素同時添加灰色背景；對文檔中所有h2元素添加紅色背景。二、CSS核心基礎(chǔ)html{background-color:black;}p{font-size:30px;background-color:gray;}h2{background-color:red;}

標(biāo)簽選擇器最大的優(yōu)點(diǎn)是能快速為頁面中同類型的標(biāo)簽統(tǒng)一樣式，同時這也是他的缺點(diǎn)，不能設(shè)計差異化樣式。03（2）類選擇器類選擇器使用“.”符號開頭，后面跟上一個自定義的名稱，在使用時候，以HTML標(biāo)簽的class屬性來標(biāo)記，其基本語法格式如下：.類名{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;}在該語法中，類名即為HTML元素的class屬性值，大多數(shù)HTML元素都可以定義class屬性。同一個class名可應(yīng)用在多個HTML標(biāo)簽上，在調(diào)用完“.text”樣式后，<p><h1>字體均變?yōu)?0px。二、CSS核心基礎(chǔ)<pclass="text">示例一</p><h1class="text">示例二</h1>類選擇器最大的優(yōu)勢是可以為元素對象定義單獨(dú)或相同的樣式。.text{font-size:10px;}03（2）類選擇器類選擇器也可以結(jié)合元素選擇器使用，如：p.text{color:blue;}//注意p與.與text間不能有空格該樣式只將<p>顏色變?yōu)樗{(lán)色。一個元素也可以有多個類選擇器，如下所示：<pclass="texttext2"></p>需要主要的是，類名的第一個字符不能使用數(shù)字，并且要嚴(yán)格區(qū)分大小寫，一般采用小寫的英文字符。二、CSS核心基礎(chǔ)03（3）id選擇器

id選擇器使用“#”進(jìn)行標(biāo)識，后面緊跟id名，其基本語法格式如下：#id名{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;}類似于類選擇器，有一定區(qū)別：同一個名字的id選擇器在同一個HTML文檔中，只能使用一次；一個元素只能有一個id選擇器查看【案例2-4】二、CSS核心基礎(chǔ)03案例：【例2-4】使用CSS選擇器二、CSS核心基礎(chǔ)<!DOCTYPEhtml><html>

<head><metacharset="utf-8"><title>使用內(nèi)嵌式引入CSS樣式</title><styletype="text/css">p{font-family:'宋體';}

.font1{color:green;}

#font2{text-decoration:underline;}</style></head>

<body><p>使用標(biāo)簽選擇器</p><h2class="font1">使用類選擇器</h2><pclass="font1">使用類選擇器</p><h2id="font2">使用id選擇器</h2></body>

</html>03（4）通配符選擇器通配符選擇器用“*”號表示，它是所有選擇器中作用范圍最廣的，能匹配頁面中所有的元素。其基本語法格式如下：{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;}例如下面的代碼，使用通配符選擇器定義CSS樣式，清除所有HTML標(biāo)記的默認(rèn)邊距。注意：在實際網(wǎng)頁開發(fā)中并不建議使用通配符選擇器，因為它設(shè)置的樣式對所有的HTML標(biāo)記都生效，不管標(biāo)記是否需要該樣式，這樣反而降低了代碼的執(zhí)行速度。二、CSS核心基礎(chǔ)*{margin:0;/*定義外邊距*/padding:0;/*定義內(nèi)邊距*/}03（5）交集選擇器交集選擇器一般由兩個選擇器構(gòu)成，其中第一個為標(biāo)記選擇器，第二個為class選擇器或id選擇器，兩個選擇器之間不能有空格，如h3.special或p#one。二、CSS核心基礎(chǔ)查看【案例2-5】03案例：【例2-5】使用交集選擇器二、CSS核心基礎(chǔ)<!DOCTYPEhtml><html>

<head><metacharset="utf-8"><title>標(biāo)簽指定式選擇器</title><styletype="text/css">p{font-size:14px;}

.special{color:blue;}

p.special{color:red;}

p#fold{font-weight:bold;color:green;}</style></head>

<body><p>普通段落（12px）</p><pclass="special">指定了.special類的段落文本（紅色）</p><pid="fold">指定了#fold的段落文本（加粗綠色）</p><h2>二級標(biāo)題文本</h2><h2class="special">指定了.special類的二級標(biāo)題文本（藍(lán)色）</h2></body></html>例3-5中除了定義<p>和<special>標(biāo)記外，還單獨(dú)定義了p.special和p#fold，用于特殊的控制。03（6）并集選擇器并集選擇器是各個選擇器通過逗號連接而成的，任何形式的選擇器都可以作為并集選擇器的一部分。若某些選擇器定義的樣式完全或部分相同，可利用并集選擇器為它們定義相同的樣式。二、CSS核心基礎(chǔ)查看【案例2-6】03案例：【例2-6】使用并集選擇器二、CSS核心基礎(chǔ)<!DOCTYPE

html><html>

<head>

<meta

charset="utf-8">

<title>并集選擇器</title>

<style

type="text/css">

h2,

h3,

{

font-size:

20px;

}

/*不同標(biāo)記組成的并集選擇器*/

h3,

.special,

#one

{

text-decoration:

underline;

color:

red;

}

/*標(biāo)記、類、id組成的并集選擇器*/

</style></head>

<body>

<h3>唐

李白</h3>

<p>眾鳥高飛盡,</p>

class="special">相看兩不厭，</p>

id="one">只有敬亭山。</p></body>

</html>03（7）后代選擇器后代選擇器用來選擇元素或元素組的后代，其寫法就是把外層標(biāo)記寫在前面，內(nèi)層標(biāo)記寫在后面，中間用空格分隔。當(dāng)標(biāo)記發(fā)生嵌套時，內(nèi)層標(biāo)記就成為外層標(biāo)記的后代。二、CSS核心基礎(chǔ)查看【案例2-7】03案例：【例2-7】使用后代選擇器二、CSS核心基礎(chǔ)<!DOCTYPE

html><html>

<head>

<meta

charset="utf-8">

<title>后代選擇器</title>

<style

type="text/css">

strong

{

color:

red;

font-weight:

700;

}

/*后代選擇器*/

strong

{

font-style:

italic;

人人文庫> 全部分類> 教育資料 > 課件下載

溫馨提示

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)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

HTML5+CSS3+JavaScript網(wǎng)頁設(shè)計與制作項目教程PPT完整全套教學(xué)課件

文檔簡介

溫馨提示

最新文檔

評論

相關(guān)文檔