HTML 列表和表格于表单的应用

HTML 列表及表格与表单

无序列表

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>列表及报个与表单</title>
    </head>
    <body>
        <h2>无序列表</h2>
        <ul>
            <li><a href="">我是第一个</a></li>
            <li><a href="">我是第二个</a></li>
        </ul>
        <hr>
        <h2>有序列表</h2>
        <ol>
            <li><a href=""><img src=""> 我是第一个</a></li>
            <li><a href=""><img src="">我是第二个</a></li>
        </ol>
        <hr>
        <h2>自定义列表</h2>
        <dr>
            <dt>这是表头</dt>
            <dd>这是内容</dd>
            <dd>这是内容</dd>
        </dr>
    </body>
</html>

dr 自定义列表经常使用现在页面的底部

有序列表和无序列表一般使用在导航

表格的应用

<!DOCTYPE html>
<html>
<head>
    <title>表格的使用</title>
    <meta charset="UTF-8">
</head>
<body>
    <table border="1" cellpandding="0">
    <caption>课程表</caption>
    <thead>
        <tr>
            <td></td>
            <td>星期一</td>
            <td>星期二</td>
            <td>星期三</td>
            <td>星期四</td>
            <td>星期五</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td rowspan="4">上午</td>
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
            <td>化学</td>
            <td>科学</td>
        </tr>
        <tr>
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
            <td>化学</td>
            <td>科学</td>
        </tr>
        <tr>
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
            <td>化学</td>
            <td>科学</td>
        </tr>
        <tr>
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
            <td>化学</td>
            <td>科学</td>
        </tr>
        <tr>
        <td colspan="6">中午休息</td>
        </tr>
        <tr>
            <td rowspan="3">下午</td>
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
            <td>化学</td>
            <td>科学</td>
        </tr>
        <tr>
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
            <td>化学</td>
            <td>科学</td>
        </tr>
        <tr>
            <td colspan="4">课外活动</td>
            <td>自由活动</td>
        </tr>
    </tbody>
    </table>
</body>
</html>

caption 是大标题
thead 是表头
tbody 是表数据
colspan 是列合并
rowspan 是行合并
th 居中加粗显示

表单的格式及应用

form 表单标签
action 属性(提交)=”属性值(提交的地址)”
method 属性(提交方式)=”GET/POST” 默认是GET
enctype 属性(文件的格式化)=”application/x-www-form-urlencoded(默认的)”
label for=”属性值于input里面的ID是一致的用于用户体验”
input type 属性=”(text password email )” name 是必须值用于收集数据 value属性=”可选值” placeholders 属性 =”用户提示信息” required 属性 “用于验证户必须填写”
单选框 radio name=”必填项”
复选框 checkbox name=”必须一致” name=”user_name[]”
单选框和复选框 checked 属性用于用户体验
textarea 文本域 rows=”30” cols=”10” (rows和cols 是用来设置文本域的宽和高)
hidden 隐藏表单 NAME=”MAX_FILS_SIZE” value=”8000” 用于设置文件的大小
上传文件要把 enctype属性修改为=”multipart/form-data”
<form action="" method="" enctype="application/x-www-form-urlencoded">
    <label for="user_name">账号<label>
    <input type="text" name="user_name" value placehoder="账号" id="user_name" required/>
    <label for="">性别</label>
    <input type="radio" checked><label>男</label>
    <input type="radio"><label>女</label>
    <label for="">兴趣</label>
    <input type="checkbox" name="aiao"><label>游戏</label>
    <input type="checkbox" name="aiao" checked><label>英雄联盟</label>
    <input type="checkbox" name="aiao"><label>手游</label>
    <label for="">文本域</label>
    <textarea name="textarea" rows="30" cols="10"></textarea>
    <label for="">上传文件</label>
    <input type="hidden" name="MAX_FILS_SIZE" value="8192">
    <input type="file" name="file">
    <button>提交</button>
</form>

HTML 列表及表格与表单

有序列表和无序列表一般使用在导航

表单的格式及应用

相关文章