HTML5基础笔记六（实操篇）

凡梦_leo

已于 2023-06-27 11:06:30 修改

阅读量59

点赞数

分类专栏： # html5 文章标签：笔记 html5 javascript python mysql html java

于 2023-06-27 11:05:58 首次发布

本文链接：https://blog.csdn.net/qq_55006020/article/details/131412664

版权

html5 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

该文展示了两个HTML代码示例，分别用于创建手机应用页面布局的表格和教员搜索的表单，以及一个简单的商品售价展示。表格包含不同类型的旅行服务，而表单涉及搜索教员的条件选择，包括搜索类型、身份、地区和性别等。最后，代码还演示了一个商品售价的HTML结构，展示了一款手机的价格。

摘要由CSDN通过智能技术生成

表格实操一：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格布局的实操</title>
</head>
<body>
<!--手机app页面布局-->
<table border="1" width="800px" height="800ox" cellspacing="5px" >
  <tr align="center" bgcolor="pink">
    <td rowspan="2">酒店</td>
    <td>海外酒店</td>
    <td>团购</td>
  </tr>
  <tr align="center" bgcolor="pink">
<!--    <td></td>-->
    <td>特价酒店</td>
    <td>民宿.客栈</td>
  </tr>
  <tr align="center" bgcolor="blue">
    <td rowspan="2">机票</td>
    <td>火车票.抢票</td>
    <td>汽车票.船票</td>
  </tr>
  <tr align="center" bgcolor="blue">
<!--    <td></td>-->
    <td>特价机票</td>
    <td>专车.租车</td>
  </tr>
  <tr align="center" bgcolor="green">
    <td rowspan="2">旅游</td>
    <td>目的地攻略</td>
    <td>邮轮旅游</td>
  </tr>
  <tr align="center" bgcolor="green">
<!--    <td></td>-->
    <td>周边游</td>
    <td>定制旅行</td>
  </tr>
  <tr align="center" bgcolor="yellow">
    <td >景点玩乐</td>
    <td>美食林</td>
    <td>购物外汇</td>
  </tr>
  <tr align="center" bgcolor="yellow">
    <td>礼品卡</td>
    <td>WIFI电话</td>
    <td>保险签证</td>
  </tr>
</table>

</body>
</html>

二，表格和表单的实操练习

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格和表单的实操</title>
</head>
<body>
<!--                                                单边框处理-->
<table border="1" align="center" width="400px" cellspacing="0">
  <tr height="50px" align="center">
    <td colspan="4">教员搜索</td>                     <!--  第一行的内容-->
<!--    <td></td>-->
<!--    <td></td>-->
<!--    <td></td>-->
  </tr>

  <tr height="50px">                         <!--  第二行的内容-->
    <td>搜索类型</td>
    <td>
      <form >
        <select>
          <option>搜索教员信息</option>
          <optgroup label="python" >
            <option >教员a</option>
            <option >教员b</option>
            <option >教员c</option>
          </optgroup>
          <optgroup label="前端" >
            <option >前端教员a</option>
            <option >前端教员b</option>
            <option >前端教员c</option>
          </optgroup>
        </select>
      </form>
    </td>
    <td>教员身份</td>
    <td>
      <from>
        <select>
          <option>不限</option>
          <option>男</option>
          <option>女</option>
        </select>
      </from>
    </td>
  </tr>
  <tr height="80px">                   <!--  第一行的内容-->
    <td>所在地区</td>
    <td>
      <form>
        <select>
          <option>不限</option>
          <optgroup label="湖北">
            <option>随州</option>
            <option>武汉</option>
          </optgroup>
          <optgroup label="河南">
            <option>郑州</option>
            <option>信阳</option>
          </optgroup>
        </select>
      </form>
    </td>
    <td>性别</td>
    <td>
      <input type="radio" name="sex" value="男">男
      <br>
      <input type="radio" name="sex" value="女">女
    </td>
  </tr>
