第3講 文字、段落、列表及圖片標記_第1頁
第3講 文字、段落、列表及圖片標記_第2頁
第3講 文字、段落、列表及圖片標記_第3頁
第3講 文字、段落、列表及圖片標記_第4頁
第3講 文字、段落、列表及圖片標記_第5頁
已閱讀5頁，還剩38頁未讀， 繼續免費閱讀

下載本文檔

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

文檔簡介

第3講文字、段落、列表及圖片標記3.1文字標記3.2段落標記3.3列表標記3.4圖片標記文字標記主要用于設置網頁中的所有有關文字方面的內容，具體包括普通文字、特殊字符、標題字、字體以及文字格式等方面的設置3.1文字標記表3-1常用文字標記標記描述文字內容包括普通文字、空格及特殊符號等標題字標記以某幾種固定的字號顯示文字，共分為六個級別（H1~H6），對應著六種字號文字的修飾標記通過這些修飾標記，可設定文字的不同格式，如粗體、斜體等字體標記設定文字的字體、字號及顏色等1）文字內容網頁中涉及到的文字主要包括:普通文字、特殊符號以及頁面的注釋語句普通文字的輸入:

直接在<body>和</body>標記之間輸入特殊字符的輸入:

在源代碼中特殊字符使用其對應的符號碼代替.特殊符號符號碼空格 “"&&<<>>

·Xק§￠¢￥¥￡£

©®&trade；注釋語句基本語法<comment>……</comment>

<!---->語法解釋上述兩種表示法皆可代表注釋語句；注釋語句不會顯示在瀏覽器中文字內容綜合示例2）標題字標記所謂標題字就是以某幾種固定的字號去顯示文字，一般用于強調段落要表現的內容或作為文章的標題具有加粗顯示并與下一行產生一空行的特性根據字號的大小分為六級，分別用標記H1~H6表示，字號的大小隨數字增大而遞減標記描述屬性屬性取值<h1>……</h1>一級標題alignleft（默認值）<h2>……</h2>二級標題<h3>……</h3>三級標題center<h4>……</h4>四級標題<h5>……</h5>五級標題right<h6>……</h6>六級標題標題字標記綜合示例3）文字的修飾標記用于對文字進行格式化常用的修飾標記如下：標記描述<b>…</b>、<strong>…</strong>粗體<i>…</i>、<cite>…</cite>、<em>…</em>、<var>…</var>斜體<sup>…</sup>上標<sub>…</sub>下標<big>…</big>大字號<small>…</small>小字號<u>…</u>下劃線<s>…</s>、<strike>…</strike>刪除線<address>…<address>地址，用于地址、Email文字修飾標記綜合示例3-1）字體標記<font>作用：設置文字的字體、字號及顏色基本語法<fontface=“font_name”size=“value”color=“color_value”>…</font>表3-3字體標記的屬性屬性描述face設置字體size字號，取值范圍為從1到7，或者從+1到+7、從-1到-7（正負取值相對于頁面默認字號3），超出取值范圍的，與取值范圍的最近的極值效果相同color文字顏色字體標記綜合示例3-2)基字體標記<basefont>作用用于設定文字的字體默認屬性，出現在<basefont>標記之后的所有<font>標記的默認屬性使用<basefont>標記中所設置的屬性基本語法

<basefontface=“font_name”size=“value”color=“color_value”>基字體標記綜合示例3.2段落標記1)段落標記<p>所謂段落，指得是一段格式上統一的文本基本語法語法解釋從<p>開始處創建一個段落。使用雙標記將使所包含的段落與上下文都有一空行的間隔；使用單標記將只使段落與上文有一空行的間隔標記描述屬性屬性取值

<p>…</p>雙標記alignleftcenter<p>…單標記right2)換行標記<br>作用:產生一個換行效果基本語法

<br>3）居中標記<center>基本語法

<center>……</center>作用：使<center></center>標記對之間的文字在瀏覽器窗口中居中對齊段落、換行及居中標記綜合示例4）預格式化標記<pre>基本語法

<pre>……</pre>語法解釋預格式化，是指保留<pre></pre>之間的文字在源代碼中的格式，使其在頁面中顯示的效果和源代碼中的效果幾乎完全一致預格式化標記示例5）水平線標記<hr>水平線用于段落與段落之間的分隔，使文檔結構更加清晰，使文字的編排更加整齊基本語法

<hr>常用屬性

