Web前端開(kāi)發(fā) 課件全套 朱鐵櫻 第1-13章 Web開(kāi)發(fā)基礎(chǔ) - JavaScript進(jìn)階_第1頁(yè)
Web前端開(kāi)發(fā) 課件全套 朱鐵櫻 第1-13章 Web開(kāi)發(fā)基礎(chǔ) - JavaScript進(jìn)階_第2頁(yè)
Web前端開(kāi)發(fā) 課件全套 朱鐵櫻 第1-13章 Web開(kāi)發(fā)基礎(chǔ) - JavaScript進(jìn)階_第3頁(yè)
Web前端開(kāi)發(fā) 課件全套 朱鐵櫻 第1-13章 Web開(kāi)發(fā)基礎(chǔ) - JavaScript進(jìn)階_第4頁(yè)
Web前端開(kāi)發(fā) 課件全套 朱鐵櫻 第1-13章 Web開(kāi)發(fā)基礎(chǔ) - JavaScript進(jìn)階_第5頁(yè)
已閱讀5頁(yè)，還剩423頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

使用HTML5創(chuàng)建網(wǎng)頁(yè)使用CSS美化網(wǎng)頁(yè)用JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)交互第01章HTML基本語(yǔ)法《Web前端開(kāi)發(fā)》上課紀(jì)律要求座位固定，帶走垃圾三帶：帶書(shū)，帶筆記，帶筆三不帶：不帶吃，不帶喝，不帶手機(jī)不破壞電腦不做其他事情課程考核方式考核方式：理實(shí)一體化考核成績(jī)?cè)u(píng)定：總評(píng)成績(jī)=平時(shí)（60%）+期末考核（40%）

平時(shí)成績(jī)=學(xué)習(xí)通成績(jī)（40%）+作業(yè)（20%）+智慧樹(shù)（40%）要求：勤動(dòng)手，多操作！W3school或菜鳥(niǎo)教程前端技術(shù)體系1.1Web概述Web（WorldWideWeb）即全球廣域網(wǎng)，也稱為萬(wàn)維網(wǎng)，是一種基于超文本和HTTP的、全球性動(dòng)態(tài)交互的、跨平臺(tái)分布式圖形信息系統(tǒng)。它是一個(gè)由許多互相鏈接的網(wǎng)頁(yè)組成的系統(tǒng)，通過(guò)互聯(lián)網(wǎng)進(jìn)行訪問(wèn)。萬(wàn)維網(wǎng)是建立在Internet上的一種網(wǎng)絡(luò)服務(wù)，為瀏覽者在Internet上查找和瀏覽信息提供了圖形化的、易于訪問(wèn)的直觀界面，其中的文檔及超級(jí)鏈接將Internet上的信息節(jié)點(diǎn)組織成一個(gè)互為關(guān)聯(lián)的網(wǎng)狀結(jié)構(gòu)。1.2Web工作原理Web萬(wàn)維網(wǎng)是建立在B/S（瀏覽器/服務(wù)器）架構(gòu)之上的，通過(guò)客戶端和服務(wù)器之間的通信來(lái)實(shí)現(xiàn)網(wǎng)絡(luò)上的信息傳遞和數(shù)據(jù)交換。Web的工作原理是一個(gè)復(fù)雜的過(guò)程，涉及到了用戶交互、域名解析、HTTP請(qǐng)求發(fā)送、服務(wù)器處理和瀏覽器解析等多個(gè)環(huán)節(jié)。服務(wù)器客戶端請(qǐng)求響應(yīng)1.3Web相關(guān)概念I(lǐng)nternet網(wǎng)絡(luò)：就是通常所說(shuō)的互聯(lián)網(wǎng)，是由一些使用公用語(yǔ)言互相通信的計(jì)算機(jī)連接而成的網(wǎng)絡(luò)。WWW：WWW（英文World

Wide

Web的縮寫(xiě)）中文譯為“萬(wàn)維網(wǎng)”是Intertnet提供的一種網(wǎng)頁(yè)瀏覽服務(wù)。URL：URL（英文Uniform

Resource

Locator的縮寫(xiě)）中文譯為“統(tǒng)一資源定位符”

URL其實(shí)就是Web地址，俗稱“網(wǎng)址”。DNS：DNS

（英文Domain

Name

System的縮寫(xiě)）是域名解析系統(tǒng)。HTTP和HTTPS：HTTP

(Hypertext

transfer

protocol的縮寫(xiě))

中文譯為超文本傳輸協(xié)議，是一種詳細(xì)規(guī)定了瀏覽器和萬(wàn)維網(wǎng)服務(wù)器之間互相通信的規(guī)則。HTTPS協(xié)議是由SSL+HTTP協(xié)議構(gòu)建的可進(jìn)行加密傳輸、身份認(rèn)證的網(wǎng)絡(luò)協(xié)議，要比HTTP協(xié)議安全。1.3Web相關(guān)概念Web：Web通常指互聯(lián)網(wǎng)的使用環(huán)境。但對(duì)于網(wǎng)站制作者來(lái)說(shuō)，它是一系列技術(shù)的復(fù)合總稱，通常稱之為網(wǎng)頁(yè)。W3C組織：W3C（英文World

Wide

Web

Consortium的縮寫(xiě)）中文譯為“萬(wàn)維網(wǎng)聯(lián)盟”。成立于1994年，Web技術(shù)領(lǐng)域最權(quán)威和具影響力的國(guó)際中立性技術(shù)標(biāo)準(zhǔn)機(jī)構(gòu)，萬(wàn)維網(wǎng)聯(lián)盟是國(guó)際最著名的標(biāo)準(zhǔn)化組織。W3C標(biāo)準(zhǔn)：由萬(wàn)維網(wǎng)聯(lián)盟W3C組織制定的一系列標(biāo)準(zhǔn)，包括：結(jié)構(gòu)化標(biāo)準(zhǔn)語(yǔ)言（HTML和XML），表現(xiàn)標(biāo)準(zhǔn)語(yǔ)言（CSS），行為標(biāo)準(zhǔn)語(yǔ)言（DOM和EMCAScript）。京東首頁(yè)1、只有結(jié)構(gòu)（HTML）單調(diào)2、加入樣式（CSS）頁(yè)面更加美觀，但缺少交互3、加入行為（js）使網(wǎng)頁(yè)具有交互效果1.4Web網(wǎng)頁(yè)的構(gòu)成網(wǎng)站：多個(gè)頁(yè)面通過(guò)鏈接連在一起就組成了網(wǎng)站，網(wǎng)站是相關(guān)網(wǎng)頁(yè)的集合，是一個(gè)虛擬空間，通過(guò)域名進(jìn)行標(biāo)識(shí)，通常由前端和后端技術(shù)組成，通過(guò)瀏覽器訪問(wèn)網(wǎng)址即可呈現(xiàn)出網(wǎng)站的內(nèi)容。

