網(wǎng)頁設(shè)計基礎(chǔ)ppt課件(完整版)

1、第1章網(wǎng)頁設(shè)計基礎(chǔ)網(wǎng)絡相關(guān)術(shù)語 瀏覽器概述 網(wǎng)絡的基本概念 認識網(wǎng)頁和網(wǎng)站 HTML 學習目標熟悉了解了解熟悉常用的瀏覽器和HTML語言12了解網(wǎng)頁和網(wǎng)站，能夠了解二者之間的聯(lián)系了解不同類型網(wǎng)站的特點和常用的網(wǎng)頁開發(fā)工具3 目錄1.1認識網(wǎng)頁和網(wǎng)站點擊查看本小節(jié)知識架構(gòu)1.2HTML概述1.3瀏覽器概述點擊查看本小節(jié)知識架構(gòu)1.4網(wǎng)站與網(wǎng)頁開發(fā)工具 知識架構(gòu)1.1 認識網(wǎng)頁和網(wǎng)站1.1.1網(wǎng)頁和網(wǎng)站基本概念1.1.2網(wǎng)頁構(gòu)成要素1.1.3網(wǎng)站構(gòu)成1.1.4網(wǎng)站類型 知識架構(gòu)1.2 HTML概述1.2.1HTML5的概念1.2.2HTML文檔的格式 知識架構(gòu)1.3 瀏覽器概述1.3.1HTTP協(xié)

2、議和HTTPS協(xié)議簡介1.3.2常用的瀏覽器1.4 網(wǎng)站與網(wǎng)頁開發(fā)工具 知識架構(gòu).21.4.3Adobe DreamweaverVisual Studio CodeSublime Text1.4.4jetbrains WebStorm從本章開始我們將逐步深入的講解網(wǎng)頁、網(wǎng)站的相關(guān)知識和技能。隨著互聯(lián)網(wǎng)的高速發(fā)展，網(wǎng)站和網(wǎng)頁成為了人們在網(wǎng)上交流的重要手段，每天都會有大量的網(wǎng)站出現(xiàn)在互聯(lián)網(wǎng)上。人們可以利用網(wǎng)站展示自己，也可以在網(wǎng)站上電子購物、瀏覽最新資訊等。我們通過學習了相關(guān)技術(shù)，也可以建立一個自己的網(wǎng)站。那么到底什么是網(wǎng)頁和網(wǎng)站呢？它們之間又有什么關(guān)系呢？本章主要介紹網(wǎng)頁和網(wǎng)站的

3、基本概念、HTML知識、瀏覽器知識、網(wǎng)站和網(wǎng)頁的開發(fā)工具等知識。章節(jié)概要1.1 認識網(wǎng)頁和網(wǎng)站1.1.1 網(wǎng)頁和網(wǎng)站的概念網(wǎng)頁（Web Page）就是一個文檔，通常由HTML語言編寫，能夠被瀏覽器解析和顯示。用戶在瀏覽器中輸入一個URL（Uniform Resource Location）地址就能訪問網(wǎng)頁。1、認識網(wǎng)頁1.1 網(wǎng)頁和網(wǎng)站概述1.1.2 網(wǎng)頁的構(gòu)成要素文字圖像超鏈接多媒體1.1 網(wǎng)頁和網(wǎng)站概述1.1.2 網(wǎng)頁的構(gòu)成要素文字是網(wǎng)頁信息的主體，能夠準確地傳達網(wǎng)頁要表達的信息，是網(wǎng)頁中不可或缺的構(gòu)成要素，純文本的存儲空間也很小，在網(wǎng)絡傳輸中具有優(yōu)勢，也有利于搜索引擎采集。1、文字1.1

4、 網(wǎng)頁和網(wǎng)站概述1.1.2 網(wǎng)頁的構(gòu)成要素圖像也是網(wǎng)頁中必不可少的元素，相比文字，圖像更加直觀更具有視覺沖擊力，能夠很快吸引訪問者的眼球。適當應用圖片可以避免網(wǎng)頁中純文字給人的枯燥感，為網(wǎng)頁增加活力，使網(wǎng)頁更加生動。網(wǎng)頁上使用的圖像一般為JPG、PNG和GIF格式。2、圖像1.1 網(wǎng)頁和網(wǎng)站概述1.1.2 網(wǎng)頁的構(gòu)成要素超鏈接是從一個網(wǎng)頁到其他目標的指向，其他目標通常是一個網(wǎng)頁，也可以是一個圖像、文件、電子郵件地址甚至是同一個網(wǎng)頁中的其他位置。網(wǎng)頁中的超鏈接通常設(shè)置在文字上，也可以是圖像、視頻或按鈕等，當我們把鼠標移到超鏈接上，指針會變成手型，單擊鼠標左鍵，會加載超鏈接指向的目標內(nèi)容。一個網(wǎng)站

5、包含很多個網(wǎng)頁，可以利用超鏈接從一個網(wǎng)頁跳轉(zhuǎn)到另一個網(wǎng)頁。網(wǎng)頁中的超鏈接也需要進行樣式設(shè)計，以滿足網(wǎng)頁的美觀需求。3、超鏈接1.1 網(wǎng)頁和網(wǎng)站概述1.1.2 網(wǎng)頁的構(gòu)成要素為了增加網(wǎng)頁的生動性，有時候要增加一些多媒體元素，比如視頻、音頻、動畫等，但是多媒體元素要適量，太多了反而會讓訪問者眼花繚亂，還會影響網(wǎng)頁的打開速度。4、多媒體1.1 網(wǎng)頁和網(wǎng)站概述1.1.3 網(wǎng)站構(gòu)成通常一個網(wǎng)站包含很多個相關(guān)的網(wǎng)頁，但根據(jù)網(wǎng)頁的內(nèi)容，可以把這些網(wǎng)頁分為三類：首頁、列表頁和詳情頁。認識網(wǎng)站1.1 網(wǎng)頁和網(wǎng)站概述1.1.3 網(wǎng)站構(gòu)成首頁（homepage）也稱為主頁，是訪問者在瀏覽器地址欄中輸入網(wǎng)址回車后看到

6、的網(wǎng)頁，通常它決定了訪問者對網(wǎng)站的第一印象，所以首頁的設(shè)計非常重要，不僅要把網(wǎng)站最重要的內(nèi)容在首頁展示出來，還要兼顧美觀，要給訪問者留下深刻印象，引起他們的興趣。當然，網(wǎng)站首頁還要兼顧導航功能，通過超鏈接引導訪問者瀏覽網(wǎng)站的其他頁面。靜態(tài)網(wǎng)站的首頁文件通常命名為index.html或default.html。1、首頁1.1 網(wǎng)頁和網(wǎng)站概述1.1.3 網(wǎng)站構(gòu)成列表頁一般用于展示新聞列表或產(chǎn)品列表信息，有的還可以對列表展示的信息按條件進行篩選顯示，列表頁在設(shè)計時要注重展示的排版效果，合理安排文字和圖片。2、列表頁1.1 網(wǎng)頁和網(wǎng)站概述1.1.3 網(wǎng)站構(gòu)成詳情頁對應列表頁，當訪問者在列表頁上想了解某

