注册页面

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=
  8.     , initial-scale=1.0">
  9.     <title>用户注册</title>
  10. </head>
  11. <body>
  12.     <h2>注册信息</h2>
  14.     <form action="check.php">
  15.        <div>
  16.         <label for="username">姓 &nbsp;&nbsp;名:&nbsp&nbsp&nbsp</label>
  17.     <input type="text"   id="username" placeholder="请输入姓名">
  18. </div>
  20. <div>
  21.     <label for="tel">手机号:&nbsp&nbsp&nbsp</label>
  22.     <input type="text" id="tel"  placeholder="请输入手机号">
  23. </div>
  25. <div>
  26. <label for="card">身份证号:</label>
  27. <input type="text" id="card" placeholder="请输入身份证号">
  28. </div>
  29. <div>
  30.     <label for="email">邮箱:&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</label>
  31. <input type="text" id="email" placeholder="请输入邮箱">
  32. </div>
  33.  <div>
  34.     <label for="male">性别：</label>
  35.     <input type="radio" name="sex" id="male" value="female" checked ><label for="male">男</label>  
  37.     <input type="radio" name="sex" id="female" value="female" ><label for="female">女</label>  
  38. </div>
  41. <!-- <div> -->
  42.     <!-- <label for="secret"> 性别:</label> -->
  43.     <!-- 单选按钮提交的数据只有一个变量一个值,所以name必须一致 -->
  44.     <!-- 默认选择: checked, 布尔属性, 有它就是true, 没有就是false -->
  45.     <!-- <input type="radio" id="male" name="sex" value="male" /><label for="male">男</label> -->
  46.     <!-- <input type="radio" id="female" name="sex" value="female" /><label for="female">女</label> -->
  47.     <!-- <input type="radio" id="secret" name="sex" value="secret" checked /><label for="secret">保密</label>
  48.   </div> -->
  50. <div>
  52.     <label for="">爱好：</label>
  53.     <input type="checkbox" name="hobby[]" id="tv" value="tv"><label for="tv">电视</label>  
  54.     <input type="checkbox" name="hobby[]" id="sw" value="sw"><label for="sw">游泳</label>  
  55.     <input type="checkbox" name="hobby[]" id="fr" value="fr"><label for="fr">钓鱼</label>  
  56. </div>
  57. <div>
  58. <label for="">学历：</label>
  59. <select name="edu" id="">
  60.     <option value="0"    disabled  selected>--请选择--</option>
  61.     <option value="1">--初中--</option>
  62.     <option value="2">--高中--</option>
  63.     <option value="3">--大学--</option>
  64.     <option value="4">--其他--</option>
  65. </select>
  67. </div>
  68. <!-- <div>
  69.     <label for="pass">密码：</label>
  70.     <input type="password" name="password" id="pass" placeholder="密码不能为空">
  71.     <button onclick="show">查看密码</button>
  73. </div> -->
  74. <div>
  75.     <label for="pass">密码：</label>
  76.     <input type="password" name="password" id="pass"  placeholder="密码不能为空">
  78.    <!-- 查看密码 ,动态改变 typel类型-->
  79.     <button onclick="show">查看密码</button>
  81. </div>
  82. <div>
  83. <label for=""></label>
  84. <button>
  85. 提交
  86. </button>
  88. </div>
  90. </form>
  93. </body>
  94. </html>

多媒体标签

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=
  7.     , initial-scale=1.0">
  8.     <title>媒体标签</title>
  9. </head>
  10. <body>
  12. <video src="..\0705\test.mp4" controls   width=" 300"    poster="123.jpg">我是视频</video>
  16. </body>
  17. </html>

内联标签

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=
  7.     , initial-scale=1.0">
  8.     <title>内联标签</title>
  9. </head>
  10. <body>
  13.     <a href="https://j.map.baidu.com/0c/xf"  target="map">青岛</a>
  14.     <br>    
  15.     <iframe 
  16.     srcdoc="<h3   style='color:red'>请点击地点名称查看地图</h3>"
  17.     frameborder="2"  
  18.      width=" 500" 
  19.      height="600" 
  20.      name="map"   
  22.     >我是地图</iframe>
  25. </body>
  26. </html>

网站后台

  2. <!DOCTYPE html>
  3. <html lang="zh-CN">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>网站后台</title>
  10.     <style>
  11.         body {
  12.           height: 100vh;
  13.           width: 100vw;
  14.           display: grid;
  15.           grid-template-columns: 10em 1fr;
  16.           grid-template-rows: 6em 1fr;
  17.           margin: 0;
  18.         }
  20.         body .header {
  21.           grid-column-end: span 2;
  22.           border-bottom: 1px solid currentColor;
  23.           background-color: #efe;
  24.           padding: 2em;
  25.           display: flex;
  26.           align-items: center;
  27.         }
  29.         body .header div {
  30.           margin-left: auto;
  31.         }
  33.         body .nav {
  34.           background-color: #efc;
  35.           margin: 0;
  36.           padding-top: 1em;
  37.           list-style: none;
  38.         }
  40.         body iframe {
  41.           width: calc(100vw - 10em);
  42.           height: calc(100vh - 6em);
  43.           border-left: 1px solid currentColor;
  44.         }
  45.       </style>
  48. </head>
  49. <body>
  50.  <div  class="header">
  51.     <h3>
  52.     我是后台网站
  53. </h3>
  55.     <div>
  56.     <em>admin</em>
  57. <a href="quit.php">退出</a>
  59. </div>
  61.   </div>
  66.     <ul class="nav">
  67.         <li><a href="../0705/zuoye1.html"  target="content" >我是作业一</a></li>
  68.         <li><a href="../0705/zuoye2.html"target="content" >我是作业二</a></li>
  69.         <li><a href="../0705/zuoye3.html"target="content" >我是作业三</a></li>
  70.     </ul>
  74. <iframe srcdoc="<a href='javascript:;'>请点击左侧导航菜单</a>" frameborder="2"    name="content"  width="300" height="300"></iframe>
  76. </body>
  77. </html>