第3章文字與段落_第1頁
第3章文字與段落_第2頁
第3章文字與段落_第3頁
第3章文字與段落_第4頁
第3章文字與段落_第5頁
已閱讀5頁，還剩39頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

第3章文字與段落廣州松田職業(yè)學(xué)院主講教師：楊本勝主要內(nèi)容對網(wǎng)頁中的文字格式化對網(wǎng)頁中的段落格式化課堂任務(wù)實(shí)例效果圖3.1添加文字文字是網(wǎng)頁的基礎(chǔ)部分，可以通過一些HTML標(biāo)記實(shí)現(xiàn)對文字的格式化。在HTML文件中，添加文字內(nèi)容的方式與在word、記事本等中添加文字的方式相同，在需要輸入文字的地方輸入即可，但是需要添加在<body>與</body>標(biāo)記之間。具體內(nèi)容包括瀏覽器中要顯示的文字、空格符、特殊符號以及注釋語句。3.1添加文字<!--程序3-1--><html><head><title>在網(wǎng)頁中添加文字</title></head><body>床前明月光，

疑是地上霜。

舉頭望明月，

低頭思故鄉(xiāng)</body></html>3.1添加文字3.1標(biāo)題字標(biāo)題字就是以幾種固定的字號去顯示文字。在HTML中，定義了六級標(biāo)題，從一級到六級，每級標(biāo)題的字體大小依次遞減。基本語法：<h#align="left|center|right">標(biāo)題文字</h#>3.1標(biāo)題字<!--程序3-2--><html><head><title>在網(wǎng)頁中添加標(biāo)題字</title></head><body><h1>一、我國失業(yè)統(tǒng)計(jì)制度存在問題的成因</h1><h2>1.1歷史的原因</h2><h3>1.1.1制度歷史原因</h3></body></html>3.1標(biāo)題字3.2文字樣式文字樣式在網(wǎng)頁中添加文字后，可以設(shè)置其字體、字號、顏色等屬性，利用<font>標(biāo)記或<basefont>標(biāo)記都可以實(shí)現(xiàn)。提示樣式建議使用css定義3.2.1普通文字標(biāo)記文字樣式定義利用<font>可以對網(wǎng)頁文字的字體、字號、顏色進(jìn)行定義?；菊Z法：<fontface=""size=""color="">…</font>3.2.1普通文字標(biāo)記<!--程序3-6--><html><head><title>設(shè)置文字的字體、字號、顏色</title></head><body><center><fontface=“黑體”size=6color=“red”>我們是一個(gè)團(tuán)體，不會丟下誰，不會落下誰。共同奮進(jìn)??！</font></center></body></html>3.2.1普通文字標(biāo)記3.3段落標(biāo)記段落標(biāo)記p<p>是HTML文檔中最常見的標(biāo)記，<p>用來起始一個(gè)段落?；菊Z法：<p>段落文字</p>3.3段落標(biāo)記<!--程序3-6--><html><head><title>段落標(biāo)記</title></head><body><palign="center"><b><fontsize="3">靜夜思</font></b></p><palign="center"><fontsize="2">李白</font></p> </body></html>3.4水平分隔線水平分割線水平線可以作為段落與段落之間的分隔線，使得文檔結(jié)構(gòu)清晰，層次分明。基本語法：<hrwidth=""size=""color=""align="">水平線的寬度，可以是確定的像素值，也是窗口的百分比水平線的高度，只能是像素值3.4水平分隔線01：<!--程序3-16-->02：<html>03：<head>04：<title>水平分隔線</title>05：</head>06：<body>07：<center>08：關(guān)于我們09：<hr>10：五十個(gè)不同的分子，11：<hrsize="6">12：在不同狀態(tài)下進(jìn)入了同一容器，13：<hrwidth="40%">3.4水平分隔線14：這就組成了我們的家——多媒體專業(yè)。15：<hrwidth="60"align="left">16：在這個(gè)容器里，我們碰撞著，摩擦著，產(chǎn)生了各色各樣的靈感，活力與情緒。17：<hrsize="6"width="30%"align="center"noshadecolor="red">18：</center>19：</body>20：</html>3.4水平分隔線3.5添加特殊符號特殊符號特殊符號和空格一樣，也是通過在HTML文件中輸入符號代碼來添加。使用特殊符號可以將鍵盤上沒有的字符輸出出來?；菊Z法：&…..©前綴字符名稱后綴3.5添加特殊符號<!--程序3-4--><html><head><title>在網(wǎng)頁中添加特殊符號</title></head><body><center>版權(quán)所有©<!--加入了版權(quán)符號的符號代碼--></body></html>3.5添加特殊符號3.8添加空格空格通常情況下，HTML會自動(dòng)刪除文字內(nèi)容中的多余空格，不管文字中有多少空格，都被視做一個(gè)空格。比如：兩個(gè)字之間加了10個(gè)空格，HTML會截去9個(gè)空格，只保留一個(gè)。為了在網(wǎng)頁中增加空格，可以明確使用“

