HTML代碼簡介--網(wǎng)頁設(shè)計(jì).ppt_第1頁
HTML代碼簡介--網(wǎng)頁設(shè)計(jì).ppt_第2頁
HTML代碼簡介--網(wǎng)頁設(shè)計(jì).ppt_第3頁
HTML代碼簡介--網(wǎng)頁設(shè)計(jì).ppt_第4頁
HTML代碼簡介--網(wǎng)頁設(shè)計(jì).ppt_第5頁
已閱讀5頁,還剩37頁未讀, 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

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 這段文字用的是缺

溫馨提示

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

評(píng)論

0/150

提交評(píng)論