第4章 HTML與HTML5教材

1、對于設(shè)計(jì)人員來講，在制作網(wǎng)頁的時(shí)候，不涉及HTML語言是不可能的，無論你是一個(gè)初學(xué)者，還是一個(gè)高級的制作人員，都需要或多或少地接觸HTML語言，雖然Dreamweaver CC提供可視化的方法來創(chuàng)建和編輯HTML文件，但是對于一個(gè)深入掌握網(wǎng)頁制作、對代碼嚴(yán)格控制的用戶來講，直接書寫HTML源代碼是必需掌握的操作。4.1.1什么是什么是HTML語言語言在介紹HTML語言之前，不得不介紹萬維網(wǎng)（World Wide Web）。萬維網(wǎng)是一種建立在因特網(wǎng)上的、全球性的、交互的、多平臺的、分布式的信息資源網(wǎng)絡(luò)。它采用HTML語法描述超文本（Hypertext）文件。Hypertext有兩個(gè)含意：一個(gè)是鏈

2、接相關(guān)聯(lián)的文件；另一個(gè)是內(nèi)含多媒體對象的文件。超文本標(biāo)記語言（Hyper Text Markup Language，HTML）是一種文本類、解釋執(zhí)行的標(biāo)記語言，是在標(biāo)準(zhǔn)一般化的標(biāo)記語言（SGML）的基礎(chǔ)上建立的。SGML僅定義一套標(biāo)記語言的方法，而沒有定義一套實(shí)際的標(biāo)記語言。而HTML就是根據(jù)SGML制定的特殊應(yīng)用。 4.1.2HTML語言的基本結(jié)構(gòu)語言的基本結(jié)構(gòu)編寫HTML 文件的時(shí)候，必須遵循HTML 的語法規(guī)則。一個(gè)完整的HTML 文件由標(biāo)題、段落、列表、表格、單詞和嵌入的各種對象所組成。這些邏輯上統(tǒng)一的對象統(tǒng)稱為元素，HTML 使用標(biāo)簽來分割并描述這些元素。實(shí)際上HTML 文件就是由元

3、素與標(biāo)簽組成的。HTML文件基本結(jié)構(gòu)如下。 4.1.3HTML中的普通標(biāo)簽和空標(biāo)簽中的普通標(biāo)簽和空標(biāo)簽絕大多數(shù)元素都有起始標(biāo)簽和結(jié)束標(biāo)簽，在起始和結(jié)束之間的部分是元素體，例如。第一個(gè)元素都有名稱和可選擇的屬性，元素的名稱和屬性都在起始標(biāo)簽內(nèi)標(biāo)明。4.1.4HTML的主要的主要功能功能HTML語言作為一種網(wǎng)頁編輯語言，易學(xué)易懂，能制作出精美的網(wǎng)頁效果，其主要功能如下。(1) 利用HTML 語言格式化文本。例如設(shè)置標(biāo)題、字體、字號、顏色，設(shè)置文本的段落、對齊方式等。(2) 利用HTML 語言可以在頁面中插入圖像。使網(wǎng)頁圖文并茂，還可以設(shè)置圖像的屬性。例如大小、邊框、布局等。(3) HTML 語言可

4、以創(chuàng)建列表，把信息用一種易讀的方式表現(xiàn)出來。(4) 利用HTML 語言可以建立表格。表格為瀏覽者提供了快速找到需要信息的顯示方式。(5) 利用HTML 語言在頁面中加入多媒體。可以在網(wǎng)頁中加入音頻、視頻、動畫，還能設(shè)定播放的時(shí)間和次數(shù)。(6) HTML 語言可以建立超鏈接。通過超鏈接檢索在線的信息，用鼠標(biāo)單擊，就可以鏈接到任何一處。(7) 利用HTML語言還可以實(shí)現(xiàn)交互式表單、計(jì)數(shù)器等。4.1.5HTML的重要的重要標(biāo)簽標(biāo)簽標(biāo)簽是HTML 語言最基本的單位，每一個(gè)標(biāo)簽都是由 結(jié)束，標(biāo)簽通過指定信息為段落或標(biāo)題等來標(biāo)識文檔中的內(nèi)容。本節(jié)就向讀者介紹在HTML 語言中常用的一些標(biāo)簽。1基本標(biāo)簽通過

