超文本標(biāo)記語言_第1頁
超文本標(biāo)記語言_第2頁
超文本標(biāo)記語言_第3頁
超文本標(biāo)記語言_第4頁
超文本標(biāo)記語言_第5頁
已閱讀5頁，還剩69頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

超文本標(biāo)記語言第一頁，共七十四頁，編輯于2023年，星期五目錄3.1HTML概述3.2文字與段落標(biāo)記3.3列表標(biāo)記3.4表格標(biāo)記3.5圖像和多媒體標(biāo)記3.6超鏈接標(biāo)記3.7表單標(biāo)記3.8框架標(biāo)記3.9本章小結(jié)3.10習(xí)題第二頁，共七十四頁，編輯于2023年，星期五3.1HTML概述3.1.1HTML的基本概念1.HTML介紹

HTML是HyperTextMarkupLanguage（超文本標(biāo)記語言）的縮寫，它是構(gòu)成Web頁面的基本元素，它是一種規(guī)范，一種標(biāo)準(zhǔn)，幾乎所有的網(wǎng)頁都是以HTML格式書寫的。

HTML不是一種編程語言，而是一種描述性的標(biāo)記語言，它通過標(biāo)識(shí)符來標(biāo)識(shí)網(wǎng)頁中內(nèi)容的顯示方式，比如圖片的顯示尺寸、文字的大小、顏色、字體等。而WWW瀏覽器的功能就是對(duì)這些標(biāo)記進(jìn)行解釋，按要求顯示出文字、圖像、動(dòng)畫、媒體等網(wǎng)頁內(nèi)容。第三頁，共七十四頁，編輯于2023年，星期五HTML語言主要功能格式化文本創(chuàng)建列表

建立表格插入圖片加入多媒體添加交互式表單第四頁，共七十四頁，編輯于2023年，星期五2.標(biāo)記符標(biāo)記符又稱標(biāo)簽，用來控制網(wǎng)頁內(nèi)容顯示效果。它在使用時(shí)必須用“<>”括起來。絕大多數(shù)標(biāo)記符都是成對(duì)出現(xiàn)的，包括開始標(biāo)記符和結(jié)束標(biāo)記符。標(biāo)記符是不區(qū)分大小寫的，但通常約定標(biāo)記符使用大寫字母，這有利于HTML文檔的維護(hù)，其格式為：<標(biāo)記符>受影響的內(nèi)容</標(biāo)記符>第五頁，共七十四頁，編輯于2023年，星期五3.標(biāo)記符的屬性標(biāo)記符僅僅用來標(biāo)識(shí)所顯示的內(nèi)容，但如何控制這些內(nèi)容，這就需要在標(biāo)記符后面加上相關(guān)的屬性來實(shí)現(xiàn)，屬性是用來描述標(biāo)記符標(biāo)識(shí)對(duì)象的特征。其格式為：

<標(biāo)記符屬性1=屬性值1屬性2=屬性值2…>受影響的內(nèi)容</標(biāo)記符>

例如：<FONTcolor="red"size="3">屬性示例</FONT>第六頁，共七十四頁，編輯于2023年，星期五3.1.2HTML的基本結(jié)構(gòu)

HTML網(wǎng)頁文件主要由文件頭和文件體兩部分內(nèi)容構(gòu)成。<HTML> HTML文件開始

<HEAD> 文件頭開始文件頭

</HEAD> 文件頭結(jié)束

<BODY> 文件體開始文件體

</BODY> 文件體結(jié)束</HTML> HTML文件結(jié)束HTML網(wǎng)頁的基本結(jié)構(gòu)第七頁，共七十四頁，編輯于2023年，星期五1.HTML文件標(biāo)記符

<HTML>和</HTML>標(biāo)記符放在網(wǎng)頁文檔的最外層，表示這對(duì)標(biāo)記符之間的內(nèi)容是HTML文件。<HTML>處于文件的最前端，表示HTML文件的開始，即瀏覽器從<HTML>開始解釋，而</HTML>則位于文件的最后一行，這表示這一整份的文檔都是HTML語法的文檔。2.HEAD文件頭標(biāo)記符

<HEAD>和</HEAD>是HTML文件頭標(biāo)記符，它用來說明文檔的整體信息，所標(biāo)記的內(nèi)容并不會(huì)出現(xiàn)在WWW瀏覽器所看到的窗體中。HEAD>…</HEAD>通常與某些標(biāo)記符一起使用。第八頁，共七十四頁，編輯于2023年，星期五3.BODY文件體標(biāo)記符

