表格&b标签

表格

表格标签主要包含三个标签

<table>
  <tr>
    <td>单元格内的文字</td>
    ...
  </tr>
  ...
</table>
  1. table用于定义一个表格。
  2. tr 用于定义表格中的一行，必须嵌套在 table标签中，在 table中包含几对 tr，就有几行表格。

  3. td /td：用于定义表格中的单元格，必须嵌套在标签中，一对 中包含几对，就表示该行中有多少列（或多少个单元格）。

    表格的属性

    合并单元格

    跨行合并：rowspan 跨列合并：colspan

    将多个内容合并的时候，就会有多余的东西，把它删除。 例如 把 3个 td 合并成一个， 那就多余了2个，需要删除。

    公式： 删除的个数 = 合并的个数 - 1

    合并的顺序 先上 后下 先左 后右
  4. 先确定是跨行还是跨列合并
  5. 根据 先上 后下 先左 后右的原则找到目标单元格

  6. 删除单元格 删除的个数 = 合并的个数 - 1

    案例

<body>
<!-- cellspacing 单元格和单元格之间的距离   -->
<!-- cellpadding 单元格内容距离单元边框的距离   -->
    <table width="500" border="1" align="center" cellspacing="0" cellpadding="0">
        <caption>个人信息表</caption>  表格标题
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>电话</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>女</td>
            <td>1111111115</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>男</td>
            <td>150330123456</td>
        </tr>
    </table>
</body>

合并单元格

<body>
    <table width="400" height="100" border="1">
        <tr>
            <td>123</td>
            <td>abc</td>
            <td>abc</td>
        </tr>
        <tr>
            <td colspan="2">123</td>

            <td>测试</td>
        </tr>
        <tr>
            <td>123</td>
            <td>abc</td>
            <td>abc</td>
        </tr>

    </table>
    1. 先确认跨列合并 colspan
    2. 先上后下  先左右后
    3. 删除的个数

    <table width="400" height="100" border="1">
        <tr>
            <td>123</td>
            <td>abc</td>
            <td rowspan="3">abc</td>
        </tr>
        <tr>
            <td>123</td>
            <td>123</td>

        </tr>
        <tr>
            <td>123</td>
            <td>abc</td>

        </tr>

    </table>

    1. 先确认跨行合并 rowspan
    2. 先上后下  先左右后
    3. 删除的个数

</body>

表单标签

input控件

在上面的语法中，<input />标签为单标签，type属性为其最基本的属性 类型 ，其取值有多种，用于指定不同的控件类型

<body>
    <table width="600" border="0" cellspacing="0" cellpadding="0" align="center">
        <caption><h4>注册会员</h4></caption>
        <tr>
            <td>地区</td>
            <td><input type="text" value="上海" /></td>
        </tr>
        <tr>
            <td>用户名</td>
            <td><input type="text" value="张三" /></td>
        </tr>
        <tr>
            <td>密码</td>
            <td><input type="password" value="120"  /></td>
        </tr>
        <tr>
            <td>性别</td>
            <td>
                男<input type="radio" name="sex" checked="checked"/>
                女<input type="radio" name="sex"/>
            </td>
        </tr>
        <tr>
            <td>爱好</td>
            <td>
                篮球<input type="checkbox" checked="checked"/>
                足球<input type="checkbox" />
                羽毛球<input type="checkbox" />
                乒乓球<input type="checkbox" />
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <input type="button" value="注册"/>
                <input type="submit" value="提交"/>
                <input type="reset" value="重置"/>
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <input type="image" src="btn.png"/>
            </td>
        </tr>
        <tr>
            <td>上传文件</td>
            <td>
                <input type="file" s/>
            </td>
        </tr>

    </table>
</body>

form表单

<form action="url地址" method="提交方式" name="表单名称">
  各种表单控件
</form>

常用属性：

  1. Action 在表单收集到信息后，需要将信息传递给服务器进行处理，action属性用于指定接收并处理表单数据的服务器程序的url地址。
  2. method 用于设置表单数据的提交方式，其取值为get或post。
  3. name 用于指定表单的名称，以区分同一个页面中的多个表单
<body>
    <form action="" method="post">

        用户名: <input type="text" name="zhangsan" value="用户名"> <br /> <br />

        密　码: <input type="password" name="password1"><br /> <br />
        密　码: <input type="password" name="password2"><br /> <br />
        <input type="submit" value="提交所填">
        <input type="reset" value="重新填写">
    </form>

</body>