5、前面的學(xué)習(xí)，我們已經(jīng)知道HTML文件是由、和3個(gè)標(biāo)簽組成的，它們都屬于基本標(biāo)簽。2文本標(biāo)簽文本標(biāo)簽主要用來設(shè)置網(wǎng)頁中的文字效果，例如文字的大小、文字的加粗等顯示方式。文本標(biāo)簽也是寫在標(biāo)簽內(nèi)部的，3圖像標(biāo)簽圖像是網(wǎng)頁中不可缺少的元素之一，在HTML中使用標(biāo)簽對圖像處理。在標(biāo)簽中，src屬性是不可缺少的，該屬性用于設(shè)置圖像的路徑，設(shè)置路徑后，在網(wǎng)頁中就能夠顯示出路徑所鏈接的圖像。4格式標(biāo)簽格式標(biāo)簽主要用于對網(wǎng)頁中的各種元素進(jìn)行排版布局，格式標(biāo)簽放置在HTML文檔中的與標(biāo)簽之間，通過格式標(biāo)簽可以定義文字段落、對齊方式等。5表格標(biāo)簽在HTML中表格標(biāo)簽是開發(fā)人員常用的標(biāo)簽，尤其是在Div+CSS布局還

6、沒有被廣泛應(yīng)用的時(shí)候，它是表格網(wǎng)頁布局的主要方法。表格的標(biāo)簽是，在表格中可以放入任何元素。6超鏈接標(biāo)簽超鏈接可以說是HTML超文本文件的命脈，HTML通過超鏈接標(biāo)簽來整合分散在世界各地的圖像、文字、影像和音樂等信息，此類標(biāo)簽的主要用途為標(biāo)示超文本文件鏈接。是超鏈接標(biāo)簽。7分區(qū)標(biāo)簽在HTML文檔中常用的分區(qū)標(biāo)簽有兩個(gè)，分別是標(biāo)簽和標(biāo)簽。其中，標(biāo)簽稱為區(qū)域標(biāo)簽（又稱為容器標(biāo)簽），用來作為多種HTML標(biāo)簽組合的容器，對該區(qū)域進(jìn)行操作和設(shè)置，就完成對區(qū)域中元素的操作和設(shè)置。在Dreamweaver CC的編輯環(huán)境中，主要有3種編輯視圖的方式，分別為代碼視圖、拆分視圖和設(shè)計(jì)視圖。代碼視圖主要用于編輯頁面

7、的HTML代碼；拆分視圖則可以一邊對頁面進(jìn)行可視化編輯制作，一邊查看相應(yīng)的HTML代碼；設(shè)計(jì)視圖用于在Dreamweaver中進(jìn)行可視化的頁面編輯制作。4.2.1在代碼視圖中編寫在代碼視圖中編寫HTML頁面頁面前面已經(jīng)向讀者介紹了有關(guān)HTML的相關(guān)知識，認(rèn)識了HTML中的主要標(biāo)簽，接下來我們就一起通過Dreamweaver的代碼視圖編寫一個(gè)HTML頁面。動手動手實(shí)踐實(shí)踐在代碼視圖中編寫在代碼視圖中編寫HTML頁面頁面最終文件：光盤最終文件第4章4-2-1.html 視頻：光盤視頻第4章4-2-1.swf4.2.2在設(shè)計(jì)視圖中制作在設(shè)計(jì)視圖中制作HTML頁面頁面在代碼視圖中通過編寫HTML代碼的

