开发者社区> 吾乃韩小呆> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

Android程序猿搞Web 之HTML(二)

简介: 1、表格的使用 1)、基本使用 作用:显示数据表示单元格的盒子; 数字表格 数字 123 ...
+关注继续查看

1、表格的使用

1)、基本使用

作用:显示数据
<table width="500"></table>表示单元格的盒子;

<body>
    <table width="500" border="1" align="center" cellpadding="10" cellspacing="0" >
    <caption>数字表格</caption>
            <tr>
                <th>数字</th>
            </tr>
            <tr>
                <td align="center">123</td>
            </tr>
            <tr>
                <td >123</td>
            </tr>
    </table>
</body>

caption:表示表格标题
tr:表示行
td:表示单元格
th:表示表头单元格,使得字体自动居中加粗
align:设置在网页中水平位置
cellpadding:设置表格内内容与边框之间的距离
单位:像素
cellspacing:设置单元格与单元格边框之间的距离
单位:像素

表格内无“列”的概念。
表格规范一般为 3参为0


img_23461f4f8056ded8255fef63d09d0280.png
样图
2)、合并单元格

rowspan:表示跨行合并
colspan:表示跨列合并

<body>
    <table width="500" border="1" align="center" cellpadding="10" cellspacing="0" >
    <caption>数字表格</caption>
            <thead>
                <tr>
                    <th colspan="3">数字</th>
                </tr>
            </thead>

        <tbody>

            <tr>
                <td align="center" colspan="2">123</td>
                <td align="center">abs</td>
            </tr>
            <tr>
                <td rowspan="2">123</td>
                <td align="center">123</td>
                <td align="center">abs</td>
            </tr>
            <tr>
                <td align="center">123</td>
                <td align="center">abs</td>
            </tr>
        </tbody>
    </table>
</body>
img_501c025941985e96836fa21485c097e6.png
样图

2、表单

<body>
    <table width="600" border="0" cellspacing="5" cellpadding="0" align="center">
        <caption><h4>揣着上坟的心情来上班</h4></caption>
        <tr>
            <td>所在地区</td>
            <td ><input type="text" value="帝都" maxlength="4"></td>
        </tr>
        <tr>
            <td>密码</td>
            <td ><input type="password" ></td>
        </tr>

        <tr>
        <td>性别</td>
            <td>
                男<input type="radio" name="sex">
                女<input type="radio" name="sex">
                不确定<input type="radio" name="sex">
            </td>
        </tr>
        <tr>
            <td>喜欢类型</td>
            <td>
                小鲜肉<input type="checkbox" checked="true">
                老腊肉<input type="checkbox">
                半男不女<input type="checkbox">
            </td>
        </tr>

        <tr>
            <td></td>
            <td>
                <input type="button" value="注册" >
                <input type="submit" value="提交" >
                <input type="reset" value="重置" >
                <input type="image" src="error.png">
            </td>
        </tr>
        <tr>
            <td>上传头像</td>
            <td>
                <input type="file">
            </td>
        </tr>
    </table>
</body> 
1)、input属性

type的值包含:text(单行文本输入框)、password(密码输入框)、radio(单选输入框)、checkbox(复选框)、button(普通按钮)、submit(提交按钮)、reset(重置按钮)、image(图像形式的提交按钮)、file(文件域);

value:input控件中的默认文本;

name:当input的type为radio时(单选框),则必须设置该属性,并且同一组内的name的值必须相同,才可实现单选的效果;

size:input控件显示宽度

checked: 选择控件默认选中的项目,类似于radiobutton

maxlength:控件允许输入的最大字数

img_04bc72f0c5897a685cf3a30fabec6e37.png
样图
2)、label标签
<body>
    <label >
        用户名:<input type="text">
    </label>
</body> 

当点击用户名三个字的时候,光标即可直接在输入框内出现


img_9103003a6129a2f957e0b3c5d7c35bd2.png
样图

3)、文本域

<body>
    <textarea name="文本域" id="" cols="30" rows="10"></textarea>
</body> 
img_08813d52f5aeca818720b38a2d2037fc.png
样图

cols:表示可输入列数
rows:表示可输入行数

3、下拉菜单

<body>
    <select name="" id=""  >
        <option value="">北京</option>
        <option value="" selected="selected">天津</option>
        <option value="">上海</option>
    </select>
</body>

selected :表示默认选择该选项


img_23f9b44f69e3fdc26bd9374f3352223a.png
样图

4、表单域

<body>
    <form action="wwww.baidu.com" method="get">
        用户名:<input type="text"  name="username">
        <br/>
        <br/>
        密 码:<input type="password" name="password">
    <br>
    <br>
    <input type="submit" value="提交" >
    <input type="reset" value="重置">
    </form>
</body>

action 表示:表单域提交收集到的数据到服务器的 url 地址。
method :提交方式 get 和 post 等等


img_d8ae674d6f0f892510aa5678f3bc57ea.png
样图

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
《人人都玩开心网:Ext JS+Android+SSH整合开发Web与移动SNS》销售排名第4,发篇ExtJS的文章(拖放树结点)庆祝下
    《人人都玩开心网:Ext JS+Android+SSH整合开发Web与移动SNS》一书上架短短几天,就进入了互动网计算机类销售总排名第4的好成绩(见下图)。
1069 0
【Android 应用开发】Android开发技巧--Application, ListView排列,格式化浮点数,string.xml占位符,动态引用图片
【Android 应用开发】Android开发技巧--Application, ListView排列,格式化浮点数,string.xml占位符,动态引用图片
84 0
Android开发中基础动画技巧的应用(一)
Android开发中基础动画技巧的应用
33 0
Android开发中基础动画技巧的应用(二)
Android开发中基础动画技巧的应用
37 0
Android开发中基础动画技巧的应用(三)
Android开发中基础动画技巧的应用
57 0
Android 开发,如何写出符合规范的异常处理代码?
在 Java 中,异常明确的分为两种:Checked Exception 和 Unchecked Exception。下图中的红色部分表示 Unchecked Exception 异常,蓝色的表示 Checked Exception。
80 0
动手开发Android:Xposed插件完整过程
如何动手开发Xposed插件,本文为您介绍
421 0
Android OpenGLES 3.0 开发极简教程
Android OpenGLES 3.0 开发极简教程大汇总
386 0
WebRTC & Android 开发学习环境搭建~
最近开始折腾 WebRTC 了。 先介绍一下 WebRTC 源码编译以及 Android 开发环境的搭建。 整个下载编译过程都需要能够正常访问外网,这需要自己想办法克服了。
343 0
+关注
吾乃韩小呆
快乐撸码
54
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载