黑马前端——days02_html

案例 1

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <table align="center" width="500" height="249" border="1" cellspacing="0">
    <thead>
      <tr>
        <th>排名</th>
        <th>关键词</th>
        <th>趋势</th>
        <th>进入搜索</th>
        <th>最近七日</th>
        <th>相关链接</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>鬼吹灯</td>
        <td><img src="down.jpg"></td>
        <td>456</td>
        <td>123</td>
        <td>
          <a href="#">贴吧</a>
          <a href="#">图片</a>
          <a href="#">百科</a>
        </td>
      </tr>
      <tr>
        <td>1</td>
        <td>鬼吹灯</td>
        <td><img src="down.jpg"></td>
        <td>456</td>
        <td>123</td>
        <td>
          <a href="#">贴吧</a>
          <a href="#">图片</a>
          <a href="#">百科</a>
        </td>
      </tr>
      <tr>
        <td>3</td>
        <td>西游记</td>
        <td><img src="up.jpg"></td>
        <td>456</td>
        <td>123</td>
        <td>
          <a href="#">贴吧</a>
          <a href="#">图片</a>
          <a href="#">百科</a>
        </td>
      </tr>
      <tr>
        <td>1</td>
        <td>鬼吹灯</td>
        <td><img src="down.jpg"></td>
        <td>456</td>
        <td>123</td>
        <td>
          <a href="#">贴吧</a>
          <a href="#">图片</a> 
          <a href="#">百科</a>
        </td>
      </tr>
      <tr>
        <td>1</td>
        <td>鬼吹灯</td>
        <td><img src="down.jpg"></td>
        <td>456</td>
        <td>123</td>
        <td> 
          <a href="#">贴吧</a>
          <a href="#">图片</a>
          <a href="#">百科</a>
        </td>
      </tr>
      <tr>
        <td>1</td>
        <td>鬼吹灯</td>
        <td><img src="down.jpg"></td>
        <td>456</td>
        <td>123</td>
        <td> 
          <a href="#">贴吧</a>
          <a href="#">图片</a>
          <a href="#">百科</a> 
        </td>
      </tr>
    </tbody>
  </table>
</body>

</html>

下上
案例1

案例 2

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <h4>青春不常在,抓紧谈恋爱</h4>
  <table width="600">
    <!-- 第一行 -->
    <tr>
      <td>性别:</td>
      <td>
        <input type="radio" name="sex" id="nan">
        <label for="nan"> <img src="images/man.jpg"></label>
        <input type="radio" name="sex" id="nv">
        <label for="nv"> <img src="images/women.jpg"></label>
      </td>
    </tr>
    <!-- 第二行 -->
    <tr>
      <td>生日:</td>
      <td>
        <select>
          <option>--请选择年份--</option>
          <option>2001</option>
          <option>2002</option>
          <option>2003</option>
        </select>
        <select>
          <option>--请选择月份--</option>
          <option>1</option>
          <option>2</option>
          <option>3</option>
        </select>
        <select>
          <option>--请选择日--</option>
          <option>1</option>
          <option>2</option>
          <option>3</option>
        </select>
      </td>
    </tr>
    <!-- 第三行 -->
    <tr>
      <td>所在地区</td>
      <td> <input type="text" value="北京思密达"> </td>
    </tr>
    <!-- 第四行 -->
    <tr>
      <td>婚姻状况:</td>
      <td>
        <input type="radio" name="marry" checked="checked"> 未婚
        <input type="radio" name="marry"> 已婚
        <input type="radio" name="marry"> 离婚
      </td>
    </tr>
    <!-- 第五行 -->
    <tr>
      <td>学历:</td>
      <td><input type="text" value="博士后"></td>
    </tr>
    <!-- 第六行 -->
    <tr>
      <td>喜欢的类型:</td>
      <td>
        <input type="checkbox" name="love"> 妩媚的
        <input type="checkbox" name="love"> 可爱的
        <input type="checkbox" name="love"> 小鲜肉
        <input type="checkbox" name="love"> 老腊肉
        <input type="checkbox" name="love" checked="checked"> 都喜欢
      </td>
    </tr>
    <!-- 第七行 -->
    <tr>
      <td>个人介绍</td>
      <td>
        <textarea>个人简介</textarea>
      </td>
    </tr>
    <!-- 第八行 -->
    <tr>
      <td></td>
      <td>
        <input type="submit" value="免费注册">
      </td>
    </tr>
    <tr>
      <td></td>
      <td>
        <input type="checkbox" checked="checked"> 我同意注册条款和会员加入标准
      </td>
    </tr>
    <tr>
      <td></td>
      <td>
        <a href="#"> 我是会员,立即登录 </a>
      </td>
    </tr>
    <tr>
      <td></td>
      <td>
        <h5>我承诺</h5>
        <ul>
          <li>年满18岁、单身</li>
          <li>抱着严肃的态度</li>
          <li>真诚寻找另一半</li>
        </ul>
      </td>
    </tr>
  </table>
</body>

</html>

男女
案例2

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

胆怯与勇敢

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值