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

下載本文檔

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

文檔簡介

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

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

Wide

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

Resource

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

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

（英文Domain

Name

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

(Hypertext

transfer

protocol的縮寫)

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

Wide

Web

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

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

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

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

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

空格符

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

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

<ul><li>列表項1</li><li>列表項2</li><li>

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

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

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

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

密碼：<inputtype="password"name="password"/><inputtype="submit"value="登錄"/><inputtype="reset"></form>4.4表單的基本概念瀏覽網(wǎng)頁時經(jīng)常會看到輸入框、單選按鈕、提交按鈕、重置按鈕等，這些輸入框和按鈕都屬于表單控件。要想在網(wǎng)頁中定義這些表單控件就需要使用<input/>標簽。input控件的語法格式<inputtype="控件類型"/>type屬性取值有多種，用于指定不同的表單控件類型。4.5input表單控件<input/>標簽的常用屬性如下。屬性屬性值描述typetext單行文本輸入框password密碼輸入框radio單選按鈕checkbox復選框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控件中的默認文本內(nèi)容size正整數(shù)input控件在頁面中的顯示寬度readonlyreadonly該控件內(nèi)容為只讀（不能編輯修改）disableddisabled第一次加載頁面時禁用該控件（顯示為灰色）checkedchecked定義選擇控件默認被選中的項maxlength正整數(shù)控件允許輸入的最多字符數(shù)<input/>標簽的常用屬性如下。4.5input表單控件案例演示4.5input表單控件通過<textarea>標簽可以輕松地創(chuàng)建多行文本輸入框。textarea控件的語法格式<textareacols="每行中的字符數(shù)"rows="顯示的行數(shù)">

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

HTML5進階《Web前端開發(fā)》HTML5未來(2012)分化點分歧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語言版本變遷HTML5的文檔聲明HTML5沒有指定的具體的版本，表示最新的

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

HTML5表單2.輸入框自動獲取焦點autofocus屬性用于指定頁面加載后是否自動獲取焦點，將autofocus屬性的屬性值指定為true時，頁面加載完畢后會自動獲取該焦點。案例演示5.4

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

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

<optionvalue="蘋果">

<optionvalue="香蕉">

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

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

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

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

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

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

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

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

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

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

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

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

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

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

支持支持支持

MPEG4支持

支持支持WebM

支持支持支持

音頻格式OggVorbis

支持支持支持

MP3支持

支持支持Wav

支持支持

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

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

在設置src屬性時，應該使用相對路徑或絕對路徑，避免使用相對于當前頁面的路徑。3.

使用controls屬性會顯示默認的播放器控件，但是在移動設備上默認控件可能無法顯示或不夠友好。此時可以使用JavaScript自定義控件。4.

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

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

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

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

思維導圖6.1CSS概述隨著網(wǎng)頁制作技術的不斷發(fā)展，陳舊的CSS特性和標準已經(jīng)無法滿足現(xiàn)今的交互設計需求，開發(fā)者往往需要更多的字體選擇、更方便的樣式效果、更絢麗的圖形動畫。CSS3的出現(xiàn)，在不需要改變原有設計結構的情況下，增加了許多新特性，極大地滿足了開發(fā)者的需求。

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

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

6.1CSS概述

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

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

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

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

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

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

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

內(nèi)容

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

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

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

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

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

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

6.6CSS三大特性所謂繼承性是指書寫CSS樣式表時，子標簽會繼承父標簽的某些樣式。htmlheadstyletitlebodyh1h1ppppemememimg

6.6CSS三大特性當使用

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

6.6CSS三大特性以下屬性不具有繼承性邊框?qū)傩詢?nèi)/外邊距屬性背景屬性定位屬性布局屬性元素寬高屬性01、文字控制屬性基本都可以繼承；02、標題文本h不會繼承父級的文字大小，因為自身有默認字號樣式；03、超鏈接a標簽不能繼承父級元素的顏色color，因為自身有顏色屬性；04、應用于具體元素的任何屬性將覆蓋該屬性的繼承值。

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

溫馨提示

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

評論

0/150

提交評論