html5学习-table布局笔记
web前端
发布日期:   2019-11-16
阅读次数:  

1. html的常用标签

常用标签：

  • b : 加粗

  • i : 斜体

  • strong: 加粗, 带语义标签

  • em: 斜体, 带语义

  • p: 段落标签

  • img:
    常用的属性:

    - width : 宽度

- height: 高度

- src :  指定文件路径

- alt:  图片加载失败时的提示内容

    宽度设定，高度会自己进行一个合适的放缩，否则就会产生一个畸形的图片。宽度可以设置成百分比的形式。

  • 列表标签

    1. 无序列表：ul
      属性设置type:小圆圈,小圆点, 小方块
    2. 有序列表: ol
      type: 1,a ,A,I,
      start: 指定是起始索引
    3. 放置列表项目：li

  • 超链接标签a：

    1. href: 指定要跳转去的链接地址 ,如果是网络地址需要加上http协议 , 如果访问的是本网站的html文件,可以直接写文件路径

    2. target:

      • _self: 默认打开方式,在当前窗口打开

      • _blank: 新起一个标签页打开页面

      • [framename]: 指定哪个框架进行一个链接的跳转

  • 字体标签font:

    1. color
    2. size(1-7)超过7都会按照7显示
    3. face 改变字体

  • p 段落标签

  • h 标题标签 1-6

  • hr 水平线

  • table
    属性：

    • border: 指定边框
    • width : 宽度
    • height : 高度
    • bgcolor : 背景颜色
    • align : 水平对齐方式
    • vlign: 垂直对齐方式

  • tr 行标签

  • td 单元格标签
    属性：

    • colspan: 跨行操作
    • rowspan:跨列操作

  • br
    是不能包裹住的，后面不能设置他的一个style，而

    是包裹住，后面可以对标签进行一个样式设定。

  • frameset
    如果使用frameset一定要将body标签去掉

  • frame

  • input：

    1. type:
      • password
      • text
      • submit
      • button
      • reset
      • tel
      • number
      • radio： 单选按钮，需要将name设置相同的
      • hidden
      • checkbox: 复选按钮
      • date
      • email

  • select-option

  • textarea

一个简介的实例：

<!DOCTYPE html>
    <!--
        1. 上面是一个文档声明 
        2. 根标签 html
        3. html文件主要包含两部分. 头部分和体部分
            头部分 : 主要是用来放置一些页面信息
            体部分 : 主要来放置我们的HTML页面内容
        4. 通过标签来对内容进行描述,标签通常都是由开始标签和结束标签组成  
        5. 标签不区分大小写, 官方建议使用小写
    -->
<html>
    <head><!-- 头去放置一些页面信息，体部分是页面内容 -->
        <meta charset="gbk" />
        <!-- 指定浏览器打开页面的编码方式 -->
        <!-- 网站的配置信息 -->
        <!-- 通过标签对内容进行描述 <br/>是一个空标签
        标签不区分大小写
        他是一个解释性的语言
        -->
        <title>入门案例</title>
    <!-- 浏览器会帮我们去整理 -->
    </head>
    <body>
        <h1>公司简介</h1><!-- h是1到6 ,如果不是就超出了范围就按照正常的显示 -->

        <hr /><!-- 水平分割线 -->
        <p><strong>中国</strong>ssx<em>asdasdasdasdasdas</em></p>
        <!-- font的大小范围为0-7 --><p><font size=7 face=blackadder itc color="blue">中国</font>ssxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
        <p><b>asdasdasdas</b></p>
        <p>asasasasasasasasasasasasasasasas</p>
        <!-- src指定图片路径 
        width自己设置,高度会随着width进行一个自我调整
        alt:在文件加载失败时候的提示下.
        -->
        <ul>
    <li>haasas</li>    
    <li>haasas</li>    
    <li>haasas</li>    
    <li>haasas</li>    

        </ul>
        <hr />
        <ul type=square><li>haasas</li>    
    <li>haasas</li>    
    <li>haasas</li>    
    <li>haasas</li>    </ul>
        <ul>hahahah</ul>
        <ul type=disc>友情链接
        <hr />
            <li><a href="http://www.baidu.com" target="_blank">百度</a></li>
            <li>谷歌</li>
            <li>百合</li>
            <li>世纪佳缘</li>
        </ol>
        <hr />
