HTML知识2

  1. <!doctype html>
  2. <html lang="en">
  3.  <head>
  4.   <meta charset="UTF-8">
  5.   <title>Document</title>
  6.     <h1    align='center'>HTML5&lt;Day01&gt;</h1>
  7.     <hr>
  8.     <h2>1 HTML 文档片段</h2>
  9.     <h3>1.1 问题</h3>
  10.     <p>创建如图-1所示的html页面</p>
  11.     <h3>1.2 方案</h3>
  12.     <p>使用html完成效果</p>
  13.     <h3>1.3 实现</h3>
  14.     <p>创建index.html,完成效果</p>
  15.     <h3>1.4 扩展</h3>
  16.     <p>创建如图所示的表格</p>
  17.  </head>
  18.  <body>
  19.  
  20.  </body>
  21. </html>

一，列表：

1，列表的组成：

　　a , 列表的类型：

　　　　（1）有序列表： <ol></ol>  Order LIst

　　　　（2）无序列表： <ul></ul>  Unorder List

　　b，列表项：<li></li>  :  List Item

　　　　eg: 创建一个有序列表

<ol>
        <li>《水浒传》</li>
        <li>《西游记》</li>
        <li>《红楼梦》</li>
        <li>《三国演义》</li>
    </ol>

　eg:   创建一个无序列表

<ul>
        <li>《水浒传》</li>
        <li>《西游记》</li>
        <li>《红楼梦》</li>
        <li>《三国演义》</li>
    </ul>

  1. <!doctype html>
  2. <html lang="en">
  3.  <head>
  4.   <meta charset="UTF-8">
  5.   <title>Document</title>
  6.  </head>
  7.  <body>
  8.      <ol>
  9.         <li>《水浒传》</li>
  10.         <li>《西游记》</li>
  11.         <li>《红楼梦》</li>
  12.         <li>《三国演义》</li>
  13.     </ol>
  14.     <ul>
  15.         <li>白眉鹰王</li>
  16.         <li>青翼蝠王</li>
  17.         <li>紫衫龙王</li>
  18.         <li>金毛狮王</li>
  19.     </ul>
  20.  
  21.  </body>
  22. </html>

2，列表的属性

　　（1）<ol>

　　　　属性：type ; 取值： 1: 按数字方式显示标识，默认值；

　　　　　　　　　　　　   A：按大写英文字符方式显示标识；

　　　　　　　　　　　　  a ：按小写英文字符方式显示标识；

　　　　　　　　　　　　  I ： 按大写罗马数字方式显示标识；

　　　　　　　　　　　　  i ：按小写罗马数字方式显示标识；

　　（2）<ul>

　　　　属性：type ； 取值： disc： 默认值，实心圆点

　　　　　　　　　　             circle: 空心圆点

　　　　　　　　　　　　　  square： 实心方块

none ： 不显示任何标识；  如：<ul    type='none'>

3，列表的嵌套：

　　被嵌套的内容必须放在  <li> </li> 中;

<ul>

　　<li>

　　　　<ol>

　　　　　　<li></li>

　　　　</ol>

　　</li>

</ul>

  1. <!doctype html>
  2. <html lang="en">
  3.  <head>
  4.   <meta charset="UTF-8">
  5.   <title>Document</title>
  6.  </head>
  7.  <body>
  8.     <ol>
  9.         <li>
  10.             《水浒传》
  11.             <ol type='a'>
  12.                 <li>武大郎</li>
  13.                 <li>西门庆</li>
  14.                 <li>潘金莲</li>
  15.             </ol>
  16.         </li>
  17.  
  18.         <li>
  19.             《三国演义》
  20.             <ol type='i'>
  21.                 <li>吕布</li>
  22.                 <li>董卓</li>
  23.                 <li>貂蝉</li>
  24.             </ol>
  25.         </li>
  26.     </ol>
  27.  
  28.      <ol>
  29.         <li>《水浒传》</li>
  30.         <li>《西游记》</li>
  31.         <li>《红楼梦》</li>
  32.         <li>《三国演义》</li>
  33.     </ol>
  34.     <ul    type='none'>
  35.         <li>白眉鹰王</li>
  36.         <li>青翼蝠王</li>
  37.         <li>紫衫龙王</li>
  38.         <li>金毛狮王</li>
  39.     </ul>
  40.  
  41.  </body>
  42. </html>

二，图像和链接：

1，URL ：  Uniform Resource Locator  统一资源定位器， 主要用于标识网络中资源的位置，俗称，路径；

　　URL分类：

绝对路径：从一个固定的位置处去查找资源文件的地址，