<BODY></BODY>是HTML文件的主體標(biāo)記符。網(wǎng)頁正文中的所有內(nèi)容包括文字、表格、圖像、聲音和動(dòng)畫等都包含在這對(duì)標(biāo)記符之間，它的格式為：<BODYbgcolor=“color”backgroud=“image-url”text=“color”link=“color”vlink=“color”alink=“color”topmargin=“value”leftmargin=“value”>…</BODY>bgcolor：標(biāo)識(shí)HTML文檔的背景顏色，默認(rèn)設(shè)置為白色。background：設(shè)置HTML文檔的背景圖片，可以使用的圖片格式為GIF，JPG等。text：標(biāo)識(shí)HTML文檔的正文文字顏色，它定義的顏色將應(yīng)用于整篇文檔。超級(jí)鏈接顏色：link、vlink、alink分別控制普通超級(jí)鏈接、訪問過的超級(jí)鏈接、當(dāng)前活動(dòng)超級(jí)鏈接的顏色。（5）topmargin和leftmargin：設(shè)置網(wǎng)頁主體內(nèi)容距離網(wǎng)頁頂端和左端的距離。第九頁，共七十四頁，編輯于2023年，星期五4.第一個(gè)網(wǎng)頁【實(shí)例3-1】HTML基本結(jié)構(gòu)網(wǎng)頁<HTML><HEAD> <TITLE>myfirstpage</TITLE></HEAD><BODY> Thisismyfirsthomepage!</BODY></HTML>第十頁，共七十四頁，編輯于2023年，星期五3.1.3HTML的基本語法規(guī)則（1）HTML文件以純文本形式存放，擴(kuò)展名為“.HTM”或“.HTML”。如果系統(tǒng)為UNIX系統(tǒng)，則擴(kuò)展名必須為“.HTML”。（2）HTML不區(qū)分大小寫，例如<html>和<HTML>是相同的。（3）多數(shù)HTML標(biāo)記可以嵌套，但不可以交叉。（4）HTML文件一行可以寫多個(gè)標(biāo)記，一個(gè)標(biāo)記也可以分多行書寫，不用任何續(xù)行符號(hào)。第十一頁，共七十四頁，編輯于2023年，星期五（5）HTML源文件中的換行、回車符和多個(gè)連續(xù)空格在顯示效果中是無效的。（6）網(wǎng)頁中所有的顯示內(nèi)容都應(yīng)該受限于一個(gè)或多個(gè)標(biāo)記，不應(yīng)有游離于標(biāo)記之外的文字或圖像等，以免產(chǎn)生錯(cuò)誤。（7）所有用到的標(biāo)點(diǎn)符號(hào)應(yīng)使用英文半角狀態(tài)下的標(biāo)點(diǎn)符號(hào)，否則將會(huì)出現(xiàn)語法錯(cuò)誤，但是字符串中的標(biāo)點(diǎn)符號(hào)除外。第十二頁，共七十四頁，編輯于2023年，星期五3.2.1標(biāo)題字標(biāo)記功能：用于定義文章內(nèi)章節(jié)標(biāo)題的顯示格式，并且標(biāo)題字會(huì)單獨(dú)成行。格式：<Hnalign=“對(duì)齊方式”>標(biāo)題文字</Hn>屬性：n用來指定標(biāo)題文字字號(hào)的大小。n可以取1～6的整數(shù)值，數(shù)字越小，字號(hào)越大。

align用來設(shè)置標(biāo)題在頁面中的對(duì)齊方式，取值有：left（左對(duì)齊）、center（居中）、right（右對(duì)齊）、bottom（位于底端）和top（位于頂端）。3.2文字與段落標(biāo)記第十三頁，共七十四頁，編輯于2023年，星期五<HTML><HEAD><TITLE>設(shè)置標(biāo)題</TITLE></HEAD><BODY><H1>第1級(jí)標(biāo)題（H1）</H1><H2>第2級(jí)標(biāo)題（H2）</H2><H3>第3級(jí)標(biāo)題（H3）</H3><H4align=left>第4級(jí)標(biāo)題（H4）（居左）</H4><H5align=center>第5級(jí)標(biāo)題（H5）（居中）</H5><H6align=right>第6級(jí)標(biāo)題（H6）（居右）</H6></BODY></HTML>【實(shí)例3-2】使用標(biāo)題字標(biāo)記設(shè)置標(biāo)題的大小與對(duì)齊方式。第十四頁，共七十四頁，編輯于2023年，星期五3.2.2文字格式標(biāo)記

功能：設(shè)置網(wǎng)頁中普通文字的顯示效果，如：文字大小、字體、顏色等。

格式：<FONTface=“字體”size=“字號(hào)”color=“顏色”>被設(shè)置的文字</FONT>

屬性：

