HTML代碼簡介--網(wǎng)頁設(shè)計(jì).ppt

1、網(wǎng)站基本知識(shí),HTML 開發(fā),HTML 標(biāo)記的格式組成：, . . . ,HTML 標(biāo)記用于標(biāo)記 HTML 文檔的開始和結(jié)束,元素 - 標(biāo)識(shí)標(biāo)記,屬性 - 描述標(biāo)記,值 - 分配給屬性的內(nèi)容,HTML 文檔的結(jié)構(gòu),HTML 部分 文檔頭部分 正文部分, 歡迎進(jìn)入 HTML 世界 這會(huì)是一種很有趣的體驗(yàn) ,基本結(jié)構(gòu)：,HTML頭部信息(Head),HTML頭部信息(head)里包含關(guān)于所在網(wǎng)頁的信息。頭部信息(head)里的內(nèi)容，主要是被瀏覽器所用，不會(huì)顯示在網(wǎng)頁的正文內(nèi)容里。 標(biāo)題(title) 標(biāo)題(title)是最常用的head信息。它不顯示在HTML網(wǎng)頁正文里，顯示在瀏覽器窗口的標(biāo)題欄里

2、。 示例代碼如下： HTML中文教程頭部信息 顯示,正文標(biāo)題,HTML用到這幾個(gè)Tag來定義正文標(biāo)題，從大到小。每個(gè)正文標(biāo)題自成一段。, 這是1號(hào)標(biāo)題 這是2號(hào)標(biāo)題 這是3號(hào)標(biāo)題 這是4號(hào)標(biāo)題 這是5號(hào)標(biāo)題 這是6號(hào)標(biāo)題 運(yùn)行結(jié)果,段落劃分 在HTML里用和劃分段落。,段落標(biāo)記, 歡迎使用 HTML 這會(huì)是一種很有趣的體驗(yàn) 另一個(gè)段落元素 ,使用對齊屬性, 學(xué)習(xí)HTML 這會(huì)是一種很有趣的體驗(yàn) 另一個(gè)段落元素 ,居中, 這是標(biāo)題 上面的標(biāo)題是居中顯示的。 顯示結(jié)果,換行 通過使用這個(gè)Tag，可以在不新建段落的情況下?lián)Q行。沒有Closing Tag。 用換行是個(gè)壞習(xí)慣，正確的是使用。,換行標(biāo)記,

3、 歡迎使用 HTML 這會(huì)是一種很有趣的體驗(yàn) 另一個(gè)段落元素 ,HTML注釋,在HTML文件里，你可以寫代碼注釋，解釋說明你的代碼，這樣有助于你和他人日后能夠更好地理解你的代碼。 注釋可以寫在之間。瀏覽器是忽略注釋的，你不會(huì)在HTML正文中看到你的注釋。 , 代碼注釋是不會(huì)顯示在網(wǎng)頁里的。 顯示,用hr這個(gè)Tag可以在HTML文件里加一條橫線 Hr也沒有結(jié)束標(biāo)簽, 村婦想像皇宮的生活：皇后得用金扁擔(dān)挑水吧。 Q：有兩個(gè)人掉到陷阱里了，死的人叫死人，活人叫什么?A:叫救命啦! 顯示結(jié)果,HTML常用格式,HTML定義了一些文本格式的Tag，比如利用Tag，可以將字體變成粗體或者斜體。從下面的示例

4、，你可以了解各種文本格式Tag如何改變HTML文本的顯示。 常用文本格式Tag 粗體bold 斜體,HTML利用超鏈接打開鏈接文件,HTML用來表示超鏈接 可以指向任何一個(gè)文件源：一個(gè)HTML網(wǎng)頁，一個(gè)圖片，一個(gè)影視文件等。用法如下： 鏈接的顯示文字 點(diǎn)擊當(dāng)中的內(nèi)容，即可打開一個(gè)鏈接文件，href屬性則表示這個(gè)鏈接文件的路徑。, 這是一個(gè)鏈接 新浪站點(diǎn)鏈接 /html顯示結(jié)果,鏈接的target屬性 使用鏈接的target屬性，可以在一個(gè)新窗口里打開鏈接文件。, 這是一個(gè)鏈接 新浪站點(diǎn)鏈接 顯示結(jié)果,鏈接的title屬性 使用鏈接的title 屬性，可以讓鼠標(biāo)懸停在超鏈接上的時(shí)候，顯示該超鏈接