　　网络资源：（1）协议名称，https （2）主机名/域名/IP地址，www.xxxx.com（3）目录路径，文件夹所在的文件夹，（4）文件名称，

相对路径：从当前文件位置处开始查找资源文件所经过的路径就是相对路径，

根相对路径：以‘/’作为开始来标识大陆架；

2，图像：

　　（1）标记： <img>

　　（2）属性：src  ： 要稀疏的图片的url（相对/j绝对/根相对）

　　　　　　     width： 设置图片的宽度，以px为单位的数值（允许省略px）

　　　　　　    height : 设置图片的高度，同上；

　　　　注：如果width和height ，如果只设置其中一个属性值的话，那么另一个属性值也会跟着等比缩放；

3，链接

　　超链接： 允许通过鼠标的点击完成页面跳转的行为，就是超链接；

　　语法：标记： <a>内容</a>

　　　　　属性：  href： 标识要链接到的文件的地址

　　　　　　　　 target： 指定打开新网页的方式； 取值： _self , 默认值，在自身标签中打开网页；

　　　　　　　　　　　　　　　　　　　　　　　　　　_blank, 在新标签页中打开新网页；

  1. <!doctype html>
  2. <html lang="en">
  3.  <head>
  4.   <meta charset="UTF-8">
  5.   <title>Document</title>
  6.  </head>
  7.  <body>
  8.     <ol>
  9.         <li>
  10.             《水浒传》
  11.             <ol type='a'>
  12.                 <li>武大郎</li>
  13.                 <li>西门庆</li>
  14.                 <li>潘金莲</li>
  15.             </ol>
  16.         </li>
  17.  
  18.         <li>
  19.             《三国演义》
  20.             <ol type='i'>
  21.                 <li>吕布</li>
  22.                 <li>董卓</li>
  23.                 <li>貂蝉</li>
  24.             </ol>
  25.         </li>
  26.     </ol>
  27.  
  28.      <ol>
  29.         <li>《水浒传》</li>
  30.         <li>《西游记》</li>
  31.         <li>《红楼梦》</li>
  32.         <li>《三国演义》</li>
  33.     </ol>
  34.     <ul    type='none'>
  35.         <li>白眉鹰王</li>
  36.         <li>青翼蝠王</li>
  37.         <li>紫衫龙王</li>
  38.         <li>金毛狮王</li>
  39.     </ul>
  40.     <hr>
  41.     <a href="https://www.baidu.com" target='_blank'>百度</a>
  42.     <br>
  43.     <img src="https://www.baidu.com/img/bd_logo1.png" title="百度" width="200">
  44.  
  45.     <br>
  46.  
  47.  </body>
  48. </html>

三，表格

　　1，表格是按照一定的结果来展示数据的；表格是按照从上到下，从左到右的方式来展示数据的；数据全部都保存在单元格中；

　    2，语法： 标记： 表格 ：<table></table>

　　　　　　　　表行： <tr></tr> -----Table  Row

　　　　　　　　 单元格（列）： <td></td> --- Table  Data

　　　　  属性：（1）表格：border  ：指定表格的边框宽度，以px为单位（px可以省略）；

　　　　　　　　　　 width ： 指定表格的宽度， 以px为宽度；

　　　　　　　　　　height ： 指定表格的高度，

　　　　　　　　　　align ： 指定表格在父元素中的水平对齐方式（center ，left， right）；

　　　　　　　　　　cellpadding： 单元格内边距；

　　　　　　　　　　cellspacing :   单元格外边框；

　　　　　　　（2） tr 属性： align   取值：（center ，left， right） 控制当前行的文本的水平对齐方式；

　　　　　　　　　　　　　　valign  取值： top 上 /middle  中  /bottom 下

　　　　　　　　　　　　　　bgcolor  作用：控制当前行的背景颜色； 取值：表示颜色的英文单词；

　　　　　　　（3） td 属性： 1，width；2 ， height；  3，align ； 4，valign； 5，bgcolor；

