Home > List of blog posts > 1209-列表,表格,表单与框架

Blogger Information

Blog 47

fans 3

comment 0

visits 38208

Special Recommendation

More>

Related recommendations

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>

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

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

2021-01-06 01:59:18