7、條新聞或某個產(chǎn)品的詳細信息時，單擊打開詳情頁，會展示該條新聞或產(chǎn)品的詳細信息，商城類的網(wǎng)站一般在詳情頁中提供購買功能。3、詳情頁1.1 網(wǎng)頁和網(wǎng)站概述1.1.4 網(wǎng)站類型門戶類網(wǎng)站主要功能是提供信息資訊和綜合服務，屬于綜合性質(zhì)的網(wǎng)站，網(wǎng)站內(nèi)容的覆蓋面廣，面向的用戶群體也很多，在網(wǎng)站設(shè)計制作方面更加高要求、精細化。比如新浪、網(wǎng)易、搜狐等都屬于門戶類網(wǎng)站。1、門戶類網(wǎng)站1.1 網(wǎng)頁和網(wǎng)站概述1.1.4 網(wǎng)站類型互聯(lián)網(wǎng)是企業(yè)進行形象宣傳和網(wǎng)絡營銷的平臺，很多企業(yè)都會建立一個企業(yè)網(wǎng)站，讓別人能從網(wǎng)上了解自己，不但對企業(yè)的形象是很好的宣傳，同時也可以促進產(chǎn)品的網(wǎng)絡銷售。企業(yè)類網(wǎng)站的設(shè)計要符合企業(yè)的文化，

8、能體現(xiàn)出企業(yè)的特點。2、企業(yè)類網(wǎng)站1.1 網(wǎng)頁和網(wǎng)站概述1.1.4 網(wǎng)站類型相比線下傳統(tǒng)的實體店，電商商城類網(wǎng)站具有購物方便和快捷的優(yōu)勢，買家只需要在網(wǎng)上選擇心儀的商品下單，便可在家收取貨物，電商類網(wǎng)站具有省事、省時、省心、高效等特點，受到越來越多的人歡迎。電商類網(wǎng)站的網(wǎng)頁的內(nèi)容必須突出重點，避免夸張，裝飾部分不宜太多，以免喧賓奪主。在內(nèi)容編排上必須簡潔明了，便于瀏覽。3、電商類網(wǎng)站1.1 網(wǎng)頁和網(wǎng)站概述1.1.4 網(wǎng)站類型視頻類網(wǎng)站的主要內(nèi)容是視頻文件，這些視頻可以是網(wǎng)站發(fā)布的，也可以是用戶上傳的。訪問者可以在網(wǎng)站上觀看視頻，還可以進行互動、評論、分享等操作。隨著移動互聯(lián)網(wǎng)的持續(xù)發(fā)展，視頻類

9、網(wǎng)站的用戶越來越多，比如愛奇藝、優(yōu)酷等都屬于視頻類網(wǎng)站。4、視頻類網(wǎng)站1.1 網(wǎng)頁和網(wǎng)站概述1.1.4 網(wǎng)站類型個人網(wǎng)站是個人為某些愛好、科普或展示自己等創(chuàng)建的網(wǎng)站，給相同愛好的人提供一個了解知識、相互交流的平臺或讓其他人了解自己。個人網(wǎng)站一般有比較鮮明的特點，個性較強，沒有太多的設(shè)計限制。5、個人網(wǎng)站1.2 HTML概述HTML是Hypertext Markup Language（超文本標記語言）的縮寫，是一種用來編寫超文本文檔的標記語言，HTML是由Web的發(fā)明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年創(chuàng)立的一種標記語言，它最早源于SGML（

10、Standard General Markup Language，標準通用化標記語言）的應用。用HTML編寫的超文本文檔稱為HTML文檔，它能獨立于各種操作系統(tǒng)平臺(如UNIX， Windows等)。利用HTML將所需表達的信息按某種規(guī)則寫成HTML文件，再經(jīng)過瀏覽器的解析，將HTML文件翻譯并展示出來，就是我們所見到的網(wǎng)頁。到目前為止，HTML已經(jīng)發(fā)展了多個版本，其中最著名的就是HTML4，2010年又推出HTML5.0，一經(jīng)推出就受到各大瀏覽器的支持。1.2.1 什么是HTML5.0HTML5是HTML的最新修訂版本，是對以前版本的繼承和發(fā)展，舊的HTML標簽在HTML5中依然適用。HTM

11、L5 技術(shù)結(jié)合了 HTML4.01 的相關(guān)標準并革新，符合現(xiàn)代網(wǎng)絡發(fā)展要求，在 2008 年正式發(fā)布。HTML5 由不同的技術(shù)構(gòu)成，其在互聯(lián)網(wǎng)中得到了非常廣泛的應用，提供更多增強網(wǎng)絡應用的標準機。1.2 HTML概述1.2.2 HTML文檔的格式HTML文檔的基本格式主要包括：文檔類型聲明、根標記、頭部標記和主體標記，具體文檔結(jié)構(gòu)如下所示。1.2 HTML概述Document1.2 HTML概述1.2.2 HTML文檔的格式標記位于文檔的最前面，用于向瀏覽器說明當前文檔使用哪種HTML或XHTML標準規(guī)范。只有這樣瀏覽器才能將該網(wǎng)頁作為有效的HTML或XHTML文檔，并按指定的文檔類型進行解析

12、。1、標記1.2 HTML概述1.2.2 HTML文檔的格式標記位于標記之后，稱為根標記，用于告知瀏覽器其自身是一個HTML文檔，標記標志著HTML文檔的開始，標記標志著HTML文檔的結(jié)束，在它們之間是文檔的頭部和主體內(nèi)容。2、標記1.2 HTML概述1.2.2 HTML文檔的格式標記用于定義HTML文檔的頭部信息，也稱頭部標記，主要用來封裝其他位于文檔頭部的標記，例如、及等，用來描述文檔的標題、作者以及與其他文檔的關(guān)系。需要注意的是，一個HTML文檔只能含有一對標記，絕大多數(shù)文檔頭部包含的數(shù)據(jù)都不會真正作為內(nèi)容顯示在頁面中。3、標記1.2 HTML概述1.2.2 HTML文檔的格式標記用于定

13、義HTML文檔所要顯示的內(nèi)容，也稱為主體標記。瀏覽器中顯示的所有文本、圖像、音頻和視頻等信息都必須位于標記內(nèi)，標記中的信息才是最終展示給用戶看的。一個HTML文檔只能有一對標記，且標記必須在標記內(nèi)，位于頭部標記之后，與標記是并列關(guān)系。4、標記1.3 瀏覽器概述瀏覽器是瀏覽網(wǎng)頁的必備軟件，目前常用的瀏覽器有IE瀏覽器（Internet Explorer）、谷歌瀏覽器（Google Chrome）、火狐瀏覽器（Mozilla Firefox）、歐朋瀏覽器（Opera）和Safari瀏覽器等。1.3.1 http協(xié)議和https協(xié)議簡介http協(xié)議是Hyper Text Transfer Proto