html&css学习二的更多相关文章

  1. HTML/CSS学习(二)

    续...... ============================================================================================ ...

  2. CSS学习(二)

    display :   block    inline-block    inline block此元素将显示为块级元素,此元素前后会带有换行符. inline默认.此元素会被显示为内联元素,元素前后 ...

  3. css学习归纳总结（二） 转

    原文地址:css学习归纳总结(二) 标签与元素 <p>标签和p元素有什么区别呢?大多数时候他们表示的是同一样东西,但仍有细微的区别.<p>.<div>等指的是HTM ...

  4. css学习归纳总结（三） 转

    原文地址:css学习归纳总结(三) 为文档添加样式的三种方法 行内样式 行内样式是写在HTML标签的style属性里的,比如: <p style="font-size: 12px;fo ...

  5. css学习归纳总结

    来源于:trigkit4 css学习归纳总结(一) 选择器的分组 CSS选择器分为 1.群组选择器 如:p, body, img, div{} 2.兄弟选择器 如:p + p { color:#f00 ...

  6. ReactJS入门学习二

    ReactJS入门学习二 阅读目录 React的背景和基本原理 理解React.render() 什么是JSX? 为什么要使用JSX? JSX的语法 如何在JSX中如何使用事件 如何在JSX中如何使用 ...

  7. TweenMax动画库学习(二)

    目录            TweenMax动画库学习(一)            TweenMax动画库学习(二)            TweenMax动画库学习(三)            Tw ...

  8. 说说CSS学习中的瓶颈

    虽已数年,但未就学习专门写过文章,这回破处了.苍蝇不叮没有缝隙的鸡蛋,领导不做没有跟拍的表演,同样,想到写CSS学习的文章也是有原因的(虽然我的不少行为没有原因). 情景再现(尊重隐私,下面故事中人名 ...

  9. css学习笔记四

    广州天气变冷了,css学习笔记还是要总结. 总结: 1:几米页面静态页面主要是一列结构头部banner图,mainbody部分放文字内容和图书图片,底部是页面的版权信息 2:腾讯软件中心静态页面制作( ...

随机推荐

  1. 一个能拖动，能调整大小，能更新bind值的vue指令-vuedragx

    一. 背景说明 开发一个可自定义组件化门户配置页面,期间采用了vue框架作为前端视图引擎,作为一个刚入手vue的萌新,开发第一个功能就遇到了拦路虎.需要一个拖动并且可改变大小的容器盒子.当时查看vue ...

  2. https://doc.opensuse.org/projects/kiwi/doc/

    KIWI 是用于创建操作系统映像的系统.映像是带有一个文件的目录,该文件包含操作系统.其应用程序与配置.操作系统的文件系统结构.可能的附加元数据,以及(取决于映像类型)磁盘几何属性和分区表数据.通过 ...

  3. Oracle数据库查询优化方案（处理上百万级记录如何提高处理查询速度）

    1.对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引.2.应尽量避免在 where 子句中对字段进行 null 值判断,否则将导致引擎放弃使用索引 ...

  4. mac 上安装 nvm 遇到的坑

    本人之前在 mac 上已经装过 nvm 了,今天帮朋友在他电脑上装,由于是新版本,没想到有点坑. ** 一定要参考官方文档 一.命令行安装  (图片来自 github ) 意思是,无论你安装还是更新 ...

  5. pycharm跨目录调用文件

    笔者今天在一个测试qq群中遇到解决跨目录中调用文件的问题.现在来详细说一下. 以下图目录为例: 1.同目录下直接调用掉用.test2.py和test3.py在同一个目录test2下. 所以在test3 ...

  6. javascript项目实战之原生js模拟淘宝购物车

    通过JavaScript实现类似与淘宝的购物车效果,包括商品的单选.全选.删除.修改数量.价格计算.数目计算.预览等功能的实现.实现的效果图: 相应的代码: shoppingCart.html < ...

  7. eclipse工具的使用心得

    一.eclipse工具的使用 eclipse是一个开源的IDE,进行javaEE开发一般使用myeclipse插件比较方便 1. java代码的位置 1)选择工作空间workspace 选择一个文件夹 ...

  8. ranker.go

    package {             start = utils.MinInt(options.OutputOffset, len(outputDocs))             end = ...

  9. 【bzoj 3131】[Sdoi2013]淘金

    Description 小Z在玩一个叫做<淘金者>的游戏.游戏的世界是一个二维坐标.X轴.Y轴坐标范围均为1..N.初始的时候,所有的整数坐标点上均有一块金子,共N*N块.    一阵风吹 ...

  10. BZOJ_3307_雨天的尾巴_线段树合并+树上差分

    BZOJ_3307_雨天的尾巴_线段树合并 Description N个点,形成一个树状结构.有M次发放,每次选择两个点x,y 对于x到y的路径上(含x,y)每个点发一袋Z类型的物品.完成 所有发放后 ...