第3講 文字、段落、列表及圖片標(biāo)記_第1頁
第3講 文字、段落、列表及圖片標(biāo)記_第2頁
第3講 文字、段落、列表及圖片標(biāo)記_第3頁
第3講 文字、段落、列表及圖片標(biāo)記_第4頁
第3講 文字、段落、列表及圖片標(biāo)記_第5頁
已閱讀5頁，還剩38頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

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

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

在源代碼中特殊字符使用其對(duì)應(yīng)的符號(hào)碼代替.特殊符號(hào)符號(hào)碼空格 “"&&<<>>

·Xק§￠¢￥¥￡£

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

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

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

<p>…</p>雙標(biāo)記alignleftcenter<p>…單標(biāo)記right2)換行標(biāo)記<br>作用:產(chǎn)生一個(gè)換行效果基本語法

<br>3）居中標(biāo)記<center>基本語法

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

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

<hr>常用屬性

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

以數(shù)字或字母等表示順序的符號(hào)為項(xiàng)目前導(dǎo)符來排列列表項(xiàng)目的列表。例如:無序列表以無順序的符號(hào)（●、○、■等）為項(xiàng)目前導(dǎo)符來排列列表項(xiàng)目或沒有任何符號(hào)作項(xiàng)目前導(dǎo)符的列表。嵌套列表

指多于一級(jí)層次的列表，一級(jí)列表項(xiàng)下面可以存在二級(jí)項(xiàng)目、三級(jí)項(xiàng)目等

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

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

常用無序列表包含如下兩種:項(xiàng)目列表<ul>

前導(dǎo)符默認(rèn)為實(shí)心圓點(diǎn)定義列表<dl>

列表項(xiàng)前沒有任何前導(dǎo)符2-1）項(xiàng)目列表<ul>基本語法

<ul><li>項(xiàng)目一</li><li>項(xiàng)目二</li>……</ul>常用屬性屬性描述屬性值type設(shè)置項(xiàng)目列表的前導(dǎo)符disc前導(dǎo)符為●（默認(rèn)前導(dǎo)符）circle前導(dǎo)符為○square前導(dǎo)符為■項(xiàng)目列表標(biāo)記示例項(xiàng)目列表前導(dǎo)符設(shè)置示例2-2)定義列表<dl>基本語法

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

最多使用256種顏色，最適合顯示色調(diào)不連續(xù)或具有大面積單一顏色的圖像，如站點(diǎn)圖標(biāo)、導(dǎo)航條等。-

JPEG（JoinPhotographGraphic，聯(lián)合圖像專家組標(biāo)準(zhǔn))

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

PNG（PortableNetworkGraphics，可移植網(wǎng)絡(luò)圖形）

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

<img

src=“file_name”>常用屬性

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

溫馨提示

  • 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)論