網(wǎng)頁(yè)一般包含HTML標(biāo)簽的純文本文件，由兩部分組成，分別是文字和圖片，文字就是網(wǎng)頁(yè)的內(nèi)容，圖片就是網(wǎng)頁(yè)的外觀，隨著互聯(lián)網(wǎng)技術(shù)的發(fā)展，網(wǎng)頁(yè)還逐漸增加了動(dòng)畫(huà)、音樂(lè)、程序等更多的元素，整體頁(yè)面也變得越來(lái)越美觀。網(wǎng)頁(yè)可以存放在世界上某一臺(tái)計(jì)算機(jī)中，用戶可以通過(guò)瀏覽器訪問(wèn)某臺(tái)計(jì)算機(jī)中的頁(yè)面，此時(shí)存放網(wǎng)頁(yè)的計(jì)算機(jī)可以理解為Web服務(wù)器。所有的HTML文檔都應(yīng)該有一個(gè)<html>標(biāo)簽，<html>標(biāo)簽包含兩個(gè)部分：<head>和<body>。<head>標(biāo)簽用于包含整個(gè)文檔的描述信息，比如文檔的標(biāo)題（<title>元素用于包含標(biāo)題），對(duì)整個(gè)文檔的描述，文檔的關(guān)鍵字等等。文檔的具體內(nèi)容則放在與head標(biāo)簽同級(jí)的<body>元素中。1.4Web網(wǎng)頁(yè)的構(gòu)成用戶無(wú)論何時(shí)何地訪問(wèn)，網(wǎng)頁(yè)都會(huì)顯示固定的信息，除非網(wǎng)頁(yè)源代碼被重新修改上傳。靜態(tài)網(wǎng)頁(yè)更新不方便，但是訪問(wèn)速度快。靜態(tài)網(wǎng)頁(yè)動(dòng)態(tài)網(wǎng)頁(yè)顯示的內(nèi)容會(huì)隨著用戶操作和時(shí)間的不同而變化。動(dòng)態(tài)網(wǎng)頁(yè)可以和服務(wù)器數(shù)據(jù)庫(kù)進(jìn)行實(shí)時(shí)的數(shù)據(jù)交換。靜動(dòng)混合1.5Web前端開(kāi)發(fā)技術(shù)Web前端開(kāi)發(fā)是創(chuàng)建Web頁(yè)面或APP等前端界面呈現(xiàn)給用戶的過(guò)程，通過(guò)HTML，CSS及JavaScript以及衍生出來(lái)的各種技術(shù)、框架、解決方案，來(lái)實(shí)現(xiàn)互聯(lián)網(wǎng)產(chǎn)品的用戶界面交互。1.VisualStudioCode（簡(jiǎn)稱：VSCode）2.HBuilderX3.SublimeText4.WebStorm5.Notepad++1.6Web開(kāi)發(fā)工具第2章HTML入門(mén)主講教師：朱鐵櫻《Web前端開(kāi)發(fā)》2.1認(rèn)識(shí)HTML超文本標(biāo)記語(yǔ)言（HyperTextMarkupLanguage，HTML）是一種用于構(gòu)建網(wǎng)頁(yè)的標(biāo)準(zhǔn)標(biāo)記語(yǔ)言。它不僅僅定義了網(wǎng)頁(yè)的結(jié)構(gòu)，還影響了網(wǎng)頁(yè)的外觀和功能。HTML文檔是由各種HTML標(biāo)簽組成的，這些標(biāo)簽描述了網(wǎng)頁(yè)中的各個(gè)元素，如標(biāo)題、段落、列表、圖片、鏈接等。HTML是一種基礎(chǔ)技術(shù)，通常與CSS（層疊樣式表）和JavaScript一起使用，以設(shè)計(jì)出具有吸引力和交互性的網(wǎng)頁(yè)。CSS用于美化網(wǎng)頁(yè)的外觀和格式，而JavaScript則可以添加各種交互效果，使網(wǎng)頁(yè)更加生動(dòng)和有趣。2.2HTML文檔結(jié)構(gòu)HTML文檔包括頭部和主體兩大部分。HTML文檔結(jié)構(gòu)<head></head>文檔頭部信息<body></body>文檔主體信息標(biāo)記HTML文檔的開(kāi)始標(biāo)記HTML文檔的結(jié)束文檔聲明頭<title></title>文檔的標(biāo)題<meta>元數(shù)據(jù)頭部主要描述瀏覽器和搜索引擎所需要的信息，瀏覽器不會(huì)將這些信息呈現(xiàn)給訪問(wèn)者；主體是文檔的正文，是網(wǎng)頁(yè)中真正要傳達(dá)的信息，這些信息將在瀏覽器窗口的正文部分呈現(xiàn)給訪問(wèn)者。2.2HTML文檔結(jié)構(gòu)標(biāo)簽名定義說(shuō)明<html><html>HTML標(biāo)簽頁(yè)面中最大的標(biāo)簽，根標(biāo)簽<head></head>文檔的頭部在head標(biāo)簽中必須要設(shè)置的標(biāo)簽是title<title></title>文檔的標(biāo)題讓頁(yè)面擁有一個(gè)屬于自己的網(wǎng)頁(yè)標(biāo)題<body></body>文檔的主體包含文檔的所有內(nèi)容，頁(yè)面內(nèi)容基本放到body里使用HbuilderX新建“基本HTML項(xiàng)目”將CSS和JS文件分別放入對(duì)應(yīng)目錄在html中輸入代碼任務(wù)1：創(chuàng)建一個(gè)站點(diǎn)HTML文檔頭部元素head標(biāo)簽用來(lái)設(shè)置HTML的文檔標(biāo)題和其它在網(wǎng)頁(yè)中不顯示的信息，比如direction方向、語(yǔ)言代碼LanguageCode、指定字典中的元信息、等等head元素中包含的常用標(biāo)簽如下：標(biāo)簽名說(shuō)明<title>代表HTML文檔的標(biāo)題<base>把相對(duì)URL轉(zhuǎn)換為完整的絕對(duì)URL<meta>用于定義文件信息的名稱、內(nèi)容等信息<link>在文檔中聲明使用外接資源(如CSS)時(shí)使用此標(biāo)簽<style>在文檔中聲明樣式時(shí)使用此標(biāo)簽<script>在文檔中使用JavaScript腳本meta標(biāo)簽計(jì)算機(jī)要精確的處理各種字符文字，需要進(jìn)行編碼在HTML中使用meta標(biāo)簽描述字符集，告之瀏覽器此文檔使用哪種字符集中文能夠使用的字符集有兩種字符集的比較優(yōu)點(diǎn)缺點(diǎn)UTF8全面，包含了各個(gè)國(guó)家的語(yǔ)言文件尺寸大，比較臃腫gb2312(GBK)文件尺寸小，節(jié)省空間僅包含中文和少數(shù)英文和符號(hào)使用meta標(biāo)簽聲明的字符集一定要和文檔保存的類型保持一致，否則會(huì)出現(xiàn)亂碼meta標(biāo)簽meta除了可以設(shè)置字符集，還可以設(shè)置頁(yè)面描述信息和關(guān)鍵字description：頁(yè)面描述，搜索引擎顯示搜索結(jié)果時(shí)顯示描述文字keywords：關(guān)鍵字，幫助搜索引擎提高搜索命中率HTML文檔標(biāo)題title標(biāo)簽用來(lái)設(shè)置頁(yè)面標(biāo)題有助于搜索引擎優(yōu)化link標(biāo)簽、style標(biāo)簽、script標(biāo)簽link標(biāo)簽style標(biāo)簽<linkrel="stylesheet"href="reset.css"/><style>body{background-color：yellow;}p{color：blue;}</style>script標(biāo)簽<script>alert("Hello，world!");</script><script

src="engine.js"></script>HTML主體HTML主體為body元素，使用<body></body>標(biāo)簽，用于定義文檔的正文內(nèi)容，成對(duì)出現(xiàn)。在<body></body>之間的內(nèi)容即為頁(yè)面的主體內(nèi)容，可以是文本、圖像、音頻、視頻、表單及其他交互式內(nèi)容，它們才是真正要在瀏覽器中顯示，并讓訪問(wèn)者看到的內(nèi)容。由于HTML元素可以相互嵌套，通過(guò)元素層層嵌套，就構(gòu)成了千變?nèi)f化的網(wǎng)頁(yè)。當(dāng)一個(gè)元素包含另一個(gè)元素時(shí)，把外層元素稱作父元素，內(nèi)層元素稱作子元素。子元素還可以再包含子元素，子元素中包含的任何元素，都是外層父元素的后代。2.3HTML基礎(chǔ)語(yǔ)法HTML

對(duì)換行和tab均不敏感，僅通過(guò)標(biāo)簽來(lái)表示層次關(guān)系。在寫(xiě)代碼時(shí)要求有整齊的縮進(jìn)，使代碼更容易閱讀和維護(hù)，使用Ctrl+K格式化代碼。HTML中如果出現(xiàn)多個(gè)空白字符（空格，tab，回車(chē)）都會(huì)被折疊為一個(gè)空格顯示。標(biāo)簽要嚴(yán)格封閉，否則顯示會(huì)出現(xiàn)錯(cuò)誤。HTML標(biāo)簽是大小寫(xiě)無(wú)關(guān)的，<body>跟<BODY>或<Body>表示意思是一樣的，標(biāo)準(zhǔn)推薦使用小寫(xiě)，這樣符合XHTML標(biāo)準(zhǔn)1.HTML語(yǔ)法特性2.3HTML基礎(chǔ)語(yǔ)法一個(gè)HTML元素由一個(gè)標(biāo)簽和一組屬性組成。一個(gè)標(biāo)簽可以有一個(gè)或多個(gè)屬性，屬性以名稱和值成對(duì)出現(xiàn)（鍵值對(duì)）。標(biāo)簽是HTML中最基本單位。1.標(biāo)簽的構(gòu)成HTML標(biāo)簽是由尖括號(hào)（“<”和“>”）包圍的關(guān)鍵詞，如標(biāo)簽<html><p>等，標(biāo)簽名稱不區(qū)分大小寫(xiě)，故<p>和<P>的含義相同，推薦大家使用小寫(xiě)。HTML標(biāo)簽分為兩種類型：雙標(biāo)簽和單標(biāo)簽。<br>雙標(biāo)簽單標(biāo)簽2.3HTML基礎(chǔ)語(yǔ)法2

標(biāo)簽中的屬性HTML屬性包含了元素的附加描述信息，定義在HTML開(kāi)始標(biāo)簽中，通常以鍵/值對(duì)的形式出現(xiàn)，還有個(gè)別標(biāo)簽的屬性為空屬性，只有名稱沒(méi)有值。屬性的名稱和值無(wú)關(guān)大小寫(xiě)，推薦使用小寫(xiě)。<標(biāo)簽名屬性名1="屬性值"屬性名2="屬性值"…屬性名N="屬性值"></標(biāo)簽名>2.4文本控制標(biāo)簽標(biāo)簽分為容器級(jí)標(biāo)簽和文本級(jí)標(biāo)簽，容器級(jí)標(biāo)簽里可以放置任何標(biāo)簽，文本級(jí)標(biāo)簽里只能放置文字、圖片、表單元素。h系列標(biāo)簽代表各級(jí)標(biāo)題（h1—h6），h是容器級(jí)標(biāo)簽。p標(biāo)簽代表段落。水平分隔線標(biāo)簽hr。br標(biāo)簽。b標(biāo)簽。i標(biāo)簽。任務(wù)2HTML標(biāo)簽練習(xí)建立一個(gè)HTML文件，要求：設(shè)置p標(biāo)簽和h1-h6標(biāo)簽嘗試在p標(biāo)簽中嵌套h標(biāo)簽，是否可行？嘗試在h標(biāo)簽中嵌套p標(biāo)簽，是否可行？使用Chrome的開(kāi)發(fā)者功能對(duì)此頁(yè)面進(jìn)行頁(yè)面元素的查看和調(diào)試使用Chrome的開(kāi)發(fā)者功能對(duì)百度首頁(yè)進(jìn)行頁(yè)面元素的查看和調(diào)試嘗試使用其它瀏覽器進(jìn)行頁(yè)面元素的查看和調(diào)試特殊字符標(biāo)簽特殊字符描述字符代碼

空格符