8、方式制作純文本的網(wǎng)頁還是比較簡單的，如果涉及圖像、表單、多媒體等內(nèi)容，那就需要設(shè)計(jì)者具有很強(qiáng)的HTML代碼編輯能力了，但如果通過Dreamweaver CC中的設(shè)計(jì)視圖，則可以輕松制作復(fù)雜的HTML頁面。動手動手實(shí)踐實(shí)踐在設(shè)計(jì)視圖中制作在設(shè)計(jì)視圖中制作HTML頁面頁面最終文件：光盤最終文件第4章4-2-2.html 視頻：光盤視頻第4章4-2-2.swf4.2.3認(rèn)識認(rèn)識Dreamweaver CC的代碼的代碼視圖視圖Dreamweaver使用了Roundtrip HTML技術(shù)，使得用戶在修改HTML代碼的同時(shí)，也可以在設(shè)計(jì)視圖中修改網(wǎng)頁，并且在設(shè)計(jì)視圖中的操作結(jié)果會立刻以源代碼的形式，顯示在

9、代碼視圖中。同樣，在代碼視圖中可以直接編輯HTML源代碼，當(dāng)用鼠標(biāo)單擊設(shè)計(jì)視圖中的任意位置時(shí)，會立刻看到相應(yīng)的編輯結(jié)果。Dreamweaver CC的代碼工具欄沿編碼區(qū)域一側(cè)的直欄中包含了常用編輯操作。快速標(biāo)簽編輯器的作用是讓用戶在文檔窗口中直接對HTML 標(biāo)簽進(jìn)行編寫。它無需使用代碼視圖，就可以編輯單獨(dú)的HTML 標(biāo)簽，使網(wǎng)頁制作人員從可視化的工作環(huán)境進(jìn)一步向HTML 代碼靠近。4.3.1使用插入模式的快速標(biāo)簽使用插入模式的快速標(biāo)簽編輯器編輯器如果在文檔中沒有選擇任何對象，就直接啟動快速標(biāo)簽編輯器，快速標(biāo)簽編輯器會以插入模式啟動。這時(shí)編輯器中只顯示一對尖括號，提示用戶輸入新的標(biāo)簽及標(biāo)簽中的其

10、他內(nèi)容。4.3.2使用編輯模式的快速標(biāo)簽編輯器使用編輯模式的快速標(biāo)簽編輯器當(dāng)用戶在文檔窗口中選擇了完整的HTML標(biāo)簽，包括起始標(biāo)簽、結(jié)束標(biāo)簽、標(biāo)簽間的內(nèi)容，啟動快速標(biāo)簽編輯器時(shí)，就會自動進(jìn)入編輯模式。 4.3.3使用環(huán)繞模式的快速標(biāo)簽使用環(huán)繞模式的快速標(biāo)簽編輯器編輯器當(dāng)用戶在文檔窗口中只選擇了標(biāo)簽間的內(nèi)容，而未選擇任何的標(biāo)簽，那么打開快速標(biāo)簽編輯器時(shí)會自動進(jìn)入環(huán)繞模式。環(huán)繞模式與插入模式有著明顯的區(qū)別，在環(huán)繞模式中只能夠輸入單個(gè)的起始標(biāo)簽，并且在關(guān)閉快速標(biāo)簽編輯器后，Dreamweaver會自動將與其匹配的結(jié)束標(biāo)簽加入用戶在文檔窗口所選擇內(nèi)容的后面，所選內(nèi)容的前面則是起始標(biāo)簽。4.3.4設(shè)置標(biāo)

11、簽編輯器的屬性設(shè)置標(biāo)簽編輯器的屬性執(zhí)行“編輯首選參數(shù)”命令，彈出“首選參數(shù)”對話框，在該對話框左側(cè)的“分類”列表中選擇“代碼提示”選項(xiàng)。利用“代碼片斷”面板可以減小代碼編寫的工作量。在該面板里可以存儲HTML、JavaScript、CFML、ASP、JSP的代碼片斷，這樣當(dāng)需要重復(fù)使用這些代碼時(shí)，就可以很方便地重用這些代碼，或者創(chuàng)建并儲存新的代碼片斷。4.4.1插入代碼插入代碼片斷片斷執(zhí)行“窗口代碼片斷”命令，打開“代碼片斷”面板，選擇希望插入的代碼片斷，單擊面板上的“插入”按鈕，即可將代碼片斷插入到頁面中。4.4.2創(chuàng)建代碼片斷創(chuàng)建代碼片斷如是自己編寫了一段代碼，希望在其他頁面中重復(fù)使用，這

