Java Web應(yīng)用開發(fā) 課件 第2章 HTML與CSS網(wǎng)頁(yè)基礎(chǔ)_第1頁(yè)
Java Web應(yīng)用開發(fā) 課件 第2章 HTML與CSS網(wǎng)頁(yè)基礎(chǔ)_第2頁(yè)
Java Web應(yīng)用開發(fā) 課件 第2章 HTML與CSS網(wǎng)頁(yè)基礎(chǔ)_第3頁(yè)
Java Web應(yīng)用開發(fā) 課件 第2章 HTML與CSS網(wǎng)頁(yè)基礎(chǔ)_第4頁(yè)
Java Web應(yīng)用開發(fā) 課件 第2章 HTML與CSS網(wǎng)頁(yè)基礎(chǔ)_第5頁(yè)
已閱讀5頁(yè)，還剩44頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

第2章HTML與CSS網(wǎng)頁(yè)基礎(chǔ)0202知識(shí)目標(biāo)

掌握HTML常用標(biāo)簽

掌握HTML表單標(biāo)簽

掌握HTML超鏈接和圖像標(biāo)簽

掌握CSS實(shí)現(xiàn)頁(yè)面表現(xiàn)形式，學(xué)會(huì)制作主頁(yè)和表單。思政目標(biāo)鍛煉想象力、創(chuàng)造力和邏輯思維能力，提升個(gè)人的修養(yǎng)。觀察生活，培養(yǎng)審美、提高鑒賞能力，通過日積月累的學(xué)習(xí)，做出更有設(shè)計(jì)感、創(chuàng)意感的頁(yè)面設(shè)計(jì)。2.1HTML標(biāo)簽語(yǔ)言HTML是一種用于創(chuàng)建網(wǎng)頁(yè)的標(biāo)準(zhǔn)標(biāo)記語(yǔ)言，用戶可以使用HTML來建立自己的Web站點(diǎn)，HTML運(yùn)行在瀏覽器上，由瀏覽器來解析。HTML不是一種編程語(yǔ)言，而是一種描述性的標(biāo)記語(yǔ)言，用于描述超文本中的內(nèi)容和結(jié)構(gòu)。2.1.11HTML文檔結(jié)構(gòu)一個(gè)HTML文檔主要由4個(gè)主要標(biāo)簽組成，分別是<html>、<head>、<title>、<body>。這4個(gè)標(biāo)簽構(gòu)成了HTML頁(yè)面最基本的元素。下面分別展開介紹。1.文件開始標(biāo)簽<html><html>標(biāo)簽的作用是告訴瀏覽器這是一個(gè)HTML文檔。所有的HTML文件都以<html>標(biāo)簽開頭，以</html>標(biāo)簽結(jié)束，在它們之間是文檔的頭部和主體內(nèi)容，即HTML頁(yè)面的所有標(biāo)簽都要放置在<html></html>標(biāo)簽對(duì)中。其語(yǔ)法格式：<html>…</html>2.1.11HTML文檔結(jié)構(gòu)2.文件頭部標(biāo)簽<head><head>標(biāo)簽的作用是定義文檔頭部信息，用來封裝其他位于文檔頭部的標(biāo)簽，例如標(biāo)題標(biāo)簽<title>、元信息標(biāo)簽<meta>、引入CSS樣式的<link>及<style>標(biāo)簽等，用于描述文檔的標(biāo)題、作者，以及與文檔的關(guān)系等。這些頭部信息不會(huì)直接在網(wǎng)頁(yè)中顯示。HTML的頭部信息以<head>開始，以</head>結(jié)束。其語(yǔ)法格式如下:<head>…</head>2.1.1HTML文檔結(jié)構(gòu)3.文件標(biāo)題標(biāo)簽<title><title>標(biāo)簽用于定義頁(yè)面標(biāo)題，即給網(wǎng)頁(yè)取名字，它顯示在瀏覽器的標(biāo)題欄中。<title>必須位于<head>與</head>標(biāo)簽之內(nèi)。標(biāo)題標(biāo)簽以<title>開始，以</title>結(jié)束，語(yǔ)法格式如下:<title>…</title>4.網(wǎng)頁(yè)主體標(biāo)簽<body><body>標(biāo)簽定義HTML文檔的主體部分，網(wǎng)頁(yè)中所有要顯示的內(nèi)容都放在主體標(biāo)簽內(nèi)。主體標(biāo)簽以

