青春不常在，抓紧谈恋爱小案例,表格标签、列表标签、表单标签 的综合练习

青春不常在，抓紧谈恋爱小案例里面要用到的知识点：

<select>下拉列表。
<ul>无序列表。

表格标签

1. <table> </table>是用于定义表格的标签。
2. <tr> </tr> 标签用于定义表格中的行，必须嵌套在 <table> </table>标签中。
3. <td> </td>用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。
   

input 表单元素
input 是输入的意思，而在表单元素中 标签用于收集用户信息。 在 标签中，包含一个 type 属性，根据不同的 type 属性值，输入字段拥有很多种形式。
type属性的属性值：

属性值	描述
radio	定义单选按钮
checkbox	定义复选框
text	定义行的输入字段，用户可在其中输入文本。默认长度为20字符
submit	定义提交按钮。提交按钮会把表单数据发送到服务器。

<input>的其他属性

属性	属性值	描述
name	由用户自定义	定义input 元素的名称
value	由用户自定义	规定 input 元素的值
checked	checked	规定 input 元素首次加载时应当被选中。

1. name 和value 是每个表单元素都有的属性值,主要给后台人员使用.
2. name 表单元素的名字, 要求 单选按钮和复选框都要有相同的name值.
3. checked属性主要针对于单选按钮和复选框, 主要作用一打开页面,就要可以默认选中某个表单元素。

label 标签
<label>标签为 input 元素定义标注（标签）。
<label> 标签用于绑定一个表单元素, 当点击<label> 标签内的文本时，浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上,用来增加用户体验.
语法：

<label for="sex">男</label>
<input type="radio" name="sex" id="sex" />

核心： <label> 标签的 for 属性应当与相关元素的 id 属性相同。

奶盖记忆：
table 用来定义表格标签，tr 行， td 单元格。

注意的：radio按钮都必须要有name属性，并name里面的值要一样,不然单选按钮会所有选项都能选上。

看中哪个，默认选中第一眼就要用checked=“checked”。

 <input type="radio" name="marry"checked="checked">未婚
                <input type="radio" name="marry">已婚
                <input type="radio" name="marry" id="lihun">离婚
 <input type="checkbox" name="love" checked="checked">奶奶的
                <input type="checkbox" name="love">可爱的
                <input type="checkbox" name="love">帅帅的
                <input type="checkbox" name="love">痞痞的
                <input type="checkbox" name="love">都喜欢

想要不点框框也能选中项，那就要用到<lable>,但是注意点，<lable>标签里面的for属性值和<input的 id属性值要一样才起到作用哦。

<input type="radio" name="sex" id="nan"> <label for="nan"><img src="images/man.jpg"> 男</label>
<input type="radio" name="sex" id="nv"> <label for="nv"><img src="images/women.jpg"> 女</label

text文本框，submit提交按钮，submit可以通过修改 value里面的值，改变里面的文字。

<input type="submit" >//在页面按钮显示  提交
<input type="submit" value="免费注册">//在页面按钮显示  免费注册

好啦，直接上代码

    <h4>青春不常在，抓紧谈恋爱</h4>
    <!--第一行-->
    <table width="600">
        <tr>
            <td>性别：</td>
            <td>
                <!--radio单选按钮，-->
                <input type="radio" name="sex" id="nan"> <label for="nan"><img src="images/man.jpg"> 男</label>
                <input type="radio" name="sex" id="nv"> <label for="nv"><img src="images/women.jpg"> 女</label>
            </td>
        </tr>
        <!--第二行-->
        <tr>
            <td>生日：</td>
            <td>
                <select>
                    <option>--请选择年份--</option>
                    <option>1999</option>
                    <option>2000</option>
                    <option>2001</option>
                </select>
                <select>
                    <option>--请选择月份--</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                </select>
                <select>
                    <option>--请选择日--</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>所在地区</td>
            <td><input type="text" value="北京"></td>
        </tr>
        <!--第四行-->
        <tr>
            <td>婚姻状况：</td>
            <td>
                <input type="radio" name="marry" id="weihun" checked="checked"><label for="weihun">未婚</label>
                <input type="radio" name="marry" id="yihun"><label for="yihun">已婚</label>
                <input type="radio" name="marry" id="lihun"><label for="lihun">离婚</label>
            </td>
        </tr>
        <!--第五行-->
        <tr>
            <td>学历：</td>
            <td><input type="text" value="幼儿园"></td>
        </tr>
        <!--第六行-->
        <tr>
            <td>喜欢的类型：</td>
            <td>
                <input type="checkbox" name="love" checked="checked">奶奶的
                <input type="checkbox" name="love">可爱的
                <input type="checkbox" name="love">帅帅的
                <input type="checkbox" name="love">痞痞的
                <input type="checkbox" name="love">都喜欢
            </td>
        </tr>
        <!--第七行-->
        <tr>
            <td>个人介绍</td>
            <td>
                <textarea>个人简介</textarea>
            </td>
        </tr>
        <!--第八行-->
        <tr>
            <td></td>
            <td>
                <input type="submit" value="免费注册">
            </td>
        </tr>
        <!--第九行-->
        <tr>
            <td></td>
            <td>
                <input type="checkbox" checked="checked">我同意注册条款和会员加入标准
            </td>
        </tr>
        <!--第十行 -->
        <tr>
            <td></td>
            <td>
                <a href="#">我是会员，立即登录</a>
            </td>
        </tr>
        <!--第十一行 -->
        <tr>
            <td></td>
            <td>
               <h5>我承诺</h5>
               <ul>
                   <li>年满18岁、单身</li>
                   <li>抱着严肃的态度</li>
                   <li>真诚寻找另一半</li>
               </ul>
            </td>
        </tr>

 
    </table>

展示图