14、col（超文本傳輸協(xié)議）的縮寫，是用于從萬維網(wǎng)（World Wide Web，www）服務器傳輸超文本到本地瀏覽器的傳送協(xié)議。當我們在瀏覽器的地址欄輸入一個地址的時候，就能夠訪問服務器的某個頁面，這個過程本身就是兩個應用程序之間的交互，一個應用程序是瀏覽器，另一個應用程序是服務器。瀏覽器作為http客戶端通過URL向http服務端即WEB服務器發(fā)送所有請求。Web服務器根據(jù)接收到的請求后，向客戶端發(fā)送響應信息。1.3 瀏覽器概述1.3.1 http協(xié)議和https協(xié)議簡介https協(xié)議（HyperText Transfer Protocol over Secure Socket Layer）是

15、以安全為目標的http通道，在http的基礎(chǔ)上通過傳輸加密和身份認證保證了傳輸過程的安全性.https在http的基礎(chǔ)下加入SSL層 （Secure Socket Layer，安全套接字層），https的安全基礎(chǔ)是 SSL，因此加密的詳細內(nèi)容就需要 SSL。https存在不同于http的默認端口及一個加密/身份驗證層（在http與 TCP 之間）。這個系統(tǒng)提供了身份驗證與加密通訊方法，它被廣泛用于萬維網(wǎng)上安全敏感的通訊，例如交易支付等方面。1.3 瀏覽器概述1.3 瀏覽器概述1.3.2 常用瀏覽器IE瀏覽器是微軟公司推出的一款網(wǎng)頁瀏覽器。IE自1995年誕生以來，共有11個主版本。IE瀏覽器是

16、直接綁定在Windows操作系統(tǒng)中，一般不需要單獨下載和安裝。目前還有一些用戶在使用低版本的IE瀏覽器，所以在網(wǎng)頁設(shè)計中，要充分考慮這些用戶的兼容性，也就是說，設(shè)計的網(wǎng)頁要在IE瀏覽器低版本比如IE6、IE7等中測試兼容性。1、IE瀏覽器（Internet Explorer）1.3 瀏覽器概述1.3.2 常用瀏覽器谷歌瀏覽器是一款由Google公司開發(fā)一款設(shè)計簡單、高效的網(wǎng)頁瀏覽器，該瀏覽器基于其他開源軟件撰寫。早期谷歌瀏覽器采用WebKit內(nèi)核，2013年后采用Blink內(nèi)核。谷歌瀏覽器自帶開發(fā)者工具，也可以實現(xiàn)代碼修改并預覽。在谷歌瀏覽器右上角的選項中單擊選擇“更多工具-開發(fā)者工具”（或者

17、按快捷鍵F12），打開開發(fā)者工具后，在瀏覽器右側(cè)出現(xiàn)一個調(diào)試面板。包括網(wǎng)頁HTML調(diào)試查看和CSS代碼調(diào)試，還有一些其他資源面板。谷歌瀏覽器調(diào)試的好處是可以實現(xiàn)元素定位，把鼠標放在指定的元素上，就可以在瀏覽器的上面視圖中加灰突出顯示所對應的元素。2、谷歌瀏覽器（Google Chrome）1.3 瀏覽器概述1.3.2 常用瀏覽器火狐瀏覽器是一個自由及開放源代碼的網(wǎng)頁瀏覽器，使用Gecko排版引擎，支持多種操作系統(tǒng)，如Windows、Mac OS X及GNU/Linux等。Firebug是火狐瀏覽器一個開發(fā)插件，主要用來調(diào)試瀏覽器的兼容性，它集HTML查看和編輯、JavaScript控制臺、網(wǎng)絡

18、狀況監(jiān)視器于一體，是開發(fā)HTML、CSS和JavaScript的好幫手。新版火狐瀏覽器中已經(jīng)將Firebug整合到“Web開發(fā)者”工具中，用戶可以在火狐瀏覽器菜單欄選擇“打開菜單-Web開發(fā)者”選項，再選擇“查看器”命令，即可查看網(wǎng)頁的各個模塊。3、火狐瀏覽器（Mozilla Firefox）1.4 網(wǎng)站與網(wǎng)頁開發(fā)工具網(wǎng)頁開發(fā)工具很多，常用的編輯器軟件比如記事本都可以用來進行HTML編碼和制作網(wǎng)頁，但記事本沒有任何代碼提示功能，所以使用不太方便。網(wǎng)站開發(fā)時應該選擇效率高的工具，常用的網(wǎng)頁開發(fā)工具有Adobe Dreamweaver、Visual Studio Code、Sublime Text

19、和WebStorm等。1.4 網(wǎng)站與網(wǎng)頁開發(fā)工具1.4 網(wǎng)站與網(wǎng)頁開發(fā)工具1.4 網(wǎng)站與網(wǎng)頁開發(fā)工具1.4.1 Adobe DreamweaverAdobe Dreamweaver，簡稱DW，中文名稱 夢想編織者，Dreamweaver是集網(wǎng)頁制作和管理網(wǎng)站于一身的所見即所得網(wǎng)頁代碼編輯器。利用對 HTML、CSS、JavaScript等內(nèi)容的支持，設(shè)計師和程序員可以方便快速地進行網(wǎng)頁設(shè)計。目前常用的版本是Adobe Dreamweaver CS6和Adobe Dreamweaver CC。1.4 網(wǎng)站與網(wǎng)頁開發(fā)工具1.4.2 Visual Studio CodeVisual Studio C

20、ode是Microsoft開發(fā)的一個可以運行于 Mac OS X、Windows和 Linux 之上的針對于編寫現(xiàn)代 Web 和云應用的跨平臺源代碼編輯器。這款軟件具備了很多特性，包括語法高亮（syntax high lighting）、可定制的熱鍵綁定（customizable keyboard bindings）、括號匹配（bracket matching）以及代碼片段收集（snippets）等。該編輯器支持多種語言和文件格式的編寫，目前已經(jīng)支持了37種語言或文件。1.4 網(wǎng)站與網(wǎng)頁開發(fā)工具1.4.3 Sublime TextSublime Text 是一個跨平臺的編輯器，同時支持Wind

21、ows、Linux、Mac OS X等操作系統(tǒng)，是由程序員Jon Skinner于2008年1月份所開發(fā)出來。Sublime Text具有漂亮的用戶界面和強大的功能。Sublime Text還具有良好的擴展功能，官方稱之為安裝包（Package），可以根據(jù)需要安裝和卸載安裝包。1.4 網(wǎng)站與網(wǎng)頁開發(fā)工具1.4.4 jetbrains WebStormWebStorm 是jetbrains公司的一款開發(fā)工具，被開發(fā)者譽為“Web前端開發(fā)神器”、“最強大的HTML5編輯器”、“最智能的JavaScript IDE”等。可以訪問WebStorm的官方網(wǎng)站/webstorm/download/下載最新