<body>開始，以</body>標(biāo)簽結(jié)束，它是成對(duì)出現(xiàn)的。值得注意是，一個(gè)HTML文檔只能有一對(duì)<body>,且<body>必須在<html>內(nèi)，并且<head>標(biāo)簽對(duì)在<body>之前。其語(yǔ)法格式如下:<body>…</body>2.1.2HTML常用標(biāo)簽HTML的很多標(biāo)簽，提供了編輯文字、段落、圖片和超鏈接等功能，這些標(biāo)簽使得頁(yè)面設(shè)計(jì)更加豐富和多樣。1.標(biāo)題標(biāo)簽標(biāo)題標(biāo)簽<hX>常常被用在標(biāo)注網(wǎng)頁(yè)中唯一標(biāo)題、重要欄目、重要標(biāo)題等。X表示標(biāo)題級(jí)數(shù)，取值范圍為1~6，X越小，標(biāo)題字號(hào)越大。HTML的標(biāo)題標(biāo)簽有6個(gè)，分別是<h1><h2><h3><h4><h5>和<h6>，它們可以區(qū)別文字的大小。其中，<h1>代表1級(jí)標(biāo)簽，級(jí)別越高，文字最大，<h6>代表6級(jí)標(biāo)簽，文字最小。align屬性：設(shè)置對(duì)齊方式：left，左對(duì)齊；right右對(duì)齊；center，居中對(duì)齊；默認(rèn)左對(duì)齊。2.1.2HTML常用標(biāo)簽

<html><head><title>標(biāo)題標(biāo)簽實(shí)例</title> </head><body><hr><h1align=“center”>一級(jí)標(biāo)題的效果</h1><h2>二級(jí)標(biāo)題的效果</h2><h3>三級(jí)標(biāo)題的效果</h3><h4>四級(jí)標(biāo)題的效果</h4><h5>五級(jí)標(biāo)題的效果</h5><h6>六級(jí)標(biāo)題的效果</h6><hr></body><html>【例2-1】用標(biāo)題標(biāo)簽顯示h1~h6的樣式大小，運(yùn)行結(jié)果如圖2-1所示。2.1.2HTML常用標(biāo)簽注意：水平線可以通過水平標(biāo)簽<hr/>來定義，語(yǔ)法格式如下：<hr屬性=“屬性值”/>。<hr/>是單標(biāo)簽，在網(wǎng)頁(yè)中輸入一個(gè)<hr/>，就添加了一條默認(rèn)樣式的水平線。

圖2-1【例2-1】運(yùn)行結(jié)果2.1.2HTML常用標(biāo)簽【例2-2】唐詩(shī)欣賞實(shí)例古詩(shī)《楓橋夜泊》。運(yùn)行結(jié)果如圖例2-2所示。通過例2-2實(shí)例，綜合展示HTML一些常用標(biāo)簽：標(biāo)題標(biāo)簽等應(yīng)用。<html><head><title>唐詩(shī)欣賞實(shí)例</title></head>

<body> <h1>歡迎來到本網(wǎng)站</h1> <br> <hr/> <fontface="楷體_GB2312"size="2"color="blue">歡迎你的訪問，請(qǐng)欣賞唐詩(shī)頁(yè)面</font> <p>楓橋夜泊</p> <pre>唐·張繼</pre>

月落烏啼霜滿天，<br>

江楓漁火對(duì)愁眠。<br>

姑蘇城外寒山寺，<br>

