HTML5基础 (day3)

一、表格标签(续)

1.合并单元格

HTML5基础 (day3)_第1张图片
HTML5基础 (day3)_第2张图片HTML5基础 (day3)_第3张图片HTML5基础 (day3)_第4张图片

2.示例

<body>
    <table border="2" cellpadding="0" cellspacing="0" width="500" height="233" >
        <tr>
            <td>td>
            <td colspan="2">td>

        tr>
        <tr>
            <td rowspan="2">td>
            <td>td>
            <td>td>
        tr>
        <tr>
           
            <td>td>
            <td>td>
        tr>
    table>
body>

3.表格总结

HTML5基础 (day3)_第5张图片
HTML5基础 (day3)_第6张图片HTML5基础 (day3)_第7张图片HTML5基础 (day3)_第8张图片

二、列表标签

1.了解列表标签HTML5基础 (day3)_第9张图片

2.列表的三大类

(1)无序列表HTML5基础 (day3)_第10张图片

  • 示例

<h4>水果碰碰撞h4>
    <ul>
        <li>榴莲li>
        <li>山竹li>
        <li>荔枝li>
    ul>

(2)有序列表

HTML5基础 (day3)_第11张图片

  • 示例

<h4>运动排行h4>
    <ol>
        <li>打羽毛球 100li>
        <li>打乒乓球 99li>
        <li>跑步 33li>
    ol>

(3)自定义列表

HTML5基础 (day3)_第12张图片HTML5基础 (day3)_第13张图片

  • 示例

<dl>
        <dt>关注我们dt>
        <dd>新浪微博dd>
        <dd>官方微信dd>
        <dd>联系我们dd>
        <dt>关注我们dt>
        <dd>新浪微博dd>
        <dd>官方微信dd>
        <dd>联系我们dd>
    dl>

(4)列表总结

HTML5基础 (day3)_第14张图片

三、表单标签

1.为什么需要表单

HTML5基础 (day3)_第15张图片

2.表单的组成

HTML5基础 (day3)_第16张图片

3.表单域

HTML5基础 (day3)_第17张图片
HTML5基础 (day3)_第18张图片

  • 示例

<body>
    <form action="demo.html" method="POST" name="name1">

    form>

4.表单控件(表单元素)

HTML5基础 (day3)_第19张图片

(1)input表单元素

HTML5基础 (day3)_第20张图片
HTML5基础 (day3)_第21张图片
HTML5基础 (day3)_第22张图片
HTML5基础 (day3)_第23张图片HTML5基础 (day3)_第24张图片HTML5基础 (day3)_第25张图片HTML5基础 (day3)_第26张图片

  • 示例

<title>input表单元素之type属性title>
head>
<body>
    <form action="xxx.php" method="get">
        
        用户名:<input type="text" name="username" value="请输入表单名" maxlength="6"/><br>
        
        密码:<input type="password" name="pwd"><br>
        
        
        
        性别:男<input type="radio" name="sex" value=""><input type="radio" name="sex" value="" checked="checked"><br>
        
        爱好:旅游<input type="checkbox" name="hobby" value="旅游" checked="checked"> 看电视<input type="checkbox" name="hobby" value="看电视"> 打球<input type="checkbox" name="hobby" value="打球"><br>
        
        <input type="submit"><br>
        <input type="submit" value="免费注册">
        
        <input type="reset" value="重新填写">
        
        <input type="button" value="获取短信验证码"><br>
        
        上传头像:<input type="file">

    form>
body>

(2)label标签

HTML5基础 (day3)_第27张图片

  • 示例

<body>
    <label for="name" >用户名:label><input type="text" id="name"><br>
    <input type="radio" id="man" name="sex" > <label for="man">label>
    <input type="radio" id="woman" name="sex"><label for="woman">label>
    
body>

(3)select 下拉表单元素

HTML5基础 (day3)_第28张图片

  • 示例

<title>下拉表单title>
head>
<body>
    <form>
    籍贯:
    <select>
        <option>喵市option>
        <option selected="selected">犬市option>
        <option>羊市option>
    select>
form>
body>

(4)textarea表单元素

HTML5基础 (day3)_第29张图片
HTML5基础 (day3)_第30张图片

  • 示例

<title>文本域标签title>
head>
<body>
    <form>
        今日反馈:
        <textarea cols="50" rows="9">玛卡巴卡玛卡巴卡唔西迪西依古比古汤姆布利柏textarea>
    form>
body>

5.综合案例

HTML5基础 (day3)_第31张图片
HTML5基础 (day3)_第32张图片

  • 示例

<title>综合案例title>
head>
<body>
    <table width="600">
        
        <tr>
            <td>性别td>
            <td>
                <input type="radio" name="sex" id="nan" checked="checked"><label for="nan"><img src="../img/2.png">label>
                <input type="radio" name="sex" id="nv"><label for="nv"><img src="../img/2.png">label>
            td>
        tr>
        
        <tr>
            <td>生日td>
            <td>
            <select>
                <option>--请选择年份--option>
                <option>2001option>
                <option selected="selected">2002option>
                <option>2003option>
            select>
            <select>
                <option>--请选择月份--option>
                <option>1option>
                <option selected="selected">2option>
                <option>3option>
            select> 
            <select>   
                <option>--请选择日--option>
                <option>22option>
                <option>15option>
                <option selected="selected">16option>
            select>
        td>
        tr>
        
        <tr>
            <td>所在地区td>
            <td><input type="text" value="北京思密达">td>  
        tr>
        
        <tr>
            <td>婚姻状况td>
            <td>
                <input type="radio" name="marry" checked="checked">未婚 <input type="radio" name="marry">已婚 <input type="radio" name="marry">离婚
            td>
        tr>
        
        <tr>
            <td>学历td>
            <td><input type="text" value="博士">td>
        tr>
        
        <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" checked="checked">都喜欢
        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>
    

    
    
body>

你可能感兴趣的:(html5,html,css)