WEB基础3-----表格标签,表单组件与其他标签

表格标签

要求:

制作一个三行四列的表格

工具:

table标签:表示一个表格,默认没有边框 
border:设置表格边框
width:设置表格宽度 heigh:设置表格高度
align:设置表格对齐方式 left左对齐,right右对齐 center居中对齐
bgcolor:设置表格背景颜色
cellspacing:设置表格中单元格与单元格之间的间距
cellpadding:设置单元格边框与内容之间的间距

代码:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <body>
      <table border="1" width="900px" height="200px" align="center" bgcolor="#e5c4eb" cellsapacing="0">
          <tr wigh="500px" height="60px" align="center" bgcolor="#d99bfe">
              <td wigh="100px" height="50px">姓名</td>
              <td>年龄</td>
              <td>性别</td>
              <td>爱好</td>
              <td>备注</td>
          </tr>
          <tr wigh="500px" height="60px" align="center" bgcolor="#f3b4fe">
              <td>张三</td>
              <td>18</td>
              <td>女</td>
              <td>第五人格</td>
              <td>嘿嘿嘿,狂欢之椅</td>
          </tr>
          <tr wigh="500px" height="60px" align="center">
              <td>李四</td>
              <td>19</td>
              <td>女</td>
              <td>麻了个麻将</td>
              <td>红中红中,白板白板</td>
          </tr>
          <tr wigh="500px" height="60px" align="center" bgcolor="#f2d9ff">
              <td>王五</td>
              <td>19</td>
              <td>女</td>
              <td>蛋仔派对</td>
              <td>咸鱼在手,打遍蛋仔无敌手</td>
          </tr>
      </table>
  </body>
</html>

表单组件

代码:

上代码直接运行

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>表单组件</title>
    </head>
    <body>
        <!-- 表单:主要用于登录,注册的标签系列 -->
        <h3>普通输入框</h3>
        <!-- placeholder:显示提示信息 -->
        <label for="name">姓名:</label>
        <input type="text" placeholder="请输入姓名" value="张三"/>
        <h3>密码框</h3>
        密码:
        <input type="password" />
        <h3>单选框</h3>
        性别:
        <!-- 单选框需要设置相同的name属性来进行绑定 
            lable标签的特殊用法:通过for属性指定对应的表单元素的id名-->
        <input type="radio" name="sex"/><label for="nan">男</label>
        <input type="radio" name="sex"/><label for="nv">女</label>
        <h3>复选框</h3>
        游戏选择:
        <input type="checkbox"/>第五人格
        <input type="checkbox" checked/>蛋仔派对
        <input type="checkbox"/>王者荣耀
        <input type="checkbox"/>和平精英
        <h3>下拉列表框</h3>
        证件:
        <select >
            <option value="" selected>身份证</option>
            <option value="">户口簿</option>
            <option value="">护照</option>
        </select>
        <h3>文本域(列表框)</h3>
        描述:
        <textarea cols="10" rows="2"></textarea>
        <!-- 
        cols:最多字符数
        rows:最大行数
         -->
         <h3>按钮</h3>
         <input type="button" value="普通按钮"/><!-- 普通按钮 -->
         <input type="reset" value="重置按钮"/><!-- 重置按钮 -->
         <input type="submit" value="提交按钮"/><!-- 提交按钮 -->
         <button>按钮</button>
         <button type="button">普通按钮</button>
         <button type="reset">重置按钮</button>
         <button type="submit">提交按钮</button>
         <!-- 推荐使用button标签实现按钮设置 -->
    </body>
</html>

其他标签

代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        正常文本
        <!-- div可以看作一个容器,独占一行,没有任何样式,可以通过css来设置 -->
        <div>DIV文本</div>
        <marquee>公告:不玩第五人格会被绑到狂欢之椅</marquee>
        <!-- 跑马灯:里面内容是从右往左,左侧消失,无限循环 -->
        <iframe src="https://id5.163.com/index.html" frameborder="0" width="1000px" height="800px"></iframe>
        <br />
        <!-- 删除线标签,后续可以利用css统一设置 -->
        <del>$998</del>
    </body>
</html>

  • 25
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值