<小于號(hào)<>大于號(hào)>&和號(hào)&￥人民幣￥?版權(quán)??注冊(cè)商標(biāo)?°攝氏度°±正負(fù)號(hào)±×乘號(hào)×÷除號(hào)÷2.5圖片標(biāo)簽HTML文檔中允許插入的圖片類型如下：圖片類型特點(diǎn)BMP不進(jìn)行任何壓縮，占用空間較大GIF壓縮格式，一個(gè)GIF文件中可以包含多張圖片，快速切換形成動(dòng)畫(huà)效果PNG無(wú)損壓縮，圖片占用空間小，支持透明效果JPG(JPEG)有損壓縮，不支持透明效果如果希望圖片質(zhì)量較好就用jpg格式如果希望圖片文件占用空間比較小就用gif格式如果希望在二者之間平衡就用png格式。2.5圖片標(biāo)簽HTML頁(yè)面中不是直接插入圖片，而是插入圖片的鏈接地址，需要將圖片文件上傳至服務(wù)器<img/>為單標(biāo)簽圖片標(biāo)簽的屬性src：代表資源，其值為顯示圖片的路徑alt：替代文字，當(dāng)圖片無(wú)法顯示時(shí)，網(wǎng)頁(yè)上顯示替代文字widthheigth路徑路徑：指從樹(shù)型目錄中的某個(gè)目錄層次到某個(gè)文件的一條道路。此路徑的主要構(gòu)成是目錄名稱，中間用“/”分開(kāi)。絕對(duì)路徑是指從“根”開(kāi)始的路徑，也稱為完全路徑。不依靠其他參考直接通過(guò)路徑找到某個(gè)文件相對(duì)路徑是從用戶工作目錄開(kāi)始的路徑。即使文件的目錄發(fā)生變化，只要相對(duì)路徑不變，則依然能夠通過(guò)它找到對(duì)應(yīng)的文件。路徑思考文件夾與文件的層級(jí)關(guān)系如下圖所示，如何在index.html中插入1.png圖片并顯示此圖片？在HTML頁(yè)面上顯示三張圖片，要求：HTML文件放置在文件夾web下圖片1放置在與HTML文件同級(jí)的文件夾photo1下圖片2放置在與web文件夾同級(jí)的文件夾photo2下圖片3放置在web文件夾上層文件夾下2.6布局標(biāo)簽<div>和<span>標(biāo)簽常用作布局工具，我們俗稱盒子，用于容納內(nèi)容，標(biāo)簽沒(méi)有明確的語(yǔ)義，就是普普通通的盒子。1.<div>標(biāo)簽div：全稱division，分割、區(qū)域、跨度的意思。俗稱大盒子。<div>是雙標(biāo)簽，是最經(jīng)典的容器級(jí)標(biāo)簽，內(nèi)部可以放置任意內(nèi)容，不像<h1>等內(nèi)部?jī)?nèi)容有限制，這是<div>標(biāo)簽的一個(gè)好處。div的作用：多用于劃分網(wǎng)頁(yè)區(qū)域，進(jìn)行結(jié)構(gòu)布局。一般使用<div>包裹起來(lái)，整體設(shè)置大的布局效果。2.<span>標(biāo)簽span：小區(qū)域、小跨度的意思，俗稱小盒子。<span>也是雙標(biāo)簽，文本級(jí)標(biāo)簽。span常被用來(lái)設(shè)置同一行文字內(nèi)的不同格式。2.7案例-社會(huì)主義核心價(jià)值觀第3章HTML列表主講教師：朱鐵櫻《Web前端開(kāi)發(fā)》3.1超鏈接的基本使用<a>標(biāo)簽定義超鏈接，用于從一張頁(yè)面鏈接到另一張頁(yè)面。<a>元素最重要的屬性是href屬性，它指示鏈接的目標(biāo)。超鏈接的其它屬性title屬性：表示鼠標(biāo)懸停在超鏈接上時(shí)顯示的文本內(nèi)容target屬性：表示是否在新窗口打開(kāi)超鏈接_self：

默認(rèn)。在相同的窗口中打開(kāi)被鏈接文檔_blank：表示在新窗口中打開(kāi)被鏈接文檔3.2錨點(diǎn)在W3C標(biāo)準(zhǔn)字“Anchor”一詞即為錨點(diǎn)，其解釋為：資源中的某個(gè)區(qū)域，可以是零個(gè)、一個(gè)或多個(gè)鏈接的目標(biāo)或源。錨點(diǎn)可以引用整個(gè)資源，或特定部分，或者資源的特定表現(xiàn)形式。錨點(diǎn)是一種超鏈接，它可以是頁(yè)面內(nèi)部的超鏈接。假如我們有一個(gè)網(wǎng)頁(yè)很長(zhǎng)很長(zhǎng)，而且里面的內(nèi)容，可以分為N個(gè)部分。這樣的話，我們就可以在網(wǎng)頁(yè)的頂部設(shè)置一些錨點(diǎn)，這樣便可以方便瀏覽者點(diǎn)擊相應(yīng)的錨點(diǎn)，到達(dá)本頁(yè)內(nèi)相應(yīng)的位置，而不必在一個(gè)很長(zhǎng)的網(wǎng)頁(yè)里自行尋找。(例如：現(xiàn)在很多網(wǎng)站都使用的”回到頂部”按鈕)頁(yè)面內(nèi)部的錨點(diǎn)如果一個(gè)a標(biāo)簽有name屬性或者id屬性，那么它是頁(yè)面的一個(gè)錨點(diǎn)?？梢宰屢粋€(gè)超鏈接指向頁(yè)面中的錨點(diǎn)。錨點(diǎn)經(jīng)常被用來(lái)快速定位到頁(yè)面中的某一位置。<pid="top">頂部</p><h3>錨點(diǎn)的用法</h3><h3>錨點(diǎn)的用法</h3><h3>錨點(diǎn)的用法</h3>...<h3>錨點(diǎn)的用法</h3><h3>錨點(diǎn)的用法</h3><h3>錨點(diǎn)的用法</h3><ahref="#top">點(diǎn)我跳轉(zhuǎn)到頂部</a>跨頁(yè)面的錨點(diǎn)可以使用錨點(diǎn)實(shí)現(xiàn)從一個(gè)頁(yè)面跳轉(zhuǎn)到另一個(gè)頁(yè)面的某個(gè)位置，而不是從頁(yè)面頂部開(kāi)始瀏覽。<ahref="anchors.html#bottom">跳轉(zhuǎn)到anchors頁(yè)面的底部</a><h3>錨點(diǎn)的用法</h3><h3>錨點(diǎn)的用法</h3><h3>錨點(diǎn)的用法</h3>...<h3>錨點(diǎn)的用法</h3><h3>錨點(diǎn)的用法</h3><h3>錨點(diǎn)的用法</h3><pid="bottom">底部</p>3.3圖片與超鏈接結(jié)合使用在HTML頁(yè)面上建立三個(gè)超鏈接，要求：點(diǎn)擊第一個(gè)超鏈接可以跳轉(zhuǎn)至百度主頁(yè)，鼠標(biāo)懸停時(shí)顯示”百度主頁(yè)“，并在新窗口中打開(kāi)百度主頁(yè)。點(diǎn)擊第二個(gè)超鏈接可以跳轉(zhuǎn)至當(dāng)前頁(yè)面的某一位置。點(diǎn)擊第三個(gè)超鏈接可以跳轉(zhuǎn)至另一頁(yè)面的某一位置。<ahref="http:///"><imgsrc="img/baidu.jpg"></a>圖片與超鏈接結(jié)合使用定義無(wú)序列表的基本語(yǔ)法格式<ul><li>列表項(xiàng)1</li><li>列表項(xiàng)2</li><li>列表項(xiàng)3</li>……</ul><ul>標(biāo)簽用于定義無(wú)序列表<li>標(biāo)簽用于描述具體的列表項(xiàng)每個(gè)<ul>標(biāo)簽中至少應(yīng)包含一個(gè)<li>標(biāo)簽無(wú)序列表是網(wǎng)頁(yè)中最常用的列表，之所以稱為無(wú)序列表，是因?yàn)槠涓鱾€(gè)列表項(xiàng)之間沒(méi)有順序級(jí)別之分，通常是并列的。3.4無(wú)序列表標(biāo)簽<ul>標(biāo)簽和<li>標(biāo)簽都擁有type屬性，用于指定列表項(xiàng)目符號(hào)。列表項(xiàng)目符號(hào)是列表項(xiàng)前顯示符號(hào)。當(dāng)為type屬性設(shè)置不同的屬性值，可以呈現(xiàn)不同的符號(hào)。type屬性值顯示效果disc（默認(rèn)值）●circle○square■3.4無(wú)序列表標(biāo)簽注意：1.HTML5不再支持<ul>標(biāo)簽的type屬性，通常使用CSS樣式設(shè)置。2.<ul>標(biāo)簽中需要嵌套<li>標(biāo)簽，不建議在<ul>標(biāo)簽中直接輸入文本內(nèi)容。3.4無(wú)序列表標(biāo)簽有序列表是指有排列順序的列表，其各個(gè)列表項(xiàng)按照一定的順序排列。例如，網(wǎng)頁(yè)中常見(jiàn)的歌曲排行榜、游戲排行榜等都可以通過(guò)有序列表來(lái)定義。3.5有序列表標(biāo)簽定義有序列表的基本語(yǔ)法格式<ol><li>列表項(xiàng)1</li><li>列表項(xiàng)2</li><li>列表項(xiàng)3</li>……</ol><ol>標(biāo)簽用于定義有序列表<li>標(biāo)簽為具體的列表項(xiàng)每個(gè)<ol>標(biāo)簽中至少應(yīng)包含一個(gè)<li>標(biāo)簽3.5有序列表標(biāo)簽在有序列表中，除了type屬性之外，還可以為<ol>標(biāo)簽定義start屬性、為<li>標(biāo)簽定義value屬性。屬性屬性值/屬性值類型描述type1（默認(rèn)）項(xiàng)目符號(hào)顯示為數(shù)字1、2、3……a或A項(xiàng)目符號(hào)顯示為英文字母a、b、c……或A、B、C……i或I項(xiàng)目符號(hào)顯示為羅馬數(shù)字i、ii、iii……或I、II、III……start數(shù)字規(guī)定全部列表項(xiàng)的初始值value數(shù)字規(guī)定當(dāng)前列表項(xiàng)的初始值reversedreversed（可以省略）規(guī)定列表順序?yàn)榻敌?.5有序列表標(biāo)簽案例演示3.5有序列表標(biāo)簽定義列表常用于對(duì)名詞進(jìn)行解釋和描述，與無(wú)序列表和有序列表不同，定義列表的列表項(xiàng)前沒(méi)有任何項(xiàng)目符號(hào)。<dl><dt>名詞1</dt><dd>名詞1解釋1</dd><dd>名詞1解釋2</dd>……<dt>名詞2</dt><dd>名詞2解釋1</dd><dd>名詞2解釋2</dd>……</dl><dl>標(biāo)簽用于指定定義列表<dd>標(biāo)簽用于對(duì)名詞進(jìn)行解釋和描述一個(gè)<dt>標(biāo)簽可以對(duì)應(yīng)多個(gè)<dd>標(biāo)簽<dt>標(biāo)簽用于指定名詞3.6定義列表標(biāo)簽在網(wǎng)頁(yè)設(shè)計(jì)中，定義列表常用于實(shí)現(xiàn)圖文混排效果。其中，<dt>標(biāo)簽中插入圖片，<dd>標(biāo)簽中放入對(duì)圖片解釋說(shuō)明的文字。注意：1.<dl>、<dt>、<dd>三個(gè)標(biāo)簽之間不允許出現(xiàn)其他標(biāo)簽。2.<dl>標(biāo)簽必須與<dt>標(biāo)簽相鄰。3.6定義列表標(biāo)簽商品分類子分類在網(wǎng)上購(gòu)物商城中瀏覽商品時(shí)，經(jīng)常會(huì)看到商品被分為若干類別，這些商品類別通常還包含若干的子類。同樣，在使用列表時(shí)，列表項(xiàng)中也有可能包含若干子列表項(xiàng)，要想在列表項(xiàng)中定義子列表項(xiàng)就需要將列表進(jìn)行嵌套。列表的嵌套應(yīng)用