face，size，colorface屬性用來設(shè)置字體。當(dāng)文字為漢字時(shí)，格式中的“字體”可以為：宋體、幼圓、隸書、楷體_GB2312、黑體、仿宋_GB2312等。當(dāng)文字為英文時(shí)，字體名可以為TimesNewRoman等約50種字體。size屬性用來設(shè)置文字的大小。數(shù)字的取值范圍從1～7，size取1時(shí)最小，取7時(shí)最大。color屬性用來設(shè)置文字的顏色，顏色的取值可以是十六進(jìn)制的RGB顏色碼或者HTML給定的顏色常量名。第十五頁，共七十四頁，編輯于2023年，星期五【實(shí)例3-3】使用<FONT>標(biāo)記的size屬性設(shè)置文字的大小，face屬性設(shè)置字體，color屬性設(shè)置文字顏色。<HTML><HEAD><TITLE>文字格式標(biāo)記</TITLE></HEAD><BODY><H1>設(shè)置文字的格式</H1><FONTsize="1"color="#00FFFF">1號(hào)字青色</FONT><P><FONTsize="2"color="green">2號(hào)字綠色</FONT><P><FONTsize="3"face="幼圓"color="orange">3號(hào)幼圓桔黃色</FONT><P><FONTsize="4"face="隸書"color="#FF0000">4號(hào)隸書深紅色</FONT><P><FONTsize="5"face="黑體"color="greenyellow">5號(hào)黑體黃綠色</FONT><P><FONTsize="6"face="方正舒體"color="dodgerblue">6號(hào)方正舒體水藍(lán)色</FONT><P><FONTsize="7"face="Arial"color="#000000">WelcomeMyHomepage!</FONT><P></BODY></HTML>第十六頁，共七十四頁，編輯于2023年，星期五3.2.3字型標(biāo)記功能：設(shè)置文字的風(fēng)格，如：加粗、斜體、帶下劃線、上標(biāo)、下標(biāo)等。格式：這是一組標(biāo)記，它們可以單獨(dú)使用，也可以混合使用產(chǎn)生復(fù)合修飾效果。第十七頁，共七十四頁，編輯于2023年，星期五【實(shí)例3-4】使用字型標(biāo)記設(shè)置文字的風(fēng)格。<HTML><HEAD><TITLE>設(shè)置字型</TITLE></HEAD><BODY><B>黑體</B><P><I>斜體</I><P><U>帶下劃線</U><P><B><I>粗體并且斜體</I></B><P><STRIKE>帶刪除線</STRIKE><P>H<SUB>2</SUB>o<P>X<SUP>3</SUP><P><BIG>大字體</BIG><P><SMALL>小字體</SMALL><P></BODY></HTML>第十八頁，共七十四頁，編輯于2023年，星期五3.2.4段落標(biāo)記和強(qiáng)制換行標(biāo)記

在HTML文檔中，無法用多個(gè)回車、空格、〈Tab〉鍵來調(diào)整文檔段落的格式，而要用HTML的標(biāo)記來強(qiáng)制換行和分段。第十九頁，共七十四頁，編輯于2023年，星期五1.段落標(biāo)記功能：段落標(biāo)記<P>定義一個(gè)新段落的開始，它不但能使后面的文字換到下一行，還可以使兩段之間多一空行。由于一段的結(jié)束意味著新一段的開始，所以使用<P>也可省略結(jié)束標(biāo)記。格式：<Palign=“對(duì)齊方式”>或

<Palign=“對(duì)齊方式”>…</P>屬性：段落標(biāo)記<P>的align屬性用來設(shè)置段落的對(duì)齊方式，其取值可以為left、center或right，分別表示居左、居中、居右，缺省時(shí)默認(rèn)為left。第二十頁，共七十四頁，編輯于2023年，星期五2.強(qiáng)制換行標(biāo)記功能：強(qiáng)制換行標(biāo)記<BR>通常單獨(dú)出現(xiàn)，放在一行的末尾，可以使后面的文字、圖片、表格等顯示于下一行，但是不會(huì)在行與行之間留下空行。格式：文字<BR>注意：通常一個(gè)段落標(biāo)記<P>可以看作是兩個(gè)強(qiáng)制換行標(biāo)記<BR><BR>。第二十一頁，共七十四頁，編輯于2023年，星期五【實(shí)例3-5】段落標(biāo)記與強(qiáng)制換行標(biāo)記的使用。<HTML><HEAD><TITLE>段落標(biāo)記與強(qiáng)制換行標(biāo)記的使用</TITLE></HEAD><BODY><Palign="center">段落標(biāo)記</p>

段落標(biāo)記

<P>強(qiáng)制換行標(biāo)記<BR>

強(qiáng)制換行標(biāo)記

</BODY></HTML>第二十二頁，共七十四頁，編輯于2023年，星期五3.2.5水平線標(biāo)記功能：水平線標(biāo)記<HR>可以在頁面中顯示一條水平線，將不同功能的頁面內(nèi)容分隔開，使之整齊明了。當(dāng)瀏覽器執(zhí)行HTML文件中的標(biāo)記時(shí)，會(huì)在此處換行，并加入一條水平線段。格式：<HRalign=“對(duì)齊方式”size=“橫線粗細(xì)”width=“橫線長(zhǎng)度”color=“橫線顏色”noshade>屬性：

align，size，width，color。第二十三頁，共七十四頁，編輯于2023年，星期五【實(shí)例3-6】水平線標(biāo)記的使用。<HTML><HEAD><TITLE>水平線段標(biāo)記的應(yīng)用</TITLE></HEAD><BODY><CENTER><H3>水平線</H3></CENTER><HR><HRalign="left"size="6"width="320"><HRalign="center"size="8"width="60%"color="blue"><HRalign="right"size="8"width="360"color="red"><HRsize="4"width="80%"color="#CD061F"><HRsize="5"noshade><HRwidth="70%"noshade></BODY></HTML>第二十四頁，共七十四頁，編輯于2023年，星期五3.2.6其它標(biāo)記1.分區(qū)顯示標(biāo)記功能：分區(qū)顯示標(biāo)記可以使文本塊或一段文字在網(wǎng)頁上：左對(duì)齊、居中對(duì)齊和右對(duì)齊。格式：<DIValign=“對(duì)齊方式”>文本或圖像</DIV>屬性：屬性align的取值分別為：left、center和right。第二十五頁，共七十四頁，編輯于2023年，星期五2.特殊符號(hào)標(biāo)記瀏覽器解釋HTML文件時(shí)，首先根據(jù)“<”與“>”來識(shí)別HTML標(biāo)記，然后再確定這兩個(gè)符號(hào)中的內(nèi)容是否為HTML標(biāo)記，如果是HTML標(biāo)記則按其規(guī)則解讀并且顯示輸出。因此，如果要在網(wǎng)頁中顯示“<”或“>”等一些特殊字符時(shí)，就要用其代替字符。第二十六頁，共七十四頁，編輯于2023年，星期五3.3.1無序列表標(biāo)記功能：無序列表就是項(xiàng)目間并無順序關(guān)系，僅僅利用條列來呈現(xiàn)資料，此種無序列表標(biāo)記，在各條列前面均有一符號(hào)以示區(qū)隔。格式：<ULtype=“符號(hào)類型”><LItype=“符號(hào)類型”>列表項(xiàng)目一

