HTML小例子

< html >
< head >
   < title >这是标题 </title>
</head>
< body >
  这是内容
</body>    
</html>

< html >
< head >
   < title >设置背景颜色为红色 </title>
</head>
< body  bgcolor ="red" >
  
</body>    
</html>

< html >
< head >
   < title >设置背景为图片 </title>
</head>
<!--
< body  background ="C:\Documents and Settings\All Users\Documents\My Pictures\示例图片\Sunset.jpg" >
-->
<!-- 
< body  background ="images/Sunset.jpg" >  
-->
< body  background ="../images/Sunset.jpg" >  
</body>    
</html>

< html >
< head >
   < title >演示横线 </title>
</head>
< body >  
   < hr  size ="6"  width ="200"  color ="red" >
   < hr  size ="6"  width ="60%"  color ="red" >
</body>    
</html>

< html >
< head >
   < title >演示超连接 </title>
</head>
< body >  
   < a  href ="http://www.sina.com.cn" >连接到新浪 </a>
</body>    
</html>

< html >
< head >
   < title >测试H1~6 </title>
</head>
< body >  
   < h1 >h1 </h1>
   < h2 >h2 </h2>
   < h3 >h3 </h3>
   < h4 >h4 </h4>
   < h5 >h5 </h5>
   < h6 >h6 </h6>
</body>    
</html>

< html >
< head >
   < title >测试font </title>
</head>
< body >  
   < font  color ="red"  size ="4" >红色，4号  </font>
   < p >
   < font  color ="blue"  size ="5" >蓝色，5号  </font>
</body>    
</html>

< html >
< head >
   < title >测试特殊标签 </title>
</head>
< body >  
   < b >黑 </b>
   < i >斜体 </i>
   < u >下划线 </u>
   < s >中线 </s>
   < sup >上标 </sup>
   < sub >下标 </sub>
</body>    
</html>

< html >
< head >
   < title >测试转义符 </title>
</head>
< body >  
a     b
< p >
<
< p >
>
</body>    
</html>

< html >
< head >
   < title >测试文字布局 </title>
</head>
< body >  
   < div  align ="center" >
    div1111居中 < p >
    abcedf.....
   </div>
   < div  align ="center" >
    div2222居中 < br >
    abcedf.....
   </div>  
   < span >
    span111.....
   </span>
   < span >
    span222.....
   </span>  
   < p >
   < ul >
     < li >无序号列表 </li>
     < li >无序号列表 </li>
   </ul>
   < p >
   < ol >
     < li >有序号列表 </li>
     < li >有序号列表 </li>
   </ol>
   < p >
   < pre >
     0        nmdnmd
        0     0     jksdafkjsfdk
            0    afdsafsf
   </pre>
</body>    
</html>

< html >
< head >
   < title >测试img标签 </title>
</head>
< body >  
   < img  src ="../images/Sunset.jpg"  width ="100"  height ="100"  alt ="这是图片" >
</body>    
</html>

< html >
< head >
   < title >测试type=text </title>
</head>
< body >  
   < h1 >文本输入域演示 </h1>  
   < hr >
  <!--
    默认get提交,get提交会放到url的后面
   < form >
  -->
  <!--
   < form  method ="get" >
  -->
   < form  method ="post" >
    姓名： < input  type ="text"  name ="username"  id ="username123"  value ="张三"  size ="50"  maxlength ="5" > < br >
    年龄： < input  type ="text"  name ="age"  id ="age" > < br >
     < input  type ="submit"  value ="保存" >
   </form>
</body>    
</html>

< html >
< head >
   < title >测试type=text </title>
</head>
< body >  
   < h1 >复选框输入域演示 </h1>  
   < hr >
  
   < form  method ="post" >
    姓名： < input  type ="text"  name ="username" > < br >
         爱好： < input  type ="checkbox"  name ="a" >游泳  
          < input  type ="checkbox"  name ="a" >打球
          < br >
            
     < input  type ="submit"  value ="保存" >
   </form>
</body>    
</html>

< html >
< head >
   < title >测试type=radio </title>
</head>
< body >  
   < h1 >单选框输入域演示 </h1>  
   < hr >
   < form  method ="post" >
    姓名： < input  type ="text"  name ="username" > < br >
         性别： < input  type ="radio"  name ="a" >男  
          < input  type ="radio"  name ="a"  checked ="true" >女
          < br >
            
     < input  type ="submit"  value ="保存" >
   </form>
</body>    
</html>

< html >
< head >
   < title >测试select </title>
</head>
< body >  
   < h1 >下拉列表框输入域演示 </h1>  
   < hr >
   < form  method ="post" >
    姓名： < input  type ="text"  name ="username" > < br >
         性别：
          < select  name ="sex" >
             < option  value ="01" >男 </option>
             < option  value ="02" selected  >女 </option>
          </select>
             
          < p >
         
         性别：
          < select  name ="sex" multiple >
             < option  value ="01" >男 </option>
             < option  value ="02" >女 </option>
          </select>
         
   </form>
</body>    
</html>

< html >
< head >
   < title >测试textarea </title>