　　　　　　　　　　　　　　6，colspan ：跨列   ； 7，rowspan， 跨行；

  1. <!doctype html>
  2. <html lang="en">
  3.  <head>
  4.   <meta charset="UTF-8">
  5.   <title>Document</title>
  6.  </head>
  7.  <body>
  8.     <table border='1' width='500' height='300' align='center' cellpadding='5' cellspacing='0'>
  9.         <tr align='center' valign='top' bgcolor='blue'>
  10.             <td>姓名</td>
  11.             <td>身高</td>
  12.             <td>体重</td>
  13.             <td>年龄</td>
  14.         </tr>
  15.         <tr>
  16.             <td>小明</td>
  17.             <td>170</td>
  18.             <td>170</td>
  19.             <td>18</td>
  20.         </tr>
  21.         <tr>
  22.             <td>莉莉</td>
  23.             <td>168</td>
  24.             <td>100</td>
  25.             <td>17</td>
  26.         </tr>
  27.         <tr>
  28.             <td>MM</td>
  29.             <td>178</td>
  30.             <td>99</td>
  31.             <td>18</td>
  32.         </tr>
  33.     </table>
  34.  </body>
  35. </html>

　　3， 不规则表格的创建：

　　　　（1）单元格的跨行

　　　　　　从指定单元格位置处开始，横向向右合并几个单元格（包含自己），被合并掉的单元格要删除出去；

　　　　　　语法： colspan=‘n’

　　　　（2） 单元格的跨列

　　　　　　从指定单元格位置处开始，纵向向下合并几个单元格（包含自己），被合并掉的单元格要删除出去；

　　　　　　语法：rowspan=‘n’

  1. <!doctype html>
  2. <html lang="en">
  3.  <head>
  4.   <meta charset="UTF-8">
  5.   <title>Document</title>
  6.  </head>
  7.  <body>
  8.     <table border='1' width='500' height='300' align='center' cellpadding='5' cellspacing='0'>
  9.         <tr align='center' valign='top' bgcolor='blue'>
  10.             <td>姓名</td>
  11.             <td>身高</td>
  12.             <td>体重</td>
  13.             <td>年龄</td>
  14.         </tr>
  15.         <tr>
  16.             <td>小明</td>
  17.             <td colspan='2' align='center' valign='middle'>170</td>
  18.  
  19.             <td>18</td>
  20.         </tr>
  21.         <tr>
  22.             <td>莉莉</td>
  23.             <td>168</td>
  24.             <td rowspan='2' align='center'>100</td>
  25.             <td>17</td>
  26.         </tr>
  27.         <tr>
  28.             <td>MM</td>
  29.             <td>178</td>
  30.  
  31.             <td>18</td>
  32.         </tr>
  33.     </table>
  34.  </body>
  35. </html>

　　4，分组：

　　      语法：

　　　　（1）表头行分组：

　　　　　　<thead></thead>

　　　　（2）表尾行分组：

　　　　　　表格的最后一行如果要分组的话，放在表尾行分组；

　　　　　   <tfoot></tfoot>

　　　　（3）表主体行分组：

　　　　　　除了表头和表尾行分组之外，剩余放在表主体中

