1209-列表,表格,表单与框架

列表元素

说明	值
无序列表	<ul> <li>
有序列表	<ol> <li>
自定义列表	<dl><dt><dd>

无序列表 <ul> < li >

<h3>购物车</h3>
<ul>
  <li>香蕉</li>
  <li>苹果</li>
  <ul></ul>
</ul>

有序列表 <ol> <li>

<h3>购物车</h3>
<ol>
  <li>榴莲</li>
  <li>番茄</li>
</ol>

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

<dl>
  <dt>名称：</dt>
  <dd>php中文网</dd>
</dl>

应用 1：导航

<ul class="menu">
  <li><a href="">首页</a></li>
  <li><a href="">教学</a></li>
  <li><a href="">社区</a></li>
  <li><a href="">下载</a></li>
  <li><a href="">登录</a></li>
</ul>

应用 2：图文列表

<ul class="list">
  <li>
    <a href=""><img src="images/1.jpg" /></a>
    <a href="">美女</a>
  </li>
  <li>
    <a href=""><img src="images/1.jpg" /></a>
    <a href="">美女</a>
  </li>
  <li>
    <a href=""><img src="images/1.jpg" /></a>
    <a href="">美女</a>
  </li>
  <li>
    <a href=""><img src="images/1.jpg" /></a>
    <a href="">美女</a>
  </li>
  <li>
    <a href=""><img src="images/1.jpg" /></a>
    <a href="">美女</a>
  </li>
</ul>

表格:商品信息表

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

<table class="product">
  <!-- 表格标题 -->
  <caption>
    学生成绩表
  </caption>
  <!-- 表头 -->
  <thead>
    <tr>
      <th>学号</th>
      <th>姓名</th>
      <th>成绩</th>
    </tr>
  </thead>
  <!-- 表格的主体,一个表格可以有多个主体,但只能有一个表头 -->
  <tbody>
    <tr>
      <td>001</td>
      <td>张三</td>
      <td>100</td>
    </tr>
    <tr>
      <td>002</td>
      <td>王五</td>
      <td>99</td>
    </tr>
  </tbody>
</table>
<!-- 分页符 -->
<p class="page">
  <a href="">首页</a>
  <a href="">1</a>
  <!-- 给a标签加active为当前选中 -->
  <a href="" class="active">2</a>
  <a href="">3</a>
  <a href="">尾页</a>
</p>

表格：行与列的合并

使用 colspan=”value”来进行行的缩进，使用 rowspan=”value”来进行列的缩进

说明	值
行缩进	colspan=”value”
列缩进	rowspan=”value”

<table>
  <caption>
    小学生课程表
  </caption>
  <thead>
    <tr>
      <td colspan="2"></td>
      <!-- <td></td> -->
      <td>星期一</td>
      <td>星期二</td>
      <td>星期三</td>
      <td>星期四</td>
      <td>星期五</td>
    </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="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>

控件与隐藏域：

表单由form标签组成，其中form标签包含几个属性
action 需要提交到的地方
method 提交的方式
enctype 提交数据的模式，默认为application/x-www-form-urlencoded 如果使用表单上传文件需要修改为multipart/form-data

    <h3 class="title">用户注册</h3>
    <!-- action：处理表单的程序 -->
    <!-- method:表单提交类型 -->
    <!-- 默认为GET：数据直接放在url地址中 -->
    <!-- POST:表单的数据在请求体中 -->
    <form action="" method="" class="register">
      <!-- 1.单行文本框 -->
      <label for="username">账号：</label>
      <!-- type:控件类型 -->
      <!-- name:数据的变量名 -->
      <!-- value:数据的内容 -->
      <input type="text" name="username" id="username" value="" placeholder="admin" required/>
      <!-- type="text" 这是通用文本框，还有一些是专用的 -->
      <!-- 邮箱文本型 -->
      <label for="email">邮箱：</label>
      <input type="email" name="email" id="email" value="" placeholder="admin@mail.cn" required/>
      <!-- 密码框文本框/非明文 -->
      <label for="password">密码：</label>
      <input type="password" name="password" id="password" value="" placeholder="不少于8位" required/>
      <!-- 2.单选按钮与复选框 -->
      <label for="mi">性别：</label>
      <div>
        <input type="radio" name="gender" value="male" id="male"/><label for="male">男</label>
        <input type="radio" name="gender" value="nv" id="nv"/><label for="nv">女</label>
        <input type="radio" name="gender" value="mi" id="mi"/><label for="mi">保密</label>
      </div>
      <label for="">兴趣：</label>
      <div>
      <input type="checkbox" name="hobby[]" value="game" id="game"/><label for="game">游戏</label>
      <input type="checkbox" name="hobby[]" value="code" id="code" checked/><label for="code">编程</label>
      <input type="checkbox" name="hobby[]" value="ly" id="ly" /><label for="ly">旅游</label>
      </div>
      <!-- 3.下拉框/下拉列表 -->
      <label for="edu">学历：</label>
      <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.文件域与隐藏域 -->
      <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="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>

表单控件的form属性：

    <h3>用户注册</h3>
    <form action="" method="GET" id="register">
    <div>
        <label id="username">账户：</label>
        <input type="txet" form="register" name="username" id="username" value="" placeholder="admin"/><br/>
        <label id="email">邮箱：</label>
        <input type="email" form="register" name="email" id="email" value="" placeholder="demo@email.cn"/><br/>
        <label id="password">密码：</label>
        <input type="password" form="register" name="password" id="password" value="" placeholder="不少于8位"/><br/>
        <button form="register">提交</button>
    </div>
    </form>
    <!-- 尽管form属性可以将控件写到任何地方，仍然能够获取到值，但不要这样做，第一影响布局，第二代码混乱，但是js中获取数据会非常方便 -->

作业：

    <table class="product">
        <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>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=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>
                <!-- <td>玩游戏</td>
                <td>玩游戏</td>
                <td>玩游戏</td> -->
            </tr>
        </tbody>
    </table>

批改老师：

天蓬老师

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

值传递与引用传递、数组对象解构、bind,Call,apply、访问器、流程控制、三元运算

2021-01-06 01:59:18