夜半鐘聲到客船。<br> <hr/> <!--張繼,唐代詩(shī)人（生卒年不詳）字懿孫，漢族，湖北襄州（今湖北襄陽(yáng)）人。--></body></html>2.1.2HTML常用標(biāo)簽圖2-2【例2-2】運(yùn)行結(jié)果2.1.2HTML常用標(biāo)簽2.段落換行標(biāo)簽<br>標(biāo)簽是一個(gè)單標(biāo)簽，它沒有結(jié)束標(biāo)簽。瀏覽器遇到<br>標(biāo)簽會(huì)對(duì)當(dāng)前的文本內(nèi)容進(jìn)行強(qiáng)制換行，直接從下一行開始輸出文本。一個(gè)<br/>標(biāo)簽代表一個(gè)換行，連續(xù)多個(gè)<br/>標(biāo)簽可以實(shí)現(xiàn)多次換行。3.文字樣式標(biāo)簽文本樣式標(biāo)簽可以設(shè)置一些文字效果（例如字體、顏色、大?。尵W(wǎng)頁(yè)中的文字效果更加豐富，其語(yǔ)法格式：<font屬性=“屬性值”>文本內(nèi)容</font>2.1.2HTML常用標(biāo)簽屬性名含義face設(shè)置文字的字體，例如微軟雅黑、黑體、宋體等。size設(shè)置文字的大小，通常取1~7之間的整數(shù)值。color設(shè)置文字的顏色<font>標(biāo)簽常用的屬性有3個(gè)，如表2-1所示。表2-1<font>標(biāo)簽的常用屬性2.1.2HTML常用標(biāo)簽4.段落標(biāo)簽段落標(biāo)簽<p>用來創(chuàng)建一個(gè)新的段落，在此<p></p>標(biāo)簽對(duì)之間加入的文本將按照段落的格式顯示在瀏覽器上。其語(yǔ)法格式如下：<p>段落文字</p>注意：在<p>開始標(biāo)簽和</p>結(jié)束標(biāo)簽之間的內(nèi)容形成一個(gè)段落，段落中的文本會(huì)自動(dòng)換行。如果省略段落標(biāo)記的結(jié)束標(biāo)記，從<p>開始，直到遇到下一個(gè)段落標(biāo)記之前的文本，都在一個(gè)段落內(nèi)。5.預(yù)定格式標(biāo)簽<pre>標(biāo)簽可定義預(yù)格式化的文本。被包圍在<pre></pre>標(biāo)簽對(duì)中的文本通常會(huì)保留空格和換行符。而文本也會(huì)呈現(xiàn)為等寬字體。網(wǎng)頁(yè)瀏覽時(shí)仍能保留在編輯工具中已經(jīng)排好的形式進(jìn)行內(nèi)容顯示，默認(rèn)字體是10磅。2.1.2HTML常用標(biāo)簽6注釋標(biāo)簽<!—和-->標(biāo)簽對(duì)：注釋標(biāo)簽，HTML注釋會(huì)被瀏覽器忽略，里面的注釋內(nèi)容不會(huì)在瀏覽器中顯示。2.1.3HTML表格標(biāo)簽表格是網(wǎng)頁(yè)中十分重要的組成元素。表格用來存儲(chǔ)數(shù)據(jù)，表格包含標(biāo)題、表頭、行和單示格。制作網(wǎng)頁(yè)時(shí)，使用表格可以讓網(wǎng)頁(yè)中的元素有條理地顯示，也可以對(duì)網(wǎng)頁(yè)進(jìn)行規(guī)劃。在HTML中，表格標(biāo)簽使用符號(hào)<table>來表示。定義表格僅使用<table>是不夠的，還需定義表格中的行、列、標(biāo)題等內(nèi)容。2.1.3HTML表格標(biāo)簽使用標(biāo)簽創(chuàng)建表格的基本語(yǔ)法格式如下：<table> <tr> <td>單元格內(nèi)的文字</td>… </tr> …</table>每個(gè)表格均有若干行（由<tr>標(biāo)簽定義），每行被分割為若干單元格（由<td>標(biāo)簽定義）。字母td指表格數(shù)據(jù)（tabledata），即數(shù)據(jù)單元格的內(nèi)容。2.1.4表單標(biāo)簽1.表單標(biāo)簽表單標(biāo)簽<form></form>在網(wǎng)頁(yè)中用來供用戶填寫信息，以實(shí)現(xiàn)服務(wù)器獲得用戶信息，使網(wǎng)頁(yè)具有交互功能。語(yǔ)法格式：