　　　　　　<tbody></tbody>

  1. <!doctype html>
  2. <html lang="en">
  3.  <head>
  4.   <meta charset="UTF-8">
  5.   <title>Document</title>
  6.  </head>
  7.  <body>
  8.  
  9.     <table border='1' width='500' height='300' align='center' cellpadding='5' cellspacing='0'>
  10.         <thead>
  11.             <tr>
  12.                 <td>姓名</td>
  13.                 <td>身高</td>
  14.                 <td>体重</td>
  15.                 <td>年龄</td>
  16.             </tr>
  17.         </thead>
  18.  
  19.         <tbody bgcolor='yellow'>
  20.             <tr>
  21.                 <td>小明</td>
  22.                 <td>170</td>
  23.                 <td>170</td>
  24.                 <td>18</td>
  25.             </tr>
  26.             <tr>
  27.                 <td>莉莉</td>
  28.                 <td>168</td>
  29.                 <td>100</td>
  30.                 <td>17</td>
  31.             </tr>
  32.             <tr>
  33.                 <td>MM</td>
  34.                 <td>178</td>
  35.                 <td>100</td>
  36.                 <td>18</td>
  37.             </tr>
  38.             <tr>
  39.                 <td>小明</td>
  40.                 <td>170</td>
  41.                 <td>170</td>
  42.                 <td>18</td>
  43.             </tr>
  44.             <tr>
  45.                 <td>莉莉</td>
  46.                 <td>168</td>
  47.                 <td>100</td>
  48.                 <td>17</td>
  49.             </tr>
  50.         </tbody>
  51.         <tr>
  52.             <td>MM</td>
  53.             <td>178</td>
  54.             <td>100</td>
  55.             <td>18</td>
  56.         </tr>
  57.         <tr>
  58.             <td>小明</td>
  59.             <td>170</td>
  60.             <td>170</td>
  61.             <td>18</td>
  62.         </tr>
  63.         <tr>
  64.             <td>莉莉</td>
  65.             <td>168</td>
  66.             <td>100</td>
  67.             <td>17</td>
  68.         </tr>
  69.         <tr>
  70.             <td>MM</td>
  71.             <td>178</td>
  72.             <td>100</td>
  73.             <td>18</td>
  74.         </tr>
  75.         <tr>
  76.             <td>小明</td>
  77.             <td>170</td>
  78.             <td>170</td>
  79.             <td>18</td>
  80.         </tr>
  81.         <tr>
  82.             <td>莉莉</td>
  83.             <td>168</td>
  84.             <td>100</td>
  85.             <td>17</td>
  86.         </tr>
  87.         <tr>
  88.             <td>MM</td>
  89.             <td>178</td>
  90.             <td>100</td>
  91.             <td>18</td>
  92.         </tr>
  93.         <tr>
  94.             <td>小明</td>
  95.             <td>170</td>
  96.             <td>170</td>
  97.             <td>18</td>
  98.         </tr>
  99.         <tr>
  100.             <td>莉莉</td>
  101.             <td>168</td>
  102.             <td>100</td>
  103.             <td>17</td>
  104.         </tr>
  105.         <tr>
  106.             <td>MM</td>
  107.             <td>178</td>
  108.             <td>100</td>
  109.             <td>18</td>
  110.         </tr>
  111.         <tr>
  112.             <td>小明</td>
  113.             <td>170</td>
  114.             <td>170</td>
  115.             <td>18</td>
  116.         </tr>
  117.         <tr>
  118.             <td>莉莉</td>
  119.             <td>168</td>
  120.             <td>100</td>
  121.             <td>17</td>
  122.         </tr>
  123.         <tr>
  124.             <td>MM</td>
  125.             <td>178</td>
  126.             <td>100</td>
  127.             <td>18</td>
  128.         </tr>
  129.         <tr>
  130.             <td>小明</td>
  131.             <td>170</td>
  132.             <td>170</td>
  133.             <td>18</td>
  134.         </tr>
  135.         <tr>
  136.             <td>莉莉</td>
  137.             <td>168</td>
  138.             <td>100</td>
  139.             <td>17</td>
  140.         </tr>
  141.         <tr>
  142.             <td>MM</td>
  143.             <td>178</td>
  144.             <td>100</td>
  145.             <td>18</td>
  146.         </tr>
  147.         <tr>
  148.             <td>小明</td>
  149.             <td>170</td>
  150.             <td>170</td>
  151.             <td>18</td>
  152.         </tr>
  153.         <tr>
  154.             <td>莉莉</td>
  155.             <td>168</td>
  156.             <td>100</td>
  157.             <td>17</td>
  158.         </tr>
  159.         <tr>
  160.             <td>MM</td>
  161.             <td>178</td>
  162.             <td>100</td>
  163.             <td>18</td>
  164.         </tr>
  165.     </table>    
  166.  
  167.  <br><br><br>
  168.     <table border='1' width='500' height='300' align='center' cellpadding='5' cellspacing='0'>
  169.         <tr align='center' valign='top' bgcolor='blue'>
  170.             <td>姓名</td>
  171.             <td>身高</td>
  172.             <td>体重</td>
  173.             <td>年龄</td>
  174.         </tr>
  175.         <tr>
  176.             <td>小明</td>
  177.             <td colspan='2' align='center' valign='middle'>170</td>
  178.  
  179.             <td>18</td>
  180.         </tr>
  181.         <tr>
  182.             <td>莉莉</td>
  183.             <td>168</td>
  184.             <td rowspan='2' align='center'>100</td>
  185.             <td>17</td>
  186.         </tr>
  187.         <tr>
  188.             <td>MM</td>
  189.             <td>178</td>
  190.  
  191.             <td>18</td>
  192.         </tr>
  193.     </table>
  194.  </body>
  195. </html>
  1. <!doctype html>
  2. <html lang="en">
  3.  <head>
  4.   <meta charset="UTF-8">
  5.   <title>Document</title>
  6.  </head>
  7.  <body>
  8.     <table border='1' cellspacing='0' width='300' height='300'>
  9.         <tr>
  10.             <td rowspan='2'>a</td>
  11.             <td colspan='2'>b</td>
  12.  
  13.         </tr>
  14.         <tr>
  15.  
  16.             <td>f</td>
  17.             <td rowspan='2'>g</td>
  18.         </tr>
  19.         <tr>
  20.             <td colspan='2'>x</td>
  21.  
  22.         </tr>
  23.     </table>
  24.  </body>
  25. </html>

四， 表单