<table ></table>
    </body>
    <!-- em和i都是斜体
        b加粗,i是斜体,\
        strong也是加粗,带有语义的标签
        em:斜体,带有语义,搜索引擎友好的.

     -->
</html>

2. 使用表格进行一个页面的布局

2.1 表格的嵌套以及跨行跨列

colspan跨列，rowspan是跨列

首先分析一共需要几行几列：创建八行一列的表格

第一部分：logo部分，嵌套一个一行三列的表格
第二部分：导航栏部分，只用放置5个超链接
第三部分：轮播图
第四部分：嵌套一个表格：三行其七个列，
第五部分:放一张图片
第六：抄第四部分
第七部分：放置一张图片
第八部分：放置超链接

表格布局的一些技巧：

table常用属性：
1、border 定义表格的边框

2、cellpadding 定义单元格内内容与边框的距离

3、cellspacing 定义单元格与单元格之间的距离

4、align 设置单元格中内容的水平对齐方式,设置值有：left | center | right

5、valign 设置单元格中内容的垂直对齐方式 top | middle | bottom

6、colspan 设置单元格水平合并

7、rowspan 设置单元格垂直合并

传统布局：
传统的布局方式就是使用table来做整体页面的布局，布局的技巧归纳为如下几点：

  1. 定义表格宽高，将border、cellpadding、cellspacing全部设置为0

  2. 单元格里面嵌套表格

  3. 单元格中的元素和嵌套的表格用align和valign设置对齐方式

  4. 通过属性或者css样式设置单元格中元素的样式

  5. 一定要注意闭合标签

