其他分享
首页 > 其他分享> > HTML复习day02

HTML复习day02

作者:互联网

22-表格标签 
<!-- border="1" 设置表格边框为一像素 
width="500" 宽500px 
height="200" 
高200px align="center" 居中 left 靠左 right 靠右 
cellspacing="0" 单元格间距为0 
cellpadding="20" 字和单元格间距为20 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <table border="1" width="500" height="200" align="center" cellspacing="0" cellpadding="20">
        <tr>
            <td>姓名</td>
            <td>性别</td>
            <td>年龄</td>
        </tr>


        <tr>
            <td>张三</td>
            <td>男</td>
            <td>18</td>
        </tr>

        <tr>
            <td>张三疯</td>
            <td>女</td>
            <td>68</td>
        </tr>

        <tr>
            <td>张三丰子</td>
            <td>男</td>
            <td>188</td>
        </tr>
    </table>
</body>

</html>
24-表头单元格 表头单元格 加粗居中
<th> </th>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <table border="1" width="500" height="200" align="center" cellspacing="0" cellpadding="20">
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>


        <tr>
            <td>张三</td>
            <td>男</td>
            <td>18</td>
        </tr>

        <tr>
            <td>张三疯</td>
            <td>女</td>
            <td>68</td>
        </tr>

        <tr>
            <td>张三丰子</td>
            <td>男</td>
            <td>188</td>
        </tr>
    </table>
</body>

</html>

25-表格标题 caption 在表格内部写
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <table border="1" width="500" height="200" align="center" cellspacing="0" cellpadding="20">
        <caption>个人信息</caption>
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>


        <tr>
            <td>张三</td>
            <td>男</td>
            <td>18</td>
        </tr>

        <tr>
            <td>张三疯</td>
            <td>女</td>
            <td>68</td>
        </tr>

        <tr>
            <td>张三丰子</td>
            <td>男</td>
            <td>188</td>
        </tr>
    </table>
</body>

</html>

26-跨行跨列合并
 <!-- 1.跨行合并 rowspan 跨列合并colspan 
 2.一般原则线上后下先左后右 -->

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <table border="1" width="500" height="200" align="center" cellspacing="0" cellpadding="20">
        <tr>
            <td rowspan="2">11</td>
            <td>12</td>
            <td>13</td>
            <td>14</td>
        </tr>
        <tr>

            <td>22</td>
            <td colspan="2">23</td>

        </tr>
        <tr>
            <td>31</td>
            <td>32</td>
            <td>33</td>
            <td>34</td>
        </tr>
    </table>
</body>

</html>

27-表格划分结构
<thead></thead>
<tbody></tbody>
<tfoot></tfoot>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <table border="1" width="500" height="200" align="center" cellspacing="0" cellpadding="20">
        <thead>
            <tr>
                <td>姓名</td>
                <td>性别</td>
                <td>年龄</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>男</td>
                <td>18</td>
            </tr>

            <tr>
                <td>张三疯</td>
                <td>女</td>
                <td>68</td>
            </tr>

            <tr>
                <td>张三丰子</td>
                <td>男</td>
                <td>188</td>
            </tr>
            <tfoot>
                <tr>
                    <td>
                        表格划分案例
                    </td>
                </tr>
            </tfoot>
        </tbody>


    </table>
</body>

</html>

28-列表
<!-- 作用:用来有序的显示图片和文字
分类:有序 无序 自定义 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    无序
    <ul>
        <li>香蕉</li>
        <li>苹果</li>
        <li>榴莲</li>
    </ul>
    有序
    <ol>

        <li>Java是全世界最好的语言</li>
        <li>不PHP才是</li>
        <li>Java and php:垃圾Python</li>

    </ol>
    自定义
    <dl>
        <dt>北京</dt>
        <dd>昌平</dd>
        <dd>东城区</dd>
        <dd>西城区</dd>

        <dt>大明王朝</dt>
        <dd>东厂</dd>
        <dd>西厂</dd>
        <dd>锦衣卫</dd>
    </dl>
</body>

</html>
29-表单标签
<!-- input 
type="text" 指定格式
text 普通文本
password 密码框
radio 单选框
checkbox: 复选框  默认checked="checked" 被选状态
name="username" : 指定元件名字
id :指定id -->


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    用户名:<input type="text" name="username" id="" value="请输入用户名">
    <br> 密码:
    <input type="password" />
    <br>
    性别:<input type="radio" name="sex"> 男
    <input type="rasio" name="sex"> 女
    <br>
    爱好:
    <input type="checkbox" name="hobby" id="" checked="checked">吃饭
    <input type="checkbox" name="hobby" id="">睡觉
    <input type="checkbox" name="hobby" id="">打豆豆
    <input type="checkbox" name="hobby" id="">看电视
    <input type="button" value="按钮">
    <input type="submit" value="提交">
    <input type="submit" value="重置">
    <!-- 图片提交按钮 -->
    <input type="image" src="#" alt="">
    <input type="file" name="图片上传" id="">
