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


样图
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>
样图

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:控件允许输入的最大字数

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

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


样图

3)、文本域

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

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

3、下拉菜单

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

selected :表示默认选择该选项


样图

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 等等


样图
目录
相关文章
|
JSON 小程序 JavaScript
Android程序猿从零开发小程序项目(二)
Android程序猿从零开发小程序项目(二)
Android程序猿从零开发小程序项目(二)
|
JSON 小程序 前端开发
Android程序猿从零开发小程序项目(一)
Android程序猿从零开发小程序项目(一)
Android程序猿从零开发小程序项目(一)
|
程序员 Android开发
一位android开发程序猿的小工具集合
工欲善其事,必先利其器 以下是我开发中或生活中用的个人觉得比较好的工具软件,一款好用的工具,往往能事半功倍 PostMan(ChromeApp) 一个可以模拟实现HTTP get和post的请求工具,方面设置请求参数和查看响应结果。
1055 0
|
2月前
|
开发框架 前端开发 Android开发
安卓与iOS开发中的跨平台策略
在移动应用开发的战场上,安卓和iOS两大阵营各据一方。随着技术的演进,跨平台开发框架成为开发者的新宠,旨在实现一次编码、多平台部署的梦想。本文将探讨跨平台开发的优势与挑战,并分享实用的开发技巧,帮助开发者在安卓和iOS的世界中游刃有余。
|
1天前
|
缓存 前端开发 Android开发
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
|
5天前
|
Dart 前端开发 Android开发
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
1月前
|
搜索推荐 前端开发 API
探索安卓开发中的自定义视图:打造个性化用户界面
在安卓应用开发的广阔天地中,自定义视图是一块神奇的画布,让开发者能够突破标准控件的限制,绘制出独一无二的用户界面。本文将带你走进自定义视图的世界,从基础概念到实战技巧,逐步揭示如何在安卓平台上创建和运用自定义视图来提升用户体验。无论你是初学者还是有一定经验的开发者,这篇文章都将为你打开新的视野,让你的应用在众多同质化产品中脱颖而出。
68 19
|
1月前
|
JSON Java API
探索安卓开发:打造你的首个天气应用
在这篇技术指南中,我们将一起潜入安卓开发的海洋,学习如何从零开始构建一个简单的天气应用。通过这个实践项目,你将掌握安卓开发的核心概念、界面设计、网络编程以及数据解析等技能。无论你是初学者还是有一定基础的开发者,这篇文章都将为你提供一个清晰的路线图和实用的代码示例,帮助你在安卓开发的道路上迈出坚实的一步。让我们一起开始这段旅程,打造属于你自己的第一个安卓应用吧!
73 14

热门文章

最新文章