|
Html基础入门（二）
【编辑网页】
一、常见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:///uploads/Photo/c100806/12Q064525F-54G2.jpg">
<tr> <td>我</td> </tr> <tr> <td>爱</td> </tr> <tr> <td>你</td> </tr> </table> 这里面的position是表格位置，这儿是相对于窗口，left是左边距，top是顶边距，这儿都是贴着窗口。
效果应该是：
【制作音画贴】
打开记事本，在工作区输入下面的代码： <div> BORDER-BOTTOM-STYLE: dashed" borderColor=#000000 cellSpacing=0 cellPadding=0 width=980 align=center border=5> background=http://image23.360doc.com/DownloadImg/2011/02/1710/9238556_2.jpg border=0> </font></strong> </div>——这是标题。 border=0></center>——这是图片。 background=http://image23.360doc.com/DownloadImg/2011/02/1710/9238556_3.jpg border=0>——这是背景图片。 color=#ff5809><strong>——从这到以下是文字，即歌词的设置。 <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> height=35 type=audio/x-pn-realaudio-plugin loop="-1" autostart="-1" volume="60"></p>——这是播放器。 然后保存文件，保存时要注意，文件名的后缀一定要是“htnl”。找到文件打开它，效果应该是：
|
|
|
