第02章HTML簡介課件

上傳人：h*** IP屬地：貴州上傳時(shí)間：2023-01-06 格式：PPT 頁數(shù)：114 大小：727.16KB 積分：25 舉報(bào) 版權(quán)申訴

已閱讀5頁，還剩109頁未讀，繼續(xù)免費(fèi)閱讀

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

文檔簡介

第2章HTML主要內(nèi)容

HTML文檔的基本結(jié)構(gòu)標(biāo)記及屬性的概念常用標(biāo)記的用法

網(wǎng)頁設(shè)計(jì)技術(shù)（第二版）張磊編著中國鐵道出版社第2章HTML主要內(nèi)容網(wǎng)頁設(shè)計(jì)技術(shù)（第二版）張磊編著中國2.1HTML文檔的基本結(jié)構(gòu)—簡單的HTML文件例2-1Sample.htm<html><head><title>我的網(wǎng)頁</title></head><body>Hello！網(wǎng)頁設(shè)計(jì)的學(xué)習(xí)現(xiàn)在開始啦！</body></html>網(wǎng)頁設(shè)計(jì)技術(shù)（第二版）張磊編著中國鐵道出版社2.1HTML文檔的基本結(jié)構(gòu)—簡單的HTML文件例2-12.1HTML文檔的基本結(jié)構(gòu)—標(biāo)記和屬性1．標(biāo)記HTML用于描述功能的標(biāo)識(shí)符稱為標(biāo)記，標(biāo)記在使用時(shí)必須用尖括號(hào)“<>”加以限定，如<html>。說明：⑴HTML的多數(shù)標(biāo)記都是成對(duì)出現(xiàn)的，前面的一個(gè)稱為開始標(biāo)記，后面的一個(gè)稱為結(jié)束標(biāo)記，結(jié)束標(biāo)記需在標(biāo)識(shí)符前使用斜杠“/”符號(hào)。⑵標(biāo)記中允許包含其他標(biāo)記，但標(biāo)記不能出現(xiàn)交叉。⑶任何標(biāo)記的大寫和小寫形式都是等價(jià)的。⑷有的瀏覽器對(duì)有些標(biāo)記是不支持的，當(dāng)瀏覽器不支持某個(gè)標(biāo)記時(shí)，該標(biāo)記即被忽略。網(wǎng)頁設(shè)計(jì)技術(shù)（第二版）張磊編著中國鐵道出版社2.1HTML文檔的基本結(jié)構(gòu)—標(biāo)記和屬性1．標(biāo)記網(wǎng)頁設(shè)計(jì)2.1HTML文檔的基本結(jié)構(gòu)—標(biāo)記和屬性2．標(biāo)記的屬性在標(biāo)記中使用的參數(shù)稱為標(biāo)記的屬性。一個(gè)標(biāo)記可以有多個(gè)屬性，每個(gè)屬性都有對(duì)應(yīng)的屬性值。舉例：<palign="center">其中：align：標(biāo)記的屬性；center：屬性“align”的值。例2-2sample-p.htm網(wǎng)頁設(shè)計(jì)技術(shù)（第二版）張磊編著中國鐵道出版社2.1HTML文檔的基本結(jié)構(gòu)—標(biāo)記和屬性2．標(biāo)記的屬性網(wǎng)2.1HTML文檔的基本結(jié)構(gòu)—標(biāo)記和屬性例2-2sample-p.htm<html><head><title>我的網(wǎng)頁</title></head><body>Hello！網(wǎng)頁設(shè)計(jì)的學(xué)習(xí)現(xiàn)在開始啦！<palign="center">同一個(gè)世界，同一個(gè)夢(mèng)想！</body></html>網(wǎng)頁設(shè)計(jì)技術(shù)（第二版）張磊編著中國鐵道出版社2.1HTML文檔的基本結(jié)構(gòu)—標(biāo)記和屬性例2-2sa2.1HTML文檔的基本結(jié)構(gòu)—HTML的結(jié)構(gòu)標(biāo)記HTML文件的基本結(jié)構(gòu)圖網(wǎng)頁設(shè)計(jì)技術(shù)（第二版）張磊編著中國鐵道出版社2.1HTML文檔的基本結(jié)構(gòu)—HTML的結(jié)構(gòu)標(biāo)記HTML2.1HTML文檔的基本結(jié)構(gòu)—標(biāo)記和屬性1．html標(biāo)記html標(biāo)記由“<html>”和“</html>”構(gòu)成，“<html>”通常位于HTML文件的開頭，表示HTML文檔的開始，“</html>”位于文件的結(jié)尾，表示HTML文檔的結(jié)束，HTML文檔的其他內(nèi)容都限定在html標(biāo)記對(duì)中。一個(gè)HTML文件只有一對(duì)html標(biāo)記。2．head標(biāo)記head標(biāo)記由“<head>”和“</head>”構(gòu)成，位于HTML文檔的前部。head區(qū)常用的標(biāo)記有title、meta等。網(wǎng)頁設(shè)計(jì)技術(shù)（第二版）張磊編著中國鐵道出版社2.1HTML文檔的基本結(jié)構(gòu)—標(biāo)記和屬性1．html標(biāo)記2.1HTML文檔的基本結(jié)構(gòu)—標(biāo)記和屬性⑴title標(biāo)記功能：標(biāo)識(shí)網(wǎng)頁標(biāo)題。格式：<title>字符串</title>說明：格式中的“字符串”是網(wǎng)頁的標(biāo)題內(nèi)容，瀏覽網(wǎng)頁時(shí)該內(nèi)容顯示在網(wǎng)頁頂部的標(biāo)題行中。⑵meta標(biāo)記功能：描述網(wǎng)頁關(guān)鍵字和網(wǎng)頁說明、定義網(wǎng)頁語言編碼、頁面刷新設(shè)置等，進(jìn)行網(wǎng)頁瀏覽時(shí)，這些標(biāo)記信息是不可見的。網(wǎng)頁設(shè)計(jì)技術(shù)（第二版）張磊編著中國鐵道出版社2.1HTML文檔的基本結(jié)構(gòu)—標(biāo)記和屬性⑴title標(biāo)2.1HTML文檔的基本結(jié)構(gòu)—標(biāo)記和屬性⑵meta標(biāo)記描述網(wǎng)頁關(guān)鍵字<metaname="keywords"content="關(guān)鍵字列表">“關(guān)鍵字列表”中的關(guān)鍵字是網(wǎng)絡(luò)搜索引擎借以分類的關(guān)鍵詞。例如：<metaname="keywords"content="咨詢,航天,飛行器,技術(shù)服務(wù),設(shè)計(jì),轉(zhuǎn)讓">網(wǎng)頁設(shè)計(jì)技術(shù)（第二版）張磊編著中國鐵道出版社2.1HTML文檔的基本結(jié)構(gòu)—標(biāo)記和屬性⑵meta標(biāo)記2.1HTML文檔的基本結(jié)構(gòu)—標(biāo)記和屬性⑵meta標(biāo)記描述網(wǎng)頁說明<metaname="description"content="網(wǎng)頁說明信息">“網(wǎng)頁說明信息”是一段文本，它將作為搜索引擎對(duì)網(wǎng)頁的描述信息。搜索引擎就能夠根據(jù)這些關(guān)鍵字搜索到相應(yīng)網(wǎng)頁，并顯示關(guān)于網(wǎng)頁的說明信息。網(wǎng)頁設(shè)計(jì)技術(shù)（第二版）張磊編著中國鐵道出版社2.1HTML文檔的基本結(jié)構(gòu)—標(biāo)記和屬性⑵meta標(biāo)記2.1HTML文檔的基本結(jié)構(gòu)—標(biāo)記和屬性⑵meta標(biāo)記定義網(wǎng)頁語言編碼格式：<metahttp-equiv="content-type"content="text/html;charset=字符集編碼名稱">例如：<metahttp-equiv="content-type"content="text/html;charset=gb2312">瀏覽器將自動(dòng)選用gb2312編碼作為本網(wǎng)頁的字符編碼。網(wǎng)頁設(shè)計(jì)技術(shù)（第二版）張磊編著中國鐵道出版社2.1HTML文檔的基本結(jié)構(gòu)—標(biāo)記和屬性⑵meta標(biāo)記2.1HTML文檔的基本結(jié)構(gòu)—標(biāo)記和屬性⑵meta標(biāo)記頁面刷新格式：<metahttp-equiv="refresh"content="數(shù)值;URL=文件名或網(wǎng)址">其中：content屬性中的“數(shù)值”代表刷新網(wǎng)頁延遲的時(shí)間，單位是秒；“文件名或網(wǎng)址”為刷新時(shí)要鏈接到的文件或網(wǎng)址。當(dāng)缺少URL項(xiàng)時(shí)，瀏覽器將刷新當(dāng)前網(wǎng)頁。網(wǎng)頁設(shè)計(jì)技術(shù)（第二版）張磊編著中國鐵道出版社2.1HTML文檔的基本結(jié)構(gòu)—標(biāo)記和屬性⑵meta標(biāo)記2.1HTML文檔的基本結(jié)構(gòu)—標(biāo)記和屬性⑵meta標(biāo)記例2-3mark-meta.htm<html><head><metahttp-equiv="refresh"content="20;URL="><title>我的網(wǎng)頁</title></head><body>Hello！網(wǎng)頁設(shè)計(jì)的學(xué)習(xí)現(xiàn)在開始啦！</body></html>網(wǎng)頁設(shè)計(jì)技術(shù)（第二版）張磊編著中國鐵道出版社2.1HTML文檔的基本結(jié)構(gòu)—標(biāo)記和屬性⑵meta標(biāo)記2.1HTML文檔的基本結(jié)構(gòu)—標(biāo)記和屬性3.body標(biāo)記網(wǎng)頁的主體標(biāo)記，由<body>和</body>構(gòu)成，網(wǎng)頁中的可見對(duì)象通常在body區(qū)內(nèi)進(jìn)行描述。body區(qū)常用的標(biāo)記：排版標(biāo)記、圖像標(biāo)記、超鏈接標(biāo)記、表格標(biāo)記等。網(wǎng)頁設(shè)計(jì)技術(shù)（第二版）張磊編著中國鐵道出版社2.1HTML文檔的基本結(jié)構(gòu)—標(biāo)記和屬性3.body標(biāo)2.1HTML文檔的基本結(jié)構(gòu)—標(biāo)記和屬性body標(biāo)記的常用屬性⑴bgcolor屬性用于定義網(wǎng)頁的背景顏色。用法一：bgcolor="#RGB顏色編碼"RGB顏色編碼：一組六位的十六進(jìn)制數(shù)值，第1、2位表示紅色值（R），第3、4位表示綠色值（G），第5、6位表示藍(lán)色值（B）。例如：<bodybgcolor="#cccccc">網(wǎng)頁設(shè)計(jì)技術(shù)（第二版）張磊編著中國鐵道出版社2.1HTML文檔的基本結(jié)構(gòu)—標(biāo)記和屬性body標(biāo)記的常2.1HTML文檔的基本結(jié)構(gòu)—標(biāo)記和屬性⑴bgcolor屬性用法二：bgcolor="顏色標(biāo)識(shí)符"“顏色標(biāo)識(shí)符”在HTML的預(yù)定義顏色符中取值。常用的預(yù)定義顏色符：black、olive、teal、red、blue、maroon、navy、gray、lime、fuchsia、white、green、purple、sliver、yellow、aqua例如：<bodybgcolor="yellow">網(wǎng)頁設(shè)計(jì)技術(shù)（第二版）張磊編著中國鐵道出版社2.1HTML文檔的基本結(jié)構(gòu)—標(biāo)記和屬性⑴bgcolo2.1HTML文檔的基本結(jié)構(gòu)—標(biāo)記和屬性⑵其他常用屬性屬性名屬性用法屬性功能backgroundbackground="圖像url"設(shè)定圖像為網(wǎng)頁背景texttext="顏色"設(shè)定網(wǎng)頁文本的默認(rèn)顏色linklink="顏色"鏈接文字顏色alinkalink="顏色"活動(dòng)鏈接文字顏色vlinkvlink="顏色"已訪問鏈接文字顏色leftmarginLeftmargin="像素值"頁面左側(cè)的留白距離topmargintopmargin="像素值"頁面頂部的留白距離網(wǎng)頁設(shè)計(jì)技術(shù)（第二版）張磊編著中國鐵道出版社2.1HTML文檔的基本結(jié)構(gòu)—標(biāo)記和屬性⑵其他常用屬性2.2排版標(biāo)記—標(biāo)題標(biāo)記標(biāo)題標(biāo)記用于表示文本的各種題目，標(biāo)題號(hào)越小，字號(hào)越大。格式：<hnalign＝"對(duì)齊方式">標(biāo)題內(nèi)容</hn>其中：hn分別表示h1、h2、……、h6。align是標(biāo)題標(biāo)記的屬性，屬性值為標(biāo)題的對(duì)齊方式，具體為left、center和right，分別使標(biāo)題居左、居中和居右。例2-4mark-hn.htm

