HTML功能元素基本操作（列表、表格、表单）

列表

无序列表

<ul type="circle">

        <li>七海</li>

        <li>英子</li>

        <li>孔明</li>

    </ul>

 其中ul列表的type存在有disc 默认值 实心圆 circle 空心圆 square 实心方块三种选择

有序列表

  <ol>

        <li>kabe</li>

        <li>time machine</li>

        <li>hiphop三连霸</li>

    </ol>

 定义列表

<dl>

        <!-- 列表标题 -->

        <dt>AZALEA</dt>

        <!-- 对标题的描述 -->

        <dd>永遠</dd>

    </dl>

table表格

 <table cellspacing="0" cellpadding="10px" border="1" width="100px" height="30px" align="left">

        <!-- cellspacing外边距 默认情况下单元格和单元格之间的外边距的距离是2px 
cellpadding 内边距 默认情况下内边距是1-->

        <!-- order边框属性, 这个属性决定了边框的宽度. 
默认情况下这个属性的值是0, 所以看不到边框 -->

        <!-- 给teble设置align（left、right、center）为设置表格在页内的位置 -->

        <!-- tr行 td列 -->

       

        <tr>

            <th>1</th>

            <th>3</th>

        </tr>

        <tr align="center">

            <!-- 给tr标签设置align属性, 为行内所有表格内容设置对齐方式 -->

            <!-- valign是垂直对齐 top bottom mid -->

            <td align="right">2</td>

            <!-- 给td标签设置align属性, 为本表格的内容设置对齐方式 -->

            <td>4</td>

        </tr>

    </table>

 

<table bgcolor="black" cellspacing="1px">
        <!-- 设置单线表格 -->
        <tr bgcolor="white">
            <th>1</th>
        </tr>
        <tr bgcolor="white">
            <td>2</td>
        </tr>
    </table>

 

<table border="1">
        <caption>个人信息</caption>
        <!-- 标题部分 -->
        <thead>
            <tr>
                <!-- colspan="3" 三列合并 rowspan="3" 合并三行 -->
                <th>1</th>
                <th>2</th>
                <th>3</th>
                <th>4</th>
                <th>5</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>11</td>
                <td colspan="3">22</td>
                <td rowspan="2">55</td>
            </tr>
            <tr>
                <td>12</td>
                <td>12</td>
                <td>12</td>
                <td>12</td>
            </tr>
        </tbody>
        <tfoot></tfoot>
    </table>

 

form表单 

 

<form action="test.html">
        账号：<input type="text" name="user"><br>
        密码：<input type="password" name="pwd"><br>
        <!-- readonly disable -->
        角色：
        管理员<input type="radio" name="role" value="admin">
        顾客<input type="radio" name="role" value="customer">
        员工<input type="radio" name="role" value="employee">
        <br>
        爱好：
        唱<input type="checkbox">
        跳<input type="checkbox">
        rap<input type="checkbox">
        <br>
        <input type="file" value="file">
        <br>
        <input type="button" value="按钮">
        <input type="image" src="" value="图片">
        <input type="reset" value="重置">
        <input type="hidden" name="token" value="隐藏">
        <input type="submit" value="提交">
    </form>

 

<form action="">
        <label for="ba">用户名：</label>
        <input type="text" id="ba" name="name">
        <select name="city" id="">
            <optgroup label="一线城市">
                <option value="none" selected></option>
                <!-- selected默认选中 -->
                <option value="shanghai">上海</option>
            </optgroup>
            
        </select>
        <textarea name="" id="" cols="30" rows="10"></textarea>
        <fieldset>
            账号：<input type="text">
            密码：<input type="password">
            <input type="submit" value="提交">
        </fieldset>
    </form>

 

<form action="">
        <input type="text" list="input_ref">
        <datalist id="input_ref">
            <option>周一</option>
            <option>周二</option>
            <option>周三</option>
        </datalist>
        <progress value="30" max="100"></progress>
        <input type="range" step="1" max="100" min="0">
        <input type="email" >
        <input type="tel" pattern="1[0-9]{10}">
        <input type="url" >
        <input type="datetime-local" name="" id="">
        <input type="date" name="" id="">
        <input type="color" name="" id="">
        <input type="submit" value="提交">
        <br>
        <mark>高亮</mark>
        <cite>倾斜</cite>
        <pre>
            <code>var a=1;</code>
        </pre>
        <strike>删除线</strike>
    </form>