　　作用： 收集用户的信息并提交给服务器； 表单在网页中是不可见的，但是功能是不能忽略的

　　1，表单中的两个元素：

　　　　（1） form元素：   收集用户的信息；

　　　　（2）表单控件： 能够与用户进行数据交互的可视化组件；

　　2，form元素

　　　　作用：就是表单，收集信息并提交给服务器，

　　　　语法： <form></form>

　　　　注： 只有放在form 中的表单控件，才能被提交；

　　　　属性：（1）action ： 指定提交给服务器上处理程序的地址 ； 默认提交给本页；

　　　　　　  （2）method： 提交方法/方式；

　　　　　　　　　　　　取值：get  ：默认值；向服务器要数据时使用get

　　　　　　　　　　　　　　　　　　特点：1，提交数据会显示在地址栏上；2，安全性较低；3，有提交数据的大小限制--2KB  ;

　　　　　 　　　　　　　　 　post ： 要提交数据给服务器处理时，使用post；如：登录，注册，帖子等

　　　　　　　　　　　　　　　　　　特点： 1，隐式提交，看不到提交的数据； 2， 安全性较高；3，无提交数据的大小限制；

　　　　　　　（3）enctype ： 指定表单数据进行编码的方式；即允许将什么药的数据提交给服务器；

　　　　　　　　　　　　　取值：application/x-www-form-urlencoded 默认值， 允许将所有的文本数据提交给服务器；

　　　　　　　　　　　　　　　　multipart/form-data   允许将文件提交给服务器；

　　　　　　　　　　　　　　　　text/plain 允许将普通字符提交给服务器，特殊字符不行；

　　3，表单控件；

　　　　作用： 可视化的组件，用于与用户进行数据交互；表单控件只有放在<from> 才允许被提交；

　　　　表单控件详解：

　　　　　　（1）文本框 与 密码框

　　　　　　　　文本框： <input type='text'>

　　　　　　　　密码框： <input type='password'>

　　　　　　　　属性： 1，name ： 为控件起名， 在服务器上使用；

　　　　　　　　　　　2， value  ： 值，控件上所显示的值；

　　　　　　　　　　　3， maxlength ： 限制输入的最大字符数；

　　　　　　　　　　　4， placeholder ： 提示占位符；　　

　　　　按钮：

　　　　　　（1）提交按钮：<input type='submit'>

　　　　　　（2）重置按钮： <input type='reset'>　

　　　　　　（3）普通按钮： <input type='button'>   用户自定义

　　　　　　属性： value： 控制按钮上的文字；

　　　　　　

　　　　　　　            <button>按钮上的文字</button>
                type:submit/reset/button　

  1. <!doctype html>
  2. <html lang="en">
  3.  <head>
  4.   <meta charset="UTF-8">
  5.   <title>Document</title>
  6.  </head>
  7.  <body>
  8.     <form action="login" method='post'>
  9.         <!-- 1,创建文本框 -->
  10.         <p>
  11.             用户名：
  12.             <input type='text' name='uname' maxlength='12' placeholder='请输入用户名'>
  13.         </p>
  14.         <!-- 2,创建密码框 -->
  15.         <p>
  16.             密码：
  17.             <input type="password" name='upwd' maxlength='12' placeholder='请输入6-12位密码'>
  18.         </p>
  19.         <!--按钮-->
  20.         <p>
  21.             <input type='submit' value='提交'>
  22.             <input type="reset"    value='重置'>
  23.             <input type="button" value='已有账号，开始登录？'>
  24.             <input type="button" value='忘记密码？'>
  25.         </p>
  26.     </form>
  27.  </body>
  28. </html>
  1. <!doctype html>
  2. <html lang="en">
  3.  <head>
  4.   <meta charset="UTF-8">
  5.   <title>Document</title>
  6.  </head>
  7.  <body>
  8.     <form action="https://www.baidu.com/s">
  9.         <input type="text" name='wd' placeholder='请输入查询关键字'>
  10.         <input type='submit' value='百度一下'>
  11.     </form>
  12.  </body>
  13. </html>

　　表单控件分为：单选按钮和复选框

　　　　1，　单选按钮： <input   type='radio'>

　　　　 复选框：<input  type='checkbox'>

　　　　　　属性： （1）name  ： 为控件定义名称。 除了定义名称之外，name属性也起到了分组的作用；一组的单选按钮和复选框，名称必须一致；

　　　　　　　　　（2） value ： 定义控件的值； 当用户选中控件的时候，则将该控件的value提交给服务器；