例2-4mark-hn.htm<html><head><title>標(biāo)題標(biāo)記應(yīng)用示例</title></head><body><h1align="left">這里是標(biāo)題h1</h1><h2align="left">這里是標(biāo)題h2</h2><h3align="center">這里是標(biāo)題h3</h3><h4align="center">這里是標(biāo)題h4</h4><h5align="left">這里是標(biāo)題h5</h5><h6align="left">這里是標(biāo)題h6</h6></body></html>網(wǎng)頁設(shè)計(jì)技術(shù)（第二版）張磊編著中國鐵道出版社2.2排版標(biāo)記—標(biāo)題標(biāo)記標(biāo)題標(biāo)記用于表示文本的各種題目，標(biāo)2.2排版標(biāo)記—段落標(biāo)記段落標(biāo)記p用于定義一個(gè)段落，并對(duì)段落的屬性進(jìn)行說明。格式：<palign="屬性值">段落文本align屬性的常用值：left，center和right，分別規(guī)定段落在窗口中的水平位置為居左、居中和居右。說明：⑴p標(biāo)記中的標(biāo)記可以省略，瀏覽器在遇到下一個(gè)標(biāo)記時(shí)自動(dòng)開始一個(gè)新段落。⑵通常一般文檔中使用的分段標(biāo)識(shí)在HTML中都被忽略掉，只有遇到標(biāo)記時(shí)才會(huì)產(chǎn)生新段落。⑶段落中不管有多少個(gè)連續(xù)空格，都將被處理為一個(gè)空格。例2-5mark-p.htm例2-5mark-p.htm<html><head><title>p標(biāo)記和段落的示例</title></head><body>第29屆奧運(yùn)會(huì)在北京舉行。同一個(gè)世界，同一個(gè)夢(mèng)想！<!該行和上一行是同一個(gè)段落><!這個(gè)標(biāo)記可以省略><palign="center">2008，北京！<!這是一個(gè)新段落>中國北京歡迎來自世界各地的朋友！<!這是另外一個(gè)段落>北京歡迎您！<!請(qǐng)注意觀察瀏覽結(jié)果></body></html>網(wǎng)頁設(shè)計(jì)技術(shù)（第二版）張磊編著中國鐵道出版社2.2排版標(biāo)記—段落標(biāo)記段落標(biāo)記p用于定義一個(gè)段落，并對(duì)段2.2排版標(biāo)記—換行標(biāo)記換行標(biāo)記產(chǎn)生換行。格式： 僅產(chǎn)生一個(gè)新行，并不產(chǎn)生新段落。若在一個(gè)段落中使用該標(biāo)記，產(chǎn)生的新行仍然具有原段落的屬性。例2-6mark-br.htm

