黑马程序员技术交流社区

标题: 【石家庄校区】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