表格及表单 | 易学教程

一.列表：

1.无序列表：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h3>热门活动&nbsp;&nbsp;&nbsp;更多</h3>
<ul>
    <li>
        <img src="image/img1.png" alt="">
        <p>推荐活动 | |原创音乐现金榜T榜|</p>
    </li>
    <li>
        <img src="image/img2.png" alt="">
        <p>推荐节目|《TAImusic》爆笑来袭</p>
    </li>
    <li>
        <img src="image/img3.png" alt="">
        <p>推荐歌单 | 继续宠爱张国荣</p>
    </li>
    <li>
        <img src="image/img4.png" alt="">
        <p>推荐活动| 330金属音乐巡演 成都小酒馆音乐空间</p>
    </li>
</ul>

</body>
</html>

2.定义列表：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<dl>
    <dt>
        热门活动
    </dt>
    <dd>
        <p>推荐节目|《TAImusic》爆笑来袭</p>
    </dd>
    <dd>
        <img src="image/img3.png" alt="">
        <p>推荐歌单 | 继续宠爱张国荣</p>
    </dd>
    <dd>
        <img src="image/img4.png" alt="">
        <p>推荐活动| 330金属音乐巡演 成都小酒馆音乐空间</p>
    </dd>
</dl>
</body>
</html>

3.有序列表：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h3>热门活动&nbsp;&nbsp;&nbsp;更多</h3>
<ol>
    <li>
        <img src="image/img1.png" alt="">
        <p>推荐活动 | |原创音乐现金榜T榜|</p>
    </li>
    <li>
        <img src="image/img2.png" alt="">
        <p>推荐节目|《TAImusic》爆笑来袭</p>
    </li>
    <li>
        <img src="image/img3.png" alt="">
        <p>推荐歌单 | 继续宠爱张国荣</p>
    </li>
    <li>
        <img src="image/img4.png" alt="">
        <p>推荐活动| 330金属音乐巡演 成都小酒馆音乐空间</p>
    </li>
</ol>

</body>
</html>

二.表格

1.跨行：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="2">
    <tr>
        <th>总页面流量</th>
        <th>共计来访</th>
        <th>会员</th>
        <th>游客</th>
    </tr>
    <tr>　　　　　<td>9756488</td>
        <td>97656</td>
        <td>7538087</td>
        <td>568787</td>
    </tr>
    <tr>
        <td>46776686</td>
        <td>85544</td>
        <td>69357</td>
        <td>568787</td>
    </tr>
    <tr>
        <td>7538087</td>
        <td>546774</td>
        <td>476897</td>
        <td>334545</td>
    </tr>
    <tr>
        <td>平均每人浏览</td>
        <td colspan="3">1.58</td>
    </tr>
</table>

</body>
</html>

2.跨列：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="2">
    <tr>
        <th>总页面流量</th>
        <th>共计来访</th>
        <th>会员</th>
        <th>游客</th>
    </tr>
    <tr>
　　　<td rowspan="2">9756488</td>
        <td>97656</td>
        <td>7538087</td>
        <td>568787</td>
    </tr>
    <tr>
        <td>46776686</td>
        <td>85544</td>
        <td>69357</td>
        <td>568787</td>
    </tr>
    <tr>
        <td>7538087</td>
        <td>546774</td>
        <td>476897</td>
        <td>334545</td>
    </tr>
    <tr>
        <td>平均每人浏览</td>
        <td colspan="3">1.58</td>
    </tr>
</table>

</body>
</html>

3.表格对齐：align:left/center/fight;

　单元格内容水平对齐：align:left/center/fight;　

　单元格垂直对齐：valign: top/center/middle/bottom;

三.表单：　　

1.基本语法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form method="post" action="result.html">
    <p>名字：<input name="name" type="text" size="21" maxlength="15"/></p>
    <p>密码：<input name="pass" type="password"/></p>
    <p>
        <input type="submit" name="Button" value="提交"/>
        <input type="reset" name="Reset" value="重填 "/>
    </p>
</form>
</body>
</html>

action="result.html"表示文件提交位置，method="post/get":post方式提交不会显示密码，更安全。 size="21"表示文本框长度30，maxlength="15"表示允许最多输入15个字符

1.单选按钮：radio用于相互排斥的一组值，只能选一个

<form method="post" action="">
    性别：
    <input name="gen" type="radio" class="input" value="男"/>男
    <input name="gen" type="radio" class="input" value="女"/>女
</form>

2.复选框：checkbox类似于单选按钮，只不过它能同时多选

<form method="post" action="">
    性别：
    <input name="interest" type="checkbox" value="sport"/>运动
    <input name="interest" type="checkbox" value="talk"/>聊天
    <input name="interest" type="checkbox" value="play"/>玩游戏
</form>

3.按钮butoon和提交按钮submit及重置按钮reset

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form method="post" action="">
    <p>用户名：<input name="name" type="text"/></p>
    <p>密码：<input name="pass" type="password"/></p>
    <p>
        <input name="butReset" type="reset" value="按钮">
        <input name="butSubmit" type="submit" value="按钮">
        <input name="butButton" type="button" value="按钮">
    </p>
</form>
</body>
</html>

4.下拉列表框：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img src="素材/image/renren_titile.gif" alt="">
<p>
    人人网，中国 <strong>最真实、最有效</strong>的社会平台，加入 <br/>人人网，找回老朋友，结交新朋友。
</p>
<form action="#" method="post">
    <p>
        <label for="aa">电子邮箱:</label> <input name="youxaing" type="text" id="aa">
    </p>
    <p>
        <label for="ab">设置密码: </label><input name="pass" type="password" id="ab">
    </p>
    <p>
        <label for="ac">真实姓名: </label><input name="name" type="text" id="ac">
    </p>
    <p>
        性别：<input name="gen" type="radio" value="男" class="input" id="bb"><label for="bb">男</label>
            <input name="gen" type="radio" value="女" class="input" id="cc"><label for="cc">女</label>
    </p>
    <p>
        生日： <select name="year" id="aq">
            <option value="1991">1991年</option>
            <option value="19922">1992年</option>
            <option value="1993">1993年</option>
        </select><label for="aq">年</label>
        <select name="mon">
        <option value="1">11</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
            <option value="11">1</option>
            <option value="12">12</option>
    </select>月
        <select name="year">
            <option value="1">1</option>
            <option value="22">22</option>
            <option value="13">13</option>
        </select>日
    </p>
    <p>
        我现在：<select name="shenfen" >
        <option value="#">请选择身份</option>
        <option value="">中国居民</option>
        <option value="">外籍人士</option>
        </select>(非常重要)
    </p>
    <p>
        <img src="素材/image/renren_code.gif" alt="">
        <a href="#">看不清换一张？</a>
    </p>
    <p>
        <label for="pp">验证: </label><input name="pass" type="password" id="pp">
    </p>
    <input type="image" src="素材/image/renren.gif">
</form>
</body>
</html>

5.图片按钮：<input type="image" src="../image/.."/>

6.多行文本域：textarea ， cols="30表示30列， rows="10"表示10行

</form>
<form method="post" action="">
    <h4>填写评价</h4>
    <p><textarea name="textarea"  cols="30" rows="10"></textarea></p>
</form>

来源：https://www.cnblogs.com/Aaron-Feng/p/12002994.html

标签

input

html表格

表单验证

charset

label