22、版本的安裝包，下載后根據(jù)提示按步驟安裝即可。1.4 網(wǎng)站與網(wǎng)頁開發(fā)工具我們在設(shè)計一個網(wǎng)站時，首先要確定網(wǎng)站主題、規(guī)劃網(wǎng)站結(jié)構(gòu)、尋找素材、設(shè)計網(wǎng)頁效果圖等，這些工作完成后，我們要創(chuàng)建網(wǎng)站文件夾，開始利用Adobe Dreamweaver、Sublime Text等軟件制作首頁和子頁面。下面通過一個簡單的例子來說明制作網(wǎng)站和頁面的基本過程。案例1-1設(shè)計一個網(wǎng)站和網(wǎng)站的起始頁面在本地硬盤中創(chuàng)建一個網(wǎng)站文件夾，如chapter1，用來存放網(wǎng)站中所有的文件，在chapter1文件夾內(nèi)再新建images、css、video、audio、fonts等子文件夾，用來分類存放圖片、樣式文件、視頻文件、音頻文件

23、和字體文件等，具體網(wǎng)站文件夾結(jié)構(gòu)如圖1-5所示。1、創(chuàng)建網(wǎng)站文件夾案例1-1設(shè)計一個網(wǎng)站和網(wǎng)站的起始頁面打開Adobe Dreamweaver軟件，選擇“站點-新建站點”，在彈出的對話框中輸入站點名稱，單擊“瀏覽文件夾”圖標，選擇D盤的網(wǎng)站文件夾，如圖1-6所示。2、創(chuàng)建站點案例1-1設(shè)計一個網(wǎng)站和網(wǎng)站的起始頁面在Adobe Dreamweaver軟件中選擇菜單“文件-新建”命令，在打開的對話框中選擇“空白頁”，在“文檔類型”的下拉列表中選擇“HTML 5”，如圖1-8所示。單擊“創(chuàng)建”按鈕即創(chuàng)建了一個空白頁面，單擊菜單“文件-保存”命令，把網(wǎng)頁以文件名index.html保存在網(wǎng)站文件夾內(nèi)，

24、如圖1-9所示。3、創(chuàng)建頁面案例1-1設(shè)計一個網(wǎng)站和網(wǎng)站的起始頁面本章首先介紹了網(wǎng)站和網(wǎng)頁的概念、網(wǎng)頁的組成元素和網(wǎng)站的構(gòu)成及類型，接著又介紹了HTML和瀏覽器的基本知識，還介紹了常用的網(wǎng)站與網(wǎng)頁開發(fā)工具，最后通過一個案例講解了設(shè)計一個網(wǎng)站的基本過程。通過本章的學習，讀者應該能理解網(wǎng)站和網(wǎng)頁的相關(guān)知識以及HTML文件的結(jié)構(gòu)，也能掌握網(wǎng)站開發(fā)的基本步驟，為后續(xù)章節(jié)的學習打好基礎(chǔ)。本章小結(jié)推薦兩個學習網(wǎng)頁設(shè)計的網(wǎng)站：1、菜鳥教程 2、W3School 第 2 章 基本的HTML標簽文檔頭部標簽圖像標簽HTML標簽語法文本控制標簽HTML列表標簽超級鏈接標簽HTML5新增結(jié)構(gòu)性標簽 學習目標掌握HT

25、ML5標簽的語法格式12熟練使用文檔頭部標簽文本控制標簽圖像標簽了解HTML5新增結(jié)構(gòu)性標簽3掌握了解掌握掌握熟練使用列表標簽超級鏈接標簽4本章將對HTML5中，基本元素標簽與新增元素標簽的作用以及標準屬性的使用方法予以詳細介紹。HTML5中引入了很多新的標簽元素和屬性，這是HTML5的一大亮點，這些新增元素使文檔結(jié)構(gòu)更加清晰明確，屬性則使標簽的功能更加強大，掌握這些元素和屬性是正確使用 HTML5構(gòu)建網(wǎng)頁的基礎(chǔ)。章節(jié)概要 目錄2.1HTML標簽語法2.2文檔頭部標簽2.3文本控制標簽2.4圖像標簽2.5列表標簽2.6超級鏈接標簽2.7音頻和視頻標簽2.8HTML5新增結(jié)構(gòu)性標簽 知識架構(gòu)2.

26、1 HTML標簽語法.2單標簽和雙標簽注釋標簽2.1.3標簽的屬性2.1 HTML標簽語法什么是標簽？所謂標簽就是放在“”標記符中表示某個功能的編碼命令，也稱為HTML標記或HTML元素。2.1.1 單標簽和雙標簽雙標簽單標簽雙標簽也稱體標簽，是指由開始和結(jié)束兩個標簽符組成的標簽。單標簽也稱空標簽，是指用一個標簽符號即可完整地描述某個功能的標簽。內(nèi)容 表示該標簽的作用開始，一般稱為“開始標簽表示該標簽的作用結(jié)束，一般稱為“結(jié)束標簽”注釋標簽如果需要在HTML文檔中不需要顯示在頁面中的注釋文字，就需要使用注釋標簽。2.1.3 標簽的屬性標簽的屬性字體位置字號顏色語法格式 內(nèi)容 以

27、一段代碼為例，分析標簽的屬性標題文本align為屬性名center為屬性值，表示標題文本居中對齊2.1.3 標簽的屬性2.1.3 標簽的屬性以一段代碼為例，分析嵌套結(jié)構(gòu) 更行時間：2013年09月28日14時08分 來源： 傳智播客 標簽中包含標簽標簽中又包含了一個內(nèi)層的標簽在嵌套結(jié)構(gòu)中，HTML元素的樣式總是遵從“就近原則”。2.1.3 標簽的屬性例如： 我們正在學習標簽的嵌套。 我們正在學習標簽的嵌套。 【結(jié)論】在標簽的嵌套過程中，必須先結(jié)束最靠近內(nèi)容的標簽，再按照由內(nèi)及外的順序依次關(guān)閉標簽。 知識架構(gòu)2.2文檔頭部標簽.2title標簽meta標簽2.2.3link標簽H

28、TML5文檔頭部相關(guān)標簽標簽用于定義HTML頁面的標題，即給網(wǎng)頁取一個名字，必須位于標簽之內(nèi)。標簽用于定義頁面的元信息，可重復出現(xiàn)在頭部標簽中。在中使用標簽可引用外部文件，一個頁面允許使用多個標簽引用多個外部文件。2.2.1 title標簽一個HTML文檔只能含有一對標簽，之間的內(nèi)容將顯示在瀏覽器窗口的標題欄中。網(wǎng)頁標題名稱基本語法格式：2.2.2 meta標簽meta定義頁面參數(shù)設(shè)置網(wǎng)頁關(guān)鍵字設(shè)置網(wǎng)頁描述設(shè)置網(wǎng)頁作者設(shè)置字符集設(shè)置頁面自動刷新與跳轉(zhuǎn)2.2.3 link標簽基本語法格式： 知識架構(gòu)2.3文本控制標簽.2標題和段落標簽文本樣式標簽2.3.3格式化文本標簽2.3.4

