首页 > 其他分享 >Day02 2.3、HTML基础之标签的练习案例

Day02 2.3、HTML基础之标签的练习案例

时间：2023-03-16 13:44:32浏览次数：43  
标签：浏览器 name 单行 Day02 文本框 输入框 HTML text 2.3

  1. 使用table+表单，把课堂上的form标签的代码，整理成以下格式（不要外观）：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--<form action="http://httpbin.org" method="post" enctype="application/x-www-form-urlencoded">-->
    <table border="1" align="center" width="400" >
        <tr>
            <th align="center" colspan="2">信息注册界面</th>
        </tr>
        <tr>
            <td>用户名：</td>
            <td><input type="text" name="username" value="" placeholder="请输入用户名"></td>
        </tr>
        <tr>
            <td>密码：</td>
            <td><input type="password" name="password" value="" placeholder="请输入密码"></td>
        </tr>
        <tr>
            <td>确定密码</td>
            <td><input type="password" name="againpwd" value="" placeholder="请再次确认密码"></td>
        </tr>
        <tr>
            <td>性别</td>
            <td>
                男<input type="radio" name="sex" value="1" placeholder="男">
                女<input type="radio" name="sex" value="2" placeholder="女"></td>
        </tr>
        <tr>
            <td>技术</td>
            <td>
                Java<input type="checkbox" name="technology" value="1" placeholder="Java">
                Jsp<input type="checkbox" name="technology" value="2" placeholder="Jsp">
                Serviet<input type="checkbox" name="technology" value="3" placeholder="Serviet">
            </td>
        </tr>
        <tr>
            <td>国家</td>
            <td>
                <select name="ciyt" id="">
                    <option value="0">---请选择国家---</option>
                    <option value="1">中国</option>
                    <option value="2">俄国</option>
                    <option value="3">日本</option>
                    <option value="4">朝鲜</option>
                    <option value="5">巴西</option>
                </select>
            </td>
        </tr>
        <td colspan="2" align="center">
            <input type="submit" name="sj" value="提交数据">
            <input type="reset" name="remove" value="清除数据">
        </td>

    </table>




<!--</form>-->
</body>
</html>

  2. 使用table标签，把笔记中表单项标签制作成网页。

    类型 用法 描述
    单行文本框 <input type="text" name="" value="" placeholder=""> name：设置输入框的值的变量名称，用于服务端接受数据。 value：设置输入框的默认值。 placeholder：设置输入框的提示内容。
    密码框 <input type="password" name="" value="" placeholder=""> 只允许输入单行密码，属性描述同上
    单行文本框（数值框） <input type="number" name="" value="" placeholder=""> 只允许输入数值内容，属性描述同上。 就版本浏览器中不支持时会被默认为text单行文本框。
    单行文本框（日期输入框） <input type="date" name=""> 只允许输入日期格式内容，属性描述同上。 低版本浏览器中不支持时会被默认为text单行文本框。
    单行文本框（时间输入框） <input type="time" name=""> 只允许输入时间格式内容，属性描述同上。 低版本浏览器中不支持时会被默认为text单行文本框。
    单行文本框（日期时间输入框） <input type="datetime-local" name=""> 只允许输入日期时间格式内容，属性描述同上。 低版本浏览器中不支持时，会被默认为text单行文本框。 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <table align="center" border="1">
      <tr>
        <th width="200">类型</th>
        <th width="400">用法</th>
        <th width="500">描述</th>
      </tr>
      <tr>
        <td align="center">
          单行文本框
        </td>
        <td align="center">
          input type="text" name="" value="" placeholder=""
        </td>
        <td align="center">
          name：设置输入框的值的变量名称，用于服务端接受数据。 value：设置输入框的默认值。 placeholder：设置输入框的提示内容。
        </td>
      </tr>

      <tr>
        <td align="center">
          密码框
        </td>
        <td align="center">
            input type="password" name="" value="" placeholder=""        </td>
        <td align="center">
            只允许输入单行密码，属性描述同上
        </td>
      </tr>

      <tr>
        <td align="center">
          单行文本框（数值框）
        </td>
        <td align="center">
          input type="number" name="" value="" placeholder=""
        </td>
        <td align="center">
          只允许输入数值内容，属性描述同上。 就版本浏览器中不支持时会被默认为text单行文本框。
        </td>
      </tr>

      <tr>
        <td align="center">
          单行文本框（日期输入框）
        </td>
        <td align="center">
          input type="date" name=""
        </td>
        <td align="center">
          只允许输入日期格式内容，属性描述同上。 低版本浏览器中不支持时会被默认为text单行文本框。
        </td>
      </tr>

      <tr>
        <td align="center">
          单行文本框（时间输入框）
        </td>
        <td align="center">
          input type="time" name=""
        </td>
        <td align="center">
          只允许输入时间格式内容，属性描述同上。 低版本浏览器中不支持时会被默认为text单行文本框。
        </td>
      </tr>

      <tr>
        <td align="center">
          单行文本框（日期时间输入框）
        </td>
        <td align="center">
          input type="datetime-local" name=""
        </td>
        <td align="center">
          只允许输入日期时间格式内容，属性描述同上。 低版本浏览器中不支持时，会被默认为text单行文本框。
        </td>
      </tr>
  </table>
