《html制作基礎(chǔ)》PPT課件.ppt

1、2020/8/4，1，第8章，HTML制作，2020/8/4，2，HTML語言，1 HTML語言概要2文檔的格式和樣式3多媒體和超鏈接4制作表5制作表6框架結(jié)構(gòu)，2020/8 WWW上的信息大部分是http HTML的一般應(yīng)用程序使用戶能夠直接從一個主題檢索到另一個主題，而不是線性搜索和閱讀。 本章的首頁，2020/8/4，4，HTML語言概要，1.1 HTML概要HTML是(超文本標(biāo)記語言，超文本標(biāo)記語言)的縮寫，最初來源于SGML語言。 HTML是一種符號標(biāo)記語言，用于表示互聯(lián)網(wǎng)上的信息。 在WWW中，公共信息通常使用HTML。 這是網(wǎng)頁的基礎(chǔ)，任何網(wǎng)頁都離不開HTML，HTML也是Web

2、應(yīng)用程序開發(fā)的基礎(chǔ)。 HTML語言是大多數(shù)瀏覽器都可以識別的語言，使用HTML語法規(guī)則創(chuàng)建的文本可以在不同的OS平臺上運行，大多數(shù)用戶都可以接受。 2020/8/4、5、HTML語言概要，為什么要學(xué)習(xí)HTML？ 微軟推出的Microsoft FrontPage、Adobe推出的Adobe Pagemill、微軟推出的Dreamweaver等編輯工具，被稱為“只看就能得到”的網(wǎng)頁制作工具這些圖形化的開發(fā)工具可以直接處理網(wǎng)頁，而無需寫出辛苦的標(biāo)簽。 這樣，用戶就可以創(chuàng)建不基于HTML語言的網(wǎng)頁。 此時，開發(fā)工具為您完成了創(chuàng)建HTML文檔的任務(wù)。 這是網(wǎng)頁圖形編輯工具的最大成功點，但也是最大的缺點。

3、 受圖形編輯工具本身的限制，會產(chǎn)生大量的垃圾郵件。 2020/8/4、6、HTML語言概要，為什么要學(xué)習(xí)HTML？ 聰明的網(wǎng)頁撰寫人可以根據(jù)圖形編輯工具進一步掌握HTML語言，知道這是垃圾郵件代碼，利用圖形HTML開發(fā)工具快速創(chuàng)建網(wǎng)頁，消除無用的代碼，快速創(chuàng)建高質(zhì)量的網(wǎng)頁1 HTML語言概述，IE瀏覽器菜單命令“查看”-源文件顯示在“記事本”中打開的常規(guī)文本文件(HTML文檔)。 沒有圖形和聲音等多媒體內(nèi)容，但是包含指向這些類型的文件的指針和鏈接。 要創(chuàng)建HTML文檔，只需要兩個基本工具： HTML編輯器和WBE瀏覽器。2020/8/4、7、2020/8/4、8、1html語言概述、1.2文檔

4、的結(jié)構(gòu)標(biāo)頭信息正文部分、文件的開頭和末尾用和表示。 標(biāo)簽標(biāo)頭和標(biāo)簽的正文部分包含文件的基本信息，如和標(biāo)題，是整個文件的主體部分。 2020/8/4、9和1html語言概述。 這是標(biāo)題部分。 你好，這是正文部分！ 2020/8/4，10，1html語言概要，1.3 HTML標(biāo)記1 html文件標(biāo)記形式：功能：表示文件開始和結(jié)束的標(biāo)記。 2HTML標(biāo)頭標(biāo)記格式：功能：用于包含文件的基本信息。 是提示網(wǎng)頁內(nèi)容和功能的文本，顯示在瀏覽器的標(biāo)題欄中，網(wǎng)頁只顯示一個標(biāo)題，只顯示在文檔的開頭。 3HTML文件主體標(biāo)記格式：功能：文件主體標(biāo)記。2020/8/4、11、1HTML語言概述、1.3 HTML標(biāo)記的

5、HTML文檔的一個和標(biāo)記中包含的分割以及兩個大部分HTML文件中不區(qū)分大小寫的HTML文件擴展名為. HTML或. htm。 目前，html語言在寫入時沒有區(qū)別，如果要啟動“記事本”程序，在輸入內(nèi)容后保存文件，請在“保存類型”框中選擇“所有文件”，在“文件名”框中選擇hello.htm (不能省略擴展名)HTML由徽標(biāo)和屬性組成，用于標(biāo)識單個文檔部件，并向瀏覽器傳達如何顯示文檔。 標(biāo)簽：通過指定塊信息顯示為段落、圖形等來識別文檔部件。 屬性：標(biāo)志的可選項，在標(biāo)志中修飾或進一步指定信息。 顏色、配置、高度、寬度等。 HTML的基本概念、標(biāo)簽：用于控制文字、圖形等的顯示方法的符號。 (1)單一標(biāo)記