<formaction="url"method="get|post"name="value"onsubmit="function"onreset="function"target="window"></form>2.1.4表單標(biāo)簽主要參數(shù)介紹如下：action：設(shè)置服務(wù)器上用來處理表單數(shù)據(jù)的處理程序地址，屬性值可以是URL地址也可以是電子郵件地址。method：設(shè)置處理程序從表單中獲得信息的方式，取值可為get或post。get方法在瀏覽器的地址欄中以明文形式顯示表單中各個(gè)表單域的值，對(duì)數(shù)據(jù)的長(zhǎng)度有限制。post方法將表單中用戶輸入的數(shù)據(jù)進(jìn)行包裝，按照HTTP傳輸協(xié)議中的post方式傳送到服務(wù)器，且對(duì)數(shù)據(jù)的長(zhǎng)度基本沒有限制，目前大都采用此方式。name：設(shè)置表單的名字。onsubmit、onreset：設(shè)置在單擊了“submit”或“reset”按鈕后要執(zhí)行的腳本函數(shù)名。target：設(shè)置顯示表單內(nèi)容的窗口名。2.1.4表單標(biāo)簽2.表單輸入標(biāo)簽（1）單行輸入域<input>標(biāo)簽用來定義單行輸入域，用戶可在其中輸入單行信息。<input>標(biāo)簽的屬性值如表2-2所示。屬性名說明type用于指定添加的是哪種類型的輸入字段，共有10個(gè)可選值，如表2-2所示。align設(shè)置輸入域位置，可取值left、right、middle、top、bottomdisable用于指定輸入字段不可用，即字段變成灰色，其屬性值可以為空值，也可以指定為disable。

checked用于指定輸入字段是否處于被選中狀態(tài)，用在type屬性值為radio和checkbox的情況下，

其屬性值可以為空值，也可以指定為checked。width用于指定輸入字段的寬度，

用在type

屬性值為image的情況下。height用于指定輸入字段的高度，用在type屬性值為image的情況下。maxlength用于指定輸入字段可輸入文字的個(gè)數(shù)，用在type屬性值為text和password的情況下，默認(rèn)沒有字?jǐn)?shù)限制。表2-2<input>標(biāo)記的屬性值2.1.4表單標(biāo)簽2.表單輸入標(biāo)簽（1）單行輸入域<input>標(biāo)簽用來定義單行輸入域，用戶可在其中輸入單行信息。<input>標(biāo)簽的屬性值如表2-2所示。屬性名說明size用于指定輸入字段的寬度，當(dāng)type

屬性為text和password

時(shí)，以文字個(gè)數(shù)為單位:

當(dāng)type

屬性為其他值時(shí)，以像素為單位。src用于指定圖片的來源，只有當(dāng)type屬性為image時(shí)有效。alt用于指定當(dāng)圖片無法顯示時(shí)顯示的文字，只有當(dāng)type屬性為image時(shí)有效name設(shè)置輸入域的名字。

value設(shè)置輸入域的默認(rèn)值。當(dāng)type屬性為radio和checkbox時(shí)，不可省略此屬性;當(dāng)type屬性為其他值時(shí)，可以省略。當(dāng)type屬性為button、reset和submit時(shí)，指定的是按鈕上顯示的文字;當(dāng)type屬性為radio和checkbox時(shí)，指定的是數(shù)據(jù)項(xiàng)選定時(shí)的值。2.1.4表單標(biāo)簽可選值描述text定義單行的輸入字段，用戶可在其中輸入文本，默認(rèn)寬度為20個(gè)字符。submit提交按鈕，提交按鈕會(huì)把表單數(shù)據(jù)發(fā)送到服務(wù)器。password密碼域，該字段中的字符被掩碼。reset重置按鈕，重置按鈕會(huì)清除表單中的所有數(shù)據(jù)。file文件域，定義輸入字段和“瀏覽”按鈕，供文件上傳button普通按鈕radio單選按鈕hidden隱藏域，定義隱藏的輸入字段。checkbox定義復(fù)選框image圖像域，定義圖像形式的提交按鈕type屬性用于決定<input>標(biāo)簽輸入數(shù)據(jù)的類型。該屬性值的可選項(xiàng)如表2-3所示。表2-3type屬性值2.1.4表單標(biāo)簽3.多行輸入域<textarea></textarea>標(biāo)簽對(duì)用來定義多行輸入域。其語(yǔ)法格式如下：<textareaname=”…”cols=”…”rows=”…”wrap=”…”></textarea>主要參數(shù)介紹如下：name：設(shè)置輸入域的名字，定義多行文本框的名稱，必須定義一個(gè)獨(dú)一無二的名稱。rows:設(shè)置輸入域的行數(shù)，定義多行文本框的寬度，單位是單個(gè)字符寬度。cols：設(shè)置輸入域的列數(shù)，定義多行文本框的高度，單位是單個(gè)字符高度。wrap：設(shè)置是否自動(dòng)換行，屬性值可取off（不自動(dòng)換行）、hard（自動(dòng)硬回車換行，換行標(biāo)記一同被傳送到服務(wù)器）、soft（自動(dòng)軟回車換行，換行標(biāo)記不會(huì)被傳送到服務(wù)器）。定義輸入內(nèi)容超過文本域時(shí)的顯示方式。2.1.4表單標(biāo)簽3.多行輸入域