</body>
</html>

  3. 使用table标签，把下面的课程表使用表格实现。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <table align="center" border="1">
          <tr>
            <th align="center" colspan="6">课程表</th>
          </tr>
        <tr>
          <th align="center" width="100" height="20"></th>
          <th align="center" width="100" height="20" >星期一</th>
          <th align="center" width="100" height="20">星期二</th>
          <th align="center" width="100" height="20">星期三</th>
          <th align="center" width="100" height="20">星期四</th>
          <th align="center" width="100" height="20">星期五</th>
        </tr>

        <tr>
          <td align="center"  width="100" height="20">第一节</td>
          <td align="center" width="100" height="20">英语</td>
          <td align="center" width="100" height="20">英语</td>
          <td align="center" width="100" height="20">数学</td>
          <td align="center" width="100" height="20">语文</td>
          <td align="center" width="100" height="20">数学</td>
        </tr>

       <tr>
          <td align="center"  width="100" height="20">第二节</td>
          <td align="center" width="100" height="20">语文</td>
          <td align="center" width="100" height="20">电脑</td>
          <td align="center" width="100" height="20">地辅</td>
          <td align="center" width="100" height="20">生物</td>
          <td align="center" width="100" height="20">数学</td>
        </tr>

        <tr>
          <td align="center"  width="100" height="20">第三节</td>
          <td align="center" width="100" height="20">体育</td>
          <td align="center" width="100" height="20">语文</td>
          <td align="center" width="100" height="20">英语</td>
          <td align="center" width="100" height="20">体育</td>
          <td align="center" width="100" height="20">历史</td>
        </tr>

        <tr>
          <td align="center"  width="100" height="20">第四节</td>
          <td align="center" width="100" height="20">数学</td>
          <td align="center" width="100" height="20">语文</td>
          <td align="center" width="100" height="20">体活</td>
          <td align="center" width="100" height="20">数学</td>
          <td align="center" width="100" height="20">英语</td>
        </tr>

        <tr>
            <td colspan="6" align="center" height="20">午休</td>
        </tr>

        <tr>
          <td align="center"  width="100" height="20">第五节</td>
          <td align="center" width="100" height="20">生物</td>
          <td align="center" width="100" height="20">心理</td>
          <td align="center" width="100" height="20">历史</td>
          <td align="center" width="100" height="20">英辅</td>
          <td align="center" width="100" height="20">美术</td>
        </tr>

       <tr>
          <td align="center"  width="100" height="20">第六节</td>
          <td align="center" width="100" height="20">地理</td>
          <td align="center" width="100" height="20">体育</td>
          <td align="center" width="100" height="20">道德与法治</td>
          <td align="center" width="100" height="20">地理</td>
          <td align="center" width="100" height="20">语文</td>
        </tr>

        <tr>
          <td align="center"  width="100" height="20">第七节</td>
          <td align="center" width="100" height="20">班会</td>
          <td align="center" width="100" height="20">音乐</td>
          <td align="center" width="100" height="20">自习</td>
          <td align="center" width="100" height="20">电脑</td>
          <td align="center" width="100" height="20">道德与法治</td>
        </tr>

        <tr>
          <td align="center"  width="100" height="20">第八节</td>
          <td align="center" width="100" height="20"></td>
          <td align="center" width="100" height="20"></td>
          <td align="center" width="100" height="20">课活</td>
          <td align="center" width="100" height="20"></td>
          <td align="center" width="100" height="20"></td>
        </tr>

        <tr>
          <td align="center"  width="100" height="20"></td>
          <td align="center" width="100" height="20"></td>
          <td align="center" width="100" height="20"></td>
          <td align="center" width="100" height="20"></td>
          <td align="center" width="100" height="20"></td>
          <td align="center" width="100" height="20"></td>
        </tr>
      <tr>
          <td align="center" width="100"   height="20" colspan="6"></td>
      </tr>
  </table>
