HTML4表单 -- 笔记 - 图2review0423

  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5.     <title>review0423</title>
  6.     <meta charset="utf-8">
  7. </head>
  8. <body>
  9.     <!-- 表单 -->
  10.     <form action="success.html" method="post">
  11.         <!-- action 传递到后台的，收集数据传递到后台进行响应 -->
  12.         <!-- 将 请输入姓名 设置为label属性 -->
  13.         <label>1.请输入姓名：</label>
  14.             <input type="text" name="" id="" placeholder="请输入姓名">
  15.             <br>
  16.         <!-- 将 请输入密码 设置为label属性 -->
  17.         <label>2.请输入密码：</label>
  18.             <input type="password" name="" id="" placeholder="请输入密码">
  19.             <br>
  20.         <!-- 将 再次输入密码 设置为label属性 -->
  21.         <label>3.再次输入密码：</label>
  22.             <input type="password" name="" id="" placeholder="再次输入密码">
  23.             <br>
  24.         <!-- 将 性别 设置为label属性 -->
  25.         <label>4.性别：</label>
  26.             <input type="radio" name="xb" value="male" checked="checked">男
  27.             <!-- 默认选中男 -->
  28.             <input type="radio" name="xb" value="female">女
  29.             <br>
  30.         <!-- 将 兴趣爱好 设置为label属性 -->
  31.         <label>5.兴趣爱好：</label>
  32.             <input type="checkbox" name="ah" id="" value="1">游泳
  33.             <input type="checkbox" name="ah" id="" value="2" checked="checked">看书
  34.             <!-- cheecked 默认选中 -->
  35.             <input type="checkbox" name="ah" id="" value="3">爬山
  36.             <input type="checkbox" name="ah" id="" value="4">思考
  37.             <br>
  38.         <!-- 暂时这样写 以后会做动态的时间列表 -->
  39.         <label>6.生日：</label>
  40.             <select>
  41.                 <option value="1995">1995</option>
  42.                 <option value="1996">1996</option>
  43.                 <option value="1997" selected="selected">1997</option>
  44.                 <!-- selected 表示默认选中 -->
  45.                 <option value="1998">1998</option>
  46.                 <option value="1999">1999</option>
  47.                 <option value="2000">2000</option>
  48.             </select>年
  49.             <select>
  50.                 <option value="1">1</option>
  51.                 <option value="2">2</option>
  52.                 <option value="3" selected="selected">3</option>
  53.                 <!-- 默认选中三月 -->
  54.                 <option value="4">4</option>
  55.                 <option value="5">5</option>
  56.                 <option value="6">6</option>
  57.                 <option value="7">7</option>
  58.                 <option value="8">8</option>
  59.                 <option value="9">9</option>
  60.                 <option value="10">10</option>
  61.                 <option value="11">11</option>
  62.                 <option value="12">12</option>
  63.             </select>月
  64.             <select>
  65.                 <option value="1">1</option>
  66.                 <option value="2" selected="selected">2</option>
  67.                 <!-- 默认选中二号 -->
  68.                 <option value="3">3</option>
  69.                 <option value="4">4</option>
  70.                 <option value="5">5</option>
  71.                 <option value="6">6</option>
  72.                 <option value="7">7</option>
  73.                 <option value="8">8</option>
  74.                 <option value="9">9</option>
  75.                 <option value="10">10</option>
  76.                 <option value="11">11</option>
  77.                 <option value="12">12</option>
  78.                 <option value="13">13</option>
  79.                 <option value="14">14</option>
  80.                 <option value="15">15</option>
  81.                 <option value="16">16</option>
  82.                 <option value="17">17</option>
  83.                 <option value="18">18</option>
  84.                 <option value="19">19</option>
  85.                 <option value="20">20</option>
  86.                 <option value="21">21</option>
  87.                 <option value="22">22</option>
  88.                 <option value="23">23</option>
  89.                 <option value="24">24</option>
  90.                 <option value="25">25</option>
  91.                 <option value="26">26</option>
  92.                 <option value="27">27</option>
  93.                 <option value="28">28</option>
  94.                 <option value="29">29</option>
  95.                 <option value="30">30</option>
  96.                 <option value="31">31</option>
  97.                 </select>日
  98.             <br>
  99.             <label>7.头像：</label><img src="headLogo/1.gif">
  100.             <!-- 此处不能实现 不同的选项对应不同的图片功能 -->
  101.             <select>
  102.                 <option value="1">1</option>
  103.                 <option value="2">2</option>
  104.                 <option value="3" selected="selected">3</option>
  105.                 <option value="4">4</option>
  106.             </select>
  107.             <br>
  108.             <!-- 添加按钮控件 -->
  109.             <label>8.按钮：</label>
  110.             <input type="button" value="普通按钮" name="">        
  111.             <input type="submit" value="提交按钮" name="">        
  112.             <input type="reset" value="重置按钮" name="">
  113.             <!-- button普通按钮回和后面的JavaScript联动使用     -->
  114.             <!-- submit则是具有提交的功能 -->
  115.             <br>
  116.             <!-- 添加文本框 -->
  117.             <label>9.备注：</label>
  118.             <textarea rows="5" cols="30" placeholder="请输入"></textarea>
  119.             <br>
  120.             <!-- 添加上传 -->
  121.             <!-- 选择文件和后台脚本联动上传 -->
  122.             <label>10.文件上传功能：</label>
  123.             <input type="file" name=""><input type="button" value="上传" name="">
  124.             <br>
  125.             <!-- 添加一个隐藏按钮 只想自己知道 不想被别人看到的 -->
  126.             <label>11.隐藏按钮：</label>
  127.             000<input type="hidden" name="" id="">000
  128.             <br>
  129.             <label>12.多选框：</label>
  130.             <select size="4" multiple="true">
  131.                 <!-- size 表示一次显示几个 -->
  132.                 <!-- multiple 表示是否可以多选 -->
  133.                 <option value="1">1</option>
  134.                 <option value="2">2</option>
  135.                 <option value="3">3</option>
  136.                 <option value="4">4</option>
  137.                 <option value="5">5</option>
  138.                 <option value="6">6</option>    
  139.             </select>
  140.             <br>
  141.             <!-- 分组下拉菜单 optgroup -->
  142.             <label>13.分组下拉菜单：</label>
  143.             <select name="city">
  144.                 <option>请选择</option>
  145.                 <optgroup label="华北">
  146.                     <option value="bj">北京</option>
  147.                     <option value="tj">天津</option>
  148.                     <option value="hb">河北</option>
  149.                 </optgroup>
  150.                 <optgroup label="华东">
  151.                     <option value="sh">上海</option>
  152.                     <option value="fj">福建</option>
  153.                     <option value="xm">厦门</option>
  154.                 </optgroup>
  155.             </select>
  156.     </form>
  158.     <hr>
  159.     <!-- 用表格实现布局 -->
  160.     <table border="0" width="500px">
  161.         <tr>
  162.             <td align="right">请输入用户名：</td>
  163.             <td>
  164.                 <input type="text" name="user" id="user">
  165.             </td>
  166.         </tr>
  167.         <tr>
  168.             <td align="right">请输入密码：</td>
  169.             <td>
  170.                 <input type="password" name="pwd" id="pwd">
  171.             </td>
  172.         </tr>
  173.         <tr>
  174.             <td align="right">再次输入密码：</td>
  175.             <td>
  176.                 <input type="password" name="pwd" id="pwd">
  177.             </td>
  178.         </tr>
  179.         <tr>
  180.             <td align="right">性别：</td>
  181.             <td>
  182.                 <label><input type="radio" name="xb">男</label>
  183.                 <label><input type="radio" name="xb">女</label>
  184.                 <label><input type="radio" name="xb" checked="checked">保密</label>
  185.             </td>
  186.         </tr>
  187.         <tr>
  188.             <td align="right">兴趣爱好：</td>
  189.             <td>
  190.                 <input type="checkbox" name="ah" id="">游泳
  191.                 <input type="checkbox" name="ah" id="" checked="checked">爬山
  192.                 <input type="checkbox" name="ah" id="">看书
  193.                 <input type="checkbox" name="ah" id="">思考
  194.             </td>
  195.         </tr>
  196.         <tr>
  197.             <td align="right">生日：</td>
  198.             <td>
  199.                 <select>
  200.                     <option value="1995">1995</option>
  201.                     <option value="1996">1996</option>
  202.                     <option value="1997" selected="selected">1997</option>
  203.                     <!-- selected 表示默认选中 -->
  204.                     <option value="1998">1998</option>
  205.                     <option value="1999">1999</option>
  206.                     <option value="2000">2000</option>
  207.                 </select>年
  208.                 <select>
  209.                     <option value="1">1</option>
  210.                     <option value="2">2</option>
  211.                     <option value="3" selected="selected">3</option>
  212.                     <!-- 默认选中三月 -->
  213.                     <option value="4">4</option>
  214.                     <option value="5">5</option>
  215.                     <option value="6">6</option>
  216.                     <option value="7">7</option>
  217.                     <option value="8">8</option>
  218.                     <option value="9">9</option>
  219.                     <option value="10">10</option>
  220.                     <option value="11">11</option>
  221.                     <option value="12">12</option>
  222.                 </select>月
  223.                 <select>
  224.                     <option value="1">1</option>
  225.                     <option value="2" selected="selected">2</option>
  226.                     <!-- 默认选中二号 -->
  227.                     <option value="3">3</option>
  228.                     <option value="4">4</option>
  229.                     <option value="5">5</option>
  230.                     <option value="6">6</option>
  231.                     <option value="7">7</option>
  232.                     <option value="8">8</option>
  233.                     <option value="9">9</option>
  234.                     <option value="10">10</option>
  235.                     <option value="11">11</option>
  236.                     <option value="12">12</option>
  237.                     <option value="13">13</option>
  238.                     <option value="14">14</option>
  239.                     <option value="15">15</option>
  240.                     <option value="16">16</option>
  241.                     <option value="17">17</option>
  242.                     <option value="18">18</option>
  243.                     <option value="19">19</option>
  244.                     <option value="20">20</option>
  245.                     <option value="21">21</option>
  246.                     <option value="22">22</option>
  247.                     <option value="23">23</option>
  248.                     <option value="24">24</option>
  249.                     <option value="25">25</option>
  250.                     <option value="26">26</option>
  251.                     <option value="27">27</option>
  252.                     <option value="28">28</option>
  253.                     <option value="29">29</option>
  254.                     <option value="30">30</option>
  255.                     <option value="31">31</option>
  256.                 </select>日    
  257.             </td>
  258.         </tr>
  259.         <tr>
  260.             <td align="right">头像：</td>
  261.             <td>
  262.                 <img src="headLogo/13.gif" alt="not find">
  263.                 <select name="" id="">
  264.                     <option value="1">1</option>
  265.                     <option value="2">2</option>
  266.                     <option value="3">3</option>
  267.                     <option value="4">4</option>
  268.                 </select>
  269.             </td>
  270.         </tr>
  271.         <tr>
  272.             <td align="center" colspan="2">
  273.                 <input type="submit" value="注册">
  274.             </td>
  275.             <!-- <td></td> -->
  276.         </tr>
  277.     </table>
  278.     <!-- 总结：表格是一种布局方式，但不是唯一的方式，美化效果还需要css样式来补充！ -->
  280.     <hr>
  281.     <!-- div标签 -->
  282.     <div><img src="img/1.jpg" alt="not find">图片1</div>
  283.     <div><img src="img/2.jpg" alt="not find">图片2</div>
  284.     <div><img src="img/3.jpg" alt="not find">图片3</div>
  285.     <!-- 块级标签 占据一行 换行 -->
  286.     <!-- div,ul,ol,lo,dl,dd,h1-h6,p,form, hr, ... -->
  288.     <!-- span标签 -->
  289.     <span><img src="img/1.jpg" alt="not find">图片1</span>
  290.     <span><img src="img/2.jpg" alt="not find">图片2</span>
  291.     <span><img src="img/3.jpg" alt="not find">图片3</span>
  292.     <!-- 行级标签 在一行 不换行 -->
  293.     <!-- b, em, img, input, a, sup, sub, textarea, span.... -->
  295.     <!-- 总结几点标签嵌套规则 -->
  296.     <!-- 1、块级标签可以包含行级标签（行内元素）和某些块级元素 -->
  297.     <!-- 2、行内元素不能包含块级元素，只能包含其他行内元素 -->
  298.     <!-- 3、块级元素不能放在p -- 段落标签内 -->
  299.     <!-- 4、特殊的块级元素只能包含行内元素，不能在包含块级元素 如：h1~h6  p  dt... -->
  300.     <!-- 5、块级元素和块级元素并列，行级元素和行级元素并列 -->
  301.     <!-- 注意：规则需要遵守，但是html语法检查不严格，浏览器不能做到查错！ -->
  303.     <hr>
  304.     <h1>css样式</h1>
  305.     <ul>
  306.         <li><b>css层叠样式</b></li>
  307.         <li><strong>使用方法</strong>
  308.             <ol>
  309.                 <li><i>行内样式</i></li>
  310.                 <li><em>内部样式</em></li>
  311.                 <li><em>外部样式</em></li>
  312.             </ol>
  313.         </li>
  314.         <li><b>css优先级</b></li>
  315.     </ul>
  316. </body>
  317. </html>