第3-2章 文字及段落_第1頁
第3-2章 文字及段落_第2頁
第3-2章 文字及段落_第3頁
第3-2章 文字及段落_第4頁
第3-2章 文字及段落_第5頁
已閱讀5頁，還剩71頁未讀， 繼續免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

文字與段落主要內容對網頁中的文字格式化對網頁中的段落格式化添加文字文字是網頁的基礎部分，可以通過一些HTML標記實現對文字的格式化。在HTML文件中，添加文字內容的方式與在word、記事本等中添加文字的方式相同，在需要輸入文字的地方輸入即可，但是需要添加在<body>與</body>標記之間。具體內容包括瀏覽器中要顯示的文字、空格符、特殊符號以及注釋語句。添加文字<!--程序3-1--><html><head><title>在網頁中添加文字</title></head><body>這是一本介紹HTML，CSS，JAVASCRIPT的專業書籍。</body></html>添加文字標題字標題字就是以幾種固定的字號去顯示文字。在HTML中，定義了六級標題，從一級到六級，每級標題的字體大小依次遞減?；菊Z法：<h#align="left|center|right">標題文字</h#>標題字<!--程序3-2--><html><head><title>在網頁中添加標題字</title></head><body><h1align="center">一級標題</h1><h2>二級標題</h2><h3>三級標題</h3><h4align=left>四級標題</h4><h5align=center>五級標題</h5><h6align=right>六級標題</h6></body></html>標題字添加空格空格通常情況下，HTML會自動刪除文字內容中的多余空格，不管文字中有多少空格，都被視做一個空格。比如：兩個字之間加了10個空格，HTML會截去9個空格，只保留一個。為了在網頁中增加空格，可以明確使用“

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

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

介紹HTML，CSS，JAVASCRIPT  的專業書籍。</body></html>添加空格添加特殊符號特殊符號特殊符號和空格一樣，也是通過在HTML文件中輸入符號代碼來添加。使用特殊符號可以將鍵盤上沒有的字符輸出出來。基本語法：&&©<<>>"雙引號（英文）

空格C添加特殊符號<!--程序3-4--><html><head><title>在網頁中添加特殊符號</title></head><body><center>版權所有©<!--加入了版權符號的符號代碼--></body></html>添加特殊符號注釋語句注釋可以在HTML文檔中添加注釋，增加代碼的可讀性，便于以后維護和修改。訪問者在瀏覽器中是看不見這些注釋的，只有在用文本編輯器打開文檔源代碼時才可見?；菊Z法：<comment>…</comment>或<!--…-->注釋語句<!--程序3-5--><html><head><title>在網頁中添加添加注釋</title></head><body><comment>body標記是主體內容</comment><center><pre><!--pre代表原樣顯示排版格式-->我們永遠的家——多媒體專業！</pre><center></body></html>注釋語句文字樣式文字樣式在網頁中添加文字后，可以設置其字體、字號、顏色等屬性，利用<font>標記或<basefont>標記都可以實現。提示樣式建議使用css定義普通文字標記文字樣式定義利用<font>可以對網頁文字的字體、字號、顏色進行定義?；菊Z法：<fontface=""size=""color="">…</font>普通文字標記<!--程序3-6--><html><head><title>設置文字的字體、字號、顏色</title></head><body><center><fontface=“黑體”size=6color=“red”>我們是一個團體，不會丟下誰，不會落下誰。共同奮進??！</font></center></body></html>普通文字標記基底文字標記<basefont>標記在制作網頁前，可以先使用<basefont>標記對整個網頁文字進行一個基本的定義，主要包括字體、字號和顏色，當網頁中沒有另外定義文字樣式時，就自動套用<basefont>定義的樣式，定義將影響整個HTML頁面。基本語法：<basefontface=""size=""color="">基底文字標記01：<!--程序3-7-->02：<html>03：<head>04：<title>整個網頁文字的字體、字號和顏色基本定義</title>05：<basefontface="黑體"size=5color="red">06：</head>07：<body>08：<center>09：學校將于近期舉辦校園卡拉OK大賽<br>10：<fontsize=+3color="green">11：學校將于近期舉辦校園卡拉OK大賽12：</font>基底文字標記13：<br>14：<fontsize=–2>15：學校將于近期舉辦校園卡拉OK大賽16：</font>17：</center>18：</body>19：</html>基底文字標記粗體、斜體、下劃線