29、特殊字符標簽案例文本控制標簽綜合應用2.3.1標題和段落標簽h1h2h3h4h5h6標題標簽2.3.1標題和段落標簽段落標簽主要用于把文字有條理地顯示出來基本語法格式段落文本2.3.1標題和段落標簽換行標簽用于實現(xiàn)段落強制換行的效果。換行標簽的效果2.3.2 文本樣式標簽文本樣式標簽用來控制網(wǎng)頁中文本的字體、字號和顏色。基本語法格式文本內(nèi)容 2.3.2 文本樣式標簽文本樣式標簽常用屬性62.3.2 文本樣式標簽顏色屬性值值屬性顏色名通過顏色名指定文本顏色（例如：“red”）/html/html-colornames.html十六進制顏色值通過十六進制顏色值指定文本顏色（例如：“#ff0000”

30、）RGB顏色值通過RGB顏色值指定文本顏色（例如：“rgb(255,0,0)”）2.3.3 格式化文本標簽2.3.4 特殊字符標簽2.3.5 水平線標簽水平線標簽的格式為：示例如下所示。文本控制標簽綜合應用案例常用屬性語法 知識架構(gòu)2.4圖像標簽.2支持的圖像格式絕對路徑和相對路徑2.4.3 img標簽案例圖像標簽的綜合應用2.4.1 支持的圖像格式用法GIFPNGJPGPNGJPGGIF最突出的地方就是它支持動畫，同時GIF也是一種無損的圖像格式，也就是說修改圖片之后，圖片質(zhì)量幾乎沒有損失。再加上GIF支持透明（全透明或全不透明），因此很適合在互聯(lián)網(wǎng)上使用。GIF格式常常用于

31、Logo、小圖標及其他色彩相對單一的圖像。JPGSVG2.4.1 支持的圖像格式用法GIFPNGJPGSVGPNG包括PNG-8和真色彩PNG（PNG-24和PNG-32）。相對于GIF，PNG最大的優(yōu)勢是體積更小，支持alpha透明（全透明，半透明，全不透明），并且顏色過渡更平滑，但PNG不支持動畫。圖片保存為PNG-8 會在同等質(zhì)量下獲得比GIF更小的體積JPGJPG2.4.1 支持的圖像格式用法GIFPNGJPGJPGSVGJPG所能顯示的顏色比GIF和PNG要多的多，可以用來保存超過256種顏色的圖像，但是JPG是一種有損壓縮的圖像格式，這就意味著每修改一次圖片都會造成一些圖像數(shù)據(jù)的丟

32、失。小圖片考慮GIF或PNG-8，半透明圖像考慮PNG-24，類似照片的圖像則考慮JPG。2.4.1 支持的圖像格式用法GIFPNGJPGJPG嚴格來說SVG應該是一種開放標準的矢量圖形語言，可讓你設(shè)計激動人心的、高分辨率的Web圖形頁面。用戶可以直接用代碼來描繪圖像。，可以用任何文字處理工具打開SVG圖像，通過改變部分代碼來使圖像具有交互功能，SVG2.4.2 絕對路徑和相對路徑什么是路徑？2.4.2 絕對路徑和相對路徑實際工作中，通常新建一個文件夾專門用于存放圖像文件。路徑這時再插入圖像，就需要采用“路徑”的方式來指定圖像文件的位置。通過設(shè)置“路徑”來幫助瀏覽器找到圖像文件。圖像文件文件夾

33、絕對路徑絕對路徑就是網(wǎng)頁上的文件或目錄在硬盤上的真正路徑。例如“D：HTML5+CSS3imageslogo.gif”，或完整的網(wǎng)絡地址，例如“http：/images/logo.gif”。相對路徑2.4.2 絕對路徑和相對路徑相對路徑相對路徑就是相對于當前文件的路徑，相對路徑不帶有盤符，通常是以 HTML網(wǎng)頁文件為起點，通過層級關(guān)系描述目標圖像的位置。總結(jié)起來，相對路徑的設(shè)置分為以下3種：1. 圖像文件和html文件位于同一文件夾：只需輸入圖像文件的名稱即可，如。2. 圖像文件位于html文件的下一級文件夾：輸入文件夾名和文件名，之間用“/”隔開，如。3. 圖像文件位于html文件的上一級文

34、件夾：在文件名之前加入“./”，如果是上兩級，則需要使用 “./ ./”，以此類推，如絕對路徑2.4.2 絕對路徑和相對路徑2.4.3 img標簽瀏覽網(wǎng)頁時經(jīng)常會看到精美的圖片在網(wǎng)頁中如何才能顯示圖像呢？2.4.3 img標簽基本語法格式src屬性用于指定圖像文件的路徑和文件名2.4.3 img標簽widthheight用來定義圖片的寬度和高度，通常我們只設(shè)置其中的一個，另一個會按原圖等比例顯示。border為圖像添加邊框、設(shè)置邊框的寬度。但邊框顏色的調(diào)整僅僅通過HTML屬性是不能夠?qū)崿F(xiàn)的。alt圖像的替換文本屬性，在圖像無法顯示時告訴用戶該圖片的內(nèi)容。2.4.3 img標簽vspacehsp

35、aceHTML中通過vspace和hspace屬性可以分別調(diào)整圖像的垂直邊距和水平邊距。align圖像的對齊屬性align。用于調(diào)整圖像的位置2.4.3 img標簽常用屬性語法圖像標簽的綜合應用案例 知識架構(gòu)2.5列表標簽.2無序列表有序列表2.5.3自定義列表案例列表標簽的綜合應用什么是列表？進一步了解列表說到列表大家并不陌生，在瀏覽網(wǎng)頁時，隨處可見。HTML語言提供了3種常用的列表，分別為無序列表、有序列表和定義列表。無序列表有序列表定義列表網(wǎng)頁中最常用的列表，其各個列表項之間沒有順序級別之分，通常是并列的。有排列順序的列表，其各個列表項按照一定的順序排列。用于對術(shù)語或名詞

36、進行解釋和描述。與無序和有序列表不同，定義列表的列表項前沒有任何項目符號。2.5.1 無序列表以某教育機構(gòu)的官網(wǎng)導航欄為例，認識無序列表。無序列表有序列表定義列表導航欄結(jié)構(gòu)清晰，各項之間（如“網(wǎng)頁平面”與“java培訓”）排序不分先后，這個導航欄就可以看做一個無序列表。2.5.2 有序列表無序列表有序列表定義列表定義無序列表的基本語法格式如下： 列表項1 列表項2 列表項3標簽用于定義無序列表標簽用于描述具體的列表項每對中至少應包含一對。注意：2.5.3 有序列表有序列表即為有排列順序的列表。網(wǎng)頁中常見的歌曲排行榜、游戲排行榜等都可以通過有序列表來定義。無序列表有序列表定義列表以百度歌曲排行榜