　　　　　　　　     （3） checked：  设置预选中， 该属性无值；

  1. <!doctype html>
  2. <html lang="en">
  3.  <head>
  4.   <meta charset="UTF-8">
  5.  
  6.   <title>Document</title>
  7.  </head>
  8.  <body>
  9.     <form action="login">
  10.         <p>
  11.             性别：
  12.             <input checked type="radio" name='gender' value='0'>
  13.             男
  14.             <input type="radio" name='gender' value='1' >
  15.             女
  16.         </p>
  17.         <p>
  18.             爱好：
  19.             <input type="checkbox" name='hobby' value='0'>吃
  20.             <input type="checkbox" name='hobby' value='1'>喝
  21.             <input type="checkbox" name='hobby' value='2'>玩
  22.             <input type="checkbox" name='hobby' value='3'>乐
  23.         </p>
  24.     </form>
  25.  </body>
  26. </html>

　　　,2，隐藏域 和 文件选择框

　　　　   隐藏域： 作用： 想提交给服务器但不想给用户看的数据要放在隐藏域中；

　　　　　　　　语法：<input type='hidden'>

　　　　　　　　属性：name 定义控件的名称；

　　　　　　　　　　　value ： 定义控件的值；

　　　　文件选择框：（上传用户头像）

　　　　　　语法： <input type='file'>

　　　　　　属性： name : 定义控件名称；

　　             注：  1,  表单的method必须为post；2，表单的enctype必须为multipart/form-data ;   两点必须满足；

  1. <!doctype html>
  2. <html lang="en">
  3.  <head>
  4.   <meta charset="UTF-8">
  5.  
  6.   <title>Document</title>
  7.  </head>
  8.  <body>
  9.     <form action="login" method='post' enctype='multipart/form-data'    >
  10.         <p>
  11.             性别：
  12.             <input checked type="radio" name='gender' value='0'>
  13.             男
  14.             <input type="radio" name='gender' value='1' >
  15.             女
  16.         </p>
  17.         <p>
  18.             爱好：
  19.             <input type="checkbox" name='hobby' value='0'>吃
  20.             <input type="checkbox" name='hobby' value='1'>喝
  21.             <input type="checkbox" name='hobby' value='2'>玩
  22.             <input type="checkbox" name='hobby' value='3'>乐
  23.         </p>
  24.         <p>
  25.             <input type="file" name='上传头像'>
  26.         </p>
  27.         <p>
  28.             <input type="hidden" name='uid' value='12232352342'>
  29.             <button type="submit">提交数据</button>
  30.         </p>
  31.     </form>
  32.  </body>
  33. </html>

　　

　　　3，多行文本域

　　　　  标记： <textarea></textarea>

　　　　 属性： name 定义控件的名称；

　　　　　　　　cols： 指定文本的列数（一行中最多能显示多少个英文字符，中文减半）；

　　　　　　　　rows： 指定文本域的默认行数；

  1. <!doctype html>
  2. <html lang="en">
  3.  <head>
  4.   <meta charset="UTF-8">
  5.  
  6.   <title>Document</title>
  7.  </head>
  8.  <body>
  9.     <form action="login" method='post' enctype='multipart/form-data'    >
  10.         <p>
  11.             性别：
  12.             <input checked type="radio" name='gender' value='0'>
  13.             男
  14.             <input type="radio" name='gender' value='1' >
  15.             女
  16.         </p>
  17.         <p>
  18.             爱好：
  19.             <input type="checkbox" name='hobby' value='0'>吃
  20.             <input type="checkbox" name='hobby' value='1'>喝
  21.             <input type="checkbox" name='hobby' value='2'>玩
  22.             <input type="checkbox" name='hobby' value='3'>乐
  23.         </p>
  24.         <p>
  25.             <input type="file" name='上传头像'>
  26.         </p>
  27.         <p>
  28.             <input type="hidden" name='uid' value='12232352342'>
  29.             <button type="submit">提交数据</button>
  30.         </p>
  31.  
  32.         <p>
  33.             用户名称：
  34.             <input type="text" name='uname'>
  35.             <br><br><br><br>
  36.             自我介绍：
  37.             <textarea name="hello" id="" cols="30" rows="10"></textarea>
  38.         </p>
  39.     </form>
  40.  </body>
  41. </html>

　　 4， 下拉选项框：

　　　　<select name=''>

　　　　　　<option value=‘值1’>显示内容1</option>

　　　　　　<option value=‘值2’>显示内容2</option>

　　　　　　<option value=‘值3’>显示内容3</option>

