列表表格表单用法及定义 1209 作业

列表表格表单用法及定义

一.列表

1.无序列表说明

无序列表是由ul标签和li标签组成可以用于导航栏

<h2>无序列表</h2>
    <ul>
        <li>123</li>
        <li>345</li>
        <li>678</li>
    </ul>

2.有序列表说明

有序列表是由ol标签和li标签组成可以用于按顺序排列的内容

<h2>有序列表</h2>
    <ol>
        <li>123</li>
        <li>345</li>
        <li>678</li>
    </ol>

3.自定义列表

自定义列表是由dl dt和dd标签组成可以用于分类列表

<h2>自定义列表</h2>
    <dl>
        <dt>名字:</dt>
        <dd>某某某</dd>
        <dt>电话：</dt>
        <dd><a href="tel:17306514631">电话</a>173******12</dd>
        <dt>邮箱：</dt>
        <dd><a href="email:202078100@qq.com"></a>202078100@qq.com</dd>

二.表格和表格行与列的合并

1.表格

HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。
tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。
还有thead标签是包裹表头 tbody标签包裹表格内容

<table class="product">
        <caption>商品</caption>
        <thead>
            <tr>
                <th>名字</th>
                <th>金额</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>手机</td>
                <td>10000</td>
            </tr>
        </tbody>
    </table>

2.表格行与列的合并

colspan是合并行的属性rowspan是合并列的属性

<h3>课程表</h3>
    <table>
        <thead>
            <tr>
                <th colspan="2"></th>
                <th>星期一</th>
                <th>星期二</th>
                <th>星期三</th>
                <th>星期四</th>
                <th>星期五</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan="4">上午</td>
                <td>1</td>
                <td>上班</td>
                <td>下班</td>
                <td>吃饭</td>
                <td>睡觉</td>
                <td>打豆豆</td>
            </tr>
            <tr>
                <td>2</td>
                <td>上班</td>
                <td>下班</td>
                <td>吃饭</td>
                <td>睡觉</td>
                <td>打豆豆</td>
            </tr>
            <tr>
                <td>3</td>
                <td>上班</td>
                <td>下班</td>
                <td>吃饭</td>
                <td>睡觉</td>
                <td>打豆豆</td>
            </tr>
            <tr>
                <td>4</td>
                <td>上班</td>
                <td>下班</td>
                <td>吃饭</td>
                <td>睡觉</td>
                <td>打豆豆</td>
            </tr>
            <tr>
                <th colspan="7">休息</th>
            </tr>
            <tr>
                <td rowspan="3">下午</td>
                <td>5</td>
                <td>上班</td>
                <td>下班</td>
                <td>吃饭</td>
                <td>睡觉</td>
                <td>打豆豆</td>
            </tr>
            <tr>
                <td>6</td>
                <td>上班</td>
                <td>下班</td>
                <td>吃饭</td>
                <td>睡觉</td>
                <td>打豆豆</td>
            </tr>
            <tr>
                <td>7</td>
                <td>上班</td>
                <td>下班</td>
                <th colspan="3">运动</th>
            </tr>
        </tbody>
    </table>

三.表单

<form> 标签用于为用户输入创建 HTML 表单

属性	值
action	提交地址
method	提交方式 GET POST

<input> 标签属性值

属性	值
checked	规定此 input 元素首次加载时应当被选中
type	checkbox(多选) file（文件） hidden（隐藏域） image（图片） password（密码框） radio（单选） text（文本框）
value	value（规定元素的值）
name	元素的名称

<form action="" method="GET">
        <label for="user">用户名：<label>
        <input id="user" type="text" name="user_name" placeholder="user"/>
        <p>
            <label for="password">密码：</label>
            <input id="password" type="password" name="password" placeholder="不得少于6位"/>
        </p>
        <p>
            <label for="email">邮箱：</label>
            <input id="email" type="email" name="email"/>
        </p>
        <p>
            <label for="bm">性别：</label>
            <input type="radio" name="sex" value="nv" id="nv"/><label for="nv">女</label>
            <input type="radio" name="sex" value="nan" id="nan"/><label for="nan">男</label>
            <input type="radio" name="sex" value="bm" id="bm" checked/><label for="bm">保密</label>
        </p>
        <p>
            <label for="#">兴趣：</label>
            <input type="checkbox" name="xq[]" value="zq" id="zq"/><label for="zq">足球</label>
            <input type="checkbox" name="xq[]" value="lq" id="lq"/><label for="lq">篮球</label>
            <input type="checkbox" name="xq[]" value="ppq" id="ppq"/><label for="ppq">乒乓球</label>
        </p>
        <p>
            <label for="edu">学历:</label>
            <select id="edu">
                <option value="1" >初中</option>
                <option value="2" >高中</option>
            </select>
        </p>
        <p>
            <label for="">照片：</label>
            <input type="file" name="file" />
        </p>
        <p>
            <label for="">简历：</label>
            <input type="file" name="file" />
        </p>
        <p>
            <label>备注：</label>
            <textarea></textarea>
        </p>
        <button>提交</button>
    </form>

列表 表格 表单 用法及定义 1209 作业

列表 表格 表单 用法及定义