Html基礎入門（二）

07-05

【編輯網頁】一、常見Html標籤1、<html>...</html> 表示此文本文件是網頁超文本格式，也即Html格式。2、<head>...</head> 在 <html> 後面，表示超文本文件的頭信息，如作者、標題等。3、<body>...</body> 在 <head> 後面，這是網頁的內容區域，如文字等。4、<p>...</p> 表示一個自然段，裡面內容單獨成一個段落。5、<span>...</span> 表示一段文字區域，比如要加顏色或改變字體。另外還有Div標籤，也是指定一個區域，div 和 span 標籤都可以用來指定樣式，div 的作用範圍較大，可以是一塊區域。6、<font>...</font> 文字格式標籤，比如顏色、字體、字型大小等。7、網頁舉例：<html>——第一行 <html> 表示這個是網頁文件。<head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title>黃玫瑰</title></head>——第二段 <head>..</head> 是網頁的摘要信息，字元編碼，標題，也就是標題。<body>別落淚所有的花兒你最美受了傷別傷悲</body>——第三段 <body>..</body> 是網頁正文部分，網頁內容都寫在這裡。</html> ——最後的 </html> 表示網頁結束，一般每個標籤是成對的，有一個帶斜杠的 </..> 標籤來關閉它，如果不成對就在最後的尖括弧前面加一個斜杠，如 <meta ... /> 和 <br />。二、背景色的設置背景包括圖片和顏色。下面是背景色和圖片的設置代碼：<body style="background-color:#ccffff;">——這是一種淺藍的顏色。<body style="background-image:url(圖片地址);">三、文字對齊代碼如下：<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">用以說明主頁製作所使用的文字以及語言；<title>網頁編輯</title></head><body style="color:green;background-color:#ccffff;"><p style="text-align:left;">古詩二首</p>——text-align 是對齊的樣式，冒號後面的單詞對應對齊方向，left 是左對齊、center 是居中對齊、right 是右對齊；<p style="text-align:center;">畫</p><p style="text-align:center;">遠看山有色，近聽水無聲。</p><p style="text-align:center;">春去花還在，人來鳥不驚。</p><p style="text-align:right;">作者：王維</p></body></html>四、<div>標籤在上面代碼里<body style="color:green;background-color:#ccffff;">的下面輸入<div>標籤代碼：<div style="border: #92b0dd 1px solid;">border 屬性顯示一個是邊框，冒號後面是顏色、粗細和實線，用空格分開。這個邊框默認跟隨窗口的大小，我們可以固定它的大小，繼續輸入：<div style="border: #92b0dd 1px solid; width:300px; height:200;">這裡的 width 是寬度，height 是高度，寫的時候細心。內邊距：默認文字是貼著左右邊框，可以在 div 中設定，繼續輸入下面的內容；<div style="border:#92b0dd 1px solid; width:300px; height:200; padding-left:20px; padding-right:20px;">後面的 padding 是內邊距，後面的單詞是各個邊，這裡只設定了左右，還有上下 top 和 bottom。外邊距：這是 div 邊框跟外面元素的距離，單獨的 div 是跟窗口邊框的邊距，就像是書本的頁邊距，接著輸入下面的內容；<div style="border:#92b0dd 1px solid; width:300px; height:200; padding-left:20px; padding-right:20px; margin-top:20px;">這兒的 margin 是外邊距，距離外面邊框的距離，這兒只設定了上邊距 top，其他的根據需要也可以設定；可以看出，<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">古詩二首</p><p style="TEXT-ALIGN: center">畫</p><p style="TEXT-ALIGN: center">遠看山有色，近聽水無聲。</p><p style="TEXT-ALIGN: center">春去花還在，人來鳥不驚。</p><p style="TEXT-ALIGN: right">作者：王維</p></div>效果如下：古詩二首畫遠看山有色，近聽水無聲。春去花還在，人來鳥不驚。作者：王維五、<div>布局默認 div 佔據一行，第二個 div 到下一行去，怎樣用 div 進行分欄布局呢？1）在 <body> 下面加一個 <div> 標籤，作為主框架，在標籤里加入下面的樣式。<div id="container" style="background:#ccffff; border:green 1px solid; padding:2px; width:604px; height:202px;">2）前面的 id 是這個 div 的標識符，用來標記這個 div 容器，在裡面的樣式里設置了顏色、邊框、內邊距，設定了固定寬度 604，高度 202，這個可以計算出來，根據下面兩列的寬度再加上內邊距。3）修改裡面的古詩的 div 樣式，加上背景色、去掉內外邊距，最後加上一個左浮動 float:left<div style="background:orange; border:#92b0dd 1px solid; width:300px; height:200; float:left;">4）在這個 </div> 後面，再加上另一個 div，樣式相同，裡面輸入另一首古詩；<div style="background:blue; border:#92b0dd 1px solid; width:300px; height:200; float:left;"><p style="text-align:left;">古詩二首</p><p style="text-align:center;">絕句</p><p style="text-align:center;">兩個黃鸝鳴翠柳，一行白鷺上青天。</p><p style="text-align:center;">窗含西嶺千秋雪，門泊東吳萬里船。</p><p style="text-align:right;">作者：杜甫</p></div>這兒的 float:left; 讓這個 div 框，跟上一個框並排左對齊，而不是到下一行去。這樣修改後的代碼如下：<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">古詩二首</p><p style="TEXT-ALIGN: center">畫</p><p style="TEXT-ALIGN: center">遠看山有色，近聽水無聲。</p><p style="TEXT-ALIGN: center">春去花還在，人來鳥不驚。</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;">古詩二首</p><p style="text-align:center;">絕句</p><p style="text-align:center;">兩個黃鸝鳴翠柳，一行白鷺上青天。</p><p style="text-align:center;">窗含西嶺千秋雪，門泊東吳萬里船。</p><p style="text-align:right;">作者：杜甫</p></div></div>效果應該是：古詩二首畫遠看山有色，近聽水無聲。春去花還在，人來鳥不驚。作者：王維古詩二首絕句兩個黃鸝鳴翠柳，一行白鷺上青天。窗含西嶺千秋雪，門泊東吳萬里船。作者：杜甫六、ul列表對於排列有序的條目，可以使用列表來實現。也就是建立目錄，實現超鏈接。1、在 <body> 後面接著輸入下面的代碼：<ul><li><a href="lx1.html">玫瑰心情<a></li><li><a href="lx2.html">牡丹姿態<a></li><li><a href="lx3.html">蘭菊氣質<a></li></ul>這裡的 <ul> 建立一個列表，裡面的各個 <li> 是列表項，各個列表項排列對齊縮進，前面有一個圓點列表符號。<a>是超鏈接代碼。效果是：玫瑰心情牡丹姿態蘭菊氣質 2、如果要去掉前面的圓點，可以在 ul 的樣式里設定，前面的縮進也可以設定內邊距為 0，輸入下面的代碼；<ul style="list-style-type:none; padding:0px;"><li><a href="lx1.html">玫瑰心情<a></li><li><a href="lx2.html">牡丹姿態<a></li><li><a href="lx3.html">蘭菊氣質<a></li></ul>看一下效果：玫瑰心情牡丹姿態蘭菊氣質 3、如果要排列成橫向水平的菜單樣式，可以在每個列表項里加上 float 屬性，防止重疊再設定一個寬度，代碼如下；<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">牡丹姿態<a></li><li style="float:left; width:100px;"><a href="lx3.html">蘭菊氣質<a></li></ul>效果是：玫瑰心情牡丹姿態蘭菊氣質【文字移動】1、打開記事本，在工作區中輸入下列內容，也可以複製一下，裡面的漢字可以自己修改：<marquee width_="400" height="50" direction="left"這兒的marqee就是移動標籤，width和height是區域，效果應該是：別落淚，所有的花兒你最美2、按兩下回車鍵，接著輸入下列內容，或者複製一下也可以：<marquee width_="400" height="50" direction="right"> <font color="royalblue">別讓我看見你的傷悲，我會為她心碎 </font> </marquee>marquee後面的direction是移動方向，這兒是右，效果應該是：別讓我看見你的傷悲，我會為她心碎3、再按兩下回車鍵繼續輸入下面內容；<marquee width_="400" height="50" direction="up" scrollamount="2"> <font color="royalblue"><p>即使告別了春天陽光</p><p>你依然要開放</p></font> </marquee>這兒的scrollamount是速度，也可以減慢一些，效果是：即使告別了春天陽光你依然要開放【表格使用】1）同樣打開記事本，在工作區中輸入下列內容：<table id="t1" style="width: 200px; height:50px" border="1"><tr><td>第一行</td></tr><tr><td>第二行</td></tr><tr><td>第三行</td></tr></table>這是一個三行的表格，裡面的tr就是行標記，table是表格，id是編號，border是邊框，效果應該是：第一行第二行第三行2）按兩下回車鍵，接著輸入下列內容，在網上找一張圖片，把地址粘上去。<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>愛</td></tr><tr><td>你</td></tr></table>這裡面的position是表格位置，這兒是相對於窗口，left是左邊距，top是頂邊距，這兒都是貼著窗口。效果應該是：我愛你【製作音畫貼】打開記事本，在工作區輸入下面的代碼：<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=#000000background=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> </div>——以上是大的邊框。<div align=center> </div><div align=center><strong><font face=楷體_GB2312 color=#ce0000 size=7>黃玫瑰</font></strong> </div>——這是標題。<div align=center>在一上</div><div align=center> </div><div align=center><font color=#dddddd size=5></font> </div><div align=center><font color=#dddddd size=5><center><img src="border=0></center>——這是圖片。<div align=center> <br><br><table id=t2 style="WIDTH: 300px" borderColor=#4169e1 height=360width_=540 align=centerbackground=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=楷體_gb2312color=#ff5809><strong>——從這到以下是文字，即歌詞的設置。<p>黃玫瑰<br>演唱:烏蘭托婭</p><br>別落淚<br>所有的花兒你最美<br>受了傷<br>別傷悲<br>別讓淚珠濕花蕊<br><br><br>別讓我看見你的傷悲<br>我會為她心碎<br>別問自己對不對<br>心中有愛就很美<br>即使告別了春天陽光<br>你依然要開放<br>別害怕<br>別犯傻<br>別輕易剪去長發<br>我會站在你的身旁<br>給你依靠的肩膀<br>別說話<br>微笑吧<br>回頭是燦爛的霞<br>我默默的祝福你<br>感覺到了嗎<br>海角天涯<br>哪裡不是你的家<br>別怕啊<br>別傻啊<br><br><br>哪裡都能開花<br>你應該知道你是那樣美<br>誰都會為你心醉<br>別再抱怨愛太累<br>真愛能有幾回</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_=300height=35 type=audio/x-pn-realaudio-plugin loop="-1" autostart="-1" volume="60"></p>——這是播放器。</div></font></div>——一下的部分是回應前面的，也就是結尾。</td></tr></tbody></table></font><div></div><div align=center> </div><div align=center> </div><div align=center> </div><div align=center> </div><div align=center> </div><div align=center> </div><div align=center> </div><div align=center> </div><div align=center> </div><div align=center> </div><div align=center> </div><div align=center> </div><div align=center> </div><div align=center> </div><div align=center> </div><div align=center> </div><div align=center> </div><div align=center> </div><div align=center> </div><div align=center> </div></td></tr></tbody></table></p></td></tr></tbody></table><p> </p></td></tr></tbody></table></div></dd></div>然後保存文件，保存時要注意，文件名的後綴一定要是「htnl」。找到文件打開它，效果應該是：黃玫瑰在一上

黃玫瑰演唱:烏蘭托婭別落淚所有的花兒你最美受了傷別傷悲別讓淚珠濕花蕊別讓我看見你的傷悲我會為她心碎別問自己對不對心中有愛就很美即使告別了春天陽光你依然要開放別害怕別犯傻別輕易剪去長發我會站在你的身旁給你依靠的肩膀別說話微笑吧回頭是燦爛的霞我默默的祝福你感覺到了嗎海角天涯哪裡不是你的家別怕啊別傻啊哪裡都能開花你應該知道你是那樣美誰都會為你心醉別再抱怨愛太累真愛能有幾回