　　　　</select>

  1. <!doctype html>
  2. <html lang="en">
  3.  <head>
  4.   <meta charset="UTF-8">
  5.  
  6.   <title>Document</title>
  7.  </head>
  8.  <body>
  9.     <form action="login" method='post' enctype='multipart/form-data'    >
  10.         <p>
  11.             性别：
  12.             <input checked type="radio" name='gender' value='0'>
  13.             男
  14.             <input type="radio" name='gender' value='1' >
  15.             女
  16.         </p>
  17.         <p>
  18.             爱好：
  19.             <input type="checkbox" name='hobby' value='0'>吃
  20.             <input type="checkbox" name='hobby' value='1'>喝
  21.             <input type="checkbox" name='hobby' value='2'>玩
  22.             <input type="checkbox" name='hobby' value='3'>乐
  23.         </p>
  24.         <p>
  25.             <input type="file" name='上传头像'>
  26.         </p>
  27.         <p>
  28.             <input type="hidden" name='uid' value='12232352342'>
  29.             <button type="submit">提交数据</button>
  30.         </p>
  31.  
  32.         <p>
  33.             用户名称：
  34.             <input type="text" name='uname'>
  35.             <br><br><br><br>
  36.             自我介绍：
  37.             <textarea name="hello" id="" cols="30" rows="10"></textarea>
  38.         </p>
  39.         <p>
  40.             所在地址：
  41.             <select name="addr" id="">
  42.                 <option value="1">北京市</option>
  43.                 <option value="2">天津市</option>
  44.                 <option value="3">上海市</option>
  45.                 <option value="4">重庆市</option>
  46.             </select>
  47.         </p>
  48.     </form>
  49.  </body>
  50. </html>

练习1

  1. <!doctype html>
  2. <html lang="en">
  3.  <head>
  4.   <meta charset="UTF-8">
  5.   <title>Document</title>
  6.  </head>
  7.  <body>
  8.     <h1>修改个人信息</h1>
  9.     <form action="update" method='post'>
  10.         <table border='1' cellspacing='0'>
  11.             <tr>
  12.                 <td>姓名：</td>
  13.                 <td>
  14.                     <input type="text" name='uname' value='mary'>
  15.                 </td>
  16.             </tr>
  17.             <tr>
  18.                 <td>性别：</td>
  19.                 <td>
  20.                     <input type="radio" name='gender' value='1'>女士
  21.                     <input type="radio" name='gender' value='0' checked>男士
  22.                 </td>
  23.             </tr>
  24.             <tr>
  25.                 <td>学历：</td>
  26.                 <td>
  27.                     <select name="edu" id="">
  28.                         <option value="0">其他</option>
  29.                         <option value="1">专科</option>
  30.                         <option value="2">本科</option>
  31.                         <option value="3">硕士及以上</option>
  32.                     </select>
  33.                 </td>
  34.             </tr>
  35.             <tr>
  36.                 <td valign='top'>个人描述:</td>
  37.                 <td>
  38.                     <textarea name="desc" cols="30" rows="5"></textarea>
  39.                 </td>
  40.             </tr>
  41.             <tr>
  42.                 <td></td>
  43.                 <td>
  44.                     <input type="checkbox" name='isPublic'>不要公开我的信息
  45.                 </td>
  46.             </tr>
  47.             <tr>
  48.                 <td></td>
  49.                 <td>
  50.                     <input type="submit" value='保存'>
  51.                     <input type="reset" value='重填'>
  52.                 </td>
  53.             </tr>
  54.         </table>
  55.     </form>
  56.  </body>
  57. </html>

　　　　　　