<html>-<head><title>留言板</title></head><body><form><h1>留言板</h1><h2>用戶寄語(yǔ)</h2><textarearows="6"cols="80">歡迎來到我的空間</textarea><h2>發(fā)表您的留言與評(píng)論</h2><textarearows="6"cols="80"></textarea><br><inputtype="button"value="發(fā)表"><label><inputtype="checkbox">點(diǎn)贊</label><label><inputtype="checkbox">收藏</label></form></body></html>【例2-3】

使用文本框?qū)崿F(xiàn)留言板功能。如圖2-3所示，具體代碼如下：2.1.4表單標(biāo)簽3.多行輸入域圖2-3【例2-3】多行文本輸入標(biāo)簽2.1.4表單標(biāo)簽4.列表框標(biāo)簽列表框標(biāo)簽主要用于在有限的空間里設(shè)置多個(gè)選項(xiàng)。列表框既可以用作單選，也可以用作復(fù)選。其語(yǔ)法格式如下：<selectname=”…”size=”…”multiple><optionvalue=”…”selected>…</option>…</select>2.1.4表單標(biāo)簽其中，<select></select>標(biāo)簽對(duì)用來建立一個(gè)下拉列表。主要參數(shù)介紹如下：name:設(shè)置下拉列表的名字。size:設(shè)置下拉列表中選項(xiàng)個(gè)數(shù)，默認(rèn)值為1。multiple:表示下拉列表支持多選。其中，<option>標(biāo)簽用來定義下拉列表中的一個(gè)選項(xiàng)，用戶可以從列表中選擇一項(xiàng)或多項(xiàng)。主要參數(shù)介紹如下：selected：表示當(dāng)前選項(xiàng)被默認(rèn)選中multiple:設(shè)置當(dāng)前選項(xiàng)的值，在該項(xiàng)被選中之后，該項(xiàng)的值將被送到服務(wù)器。2.1.5超鏈接與圖像標(biāo)簽1.超鏈接標(biāo)簽<a>標(biāo)簽用于給網(wǎng)頁(yè)創(chuàng)建超鏈接。文本超鏈接是一種常見的鏈接，它通過網(wǎng)頁(yè)中的文本和其他文件進(jìn)行鏈接。其語(yǔ)法格式如下：<ahref=”鏈接地址”target=”打開新窗口的方式”>鏈接文字</a>方式含義_blank新建一個(gè)窗口打開_self在同一個(gè)窗口中打開，默認(rèn)值_parent在上一級(jí)窗口中打開_top在瀏覽器的整個(gè)窗口打開target有4個(gè)屬性，分別對(duì)應(yīng)4種打開新窗口的方式，如表2-4所示。表2-4target屬性值2.1.5超鏈接與圖像標(biāo)簽2.圖像標(biāo)簽使用<img>標(biāo)簽可以在網(wǎng)頁(yè)中顯示圖像。<img>標(biāo)簽是單標(biāo)簽，其語(yǔ)法格式如下:<imgsrc="圖像路徑"alt="圖像不能顯示時(shí)的替換文本"title="鼠標(biāo)指針懸停時(shí)顯示的內(nèi)容">其中，圖像替換文本屬性alt用于有時(shí)頁(yè)面中的圖像可能無法正常顯示，如圖片加載失敗，瀏覽器版本低，可以用alt為頁(yè)面上的圖像添加替換文本。其中，src屬性用于指定圖像的路徑，圖像的路徑可以是絕對(duì)路徑，也可以是相對(duì)路徑，它是<img>標(biāo)簽必不可少的屬性。絕對(duì)路徑就是網(wǎng)頁(yè)上的文件或硬盤上的真正路徑，例如“D：\JavaWeb\ch02\images\1.jpg”，或完整的網(wǎng)絡(luò)地址如：“/d/file/2017/0522/1495420575299.jpg”。2.2CSS設(shè)計(jì)網(wǎng)頁(yè)時(shí)為了追求更多字體的選擇、更方便的樣式效果、更絢麗的圖形動(dòng)畫，使用CSS設(shè)計(jì)樣式可以不改變?cè)蠬TML的結(jié)構(gòu)，添加豐富的樣式，實(shí)現(xiàn)結(jié)構(gòu)與表現(xiàn)的分離。使用CSS修飾網(wǎng)頁(yè)，就需要在HTML文檔中引入CSS樣式，以達(dá)到分離網(wǎng)頁(yè)內(nèi)容和樣式代碼的目的。CSS樣式有行內(nèi)樣式、內(nèi)嵌樣式、鏈接樣式。2CSS1.行內(nèi)樣式行內(nèi)樣式的方法是使用HTML標(biāo)簽的style屬性，該屬性的內(nèi)容就是CSS屬性和值。例如：<標(biāo)簽名style=”屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;”>內(nèi)容</標(biāo)簽名>上述語(yǔ)法中，style是標(biāo)簽的屬性，行內(nèi)式只對(duì)其所在的標(biāo)簽及嵌套在其中的子標(biāo)簽起作用。2CSS行內(nèi)式寫在<html>根標(biāo)簽中,圖2-4示例展示了CSS行內(nèi)式的寫法。style屬性設(shè)置行內(nèi)式CSS樣式，它修飾了二級(jí)標(biāo)題的大小和顏色，運(yùn)行效果如圖2-4所示。<h2style="font-size:30px;color:pink;">使用CSS行內(nèi)式修飾一級(jí)標(biāo)題的字體大小和顏色</h2>圖2-4行內(nèi)式效果圖1.行內(nèi)樣式2CSS2.內(nèi)嵌式使用內(nèi)嵌樣式就是將CSS樣式代碼添加到<head>與<head>之間，并且用<style>和</style>標(biāo)簽進(jìn)行聲明，其基本語(yǔ)法格式如下：<head><styletype=”text/css”>

