(列表、表格)与表单控件

列表

有序列表 <ol+li>

<h3>购物车</h3>
<ol>
  <li>牛奶一箱</li>
  <li>苹果一箱</li>
  <li>啤酒一件</li>
</ol>

无序列表<ul+li>

<h3>购物车</h3>
<ul>
  <li>鸡蛋一箱</li>
  <li>栗子一箱</li>
  <li>饮料一件</li>
</ul>

3. 自定义列表 dl+dt+dd

<dl>
  <dt>名称:</dt>
  <dd>漳州灵感职业技术学院</dd>
</dl>

表格

表格也是用一组标签来描述:table,thead,tbody,tr,td/th
 所有的数据必须填充到 td /th 中, th 是 td 的 PLus+,自带了一个加粗和居中的样式
表格的主体,一个表格只能有一个表头,但可以有多个主体

   <table class="zhanzou">
    //表格标题
    <caption>
    漳州市初中课程表
    </caption>
    //表头
    <thead>
    //每添加一组数据前先添加一行
       <tr>
         <th colspan="2"></th>
         <!-- <th></th> -->
         <th>星期一</th>
         <th>星期二</th>
         <th>星期三</th>
         <th>星期四</th>
         <th>星期五</th>
        </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>
          <td>物理</td>
        </tr>
        <tr>
          <td>三</td>
          <td>音乐</td>
          <td>电脑</td>
          <td>书法</td>
          <td>思维</td>
          <td>英语</td>
        </tr>
        <tr>
          <td>四</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>五</td>
          <td>政治</td>
          <td>书法</td>
          <td>瑜伽</td>
          <td>化学</td>
          <td>物理</td>
        </tr>
        <tr>
          <td>六</td>
          <td>音乐</td>
          <td>电脑</td>
          <td>书法</td>
          <td>思维</td>
          <td>英语</td>
        </tr>
        <tr>
          <td>七</td>
          <td>音乐</td>
          <td colspan>休息</td>
        </tr>
       </tbody>
    </table>

表单控件与隐藏域

type: 控件类型 name: 数据的变量名 value: 数据的内容
     <inputinputtypetype="text"id="username" name="username"value=""placeholder="username"repuired/>
 //表单控件
    <h3 class="title">用户注册</h3>
    <form action="" method="POST" class="register">
action: 处理表单的程序 method:: 表单提交类型 默认GET: 数据直接放在url地址中 POST: 表单的数据在请头体中
    //1. 单行文本框
    <label for="username">账号:</label>
     //type="text" 这是通用文本框,还有一些专用的
     //邮箱型文本框
    <label for="emalil">邮箱:</label>
    <input type="email" id="email" name="email" value="" placeholder="demo@email.com" repuired/>
        //密码型文本框/非明文
    <label for="password">密码:</label>
    <input type="password" id="password" name="password" value="" placeholder="不少于6位" repuired/>

4. 文件域与隐藏域：

上传文件要注意两点:

请求类型必须是: POST
将表单数据编码设置为：

      <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-pic">简历:</label>
      <!-- 隐藏域,在前端页面看不到的,它的值供后端处理时用 -->
      <input type="hidden" name="MAX_FILE_SIZE" value="100000" />
      <input type="file" name="user_pic" id="user-resume" />
      <!-- 简历占位符 -->
      <div class="user-resnme" style="grid-column: span 2"></div>
       <!-- 提交按钮 -->
       <button>提交</button>
    </form>

表单的form属性

    <h3 class="title">用户注册</h3>
    <form action="check.php" method="get" id="register">
        <div class="box">
     //使用form属性将控件和它所属的表单进行 关联、绑定
             <label for="username">账号:</label>
          <input type="text"form="register" name="username"id="username" placeholder="不能为空"/>
             <label for="email">邮箱:</label>
         <input type="email"form="register" name="email"id="meail"placeholder="demo@meail.com"/>
        <label for="password">密码:</label> <input type="password"form="register"name="password"id="password"placeholder="至少八位"/>
        <button form="register">提交</button>
     </div>
</form>

尽管form属性可以实现将控件写到如何地方,仍然能获取到值，但不要这样做第一影响布局，第二代码混乱 都是,用在js中,获取数据会变得非常方便