”表示空格。這種使用代碼控制的方式與在文本編輯軟件中通過輸入空格鍵來添加空格的方式不同?；菊Z法：

3.8添加空格<!--程序3-3--><html><head><title>在網(wǎng)頁中添加空格</title></head><body>這是一本

介紹HTML，CSS，JAVASCRIPT  的專業(yè)書籍。</body></html>3.8添加空格3.9上標(biāo)、下標(biāo)在數(shù)學(xué)公式中，上標(biāo)和下標(biāo)的使用比較廣泛，比如x1，x2，y1，y2等?；菊Z法：<sup>…</sup><sub>…</sub>3.9上標(biāo)、下標(biāo)<!--程序3-9--><html><head><title>上標(biāo)、下標(biāo)的實(shí)現(xiàn)</title></head><body><h2>解下面的代數(shù)方程式</h2>x<sup>2</sup>-3x+2=0<br>解：x<sub>1</sub>=2;x<sub>2</sub>=1<br></body></html>3.9上標(biāo)、下標(biāo)3.10設(shè)置地址文字地址文字<address><address>標(biāo)記用來表示HTML文檔的特定信息，如：E-mail、地址、簽名、作者、文檔信息等。通常顯示為斜體。基本語法：<address>…</address>3.10設(shè)置地址文字<!--程序3-11--><html><head><title>設(shè)置地址文字</title></head><body>

給我們寫信:<address>wangtao@</address></body></html>3.10設(shè)置地址文字3.10換行標(biāo)記換行標(biāo)記可以使用<br>來控制段落中文字的換行顯示。一般，瀏覽器會根據(jù)窗口的寬度自動(dòng)將文本進(jìn)行換行顯示，如果想強(qiáng)制瀏覽器不換行顯示，可以使用<nobr>標(biāo)記。若希望在<nobr>標(biāo)記中的文字強(qiáng)制換行，則可以使用<wbr>。基本語法：<br><nobr>…</nobr><wbr>…</wbr>3.10換行標(biāo)記01：<!—程序3-14-->02：<html>03：<head>04：<title>換行</title>05：</head>06：<body>07：<p>08：無換行標(biāo)記：在這個(gè)容器里，我們碰撞著，摩擦著，產(chǎn)生了各色各樣的靈感，活力與情緒。09：<br>有換行標(biāo)記：<br>在這個(gè)容器里，<br>10：我們碰撞著，<br>摩擦著，<br>產(chǎn)生了各色各樣的靈感，<br>活力與情緒。11：</p>12：<nobr>五十個(gè)不同的分子，在不同狀態(tài)下進(jìn)入了同一容器，這就組成了我們的家——13：媒體專業(yè)。<wbr>在這個(gè)容器里，我們碰撞著，摩擦著，產(chǎn)生了各色各樣的靈感，活14：與情緒。</wbr></nobr>15：</body>16：</html>3.10換行標(biāo)記3.10居中標(biāo)記居中標(biāo)記如果希望網(wǎng)頁中的段落居中顯示，可以采用標(biāo)記<center>。該標(biāo)記也可以使圖片等網(wǎng)頁元素居中顯示。基本語法：<center>…</center>3.10居中標(biāo)記<!--程序3-15--><html><head><title>居中對齊標(biāo)記</title></head><body><center>《關(guān)于我們》</center><center> </center><center>五十個(gè)不同的分子，在不同狀態(tài)下進(jìn)入了同一容器，這就組成了我們的家——多媒體專業(yè)。<!--文字內(nèi)容自動(dòng)居中對齊--></center><center> </center></body></html>3.10居中標(biāo)記3.11小實(shí)例本節(jié)給出一個(gè)唐詩欣賞的頁面，在這個(gè)實(shí)例中綜合運(yùn)用本章所介紹的標(biāo)記對普通文字進(jìn)行格式化。3.11小實(shí)例<!--程序3-21--><html><head><title>文字網(wǎng)頁</title></head><body>3.11小實(shí)例這是寫遠(yuǎn)客思鄉(xiāng)之情的詩，詩以明白如話的語言雕琢出明靜醉人的秋夜的意境。它不追求想象的新穎奇特，也摒棄了辭藻的精工華美；它以清新樸素的筆觸，抒寫了豐富深曲的內(nèi)容。境是境，情是情，那么逼真，那么動(dòng)人，百讀不厭，耐人尋繹。無怪乎有人贊它是“妙絕古今”。</body></html>3.11小實(shí)例小結(jié)本章介紹了文字與段落的格式設(shè)置。主要內(nèi)容包括文字內(nèi)容標(biāo)記、文字樣式標(biāo)記、文字修飾標(biāo)記、段落修飾標(biāo)記的使用。1.在瀏覽器顯示的文字內(nèi)容編寫在<body>和</body>標(biāo)記之間，內(nèi)容包括普通的文字、空格符號和特殊符號以及頁面的注釋語句，標(biāo)題字標(biāo)記<h>

溫馨提示

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

最新文檔

評論

0/150

提交評論