黑马程序员技术交流社区
标题:
【石家庄校区】web阶段1基础网页制作
[打印本页]
作者:
人贵自知
时间:
2018-1-17 15:50
标题:
【石家庄校区】web阶段1基础网页制作
本帖最后由 小石姐姐 于 2018-1-18 14:49 编辑
web阶段1基础网页制作
TML的超链接标签:<a>
* 属性:
* href :链接的路径
* target :打开的方式
* _self :在自身页面打开
* _blank :新打开一个窗口
无序列表的属性:
* type属性
* disc :实心点.
* circle :空心圆
* square :方块.
有序列表的属性:
* type属性:
* 1 :数字类型
* a :英文类型
* i :罗马字符
* start属性:从哪开始
超链接的target属性:
* _self
* _blank
* _parent
HTML的表单标签:<form>
* 常用属性:
* action属性:提交的路径.默认提交到当前页面
* method属性:请求的方式.GET和POST.默认是GET.
***** GET方式和POST方式的区别?
* GET :数据会显示到地址栏中.GET方式提交是有大小的限制.
* POST :数据不会显示到地址栏中.POST方式提交的是没有大小限制.
HTML中表单元素:
* <input type=”text”> :文本框.
* 常用属性:
* name :表单元素的名称.必须有name属性,然后后台才可以接收数据.
* value :文本框的默认值.
* size :文本框的长度.
* maxlength:文本框输入的最大长度.
* readonly:只读文本框.
* <input type=”password”> :密码框.
* 常用属性:
* name :表单元素的名称.必须有name属性,然后后台才可以接收数据.
* value :密码框的默认值.
* size :密码框的长度.
* maxlength:密码框输入的最大长度.
* <input type=”radio”> :单选按钮.
* 常用的属性:
* name :表单元素的名称.必须有name属性,然后后台才可以接收数据.
* value :单选按钮的默认值.
* checked:单选按钮默认被选中.
* <input type=”checkbox”> :复选按钮.
* 常用的属性:
* name :表单元素的名称.必须有name属性,然后后台才可以接收数据.
* value :单选按钮的默认值.
* checked:单选按钮默认被选中.
* <input type=”button”> :普通按钮.没有任何功能的按钮.
* <input type=”submit”> :提交按钮.
* <input type=”reset”> :重置按钮.
* <input type=”file”> :文件上传的表单项.
* <input type=”hidden”> :隐藏字段.
* <input type=”image”> :图片按钮
* <select> :下拉列表.
* <textarea> :文本域.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table border="1px" width="97%" align="center">
<!--yi-->
<tr>
<!--后面的行的列都会受到第一行列数的影响-->
<td width="100%">
<table border="1xp" width="100%">
<tr>
<td><img src="img/logo2.png"/></td>
<td> <img src="img/header.jpg"/></td>
<td>
<a href="">登录</a>
<a href="">注册</a>
<a href="">购物车</a>
</td>
</tr>
</table>
</td>
</tr>
<!--er-->
<tr>
<td bgcolor="black" height="60xp" width="66%">
<font color="white" size="3" face="fantasy"><a href=""><i>首页</i></a></font>
<font color="white"><a href="" target="_self"><i>手机数码</i></a></font>
<font color="white"><a href=""><i>电脑办公</i></a></font>
<font color="white"><a href=""><i>电脑办公</i></a></font>
<font color="white"><a href=""><i>电脑办公</i></a></font>
</td>
<!--<td >
<!--<form>
<input type="submit" value="submit"/>
</form>-->
</tr>
<!--san-->
<tr>
<td>
<img src="img/2.jpg" width="100%" height="75%"/>
</td>
</tr>
<!--si-->
<tr>
<td><font size="5"><b><i> 热门商品</i></b></font> <img src="images/title2.jpg"/></td>
</tr>
<tr>
<td>
<table border="1px" width="100%" height="460px">
<tr>
<td rowspan="2" width="14%" height="460px"><img src="products/hao/big01.jpg" height="100%"/></td>
<td colspan="3" width="42%" height="230px"><img src="products/hao/middle01.jpg" height="100%" width="100%"/></td>
<td width="14%" height="230px" align="center">
<img src="products/hao/small03.jpg"><br />
冬瓜<br /><br />
<font color="red" face="" size="">259¥</font>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</td>
</tr>
<!--ad-->
<tr>
<td>
<img src="products/hao/ad.jpg" width="100%" height="100%"/>
</td>
</tr>
<tr>
<td><font size="5"><b><i> 最新商品</i></b></font> <img src="images/title2.jpg"/></td>
</tr>
<tr>
<td>
<table border="1px" width="100%" height="460px">
<tr>
<td rowspan="2" width="14%" height="460px"><img src="products/hao/big01.jpg" height="100%"/></td>
<td colspan="3" width="42%" height="230px"><img src="products/hao/middle01.jpg" height="100%" width="100%"/></td>
<td width="14%" height="230px" align="center"><img src="products/hao/small03.jpg"></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<img src="image/footer.jpg" width="100%"/>
</td>
</tr>
<tr>
<td>
<center>
<p>
<a href=""><font color="blue">关于我们</font></a>
<a href=""><font color="blue">联系我们</font></a>
<a href=""><font color="blue">招贤纳士</font></a>
<a href=""><font color="blue">法律声明</font></a>
<a href=""><font color="blue">友情链接</font></a>
<a href=""><font color="blue">支付方式</font></a>
<a href=""><font color="blue">配送方式</font></a>
<a href=""><font color="blue">服务声明</font></a>
<a href=""><font color="blue">广告声明</font></a>
</p>
</center>
</td>
</tr>
<tr>
<td align="center">
<p>Copyright © 2005-2016 传智商城 版权所有</p>
</td>
</tr>
</table>
</body>
</html>
欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)
黑马程序员IT技术论坛 X3.2