<ul><li>列表項(xiàng)1</li><li>列表項(xiàng)2</li><li>

<ol> <li>列表項(xiàng)1</li> <li>列表項(xiàng)2</li></ol></li></ul>列表的嵌套應(yīng)用的語(yǔ)法格式列表的嵌套應(yīng)用案例演示注意：在制作網(wǎng)頁(yè)時(shí)，不建議直接使用列表標(biāo)簽的屬性，通常使用CSS樣式替代。列表的嵌套應(yīng)用3.7案例-中國(guó)八大菜系第4章

表格與表單《Web前端開(kāi)發(fā)》表格是怎樣形成的？說(shuō)到表格，其實(shí)大家并不陌生課程表排行榜查票4.1創(chuàng)建表格使用標(biāo)簽創(chuàng)建表格的語(yǔ)法格式<table><caption>表格標(biāo)題</caption><tr> <td>單元格內(nèi)的文字</td><td>單元格內(nèi)的文字</td> ...</tr>...</table>在HTML中，所有的元素都是通過(guò)標(biāo)簽定義的，要想創(chuàng)建表格，就需要使用表格相關(guān)的標(biāo)簽。4.1創(chuàng)建表格用于定義表格的開(kāi)始與結(jié)束。在<table>標(biāo)簽中，可放表格的標(biāo)題、表格行和單元格等。<table>標(biāo)簽用于定義表格中的一行，必須嵌套在<table>標(biāo)簽中。<tr>標(biāo)簽用于定義表格的標(biāo)題，該標(biāo)簽必須直接放置到<table>開(kāi)始標(biāo)簽之后，不需要可省略。<caption>標(biāo)簽用于定義表格中的單元格，必須嵌套在<tr>標(biāo)簽。<td>標(biāo)簽表格標(biāo)簽的介紹4.1創(chuàng)建表格4.1創(chuàng)建表格應(yīng)用表格時(shí)經(jīng)常需要為表格設(shè)置表頭，以使表格的格式更加清晰，方便查閱。表頭一般位于表格的第一行或第一列，其文本加粗居中。設(shè)置表頭多學(xué)一招:4.1創(chuàng)建表格只需用表頭標(biāo)簽<th>替代相應(yīng)的單元格標(biāo)簽<td>即可。<th>標(biāo)簽與<td>標(biāo)簽的屬性、用法完全相同，但<th>標(biāo)簽具有語(yǔ)義性，特指表頭，標(biāo)簽包含的文本默認(rèn)加粗居中顯示。而<td>標(biāo)簽只是普通的單元格，標(biāo)簽包含的文本為普通文本且水平左對(duì)齊顯示。設(shè)置表頭多學(xué)一招:4.1創(chuàng)建表格<thead>表格的結(jié)構(gòu)用于定義表格的頭部，必須位于<table>標(biāo)簽中，一般包含網(wǎng)頁(yè)的logo和導(dǎo)航等頭部信息。<tfoot>用于定義表格的頁(yè)腳，位于<table>標(biāo)簽中<thead>標(biāo)簽之后，一般包含網(wǎng)頁(yè)底部的企業(yè)信息等。<tbody>用于定義表格的主體，位于<table>標(biāo)簽中<tfoot>標(biāo)簽之后，一般包含網(wǎng)頁(yè)中除頭部和底部之外的其他內(nèi)容。4.1創(chuàng)建表格表格標(biāo)簽屬性中，較為常用的是colspan屬性和rowspan屬性，這兩個(gè)屬性書(shū)寫(xiě)在<td>標(biāo)簽中，用于合并單元格。21colspan屬性用于設(shè)置單元格橫跨的列數(shù)，也就是用于合并水平方向的單元格，取值為正整數(shù)。colspan屬性rowspan屬性用于設(shè)置單元格豎跨行數(shù)，也就是用于合并垂直方向的單元格，取值為正整數(shù)。rowspan屬性4.2單元格的合并<table>標(biāo)簽屬性如下表。屬性描述常用屬性值border設(shè)置表格的邊框（默認(rèn)border="0"為無(wú)邊框）像素值cellspacing設(shè)置單元格與單元格之間的空間像素值（默認(rèn)為2px）cellpadding設(shè)置單元格內(nèi)容與單元格邊緣之間的空間像素值（默認(rèn)為1px）align設(shè)置表格在網(wǎng)頁(yè)中的水平對(duì)齊方式left、center、rightbgcolor設(shè)置表格的背景顏色顏色值英文單詞、十六進(jìn)制#RGB、rgb(r,g,b)4.3美化表格和單元格<tableborder="10"><tableborder="2"><table>4.3美化表格和單元格4.3美化表格和單元格4.4表單的基本概念登錄快遞查詢注冊(cè)想想表單由哪些構(gòu)成？在HTML中，一個(gè)完整的表單通常由表單控件、提示信息和表單域3個(gè)部分構(gòu)成。4.4表單的基本概念對(duì)表單控件、提示信息和表單域的具體解釋如下。包含了具體的表單功能項(xiàng)，如單行文本輸入框、密碼輸入框、復(fù)選框、提交按鈕、搜索框等。說(shuō)明性的文字，提示用戶進(jìn)行填寫(xiě)和操作。用于采集用戶的輸入或選擇的數(shù)據(jù)。如果不定義表單域，表單中的數(shù)據(jù)就無(wú)法傳送到后臺(tái)服務(wù)器。表單控件表單域提交信息4.4表單的基本概念在HTML5中，<form>標(biāo)簽用于創(chuàng)建表單，即定義表單域，以實(shí)現(xiàn)用戶信息的收集和傳遞，<form>標(biāo)簽中的所有內(nèi)容都會(huì)被提交給服務(wù)器。創(chuàng)建表單的語(yǔ)法格式<formaction="url地址"method="提交方式"name="表單名稱">

各種表單控件</form><form>與</form>之間的表單控件是由用戶自定義的action、method和name為表單標(biāo)簽<form>的常用屬性4.4表單的基本概念action屬性用于指定接收并處理表單數(shù)據(jù)的服務(wù)器程序的url地址1.action屬性<form>標(biāo)簽的常用屬性介紹如下。method屬性用于設(shè)置表單數(shù)據(jù)的提交方式。2.method屬性name屬性用于指定表單的名稱。3.name屬性4.4表單的基本概念表單控件：表單控件有多種形式，主要用來(lái)收集用戶數(shù)據(jù)，包括label、input、textarea、select等。最常使用的是input標(biāo)簽，根據(jù)功能的不同，input控件又分為text、password、radio、checkbox、file、submit、reset等類型。表單按鈕：包括提交按鈕、重置按鈕和普通按鈕。從本質(zhì)上講，表單按鈕也是表單控件，之所以把它分離出來(lái)。單獨(dú)介紹，是因?yàn)樗墓δ鼙容^特別。4.4表單的基本概念提交按鈕用于把表單數(shù)據(jù)發(fā)送到服務(wù)器重置按鈕用于重置整個(gè)表單的數(shù)據(jù)普通按鈕則需要開(kāi)發(fā)者賦予它功能<formaction="login.php"method="post">