</body>

</html>
30-labal
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 1 -->
    <label>用户名:<input type="text" name="" id=""></label>
    <!-- 2 -->
    <label for="nc">昵称</label><input type="text" name="" id="nc">
</body>
</html>

31-文本域
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    留言:<textarea name="" id="" cols="30" rows="10"></textarea>
</body>
</html>
32-下拉列表
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    籍贯:
    <select name="" id="">
        <option value="">--请选择省份--</option>

        <option value="">北京</option>
        <option value="">上海</option>
        <option value="">广州</option>
        <option value="">杭州</option>

    </select>

</body>
</html>

33-form表单
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- get显示和post不显示提交 -->
    <form action="提交到的位置" method="get">
        用户名:<input type="text" name="username" id="user" value="请输入用户名">
    <br> 密码:
    <input type="password" name="password" id="passwd"/>
    </form>
    <input type="submit" value="提交">
    <input type="submit" value="重置">
</body>
</html>

案例练习

 

 

 

 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>世纪佳缘-你在我也在</title>
</head>
<body>
    <table width="600" align="center">
        <caption> <h4> 青春不常在,抓紧谈恋爱 </h4></caption>
        <!-- 1 -->
        <tr>
            <td>性别</td>
            <td>
                <input type="radio"  name="sex"  checked="checked" /><img src="images/man.jpg" /> 男
                <input type="radio"  name="sex" /><img src="images/women.jpg" /> 女
            </td>
        </tr>
        <!-- 2 -->
        <tr>
            <td>生日</td>
            <td>
                <!-- 年份的 -->
                <select>
                    <option>--请选择年--</option>
                    <option>1995</option>
                    <option>1996</option>
                    <option>1997</option>
                    <option>1998</option>
                </select>
                <!-- 月份的 -->
                <select>
                    <option>--请选择月--</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                </select>
                <!-- 日子 -->
                <select>
                    <option>--请选择日--</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                </select>
            </td>
        </tr>
        <!-- 3 -->
        <tr>
            <td>所在地区</td>
            <td>
                <input  type="text" value="北京思密达" />
            </td>
        </tr>
        <!-- 4行 -->
        <tr>
            <td>婚姻状况</td>
            <td>
                <input type="radio" name="marry" checked="checked"/> 未婚
                <input type="radio" name="marry" /> 已婚
                <input type="radio" name="marry" /> 离婚
            </td>
        </tr>
        <!-- 5行 -->
        <tr>
            <td>学历</td>
            <td>
                <input type="text" value="幼儿园">
            </td>
        </tr>
        <!-- 6行 -->
        <tr>
            <td>月薪</td>
            <td>
                <input type="text" value="10000-20000">
            </td>
        </tr>
        <!-- 7行 -->
        <tr>
            <td>手机号码</td>
            <td>
                <input type="text">
            </td>
        </tr>
        <!-- 8行 -->
        <tr>
            <td>昵称</td>
            <td>
                <input type="text" >
            </td>
        </tr>
        <!-- 9行 -->
        <tr>
            <td>喜欢的类型</td>
            <td>
                <input type="checkbox" name="love" /> 妩媚的
                <input type="checkbox" name="love" /> 可爱的
                <input type="checkbox" name="love" /> 小鲜肉
                <input type="checkbox" name="love" /> 老腊肉
                <input type="checkbox" name="love" /> 都喜欢
            </td>
        </tr>
        <!-- 10 行 -->
        <tr>
            <td>自我介绍</td>
            <td>
                <textarea> 自我介绍 </textarea>
            </td>
        </tr>
        <!-- 11行 -->
        <tr>
            <td></td>
            <td>
                <input type="image" src="images/btn.png" />
            </td>
        </tr>
        <!-- 12 行 -->
        <tr>
            <td></td>
            <td> <input type="checkbox" name="agree" checked="checked" />我同意注册条款和会员加入标准</td>
        </tr>
        <!-- 13行 -->
        <tr>
            <td></td>
            <td>
                <a href="#">我是会员,立即登录</a>
            </td>
        </tr>
        <!-- 14 -->
        <tr>
            <td></td>
            <td>
                <h3>我承诺</h3>
                <ul>
                    <li>年满18岁、单身</li>
                    <li>抱着严肃的态度</li>
                    <li>真诚寻找另一半</li>
                </ul>
            </td>
        </tr>
    </table>
</body>
</html>

 

标签:复习,--,day02,HTML,18,68,188,Document,性别
来源: https://www.cnblogs.com/it-wp/p/14371671.html