</body>
</html>

标签：浏览器,name,单行,Day02,文本框,输入框,HTML,text,2.3
From： https://www.cnblogs.com/dream-ze/p/17222246.html

相关文章

  • Day01 1.2、HTML基础
    一、HTMLHyperTextMarkupLanguage，译作超文本标记语言，是一门标记语言，不是编程语言。所以它没有变量，也没有任何语句结构。所谓的超文本，就是超越了文本范畴的文档格......
  • Day02 2.1、HTML基础之列表标签
    一、列表标签列表是一种结构标签可以让网页的内容形成列表格式。列表标签在HTML中提供提供了4种：无序列表（UnorderList，ul）就是没有序号的，内容不分先后......
  • maui BlazorWebView+本地html (vue、uniapp等都可以) 接入微信sdk 开发 Android ap
       之前没接触过Androidmaui开发，这几天刚摸索，有些不合理的地方欢迎指出。首先添加微信sdk的绑定库  nuget包：Chi.MauiBinding.Android.WeChat 项目地址：http......
  • maui BlazorWebView+本地html 打包Android app 实现支付宝H5支付
     <BlazorWebViewx:Name="blazorWebView"HostPage="wwwroot/index.html"UrlLoading="blazorWebView_UrlLoading"BlazorWebViewInitialized="blazorWebView_Blazor......
  • HTML基础知识
    1.1DOCTYPE<!DOCTYPE>文档类型声明，作用就是告诉浏览器使用哪种HTML版本来显示网页。<!DOCTYPEhtml>这句代码的意思是:当前页面采取的是HTML5版本来显示网页.1.2lan......
  • 【开源免费】使用Spring Boot和Html实现ChatGPT，1：亿还原，将就看
    highlight:a11y-dark简介前段时间写了一个Chatgpt的Java版SDK开源地址：chatgpt-java欢迎使用。但由于原来OpenAI并没有支持官网的chatgpt模型，所以使用起来相对没有官网......
  • HTML5智慧仓库Web3D可视化管理平台
    随着5G技术的不断普及，万物互联已经不再遥远。近年来，随着电商业务的飞速发展，仓储物流的压力也越来越大，电子商务的订单不同于一般的B2B订单，其中一个最大的特点就是碎片化严重......
  • HTML/XML字符转义对照表
    HTML/XML转义字符对照表包含符号、数学符号、希腊字母、重要的国际标志、ISO8859-1(Latin-1)字符集、特殊符号等。 为什么要用转义字符串？HTML中<，>，&等有特殊含义......
  • Markdown 利用HTML进行优雅排版
    Markdown利用HTML进行优雅排版我在使用Markdown整理文档的时候发现，Markdown本身对文本格式的排版很单一，只有编号、字体加粗、固定标题格式等一些基础的排版，使用不够灵活......
  • JavaSE-day02（面向对象：内部类，枚举，泛型）
    一、内部类内部类是类中的五大成分之一（成员变量、方法、构造器、内部类、代码块），如果一个类定义在另一个类的内部，这个类就是内部类。当一个类的内部，包含一个完整的事物，且......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99