1209-列表、表格、表单

1. 列表

有序列表：ul+li
无序列表：ol+li
自定义列表：dl+dt+dd

应用：

导航栏
图文列表

2.表格

table:表格
caption：标题
thead：表格头部
tbody：表格主体
tfoot：表格底部
tr：行
th：着重行，文字居中、加粗
td：列
colspan：列合并
rowspan：行合并

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>表格:行与列的合并</title>
    <link rel="stylesheet" href="style/table.css" />
  </head>
  <body>
    <!-- table:表格
          caption：标题
          thead：表格头部
          tbody：表格主体
          tfoot：表格底部
          tr：行
          th：着重行，文字居中、加粗
          td：列
          colspan：列合并
          rowspan：行合并
    -->
    <table class="lesson">
      <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 class="rest">
          <td colspan="7">中午休息</td>
        </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 colspan="4">各班自行组织,自愿参加</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

3.表单

action: 处理表单的程序（接收表单数据的地址）
method:表单提交类型（明文get，密文post)
默认为GET: 数据直接放在url地址中
POST: 表单的数据在请头体中
enctype：传输数据的方式/类型
尽管form属性可以实现将控件写到任何地方,仍然能够获取到值，但不要这样做
第一影响布局，第二代码混乱
但是，用在js中，获取数据将会变得非常的方便
input > type值：

text 通用文本框
password 密码框（密文）
email 邮箱
button 按钮
checkbox 复选框
radio 单选框
file 文件上传
hidden 隐藏域

其它控件：

select + option 下拉框
textarea 文本域
label 文本标签

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>表单</title>
    <link rel="stylesheet" href="style/form.css" />
  </head>
  <body>
    <h3 class="title">用户注册</h3>
    <!-- action: 处理表单的程序（接收表单数据的地址） 
     method:表单提交类型（明文get，密文post） 
     默认为GET: 数据直接放在url地址中 
     POST: 表单的数据在请头体中 
     enctype：传输数据的方式/类型 
     demo4.html?username=admin&email=admin%40php.cn&password=123456 
    尽管form属性可以实现将控件写到任何地方,仍然能够获取到值，但不要这样做
    第一影响布局，第二代码混乱
    但是，用在js中， 获取数据将会变得非常的方便 -->
    <form action="" method="POST" class="register" enctype="multipart/form-data">
      <!-- 1. 单行文本框 for：绑定控件id -->
      <label for="username">帐号:</label>
      <!-- type: 控件类型 -->
      <!-- name: 数据的变量名 -->
      <!-- value: 数据的内容 -->
      <input type="text" id="username" name="username" value="" placeholder="username" required />
      <!-- type="text"这是通用文本框,还有一些专用的 -->
      <!-- 邮箱型文本框 -->
      <label for="email">邮箱:</label>
      <input type="email" id="email" name="email" value="" required placeholder="demo@email.com" />
      <!-- 密码型文本框/非明文 -->
      <label for="password">密码:</label>
      <input type="password" id="password" name="password" value="" required placeholder="不少于6位" />
      <!-- 2. 单选按钮与复选框 -->
      <label for="secret">性别:</label>
      <div>
        <!-- 一组单选按钮必须共用同一个名称的name属性值，否则无法实现值的唯一性 -->
        <input type="radio" name="gender" value="male" id="male" /><label for="male">男</label>
        <input type="radio" name="gender" value="female" id="female" /><label for="female">女</label>
        <input type="radio" name="gender" value="secret" id="secret" checked /><label for="secret">保密</label>
      </div>
      <label for="#">兴趣:</label>
      <div>
        <!-- 复选框的name属性值应该写与数组的格式名称,这样才确保服务器可以接收到一组值 -->
        <input type="checkbox" name="hobby[]" value="game" id="game" checked /> <label for="game">游戏</label>
        <input type="checkbox" name="hobby[]" value="shoot" id="shoot" /> <label for="shoot">摄影</label>
        <input type="checkbox" name="hobby[]" value="travel" id="travel" /> <label for="travel">旅游</label>
        <input type="checkbox" name="hobby[]" value="program" id="program" checked /> <label for="program">编程</label>
      </div>
      <!-- 3. 下拉列表/下拉框 -->
      <label for="edu">学历:</label>
      <!-- multiple：多选
            size:可显示的选项数量      
      -->
      <!-- <select name="edu" id="edu" multiple size="2"></select> -->
      <select name="edu" id="edu">
        <option value="1">初中</option>
        <option value="2">高中</option>
        <option value="3" selected>本科</option>
        <option value="4">研究生</option>
        <!-- label属性的优先级大于option内部的文本 -->
        <!-- <option value="5" label="老司机">自学成长</option> -->
      </select>
      <!-- 4. 文件域与隐藏域 -->
      <!-- 上传文件要注意二点:
      1. 请求类型必须是: POST 
      2. 将表单数据编码设置为:  -->
      <label for="user-pic">头像:</label>
      <!-- 隐藏域,在前端页面看不到的,它的值供后端处理时用 -->
      <input type="hidden" name="MAX_FILE_SIZE" value="80000" />
      <input type="file" name="user_pic" id="user-pic" />
      <!-- 头像占位符 -->
      <div class="user-pic" style="grid-column: span 2"></div>
      <label for="user-resume">简历:</label>
      <!-- 隐藏域,在前端页面看不到的,它的值供后端处理时用 -->
      <input type="hidden" name="MAX_FILE_SIZE" value="100000" />
      <input type="file" name="user_resume" id="user-resume" />
      <div class="user-resume" style="grid-column: span 2"></div>
      <!-- 5. 文本域 -->
      <label for="comment">备注:</label>
      <textarea name="comment" id="comment" cols="30" rows="5"></textarea>
      <!-- 提交按钮 -->
      <button>提交</button>
    </form>
  </body>
</html>
<script src="style/demo7.js"></script>

Correcting teacher：

天蓬老师

Correction status：qualified

Teacher's comments：

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

1208-插件安装和html标签

2020-12-10 14:44:40