網(wǎng)頁設(shè)計(jì)技術(shù)（第二版）張磊編著中國鐵道出版社2.2排版標(biāo)記—換行標(biāo)記換行標(biāo)記產(chǎn)生換行。網(wǎng)頁設(shè)計(jì)技術(shù)（第二2.2排版標(biāo)記—換行標(biāo)記例2-6mark-br.htm<html><head><title>br標(biāo)記示例</title></head><body>第29屆奧運(yùn)會(huì)在北京舉行。同一個(gè)世界，同一個(gè)夢(mèng)想！<!該行和上一行是同一個(gè)段落><palign="center">2008，北京！

中國北京歡迎來自世界各地的朋友！北京歡迎您！</body></html>網(wǎng)頁設(shè)計(jì)技術(shù)（第二版）張磊編著中國鐵道出版社2.2排版標(biāo)記—換行標(biāo)記例2-6mark-br.htm網(wǎng)頁2.2排版標(biāo)記—文本標(biāo)記文本標(biāo)記font用于控制文字的顯示形式常用屬性：size、face、color，分別定義文字的大小、字形、顏色。1．設(shè)定文字大小設(shè)定文字大小由size屬性實(shí)現(xiàn)。絕對(duì)形式：<fontsize="字號(hào)">文字字號(hào)取值1-7，數(shù)值越大字越大，HTML的默認(rèn)字號(hào)為3號(hào)字。網(wǎng)頁設(shè)計(jì)技術(shù)（第二版）張磊編著中國鐵道出版社2.2排版標(biāo)記—文本標(biāo)記文本標(biāo)記font用于控制文字的顯示2.2排版標(biāo)記—文本標(biāo)記1．設(shè)定文字大小相對(duì)形式：<fontsize="±n">文字相對(duì)形式中字號(hào)的實(shí)際大小有兩種情況：⑴在沒有特別設(shè)定基準(zhǔn)字號(hào)的情況下，字號(hào)以默認(rèn)字號(hào)3為基準(zhǔn)變化。⑵當(dāng)使用<basefontsize="n">標(biāo)記設(shè)定基準(zhǔn)字號(hào)后，字號(hào)將以n為基準(zhǔn)變化。網(wǎng)頁設(shè)計(jì)技術(shù)（第二版）張磊編著中國鐵道出版社2.2排版標(biāo)記—文本標(biāo)記1．設(shè)定文字大小網(wǎng)頁設(shè)計(jì)技術(shù)（第二版2.2排版標(biāo)記—文本標(biāo)記1．設(shè)定文字大小例2-7mark-font-size.htm<html><head><title>font(size)標(biāo)記示例</title></head><body><fontsize="5">同一個(gè)世界，同一個(gè)夢(mèng)想！ <fontsize="+3">同一個(gè)世界，同一個(gè)夢(mèng)想！ <fontsize="-1">同一個(gè)世界，同一個(gè)夢(mèng)想！<basefontsize="6"> <fontsize="-1">同一個(gè)世界，同一個(gè)夢(mèng)想！</body></html>網(wǎng)頁設(shè)計(jì)技術(shù)（第二版）張磊編著中國鐵道出版社2.2排版標(biāo)記—文本標(biāo)記1．設(shè)定文字大小網(wǎng)頁設(shè)計(jì)技術(shù)（第二版2.2排版標(biāo)記—文本標(biāo)記2．設(shè)定文字字體設(shè)定文字字體由face屬性實(shí)現(xiàn)，格式如下：<fontface="字體名稱">文字例如：<fontface="楷體_GB2312">石油是一種不可再生能源說明：只有當(dāng)前系統(tǒng)中能夠使用的字體，相應(yīng)設(shè)定才是有效的。網(wǎng)頁設(shè)計(jì)技術(shù)（第二版）張磊編著中國鐵道出版社2.2排版標(biāo)記—文本標(biāo)記2．設(shè)定文字字體網(wǎng)頁設(shè)計(jì)技術(shù)（第二版2.2排版標(biāo)記—文本標(biāo)記3．設(shè)定文字顏色設(shè)定文字的顯示顏色由color屬性實(shí)現(xiàn)。格式一：<fontcolor="#RGB顏色編碼">文字格式二：<fontcolor="顏色標(biāo)識(shí)符">文字示例：用法一：<fontcolor="#00ff00">網(wǎng)頁設(shè)計(jì)用法二：<fontcolor="red">網(wǎng)頁設(shè)計(jì)例2-8mark-font.htm網(wǎng)頁設(shè)計(jì)技術(shù)（第二版）張磊編著中國鐵道出版社2.2排版標(biāo)記—文本標(biāo)記3．設(shè)定文字顏色網(wǎng)頁設(shè)計(jì)技術(shù)（第二版2.2排版標(biāo)記—文本標(biāo)記例2-8mark-font.htm<html><head><title>font標(biāo)記示例</title></head><body><fontcolor="red">同一個(gè)世界，同一個(gè)夢(mèng)想！ <fontsize="+3"color="blue"face="隸書">同一個(gè)世界，同一個(gè)夢(mèng)想！ <fontsize="6"face="楷體_GB2312">同一個(gè)世界，同一個(gè)夢(mèng)想！</body></html>網(wǎng)頁設(shè)計(jì)技術(shù)（第二版）張磊編著中國鐵道出版社2.2排版標(biāo)記—文本標(biāo)記例2-8mark-font.htm2.2排版標(biāo)記—文字風(fēng)格標(biāo)記標(biāo)記名稱標(biāo)記功能標(biāo)記使用格式b文字加粗文字i文字傾斜文字u文字加下劃線文字strike文字加刪除線<strike>文字</strike>sup文字為上標(biāo)文字sub文字為下標(biāo)文字網(wǎng)頁設(shè)計(jì)技術(shù)（第二版）張磊編著中國鐵道出版社2.2排版標(biāo)記—文字風(fēng)格標(biāo)記標(biāo)記名稱標(biāo)記功能標(biāo)記使用格式b2.2排版標(biāo)記—文字風(fēng)格標(biāo)記例2-9mark-style.htm<html><head><title>文字風(fēng)格標(biāo)記示例</title></head><body><fontsize="5"face="楷體_GB2312">要設(shè)計(jì)好網(wǎng)頁學(xué)習(xí)HTML是必要的！ <fontsize="5"><strike>學(xué)習(xí)HTML對(duì)設(shè)計(jì)網(wǎng)頁毫無幫助！</strike> <fontsize="+2">愛因斯坦與E=MC2是科學(xué)的奇跡！</body></html>網(wǎng)頁設(shè)計(jì)技術(shù)（第二版）張磊編著中國鐵道出版社2.2排版標(biāo)記—文字風(fēng)格標(biāo)記例2-9mark-style2.3多媒體標(biāo)記—圖像標(biāo)記格式：