<LItype=“符號(hào)類型”>列表項(xiàng)目二

<LItype=“符號(hào)類型”>列表項(xiàng)目三

</UL>屬性：無序列表使用<UL>和</UL>表示列表的開始和結(jié)束，<LI>標(biāo)記表示每一個(gè)列表項(xiàng)目。3.3列表標(biāo)記第二十七頁，共七十四頁，編輯于2023年，星期五<HTML><HEAD><TITLE>無序列表標(biāo)記</TITLE></HEAD><BODY><P>在<UL>中，type屬性的使用</P><ULtype="disc"><LI>列表項(xiàng)目一

<LI>列表項(xiàng)目二

<LI>列表項(xiàng)目三

</UL><P>在<LI>中，type屬性的使用</P><UL><LItype="disc">DISC<LItype="circle">CIRCLE<LItype="square">SQUARE</UL></BODY></HTML>【實(shí)例3-9】無序列表標(biāo)記的使用。第二十八頁，共七十四頁，編輯于2023年，星期五3.3.2有序列表標(biāo)記功能：有序列表用來設(shè)置有前后順序之分的列表項(xiàng)。格式：<OLtype=“序號(hào)類型”start=“起始號(hào)碼”><LItype=“序號(hào)類型”>列表項(xiàng)目一

<LItype=“序號(hào)類型”>列表項(xiàng)目二

<LItype=“序號(hào)類型”>列表項(xiàng)目三</OL>屬性：有序列表使用<OL>和</OL>表示列表的開始和結(jié)束，<LI>標(biāo)記表示每一個(gè)列表項(xiàng)目。第二十九頁，共七十四頁，編輯于2023年，星期五【實(shí)例3-10】有序列表標(biāo)記的使用。<HTML><HEAD><TITLE>有序列表標(biāo)記</TITLE></HEAD><BODY><OL><LI>默認(rèn)的有序列表

<LI>默認(rèn)的有序列表

</OL>

<OLtype="a"start="5"><LI>第1項(xiàng)

<LI>第2項(xiàng)

<LI>第3項(xiàng)

</OL></BODY></HTML>第三十頁，共七十四頁，編輯于2023年，星期五3.3.3自定義列表標(biāo)記功能：用于需要對(duì)列表?xiàng)l目進(jìn)行簡(jiǎn)短說明的場(chǎng)合。格式：<DL><DT>列表?xiàng)l目一<DD>條目一的說明<DT>列表?xiàng)l目二<DD>條目二的說明…</DL>屬性：自定義列表使用<DL>和</DL>表示列表的開始和結(jié)束。<DT>標(biāo)記表示每項(xiàng)自定義條目名稱。<DD>標(biāo)記表示每條自定義條目的說明，自動(dòng)向右縮進(jìn)。第三十一頁，共七十四頁，編輯于2023年，星期五【實(shí)例3-11】自定義列表標(biāo)記的使用。<HTML><HEAD><TITLE>自定義列表標(biāo)記</TITLE></HEAD><P>這是一個(gè)定義性列表：</P><BODY><DL><DT>DL標(biāo)記符

<DD>代表HTML自定義列表。

<DT>DT標(biāo)記符<DD>表示每個(gè)自定義列表項(xiàng)的標(biāo)題。

<DT>DD標(biāo)記符

<DD>用于描述自定義列表項(xiàng)的內(nèi)容。

</DL></BODY></HTML>第三十二頁，共七十四頁，編輯于2023年，星期五3.4表格標(biāo)記

