博客列表 >学习HTML文档的基本结构;总计默写无序列表的基本使用;表格的用法以及行列合并的应用;创建注册页面+2019年7月3日16:15

学习HTML文档的基本结构;总计默写无序列表的基本使用;表格的用法以及行列合并的应用;创建注册页面+2019年7月3日16:15

1411v6的博客
1411v6的博客原创
2019年07月09日 16:47:56898浏览

学习HTML文档的基本结构;总计默写无序列表的基本使用;表格的用法以及行列合并的应用;创建注册页面


html类型:

1.png


实例

<!--文档类型-->
<!DOCTYPE html>
<!--设置文档语言-->
<html lang"en">
<!--头部标签-->
<head>
<!--    浏览器识别语言-->
    <meta charset="UTF-8">
<!--    标题-->
    <title>小茗Ub生活网</title>
</head>
<!--用户观看标签-->
<body>
<!--h1标题-->
    <h1>小茗Ub生活网</h1>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


无序列表以及表格:

3.png


实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
<ul>
    <li>1.2019年6月,最新155555靓号0元免费申请 更新300张号码(全国通用)</li>
    <li>2.2019年6月,墨迹天气35°计划 免费领取麦当劳中杯雪碧</li>
    <li>3.2019年6月,1元***7天腾讯视频会员,免费抽腾讯视频VIP月卡/季卡/年卡</li>
    <li>4.2019年6月,Svip9会员免费领取一个月红钻,直接领取即可,秒到账</li>
    <li>5.2019年6月,查询手机号码是否被标记的方法</li>
</ul>

<table border="1" cellpadding="5" cellspacing="0" width="800" align="center">
<!--    表格标题-->
    <caption>小茗Ub生活网活动名称</caption>
<!--    表头-->
    <thead>
   <tr bgcolor="#ffb6c1">
       <th>序号</th>
       <th>时间</th>
       <th>小茗Ub生活网活动名称</th>
   </tr>
    </thead>

    <tbody>
    <tr align="center" >
        <td width="50">1</td>
        <td width="100" rowspan="5">2019年6月</td>
        <td width="430">最新155555靓号0元免费申请 更新300张号码(全国通用)</td>
    </tr>
    <tr align="center">
        <td width="50">2</td>
        <td width="430">墨迹天气35°计划 免费领取麦当劳中杯雪碧</td>
    </tr>
    <tr align="center">
        <td width="50">3</td>
        <td width="430">1元***7天腾讯视频会员,免费抽腾讯视频VIP月卡/季卡/年卡</td>
    </tr>
    <tr align="center">
        <td width="50">4</td>
        <td width="430">Svip9会员免费领取一个月红钻,直接领取即可,秒到账</td>
    </tr>
    <tr align="center">
        <td width="50">5</td>
        <td width="430">查询手机号码是否被标记的方法</td>
    </tr>

    </tbody>

    <tfoot>
    <tr>
        <td colspan="2" align="center">总计</td>
        <td></td>
    </tr>
    </tfoot>
</table>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


表单与表单控件:

4.png


实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单与表单中的控件元素</title>
</head>
<body>
<h3>小茗Ub生活网用户注册</h3>
<form action="" method="get" name="register">
  <p>
    <label for="username">账号:</label>
    <input type="test" id="username" name="username" placeholder="不超过10个字符">
  </p>
  <p>
        <label for="password">密码:</label>
        <input type="password" id="password" name="password" placeholder="8-12位字符或数字">
  </p>
  <p>
    <label for="email">邮箱:</label>
    <input type="email" id="email" name="email" placeholder="908265504@qq.com" required>
  </p>
  <p>
    <label for="age">年龄:</label>
    <input type="number" id="age" name="age" min="18" max="30">
  </p>
  <p>
    <label for="birthday">生日:</label>
    <input type="date" id="birthday" name="birthday">
  </p>
  <p>
      <label for="course">专业:</label>
      <select name="course" id="course" size="1">
          <option value="1">土木工程</option>
          <option value="2">环境设计</option>
          <option value="3">电子工程</option>

      </select>
  </p>
<p>
    <label for="progromme">爱好</label>
    <input type="checkbox" name="hobby" value="male"><label for="male">男生</label>
    <input type="checkbox" name="hobby" value="women"><label for="women">女生</label>

</p>
    <p>
        <label for="comment">简介</label>
        <textarea name="comment" id="comment" cols="30" rows="10" maxlength="30" placeholder="不超过100字"></textarea>
    </p>
    <p>
        <input type="submit" name="submit" value="提交"
        <input type="reset" name="submit" value="重置"
    </p>
</form>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


IMG_20190703_161843.jpg

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议