<img

屬性表>功能：在網(wǎng)頁中插入圖像屬性名屬性用法功能srcsrc="url"指定插入圖像的urlalignalign="top"圖像兩側(cè)的文字與圖像頂部對(duì)齊align="center"圖像兩側(cè)的文字與圖像中部對(duì)齊align="bottom"圖像兩側(cè)的文字與圖像底部對(duì)齊align="left"圖像位置居左align="right"圖像位置居右titletitle="圖像說明"當(dāng)鼠標(biāo)移到圖片上是顯示圖片說明信息。altalt="圖像替代文字"在瀏覽器還沒有裝入圖像的時(shí)候，先顯示有關(guān)此圖像的信息heightheight="圖像高度值"設(shè)置圖像高度（像素）widthwidth="圖像寬度值"設(shè)置圖像寬度（像素）borderborder="圖像邊框?qū)挾戎?設(shè)置圖像邊框?qū)挾龋ㄏ袼兀┚W(wǎng)頁設(shè)計(jì)技術(shù)（第二版）張磊編著中國鐵道出版社2.3多媒體標(biāo)記—圖像標(biāo)記格式：<img屬性表>2.3多媒體標(biāo)記—圖像標(biāo)記格式：

<img

屬性表>功能：在網(wǎng)頁中插入圖像例2-10mark-img.htm<html><head><title>圖像標(biāo)記示例</title></head><body><imgsrc="d:/html/image/ms.jpg"title="希望的田野"alt="麥穗"width="160"height="100"></body></html>網(wǎng)頁設(shè)計(jì)技術(shù)（第二版）張磊編著中國鐵道出版社2.3多媒體標(biāo)記—圖像標(biāo)記格式：<img屬性表>2.3多媒體標(biāo)記—背景音樂標(biāo)記背景音樂標(biāo)記bgsound用于插入背景音樂。一般格式：<bgsound屬性表>屬性名屬性用法功能srcsrc="url"指定插入音樂的urlautostartautostart="true|false"autostart的取值只能是true或false，取true時(shí)自動(dòng)播放音樂。looploop="n|infinite"n是整數(shù)值，loop取值為n時(shí)，連續(xù)播放n次，否則循環(huán)播放。網(wǎng)頁設(shè)計(jì)技術(shù)（第二版）張磊編著中國鐵道出版社2.3多媒體標(biāo)記—背景音樂標(biāo)記背景音樂標(biāo)記bgsound2.4連接標(biāo)記—超鏈接標(biāo)記HTML的超鏈接由標(biāo)記a實(shí)現(xiàn)。常用的鏈接形式：文件鏈接、錨點(diǎn)鏈接、E_mail鏈接。文件鏈接：指向一個(gè)文件目標(biāo)；錨點(diǎn)鏈接：指向網(wǎng)頁中的某一部分；E-mail鏈接：通過郵件服務(wù)程序向指定信箱發(fā)送電子郵件。超鏈接標(biāo)記a的常用屬性是href屬性和name屬性。