用戶名：<inputtype="text"name="username"/>

密碼：<inputtype="password"name="password"/><inputtype="submit"value="登錄"/><inputtype="reset"></form>4.4表單的基本概念瀏覽網(wǎng)頁(yè)時(shí)經(jīng)常會(huì)看到輸入框、單選按鈕、提交按鈕、重置按鈕等，這些輸入框和按鈕都屬于表單控件。要想在網(wǎng)頁(yè)中定義這些表單控件就需要使用<input/>標(biāo)簽。input控件的語(yǔ)法格式<inputtype="控件類型"/>type屬性取值有多種，用于指定不同的表單控件類型。4.5input表單控件<input/>標(biāo)簽的常用屬性如下。屬性屬性值描述typetext單行文本輸入框password密碼輸入框radio單選按鈕checkbox復(fù)選框button普通按鈕submit提交按鈕reset重置按鈕image圖像形式的提交按鈕hidden隱藏域file文件域4.5input表單控件color類型<inputtype="color"/>number類型<inputtype="number"/>range類型<inputtype="range"/>Datepickers類型<inputtype=date,month,week…"/>email類型<inputtype="email"/>url類型<inputtype="url"/>tel類型<inputtype="tel"/>search類型<inputtype="search"/>（1）（2）（3）（4）（5）（6）（7）（8）新的input控件類型4.5input表單控件屬性屬性值描述name由用戶自定義input控件的名稱value由用戶自定義input控件中的默認(rèn)文本內(nèi)容size正整數(shù)input控件在頁(yè)面中的顯示寬度readonlyreadonly該控件內(nèi)容為只讀（不能編輯修改）disableddisabled第一次加載頁(yè)面時(shí)禁用該控件（顯示為灰色）checkedchecked定義選擇控件默認(rèn)被選中的項(xiàng)maxlength正整數(shù)控件允許輸入的最多字符數(shù)<input/>標(biāo)簽的常用屬性如下。4.5input表單控件案例演示4.5input表單控件通過(guò)<textarea>標(biāo)簽可以輕松地創(chuàng)建多行文本輸入框。textarea控件的語(yǔ)法格式<textareacols="每行中的字符數(shù)"rows="顯示的行數(shù)">

文本內(nèi)容</textarea>cols屬性用來(lái)定義多行文本輸入框每行的字符數(shù)。rows屬性用來(lái)定義多行文本輸入框顯示的行數(shù)。4.6其他表單控件textarea控件可選屬性：disabled、name和readonly。可選屬性屬性值描述name由用戶自定義控件的名稱readonlyreadonly該控件內(nèi)容為只讀（不能編輯修改）disableddisabled第一次加載頁(yè)面時(shí)禁用該控件（顯示為灰色）4.6其他表單控件瀏覽網(wǎng)頁(yè)時(shí)，經(jīng)常會(huì)看到包含多個(gè)選項(xiàng)的下拉菜單。例如，選擇所在的城市、出生年月、興趣愛(ài)好等。<select>標(biāo)簽4.6其他表單控件使用select控件可以制作下拉菜單效果。使用<select>標(biāo)簽定義下拉菜單的基本語(yǔ)法格式<select><option>選項(xiàng)1</option><option>選項(xiàng)2</option><option>選項(xiàng)3</option>...</select><select>標(biāo)簽用于在表單中添加一個(gè)下拉菜單。<option>標(biāo)簽用于定義下拉菜單中的具體選項(xiàng)。4.6其他表單控件在HTML5中，可以為<select>標(biāo)簽和<option>標(biāo)簽定義屬性，以改變下拉菜單的外觀顯示效果。<select>標(biāo)簽和<option>標(biāo)簽的常用屬性如下。標(biāo)簽名常用屬性描述<select>size指定下拉菜單的可見(jiàn)選項(xiàng)數(shù)，取值為正整數(shù)multiple使下拉菜單將具有多項(xiàng)選擇的功能，按住“Ctrl”鍵的同時(shí)選擇多項(xiàng)。取值為multiple<option>selected定義selected="selected"時(shí)，當(dāng)前項(xiàng)即為默認(rèn)選中項(xiàng)4.6其他表單控件4.7案例-學(xué)生信息登記表第5章

HTML5進(jìn)階《Web前端開(kāi)發(fā)》HTML5未來(lái)(2012)分化點(diǎn)分歧HTML

1.01993年(IETF)HTML

2.01995年(W3C)HTML

3.21996年(W3C)HTML

4.01997年(W3C)HTML

4.011999年(W3C)XHTML

1.02000年(W3C)XHTML

1.12001年(W3C)XHTML2.0?（W3C）HTML5草案2004年(WHATWG)HTML5正式版草案2008年(合并)5.1HTML語(yǔ)言版本變遷HTML5的文檔聲明HTML5沒(méi)有指定的具體的版本，表示最新的

html版本5.2HTML5新特性HTML5中的一些有趣的新特性：用于繪畫(huà)的canvas元素用于媒介回放的video和audio元素對(duì)本地離線存儲(chǔ)的更好的支持新的特殊內(nèi)容元素，比如article、footer、header、nav、section新的表單控件，比如calendar、date、time、email、url、search5.2HTML5新特性HTML5文檔結(jié)構(gòu)同樣是由頭部和主體兩部分組成，只是新增了一些結(jié)構(gòu)元素，如header、nav、article、section、aside、footer六個(gè)結(jié)構(gòu)元素，這些元素都是塊級(jí)元素。13.2.1HTML5頁(yè)面結(jié)構(gòu)圖13-2HTML4.01頁(yè)面布局圖13-3HTML5結(jié)構(gòu)元素布局5.3HTML5新增結(jié)構(gòu)元素HTML5頁(yè)面結(jié)構(gòu)元素語(yǔ)法：<body><header> <nav>...</nav></header><article> <section>...</section></article><aside>...</aside><footer>...</footer></body>5.3HTML5新增結(jié)構(gòu)元素1．header標(biāo)記header標(biāo)記定義文檔和區(qū)域的頁(yè)眉，通常是一些引導(dǎo)和導(dǎo)航信息。它不局限于寫(xiě)在網(wǎng)頁(yè)頭部，也可以寫(xiě)在網(wǎng)頁(yè)內(nèi)容里面。通常<header>標(biāo)記至少包含（但不局限于）一個(gè)標(biāo)題標(biāo)記（h1～h6），也可以包括hgroup（標(biāo)題組合）標(biāo)記、表格標(biāo)識(shí)、搜索表單、導(dǎo)航等。<header> <hgroup> <h1>HTML5是下一代的HTML。</h1> <h3>什么是HTML5？</h3> <h5>HTML5將成為HTML、XHTML以及HTMLDOM的新標(biāo)準(zhǔn)。</h5> </hgroup></header>5.3HTML5新增結(jié)構(gòu)元素2．nav標(biāo)記nav標(biāo)記代表頁(yè)面的一個(gè)部分，是一個(gè)可以作為頁(yè)面導(dǎo)航的鏈接組。建議不要在footer元素中使用nav元素，否則易造成頁(yè)面顯示不正確。配置相應(yīng)的CSS代碼可以實(shí)現(xiàn)水平導(dǎo)航。<body><header><nav><ul><li><ahref="#">HTML參考手冊(cè)</a></li><li><ahref="#">HTML實(shí)例</a></li><li><ahref="#">HTML測(cè)驗(yàn)</a></li></ul></nav></header></body>5.3HTML5新增結(jié)構(gòu)元素3.article標(biāo)記article標(biāo)記是一個(gè)特殊的section標(biāo)記，它比section具有更明確的語(yǔ)義，它代表一個(gè)獨(dú)立的、完整的相關(guān)內(nèi)容塊，可獨(dú)立于頁(yè)面其它內(nèi)容使用，可包含header，footer。例如論壇帖子、博客文章、新聞故事、評(píng)論等。<article><header><hgroup><h1>HTML5結(jié)構(gòu)元素的簡(jiǎn)介</h1><h2>HTML5的誕生</h2></hgroup><timedatetime="2017-04-28">2017-04-28</time></header><p>HTML5引入了許多新元素，包括幾個(gè)用于更好地描述文本結(jié)構(gòu)的元素……</p></article>5.3HTML5新增結(jié)構(gòu)元素4．section標(biāo)記section標(biāo)記定義文檔中的節(jié)。例如章節(jié)、頁(yè)眉、頁(yè)腳或文檔中的其他部分。一般用于成節(jié)的內(nèi)容，會(huì)在文檔流中開(kāi)始一個(gè)新的節(jié)。它用來(lái)表現(xiàn)普通的文檔內(nèi)容或應(yīng)用區(qū)塊，通常由內(nèi)容及其標(biāo)題組成。section元素不是一個(gè)普通的容器元素，它表示一段專題性的內(nèi)容，可以帶有標(biāo)題。<section><h1>section標(biāo)記</h1><p>用來(lái)定義文檔中的節(jié)(section、區(qū)段)。比如章節(jié)、頁(yè)眉、頁(yè)腳或文檔中的其他部分。</p></section><article><h1>article標(biāo)記</h1><p>article標(biāo)記標(biāo)識(shí)了Web頁(yè)面中的主要內(nèi)容。以博客為例，每篇帖子都構(gòu)成一個(gè)重要內(nèi)容。</p></article>5.3HTML5新增結(jié)構(gòu)元素5．a(chǎn)side標(biāo)記aside（側(cè)欄，也稱為旁注）標(biāo)記用來(lái)說(shuō)明其所包含的內(nèi)容與頁(yè)面主要內(nèi)容相關(guān)，但不是該頁(yè)面的一部分，類似于使用括號(hào)對(duì)正文進(jìn)行注釋（就像這樣）。括號(hào)中的內(nèi)容提供關(guān)于該元素的一些附加信息，例如廣告、成組的鏈接、側(cè)欄等。<header>我的博客</header><section><article><p>這是頁(yè)面上重要的內(nèi)容部分。也許是博客文章。帶aside元素。</p><aside><p>這是第一篇博客文章。</p></aside></article><article><p>這是頁(yè)面上重要的內(nèi)容部分。也許是博客文章。不帶aside元素</p></article></section>5.3HTML5新增結(jié)構(gòu)元素6．footer標(biāo)記footer標(biāo)記定義section或文檔的頁(yè)腳，包含了與頁(yè)面、文章或部分內(nèi)容有關(guān)的信息，例如文章的作者或者日期。作為頁(yè)面的頁(yè)腳時(shí)，一般包含了版權(quán)、相關(guān)文件和鏈接。它與頁(yè)眉header標(biāo)記用法相同，在一個(gè)頁(yè)面中可以多次使用，若在一個(gè)區(qū)段的最后使用footer標(biāo)記，那么它就相當(dāng)于該區(qū)段的頁(yè)腳。<footerstyle="text-align:center;"><section><ahref="/"target="_blank">CAICT中國(guó)信通院</a><a>……</a><a>……</a></section><spanstyle="padding:2px5px;">京ICP備12046007號(hào)-5</span><spanstyle="padding:2px5px;">HTML5中國(guó)產(chǎn)業(yè)聯(lián)盟版權(quán)所有</span></footer>5.3HTML5新增結(jié)構(gòu)元素1.輸入框占位符placeholder屬性用于為input類型的輸入框提供相關(guān)提示信息，以提示用戶輸入何種內(nèi)容。在輸入框?yàn)榭諘r(shí)顯式提示信息，當(dāng)輸入框獲得焦點(diǎn)時(shí)，提示信息消失。案例演示5.4

