黑马程序员第二天

今天主要学习了表格，列表和表单。

一.表格标签

主要作用：用于显示，展示数据，不是用来布局页面的。
1.基本语法：
表格标签：<table> <.table>用于定义表格的标签
行标签：<tr> </tr>定义表格中的行
单元格标签：<td> </td>定义表格中的单元格
表头单元格标签：<th> </th>
注：<tr>嵌套在<table>里 <td>嵌套在<tr>里
表头单元格也是单元格文字，加粗，居中显示，在一行，突出重要性。
2.表格的相关属性：（不常用，通过css来设置，写在table里）
align= left左，right右，center居中。（对齐方式）
border=”1“ ：边框
cellpadding=”数值“：文字和单元格之间的距离
cellspacing=”数值“：单元格和单元格之间的距离
width=”数值“：表格宽度
height=”数值“：表格高度
3. 表结构标签：
头部区域：<thead> 一个大的区域，里边一定有<tr>
主体区域：<tbody>
4.合并单元格：
①合并单元格方式：
跨行合并：rowspan=”合并单元格个数“
跨列合并：colspan=”合并单元格个数“
②目标单元格：
跨行：最上侧为目标单元格，写合并代码
跨列：最左侧为目标单元格，写合并代码
删除多余单元格
5.表格上方的标题：<caotion> </caption>写在table开头
6.案例：
代码：

<!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 align="center" border="1" cellpanding="0" cellspacing="0" width="800" height="800">
        <thead>
            <tr>
                <th colspan="5">简介</th>
            </tr>
        </thead>
        <tbody align="center">
            <tr>
                <td>姓名</td>
                <td>德莱厄斯</td>
                <td>专业</td>
                <td>嘉里敦屋里系</td>
                <td rowspan="3"></td>
            </tr>
            <tr>
                <td>性别</td>
                <td>男</td>
                <td>毕业院校</td>
                <td>瓦罗兰大陆诺克萨斯战争学院</td>

            </tr>
            <tr>
                <td>民族</td>
                <td>平民</td>
                <td>住址</td>
                <td>诺克萨斯市政街西兰花公寓六栋六楼六号</td>

            </tr>
            <tr>
                <td>学历</td>
                <td>小学二年级</td>
                <td>邮箱</td>
                <td>[email protected]</td>
                <td>联系方式：29392132904</td>
            </tr>
            <tr>
                <td>出生日期</td>
                <td>瓦罗兰历三五八年独立日</td>
                <td>电话</td>
                <td>4008823823</td>
                <td>邮编：710121</td>
            </tr>
            <tr>
                <td colspan="2">实习经历</td>

                <td colspan="3"></td>

            </tr>
        </tbody>
    </table>
</body>

</html>

二.三种列表

1.无序列表：<ul> </ul>列表项：<li> </li>
没有顺序之分，是并列的。
ul标签中只能放li标签，li标签里放什么都可以。
2.有序列表：<ol> </ol>列表项：<li></li>
有顺序
ul标签中只能放li标签，li标签里放什么都可以。
**3.自定义列表：**用于对术语或名词进行描述
自定义列表：<dl>
定义项目或名字：<dt>
解释项目或名字：<dd>
dl标签只能放dt和dd标签
4.案例：
代码：

<!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>
    <h3>去超市要买的东西</h3>
    <ul>
        <li>吃的</li>
        <li>
            <ul>
                <li>饼干</li>
                <li>面包</li>
                <li>巧克力
                    <ul>
                        <li>德芙</li>
                        <li>费列罗</li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>用的</li>
        <li>喝的</li>
    </ul>
</body>

</html>

三.表单

为了收集用户信息
组成：表单域，表单控件（表单，元素），提示信息
表单域：包含表单元素的区域<form>
form会把它范围内的表单元素信息提交给服务器
三种常见的属性：action=”提交到的地址“；method=”“提交方式；name=”“表单名字
1.input：输入表单元素input type=”属性值“
文本框：text
密码框：password
提交按钮：submit ，value=“字”提交按钮中显示的字
重置按钮：清空表单或回鹘默认值，reset
单选按钮：radio，可以实现多选一，但是要实现多选一，要加上name，name 是表单元素的名字，单选的选项name必须一样。
复选框：checkbox，实现多选一，复选按钮名字也要一样。value：表单中元素的值。
checked=“checked”，简写成checked：默认的选中，可以单，复。
普通按钮：button，获取短信验证码。
lable标签：将焦点（光标）转到或者选择对应的表单元素上

<lable for="text">用户名：</lable><input type="text" id="text">

for属性值对相应id属性值，应当相同。
2.select：下拉表单元素，多个选项让用户选择，节约空间

<select>
        <option>   </option>
</select>

selected=“selected”,简写成selected：默认选中
3.textarea：文本域标签，内容较多，用于定义多行文本输入的控件。
4.案例：
代码：

<!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>
    <form action="">
        <table align="center">
            <!-- 第一行 -->
            <tr>
                <td>昵称</td>
                <td><input type="text"></td>
            </tr>
            <!-- 第二行 -->
            <tr>
                <td>密码</td>
                <td><input type="password"></td>
            </tr>
            <!-- 第三行 -->
            <tr>
                <td>邮箱</td>
                <td><input type="text"><select name="" id="">
                        <option value="">qq.com</option>
                    </select></td>
            </tr>
            <!-- 第四行 -->
            <tr>
                <td>性别</td>
                <td><input type="radio" name="xingbie" id="1" checked><label for="1">男</label>
                    <input type="radio" name="xingbie" id="2"><label for="2">女</label>
                </td>
            </tr>
            <!-- 第五行 -->
            <tr>
                <td>兴趣</td>
                <td><input type="checkbox" name="xingqu" id="3"><label for="3">旅游</label>
                    <input type="checkbox" name="xingqu" id="4"><label for="4">摄影</label>
                    <input type="checkbox" name="xingqu" id="5"><label for="5">运动</label>
                </td>
            </tr>
            <!-- 第六行 -->
            <tr>
                <td>个人介绍</td>
                <td></td>
            </tr>
            <!-- 第七行 -->
            <tr>
                <td colspan="2">
                    <textarea name="" id="" cols="45" rows="5"></textarea>
                </td>
            </tr>
            <!-- 第八行 -->
            <tr align="center">
                <td colspan="2">
                    <input type="submit" value="注册">
                </td>
            </tr>
            <!-- 第九行 -->
            <tr>
                <td>上传个人照片：</td>
                <td></td>
            </tr>
            <!-- 第十行 -->
            <tr>
                <td colspan="2">
                    <input type="file" name="" id="">
                </td>
            </tr>
        </table>
    </form>
</body>

</html>

四.心得体会

今天学习的内容较多，单词也很多，需要多记多背多巩固。