表格在網(wǎng)站開發(fā)中應(yīng)用非常廣泛，用戶可以通過表格方便靈活的排版，目前很多大型網(wǎng)站也都是借助表格排版和頁面布局的。表格可以把相互關(guān)聯(lián)的信息元素集中定位，使瀏覽者瀏覽頁面時(shí)一目了然。因此要制作出優(yōu)秀的網(wǎng)頁，就應(yīng)該熟練掌握表格標(biāo)記。第三十三頁，共七十四頁，編輯于2023年，星期五功能：建立基本表格。格式：<TABLE><CAPTIONalign=“對(duì)齊方式”>表格標(biāo)題</CAPTION><TR><TH>表頭一</TH><TH>表頭二</TH><TH>表頭n</TH></TR><TR><TD>表項(xiàng)一</TD><TD>表項(xiàng)二</TD><TD>表項(xiàng)n</TD></TR><TR><TD>表項(xiàng)一</TD><TD>表項(xiàng)二</TD><TD>表項(xiàng)n</TD></TR>…</TABLE>第三十四頁，共七十四頁，編輯于2023年，星期五屬性：（1）<TABLE>…</TABLE>標(biāo)記用來創(chuàng)建一個(gè)表格。（2）<CAPTION>…</CAPTION>標(biāo)記表示對(duì)表格標(biāo)題的說明。（3）<TR>…</TR>標(biāo)記定義行，該標(biāo)記中間的內(nèi)容顯示在一行，此標(biāo)記對(duì)只能放在<TABLE>…</TABLE>標(biāo)記之間使用。（4）<TH>和<TD>標(biāo)記表示單元格標(biāo)記，這兩個(gè)標(biāo)記必須嵌套在<TR>標(biāo)記中，成對(duì)出現(xiàn)。（5）要?jiǎng)?chuàng)建跨多行、多列的單元格，只需在<TH>或<TD>中加入ROWSPAN或COLSPAN屬性的屬性值，表明了表格中要跨越的行或列的個(gè)數(shù)。第三十五頁，共七十四頁，編輯于2023年，星期五【實(shí)例3-12】表格標(biāo)記的簡(jiǎn)單應(yīng)用。<HTML><HEAD><TITLE>表格標(biāo)記</TITLE></HEAD><BODY><TABLEborder="1"width="360"bordercolor="#000000"><CAPTION>學(xué)生成績(jī)表</CAPTION><TRalign="center"><TH>姓名</TH><TH>課程名稱</TH><TH>成績(jī)</TH></TR>

<TRalign="center"><TD>蓉蓉</TD><TD>數(shù)學(xué)</TD><TD>86</TD></TR><TRalign="center"><TD>妮妮</TD><TD>計(jì)算機(jī)基礎(chǔ)</TD><TD>90</TD></TR><TRalign="center"><TD>娜娜</TD><TD>英語</TD><TD>82</TD></TR></BODY></HTML>第三十六頁，共七十四頁，編輯于2023年，星期五3.5圖像和多媒體標(biāo)記3.5.1圖像標(biāo)記在網(wǎng)頁中加入適當(dāng)?shù)膱D片可以使網(wǎng)頁豐富多彩，具有更強(qiáng)的吸引力。HTML提供了<IMG>標(biāo)記來處理圖像的輸出。功能：在當(dāng)前位置插入圖像。格式：<IMGsrc=“文件名”

alt=“說明”

width=“x”height=“y”border=“n”hspace=“h”vspace=“v”align=“對(duì)齊方式”>屬性：src，alt，width，height，border，hspace，Vspace，align。第三十七頁，共七十四頁，編輯于2023年，星期五【實(shí)例3-14】圖像標(biāo)記的應(yīng)用。<HTML><HEAD><TITLE>圖像標(biāo)記的應(yīng)用</TITLE></HEAD><BODY><Palign="center"><imgsrc="fuwa.jpg"alt="福娃歡歡"width=350height=350></P></BODY></HTML></HTML>第三十八頁，共七十四頁，編輯于2023年，星期五3.5.2音頻標(biāo)記功能：在網(wǎng)頁中加入聲音，聲音文件可以是*.WAV、*.AU、*.MID等。格式：<BGSOUNDsrc=“聲音文件的URL地址”loop=“播放次數(shù)”>。屬性：src屬性表示聲音文件的存放地址，loop控制播放次數(shù)，取-1或者INFINITE時(shí)，聲音將一直播放到瀏覽者離開該網(wǎng)頁時(shí)為止。第三十九頁，共七十四頁，編輯于2023年，星期五【實(shí)例3-15】音頻標(biāo)記的應(yīng)用。<HTML><HEAD><TITLE>背景聲音</TITLE></HEAD><body><H4align=”center”>網(wǎng)頁的背景聲音<H4><HR><bgsoundsrc="youandme.mid"LOOP="3"></BODY></HTML>第四十頁，共七十四頁，編輯于2023年，星期五3.5.3視頻標(biāo)記功能：在頁面中放置如SWF動(dòng)畫（即Flash動(dòng)畫）、MP3音樂、電影等多種格式的多媒體信息。格式：<EMBEDsrc=“file_URL”height=“value”width=“value”hidden=“hidden_value”autostart=“auto_value”loop=“l(fā)oop_value”></EMBED>屬性：src，height和width，hidden，autostart，loop。第四十一頁，共七十四頁，編輯于2023年，星期五【實(shí)例3-16】視頻標(biāo)記的應(yīng)用。<html>

<body>

<palign="center"><EMBEDsrc="iandyou.avi"height="288"width="352"hidden=“false”autostart=“ture”loop=“1”></EMBED><p>

</body></html>第四十二頁，共七十四頁，編輯于2023年，星期五3.6超鏈接標(biāo)記

超級(jí)鏈接是整個(gè)WWW應(yīng)用的核心和基礎(chǔ)，它可以把頁面一個(gè)個(gè)鏈接起來，使得網(wǎng)頁的瀏覽非常方便。所以，對(duì)超級(jí)鏈接的掌握具有特殊的意義。功能：建立超鏈接。格式：<Ahref=“URL地址”target=“打開窗口方式”>顯示的文本或者圖像</A>屬性：href，Target。第四十三頁，共七十四頁，編輯于2023年，星期五1.創(chuàng)建指向其它頁面的超鏈接根據(jù)目標(biāo)文件與當(dāng)前文件的目錄關(guān)系，有6種放法：（1）鏈接到同一目錄內(nèi)的網(wǎng)頁文件，其格式為：