6、：只要單獨使用就能完全表現(xiàn)意思的標(biāo)記。 語法： (2)雙標(biāo)記：由“起始標(biāo)記”和“終止標(biāo)記”兩部分組成，是必須成對使用的標(biāo)記。 語法：內(nèi)容是指作用于此標(biāo)記的部分。 HTML的基本概念，標(biāo)簽屬性：開始標(biāo)簽可以包含的屬性，語法：各屬性之間沒有優(yōu)先順序，也可以省略屬性。 水平標(biāo)記、HTML基本概念、注釋語句：格式為。 文件中的注釋用“！” 標(biāo)記，“”表示注釋結(jié)束，中間的所有內(nèi)容都表示注釋。 評論語句可以放在任何地方，評論的內(nèi)容不會顯示在瀏覽器中，只有設(shè)置修訂者才容易閱讀。2020/8/4、17、超文本中的標(biāo)記是剛剛接觸到超文本，遇到的最大障礙是用“”括起來的句子，我們稱之為標(biāo)記，是用于分割和標(biāo)記文本的

7、元素，包括文本布局、字符格式、 所有標(biāo)記都包含在尖括號中的元素，尖括號指示瀏覽器中的文本是HTML命令。 這些標(biāo)簽名多是對應(yīng)的英語單詞的開頭字符或略語，例如Table顯示表(Table )、IMG顯示圖像(Image )等中經(jīng)常存儲。2020/8/4、18、超文本中的標(biāo)記效果差異很大，但整體表現(xiàn)形式相似，出現(xiàn)大多數(shù)對，標(biāo)記受影響的內(nèi)容總結(jié)：一個標(biāo)記用“”包圍，如、等等，2020/8 下面是一個示例。 有些標(biāo)記不會結(jié)束，所以被稱為單一標(biāo)記。 三個標(biāo)簽可以是大小寫的，標(biāo)記相同段的內(nèi)容沒有限制，多個標(biāo)簽可以配合使用，產(chǎn)生一定的效果。 此時，各標(biāo)簽間的順序也是任意的。 超文本中的標(biāo)簽、2020/8/4

8、、20、單標(biāo)簽可以通過單獨使用完全表示意義，這樣的標(biāo)簽的語法表示最通用的單標(biāo)簽或換行。2020/8/4、21、雙標(biāo)簽由“開始標(biāo)簽”和“結(jié)束標(biāo)簽”兩部分組成，必須成對使用。 開始標(biāo)簽表示W(wǎng)eb瀏覽器從此處執(zhí)行該標(biāo)簽所指示的功能，結(jié)束標(biāo)簽表示W(wǎng)eb瀏覽器從此處結(jié)束功能。 如果在開始標(biāo)記前加斜杠(/)，則成為結(jié)束標(biāo)記。 這種標(biāo)簽的語法是內(nèi)容中的“內(nèi)容”部分作用于該標(biāo)簽的部分。 例如，如果要強調(diào)某文本的顯示，請將該文本加入標(biāo)簽。 第一：2020/8/4，22，標(biāo)簽的屬性，標(biāo)簽只規(guī)定它是什么信息、文本還是圖像，但是如何顯示或控制這些信息，標(biāo)簽后面必須有關(guān)聯(lián)的屬性才能顯示，語法結(jié)構(gòu)是受影響的內(nèi)容，2020

9、 如有必要，可以選擇此標(biāo)簽的所有屬性，也可以僅選擇一些必要的屬性。 屬性之間沒有優(yōu)先級。 2020/8/4，24，標(biāo)簽屬性。 例如，單個標(biāo)記表示在文檔的當(dāng)前位置繪制水平線。 通常從窗口中當(dāng)前行的左端繪制到右端。如果有多個屬性： SIZE屬性定義線條粗細(xì)，屬性值為整數(shù)，缺少為ALIGN屬性指示可以使用左對齊、默認(rèn)對齊、中心對齊和右對齊的對齊方式。 WIDTH屬性定義線條長度、相對值(包圍的百分比，表示整個窗口的百分比)或絕對值(以整數(shù)表示的屏幕像素數(shù)，如WIDTH=300 )。 默認(rèn)值為100%。 HTML語法規(guī)則；(1)HTML文件存儲為純文本； htm或. HTML (2)HTML標(biāo)記不區(qū)分

10、大小寫；(3)許多HTML標(biāo)記可以嵌套，但不能相交。 (4)HTML文件可以在一行中寫入多個標(biāo)簽，一個標(biāo)簽可以分成多行寫入，不需要繼續(xù)符號。 (5)HTML源文件中的換行、換行、多個連續(xù)空格(僅顯示一個空格)在顯示效果上無效。 顯示內(nèi)容有換行用標(biāo)簽、換行用標(biāo)簽、需要多個空格的情況下，可以使用多個“quot、2020/8/4、26、2文檔的格式和樣式，在大多數(shù)網(wǎng)頁中，文檔是核心內(nèi)容，是適當(dāng)?shù)奈臋n文檔格式包括標(biāo)題和文本字體、大小、字體、顏色、段落格式、文本布局等。 本章的首頁，2020/8/4，27，2文檔的格式和樣式，2.1設(shè)置屬性，2020/8/4，28，2文檔的格式和樣式，2.1設(shè)置屬性，網(wǎng)