基本語法：<b>…</b><i>…</i><u>…</u>粗體、斜體、下劃線<!--程序3-8--><html><head><title>文字的加粗、斜體和下劃線</title></head><body><center><fontcolor=“#FF0000”size=3><b>這些文字是粗體的</b></font><br><i>這些文字是斜體的</i><br><u>這些文字帶有下劃線</u></center></body></html>粗體、斜體、下劃線刪除線基本語法：<del>…</del>語法說明置于<del>標記中的文字將被加上刪除線刪除線<!--程序3-8--><html><head><title>給文字添加刪除線</title></head><body>作者信箱由<del>junmeihao@</del>更改為hongmei@<!--添加刪除線--></body></html>刪除線圖3-9給文字添加刪除線上標、下標在數學公式中，上標和下標的使用比較廣泛，比如x1，x2，y1，y2等。基本語法：<sup>…</sup><sub>…</sub>上標、下標<!--程序3-9--><html><head><title>上標、下標的實現</title></head><body><h2>解下面的代數方程式</h2>x<sup>2</sup>-3x+2=0<br>解：x<sub>1</sub>=2;x<sub>2</sub>=1<br></body></html>上標、下標設置文字標注文字標注在HTML文件中，可以在文字上方添加說明，并以縮小的字號顯示。基本語法：<ruby>被說明文字<rt>文字的標注</rt><ruby>設置文字標注<!--程序3-10--><html><head><title>在文字上方標注說明</title></head><body><ruby>第二十九屆奧運會在北京舉行<rt>2008</rt></ruby></body></html>設置文字標注設置地址文字地址文字<address><address>標記用來表示HTML文檔的特定信息，如：E-mail、地址、簽名、作者、文檔信息等。通常顯示為斜體?；菊Z法：<address>…</address>設置地址文字<!--程序3-11--><html><head><title>設置地址文字</title></head><body>

