列表，表格与表单

列表，表格与表单

列表

列表分为：无序列表（ul），有序列表（ol）跟自定义列表（dl）

无序列表ul
<ul> <li></li> </ul>
有序列表ol
<ol> <li></li> </ol>
自定义列表dl
<dl> <dt>dt是列表标题</dt> <dd>dd是列表项</dd> </dl>

*li的父元素最好是ul,ol中的一个，利于抓取

*列表标签中可以包含其他标签，可以用来写导航，图文列表等

表格

表格的组成标签：table,tbody,thead,tr,td/th

<table cellpadding="0" cellspacing="0" border="1">

<!-- 表格标题-->

            <caption>
                商品信息表
            </caption>

<!-- 表头-->

            <thead>
                <tr>
                    <td>ID</td>
                    <td>品名</td>
                    <td>单位</td>
                    <td>数量</td>
                    <td>金额</td>
                </tr>
            </thead>

<!-- 表格的主体，一个表格可以有多个主体，但只能有一个表头-->

            <tbody>
                <tr>
                    <td>a666</td>
                    <td>手机</td>
                    <td>888</td>
                    <td>部</td>
                    <td>1</td>
                </tr>
                <tr>
                    <td>a666</td>
                    <td>手机</td>
                    <td>888</td>
                    <td>部</td>
                    <td>1</td>
                </tr>
                <tr>
                    <td>a666</td>
                    <td>手机</td>
                    <td>888</td>
                    <td>部</td>
                    <td>1</td>
                </tr>
                <tr>
                    <td>a666</td>
                    <td>手机</td>
                    <td>888</td>
                    <td>部</td>
                    <td>1</td>
                </tr>
                <tr>
                    <td>a666</td>
                    <td>手机</td>
                    <td>888</td>
                    <td>部</td>
                    <td>1</td>
                </tr>
            </tbody>
        </table>

<!-- 表格：行与列的合并-->

colspan合并列,rowspan合并行

<table cellpadding="0" cellspacing="0" border="1">
            <caption>
                课程表
            </caption>
            <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>1</td>
                    <td>数学</td>
                    <td>语文</td>
                    <td>英语</td>
                    <td>生物</td>
                    <td>地理</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>数学</td>
                    <td>语文</td>
                    <td>英语</td>
                    <td>生物</td>
                    <td>地理</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>数学</td>
                    <td>语文</td>
                    <td>英语</td>
                    <td>生物</td>
                    <td>地理</td>
                </tr>
            </tbody>
        </table>

*caption 标签必须紧随 table 标签之后，
只能对每个表格定义一个标题，
通常这个标题会被居中于表格之上。

*所有的数据必须填充到td/th中，th是td的plus，自带加粗，居中

表单

• from

    属性action：处理表单的程序
    method：表单提交的类型——GET/POST两种，默认GET

• input

  • 文本框
    type:控件类型
    name:数据的变量名
    value:数据的值
    required:必填选项
    placeholder:提示信息

      type="text"
      <input type="text" id="username" name="username" required/>
      type="email"
      <label for="email">邮箱：</label>
      <input type="email" id="email" name="email" value="youxiang@163.com" required>
      type="password"
      <label for="password">密码：</label>
      <input type="password" id="password" name="password" placeholder="不少于6位" required/>

    

  • 单选按钮
    一组单选，必须公用一个name属性值（name相同）
    默认值：checked

      <label for="man">性别</label>
      <input type="radio" name="gender" value="male" id="man" checked><label for="man">男</label>
      <input type="radio" name="gender" value="male" id="women"><label for="women">女</label>

  • 复选框
    name值应该写成数组格式，这样才能确保服务器可以收到一组数据，默认值也是添加checked

      <label for="">兴趣:</label>
      <span><input type="checkbox" name="hobby[]" value="game" id="game"><label for="game">游戏</label></span>
      <span><input type="checkbox" name="hobby[]" value="game" id="shoot"><label for="shoot">摄影</label></span>
      <span><input type="checkbox" name="hobby[]" value="game" id="travel" checked><label for="travel">旅游</label></span>
      <span><input type="checkbox" name="hobby[]" value="game" id="program" checked><label for="program">编程</label></span>

  • 文件域和隐藏域
    1.请求类型必须是POST
    2.将表单数据编码设置为：enctype = “application/x-www-form-urlencoded”,传文件用multipart/form-data
    3.name是js或者php或者服务器中的数据,注意命名规则

      <form action="" method="post" enctype="multipart/form-data">
    <label for="user-pic">头像：</label>
    <input type="file" name="user_pic" id="user-pic">
    <!-- 隐藏域，在前端看不见，值供后台处理时用-->
          <input type="hidden" name="MAX_FILE_SIZE" value="80000">
          <!--头像占位符-->
          <div class="user-pic" style="grid-column:span 2;"></div>
      </form>

• select下拉框

<!-- multiple显示成列表 size显示数量,默认项是添加selected-->

        <label for="">学历：</label
        <select name="edu" id="edu">
            <option value="1">初中</option>
            <option value="2">高中</option>
            <option value="3" selected>大专</option>
            <option value="4">本科</option>
            <option value="5">研究生</option>
            <option value="6" label="高级选项">这里的数据没有用</option>
        </select>

• textarea多行文本框

        <label for="comment">备注：</label>
        <textarea name="comment" id="comment" cols="30" rows="10"></textarea>

• 表单控件的form属性

<!-- 不建议用此方法，会影响布局-->

<!-- form 中没有写东西，在要提交的标签上写上form=‘form的id’-->

<form action="" method="get" id="info"></form>
<div class="form-content">
   <div>
       <label for="username">用户名：</label>
       <input type="text" name="username" id="username" placeholder="不能为空" form="info" required>
    </div>
    <div>
      <label for="email">邮箱：</label>
      <input type="email" name="email" id="email" form="info">
    </div>
    <div>
      <label for="password">密码：</label>
      <input type="password" name="password" id="password" form="info">
    </div>
    <button form="info">提交</button>
</div>

tbody虽然能自动生成，但是不能省略
label中for = input中的ID
get能看到密码等,不安全;
GET可以上传非敏感数据，数量不能太多，例如页码是可以的

作业

课程表

<table cellpadding="0" cellspacing="0" border="1">
    <caption>
        课程表
    </caption>
    <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>
        <td colspan="7">中午休息</td>
    </tr>
    <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>
    </tbody>
</table>

`