11、頁內(nèi)容，2020 black=# 00000 green=# 008000 lime=# 00ff 00 olive=# 808000 yellow=# ffff 00 navy=# 00080 blue=# 0000 ff teal=# 00002. 2段落格式1標(biāo)題標(biāo)簽格式：第一級標(biāo)題第二級標(biāo)題第三級標(biāo)題數(shù)字越小，尺寸越大。2020/8/4、31、標(biāo)題文本標(biāo)簽、的屬性align用于設(shè)置標(biāo)題在頁內(nèi)的對齊方式： left :左對齊中心：中間對齊right :右對齊格式：標(biāo)題文本說明：使用此標(biāo)簽進行文章標(biāo)題32、標(biāo)題文本標(biāo)記、標(biāo)題樣本這是1行普通文字1級標(biāo)題2級標(biāo)題3級標(biāo)題4級標(biāo)題(左) 5級標(biāo)

12、題(中央) 6級標(biāo)題(右)、2020/8/4、33、2020/8/4、34、文本的設(shè)定、網(wǎng)頁用標(biāo)簽設(shè)定大小。 格式可以是設(shè)置的字符、2020/8/4、35、字符大小設(shè)置，標(biāo)記可以是字符的字體、大小和顏色。 其中屬性： size用于設(shè)置文本的大小。 數(shù)字可取值的范圍為17，取1時最小，取7時最大。 其中，默認(rèn)值為3。 您可以在SIZE屬性值前加上、字元，指定相對于初始大小的增量或減法。 基準(zhǔn)尺寸為3、3時表示6號字。 face設(shè)定字體。 黑體、宋體、楷體等。 color設(shè)定文字的顏色。 2020/8/4，36，字符大小設(shè)置，這是size=7的字體這是size=6的字體這是size=5的字體這是s

13、ize=4的字體這是size=3的字體這是size=2的字體face的屬性值是本機只要對方的電腦里放著同樣的字體，他的瀏覽器里就會出現(xiàn)你預(yù)先設(shè)計好的風(fēng)格。2020/8/4，38，歡迎使用文字字體設(shè)置，歡迎使用歡迎使用歡迎使用歡迎使用歡迎使用歡迎使用歡迎使用2020/8/4，39，文字顏色設(shè)置和文字顏色設(shè)置有兩種方法1，標(biāo)記的文本屬性格式：文本此處的顏色值是“#”作為前綴、2020/8/4、40、字符顏色設(shè)置、2、標(biāo)簽顏色屬性：可以設(shè)置網(wǎng)頁、段落、短語、單詞或單詞的顏色。 格式：文本此處的顏色值可以是使用“#”作為前綴的十六進制或以下十六種顏色的名稱。 2020/8/4，41，文字顏色的設(shè)定，五

14、彩世界五彩世界五彩世界五彩世界五彩世界五彩世界五彩世界，2020/8/4，42，文字顏色的設(shè)定，標(biāo)記的同時定義文字顏色，2020/4 在整齊、清晰、文字段落之間，我們經(jīng)常做標(biāo)記。 從文檔段落開始的標(biāo)簽，從段落結(jié)束的標(biāo)簽。 與段落標(biāo)記不同，段落標(biāo)記不僅可以用下一行替換后續(xù)字符，還可以在兩段之間添加空行。 下一個開始意味著前一個結(jié)束，所以可以省略。 標(biāo)簽還有一個屬性ALIGN，用于指定字符顯示時的對齊方式。 正常值有中心、左側(cè)和右側(cè)三種。2020/8/4、44、段落標(biāo)記、段落標(biāo)簽浣溪沙一曲新詞酒滿，去年天氣老亭臺，夕陽西下幾點開門。 無可奈何的花落了下來，好像燕子回來了。 小園香徑徘徊了好幾次。2020/8/4、45、段落標(biāo)記、段落標(biāo)簽登鸛雀樓晝依山盡、黃河入海流。 想窮千里眼，就上樓去。2020/8/4、46、2文檔的格式和樣式，3預(yù)定義的格式標(biāo)記格式：功能：在瀏覽器中閱覽時，以預(yù)先嵌入到文檔中的形式顯示內(nèi)容。 如果在文本的開頭加上末尾，就不需要在中間加上別的標(biāo)簽，此時中間的換行等起作用，可以原樣顯示。 預(yù)定格式標(biāo)簽使用床前明月光疑似地霜舉頭望明月頭低下，想起故鄉(xiāng)的蘭陵美酒郁金香玉碗盛來琥珀光，但是不知道主人能喝醉的客人