一些整体的布局思路：
先整体大的分，再小的分。可以把边框调出来。
首先分析需要几行几列，接着分析哪个需要嵌套一个表格，一般最外围的table需要一个width=100%,然后如果一行里面还需要分几个格子，然后再嵌套一个表格，如果行内只有一个单元格，那就不需要嵌套。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <table  width="100%">
            <tr width="100%">
                <td>
                    <table width="100%">
                <td><img src="./img/logo2.png"></td>
                <td><img src="./img/header.jpg"></td>
                <td>
                    <a href>登陆</href>
                        <a href>注册</href>
                            <a href>购物车</href>
                </td>
        </table>
        </td>
        </tr>
        <tr  width="100%">

            <table width="100%">
                <tr bgcolor="black">
                    <td>
                        <a href="">
                            <font color="aliceblue">首页</font>
                        </a>
                        <a href="">
                            <font color="aliceblue">手机数码</font>
                        </a>
                        <a href="">
                            <font color="aliceblue">鞋靴箱包</font>
                        </a>
                        <a href="">
                            <font color="aliceblue">电脑办公</font>
                        </a>
                        <a href="">
                            <font color="aliceblue">香烟香水</font>
                        </a>
                    </td>
                    <td height="50px" align="right">

                            <input type="search" class="mui-input-clear" placeholder="">
                            <font color="aliceblue"> 搜索</font>
                    </td>
                </tr>
            </table>

        </tr>
        <hr>
        <!-- 如何在列表中设置他们的位置,比如说一行里面的位置是如何摆放的 
          如何            

            -->
        <tr>
            <table width="100%" >
                <tr>
                    <td><img src="img/1.jpg" alt="图片加载错误...." width="100%"></td>
                </tr>
            </table>
        </tr>
        <tr>
            <table cellspacing=10px >
                <tr>
                    <td>
                        <h2>最新商品</h2>
                    </td>
                    <td><em><strong>根据你的喜好精心为你推荐!</strong></em></td>
                </tr>
            </table>
        </tr>
        <tr>
            <table width="100%" cellpadding="0" cellspacing="0" height="500px">
                <tr valign="top" align="center" width=100% cellpadding="0" cellspacing="0">
                    <td rowspan="2"><img src="img/hao/big01.jpg" alt="" width="100%"></td>
                    <td colspan="3"><img src="img/hao/middle01.jpg" alt="" width="100%" height="100%"></td>
                    <td align="center">

                        <img src="img/hao/small03.jpg" alt="" width="100%"><br>
                        <font color="red">$289</font>
                    </td>
                    <td align="center">

                        <img src="img/hao/small03.jpg" alt="" width="100%"><br>
                        <font color="red">$289</font>
                    </td>
                    <td align="center">

                        <img src="img/hao/small03.jpg" alt="" width="100%"><br>
                        <font color="red">$289</font>
                    </td>
                </tr>
                <tr>
                    <td align="center">
                        < <img src="img/hao/small03.jpg" alt="" width="100%"><br>
                            <font color="red">$289</font>
                    </td>
                    <td align="center">
                        <img src="img/hao/small03.jpg" alt="" width="100%"><br>
                        <font color="red">$289</font>
                    </td>
                    <td align="center">

                        <img src="img/hao/small03.jpg" alt="" width="100%"><br>
                        <font color="red">$289</font>
                    </td>
                    <td align="center">
                        <img src="img/hao/small03.jpg" alt="" width="100%"><br>
                        <font color="red">$289</font>
                    </td>
                    <td align="center">

                        <img src="img/hao/small03.jpg" alt="" width="100%"><br>
                        <font color="red">$289</font>
                    </td>
                    <td align="center">

                        <img src="img/hao/small03.jpg" alt="" width="100%"><br>
                        <font color="red">$289</font>
                    </td>
                </tr>
                <tr height="20px" width=100%>
                    <td colspan="7">
                        <img src="img/hao/ad.jpg" width="100%">
                    </td>

                </tr>

            </table>
        </tr>

        <tr>
            <table cellspacing=10px >
                <tr>
                    <td>
                        <h2>热门商品</h2>
                    </td>
                    <td><em><strong>根据你的喜好精心为你推荐!</strong></em></td>
                </tr>
            </table>
        </tr>
        <tr>
            <table width="100%"  cellpadding="0" cellspacing="0" height="500px">
                <tr valign="top" align="center" width=100% cellpadding="0" cellspacing="0">
                    <td rowspan="2"><img src="img/hao/big01.jpg" alt="" width="100%"></td>
                    <td colspan="3"><img src="img/hao/middle01.jpg" alt="" width="100%" height="100%"></td>
                    <td align="center">

                        <img src="img/hao/small03.jpg" alt="" width="100%"><br>
                        <font color="red">$289</font>
                    </td>
                    <td align="center">

                        <img src="img/hao/small03.jpg" alt="" width="100%"><br>
                        <font color="red">$289</font>
                    </td>
                    <td align="center">

                        <img src="img/hao/small03.jpg" alt="" width="100%"><br>
                        <font color="red">$289</font>
                    </td>
                </tr>
                <tr>
                    <td align="center">
                        < <img src="img/hao/small03.jpg" alt="" width="100%"><br>
                            <font color="red">$289</font>
                    </td>
                    <td align="center">
                        <img src="img/hao/small03.jpg" alt="" width="100%"><br>
                        <font color="red">$289</font>
                    </td>
                    <td align="center">

                        <img src="img/hao/small03.jpg" alt="" width="100%"><br>
                        <font color="red">$289</font>
                    </td>
                    <td align="center">
                        <img src="img/hao/small03.jpg" alt="" width="100%"><br>
                        <font color="red">$289</font>
                    </td>
                    <td align="center">

                        <img src="img/hao/small03.jpg" alt="" width="100%"><br>
                        <font color="red">$289</font>
                    </td>
                    <td align="center">

                        <img src="img/hao/small03.jpg" alt="" width="100%"><br>
                        <font color="red">$289</font>
                    </td>
                </tr>
                <tr height="20px" width=100%>
                    <td colspan="7">
                        <img src="img/hao/ad.jpg" width="100%">
                    </td>

                </tr>

            </table>
        </tr>
        <tr>
            <td align="center"><img src="img/footer.jpg" alt=""></td>
        </tr>
