上面的文字表達(dá)式可以解析為:<文字標(biāo)簽 文字顏色=“紅色” 字號(hào)=“7號(hào)” 字體=“華文行楷”>
還可以應(yīng)用css樣式表示,即:<font style="color: rgb(0, 0, 255); font-family: 黑體; font-size: 30px;">
<文字標(biāo)簽 css樣式=“文字顏色:十進(jìn)制顏色(藍(lán)色);字體:黑體;字號(hào):30px;”>
圖片標(biāo)簽解析:<圖片標(biāo)簽 路徑=“地址” 寬度=450 高度=673>
添加了標(biāo)題屬性與替代文本屬性的圖片標(biāo)簽:
圖片標(biāo)簽還可以添加邊框線的屬性:
圖片標(biāo)簽還可以添加對(duì)齊方式屬性: (DISPLAY: block屬性不可省略)
圖片標(biāo)簽還可以添加自定義鼠標(biāo)指針樣式:
圖片標(biāo)簽還可以添加外邊矩屬性:
上面的圖片標(biāo)簽添加了css的絕對(duì)定位樣式,要添加css的相對(duì)定位樣式,把a(bǔ)bsolute修改為 relative即可。
《第六節(jié)》段落標(biāo)簽的表達(dá)方式為:<p>要放置的內(nèi)容</p>。
一、設(shè)置了對(duì)齊方式的段落標(biāo)簽:
1、設(shè)置了“居左對(duì)齊”的段落標(biāo)簽:
<p align="left">這一段的文字是居左對(duì)齊</p>
2、設(shè)置了“居中對(duì)齊”的段落標(biāo)簽:
<p align="center" >我是居中對(duì)齊</p>
3、設(shè)置了“居右對(duì)齊”的段落標(biāo)簽:
<p align="right">我是居右對(duì)齊</p>
二、設(shè)置了寬度與高度的段落標(biāo)簽:
<P style="WIDTH: 620px; HEIGHT: 100px">“居左對(duì)齊”的段落標(biāo)簽,適用于普通文章的段落;“居中對(duì)齊”的段落標(biāo)簽,適用于文章的標(biāo)題,也適用于詩(shī)詞類(lèi)文章;“居右對(duì)齊”的段落標(biāo)簽,適用于文章中末尾的作者署名與寫(xiě)作日期。</P>
<P style="WIDTH: 620px; HEIGHT: 30px">“居左對(duì)齊”的段落標(biāo)簽,適用于普通文章的段落;“居中對(duì)齊”的段落標(biāo)簽,適用于文章的標(biāo)題,也適用于詩(shī)詞類(lèi)文章;“居右對(duì)齊”的段落標(biāo)簽,適用于文章中末尾的作者署名與寫(xiě)作日期。</P>
三、設(shè)置了背景顏色的段落標(biāo)簽:
<P style="BACKGROUND-COLOR: #ffffaa">我有米黃色的背景顏色了。</P>
首標(biāo)簽解析:<段落標(biāo)簽 css樣式=“背景顏色:米黃色”>
四、設(shè)置了背景顏色和外邊距的段落標(biāo)簽:
<P style="BACKGROUND-COLOR: #ffffaa; MARGIN: 30px">我有米黃色背景顏色和30px的外邊距</P>
五、設(shè)置了首行縮進(jìn)的段落標(biāo)簽:<P style="TEXT-INDENT: 2em">這是一段文字,首行文字空了兩格。為什么空了兩格呢?因?yàn)樵O(shè)置了首行縮進(jìn)的樣式。你看看這段代碼:TEXT-INDENT: 2em就知道了,這就是首行空兩格的代碼。</P>首標(biāo)簽解析:<段落標(biāo)簽 css樣式=“文字首行縮進(jìn):2em”> 這里的2em,可以理解為:兩個(gè)文字的寬度。
首標(biāo)簽解析:<段落標(biāo)簽 css樣式=“背景顏色:米黃色;外邊距:30px”>
六、設(shè)置了滾動(dòng)條的段落標(biāo)簽:
<P style="WIDTH: 400px; HEIGHT: 100px; OVERFLOW: auto">文章內(nèi)容</P>首標(biāo)簽解析:<段落標(biāo)簽 css樣式=“寬度:400px;高度:100px;OVERFLOW: auto代碼即為:設(shè)置滾動(dòng)條”>
七、設(shè)置了邊框線的段落標(biāo)簽:
<P style="BORDER-BOTTOM: rgb(153,253,255) 4px solid; BORDER-LEFT: rgb(153,253,255) 4px solid; BORDER-TOP: rgb(153,253,255) 4px solid; BORDER-RIGHT: rgb(153,253,255) 4px solid">這次改編,修正了《代碼入門(mén)教程》中錯(cuò)誤的地方,融入了新的心得體會(huì),力求通俗易懂,實(shí)用性強(qiáng)。特別是在教程中加大了應(yīng)用舉例的筆墨力度,并附有比較詳細(xì)的解析說(shuō)明。 </P>首標(biāo)簽解析:<段落標(biāo)簽 css樣式=“下邊框:十進(jìn)制顏色(紅色值為153,綠色值為253,藍(lán)色值為255)邊框線寬度為4px 邊框線樣式為實(shí)心線;左邊框:十進(jìn)制顏色(紅色值為153,綠色值為253,藍(lán)色值為255)邊框線寬度為4px 邊框線樣式為實(shí)心線;上邊框:十進(jìn)制顏色(紅色值為153,綠色值為253,藍(lán)色值為255)邊框線寬度為4px 邊框線樣式為實(shí)心線;右邊框:十進(jìn)制顏色(紅色值為153,綠色值為253,藍(lán)色值為255)邊框線寬度為4px 邊框線樣式為實(shí)心線;”>
八、設(shè)置了背景圖片的段落標(biāo)簽:
<p style="BORDER-BOTTOM: red 5px solid; BORDER-LEFT: red 5px solid; BACKGROUND: url(http://image57.360doc.com/DownloadImg/2012/11/2721/28522705_2.jpg); BORDER-TOP: red 5px solid; BORDER-RIGHT: red 5px solid">這次改編,修正了《代碼入門(mén)教程》中錯(cuò)誤的地方,融入了新的心得體會(huì),力求通俗易懂,實(shí)用性強(qiáng)。特別是在教程中加大了應(yīng)用舉例的筆墨力度,并附有比較詳細(xì)的解析說(shuō)明。</p>
九、設(shè)置了豎排版樣式的段落標(biāo)簽:
<P style="WRITING-MODE: tb-rl; WIDTH: 200px; HEIGHT: 350px">這次改編,修正了《代碼入門(mén)教程》中錯(cuò)誤的地方,融入了新的心得體會(huì),力求通俗易懂,實(shí)用性強(qiáng)。特別是在教程中加大了應(yīng)用舉例的筆墨力度,并附有比較詳細(xì)的解析說(shuō)明。</P>
首標(biāo)簽解析:<段落標(biāo)簽 css樣式=“排版樣式:豎排版;寬度:200px;高度:350px”>
十、設(shè)置了絕對(duì)定位樣式與背景顏色的段落標(biāo)簽:
<P style="POSITION: absolute; BACKGROUND-COLOR: rgb(10,255,0); TOP: 100px; LEFT: 0px" >這次改編,修正了《代碼入門(mén)教程》中錯(cuò)誤的地方,融入了新的心得體會(huì),力求通俗易懂,實(shí)用性強(qiáng)。特別是在教程中加大了應(yīng)用舉例的筆墨力度,并附有比較詳細(xì)的解析說(shuō)明。</P>
首標(biāo)簽解析:<段落標(biāo)簽 css樣式=“定位方式:絕對(duì)定位;背景顏色:十進(jìn)制顏色(紅色值10,綠色值255,藍(lán)色值0);居上:100px;居左:0px”>
十一、設(shè)置了諸多文字屬性的段落標(biāo)簽:
<p style="width: 99%; color: rgb(0, 200, 0); line-height: 150%; letter-spacing: 10px; font-family: 黑體; font-size: 26pt; filter: glow(color=yelow, strength=5);" >這次改編,修正了《代碼入門(mén)教程》中錯(cuò)誤的地方,融入了新的心得體會(huì),力求通俗易懂,實(shí)用性強(qiáng)。特別是在教程中加大了應(yīng)用舉例的筆墨力度,并附有比較詳細(xì)的解析說(shuō)明。</P>
首標(biāo)簽解析:<段落標(biāo)簽 css樣式=“寬度:99%;文字顏色:十進(jìn)制顏色(綠色);行高:150%;字距:10px;字體:黑體;字號(hào):26pt;濾鏡:光暈濾鏡(顏色=黃色,強(qiáng)度=5);”>
《第七節(jié)》制作文字網(wǎng)頁(yè)時(shí),常常把塊區(qū)標(biāo)簽與文字標(biāo)簽組合起來(lái)應(yīng)用:
1、制作“居左對(duì)齊”的文字,應(yīng)使用:
<div align="left"><font style="color: rgb(0, 0, 255); font-family: 黑體; font-size: 20px;">文字內(nèi)容</font></div>
2、制作“居中對(duì)齊”的文字,應(yīng)使用:
<div align="center"><font style="color: rgb(0, 0, 255); font-family: 黑體; font-size: 20px;">文字內(nèi)容</font></div>
3、制作“居右對(duì)齊”的文字,應(yīng)使用:
<div align="right"><font style="color: rgb(0, 0, 255); font-family: 黑體; font-size: 20px;">文字內(nèi)容</font></div>
制作圖片網(wǎng)頁(yè)時(shí),則只用塊區(qū)標(biāo)簽就可以了。
這是“居左對(duì)齊”的圖片代碼:
<div align="left">
這是“居中對(duì)齊”的圖片代碼:
<div align="center">
<img title="漂亮美女人人愛(ài)" alt="“春天沒(méi)來(lái)”歡迎您" src="http://userimage4.360doc.com/13/0719/23/9331441_201307192326360071.jpg">
</div>
這是“居右對(duì)齊”的圖片代碼:
<div align="right">
1、幾個(gè)段落標(biāo)簽連用,各段文字自成一段,瀏覽器會(huì)在各段之間留出兩行的空白區(qū)域。舉例如下:
<P style="TEXT-INDENT: 2em; FONT-SIZE: 22px" color="#000000">這些文字使用的都是段落標(biāo)簽,各段文字自成一段,瀏覽器會(huì)在各段之間留出兩行的空白區(qū)域。你觀察一下,我們之間的空白區(qū)域是否是兩行呢?</P>
<P style="TEXT-INDENT: 2em; FONT-SIZE: 22px" color="#000000">這些文字使用的都是段落標(biāo)簽,各段文字自成一段,瀏覽器會(huì)在各段之間留出兩行的空白區(qū)域。你觀察一下,我們之間的空白區(qū)域是否是兩行呢?</P>
<P style="TEXT-INDENT: 2em; FONT-SIZE: 22px" color="#000000">這些文字使用的都是段落標(biāo)簽,各段文字自成一段,瀏覽器會(huì)在各段之間留出兩行的空白區(qū)域。你觀察一下,我們之間的空白區(qū)域是否是兩行呢?</P>
2、幾個(gè)塊區(qū)標(biāo)簽連用,各段文字自成一段,瀏覽器會(huì)在各段之間留出一行的空白區(qū)域。舉例如下:
<DIV style="TEXT-INDENT: 2em; FONT-SIZE: 22px" color="#000000"> 這些文字使用的都是塊區(qū)標(biāo)簽,各段文字自成一段,瀏覽器會(huì)在各段文字之間留出一行的空白區(qū)域。你觀察一下,我們之間的空白區(qū)域是否是一行呢? </DIV>
<DIV style="TEXT-INDENT: 2em; FONT-SIZE: 22px" color="#000000">這些文字使用的都是塊區(qū)標(biāo)簽,各段文字自成一段,瀏覽器會(huì)在各段文字之間留出一行的空白區(qū)域。你觀察一下,我們之間的空白區(qū)域是否是一行呢?</DIV>
<DIV style="TEXT-INDENT: 2em; FONT-SIZE: 22px" color="#000000">這些文字使用的都是塊區(qū)標(biāo)簽,各段文字自成一段,瀏覽器會(huì)在各段文字之間留出一行的空白區(qū)域。你觀察一下,我們之間的空白區(qū)域是否是一行呢?</DIV>
3、幾個(gè)行內(nèi)塊區(qū)標(biāo)簽連用,瀏覽器只會(huì)分行,不能分段,各個(gè)行內(nèi)塊區(qū)之間沒(méi)有空行。舉例如下:
<SPAN style="TEXT-INDENT: 2em; FONT-SIZE: 22px" color="#000000">這些文字使用的都是行內(nèi)塊區(qū)標(biāo)簽,瀏覽器不給我們分段了。你觀察一下,我們都跑到一個(gè)段落中了。</SPAN><SPAN style="TEXT-INDENT: 2em; FONT-SIZE: 22px" color="#000000">這些文字使用的都是行內(nèi)塊區(qū)標(biāo)簽,瀏覽器不給我們分段了。你觀察一下,我們都跑到一個(gè)段落中了。</SPAN><SPAN style="TEXT-INDENT: 2em; FONT-SIZE: 22px" color="#000000">這些文字使用的都是行內(nèi)塊區(qū)標(biāo)簽,瀏覽器不給我們分段了。你觀察一下,我們都跑到一個(gè)段落中了。</SPAN>
制作文字網(wǎng)頁(yè)。設(shè)置的標(biāo)簽代碼如下:
<DIV style="TEXT-INDENT: 2em" ><FONT style="FONT-SIZE: 22px" color=#00ff00>2</FONT></DIV>
在代碼編輯頁(yè)面,把這一小段代碼“粘貼”了若干次,每一小段代碼所控制的文字內(nèi)容,只是一個(gè)數(shù)字“2”(你也可以改用任意的數(shù)字、字母或者文字),然后,切換到“文字圖片編輯”頁(yè)面中,“刪除”掉這個(gè)數(shù)字“2”,輸入你的文章內(nèi)容。
如果你想制作“居中對(duì)齊”的文字段落時(shí),你就把style="TEXT-INDENT: 2em"替換為:align="center"
如果你想制作“居右對(duì)齊”的文字段落時(shí),你就把style="TEXT-INDENT: 2em"替換為:align="right"
要放入圖片的地方,使用下面的代碼即可(只需替換圖片標(biāo)簽):
《第八節(jié)》1、向左移動(dòng)的文字代碼:
<MARQUEE><FONT style="FONT-FAMILY: 黑體; COLOR: rgb(0,0,255); FONT-SIZE: 25px">這是向左移動(dòng)的文字</FONT></MARQUEE>或者:
<MARQUEE direction=left><FONT style="FONT-FAMILY: 黑體; COLOR: rgb(0,0,255); FONT-SIZE: 25px">這是向左移動(dòng)的文字</FONT></MARQUEE>
<MARQUEE direction=right><FONT style="FONT-FAMILY: 黑體; COLOR: rgb(0,0,255); FONT-SIZE: 25px">這是向右移動(dòng)的文字</FONT></MARQUEE>
<MARQUEE direction=up><FONT style="FONT-FAMILY: 黑體; COLOR: rgb(0,0,255); FONT-SIZE: 25px">這是向上移動(dòng)的文字</FONT></MARQUEE>
<MARQUEE direction=down><FONT style="FONT-FAMILY: 黑體; COLOR: rgb(0,0,255); FONT-SIZE: 25px">這是向下移動(dòng)的文字</FONT></MARQUEE>
<MARQUEE scrollAmount=1><FONT style="FONT-FAMILY: 黑體; COLOR: rgb(0,0,255); FONT-SIZE: 25px">我的移動(dòng)速度為1</FONT></MARQUEE>
<MARQUEE scrollAmount=10><FONT style="FONT-FAMILY: 黑體; COLOR: rgb(0,0,255); FONT-SIZE: 25px">我的移動(dòng)速度為10</FONT></MARQUEE>
<MARQUEE scrollAmount=15 scrollDelay=800><FONT style="FONT-FAMILY: 黑體; COLOR: rgb(0,0,255); FONT-SIZE: 25px">我的移動(dòng)速度為15,為什么我還是跑得這樣慢呢?</FONT></MARQUEE>
<marquee direction="left" height="150" width="480" scrollAmount="3" scrollDelay="10"><FONT style="FONT-FAMILY: 黑體; COLOR: rgb(0,0,255); FONT-SIZE: 25px">世上無(wú)難事 只怕有心人</FONT></MARQUEE>