<Ahref="目標(biāo)文件名">顯示的文本或者圖像</A>

目標(biāo)文件名是鏈接所指向的文件，此時(shí)URL地址是相對(duì)路徑。（2）鏈接到下一級(jí)目錄中的網(wǎng)頁文件，其格式為：<Ahref="子目錄名/目標(biāo)文件名">顯示的文本或者圖像</A>

此時(shí)URL地址是相對(duì)路徑。第四十四頁，共七十四頁，編輯于2023年，星期五（3）鏈接到上一級(jí)目錄中的網(wǎng)頁文件，其格式為：

<Ahref="../目標(biāo)文件名">顯示的文本或者圖像</A>

其中“../”表示退到上一級(jí)目錄中，此時(shí)URL地址是相對(duì)路徑。（4）鏈接到同級(jí)目錄中的網(wǎng)頁文件，其格式為：

<Ahref="../子目錄名/目標(biāo)文件名">顯示的文本或者圖像</A>

表示先退到上一級(jí)目錄中，然后再進(jìn)入到目標(biāo)文件所在的目錄，此時(shí)URL地址是相對(duì)路徑。第四十五頁，共七十四頁，編輯于2023年，星期五（5）鏈接到Internet上的網(wǎng)頁，其格式為：<Ahref="網(wǎng)址">顯示的文本或者圖像</A>網(wǎng)址采用絕對(duì)路徑，即使用網(wǎng)絡(luò)上一個(gè)完整的路徑名稱。（6）E-mail超級(jí)鏈接，其格式為：<Ahref=“mailto:郵件地址">指向E-mail地址的超級(jí)鏈接</A>第四十六頁，共七十四頁，編輯于2023年，星期五2.創(chuàng)建指向本頁面中的超鏈接要在當(dāng)前頁面內(nèi)實(shí)現(xiàn)超鏈接，需要定義兩個(gè)標(biāo)記：一個(gè)為超鏈接標(biāo)記，另一個(gè)為書簽標(biāo)記。超鏈接標(biāo)記的格式：<Ahref="#記號(hào)名">顯示的文本或者圖像</A>

書簽標(biāo)記的格式為：<Aname=“記號(hào)名”>目標(biāo)文本附近的字符串</A>

功能：?jiǎn)螕麸@示的文本或者圖像，將跳轉(zhuǎn)到“記號(hào)名”開始的文本。第四十七頁，共七十四頁，編輯于2023年，星期五3.7表單標(biāo)記

表單是實(shí)現(xiàn)動(dòng)態(tài)網(wǎng)頁的一種主要的外在形式，是HTML頁面與瀏覽器端實(shí)現(xiàn)交互的重要手段。它的主要功能是收集信息，當(dāng)單擊表單中的提交按紐時(shí)，輸入在表單中的信息就會(huì)從客戶端的瀏覽器上傳到服務(wù)器中，然后由服務(wù)器中的有關(guān)表單處理程序（ASP、CGI等程序）進(jìn)行處理，處理后再將用戶所需信息傳送到客戶端瀏覽器上，這樣網(wǎng)頁就具有了交互性。在這里只介紹如何使用HTML的表單標(biāo)記來設(shè)計(jì)表單。第四十八頁，共七十四頁，編輯于2023年，星期五1.<FORM></FORM>標(biāo)記功能：<FORM></FORM>標(biāo)記用來創(chuàng)建一個(gè)表單，即定義表單的開始與結(jié)束位置。格式：<FORMname="form＿name"method="method"action="url">…</FORM>。屬性：name，action，method第四十九頁，共七十四頁，編輯于2023年，星期五2.<INPUTtype="">標(biāo)記功能：輸入標(biāo)記<INPUT>是表單中最常用的標(biāo)記之一。該標(biāo)記用來定義一個(gè)輸入?yún)^(qū)，可在其中輸入信息，此標(biāo)記必須放在<FORM></FORM>標(biāo)記對(duì)之間。格式：<INPUTname="field＿name"type="type＿name">。屬性：name屬性設(shè)置輸入?yún)^(qū)域的名稱，服務(wù)器就是通過name來獲得該區(qū)域數(shù)據(jù)的。