HTML5表單2.輸入框自動(dòng)獲取焦點(diǎn)autofocus屬性用于指定頁(yè)面加載后是否自動(dòng)獲取焦點(diǎn)，將autofocus屬性的屬性值指定為true時(shí)，頁(yè)面加載完畢后會(huì)自動(dòng)獲取該焦點(diǎn)。案例演示5.4

HTML5表單3.輸入框?yàn)g覽器歷史用戶輸入的瀏覽歷史數(shù)據(jù)的展示，HTML5之前需要使用ul之類的列表配合CSS完成，HTML5中只需要使用datalist標(biāo)簽并在內(nèi)部添加若干個(gè)option標(biāo)簽即可實(shí)現(xiàn)。例如：5.4

HTML5表單<inputlist="product"><datalistid="product">

<optionvalue="蘋(píng)果">

<optionvalue="香蕉">

<optionvalue="橘子"></datalist>（1）email類型<inputtype="email"/>email類型的input控件是一種專門(mén)用于輸入E-mail地址的文本輸入框，用來(lái)驗(yàn)證email輸入框的內(nèi)容是否符合Email郵件地址格式；如果不符合，將提示相應(yīng)的錯(cuò)誤信息。5.4

HTML5表單4.新增input標(biāo)簽類型（2）url類型<inputtype="url"/>url類型的input控件是一種用于輸入U(xiǎn)RL地址的文本框。如果所輸入的內(nèi)容是URL地址格式的文本，則會(huì)提交數(shù)據(jù)到服務(wù)器；如果輸入的值不符合URL地址格式，則不允許提交，并且會(huì)有提示信息。5.4

HTML5表單4.新增input標(biāo)簽類型（3）日期輸入表單<inputtype="date"/>5.4

HTML5表單4.新增input標(biāo)簽類型（4）日期輸入表單<inputtype="time"/>（5）月份輸入表單<inputtype="month"/>5.4

HTML5表單4.新增input標(biāo)簽類型（6）周日期輸入表單<inputtype="week"/>（7）number類型<inputtype="number"/>5.4

HTML5表單（7）number類型<inputtype="number"/>number類型的input控件用于提供輸入數(shù)值的文本框。在提交表單時(shí)，number類型的input控件會(huì)自動(dòng)檢查該輸入框中的內(nèi)容是否為數(shù)字。如果輸入的內(nèi)容不是數(shù)字或者數(shù)字不在限定范圍內(nèi)，則會(huì)出現(xiàn)錯(cuò)誤提示。number類型具體屬性說(shuō)明如下。value：指定輸入框的默認(rèn)值。max：指定輸入框可以接受的最大的輸入值。min：指定輸入框可以接受的最小的輸入值。step：輸入域合法的間隔，如果不設(shè)置，默認(rèn)值是1。5.4

HTML5表單（8）tel類型<inputtype="tel"/>tel類型用于提供輸入電話號(hào)碼的文本框，由于電話號(hào)碼的格式千差萬(wàn)別，很難實(shí)現(xiàn)一個(gè)通用的格式。因此tel類型通常會(huì)和pattern屬性配合使用，驗(yàn)證輸入的電話號(hào)碼格式正確與否。5.4

HTML5表單(9)search類型<inputtype="search"/>search類型是一種專門(mén)用于輸入搜索關(guān)鍵詞的文本框，它能自動(dòng)記錄一些字符。例如，站點(diǎn)搜索或者Google搜索。在用戶輸入內(nèi)容后，其右側(cè)會(huì)附帶一個(gè)刪除圖標(biāo)，單擊這個(gè)圖標(biāo)按鈕可以快速清除內(nèi)容。5.4

HTML5表單（10）color類型<inputtype="color"/>color類型用于提供設(shè)置顏色的文本框，用于實(shí)現(xiàn)一個(gè)RGB顏色輸入。顏色采用十六進(jìn)制顏色值，基本形式是#RRGGBB，默認(rèn)顏色值為#000，通過(guò)value屬性值可以更改默認(rèn)顏色。案例演示5.4

HTML5表單屬性說(shuō)明autocomplete屬性規(guī)定表單或輸入字段是否應(yīng)該自動(dòng)填充，自動(dòng)填充上一次的值autofocus布爾類型，自動(dòng)獲取焦點(diǎn)form可以在<form>標(biāo)簽之外使用<input>，通過(guò)此屬性指定<form>的id，此<input>屬于指定<form>formaction適用于type=submit，當(dāng)有多個(gè)submit，可以通過(guò)此屬性指定不同的請(qǐng)求urlformenctype當(dāng)把表單數(shù)據(jù)（form-data）提交至服務(wù)器時(shí)如何對(duì)其進(jìn)行編碼，僅針對(duì)method="post"的表單，formenctype屬性覆蓋<form>元素的enctype屬性。formmethod適用于type=submit，定義請(qǐng)求方式，會(huì)覆蓋<form>中的method，可以在有多個(gè)submit時(shí)使用formnovalidate規(guī)定在提交表單時(shí)不對(duì)

<input>元素進(jìn)行驗(yàn)證formtarget相當(dāng)于<a>的target屬性，是否打開(kāi)新的頁(yè)面height和width寬高尺寸，僅適用于type="image"list引用<datalist>，一個(gè)單獨(dú)的<datalist>不會(huì)顯示min和max規(guī)定value的最大、最小值，適用于number、range、date、datetime、datetime-local、month、time以及weekmultiple布爾類型，允許用戶在

<input>元素中輸入一個(gè)以上的值，適用于type=file和emailpattern規(guī)定用于檢查

<input>元素值的正則表達(dá)式placeholder預(yù)期提示文字required是否必填/必選step規(guī)定合法數(shù)字間隔，適用于number、range、date、datetime、datetime-local、month、time以及week5.4

HTML5表單5.5HTML5音頻與視頻在網(wǎng)頁(yè)設(shè)計(jì)中，多媒體技術(shù)主要是指在網(wǎng)頁(yè)上運(yùn)用音頻視頻傳遞信息的一種方式。在網(wǎng)絡(luò)傳輸速度越來(lái)越快的今天，音頻和視頻技術(shù)已經(jīng)被越來(lái)越廣泛的應(yīng)用在網(wǎng)頁(yè)設(shè)計(jì)中。在HTML5出現(xiàn)之前并沒(méi)有將視頻和音頻嵌入到頁(yè)面的標(biāo)準(zhǔn)方式，多媒體內(nèi)容在大多數(shù)情況下都是通過(guò)第三方插件或集成在Web瀏覽器的應(yīng)用程序置于頁(yè)面中。復(fù)雜冗長(zhǎng)運(yùn)用HTML5中新增的video標(biāo)簽和audio標(biāo)簽可以避免這樣的問(wèn)題。5.5HTML5音頻與視頻視頻和音頻編解碼器由于視頻和音頻的原始數(shù)據(jù)一般都比較大，如果不對(duì)其進(jìn)行編碼就放到互聯(lián)網(wǎng)上，傳播時(shí)會(huì)消耗大量時(shí)間，無(wú)法實(shí)現(xiàn)流暢的傳輸或播放。通過(guò)視頻和音頻編解碼器對(duì)視頻和音頻文件進(jìn)行壓縮，就可以實(shí)現(xiàn)視頻和音頻的正常傳輸和播放。5.5HTML5音頻與視頻多媒體格式運(yùn)用HTML5的video和audio標(biāo)簽可以在頁(yè)面中嵌入視頻或音頻文件，如果想要這些文件在頁(yè)面中加載播放，還需要設(shè)置正確的多媒體格式。視頻格式視頻格式包含視頻編碼、音頻編碼和容器格式。音頻格式音頻格式是指要在計(jì)算機(jī)內(nèi)播放或是處理音頻文件。5.5HTML5音頻與視頻視頻格式OggMPEGWebM多媒體格式音頻格式VorbisMP3Wav5.5HTML5音頻與視頻5.5.1audio標(biāo)簽在HTML5中，audio標(biāo)簽用于定義播放音頻文件的標(biāo)準(zhǔn)。基本語(yǔ)法格式<audiosrc="音頻文件路徑"controls="controls"></audio>src屬性用于設(shè)置音頻文件的路徑，controls屬性用于為音頻提供播放控件。可在<audio>和</audio>之間也可以插入文字，用于不支持audio元素的瀏覽器顯示。5.5HTML5音頻與視頻音頻控件，用于控制音頻文件的播放狀態(tài)播放進(jìn)度條聲音5.5HTML5音頻與視頻5.5.1audio標(biāo)簽屬性值描述autoplayautoplay當(dāng)頁(yè)面載入完成后自動(dòng)播放音頻。looploop音頻結(jié)束時(shí)重新開(kāi)始播放。preloadpreload如果出現(xiàn)該屬性，則音頻在頁(yè)面加載時(shí)進(jìn)行加載，并預(yù)備播放。如果使用"autoplay"，則忽略該屬性。注意：以上列舉的audio元素的屬性和video元素是相同的，這些相同的屬性在嵌入音視頻時(shí)是通用的。5.5HTML5音頻與視頻5.5.1audio標(biāo)簽雖然html5支持Ogg、MPEG4和WebM的視頻格式以及Vorbis、MP3和Wav的音頻格式，但各瀏覽器對(duì)這些格式卻不完全支持視頻格式格式IE9Firefox4.0Opera10.6Chrome6.0Safari3.0Ogg