給我們寫信:<address>wangtao@</address></body></html>設置地址文字設置等寬文字等寬文字為了使網頁中的文字顯示更加整齊、美觀，可以使用以下標記進行設置?；菊Z法：<tt>…</tt>設置等寬文字01：<!--程序3-12-->02：<html>03：<head>04：<title>設置等寬文字</title>05：</head>06：<body>07：<h2>成功源于努力去克服困難</h2>08：<p><tt>Successgrowsoutofstrugglestoovercomedifficulties.</tt></p>設置等寬文字09：<p><samp>Successgrowsoutofstrugglestoovercomedifficulties.</samp></p>10：<p><code>Successgrowsoutofstrugglestoovercomedifficulties.</code></p>11：<p><kbd>Successgrowsoutofstrugglestoovercomedifficulties.</kbd></p>12：</body>13：</html>設置等寬文字段落文字的組合就是段落，段落就是格式上統一的文本。下面介紹和段落相關的HTML標記。段落標記段落標記在文本編輯器中輸入的回車和額外空格將被HTML忽略，所以要在網頁中開始一個段落需要通過使用標記<p>來實現。由<p>標記所標識的文字，代表同一個段落的文字。不同段落間的間距等于連續加了兩個換行符，用以區別文字的不同段落?；菊Z法：<p>…</p>段落標記<!--程序3-13--><html><head><title>段落</title></head><body><p>五十個不同的分子，在不同狀態下進入了同一容器，這就組成了我們的家——多媒體專業。在這個容器里，我們碰撞著，摩擦著，產生了各色各樣的靈感，活力與情緒。</p>段落標記<p>在不地碰撞和摩擦中，分子也不斷地變化，成長著，最終可走出這個容器，勇敢地面對、挑戰外面的世界。不管外面如何復雜、艱難，請大家彼此珍惜這段我們相逢相識相知的日子，在這里我們痛過笑過哭過，不論是苦的還是甜的，這都是我們年輕的見證。</p></body></html>段落標記換行標記換行標記可以使用<br>來控制段落中文字的換行顯示。一般，瀏覽器會根據窗口的寬度自動將文本進行換行顯示，如果想強制瀏覽器不換行顯示，可以使用<nobr>標記。若希望在<nobr>標記中的文字強制換行，則可以使用<wbr>?；菊Z法：<br><nobr>…</nobr><wbr>…</wbr>換行標記01：<!—程序3-14-->02：<html>03：<head>04：<title>換行</title>05：</head>06：<body>07：<p>08：無換行標記：在這個容器里，我們碰撞著，摩擦著，產生了各色各樣的靈感，活力與情緒。09：<br>有換行標記：<br>在這個容器里，<br>10：我們碰撞著，<br>摩擦著，<br>產生了各色各樣的靈感，<br>活力與情緒。11：</p>12：<nobr>五十個不同的分子，在不同狀態下進入了同一容器，這就組成了我們的家——13：媒體專業。<wbr>在這個容器里，我們碰撞著，摩擦著，產生了各色各樣的靈感，活14：與情緒。</wbr></nobr>15：</body>16：</html>換行標記居中標記居中標記如果希望網頁中的段落居中顯示，可以采用標記<center>。該標記也可以使圖片等網頁元素居中顯示?；菊Z法：<center>…</center>居中標記<!--程序3-15--><html><head><title>居中對齊標記</title></head><body><center>《關于我們》</center><center> </center><center>五十個不同的分子，在不同狀態下進入了同一容器，這就組成了我們的家——多媒體專業。<!--文字內容自動居中對齊--></center><center> </center></body></html>居中標記水平分隔線水平分割線水平線可以作為段落與段落之間的分隔線，使得文檔結構清晰，層次分明?；菊Z法：<hrwidth=""size=""color=""align="">水平分隔線01：<!--程序3-16-->02：<html>03：<head>04：<title>水平分隔線</title>05：</head>06：<body>07：<center>08：關于我們09：<hr>10：五十個不同的分子，11：<hrsize="6">12：在不同狀態下進入了同一容器，13：<hrwidth="40%">水平分隔線14：這就組成了我們的家——多媒體專業。15：<hrwidth="60"align="left">16：在這個容器里，我們碰撞著，摩擦著，產生了各色各樣的靈感，活力與情緒。17：<hrsize="6"width="30%"align="center"noshadecolor="red">18：</center>19：</body>20：</html>水平分隔線預格式化標記預格式化標記瀏覽器在顯示HTML頁面時候，通常會將頁面中所有的額外空白和回車進行壓縮，并根據窗口寬度自動換行。要想保留原始文字排版的格式，可以通過<pre>標記來實現。基本語法：<pre>…</pre>預格式化標記01：<!--程序3-17-->02：<html>03：<head>04：<title>原樣顯示文字標記</title>05：</head>06：<body>07：<pre>08：請記住我們是一個團體，09：10：不會丟下誰，11：12：不會落下誰。13：14：共同奮進??！15：</pre>16：</body>17：</html>預格式化標記忽略html標記忽略標記在HTML文件中，利用<xmp>標記，可以使得該標記后面的HTML標記的作用被忽略，直接顯示在頁面中。基本語法：<xmp>…</xmp>忽略html標記<!--程序3-19--><html><head><title>忽略HTML標記</title></head><body>

基本語法：內容<br><br>

作用：設置顯示字號。

<br><br>

示例：

<br><br><xmp><h3>這是h3標記的例子</h3></xmp></body></html>忽略html標記設置段落縮進段落縮進利用段落的縮進，可以增加段落的層次效果?；菊Z法：<blockquote>…</blockquote>設置段落縮進01：<!--程序3-18-->02：<html>03：<head>04：<title>段落縮進</title>05：</head>06：<body>07：關于我們<br>08：<blockquote>09：<p>五十個不同的分子，在不同狀態下進入了同一容器，</p><!--縮進了5個字符-->10：</blockquote>11：<blockquote><blockquote>12：<p>這就組成了我們的家——083007班。<p>13：</blockquote></blockquote>14：<!--縮進了10個字符-->15：</body>16：</html>設置段落縮進小實例本節給出一個唐詩欣賞的頁面，在這個實例中綜合運用本章所介紹的標記對普通文字進行格式化。小實例<!--程序3-21--><html><head><title>文字網頁</title></head><body><h2align=center>唐詩欣賞</h2><hrwidth="100%"size="1"color="#00ffee"><palign="center"><b><fontsize="3">靜夜思</font></b></p><palign="center"><fontsize="2">李白</font></p> <palign="center"><b>床前明月光，<br>

疑是地上霜。<br>

溫馨提示

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

評論

0/150

提交評論