選擇器{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;}</style></head>2CSS2.內(nèi)嵌式在上述語(yǔ)法中，<style>標(biāo)簽集中寫在<head>標(biāo)簽內(nèi)，一般位于title標(biāo)簽之后，也可以把它放在HTML文檔的任何地方。鑒于瀏覽器是從上到下解析代碼的，把CSS代碼放在頭部，有利于提前下載和解析，從而避免網(wǎng)頁(yè)內(nèi)容下載之后沒有樣式修飾的不足。此外，type的屬性值需要設(shè)置為“text/css”，告知瀏覽器需要設(shè)置type屬性值為“text”，從而瀏覽器可知<style>標(biāo)簽包含了CSS代碼。遇到寬松的語(yǔ)法格式，type屬性可以省略。

<html><head><title>內(nèi)嵌式</title><styletype="text/css">h3{ color:green;/*設(shè)置字體顏色為綠色*/ font-size:20px;/*設(shè)置字體的大小*/ text-decoration:underline;/*給文本字體添加下劃線*/ text-align:center;/*設(shè)置段落居中顯示*/}p{ color:black;/*設(shè)置字體顏色為黑色*/ font-size:20px;/*設(shè)置字體的大小*/ text-align:center;/*設(shè)置段落居中顯示*/}</style></head><body><h3>《送人游吳》杜荀鶴</h3><p>君到姑蘇見，人家盡枕河。古宮閑地少，水港小橋多。</p><p>夜市賣菱藕，春船載綺羅。遙知未眠月，鄉(xiāng)思在漁歌。</p></body></html>【例2-5】本是實(shí)例通過內(nèi)嵌式定義古詩(shī)的標(biāo)題和內(nèi)容。運(yùn)行結(jié)果如圖2-5所示。具體代碼如下：2.內(nèi)嵌式2CSS2.內(nèi)嵌式2CSS圖2-5【例2-5】行內(nèi)式的顯示2CSS外鏈?zhǔn)绞菍⑺械臉邮椒旁谝粋€(gè)或多個(gè)以.css為擴(kuò)展名的外部樣式表文件，通過鏈接標(biāo)簽<link>鏈接到HTML頁(yè)面中，其基本語(yǔ)法格式如下：<head><linkhref=”CSS文件的路徑”type="text/css"rel="stylesheet"/></head>(1)href定義CSS樣式表所在的URL，可以是相對(duì)路徑，也可以是絕對(duì)路徑。此處表示當(dāng)前路徑下名稱為style.css的文件。(2)type定義鏈接文檔的類型，需要指定為text/css“，表示樣式表類型為CSS樣式表。(3)rel指定鏈接到樣式表，其值為stylesheet。3.外鏈?zhǔn)?CSS2CSS圖2-6【例2-6】外鏈?zhǔn)阶拥娘@示效果2.3實(shí)戰(zhàn)案例實(shí)戰(zhàn)1制作學(xué)員信息發(fā)布的表單。運(yùn)行效果如圖2-7所示。圖2-7學(xué)員信息發(fā)布的表單（具體代碼參考書本內(nèi)容）2.3實(shí)戰(zhàn)案例（具體代碼參考書本內(nèi)容）