<hr>
        <tr border="2px">
            <td >
                <div align="center">
                    <a href="#">友情链接</a>
                    <a href="#">友情链接</a>
                    <a href="#">友情链接</a>
                    <a href="#">友情链接</a>
                    <a href="#">友情链接</a>
    <p >copyright by @星晴</p>
                </div>

            </td>
        </tr>

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

注册页面设计：

  1. logo部分
  2. 导航栏
  3. 注册部分
  4. 页脚部分
  5. 网站声明信息
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <table border="3px" width="100%">
            <tr>
                <td>
                    <table width="100%">
                <td><img src="./img/logo2.png"></td>
                <td><img src="./img/header.jpg"></td>
                <td>
                    <a href>登陆</href>
                        <a href>注册</href>
                            <a href>购物车</href>
                </td>
        </table>
        </td>
        </tr>
        <tr width="100%">
            <td>
                <table width="100%">
                    <tr bgcolor="black">
                        <td>
                            <a href="">
                                <font color="aliceblue">首页</font>
                            </a>
                            <a href="">
                                <font color="aliceblue">手机数码</font>
                            </a>
                            <a href="">
                                <font color="aliceblue">鞋靴箱包</font>
                            </a>
                            <a href="">
                                <font color="aliceblue">电脑办公</font>
                            </a>
                            <a href="">
                                <font color="aliceblue">香烟香水</font>
                            </a>
                        </td>
                        <td height="50px" align="right">
                            <input type="search" class="mui-input-clear" placeholder="">
                            <font color="aliceblue"> 搜索</font>
                        </td>

                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td align="center" background="./img/regist_bg.jpg">
                <table border="2px" width="600px"  bgcolor=azure>
                    <tr>
                        <td colspan="2" align="center"><font size="5" color="blue">会员注册</font> USER REGISTER</td>
                    </tr>
                    <tr>
                        <td align="center">用户名</td>
                        <td><input type="text" name="username"  placeholder="请输入用户名" /></td>
                    </tr>
                    <tr>
                        <td align="center">密码</td>
                        <td><input type="password" name="username"  placeholder="请输入密码" /></td>
                    </tr>
                    <tr>
                        <td align="center">确认密码</td>
                        <td><input type="password" name="username"  placeholder="请再次输入密码" /></td>
                    </tr>
                    <tr>
                        <td align="center">确认密码</td>
                        <td><input type="password" name="username"  placeholder="请再次输入密码" /></td>
                    </tr>
                    <tr>
                        <td align="center">确认密码</td>
                        <td><input type="password" name="username"  placeholder="请再次输入密码" /></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                    </tr>
                </table>
            </td>
        </tr>


        <tr align="center">
            <td align="center"><img src="img/footer.jpg" alt="" width="100%"></td>
        </tr>
        <hr>
        <tr border="2px">
            <td>
                <div align="center">
                    <a href="#">友情链接</a>
                    <a href="#">友情链接</a>
                    <a href="#">友情链接</a>
                    <a href="#">友情链接</a>
                    <a href="#">友情链接</a>
                    <p>copyright by @星晴</p>
                </div>

            </td>
        </tr>
        </table>

    </body>
</html>
赏

  转载请注明: 星晴 html5学习-table布局笔记

 上一篇
mysql提权笔记 mysql提权笔记
0x02 mof提权利用条件 windows<=2003 可写入c:/windows/system32/mof目录 ，此文件会自动执行 select load_file('C:/wmpub/nullevt.mof&#
2019-11-16 starjian
提权
下一篇 
ctf中的弱类型 ctf中的弱类型
弱类型 ==和===的区别 ‘’==0 空值和0是相等的 0==false 是相等的 0==‘aa’ 字符串转化成以0开头的 0x0==1 md5对数组返回的是null值 md5强碰撞 工具 fastcoll md5例题1 p
2019-11-16 starjian
ctf
  目录