WEBBASE篇： 第二篇， HTML知识2的更多相关文章

  1. Sharepoint 2013 安装部署系列篇 第二篇 -- SQL集群安装

    第一部分 系统集群安装. 第三部分 安装和配置网络负载均衡在前端web服务器 第四部分 安装和配置sharepoint 场(三层拓扑部署) 以下图片均为sharepoint 2010..由于本人的笔记 ...

  2. [应用篇]第二篇 JSP自带标签介绍

    JSP 有以下三类标签: 指令:JSP Directive 指令标签用于设置与整个 JSP 页面相关的属性,非常常用. 下面的三种标签是我们使用频率最高的 标签 jsp标签 描述 <%@ pag ...

  3. [ 高并发]Java高并发编程系列第二篇--线程同步

    高并发,听起来高大上的一个词汇,在身处于互联网潮的社会大趋势下,高并发赋予了更多的传奇色彩.首先,我们可以看到很多招聘中,会提到有高并发项目者优先.高并发,意味着,你的前雇主,有很大的业务层面的需求, ...

  4. AI之路，第二篇：python数学知识2

    第二篇:python数学知识2 线性代数 导入相应的模块: >>> import numpy as np     (数值处理模块)>>> import scipy ...

  5. 第二篇 ：微信公众平台开发实战Java版之开启开发者模式，接入微信公众平台开发

    第一部分:微信公众号对接的基本介绍 一.填写服务器配置信息的介绍 登录微信公众平台官网后,进入到公众平台后台管理页面. 选择 公众号基本设置->基本配置 ,点击“修改配置”按钮,填写服务器地址( ...

  6. IIS负载均衡-Application Request Route详解第二篇：创建与配置Server Farm（转载）

    IIS负载均衡-Application Request Route详解第二篇:创建与配置Server Farm 自从本系列发布之后,收到了很多的朋友的回复!非常感谢,同时很多朋友问到了一些问题,有些问 ...

  7. 第二篇 Replication：分发服务器的作用

    本篇文章是SQL Server Replication系列的第二篇,详细内容请参考原文. 分发服务器是SQL Server复制的核心组件.分发服务器控制并执行数据从一个服务器移动到另一个服务器的进程. ...

  8. 第二篇 Integration Services：SSIS数据泵

    本篇文章是Integration Services系列的第二篇,详细内容请参考原文. 简介SSIS用于移动数据.数据流任务提供此功能.因为这个原因,当介绍SSIS时我喜欢从数据流任务开始.数据流任务的 ...

  9. 第二篇 SQL Server代理作业步骤和子系统

    本篇文章是SQL Server代理系列的第二篇,详细内容请参考原文. SQL Server代理作业由一系列的一个或多个作业步骤组成.一个作业步骤分配给一个特定的作业子系统(确定作业步骤去完成的工作). ...

  10. “MVC+Nhibernate+Jquery-EasyUI”信息发布系统 第二篇（数据库结构、登录窗口、以及主界面）

    “MVC+Nhibernate+Jquery-EasyUI”信息发布系统 第二篇(数据库结构.登录窗口.以及主界面) 一.在上一篇文章中,主要说的就是把主框架搭建起来,并且Nhibernate能达到增 ...

随机推荐

  1. WebView中JS调用Android Method 遇到的坑整理

    WebView是android中常用的一个组件,其作用是展示网页,并让网页和android app进行一些业务逻辑上的交互. 其坑无数,相信用过的都知道,一个一个来解决吧. 1.怎么互调: <! ...

  2. Spring控制反转（依赖注入）的最简单说明

    1.常规方式实现实例化 1.1已有角色如下: 一个接口Interface,两个接口实现类InstatnceA.InstanceB,一个调用类User 1.2当前实例化InstanceA如下: Inte ...

  3. Greys Java在线问题诊断工具

    摘要: 线上系统为何经常出错?数据库为何屡遭黑手?业务调用为何频频失败?连环异常堆栈案,究竟是那次调用所为? 数百台服务器意外雪崩背后又隐藏着什么?是软件的扭曲还是硬件的沦丧? 走进科学带你了解Gre ...

  4. 微信小程序 无限加载 上拉加载更多

    加载更多,其实就是再次向接口发送请求,把返回的数据,追加到渲染页面的数组里的过程,具体实现实例如下: demo.js // pages/project/project.js const app = g ...

  5. Redis的JAVA连接

    ShardedJedis用法 package com.zhi.demo; import java.util.Arrays; import java.util.List; import redis.cl ...

  6. OSI七层协议概念详解

    OSI七层模型 相关协议 缩写 应用层 HTTP 超文本传输协议 FTP 文件传输协议 SMTP 简单邮件传输协议 TELNET TCP/IP终端仿真协议 POP3 邮局协议第三版 Finger 用户 ...

  7. linux文件管理 文件搜索

    文件搜索命令find 'find [搜索范围] [搜索条件]' 搜索文件 find / -name install.log #避免大范围搜索,会非常消耗系统资源 #find是在系统当中搜索符合条件的文 ...

  8. learning at command AT+CSQ

    AT command AT+CSQ [Purpose]        Learning how to get mobile module single quality report   [Eeviro ...

  9. day29-python阶段性复习三

    七.python打开文件方式 open r: 读的方式 w:已写的方式打开 a:以追加的方式 r+ 读写模式 w+ 读写 a+ 读写 rb:二进制读模式打开 wb:以二进制写模式打开 ab 二进制追加 ...

  10. java获得当前系统时间三种方法

    参见: http://blog.csdn.net/cloume/article/details/46624637