37、為例，認識有序列表。2.5.3 自定義列表無序列表有序列表定義列表以某教育機構(gòu)師資介紹為例，認識定義列表定義列表常用于圖文混排，其中標簽中插入圖片，標簽中放入對圖片解釋說明的文字。標簽例6-32.5.3 自定義列表定義列表的基本語法格式如下： 名詞1 名詞1解釋1 名詞1解釋2 . 名詞2 名詞2解釋1 名詞2解釋2 .無序列表有序列表定義列表標簽用于指定定義列表標簽用于指定術(shù)語名詞標簽用于對名詞進行解釋和描述列表標簽的綜合應用案例 知識架構(gòu)2.6超鏈接標簽.2創(chuàng)建超級鏈接超級的分類2.6.3錨點鏈接案例超級鏈接綜合應用2.6.1 創(chuàng)建超級鏈接一個網(wǎng)站通常由多個頁面構(gòu)成，進入網(wǎng)

38、站時首先看到的是其首頁。列表頁內(nèi)容頁首頁通過超鏈接，實現(xiàn)頁面之間的跳轉(zhuǎn)2.6.1創(chuàng)建超級鏈接如何創(chuàng)建超鏈接？在HTML中創(chuàng)建超鏈接非常簡單，只需用標簽環(huán)繞需要被鏈接的對象即可。 文本或圖像基本語法格式2.6.1創(chuàng)建超級鏈接對超鏈接標簽的常用屬性解釋如下：href用于指定鏈接目標的url地址，當為標簽應用href屬性時，它就具有了超鏈接的功能。target用于指定鏈接頁面的打開方式，其取值有_self和_blank兩種，其中_self為默認值，意為在原窗口中打開，_blank為在新窗口中打開。2.6.1創(chuàng)建超級鏈接如何創(chuàng)建超鏈接？在HTML中創(chuàng)建超鏈接非常簡單，只需用標簽環(huán)繞需要被鏈接的對象即可

39、。 文本或圖像基本語法格式2.6.2 超級的分類按照鏈接源分類超級鏈接通常可以分為文本超鏈接和非文本超鏈接兩種。文本超鏈接是把文本作為源端點，而非文本超鏈接是用除文本外的其他對象作為源端點。上例介紹的就是最基本的文本鏈接。按照鏈接目標分類超級鏈接可分為外部鏈接和內(nèi)部鏈接。內(nèi)部鏈接的目標端點是本站點內(nèi)的其他文檔，可以實現(xiàn)同一站點內(nèi)網(wǎng)頁互相跳轉(zhuǎn)。外部鏈接的目標端點在本站點之外，利用外部鏈接可以跳轉(zhuǎn)到其他網(wǎng)站。2.6.3 錨點鏈接如果網(wǎng)頁內(nèi)容較多，頁面過長。瀏覽網(wǎng)頁時就需要不斷地拖動滾動條，來查看所需要的內(nèi)容。效率較低不方便2.6.3 錨點鏈接為了提高信息的檢索速度HTML語言提供了一種特殊的鏈接錨

40、點鏈接，通過創(chuàng)建錨點鏈接，用戶能夠快速定位到目標內(nèi)容。2.6.3 錨點鏈接創(chuàng)建錨點鏈接分為兩步1使用“鏈接文本”創(chuàng)建鏈接文本2使用相應的id名標注跳轉(zhuǎn)目標的位置超級鏈接的綜合應用案例 知識架構(gòu)2.7音頻和視頻標簽.2H5支持的音視頻格式插入視頻2.7.3插入音頻2.7.4音視頻中的source元素2.7.5瀏覽器兼容性案例音視頻標簽綜合應用案例2.7.1 H5支持的音視頻格式在HTML5出現(xiàn)之前并沒有將視頻和音頻嵌入到頁面的標準方式，多媒體內(nèi)容在大多數(shù)情況下都是通過第三方插件或集成在Web瀏覽器的應用程序置于頁面中。復雜冗長運用HTML5中新增的video標簽和audio標簽可

41、以避免這樣的問題。2.7.1 H5支持的音視頻格式運用HTML5的video和audio標簽可以在頁面中嵌入視頻或音頻文件，如果想要這些文件在頁面中加載播放，還需要設(shè)置正確的多媒體格式。視頻格式視頻格式包含視頻編碼、音頻編碼和容器格式。音頻格式音頻格式是指要在計算機內(nèi)播放或是處理音頻文件。2.7.1 H5支持的音視頻格式HTML5支持的視頻格式oggmpeg4 webm2.7.1 H5支持的音視頻格式HTML5支持的音頻格式oggmpeg4 webm2.7.2 插入視頻使用video嵌入視頻基本語法格式：瀏覽器不支持video標簽例如：使用video標簽來嵌入視頻2.7.2 插入視頻播放進度條

42、聲音全屏2.7.2 插入視頻屬性值描述autoplayautoplay當頁面載入完成后自動播放視頻。looploop視頻結(jié)束時重新開始播放。preloadpreload如果出現(xiàn)該屬性，則視頻在頁面加載時進行加載，并預備播放。如果使用 autoplay，則忽略該屬性。posterurl當視頻緩沖不足時，該屬性值鏈接一個圖像，并將該圖像按照一定的比例顯示出來。Video元素的其他屬性2.7.3 插入音頻使用audio嵌入音頻基本語法格式如下：瀏覽器不支持audio標簽例如：使用audio標簽來嵌入音頻2.7.3 插入音頻音頻控件，用于控制音頻文件的播放狀態(tài)播放進度條聲音2.7.3 插入音頻audi

43、o元素的其他屬性屬性值描述autoplayautoplay當頁面載入完成后自動播放音頻。looploop音頻結(jié)束時重新開始播放。preloadpreload如果出現(xiàn)該屬性，則音頻在頁面加載時進行加載，并預備播放。如果使用 autoplay，則忽略該屬性。注意：以上列舉的audio元素的屬性和video元素是相同的，這些相同的屬性在嵌入音視頻時是通用的。2.7.4 音視頻中的source元素在HTML5中，運用source元素可以為video元素或audio元素提供多個備用文件。基本語法格式src用于指定媒體文件的URL地址。type指定媒體文件的類型。2.7.5 瀏覽器的兼容性雖然html5支

44、持ogg、mpeg 4和webm的視頻格式以及ogg、mp3和wav的音頻格式，但各瀏覽器對這些格式卻不完全支持。視頻格式格式IE 9Firefox 4.0Opera 10.6Chrome 6.0Safari 3.0ogg支持支持支持mpeg4支持支持支持webm支持支持支持音頻格式ogg支持支持支持mp3支持支持支持wav支持支持支持音視頻標簽的綜合應用案例 知識架構(gòu)2.8HTML5新增結(jié)構(gòu)性標簽為了增強網(wǎng)頁的可讀性，HTML5為提供了一系列語義標簽用來描述網(wǎng)頁的結(jié)構(gòu)。這些特殊的標簽可以見名知義，使頁面的結(jié)構(gòu)更加清晰，方便維護和開發(fā)。HTML5語義結(jié)構(gòu)標簽標簽標簽代表文檔、頁面或者應用程序中