<!--  第四行-->
  <tr height="50px">
    <td>学习科目</td>
    <td colspan="3">
      <form>
        <select>
          <option>请在一下列表中选择</option>
          <option>python</option>
          <option>前端html5</option>
          <option>css3</option>
        </select>
      </form>
    </td>
<!--    <td></td>-->
<!--    <td></td>-->
  </tr>
<!-- 第五行-->
  <tr>
    <td>学习</td>
    <td colspan="3">
      <input type="text" name="xuexi" placeholder="请输入要学习的内容" required>
    </td>
<!--    <td></td>-->
<!--    <td></td>-->
  </tr>
  <tr>
    <td>专业</td>
    <td colspan="3">
      <input type="text" name placeholder="请输入要学习的内容" required>
      <input type="submit" value="搜索">
    </td>
<!--    <td></td>-->
<!--    <td></td>-->
  </tr>
</table>

</body>
</html>

表格和表单的实操二

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格和表单的实操二</title>
</head>
<body>
<form action="">
<table align="center">
  <tr >
    <td align="right">
      <label for="xinming">姓名: </label>
    </td>
    <td>
      <input type="text" id="xinming">
    </td>
  </tr>
  <tr>
    <td align="right">
      <label for="mima">密码: </label>
    </td>
    <td>
      <input type="password" name="pwd" id="mima">
    </td>
  </tr>
  <tr>
    <td align="right">
      <label for="mima1">确认密码: </label>
    </td>
    <td>
      <input type="password" name="pwd" id="mima1">
    </td>
  </tr>
  <tr>
    <td>
      <span>密码提示问题: </span>
    </td>
    <td>
      <form>
        <select>
          <option>请选择一个问题</option>
          <option>您的生日</option>
          <option>您的年龄</option>
        </select>
      </form>
    </td>
  </tr>
  <tr>
    <td align="right">
      <label for="mima3">密码提示答案: </label>
    </td>
    <td>
      <input type="text" id="mima3" name="pwd1">
    </td>
  </tr>
  <tr >
    <td align="right">
      <span>性别:</span>
    </td>
    <td>
        <input type="radio" name="sex" value="1">男
        <br>
        <input type="radio" name="sex" value="0">女
    </td>
  </tr>
  <tr >
    <td align="right">
      <label for="nianling">年龄: </label>
    </td>
    <td>
      <input type="text" name="age" id="nianling">
    </td>
  </tr>
  <tr >
    <td align="right">
      <span>籍贯:</span>
    </td>
    <td>
<!--      <form>-->
        <select>
          <option>请选择</option>
          <option>湖北</option>
          <option>湖南</option>
        </select><span>省/直辖市</span>
        <select>
          <option>请选择</option>
          <option>武汉</option>
          <option>长沙</option>
        </select><span>市</span>
<!--      </form>-->
    </td>
  </tr>
  <tr >
    <td align="right">
      <span>爱好: </span>
    </td>
    <td>
        <input type="checkbox" name="a1">上网
        <input type="checkbox" name="a1">看电影
        <input type="checkbox" name="a1">学习
    </td>
  </tr>
  <tr>
    <td align="right">
      <span>个人介绍: </span>
    </td>
    <td>
      <textarea  cols="30" rows="10">
      </textarea>
    </td>
  </tr>
  <tr >
    <td align="right">
      <span>上传头像: </span>
    </td>
    <td>
      <input type="file">
    </td>
  </tr>
  <tr>
    <td colspan="2" align="center">
      <input type="submit">
      <input type="reset">
    </td>
<!--    <td>-->

<!--    </td>-->
  </tr>
</table>
</form>
</body>
</html>

完成一个商品售价实操

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习题</title>
</head>
<body>
<!--设置居中显示-->
<div style="text-align: center">
    <img  src="手机图片.webp" alt="小米手机" title="小米手机">
    <h3 >红米小米手机之光</h3>
    <p >1799</p>
</div>

</body>
</html>