网页制作--标签,表格,表单

网页三部份内容: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>
<pre></pre> <center></center>
转义:——需要记住
&nbsp;——空格
&lt;——小于号 <
&gt;——大于号 >
&amp;——&
&copy; ——©

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="" />

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

 

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

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

<td></td>
bgcolor:背景色
align:水平对齐
valign:竖直对齐
width:宽
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>

技术分享


3.选择类
单选
复选
列表
文件

 

 

 

 


(五)框架:

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。