</head>
< body >  
   < h1 >textarea输入域演示 </h1>  
   < hr >
   < form  method ="post" >
    姓名： < input  type ="text"  name ="username" > < br >
    备注： < textarea  name ="remark"  rows ="5" cols=20 > </textarea>
   </form>
</body>    
</html>

< html >
< head >
   < title >测试button,submit,reset,image </title>
</head>
< body >  
   < h1 >button,submit,reset,image演示 </h1>  
   < hr >
   < form  method ="get" >
    姓名： < input  type ="text"  name ="username" > < br >
    备注： < textarea  name ="remark"  rows ="5" cols=20 > </textarea> < br >
     < input  type ="submit"  value ="submit" > < br >
     < input  type ="button"  value ="button" > < br >
     < input  type ="reset"  value ="reset" > < br >
     < input  type ="image"  src ="../images/Sunset.jpg"  width ="20"  height ="20" >
   </form>
</body>    
</html>

< html >
< head >
   < title >测试hidden </title>
</head>
< body >  
   < h1 >hidden演示 </h1>  
   < hr >
   < form  method ="get" >
         <!--
    流水号： < input  type ="text"  name ="flowNo"  value ="9998789" > < br >
    -->
     < input  type ="hidden"  name ="flowNo"  value ="9998789" > < br >
    姓名： < input  type ="text"  name ="username"  value ="张三" > < br >
    备注： < textarea  name ="remark"  rows ="5" cols=20 >asdfsadfsf </textarea> < br >
     < input  type ="submit"  value ="修改" > < br >
   </form>
</body>    
</html>

< html >
< head >
   < title >测试table </title>
</head>
< body >  
   < h1 >table演示 </h1>  
   < hr >
   < table  width ="60%"  border ="1" >
     < tr  align ="center" >
       < td >学生姓名 </td>
       < td >科目 </td>
       < td >成绩 </td>
     </tr>
     < tr >
       < td >张三 </td>
       < td >数学 </td>
       < td >100 </td>
     </tr>
     < tr >
       < td >张三 </td>
       < td >语文 </td>
       < td >90 </td>
     </tr>
     < tr >
       < td  colspan ="2"  align ="center" >合计 </td>
       < td >190 </td>
     </tr>
   </table>
</body>    
</html>

< html >
< head >
   < title >测试frame </title>
</head>
<!--
< body >  
-->
   < frameset  cols ="20%,*" >
     < frame  name ="left"  src ="21_1.html" noresize >
     < frame  name ="right"  src ="21_2.html" >
   </frameset>
<!--  
</body>    
-->
</html>

< html >
< head >
   < title >测试frame </title>
</head>
< body >  
  left
</body>    
</html>

< html >
< head >
   < title >测试frame </title>
</head>
< body >  
  right
</body>    
</html>

< html >
< head >
   < title >测试frame </title>
</head>
   < frameset  rows ="10%,*" >
     < frame  name ="top"  src ="22_1.html" noresize >
     < frameset  cols ="15%,*" >
       < frame  name ="left"  src ="22_2.html" >
       < frame  name ="right"  src ="22_3.html" >
     </frameset>
   </frameset>
</html>

< html >
< head >
   < title >测试frame </title>
</head>
< body >
  top
</body>
</html>

< html >
   < head >
     < title >测试frame </title>
   </head>
   < body >
     < a  href ="student_add.html"  target ="_self" >添加学生 </a> < br >
     < a  href ="student_del.html"  target ="_blank" >删除学生 </a> < br >
     < a  href ="student_modify.html"  target ="_top" >修改学生 </a> < br >
     < a  href ="student_query.html"  target ="right" >查询学生 </a> < br >
   </body>
</html>

< html >
< head >
   < title >测试frame </title>
</head>
< body >
  right
< body >
</html>

< html >
< head >
   < title >测试iframe </title>
</head>
< body >  
   < h1 >iframe演示 </h1>  
   < iframe  src ="23_1.html" > </iframe>
</body>    
</html>

< html >
< head >
     < title >学生信息列表 </title>
</head>
< body >    
     < h1 >学生信息列表 </h1>    
     < hr >
     < table  border ="1"  width ="1500" >
         < tr >
             < td  width ="20%" >11111 </td>
             < td  width ="20%" >11111 </td>
             < td  width ="20%" >11111 </td>
         </tr>
         < tr >
             < td  width ="20%" >11111 </td>
             < td  width ="20%" >11111 </td>
             < td  width ="20%" >11111 </td>
         </tr>
         < tr >
             < td  width ="20%" >11111 </td>
             < td  width ="20%" >11111 </td>
             < td  width ="20%" >11111 </td>
         </tr>
         < tr >
             < td  width ="20%" >11111 </td>
             < td  width ="20%" >11111 </td>
             < td  width ="20%" >11111 </td>
         </tr>
         < tr >
             < td  width ="20%" >11111 </td>
             < td  width ="20%" >11111 </td>
             < td  width ="20%" >11111 </td>
         </tr>
         < tr >
             < td  width ="20%" >11111 </td>
             < td  width ="20%" >11111 </td>
             < td  width ="20%" >11111 </td>
         </tr>
         < tr >
             < td  width ="20%" >11111 </td>
             < td  width ="20%" >11111 </td>
             < td  width ="20%" >11111 </td>
         </tr>
        
     </table>
</body>        
</html>