type屬性設(shè)置輸入?yún)^(qū)域的類型第五十頁，共七十四頁，編輯于2023年，星期五<HTML><HEAD><TITLE>表單輸入標(biāo)記示例</TITLE></HEAD><BODY><H1>用戶信息調(diào)查</H1><FORMACTION=mailto:qucc218@METHOD=getNAME=invest>姓名：<INPUTTYPE="text"NAME="username"SIZE=20><BR>網(wǎng)址：<INPUTTYPE="text"NAME="URL"SIZE=20MAXLENGTH=50VALUE="http://"><BR>密碼：<INPUTTYPE="password"NAME="password"SIZE=20MAXLENGTH=8><BR>確認(rèn)密碼：<INPUTTYPE="password"NAME="password_confirm"SIZE=20MAXLENGTH=8><BR>請(qǐng)上傳你的照片：<INPUTTYPE="file"NAME="File"><BR>請(qǐng)選擇你喜歡的音樂：<INPUTTYPE="Checkbox"NAME="M1"VALUE="rock"checked>搖滾樂<INPUTTYPE="Checkbox"NAME="M2"VALUE="jazz">爵士樂<INPUTTYPE="Checkbox"NAME="M2"VALUE="pop">流行樂<BR>【實(shí)例3-19】表單輸入標(biāo)記示例。第五十一頁，共七十四頁，編輯于2023年，星期五請(qǐng)選擇你居住的城市：<INPUTTYPE="Radio"NAME="city"VALUE="beijing"checked>北京<INPUTTYPE="Radio"NAME="city"VALUE="shanghai">上海<INPUTTYPE="Radio"NAME="city"VALUE="nanjing">南京<BR><INPUTTYPE="Image"NAME="Image"SRC="chengshi.jpg"><BR><INPUTTYPE="Hidden"NAME="Form_name"VALUE="Invest"><INPUTTYPE="Button"NAME="button"VALUE="普通按鈕"><INPUTTYPE="Submit"NAME="Submit"VALUE="提交表單"><INPUTTYPE="Reset"NAME="Reset"VALUE="重置表單"></FORM></BODY></HTML>第五十二頁，共七十四頁，編輯于2023年，星期五3.<SELECT></SELECT>和<OPTION>標(biāo)記功能：<SELECT></SELECT>標(biāo)記用來創(chuàng)建一個(gè)下拉列表框或可以復(fù)選的列表框，它必須放在<FORM></FORM>標(biāo)記對(duì)之間。<OPTION>標(biāo)記用來指定菜單和列表中的一個(gè)選項(xiàng)，它放在<SELECT></SELECT>標(biāo)記對(duì)之間。格式：<SELECTname="name"size="value"multiple><OPTIONvalue="value"selected>選項(xiàng)一<OPTIONvalue="value">選項(xiàng)二…</select>。屬性：name,multiple,value第五十三頁，共七十四頁，編輯于2023年，星期五<HTML><HEAD><TITLE>表單菜單和列表標(biāo)記示例</TITLE></HEAD><BODY><H1>用戶信息調(diào)查</H1><FORMACTION=mailto:qucc218@METHOD=getNAME=invest>請(qǐng)選擇你喜歡的體育項(xiàng)目：<BR><SELECTNAME="sport"SIZE=4MULTIPLE><OPTIONValue="football"Selected>足球<OPTIONValue="basketball">籃球<OPTIONValue="pingpong">乒乓球<OPTIONValue="tennisball">網(wǎng)球</SELECT><BR>【實(shí)例3-20】表單菜單和列表標(biāo)記的應(yīng)用。第五十四頁，共七十四頁，編輯于2023年，星期五請(qǐng)選擇你居住的城市：<BR><SELECTNAME="city"><OPTIONValue="beijing"Selected>北京<OPTIONValue="shanghai">上海<OPTIONValue="nanjing">南京<OPTIONValue="guangzhou">廣州</SELECT><INPUTTYPE="Submit"NAME="Submit"VALUE="提交表單"></FORM></BODY></HTML>第五十五頁，共七十四頁，編輯于2023年，星期五4.<TEXTAREA></TEXTAREA>標(biāo)記功能：<TEXTAREA></TEXTAREA>用來創(chuàng)建一個(gè)可以輸入多行的文本框，可以在其中輸入更多的文本，此標(biāo)記放在<FORM></FORM>標(biāo)記對(duì)之間。格式：<TEXTAREAname="name"rows="value"cols="value"></TEXTAREA>。屬性：name屬性設(shè)置文本框的名稱。Rows屬性設(shè)置文本框的行數(shù)，以字符數(shù)為單位。cols屬性設(shè)置文本框的列數(shù)，以字符數(shù)為單位。第五十六頁，共七十四頁，編輯于2023年，星期五<HTML><HEAD><TITLE>表單文本框標(biāo)記示例</TITLE></HEAD><BODY><H1>用戶信息調(diào)查</H1><FORMACTION=mailto:songsong@51METHOD=getNAME=invest>請(qǐng)留言：<BR><TEXTAREANAME="comment"Rows=5Cols=40></TEXTAREA><BR><INPUTTYPE="Submit"NAME="Submit"VALUE="提交表單"></FORM></BODY></HTML>【實(shí)例3-21】表單文本框標(biāo)記的應(yīng)用。第五十七頁，共七十四頁，編輯于2023年，星期五

框架的作用就是把瀏覽器窗口劃分成幾個(gè)子窗口，每個(gè)子窗口可以調(diào)入各自的HTML文檔形成不同的頁面，也可以按照一定的方式組合在一起完成特殊的效果。框架通常的使用方法是在一個(gè)框架中放置目錄并設(shè)置鏈接，點(diǎn)擊鏈接，內(nèi)容顯示在另一個(gè)框架中；或者有時(shí)一個(gè)網(wǎng)頁的不同部分由不同的人員制作，可以每人完成一個(gè)子窗口，然后利用框架技術(shù)將它們合并在一起形成一個(gè)完整的頁面。3.8框架標(biāo)記第五十八頁，共七十四頁，編輯于2023年，星期五1.<FRAMESET></FRAMESET>標(biāo)記功能：定義分割窗口，即定義主文檔中有幾個(gè)框架并且各個(gè)框架是如何排列的。格式：<FRAMESETcols="value，value，…"rows="value，value，…"framespacing="value"bordercolor="Color＿value">…</FRAMESET>。屬性：cols屬性與rows屬性分別表示左右和上下分割窗口（用“，”分割，value為定義各個(gè)框架的寬度值，單位可以是百分比、絕對(duì)像素值或星號(hào)(“*”)，其中星號(hào)表示剩余部分）。