45、與上下文不相關(guān)的獨立部分，該標簽經(jīng)常被用于定義一篇日志、一條新聞或用戶評論等。標簽通常使用多個section標簽進行劃分，一個頁面中標簽可以多次出現(xiàn)。標簽HTML5 中標簽是一種具有引導和導航作用的結(jié)構(gòu)標簽，包含放在頁面頭部的各種信息。標簽用來放置頁面內(nèi)的一個內(nèi)容區(qū)塊標題，可以包含網(wǎng)站Logo圖片、搜索表單或者其他相關(guān)內(nèi)容。HTML5語義結(jié)構(gòu)標簽標簽標簽用于定義導航鏈接，是 HTML5 新增的標簽，可以將導航鏈接歸納在這個區(qū)域中，使頁面標簽的語義更加明確。導航標簽可以鏈接到站點的其他頁面，或者當前頁的其他部分。標簽標簽用于對網(wǎng)站或應用程序中頁面上的內(nèi)容進行分塊，一個標簽通常由內(nèi)容和標題組成。在

46、使用標簽時，需要注意標簽和標簽區(qū)別。它們都是分塊標簽，前者強調(diào)內(nèi)容分塊，后者強調(diào)空間分塊。當一個分塊容器需要直接定義樣式或通過腳本定義行為時，推薦使用標簽。HTML5語義結(jié)構(gòu)標簽標簽標簽用來定義當前頁面或者文章的附屬信息部分，可以包含與當前頁面或主要內(nèi)容相關(guān)的引用、側(cè)邊欄、廣告、導航條等。標簽有兩種使用方法，一種是包含在標簽內(nèi)部，作為主要內(nèi)容的附屬信息。另一種是在標簽之外使用，作為頁面或站點全局的附屬信息部分。最常用的使用形式是側(cè)邊欄， 其中的內(nèi)容可以是友情鏈接、廣告單元等。標簽標簽用于定義一個頁面或者區(qū)域的底部，包含放在頁面底部的各種信息。在 HTML5之前，一般使用標簽來定義頁面底部，而通

47、過 HTML5 的標簽可以輕松實現(xiàn)。HTML5語義結(jié)構(gòu)標簽標簽標簽呈現(xiàn)了文檔或應用的主體部分。主體部分與文檔直接相關(guān)，或者擴展文檔中心主題、應用主要功能的部分內(nèi)容。這部分內(nèi)容在文檔中應當是獨一無二的，不包含任何在一系列文檔中重復的內(nèi)容，比如側(cè)邊欄，導航欄鏈接，版權(quán)信息，網(wǎng)站logo，搜索框等。和標簽在 HTML5 中，figure 標簽用于定義獨立的流內(nèi)容（圖像、圖表、照片、代碼等等），是一個獨立單元。標簽的內(nèi)容應該與主內(nèi)容相關(guān)，但如果被刪除，也不會對文檔流產(chǎn)生影響。標簽用于為標簽組添加標題，一個標簽內(nèi)最多允許使用一個標簽，該標簽應該放在標簽的第一個或者最后一個子標簽的位置。第 3 章 表格和

48、表單表單表格標簽表單控件HTML 目錄3.1表格標簽3.2表單3.3表單控件 知識架構(gòu)3.1 表格標簽3.1.1標簽的屬性3.1.2標簽的屬性3.1.3標簽的屬性3.1.4標簽的屬性 知識架構(gòu)3.2 表單.2表單的構(gòu)成表單的創(chuàng)建3.2.3表單的屬性 知識架構(gòu)3.3表單控件3.3.1input控件3.3.2標簽的type屬性3.3.3標簽的其他屬性3.3.4textarea控件3.3.5select控件3.3.6datalist控件本章將對表格相關(guān)標簽、表單相關(guān)標簽以及CSS控制表格與表單的樣式進行詳細地講解。表格與表單是HTML網(wǎng)頁中的重要標簽，利用表格可以對網(wǎng)頁進行排版，使網(wǎng)

49、頁信息有條理地顯示出來，而表單的出現(xiàn)則使網(wǎng)頁從單向的信息傳遞發(fā)展到能夠與用戶進行交互對話，實現(xiàn)了網(wǎng)上注冊、網(wǎng)上登錄、網(wǎng)上交易等多種功能。章節(jié)概要3.1 表格標簽什么是表格？3.1 表格標簽如何創(chuàng)建表格？說到表格，其實大家并不陌生課程表網(wǎng)上購物查票3.1 表格標簽定義一個表格定義表格中的一行，嵌套在中定義表格中的單元格，嵌套在中創(chuàng)建table表格，離不開以下3對標簽:3.1 表格標簽標簽的屬性屬性描述常用屬性值border規(guī)定表格邊框的寬度（默認border=0為無邊框）像素值cellspacing規(guī)定單元格之間的空白像素值（默認為2像素）cellpadding規(guī)定單元邊沿與其內(nèi)容之間的空白像素

50、值（默認為1像素）width規(guī)定表格的寬度像素值height規(guī)定表格的高度像素值align規(guī)定表格相對周圍元素的對齊方式left、center、rightbgcolor規(guī)定表格的背景顏色預定義的顏色值、十六進制#RGB、rgb(r,g,b)3.1 表格標簽標簽屬性在實體表格中的表現(xiàn)如下圖所示：widthheightbordercellspacingcellspadding標簽的屬性3.1 表格標簽標簽屬性在實體表格中的表現(xiàn)如下圖所示：標簽的屬性align=centerbgcolor=CCCCCC3.1 表格標簽標簽的屬性屬性描述常用屬性值height規(guī)定表格的行高像素值 align定義表格行的

51、內(nèi)容對齊方式left、center、right、justifyvalign規(guī)定表格行中內(nèi)容的垂直對齊方式top、middle、bottombgcolor規(guī)定表格行的背景顏色預定義的顏色值、十六進制#RGB、rgb(r,g,b)3.1 表格標簽標簽的屬性屬性名含義常用屬性值width規(guī)定表格單元格的寬度像素值 height規(guī)定表格單元格的高度像素值align規(guī)定單元格內(nèi)容的水平對齊方式left、center、right、justifyvalign規(guī)定單元格內(nèi)容的垂直排列方式top、middle、bottombgcolor規(guī)定單元格的背景顏色預定義的顏色值、十六進制#RGB、rgb(r,g,b)c