網(wǎng)頁設(shè)計(jì)技術(shù)（第二版）張磊編著中國鐵道出版社2.4連接標(biāo)記—超鏈接標(biāo)記HTML的超鏈接由標(biāo)記a實(shí)現(xiàn)2.4連接標(biāo)記—超鏈接標(biāo)記1．建立文件鏈接格式：<ahref="url">字符串</a>href屬性中的“url”是被指向的目標(biāo)，“字符串”在html文件中是鏈接標(biāo)識(shí)，它以超鏈接的形式呈現(xiàn)在網(wǎng)頁中。鏈接到網(wǎng)頁示例：<ahref="">搜狐首頁</a>鏈接到其他文件示例：<ahref="d:/newsit/info.wod">就業(yè)信息表</a>網(wǎng)頁設(shè)計(jì)技術(shù)（第二版）張磊編著中國鐵道出版社2.4連接標(biāo)記—超鏈接標(biāo)記1．建立文件鏈接網(wǎng)頁設(shè)計(jì)技術(shù)2.4連接標(biāo)記—超鏈接標(biāo)記2．錨點(diǎn)鏈接錨點(diǎn)鏈接是將鏈接指向網(wǎng)頁的某個(gè)具體位置，該位置可以在當(dāng)前網(wǎng)頁中，也可以在其他網(wǎng)頁中。錨點(diǎn)鏈接的目的主要是實(shí)現(xiàn)較長網(wǎng)頁文檔的快速瀏覽。錨點(diǎn)鏈接需要使用鏈接標(biāo)記a的name屬性和href屬性。name屬性用于在鏈接的目標(biāo)位置設(shè)立錨點(diǎn)，href屬性用于建立到錨點(diǎn)的鏈接，并設(shè)立鏈接標(biāo)識(shí)，當(dāng)用鼠標(biāo)點(diǎn)擊該鏈接標(biāo)識(shí)后即跳轉(zhuǎn)到網(wǎng)頁的指定位置。網(wǎng)頁設(shè)計(jì)技術(shù)（第二版）張磊編著中國鐵道出版社2.4連接標(biāo)記—超鏈接標(biāo)記2．錨點(diǎn)鏈接網(wǎng)頁設(shè)計(jì)技術(shù)（第2.4連接標(biāo)記—超鏈接標(biāo)記⑴設(shè)立錨點(diǎn)設(shè)立錨點(diǎn)標(biāo)記的格式：<aname＝"鏈接字符串">錨點(diǎn)提示信息</a>⑵建立頁內(nèi)錨點(diǎn)鏈接格式：<ahref="#鏈接字符串">鏈接標(biāo)識(shí)</a>說明：①href屬性的“鏈接字符串”與name屬性的“鏈接字符串”必須完全相同，否則鏈接將不能實(shí)現(xiàn)。②“鏈接標(biāo)識(shí)”可以是任何信息，在網(wǎng)頁中以超鏈接的形式顯示。③“<ahref="#鏈接字符串">鏈接標(biāo)識(shí)</a>”標(biāo)記可以出現(xiàn)多次，既可以位于錨點(diǎn)標(biāo)記之前，也可以位于錨點(diǎn)標(biāo)記之后。⑶建立到其他網(wǎng)頁的錨點(diǎn)鏈接格式：<ahref="url#鏈接字符串">鏈接標(biāo)識(shí)</a>格式中的“url”是鏈接到的網(wǎng)頁文件的url，若被鏈接的網(wǎng)頁與當(dāng)前網(wǎng)頁在相同位置，則為網(wǎng)頁文件的文件名。在這里使用的文件名必須是文件全名。網(wǎng)頁設(shè)計(jì)技術(shù)（第二版）張磊編著中國鐵道出版社2.4連接標(biāo)記—超鏈接標(biāo)記⑴設(shè)立錨點(diǎn)網(wǎng)頁設(shè)計(jì)技術(shù)（第2.4連接標(biāo)記—超鏈接標(biāo)記1.htm<html><head><title>錨點(diǎn)標(biāo)記應(yīng)用示例（一）</title></head><body><ahref="#王之渙詩詞欣賞">唐詩鑒賞</a><ahref="2.htm#校園早晨">臺(tái)灣校園歌曲</a><palign="center"><h3>唐詩三百首</h3> 李白詩詞 贈(zèng)汪倫 李白乘舟將欲行， 忽聞岸上踏歌聲。 桃花潭水深千尺， 不及汪倫送我情。<!下一個(gè)標(biāo)記設(shè)立錨點(diǎn)> <aname="王之渙詩詞欣賞">王之渙詩詞</a> 登鸛雀樓 白日依山盡， 黃河入海流。 欲窮千里目， 更上一層樓。 涼州詞 黃河遠(yuǎn)上白云間， 一片孤城萬仞山。 羌笛何須怨楊柳， 春風(fēng)不度玉門關(guān)。</body></html>2.htm<html><head><title>錨點(diǎn)標(biāo)記應(yīng)用示例（二）</title></head><body><h3>歌曲欣賞</h3> 紅色經(jīng)典歌曲 長江之歌 你從雪山走來 ……<!下一個(gè)標(biāo)記設(shè)立錨點(diǎn)> <aname="校園早晨">臺(tái)灣校園歌曲欣賞</a> 校園的早晨 沿著校園熟悉的小路， 清晨來到樹下讀書，…… 外婆的澎湖灣 晚風(fēng)輕拂著澎湖灣， 白浪逐沙灘…… </body></html>網(wǎng)頁設(shè)計(jì)技術(shù)（第二版）張磊編著中國鐵道出版社2.4連接標(biāo)記—超鏈接標(biāo)記1.htmPage2.4連接標(biāo)記—超鏈接標(biāo)記3．鏈接到E-mail一般格式：<ahref="mailto:E_mail地址">鏈接標(biāo)識(shí)符</a>其中：“E_mail地址”是要鏈接到的E_mail的實(shí)際地址。只有客戶機(jī)已經(jīng)安裝了默認(rèn)的電子郵件服務(wù)程序時(shí)，鏈接到E_mail功能才能啟用。用法示例：<ahref="mailto:">請(qǐng)給我寫信</a>網(wǎng)頁設(shè)計(jì)技術(shù)（第二版）張磊編著中國鐵道出版社2.4連接標(biāo)記—超鏈接標(biāo)記3．鏈接到E-mail網(wǎng)頁設(shè)2.4連接標(biāo)記—超鏈接標(biāo)記4．用圖像建立鏈接格式：<ahref="url"><imgsrc="url"></a>格式中“<imgsrc="url">”將插入一個(gè)圖像，該圖像將作為超鏈接標(biāo)記a的鏈接標(biāo)志。示例：