12、時(shí)就可以使用“代碼片斷”面板創(chuàng)建自己的代碼片斷，輕松實(shí)現(xiàn)代碼的重用。由于經(jīng)常需要復(fù)制一些其他格式的文件，在這些文件里可能會帶有垃圾代碼和一些Dreamweaver不可識別的錯誤代碼，它們不僅增加文檔的大小，延長下載時(shí)間，在用瀏覽器瀏覽時(shí)也會變得很慢，還可能發(fā)生錯誤，所以要對HTML源代碼進(jìn)行優(yōu)化處理，用以清除空標(biāo)簽、合并嵌套的標(biāo)簽等，從而提高HTML代碼的可讀性。4.5.1優(yōu)化優(yōu)化HTML代碼代碼在Dreamweaver CC中打開需要進(jìn)行代碼優(yōu)化的HTML頁面，執(zhí)行“命令清理HTML”命令，彈出“清理HTML/XHTML”對話框，在其中可以選擇優(yōu)化方式。4.5.2清理清理Word生成的生成的

13、HTML代碼代碼由于Word生成的HTML文件中有許多無用的HTML代碼，因此Dreamweaver CC提供了一個(gè)“清理Word生成的HTML”命令，用來清理那些只有Word才使用的，而Dreamweaver并不使用的代碼。HTML 5是近十年來Web標(biāo)準(zhǔn)最巨大的飛躍。和以前的版本不同，HTML 5并非僅用來表示W(wǎng)eb內(nèi)容，它的使命是將Web帶入一個(gè)成熟的應(yīng)用平臺，在這個(gè)平臺上，視頻、音頻、圖像、動畫，以及同計(jì)算機(jī)的交互都被標(biāo)準(zhǔn)化了。盡管HTML 5的實(shí)現(xiàn)還有很長的路要走，但HTML 5正在改變Web。在Dreamweaver CC中已經(jīng)開始全面支持HTML 5，默認(rèn)新建的HTML頁面就是基

14、于HTML 5規(guī)范的。4.6.1初識初識HTML 5W3C在2010年1月22日發(fā)布了最新的HTML 5工作草案。HTML 5的工作組包括AOL、Apple、Google、IBM、Microsoft、Mozilla、Nokia、Opera以及數(shù)百家其他的開發(fā)商。制定HTML 5的目的是取代1999年W3C所制定的HTML 4.01和XHTML 1.0標(biāo)準(zhǔn)，希望能夠在網(wǎng)絡(luò)應(yīng)用迅速發(fā)展的同時(shí)，網(wǎng)頁語言能夠符合網(wǎng)絡(luò)發(fā)展的需求。4.6.2HTML 5標(biāo)簽標(biāo)簽通過制作如何處理所有HTML元素以及如何從錯誤中恢復(fù)的精確規(guī)則，HTML 5改進(jìn)了互操作性，并減少了開發(fā)成本。4.6.3HTML 5標(biāo)準(zhǔn)標(biāo)準(zhǔn)屬性屬

15、性在HTML中標(biāo)簽擁有屬性，在HTML 5中新增的屬性有contenteditable、contextmenu、draggable、irrelevant、ref、registrationmark、template。不再支持HTML4.01中的accesskey屬性。4.6.4HTML 5事件事件屬性屬性HTML元素可以擁有事件屬性，這些屬性在瀏覽器中具有觸發(fā)行為，比如當(dāng)用戶單擊一個(gè)HTML元素時(shí)啟動一段JavaScript腳本。HTML 5中的新事件有onabort、onbeforeunload、oncontextmenu、ondrag、ondragend、ondragenter、ondragleave、ondragover、ondr