5、的文字注釋。, 這是一個(gè)鏈接 新浪站點(diǎn)鏈接 顯示結(jié)果,鏈接到email地址 在網(wǎng)站中，你經(jīng)常會(huì)看到“聯(lián)系我們”的鏈接，一點(diǎn)擊這個(gè)鏈接，就會(huì)觸發(fā)你的郵件客戶端，比如Outlook Express，然后顯示一個(gè)新建mail的窗口。用可以實(shí)現(xiàn)這樣的功能。, 這是一個(gè)鏈接 新浪站點(diǎn)鏈接 聯(lián)系新浪 顯示結(jié)果,HTML相對路徑(Relative Path)和絕對路徑(Absolute Path),HTML有2種路徑的寫法：相對路徑和絕對路徑。 HTML相對路徑(Relative Path) 同一個(gè)目錄的文件引用 如果源文件和引用文件在同一個(gè)目錄里，直接寫引用文件名即可。 這是一個(gè)鏈接 如何表示上級(jí)目錄 .

6、/表示源文件所在目錄的上一級(jí)目錄，././表示源文件所在目錄的上上級(jí)目錄，以此類推。 如何表示下級(jí)目錄 引用下級(jí)目錄的文件，直接寫下級(jí)目錄文件的路徑即可。,HTML絕對路徑(Absolute Path),HTML絕對路徑(absolute path)指帶域名的文件的完整路徑。 新浪站點(diǎn)鏈接,HTML圖片(Images),用 這個(gè) Tag 可以在HTML里面插入圖片。最基本的語法如下： url表示圖片的路徑和文件名。比如 url 可以是 images/logo/blabla_logo01.gif，也可以是個(gè)相對路徑 ./images/logo/blabla_logo01.gif。, 圖片： ,顯

7、示結(jié)果,圖片align屬性 用align屬性，可以改變水平對齊方式(居左、居中、居右)。 用valign屬性，可以改變圖片的垂直(居上、居中、居下)對齊方式圖片的大小 在缺省狀況下，圖片顯示原有的大小。你可以用height和width屬性改變圖片的大小。不過圖片的大小一旦被改變，圖片會(huì)相應(yīng)放大或縮小，顯示出來的結(jié)果可能會(huì)很難看。, ,顯示結(jié)果,HTML背景顏色和背景圖片,HTML的 有兩個(gè)關(guān)于背景的屬性， bgcolor屬性 bgcolor屬性用來設(shè)置HTML網(wǎng)頁的背景顏色。 background屬性 background屬性用來設(shè)置HTML網(wǎng)頁的背景圖片。background屬性值就是背景圖

8、片的路徑和文件名，如果背景圖片小于網(wǎng)頁顯示窗口，那么這個(gè)背景圖片會(huì)自動(dòng)重復(fù)。, 看，這個(gè)頁面是黃色的。 顯示, 這個(gè)網(wǎng)頁有背景圖片哦！ 如果圖片比頁面小，圖片會(huì)自動(dòng)重復(fù)。 顯示,HTML表格用表示。 一個(gè)表格可以分成很多行，用表示； 每行又可以分成很多單元格，用表示。 這三個(gè)Tag是創(chuàng)建表格最常用的Tag。,如何創(chuàng)建HTML表格,html 123 45 6 789 (顯示）,HTML字體(Fonts),在HTML里，可以用font這個(gè)元素及其屬性來設(shè)定字體的大小，顏色和字體風(fēng)格。 字體大小 用字體大小屬性(size)來設(shè)定字體的大小。示例代碼如下： 這一段的字體大小的值是2。 字體風(fēng)格 用face屬性來設(shè)定字體風(fēng)格。示例代碼如下： 這一段的字體風(fēng)格是arial。 字體顏色 用顏色屬性(color)來設(shè)定字體顏色。, 字體大小 font size 這段文字的字體大小值為1。 這段文字的字體大小值為2。 這段文字的字體大小值為3。 這段文字的字體大小值為4。 顯示, 字體風(fēng)格 font face 以下第一段用的是arial字體，第二段用的是courier字體，第三段用的是verdana字體。 arial courier verdana arial courier verdana arial courier verdana 顯示, 字體顏色 font color 這段文字用的是缺