52、olspan規(guī)定單元格可橫跨的列數(shù)（用于合并水平方向的單元格）正整數(shù)rowspan規(guī)定單元格可橫跨的行數(shù)（用于合并豎直方向的單元格）正整數(shù)3.1 表格標簽標簽的屬性知識概述標簽用來設(shè)置表頭，其文本默認加粗居中顯示。表頭表頭3.1 表格標簽案例3-1 表格的綜合應用3.2 認識表單什么是表單？3.2 認識表單“表單”在網(wǎng)頁中主要負責數(shù)據(jù)采集功能和向服務器傳送數(shù)據(jù)。如注冊頁面的用戶名密碼輸入、網(wǎng)上訂單頁面等，都是以表單的形式來收集用戶信息，并將這些信息傳遞給后臺服務器，實現(xiàn)網(wǎng)頁與用戶間的數(shù)據(jù)傳輸和交互，本節(jié)將對表單進行詳細的講解。3.2 認識表單以電商注冊頁面為例，分析表單的構(gòu)成。提示信息表單域表

53、單控件表單的構(gòu)成3.2 認識表單一個表單中通常需要包含一些說明性的文字，提示用戶進行操作。相當于一個容器，用來容納所有的表單控件和提示信息。包含了具體的表單功能項，如文本框、密碼框、復選框、單選框等。提示信息表單控件表單域表單的構(gòu)成3.2 認識表單創(chuàng)建表單知識概述標簽用來創(chuàng)建表單。 各種表單控件【結(jié)論】與之間的表單控件是由用戶自定義的，action、method和name為表單標簽的常用屬性。3.2 認識表單表單屬性action 屬性定義在提交表單時接受并處理表單數(shù)據(jù)的服務器程序的url地址。action屬性method 屬性規(guī)定在提交表單時所用的 HTTP 方法（GET 或 POST）met

54、hod屬性name屬性用于定義表單的名稱，以區(qū)分同一個頁面中的多個表單。name屬性autocomplete屬性規(guī)定瀏覽器是否應該自動完成表單。autocomplete屬性novalidate屬性規(guī)定瀏覽器不驗證表單。novalidate屬性3.3 表單控件什么是表單控件？3.3 認識表單你了解這些表單控件？表單控件常用在登錄和注冊模塊3.3 認識表單大致可分為input控件、textarea控件、select控件三大類。select控件textarea控件3.3 表單控件input控件知識概述元素是表單中最常見的元素，網(wǎng)頁中常見的單行文本框、單選按鈕、復選框等都是通過它定義的。標簽為單標簽，

55、type屬性為其最基本的屬性，其取值有多種，用于指定不同的控件類型。標簽的type屬性在HTML5中，標簽擁有多個type屬性值，用于定義不同的控件類型。3.3 表單控件單行文本輸入框單行文本輸入框常用來輸入簡短的信息，如用戶名、賬號、證件號碼等，常用的屬性有name、value、maxlength。在HTML5中，標簽擁有多個type屬性值，用于定義不同的控件類型。密碼輸入框密碼輸入框用來輸入密碼，其內(nèi)容將以圓點或星號的形式顯示。標簽的type屬性3.3 表單控件標簽的type屬性在HTML5中，標簽擁有多個type屬性值，用于定義不同的控件類型。單選按鈕單選按鈕用于單項選擇，如選擇性別、是

56、否操作等。男3.3 表單控件標簽的type屬性在HTML5中，標簽擁有多個type屬性值，用于定義不同的控件類型。復選框復選框常用于多項選擇，如選擇興趣、愛好等，可對其應用checked屬性，指定默認選中項。唱歌3.3 表單控件標簽的type屬性在HTML5中，標簽擁有多個type屬性值，用于定義不同的控件類型。普通按鈕button普通按鈕類型常用于在用戶點擊按鈕時啟動 JavaScript 程序。 3.3 表單控件標簽的type屬性在HTML5中，標簽擁有多個type屬性值，用于定義不同的控件類型。提交按鈕提交按鈕用于向服務器發(fā)送表單數(shù)據(jù)。數(shù)據(jù)會發(fā)送到表單的 action 屬性中指定的頁面。

57、3.3 表單控件標簽的type屬性在HTML5中，標簽擁有多個type屬性值，用于定義不同的控件類型。重置按鈕重置按鈕會清除表單中的所有數(shù)據(jù)。 3.3 表單控件標簽的type屬性在HTML5中，標簽擁有多個type屬性值，用于定義不同的控件類型。圖像形式的提交按鈕圖像形式的提交按鈕與普通的提交按鈕在功能上基本相同，只是它用圖像替代了默認的按鈕，外觀上更加美觀。3.3 表單控件標簽的type屬性在HTML5中，標簽擁有多個type屬性值，用于定義不同的控件類型。隱藏域隱藏域?qū)τ谟脩羰遣豢梢姷模ǔＳ糜诤笈_的程序。 3.3 表單控件標簽的type屬性在HTML5中，標簽擁有多個type屬性值，用于

58、定義不同的控件類型。文件域當定義文件域時，頁面中將出現(xiàn)一個文本框和一個“瀏覽.”按鈕，用戶可以通過填寫文件路徑或直接選擇文件的方式，將文件提交給后臺服務器。3.3 表單控件標簽的type屬性在HTML5中，標簽擁有多個type屬性值，用于定義不同的控件類型。email類型email類型的input元素是一種專門用于輸入E-mail地址的文本輸入框，用來驗證email輸入框的內(nèi)容是否符合Email郵件地址格式；如果不符合，將提示相應的錯誤信息。請輸入您的郵箱：3.3 表單控件標簽的type屬性在HTML5中，標簽擁有多個type屬性值，用于定義不同的控件類型。url類型url類型的input元素

59、是一種用于輸入URL地址的文本框。請輸入個人網(wǎng)址：3.3 表單控件標簽的type屬性在HTML5中，標簽擁有多個type屬性值，用于定義不同的控件類型。tel類型tel類型用于提供輸入電話號碼的文本框，由于電話號碼的格式千差萬別，很難實現(xiàn)一個通用的格式。因此，tel類型通常會和pattern屬性配合使用。請輸入電話號碼：3.3 表單控件標簽的type屬性在HTML5中，標簽擁有多個type屬性值，用于定義不同的控件類型。number類型number類型的input元素用于提供輸入數(shù)值的文本框。在提交表單時，會自動檢查該輸入框中的內(nèi)容是否為數(shù)字。如果輸入的內(nèi)容不是數(shù)字或者數(shù)字不在限定范圍內(nèi)，則會

60、出現(xiàn)錯誤提示。請輸入數(shù)值：3.3 表單控件標簽的的其他屬性除了type屬性之外，標簽還可以定義很多其他的屬性，以實現(xiàn)不同的功能。autofocus屬性用于指定頁面加載后是否自動獲取焦點，將標簽的屬性值指定為true時，表示頁面加載完畢后會自動獲取該焦點。autofocus屬性13.3 表單控件除了type屬性之外，標簽還可以定義很多其他的屬性，以實現(xiàn)不同的功能。HTML5中的form屬性，可以把表單內(nèi)的子元素寫在頁面中的任一位置，只需為這個元素指定form屬性并設(shè)置屬性值為該表單的id即可。form屬性 2標簽的的其他屬性3.3 表單控件標簽的的其他屬性除了type屬性之外，標簽還可以定義很多