framespacing：設(shè)定框架集的邊框?qū)挾取?/p>

bordercolor：設(shè)定框架集邊框顏色。第五十九頁，共七十四頁，編輯于2023年，星期五2.<FRAME>標(biāo)記功能：定義某一個(gè)具體的框架。格式：<FRAMEsrc="File＿NAME"name="Frame＿NAME"scrolling="value"noresize>…</FRAME>。屬性：src屬性設(shè)置框架顯示的文件路徑。

Name屬性定義此框架的名字。

scrolling屬性設(shè)定滾動(dòng)條是否顯示。

noresize屬性禁止改變框架的尺寸大小。第六十頁，共七十四頁，編輯于2023年，星期五3.<NOFRAME></NOFRAME>標(biāo)記

<NOFRAMES></NOFRAMES>標(biāo)記對(duì)放在<FRAMESET></FRAMESET>標(biāo)記對(duì)之間，用來在那些不支持框架的瀏覽器中顯示文本或圖像信息。第六十一頁，共七十四頁，編輯于2023年，星期五HTML語言是網(wǎng)頁制作的一種規(guī)范，一種標(biāo)準(zhǔn)，是網(wǎng)站開發(fā)和網(wǎng)頁設(shè)計(jì)的最基本知識(shí)，幾乎所有的網(wǎng)頁都是以HTML規(guī)范書寫的，它通過標(biāo)識(shí)符來標(biāo)記網(wǎng)頁的各個(gè)部分。本章首先介紹了HTML語言的基本概念、基本結(jié)構(gòu)和基本語法規(guī)則。然后重點(diǎn)介紹了使用HTML制作網(wǎng)頁的各種標(biāo)記的使用方法，主要包括文字與段落標(biāo)記、列表標(biāo)記、表格標(biāo)記、多媒體標(biāo)記、超鏈接標(biāo)記、表單標(biāo)記和框架標(biāo)記。熟練掌握這些標(biāo)記的使用，將對(duì)網(wǎng)頁的設(shè)計(jì)打下良好的基礎(chǔ)。3.9本章小結(jié)第六十二頁，共七十四頁，編輯于2023年，星期五3.10習(xí)題一、填空題1.HTML不是一種編程語言，而是一種描述性的標(biāo)記語言，它通過_________來標(biāo)識(shí)網(wǎng)頁中內(nèi)容的顯示方式。2.HTML網(wǎng)頁文件主要由_________和_________兩部分內(nèi)容構(gòu)成。3.HTML中用_____標(biāo)記強(qiáng)制換行。4.概括起來，文檔的鏈接路徑主要有_______、_______和_______種形式。5._________標(biāo)記用來創(chuàng)建一個(gè)表單，即定義表單的開始與結(jié)束位置。二、實(shí)訓(xùn)題1.編寫代碼實(shí)現(xiàn)一個(gè)最基本的網(wǎng)頁，頁面輸出“helloworld!”，效果如下圖所示。第六十三頁，共七十四頁，編輯于2023年，星期五第六十四頁，共七十四頁，編輯于2023年，星期五2.編寫代碼實(shí)現(xiàn)下圖瀏覽器顯示效果，熟悉段落、換行、標(biāo)題等基本標(biāo)記。第六十五頁，共七十四頁，編輯于2023年，星期五3.編寫代碼實(shí)現(xiàn)下圖瀏覽器顯示效果，熟悉列表、超鏈接等標(biāo)記。第六十六頁，共七十四頁，編輯于2023年，星期五4.編寫代碼實(shí)現(xiàn)下圖瀏覽器顯示效果，熟悉表格及相關(guān)標(biāo)記。第六十七頁，共七十四頁，編輯于2023年，星期五5.編寫代碼實(shí)現(xiàn)下圖瀏覽器顯示效果，熟悉表單及相關(guān)標(biāo)記。第六十八頁，共七十四頁，編輯于2023年，星期五一、填空題1.標(biāo)記符（標(biāo)簽、標(biāo)識(shí)符）2.文件頭、文件體3.</BR>4.絕對(duì)路徑、相對(duì)路徑、根目錄相對(duì)路徑5.<FORM></FORM>習(xí)題參考答案第六十九頁，共七十四頁，編輯于2023年，星期五二、實(shí)訓(xùn)題1.代碼如下：<html><head> <title>Helloworld!</title></head><body> <p>Helloworld!</p></body></html>2.代碼如下：<head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title></title></head><body><h3>靜夜思</h3><h3>李白</h3><p>床前明月光，<br/>

疑是地上霜。<br/>

舉頭望明月，<br/>

低頭思故鄉(xiāng)。</p></body></html>第七十頁，共七十四頁，編輯于2023年，星期五3.代碼如下：<head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title></title></head><body><h3>超鏈接</h3><ul><li><ahref=""target="_blank">百度</a></li><li><ahref=""target="_blank">新浪</a></li><li><ahref=""target="_blank">搜

溫馨提示

  • 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ì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論