<ahref="mailto:"><imgsrc="letter.jpg"></a>網(wǎng)頁設(shè)計(jì)技術(shù)（第二版）張磊編著中國鐵道出版社2.4連接標(biāo)記—超鏈接標(biāo)記4．用圖像建立鏈接網(wǎng)頁設(shè)計(jì)技2.4連接標(biāo)記—link標(biāo)記一般格式：<link屬性表>主要功能：建立與外部文檔的連接，建立的連接在HTML內(nèi)部發(fā)生作用，網(wǎng)頁的瀏覽用戶并不會(huì)感覺到這種連接的存在。link標(biāo)記最主要的作用是建立與外部樣式表的連接。常用屬性：rel屬性、href屬性、type屬性link標(biāo)記是head區(qū)的一個(gè)連接標(biāo)記，與超鏈接標(biāo)記a具有完全不同的功能。網(wǎng)頁設(shè)計(jì)技術(shù)（第二版）張磊編著中國鐵道出版社2.4連接標(biāo)記—link標(biāo)記一般格式：<link屬2.4連接標(biāo)記—link標(biāo)記1．rel屬性定義連接的文件和HTML文檔之間的關(guān)系。用法：rel="atylesheet|alternateatylesheet"當(dāng)rel取值為“atylesheet”時(shí)，指定一個(gè)固定或首選的樣式；當(dāng)取值為“alternatestylesheet”時(shí)定義一個(gè)交互樣式。固定樣式在樣式表激活時(shí)總被應(yīng)用。2．href屬性指定目標(biāo)文檔的位置。用法如下：href="url"3．type屬性指定媒體類型，如“text/css”是一個(gè)層疊樣式表。link標(biāo)記的用法示例：<linkrel="stylesheet"href="style.css"type="text/css"><linkrel="alternatestylesheet"href="color-24b.css"type="text/css">網(wǎng)頁設(shè)計(jì)技術(shù)（第二版）張磊編著中國鐵道出版社2.4連接標(biāo)記—link標(biāo)記1．rel屬性網(wǎng)頁設(shè)計(jì)技術(shù)（2.5表格標(biāo)記—表格的基本標(biāo)記1．table標(biāo)記功能：創(chuàng)建表屬性rules屬性：控制表格的邊框顯示方式。rules="none"

不加內(nèi)部邊框rules="rows"