支持支持支持

MPEG4支持

支持支持WebM

支持支持支持

音頻格式OggVorbis

支持支持支持

MP3支持

支持支持Wav

支持支持

支持視頻音頻文件的兼容性問(wèn)題5.5HTML5音頻與視頻5.5.1audio標(biāo)簽在HTML5中，運(yùn)用source元素可以為video元素或audio元素提供多個(gè)備用文件?；菊Z(yǔ)法格式<audiocontrols="controls"> <sourcesrc="音頻文件地址"type="媒體文件類型/格式"> <sourcesrc="音頻文件地址"type="媒體文件類型/格式"> ……</audio>src用于指定媒體文件的URL地址。type指定媒體文件的類型。5.5HTML5音頻與視頻5.5.1audio標(biāo)簽在HTML5中，video標(biāo)簽用于定義播放視頻文件的標(biāo)準(zhǔn)。基本語(yǔ)法格式<videosrc="視頻文件路徑"controls="controls"></video>src屬性用于設(shè)置視頻文件的路徑，controls屬性用于為視頻提供播放控件，這兩個(gè)屬性是video元素的基本屬性。5.5HTML5音頻與視頻5.5.2video標(biāo)簽瀏覽器添加的視頻控件，用于控制視頻播放的狀態(tài)播放進(jìn)度條聲音全屏5.5HTML5音頻與視頻5.5.2video標(biāo)簽屬性值描述autoplayautoplay當(dāng)頁(yè)面載入完成后自動(dòng)播放視頻。looploop視頻結(jié)束時(shí)重新開(kāi)始播放。preloadpreload如果出現(xiàn)該屬性，則視頻在頁(yè)面加載時(shí)進(jìn)行加載，并預(yù)備播放。如果使用"autoplay"，則忽略該屬性。posterurl當(dāng)視頻緩沖不足時(shí)，該屬性值鏈接一個(gè)圖像，并將該圖像按照一定的比例顯示出來(lái)。5.5HTML5音頻與視頻5.5.2video標(biāo)簽在HTML5中，經(jīng)常會(huì)通過(guò)為video元素添加寬高的方式給視頻預(yù)留一定的空間，這樣瀏覽器在加載頁(yè)面時(shí)就會(huì)預(yù)先確定視頻的尺寸，為其保留合適的空間，使頁(yè)面的布局不產(chǎn)生變化。注意：通過(guò)width和height屬性來(lái)縮放視頻，這樣的視頻即使在頁(yè)面上看起來(lái)很小，但它的原始大小依然沒(méi)變，因此在實(shí)際工作中要運(yùn)用視頻處理軟件（如“格式工廠”）對(duì)視頻進(jìn)行壓縮。5.5HTML5音頻與視頻5.5.2video標(biāo)簽使用音頻和視頻注意事項(xiàng)1.

瀏覽器支持的音頻和視頻格式不同，需要在<source>標(biāo)簽中提供不同格式的文件來(lái)兼容不同的瀏覽器。2.

在設(shè)置src屬性時(shí)，應(yīng)該使用相對(duì)路徑或絕對(duì)路徑，避免使用相對(duì)于當(dāng)前頁(yè)面的路徑。3.

使用controls屬性會(huì)顯示默認(rèn)的播放器控件，但是在移動(dòng)設(shè)備上默認(rèn)控件可能無(wú)法顯示或不夠友好。此時(shí)可以使用JavaScript自定義控件。4.

在不同的瀏覽器和操作系統(tǒng)下，對(duì)于媒體的支持情況也可能不同，因此需要在不同的瀏覽器和設(shè)備上進(jìn)行測(cè)試。5.

如果使用自定義控件，需要注意控件的可用性和兼容性，避免在某些瀏覽器或設(shè)備上無(wú)法使用。6.

瀏覽器默認(rèn)情況下不會(huì)自動(dòng)播放媒體文件，需要用戶手動(dòng)點(diǎn)擊播放按鈕。如果希望實(shí)現(xiàn)自動(dòng)播放的效果，需要在設(shè)置<audio>或<video>標(biāo)簽時(shí)添加autoplay屬性。7.

使用媒體文件會(huì)占用網(wǎng)站的帶寬，需要注意使用合適的壓縮方法來(lái)減小文件大小，避免對(duì)網(wǎng)站性能造成負(fù)面影響?？傊?，在使用<audio>和<video>標(biāo)簽時(shí)，需要進(jìn)行充分的測(cè)試和優(yōu)化，以提供良好的用戶體驗(yàn)和兼容性。5.5HTML5音頻與視頻5.6繪圖HTML5中增加了用于繪制圖形的canvas技術(shù)，此項(xiàng)技術(shù)可以在不借助于插件的情況下，繪制任意的圖形，目前在網(wǎng)頁(yè)游戲領(lǐng)域、數(shù)據(jù)可視化領(lǐng)域應(yīng)用的非常廣泛。若要使用canvas繪制圖形，僅僅依靠標(biāo)簽是達(dá)不到效果的，此項(xiàng)技術(shù)還需要配合js才能完成。5.6繪圖5.6.1基本用法繪制圖形前，首先需要在頁(yè)面中添加canvas標(biāo)簽，并添加id屬性，以便js獲取到canvas節(jié)點(diǎn)?？梢酝ㄟ^(guò)width與height屬性修改canvas標(biāo)簽的寬度和高度，canvas標(biāo)簽會(huì)形成一個(gè)繪制區(qū)域，用于繪制圖形，也可以將canvas形成的區(qū)域理解為畫(huà)布。<canvasid="canvas"width="500"height="300">您的瀏覽器不支持canvas</canvas>5.6繪圖5.6.1基本用法繪圖標(biāo)簽設(shè)置好以后，接下來(lái)使用js獲取到canvas節(jié)點(diǎn)對(duì)象，并獲取繪圖環(huán)境通過(guò)getElementById()方法獲取到canvas節(jié)點(diǎn)對(duì)象，并調(diào)用了節(jié)點(diǎn)對(duì)象的getContext方法，獲取到對(duì)應(yīng)的2d繪圖環(huán)境，后續(xù)所有的繪圖操作都需要基于此繪圖環(huán)境，有些地方稱繪圖環(huán)境為繪圖上下文。varcanvas=document.getElementById("canvas");varctx=canvas.getContext("2d");5.6繪圖5.6.2路徑canvas在繪制圖形時(shí)均是根據(jù)路徑進(jìn)行繪制，首先需要調(diào)用繪圖環(huán)境對(duì)象的beginPath方法創(chuàng)建一個(gè)繪圖路徑，接下來(lái)基于此路徑，可以調(diào)用不同的繪圖方法進(jìn)行繪制，最后再調(diào)用closePath方法封閉路徑。ctx.beginPath();ctx.rect(10，30，200，100);ctx.closePath();在調(diào)用了beginPath方法開(kāi)啟了路徑后，調(diào)用了rect方法可以在頁(yè)面上繪制一個(gè)矩形，其中rect中四個(gè)參數(shù)分別表示，矩形左上角的xy坐標(biāo)，矩形的寬度與高度。5.6繪圖需要注意的是canvas中的坐標(biāo)系不同于數(shù)學(xué)中的坐標(biāo)系，其坐標(biāo)系的原點(diǎn)在左上角，x軸沿著水平方向向右增長(zhǎng)，y軸沿著垂直方向向下增長(zhǎng)。坐標(biāo)軸5.7案例-電影影評(píng)網(wǎng)第6章CSS基礎(chǔ)主講教師：朱鐵櫻《Web前端開(kāi)發(fā)》

思維導(dǎo)圖6.1CSS概述隨著網(wǎng)頁(yè)制作技術(shù)的不斷發(fā)展，陳舊的CSS特性和標(biāo)準(zhǔn)已經(jīng)無(wú)法滿足現(xiàn)今的交互設(shè)計(jì)需求，開(kāi)發(fā)者往往需要更多的字體選擇、更方便的樣式效果、更絢麗的圖形動(dòng)畫(huà)。CSS3的出現(xiàn)，在不需要改變?cè)性O(shè)計(jì)結(jié)構(gòu)的情況下，增加了許多新特性，極大地滿足了開(kāi)發(fā)者的需求。

