国产一级a片免费看高清,亚洲熟女中文字幕在线视频,黄三级高清在线播放,免费黄色视频在线看

打開(kāi)APP
userphoto
未登錄

開(kāi)通VIP,暢享免費(fèi)電子書(shū)等14項(xiàng)超值服

開(kāi)通VIP
Html基礎(chǔ)入門(mén)(二)
【編輯網(wǎng)頁(yè)】
一、常見(jiàn)Html標(biāo)簽
1、<html>...</html> 表示此文本文件是網(wǎng)頁(yè)超文本格式,也即Html格式。
2、<head>...</head> 在 <html> 后面,表示超文本文件的頭信息,如作者、標(biāo)題等。
3、<body>...</body> 在 <head> 后面,這是網(wǎng)頁(yè)的內(nèi)容區(qū)域,如文字等。
4、<p>...</p> 表示一個(gè)自然段,里面內(nèi)容單獨(dú)成一個(gè)段落。
5、<span>...</span> 表示一段文字區(qū)域,比如要加顏色或改變字體。另外還有Div標(biāo)簽,也是指定一個(gè)區(qū)域,div 和 span 標(biāo)簽都可以用來(lái)指定樣式,div 的作用范圍較大,可以是一塊區(qū)域。
6、<font>...</font> 文字格式標(biāo)簽,比如顏色、字體、字號(hào)等。
7、網(wǎng)頁(yè)舉例:
<html>——第一行 <html> 表示這個(gè)是網(wǎng)頁(yè)文件。
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>黃玫瑰</title>
</head>——第二段 <head>..</head> 是網(wǎng)頁(yè)的摘要信息,字符編碼,標(biāo)題,也就是標(biāo)題。
<body>
別落淚 所有的花兒你最美 受了傷 別傷悲
</body>——第三段 <body>..</body> 是網(wǎng)頁(yè)正文部分,網(wǎng)頁(yè)內(nèi)容都寫(xiě)在這里。
</html> ——最后的 </html> 表示網(wǎng)頁(yè)結(jié)束,一般每個(gè)標(biāo)簽是成對(duì)的,有一個(gè)帶斜杠的 </..> 標(biāo)簽來(lái)關(guān)閉它,如果不成對(duì)就在最后的尖括號(hào)前面加一個(gè)斜杠,如 <meta ... /> 和 <br />。
二、背景色的設(shè)置
背景包括圖片和顏色。下面是背景色和圖片的設(shè)置代碼:
<body style="background-color:#ccffff;">——這是一種淺藍(lán)的顏色。
<body style="background-image:url(圖片地址);">
三、文字對(duì)齊
代碼如下:
<Html>
<head>
<meta http:equiv="content-type";conten="text/html;charset=utf-8">——<meta http-equiv="Content-Type" contect="text/html";charset=gb_23 12-80"> 和 <meta http-equiv="Content-Language" contect="zh-CN">用以說(shuō)明主頁(yè)制作所
使用的文字以及語(yǔ)言;
<title>網(wǎng)頁(yè)編輯</title>
</head>
<body  style="color:green;background-color:#ccffff;">
<p style="text-align:left;">古詩(shī)二首</p>——text-align 是對(duì)齊的樣式,冒號(hào)后面的單詞對(duì)應(yīng)對(duì)齊方向,left 是左對(duì)齊、center 是居中對(duì)齊、right 是右對(duì)齊;
<p style="text-align:center;">畫(huà)</p>
<p style="text-align:center;">遠(yuǎn)看山有色,近聽(tīng)水無(wú)聲。</p>
<p style="text-align:center;">春去花還在,人來(lái)鳥(niǎo)不驚。</p>
<p style="text-align:right;">作者:王維</p>
</body></html>
四、<div>標(biāo)簽
在上面代碼里<body  style="color:green;background-color:#ccffff;">的下面輸入<div>標(biāo)簽代碼:
<div style="border: #92b0dd 1px solid;">
border 屬性顯示一個(gè)是邊框,冒號(hào)后面是顏色、粗細(xì)和實(shí)線,用空格分開(kāi)。
這個(gè)邊框默認(rèn)跟隨窗口的大小,我們可以固定它的大小,繼續(xù)輸入:
<div style="border: #92b0dd 1px solid; width:300px; height:200;">
這里的 width 是寬度,height 是高度,寫(xiě)的時(shí)候細(xì)心。內(nèi)邊距:默認(rèn)文字是貼著左右邊框,可以在 div 中設(shè)定,繼續(xù)輸入下面的內(nèi)容;
<div style="border:#92b0dd 1px solid; width:300px; height:200; padding-left:20px; padding-right:20px;">
后面的 padding 是內(nèi)邊距,后面的單詞是各個(gè)邊,這里只設(shè)定了左右,還有上下 top 和 bottom。外邊距:這是 div 邊框跟外面元素的距離,單獨(dú)的 div 是跟窗口邊框的邊距,就像是書(shū)本的頁(yè)邊距,接著輸入下面的內(nèi)容;
<div style="border:#92b0dd 1px solid; width:300px; height:200; padding-left:20px; padding-right:20px; margin-top:20px;">
這兒的 margin 是外邊距,距離外面邊框的距離,這兒只設(shè)定了上邊距 top,其他的根據(jù)需要也可以設(shè)定;
可以看出,<div>與<table>(表格)相似。
這樣上面的代碼就是下面的樣子了:
<meta ;conten="text/html;charset=utf-8" http:equiv="content-type">
<div style="BORDER-RIGHT: #92b0dd 1px solid; PADDING-RIGHT: 20px; BORDER-TOP: #92b0dd 1px solid; MARGIN-TOP: 20px; PADDING-LEFT: 20px; BORDER-LEFT: #92b0dd 1px solid; WIDTH: 300px; BORDER-BOTTOM: #92b0dd 1px solid; HEIGHT: 200px">
<p style="TEXT-ALIGN: left">古詩(shī)二首</p>
<p style="TEXT-ALIGN: center">畫(huà)</p>
<p style="TEXT-ALIGN: center">遠(yuǎn)看山有色,近聽(tīng)水無(wú)聲。</p>
<p style="TEXT-ALIGN: center">春去花還在,人來(lái)鳥(niǎo)不驚。</p>
<p style="TEXT-ALIGN: right">作者:王維</p>
</div>
效果如下:
古詩(shī)二首
畫(huà)
遠(yuǎn)看山有色,近聽(tīng)水無(wú)聲。
春去花還在,人來(lái)鳥(niǎo)不驚。
作者:王維
五、<div>布局
默認(rèn) div 占據(jù)一行,第二個(gè) div 到下一行去,怎樣用 div 進(jìn)行分欄布局呢?
1)在 <body> 下面加一個(gè) <div> 標(biāo)簽,作為主框架,在標(biāo)簽里加入下面的樣式。
<div id="container" style="background:#ccffff; border:green 1px solid; padding:2px; width:604px; height:202px;">
2)前面的 id 是這個(gè) div 的標(biāo)識(shí)符,用來(lái)標(biāo)記這個(gè) div 容器,在里面的樣式里設(shè)置了顏色、邊框、內(nèi)邊距,設(shè)定了固定寬度 604,高度 202,這個(gè)可以計(jì)算出來(lái),根據(jù)下面兩列的寬度再加上內(nèi)邊距。
3)修改里面的古詩(shī)的 div 樣式,加上背景色、去掉內(nèi)外邊距,最后加上一個(gè)左浮動(dòng) float:left
<div style="background:orange; border:#92b0dd 1px solid; width:300px; height:200; float:left;">
4)在這個(gè) </div> 后面,再加上另一個(gè) div,樣式相同,里面輸入另一首古詩(shī) ;
<div style="background:blue; border:#92b0dd 1px solid; width:300px; height:200; float:left;">
<p style="text-align:left;">古詩(shī)二首</p>
<p style="text-align:center;">絕句</p>
<p style="text-align:center;">兩個(gè)黃鸝鳴翠柳,一行白鷺上青天。</p>
<p style="text-align:center;">窗含西嶺千秋雪,門(mén)泊東吳萬(wàn)里船。</p>
<p style="text-align:right;">作者:杜甫</p>
</div>
這兒的 float:left; 讓這個(gè) div 框,跟上一個(gè)框并排左對(duì)齊,而不是到下一行去。
這樣修改后的代碼如下:
<body  style="color:green;background-color:#ccffff;">
<div id="container" style="background:#ccffff; border:green 1px solid; padding:2px; width:604px; height:202px;">
<div style="background:orange; border:#92b0dd 1px solid; width:300px; height:200; float:left;">
<p style="TEXT-ALIGN: left">古詩(shī)二首</p>
<p style="TEXT-ALIGN: center">畫(huà)</p>
<p style="TEXT-ALIGN: center">遠(yuǎn)看山有色,近聽(tīng)水無(wú)聲。</p>
<p style="TEXT-ALIGN: center">春去花還在,人來(lái)鳥(niǎo)不驚。</p>
<p style="TEXT-ALIGN: right">作者:王維</p>
</div>
<div style="background:blue; border:#92b0dd 1px solid; width:300px; height:200; float:left;">
<p style="text-align:left;">古詩(shī)二首</p>
<p style="text-align:center;">絕句</p>
<p style="text-align:center;">兩個(gè)黃鸝鳴翠柳,一行白鷺上青天。</p>
<p style="text-align:center;">窗含西嶺千秋雪,門(mén)泊東吳萬(wàn)里船。</p>
<p style="text-align:right;">作者:杜甫</p>
</div>
</div>
效果應(yīng)該是:
古詩(shī)二首
畫(huà)
遠(yuǎn)看山有色,近聽(tīng)水無(wú)聲。
春去花還在,人來(lái)鳥(niǎo)不驚。
作者:王維
古詩(shī)二首
絕句
兩個(gè)黃鸝鳴翠柳,一行白鷺上青天。
窗含西嶺千秋雪,門(mén)泊東吳萬(wàn)里船。
作者:杜甫
六、ul列表
對(duì)于排列有序的條目,可以使用列表來(lái)實(shí)現(xiàn)。也就是建立目錄,實(shí)現(xiàn)超鏈接。
1、在 <body> 后面接著輸入下面的代碼:
<ul>
<li><a href="lx1.html">玫瑰心情<a></li>
<li><a href="lx2.html">牡丹姿態(tài)<a></li>
<li><a href="lx3.html">蘭菊氣質(zhì)<a></li>
</ul>
這里的 <ul> 建立一個(gè)列表,里面的各個(gè) <li> 是列表項(xiàng),各個(gè)列表項(xiàng)排列對(duì)齊縮進(jìn),前面有一個(gè)圓點(diǎn)列表符號(hào)。<a>是超鏈接代碼。
效果是:
玫瑰心情 牡丹姿態(tài) 蘭菊氣質(zhì) 2、如果要去掉前面的圓點(diǎn),可以在 ul 的樣式里設(shè)定,前面的縮進(jìn)也可以設(shè)定內(nèi)邊距為 0,輸入下面的代碼;
<ul style="list-style-type:none; padding:0px;">
<li><a href="lx1.html">玫瑰心情<a></li>
<li><a href="lx2.html">牡丹姿態(tài)<a></li>
<li><a href="lx3.html">蘭菊氣質(zhì)<a></li>
</ul>
看一下效果:
玫瑰心情 牡丹姿態(tài) 蘭菊氣質(zhì)
3、如果要排列成橫向水平的菜單樣式,可以在每個(gè)列表項(xiàng)里加上 float 屬性,防止重疊再設(shè)定一個(gè)寬度,代碼如下;
<ul style="list-style-type:none; padding:0px;">
<li style="float:left; width:100px;"><a href="lx1.html">玫瑰心情<a></li>
<li style="float:left; width:100px;"><a href="lx2.html">牡丹姿態(tài)<a></li>
<li style="float:left; width:100px;"><a href="lx3.html">蘭菊氣質(zhì)<a></li>
</ul>
效果是:
玫瑰心情 牡丹姿態(tài) 蘭菊氣質(zhì)
【文字移動(dòng)】
1、打開(kāi)記事本,在工作區(qū)中輸入下列內(nèi)容,也可以復(fù)制一下,里面的漢字可以自己修改:
<marquee width="400" height="50" direction="left"這兒的marqee就是移動(dòng)標(biāo)簽,width和height是區(qū)域,效果應(yīng)該是:
別落淚,所有的花兒你最美
2、按兩下回車(chē)鍵,接著輸入下列內(nèi)容,或者復(fù)制一下也可以:
<marquee width="400" height="50" direction="right"> <font color="royalblue">別讓我看見(jiàn)你的傷悲,我會(huì)為她心碎 </font> </marquee>
marquee后面的direction是移動(dòng)方向,這兒是右,效果應(yīng)該是:
別讓我看見(jiàn)你的傷悲,我會(huì)為她心碎
3、再按兩下回車(chē)鍵繼續(xù)輸入下面內(nèi)容;
<marquee width="400" height="50" direction="up" scrollamount="2"> <font color="royalblue"><p>即使告別了春天陽(yáng)光</p><p>你依然要開(kāi)放</p></font> </marquee>
這兒的scrollamount是速度,也可以減慢一些,效果是:
即使告別了春天陽(yáng)光
你依然要開(kāi)放
【表格使用】
1)同樣打開(kāi)記事本,在工作區(qū)中輸入下列內(nèi)容:
<table id="t1" style="width: 200px; height:50px" border="1">
<tr>
<td>第一行</td>
</tr>
<tr>
<td>第二行</td>
</tr>
<tr>
<td>第三行</td>
</tr>
</table>
這是一個(gè)三行的表格,里面的tr就是行標(biāo)記,table是表格,id是編號(hào),border是邊框,效果應(yīng)該是:
第一行
第二行
第三行
2)按兩下回車(chē)鍵,接著輸入下列內(nèi)容,在網(wǎng)上找一張圖片,把地址粘上去。
<table id="t2" border="0" style="width: 450px; height:220px; position: relative; left: 0px; top: 0px" background="http://web07.cn/uploads/Photo/c100806/12Q064525F-54G2.jpg">
<tr>
<td>我</td>
</tr>
<tr>
<td>愛(ài)</td>
</tr>
<tr>
<td>你</td>
</tr>
</table>
這里面的position是表格位置,這兒是相對(duì)于窗口,left是左邊距,top是頂邊距,這兒都是貼著窗口。
效果應(yīng)該是:
愛(ài)
【制作音畫(huà)貼】
打開(kāi)記事本,在工作區(qū)輸入下面的代碼:
<div>
<dd style="PADDING-RIGHT: 2px; PADDING-LEFT: 2px; PADDING-BOTTOM: 2px; PADDING-TOP: 2px; TEXT-ALIGN: center">
<div class=Article_body id=changeBodyFont>
<meta content="MSHTML 6.00.2900.5945" name=GENERATOR>
<table style="WIDTH: 960px; BORDER-TOP-STYLE: dashed; BORDER-RIGHT-STYLE: dashed; BORDER-LEFT-STYLE: dashed; HEIGHT: 70px;
BORDER-BOTTOM-STYLE: dashed" borderColor=#000000 cellSpacing=0 cellPadding=0 width=980 align=center border=5>
<tbody>
<tr>
<td>
<p align=center>
<table borderColor=#000000 cellSpacing=0 cellPadding=0 width=980 align=center bgColor=#000000
background=http://image23.360doc.com/DownloadImg/2011/02/1710/9238556_2.jpg border=0>
<tbody>
<tr>
<td>
<table borderColor=#9f0f12 cellPadding=0 width=700 align=center bgColor=#000000 border=3>
<tbody>
<tr>
<td>
<div align=center>&nbsp;</div>——以上是大的邊框。
<div align=center>&nbsp;</div>
<div align=center><strong><font face=楷體_GB2312 color=#ce0000 size=7>黃玫瑰
</font></strong>&nbsp;</div>——這是標(biāo)題。
<div align=center>在一上</div>
<div align=center>&nbsp;</div>
<div align=center><font color=#dddddd size=5></font>&nbsp;</div>
<div align=center><font color=#dddddd size=5>
<center><img src="
border=0></center>——這是圖片。
<div align=center>&nbsp;<br><br>
<table id=t2 style="WIDTH: 300px" borderColor=#4169e1 height=360width=540 align=center
background=http://image23.360doc.com/DownloadImg/2011/02/1710/9238556_3.jpg border=0>——這是背景圖片。
<tbody>
<tr>
<td>
<marquee scrollAmount=1 direction=up height=200>
<p align=left><br><font style="FONT-SIZE: 25px" face=楷體_gb2312
color=#ff5809><strong>——從這到以下是文字,即歌詞的設(shè)置。
<p>黃玫瑰<br>演唱:烏蘭托婭</p>
<br>別落淚<br>所有的花兒你最美<br>受了傷<br>別傷悲<br>別讓淚珠濕花蕊
<br><br><br>別讓我看見(jiàn)你的傷悲<br>我會(huì)為她心碎<br>別問(wèn)自己對(duì)不對(duì)<br>心中有愛(ài)就很美<br>即使告別了春天陽(yáng)光<br>你依然要開(kāi)放<br>
別害怕<br>別犯傻<br>別輕易剪去長(zhǎng)發(fā)<br>我會(huì)站在你的身旁<br>給你依靠的肩膀<br>別說(shuō)話<br>微笑吧<br>回頭是燦爛的霞<br>我默默的祝
福你<br>感覺(jué)到了嗎<br>海角天涯<br>哪里不是你的家<br>別怕啊<br>別傻啊<br><br><br>哪里都能開(kāi)花<br>你應(yīng)該知道你是那樣美<br>誰(shuí)都
會(huì)為你心醉<br>別再抱怨愛(ài)太累<br>真愛(ài)能有幾回</strong><br><br></font>
<center></center></marquee></td>
</tr>
</tbody>
</table>
<p align=center><embed src=http://upload17.music.qzone.soso.com/30678023.mp3 width=300
height=35 type=audio/x-pn-realaudio-plugin loop="-1" autostart="-1" volume="60"></p>——這是播放器。
</div>
</font></div>——一下的部分是回應(yīng)前面的,也就是結(jié)尾。
</td>
</tr>
</tbody>
</table>
</font>
<div></div>
<div align=center>&nbsp;</div>
<div align=center>&nbsp;</div>
<div align=center>&nbsp;</div>
<div align=center>&nbsp;</div>
<div align=center>&nbsp;</div>
<div align=center>&nbsp;</div>
<div align=center>&nbsp;</div>
<div align=center>&nbsp;</div>
<div align=center>&nbsp;</div>
<div align=center>&nbsp;</div>
<div align=center>&nbsp;</div>
<div align=center>&nbsp;</div>
<div align=center>&nbsp;</div>
<div align=center>&nbsp;</div>
<div align=center>&nbsp;</div>
<div align=center>&nbsp;</div>
<div align=center>&nbsp;</div>
<div align=center>&nbsp;</div>
<div align=center>&nbsp;</div>
<div align=center>&nbsp;</div>
</td>
</tr>
</tbody>
</table>
</p>
</td>
</tr>
</tbody>
</table>
<p>&nbsp;</p>
</td>
</tr>
</tbody>
</table>
</div>
</dd></div>
然后保存文件,保存時(shí)要注意,文件名的后綴一定要是“htnl”。找到文件打開(kāi)它,效果應(yīng)該是:
黃玫瑰
在一上
黃玫瑰
演唱:烏蘭托婭
別落淚
所有的花兒你最美
受了傷
別傷悲
別讓淚珠濕花蕊
別讓我看見(jiàn)你的傷悲
我會(huì)為她心碎
別問(wèn)自己對(duì)不對(duì)
心中有愛(ài)就很美
即使告別了春天陽(yáng)光
你依然要開(kāi)放
別害怕
別犯傻
別輕易剪去長(zhǎng)發(fā)
我會(huì)站在你的身旁
給你依靠的肩膀
別說(shuō)話
微笑吧
回頭是燦爛的霞
我默默的祝福你
感覺(jué)到了嗎
海角天涯
哪里不是你的家
別怕啊
別傻啊
哪里都能開(kāi)花
你應(yīng)該知道你是那樣美
誰(shuí)都會(huì)為你心醉
別再抱怨愛(ài)太累
真愛(ài)能有幾回
本站僅提供存儲(chǔ)服務(wù),所有內(nèi)容均由用戶(hù)發(fā)布,如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請(qǐng)點(diǎn)擊舉報(bào)。
打開(kāi)APP,閱讀全文并永久保存 查看更多類(lèi)似文章
猜你喜歡
類(lèi)似文章
用代碼制作文字與圖片并用
制作透視窗格效果移動(dòng)圖文圖代碼
漂亮的文字制作(三)
音畫(huà)欣賞 水調(diào)歌頭《思》
文字在圖片上飄逸的代碼
巧用代碼制作對(duì)聯(lián)畫(huà)
更多類(lèi)似文章 >>
生活服務(wù)
分享 收藏 導(dǎo)長(zhǎng)圖 關(guān)注 下載文章
綁定賬號(hào)成功
后續(xù)可登錄賬號(hào)暢享VIP特權(quán)!
如果VIP功能使用有故障,
可點(diǎn)擊這里聯(lián)系客服!

聯(lián)系客服