只顯示水平方向的邊框rules="cols"

只顯示垂直方向上的邊框rules="all"

顯示所有方向上的邊框width屬性：控制表格的寬度。width="像素值|百分比"網(wǎng)頁設(shè)計(jì)技術(shù)（第二版）張磊編著中國鐵道出版社2.5表格標(biāo)記—表格的基本標(biāo)記1．table標(biāo)記網(wǎng)頁設(shè)計(jì)2.5表格標(biāo)記—表格的基本標(biāo)記2．tr標(biāo)記tr標(biāo)記用于定義表行，每一個(gè)tr標(biāo)記對(duì)定義一個(gè)表行。tr標(biāo)記只能在<table>與</table>之間使用，否則無效。3．td標(biāo)記td標(biāo)記用于定義每個(gè)表行的單元格，每一個(gè)td標(biāo)記對(duì)定義一個(gè)單元格。td標(biāo)記只能在<tr>與</tr>之間使用，否則無效。例2-12mark-table.htm網(wǎng)頁設(shè)計(jì)技術(shù)（第二版）張磊編著中國鐵道出版社2.5表格標(biāo)記—表格的基本標(biāo)記2．tr標(biāo)記網(wǎng)頁設(shè)計(jì)技術(shù)（2.5表格標(biāo)記—表格的基本標(biāo)記例2-12mark-table.htm<html><head><title>表格標(biāo)記應(yīng)用示例</title><head><body><!以下開始建立表格><tablerules="all"width="300"><tr><!表格第一行><td><fontsize="2">圖片名稱</td><td><fontsize="2">圖片</td></tr><tr><!表格第二行><td><fontsize="2">湖邊景色</td><td><imgsrc="image\hbjs.jpg"width=50hight=30border=0></td></tr><tr><!表格第三行><td><fontsize="2">胡光山色</td><td><imgsrc="image\hgss.jpg"width=50hight=30border=0></td></tr></table></body></html>網(wǎng)頁設(shè)計(jì)技術(shù)（第二版）張磊編著中國鐵道出版社2.5表格標(biāo)記—表格的基本標(biāo)記例2-12mark-ta2.5表格標(biāo)記—表格標(biāo)記的主要屬性屬性名稱屬性功能border="n"設(shè)置表格或單元格的邊框。n=0時(shí)無邊框；n>0時(shí)值越大邊框越粗bordercolor="..."設(shè)置表格或單元格的邊框顏色bgcolor="..."設(shè)置表格或單元格的背景顏色bordercolorlight="..."設(shè)置邊框明亮部分的顏色（當(dāng)border值大于1才有效）bordercolordark="..."設(shè)置邊框昏暗部分的顏色(當(dāng)border值大于1才有效）cellspacing="..."設(shè)置單元格之間的間隔大小cellpadding="..."設(shè)置單元格內(nèi)容與單元格邊框的間隔大小width="n"設(shè)置表格或單元格的寬度height="n"設(shè)置單元格高度align="..."設(shè)置單元格內(nèi)容的水平對(duì)齊方式(left、center、right)valign="..."設(shè)置單元格內(nèi)容垂直對(duì)齊方式網(wǎng)頁設(shè)計(jì)技術(shù)（第二版）張磊編著中國鐵道出版社2.5表格標(biāo)記—表格標(biāo)記的主要屬性屬性名稱屬性功能bor2.6框架標(biāo)記框架是進(jìn)行網(wǎng)頁布局的常用技術(shù)，它將瀏覽器的窗口分成多個(gè)區(qū)域，每個(gè)區(qū)有各自的HTML文件，即裝載各自的網(wǎng)頁，從而實(shí)現(xiàn)在一個(gè)瀏覽器窗口中同時(shí)瀏覽多個(gè)網(wǎng)頁。也可以在框架區(qū)域中設(shè)定超鏈接，通過為超鏈接指定目標(biāo)框架，建立框架內(nèi)容之間的聯(lián)系，實(shí)現(xiàn)頁面的導(dǎo)航和頁面間的交互操作。與表格類似，框架可以使設(shè)計(jì)者以行和列的方式組織頁面信息。但與表格不同的是，使用框架的超鏈接，可以改變自身或其他框架中的內(nèi)容。網(wǎng)頁設(shè)計(jì)技術(shù)（第二版）張磊編著中國鐵道出版社2.6框架標(biāo)記框架是進(jìn)行網(wǎng)頁布局的常用技術(shù)，它將瀏覽器的窗2.6框架標(biāo)記—常用的框架標(biāo)記1．frameset標(biāo)記frameset標(biāo)記用于創(chuàng)建框架。一般用法：<frameset屬性表>……</frameset>主要屬性：⑴cols屬性和rows屬性⑵frameborder屬性⑶border屬性⑷bordercolor屬性⑸framespacing屬性網(wǎng)頁設(shè)計(jì)技術(shù)（第二版）張磊編著中國鐵道出版社2.6框架標(biāo)記—常用的框架標(biāo)記1．frameset標(biāo)記網(wǎng)2.6框架標(biāo)記—常用的框架標(biāo)記⑴cols屬性和rows屬性cols和rows是決定頁面如何分割的兩個(gè)屬性。左右分割窗口用cols屬性，上下分割窗口用rows屬性，分割生成的字窗口的數(shù)目，由各屬性值的個(gè)數(shù)確定。屬性的取值主要有如下兩種形式：①百分比和“*”的組合形式。如：rows=“30%,%40,*”，表示垂直方向分割成三個(gè)子窗口，各子窗口的高度占大窗口高度的的百分比依次是30%、40%和30%。其中“*”表示剩余部分，即“*”對(duì)應(yīng)的子窗口高度為剩余的高度。②像素值和“*”的組合形式。如：rols="200,100,*"，表示水平方向分割成三個(gè)子窗口，前兩個(gè)子窗口的寬度分別為200像素和100像素，第三個(gè)字窗口的寬度為大窗口剩余的寬度。網(wǎng)頁設(shè)計(jì)技術(shù)（第二版）張磊編著中國鐵道出版社2.6框架標(biāo)記—常用的框架標(biāo)記⑴cols屬性和rows2.6框架標(biāo)記—常用的框架標(biāo)記⑵frameborder屬性指定各子窗口是否加邊框。用法：frameborder="yes|no"取值“yes”時(shí)加邊框，取值“no”時(shí)不加邊框。⑶border屬性定義子窗口邊框的寬度，單位為像素值。⑷bordercolor屬性定義邊框的顏色，用法如下：bordercolor="#RGB顏色碼|預(yù)定義標(biāo)識(shí)符"⑸framespacing屬性設(shè)定各分窗口之間的間隔大小，單位是像素值，默認(rèn)值是0。網(wǎng)頁設(shè)計(jì)技術(shù)（第二版）張磊編著中國鐵道出版社2.6框架標(biāo)記—常用的框架標(biāo)記⑵frameborder2.6框架標(biāo)記—常用的框架標(biāo)記2．frame標(biāo)記定義各子窗口的屬性，在frameset標(biāo)記區(qū)內(nèi)使用。一般用法：<frame屬性表>主要屬性：⑴align屬性設(shè)定子窗口的位置用法：align="left|center|right|top|bottom"⑵name屬性指定子窗口的名稱用法：<framename="目標(biāo)框架名">⑶src屬性用于指定分窗口所對(duì)應(yīng)的HTML頁面地址。用法：src="url"⑷noresize屬性定義子窗口的可調(diào)性。⑸frameborder屬性和bordercolor屬性設(shè)定用<frame>標(biāo)記的子窗口有無邊框和邊框顏色。網(wǎng)頁設(shè)計(jì)技術(shù)（第二版）張磊編著中國鐵道出版社2.6框架標(biāo)記—常用的框架標(biāo)記2．frame標(biāo)記網(wǎng)頁設(shè)計(jì)2.6框架標(biāo)記—常用的框架標(biāo)記例2.13水平分割窗口（frame.htm)<html><head><title>水平分割框架示例</title></head><framesetcols="20%,40%,*"><frame><frame><frame></frameset></html>網(wǎng)頁設(shè)計(jì)技術(shù)（第二版）張磊編著中國鐵道出版社2.6框架標(biāo)記—常用的框架標(biāo)記例2.13水平分割窗口（2.6框架標(biāo)記—常用的框架標(biāo)記例2.14框架嵌套示例（frame-rows.htm)<html><head><title>框架嵌套示例</title></head><framesetcols="20%,40%,*"><frame><framesetrows="30,*"><frame><frame></frameset><frame></frameset></html>網(wǎng)頁設(shè)計(jì)技術(shù)（第二版）張磊編著中國鐵道出版社2.6框架標(biāo)記—常用的框架標(biāo)記例2.14框架嵌套示例（2.6框架標(biāo)記—在框架中顯示網(wǎng)頁1．在框架中打開獨(dú)立的網(wǎng)頁在定義該窗口的frame標(biāo)記中使用src屬性即可。2．在框架中打開有鏈接關(guān)系的網(wǎng)頁⑴為超鏈接的目標(biāo)框架指定一個(gè)名字。⑵指定超鏈接的目標(biāo)框架。要指定超鏈接的目標(biāo)框架，需要在定義鏈接時(shí)使用鏈接標(biāo)記a的target屬性。用法：<ahref="url"target="目標(biāo)框架名">鏈接標(biāo)識(shí)</a>或者：<ahref="url#鏈接字符串"target="目標(biāo)框架名">鏈接標(biāo)識(shí)</a>網(wǎng)頁設(shè)計(jì)技術(shù)（第二版）張磊編著中國鐵道出版社2.6框架標(biāo)記—在框架中顯示網(wǎng)頁1．在框架中打開獨(dú)立的網(wǎng)2.6框架標(biāo)記—在框架中顯示網(wǎng)頁例2.15在框架中顯示網(wǎng)頁（frame.htm)網(wǎng)頁設(shè)計(jì)技術(shù)（第二版）張磊編著中國鐵道出版社2.6框架標(biāo)記—在框架中顯示網(wǎng)頁例2.15在框架中顯示2.6框架標(biāo)記—在框架中顯示網(wǎng)頁例2.16框架的進(jìn)一步操作（first.htm)網(wǎng)頁設(shè)計(jì)技術(shù)（第二版）張磊編著中國鐵道出版社2.6框架標(biāo)記—在框架中顯示網(wǎng)頁例2.16框架的進(jìn)一步經(jīng)常不斷地學(xué)習(xí),你就什么都知道。你知道得越多,你就越有力量StudyConstantly,AndYouWillKnowEverything.TheMoreYouKnow,TheMorePowerfulYouWillBe寫在最后經(jīng)常不斷地學(xué)習(xí),你就什么都知道。你知道得越多,你就越有力量寫56ThankYou在別人的演說中思考，在自己的故事里成長ThinkingInOtherPeople‘SSpeeches，GrowingUpInYourOwnStory講師：XXXXXXXX年XX月XX日ThankYou57第2章HTML主要內(nèi)容

HTML文檔的基本結(jié)構(gòu)標(biāo)記及屬性的概念常用標(biāo)記的用法

<img

人人文庫> 全部分類> 教育資料 > 輔導(dǎo)培訓(xùn)

溫馨提示

1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(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ǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

第02章HTML簡介課件

文檔簡介

溫馨提示

最新文檔

評(píng)論

第02章HTML簡介課件

文檔簡介

溫馨提示

最新文檔

評(píng)論

相關(guān)文檔