屬性描述width設置水平線寬度,單位為像素或瀏覽器窗口的%size水平線高度,單位為像素align水平線對齊方式,取值left|center|right,默認居中對齊noshade默認的水平線的空心立體效果改設為實心的不帶陰影的效果color水平線顏色,顯示顏色時，當水平線將顯示成實心水平線標記示例3.3列表標記所謂列表，通俗的講就是各列表項按一定的方式進行排列而成的一張表按列表項排列方式的不同，可分成：有序列表無序列表嵌套列表有序列表

以數字或字母等表示順序的符號為項目前導符來排列列表項目的列表。例如:無序列表以無順序的符號（●、○、■等）為項目前導符來排列列表項目或沒有任何符號作項目前導符的列表。嵌套列表

指多于一級層次的列表，一級列表項下面可以存在二級項目、三級項目等

1）有序列表<ol>基本語法

<ol><li>項目一</li><li>項目二</li>……</ol>有序列表標記示例常用屬性屬性描述屬性值type設置有序列表的前導符1前導符為數字1、2、3…a前導符為小寫字母a、b、c…A前導符為大寫字母A、B、C…i前導符為小寫羅馬數字i、ii、iii…I前導符為大寫羅馬數字I、Ⅱ、Ⅲ…start設置有序列表的起始編號value在默認情況下，有序列表從數字1開始編號；不論列表編號是數字、英文字母還是羅馬數字，value的值都是需要起始的數字有序列表前導符和起始編號設置示例2)無序列表<ul>及<dl>

常用無序列表包含如下兩種:項目列表<ul>

前導符默認為實心圓點定義列表<dl>

列表項前沒有任何前導符2-1）項目列表<ul>基本語法

<ul><li>項目一</li><li>項目二</li>……</ul>常用屬性屬性描述屬性值type設置項目列表的前導符disc前導符為●（默認前導符）circle前導符為○square前導符為■項目列表標記示例項目列表前導符設置示例2-2)定義列表<dl>基本語法

<dl><dt>名詞一</dt><dd>解釋1</dd><dd>解釋2</dd>……<dt>名詞二</dt><dd>解釋1</dd>…………</dl>語法解釋定義列表是一種具有兩個層次的列表，用于解釋名詞的定義，名詞為第一層次，解釋為第二層次；使用<dt>定義需解釋的名詞，使用<dd>解釋名詞定義列表標記示例3）嵌套列表嵌套列表指的是多于一級層次的列表，一級列表項下面可以存在二級項目、三級項目等嵌套列表類型：定義列表的嵌套無序列表和有序列表的嵌套這種嵌套類型是最常見的，它主要是通過在一種列表中的列表項中嵌套另一種列表的定義來實現無序列表和有序列表嵌套示例3.4圖片標記網頁中的常用圖片格式-GIF（GraphicsInterchangeFormat，圖形交換格式）

最多使用256種顏色，最適合顯示色調不連續或具有大面積單一顏色的圖像，如站點圖標、導航條等。-

JPEG（JoinPhotographGraphic，聯合圖像專家組標準)

又稱JGP，用來顯示照片等顏色豐富的精美圖像-

PNG（PortableNetworkGraphics，可移植網絡圖形）

既融合了GIF格式透明顯示的顏色，又具有JPEG處理精美圖像的優勢，是逐漸流行的網絡圖像格式，但目前瀏覽器對其支持并不一致插入圖片基本語法基本語法

<img

src=“file_name”>常用屬性

屬性描述src指定圖片源文件所在路徑(必設屬性)alt設置提示文字width設置圖片的寬度height設置圖片的高度hspace設置圖片與相鄰對象之間的左右間距vspace設置圖片與相鄰對象之間的上下間距align設置對齊方式border設置圖片邊框，默認情況下，不顯示邊框align屬性值描述baseline、bottom、absbottom圖片底端與文字底端對齊top、texttop圖片頂端與文字行最高字符的頂端對齊middle圖片的中間線與文字底端對齊absmiddle圖片的中間線與文字的中間線對齊right圖片在文字的右邊left圖片在文字的左邊插入圖片綜合示例小結字體標記<font>的size屬性的取值范圍是1~7，其中“1”為最小字號，“7”為最大字號。空格在源代碼中的表示是” ”，一個 表示一個半角空格。另外一些特殊符號如“<“”>”等，在源代碼中也要象空格的表示一樣，使用字符碼。設置文字的格式（如加粗顯示文字）需要使用文字修飾標記標題標記的級別范圍是h1~h6，其中“h1”的字號是最大的，“h6”的字號是最小的。<pre>標記可使顯示的內容的格式與源代碼的格式幾乎完全一樣。段落標記<p>和換行標記<br

溫馨提示

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

評論

0/150

提交評論