實(shí)戰(zhàn)2制作學(xué)員信息和新聞發(fā)布的主頁(yè)，運(yùn)行效果如圖2-8所示。圖2-8學(xué)員信息和新聞發(fā)的主頁(yè)2.4小結(jié)本章介紹了HTML和CSS網(wǎng)頁(yè)開發(fā)基礎(chǔ)。一個(gè)HTML文檔主要由4個(gè)主要標(biāo)簽組成，分別是<html>、<head>、<title>、<body>。這4個(gè)標(biāo)簽構(gòu)成了HTML頁(yè)面最基本的元素。HTML常用標(biāo)簽有標(biāo)題標(biāo)簽、段落換行標(biāo)簽<br>文字樣式標(biāo)簽<font>段落標(biāo)簽<p>預(yù)定格式標(biāo)簽<pre>注釋標(biāo)簽<!--和-->等。表格標(biāo)簽使用符號(hào)<table>，每行由<tr>標(biāo)簽定義，字母td定義數(shù)據(jù)單元格的內(nèi)容。表單標(biāo)簽<form></form>表示。<a>標(biāo)簽用于給網(wǎng)頁(yè)創(chuàng)建超鏈接。使用<img>標(biāo)簽可以在網(wǎng)頁(yè)中顯示圖像。CSS樣式有行內(nèi)樣式、內(nèi)嵌樣式、鏈接樣式。外鏈接式使用頻率最高。2.5習(xí)題1、下面關(guān)于css樣式和html樣式的不同之處說法正確的是()A、html樣式只影響應(yīng)用它的文本和使用所選html樣式創(chuàng)建的文本B、CSS樣式只可以設(shè)置文字字體樣式C、html樣

式可以設(shè)置背景樣式D、html樣式和CSS樣式相同，沒有區(qū)別

2、在HTML中，標(biāo)記<

font>的Size屬性最大取值可以是()

。A.5B.6C.7D.

8

3、下面哪一個(gè)屬性不是文本的標(biāo)簽屬性?

(

)A.nbsp;B.alignC.colorD.Face

4.要在表單中創(chuàng)建一個(gè)多行文本輸入框，初始值為：這是一個(gè)多行文本框。下面語(yǔ)句正確的是()。A.

<textarea

name=

"text1"

value="這是一個(gè)多行文本框">

</

textarea

>B.

<input

type=

"text"

value="這是一個(gè)多行文本框"

name="text1">C.

<input

type=

"textarea"

name="text1"

value="這是一個(gè)多行文本">D.

<

textarea

name="text1"

cols=20

rows=5>這是一個(gè)多行文本框</

textarea

>2.5習(xí)題5.

用HTML標(biāo)記語(yǔ)言編寫一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)，網(wǎng)頁(yè)最基本的結(jié)構(gòu)是(

)

A

<html>

<head>

…

</head>

<frame>

…</frame>

</html>

B

<html>

<title>

…</title>

<body>

…

</body>

</html>

C

<html>

<title>

…

</title>

<frame>

...

</frame>

</html>D

<html>

<head>

</head>

<body>

</body>

</html>

6.若要

在頁(yè)面中創(chuàng)建一個(gè)圖形超鏈接，

要顯示的圖形為以下用法中，正確的是()A

<a

href="

"

>myhome.jpg</a>B

<a

href="

srC="

myhome.jpg

"

></a>C<img

src="

myhome.jpg"

><a

href="

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(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)論