Android程序猿搞Web 之HTML（二）

最新推荐文章于 2024-09-07 10:28:06 发布

weixin_33860553

最新推荐文章于 2024-09-07 10:28:06 发布

阅读量56

点赞数

文章标签：移动开发

原文链接：https://yq.aliyun.com/articles/635772

版权

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

样图

weixin_33860553

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Android程序猿搞Web 之HTML（二）

1、表格的使用1）、基本使用作用：显示数据<table width="500"></table>表示单元格的盒子；<body> <table width="500" border="1" align="center" cellpadding="10" c...
复制链接

扫一扫