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
样图
相关文章
|
3月前
|
XML 移动开发 前端开发
HTML5简介(什么是网页、什么是 HTML、Web标准)
网站是指在因特网上根据一定的规则,使用 HTML 等制作的用于展示特定内容相关的网页集合。
36 0
|
23小时前
|
前端开发 搜索推荐 数据安全/隐私保护
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
5 1
|
1天前
|
PHP
web简易开发——通过php与HTML+css+mysql实现用户的登录,注册
web简易开发——通过php与HTML+css+mysql实现用户的登录,注册
|
18天前
|
移动开发 监控 数据可视化
组态软件之万维组态介绍(web组态、html组态、vue2/vue3组态)
组态软件之万维组态、web组态、html组态、vue2/vue3组态,组态在工业自动化领域越来越重要,但由于市面上组态软件费用昂贵、集成复杂,使用技术门槛高,万维组态就应运而生;万维组态是一款功能强大的基于Web的可视化组态编辑器,采用标准HTML5技术,使用Vue2和Vue3语言,基于B/S架构进行开发,支持WEB端显示;支持快速集成,集成简单方便;支持在浏览器端完成便捷的人机交互,简单的拖拽即可完成可视化页面的设计;可快速构建和部署可扩展的SCADA、HMI、仪表板或LoT系统;
组态软件之万维组态介绍(web组态、html组态、vue2/vue3组态)
|
24天前
|
移动开发 前端开发 HTML5
Web前端全栈HTML5通向大神之路
本套课程共三大阶段,六大部分,是WEB前端、混合开发与全栈开发必须要掌握的技能,从基础到实践,是从编程小白成长为全栈大神的最佳教程!
29 3
Web前端全栈HTML5通向大神之路
|
1月前
|
前端开发
web前端-HTML-div语法
web前端-HTML-div语法
|
1月前
|
移动开发 JavaScript Android开发
Android与Html5交互
Android与Html5交互
|
3月前
|
前端开发 Linux 编译器
web开发:HTML详解
web开发:HTML详解
45 0
|
3月前
|
前端开发 JavaScript 定位技术
web版拳皇,使用html,css,js来制作一款拳皇游戏
web版拳皇,使用html,css,js来制作一款拳皇游戏
35 0
|
3月前
|
移动开发 前端开发 JavaScript
web前端基础(一)——HTML+CSS
web前端基础(一)——HTML+CSS
106 0