6.1CSS概述代碼繁瑣格式的一致性差可維護(hù)性差網(wǎng)頁(yè)現(xiàn)實(shí)效果缺乏動(dòng)態(tài)性與交互性HTML標(biāo)記的不足之處不利于代碼的閱讀維護(hù)困難

6.1CSS概述CSS提供了豐富的樣式font:屬性值;字體屬性顏色屬性背景屬性浮動(dòng)屬性邊框?qū)傩詂olor:屬性值;background:屬性值;float:屬性值;border:屬性值;CSS通常稱為CSS樣式或樣式表，主要用于設(shè)置HTML頁(yè)面中的文本內(nèi)容（字體、大小、對(duì)齊方式等）、圖片的外形（寬高、邊框樣式、邊距等）以及版面的布局等外觀顯示樣式。

6.1CSS概述

6.1CSS概述1996年CSS1定義了網(wǎng)頁(yè)的基本屬性：字體、顏色、補(bǔ)白、基礎(chǔ)選擇器等1998年在CSS1的基礎(chǔ)上添加了高級(jí)功能：浮動(dòng)和定位、部分高級(jí)選擇器2004年修改CSS2中的錯(cuò)誤，增加一些擴(kuò)展內(nèi)容發(fā)布時(shí)間是一個(gè)時(shí)間段，還沒(méi)定稿。各主流瀏覽器已經(jīng)支持其中的絕大部分特性。遵循模塊化開(kāi)發(fā)CSS1CSS2CSS2.1CSS3CSS發(fā)展史

6.1CSS概述由于各瀏覽器廠商對(duì)CSS3各屬性的支持程度不一樣，因此在標(biāo)準(zhǔn)尚未明確的情況下，會(huì)用廠商的前綴加以區(qū)分，通常把這些加上私有前綴的屬性稱之為“私有屬性”。各主流瀏覽器都定義了自己的私有屬性，以便讓用戶更好的體驗(yàn)CSS的新特性。私有前綴相關(guān)瀏覽器-msIE瀏覽器-webkitChrome瀏覽器、Safari（蘋(píng)果）-mozFirefox瀏覽器-oOpera瀏覽器推薦寫(xiě)法：把帶前綴的寫(xiě)在前面，最后再寫(xiě)一個(gè)不帶私有前綴的。

6.1CSS概述由于功能的加強(qiáng)，CSS3能夠用更少的圖片或腳本制作圖形化網(wǎng)站。在進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)時(shí)，減少標(biāo)簽的嵌套和圖片的使用數(shù)量，網(wǎng)頁(yè)頁(yè)面加載也會(huì)更快。CSS3的新功能幫我們摒棄了冗余的代碼結(jié)構(gòu)，遠(yuǎn)離很多JavaScript腳本或者Flash代碼。網(wǎng)頁(yè)設(shè)計(jì)者不再需要花大把時(shí)間去寫(xiě)腳本，極大的節(jié)約了開(kāi)發(fā)成本。節(jié)約成本提高性能CSS3優(yōu)勢(shì)如今大多數(shù)網(wǎng)頁(yè)都是遵循Web標(biāo)準(zhǔn)開(kāi)發(fā)的，即用HTML編寫(xiě)網(wǎng)頁(yè)結(jié)構(gòu)和內(nèi)容，而相關(guān)版面布局、文本或圖片的顯示樣式都使用CSS控制。6.2結(jié)構(gòu)與表現(xiàn)分離結(jié)構(gòu)與表現(xiàn)相分離是指在網(wǎng)頁(yè)設(shè)計(jì)中，HTML標(biāo)簽只用于搭建網(wǎng)頁(yè)的基本結(jié)構(gòu)，不使用標(biāo)簽屬性設(shè)置顯示樣式，所有的樣式交由CSS來(lái)設(shè)置。HTML身體CSS衣服6.3CSS語(yǔ)法基礎(chǔ)選擇器{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;}屬性和屬性值以“鍵值對(duì)”的形式出現(xiàn)，用英文“:”連接，多個(gè)“鍵值對(duì)”之間用英文“;”進(jìn)行區(qū)分。選擇器屬性屬性值屬性屬性值屬性屬性值聲明聲明聲明CSS樣式規(guī)則的結(jié)構(gòu)示意圖

6.3CSS語(yǔ)法基礎(chǔ)CSS樣式中的選擇器嚴(yán)格區(qū)分大小寫(xiě)，屬性和值不區(qū)分大小寫(xiě)，按照書(shū)寫(xiě)習(xí)慣一般將“選擇器、屬性和值”都采用小寫(xiě)的方式。多個(gè)屬性之間必須用英文狀態(tài)下的分號(hào)隔開(kāi)，最后一個(gè)屬性后的分號(hào)可以省略，但是為了便于增加新樣式最好保留。

6.3CSS語(yǔ)法基礎(chǔ)如果屬性的值由多個(gè)單詞組成且中間包含空格，則必須為這個(gè)屬性值加上英文狀態(tài)下的引號(hào)。在CSS代碼中空格是不被解析的，花括號(hào)以及分號(hào)前后的空格可有可無(wú)。呈現(xiàn)效果一樣代碼塊1：代碼塊2：可讀性更高代碼塊3：

6.4CSS注釋CSS注釋使用"/*"和"*/"符號(hào)表示注釋，符號(hào)之間的內(nèi)容不會(huì)被瀏覽器解析，主要用于對(duì)程序進(jìn)行補(bǔ)充說(shuō)明，CSS注釋有多行注釋和單行注釋兩種，都必須以/*開(kāi)始、以*/結(jié)束，中間加入注釋內(nèi)容。

6.5在網(wǎng)頁(yè)中嵌入CSS行內(nèi)式也稱為內(nèi)聯(lián)樣式，是通過(guò)標(biāo)記的style屬性來(lái)設(shè)置元素的樣式，其基本語(yǔ)法格式如下:行內(nèi)式內(nèi)嵌式鏈入式<標(biāo)記名style="屬性1:屬性值1;屬性2:屬性值2;>

內(nèi)容

</標(biāo)記名>內(nèi)嵌式是將CSS代碼集中寫(xiě)在HTML文檔的<head>頭部標(biāo)記中，并且用<style>標(biāo)簽定義，其基本語(yǔ)法格式如下:<head><styletype="text/css">

選擇器{屬性1:屬性值1;屬性2:屬性值2;}</style></head>行內(nèi)式內(nèi)嵌式鏈入式

6.5在網(wǎng)頁(yè)中嵌入CSS鏈入式是將所有的樣式放在一個(gè)或多個(gè)以.css為擴(kuò)展名的外部樣式表文件中，通過(guò)<link/>標(biāo)記將外部樣式表文件鏈接到HTML文檔中，其基本語(yǔ)法格式如下:<head><linkhref="CSS文件的路徑"

type="text/css"rel="stylesheet"/></head>

6.5在網(wǎng)頁(yè)中嵌入CSS行內(nèi)式內(nèi)嵌式鏈入式

6.6CSS三大特性CSS是層疊式樣式表的簡(jiǎn)稱，層疊性和繼承性是其基本特征。所謂層疊性是指多種CSS樣式的疊加。相同選擇器設(shè)置相同的樣式會(huì)覆蓋另一種沖突樣式。層疊性原則：樣式?jīng)_突，遵循就近原則樣式不沖突，不會(huì)層疊

6.6CSS三大特性所謂繼承性是指書(shū)寫(xiě)CSS樣式表時(shí)，子標(biāo)簽會(huì)繼承父標(biāo)簽的某些樣式。htmlheadstyletitlebodyh1h1ppppemememimg

6.6CSS三大特性當(dāng)使用

p元素作為選擇器編寫(xiě)一個(gè)字體相關(guān)的樣式規(guī)則時(shí)，規(guī)則將應(yīng)用于文檔中所有的段落和這些段落包含的內(nèi)聯(lián)文本。與字體相關(guān)的屬性不能應(yīng)用于圖像。htmlheadstyletitlebodyh1h1ppppemememimg

6.6CSS三大特性以下屬性不具有繼承性邊框?qū)傩詢?nèi)/外邊距屬性背景屬性定位屬性布局屬性元素寬高屬性01、文字控制屬性基本都可以繼承；02、標(biāo)題文本h不會(huì)繼承父級(jí)的文字大小，因?yàn)樽陨碛心J(rèn)字號(hào)樣式；03、超鏈接a標(biāo)簽不能繼承父級(jí)元素的顏色color，因?yàn)樽陨碛蓄伾珜傩裕?4、應(yīng)用于具體元素的任何屬性將覆蓋該屬性的繼承值。

6.6CSS三大特性定義CSS樣式時(shí)，使用兩個(gè)或更多規(guī)則在同一元素上，就會(huì)產(chǎn)生優(yōu)先級(jí)。選擇器相同，則執(zhí)行層疊性選擇器不同，則根據(jù)選擇器權(quán)重執(zhí)行定義一個(gè)!important命令，該命令被賦予最大的優(yōu)先級(jí)，大于一切。綜述：?行內(nèi)樣式>內(nèi)嵌樣式>外部鏈入樣式>瀏覽器默認(rèn)樣式?!important>內(nèi)聯(lián)>ID>偽類|類|屬性>標(biāo)簽>偽元素>通配符>繼承如果優(yōu)先級(jí)

溫馨提示

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

最新文檔

評(píng)論

0/150

提交評(píng)論