网页制作--标签，表格，表单，框架

网页三部份内容：HTML CSS Javascript 路径：一般做网页的时候用的相对路径。 images/aaa.jpg 网页同一个目录中找images文件夹，再在images里面找aaa.jpg images/1000/aaa.jpg 网页同一个目录中找images文件夹，再在images里面找1000文件夹，再在1000文件夹中找aaa.jpg ../images/aaa.jpg 找网页上一级文件，在网页上一级文件夹中找images文件夹，在images文件夹中找aaa.jpg ../../images/aaa.jpg 找网页上两级文件，在网页上两级文件夹中找images文件夹，在images文件夹中找aaa.jpg

一、body： bgcolor 背景颜色 background 背景图片 topmargin rightmargin bottommargin leftmargin body以上的属性仅做了解。

二、标签：（一）基本标签： 1.格式控制： <font face="字体名称" color="颜色" size="大小"></font> 字体 <b></b>加粗 <strong></strong> <i></i>倾斜 <em></em> <u></u>下划线 <br> 空格</br> <pre> 内容里面格式不变</pre>

<center>居中</center> 转义：——需要记住  ——空格 <——小于号 < >——大于号 > &——& © ——©

2.内容容器： <h1></h1> ...<h6></h6> ——标题。默认情况下，加粗，独立一行 <p></p> ——段落。独立一段，默认情况下，段落前后都会有一行大小的空白。

<div></div>——区域标签，层标签。用来划分网页区域，进行页布局。前后换行。 <span></span>——区域标签，层标签。前后不换行。

<ul></ul>——无序列表标签。 <ol></ol>——有序列表标签。 <li></li>——列表项标签，用来放在ol或ul里面的。

（二）常用标签： 1. 超链接 <a href="超链接的路径" target="_blank">超链接显示的内容</a> 书签：第一步：定义书签 <a name="书签名">内容</a> 第二步：定义超链接 <a href="页面名#书签名">超链接文字</a>

2.图片 <img src="路径（相对）" width="" height="" alt=""/>

3.图片超链接 <a href="超链接的路径"> <img src="图片路径"/> </a>

演示

<body bgcolor="#99CC33" >

<font color="#0066ff" face="华文行楷" size="5">字体控制 </font><!--注释--><br>
<b>字体加粗</b><br>
<i>字体倾斜</i><br>
<u>下划线</u><br>
<strong>加粗</strong><br>
<em>倾斜</em><br>
<center>居中</center><br>
回<br>车<br>
空&nbsp;格<br>
<br>
<br>

<h1>标题1</h1>
<h2>标题2</h2>
<h6>标题6</h6>
<p>段落1</p>
<p>段落<br>
2</p>

<font>第一种<div>层标签</div><font>
<font>第二种<span>层标签</span></font>

<ol type="I">有序列表
      <li>序号1</li>
       <li>序号2</li>
        <li>序号3</li>
</ol>
        <ul type="circle">无序列表
        <li>第一</li>
        <li>第二</li>
        <li>第三</li>
        </ul>
        <img src="images/1.gif"jpg" alt="这是一张图片" width="200"/><br>
<a href="http://www.baidu.com.cn"> <img src="images/0.gif"width="200"/> </a><br>
        <img src="images/5.gif" width="200"/><br>

（三）表格： <table></table> bgcolor：背景色。 align：表格在页面中的对齐方式。宽像素，百分比。 border：边框宽度 cellpadding：边距 cellspacing：间距

<tr></tr> bgcolor：背景色 align：这一行中的文字的对齐方式 height:高度，一般是像素，也可设百分比。

<td></td> bgcolor:背景色 align：水平对齐 valign：竖直对齐宽 height:高 colspan：列的跨度。 rowspan：行的跨度。注意：合并单元格的时候，一定要算好格好。

表的演示

<title>2015年1月16日NBA战况</title>
</head>

<body bgcolor="#FFFFFF" width="33%"  >
<table bgcolor="#000000" border="0" cellpadding="0" cellspacing="1">
<tr bgcolor="white" align="center">
<td>交战双方</td>
<td>比分</td>
<td>mvp</td>
<td>数据</td>
</tr>
<tr bgcolor="white" align="center">
<td colspan="2" width="25%">火箭vs雷霆112:101</td>

<td rowspan="2" width="25%">哈登<br>勒布朗詹姆斯</td>
<td width="25%">32分9篮板10助攻</td>
</tr>
<tr bgcolor="white" align="center">
<td>骑士vs湖人</td>
<td>109:102</td>

<td>36分5篮板6助攻</td>
</tr>

</table>
</body>
</html>

（四）表单： <form id="" name="" action="" method=""></form> 1.文本类单行文本框：<input id="" name="" type="text" value="内容"/> 多行文本框：<textarea id="" name="" rows="行数" cols="列数">内容</textarea> 密码框：<input id="" name="" type="password" value="内容"/> 隐藏域：<input id="" name="" type="hidden" value="内容"/> 2.按钮类普通按钮：<input id="" name="" type="button" value="按钮上的文字"/> 提交按钮：<input id="" name="" type="submit" value="按钮上的文字"/> 重置按钮：<input id="" name="" type="reset" value="按钮上的文字"/> 图片按钮：<input id="" name="" type="image" src="图片的路径" width="宽" height="高"/>

表单演示

 <form id="f1" name="f1" action="" method="">
<input id="" name="" type="text" value="请输入用户名"/><br>
 <input id="" name="" type="password" value="请输入用户名密码">
 <input id="" name="" type="submit" value="登陆"/><br>
 <input id="" name="" type="text" value="请输入支持的球队"/><br>
 <textarea id="" name="" rows="5"cols="20" >请输入支持的原因，字数200字以内</textarea><br>
 <input type="button" name="" id="" value="火箭支持率"/><br>
 <input type="button" name="" id="" value="雷霆支持率"/><br>
 <input id="" name="" type="submit" value="重置"/><br>
 <input id="" name="" type="image" src="images/png-0035.png"/>联系我们&copy;
 </form>

（三）、选择类： 1.单选 <input id="" name="组名" type="radio" value="运算的值" checked="checked"/> 2.复选 <input id="" name="组名" type="checkbox" value="运算的值" checked="checked"/> 3.列表下拉列表: <select id="" name=""> <option value="1">送餐</option> <option value="2">取餐</option> <option value="3">订餐</option> <option value="4">进餐</option> </select> 列表： <select id="" name="" size="大于1的数字" multiple="multiple"> <option value="1">送餐</option> <option value="2">取餐</option> <option value="3">订餐</option> <option value="4">进餐</option> </select> 4.文件 <input id="" name="" type="file"/>

五、框架（一）frameset frameset主要用来分隔浏览器窗口，它所在的页面是用<frameset></frameset>来替换<body></body> 属性： rows="100,*,100" cols="100,*" frameborder="no" 子元素： <frame name="名称" src="页面的路径" noresize="noresize" scrolling="yes|no|auto"/>

（二）iframe 它是嵌入在body里面的。 <iframe width="300" height="400" frameborder="0" scrolling="no" src="Untitled-3.html"></iframe>