zoukankan      html  css  js  c++  java
  • html标签详解(2)

    http标签详解

    声明 1:这里的文字都是我从我自己csdn账号拷贝过来,是本人学习总结的结晶,所以请尊重本作品。2:如要要转载本文章,则要说明文字的出处。3:如有哪里不对欢迎指出。

    在上一篇文章中主要讲了,http的一些基础标签,比方说链接标签,图片标签,html框架等,那接下来主要针对表格标签,列表标签,表单标签做一个详细的讲解

    1:表格标签

    <table></table>     表格的标签

     1 <!DOCTYPE html>
     2     <html>
     3         <head>
     4             <!-- 原创作者:蜗牛 -->
     5             <title>table标签</title>
     6         </head>
     7         <body>
     8             <table  border="1" width="360"  height="240" 
     9                     cellspacing="1" cellpadding="1" 
    10                     align="center" bgcolor="red">   <!--这里的center表示该表格在页面的中间位置-->
    11                                                     <!--这里的背景色标签是bgcolor-->
    12                     <caption><h2>我的好朋友</caption>
    13 
    14                      <tr>
    15                          <th>姓名</th>
    16                  <th>性别</th>
    17                          <th>年龄</th>
    18                          <th>爱好</th>                     
    19                      </tr>
    20 
    21                      <tr align="center">          <!--这里的center表示的是表格里面的字体居中-->
    22                          <td>小红</td>
    23                          <td></td>
    24                          <td>20</td>
    25                          <td>跳舞</td>
    26                      </tr>
    27 
    28                      <tr align="center"> 
    29                          <td>小舵</td>
    30                          <td></td>
    31                          <td>24</td>
    32                          <td>唱歌</td>
    33                      </tr>
    34                     
    35                 </table>
    36        </body>
    37     </html>
    注解:

    <tr> </tr>         标签用于表示行

    <td> </td>      标签用于表示列

    <th> </th>      标签用于表示表格的标题,用法和 <td> </td>一样只是里面的内容会自动加大加粗

    border            设置表格边框的宽度,单位为pixel

    width              设置表格宽度,单位为pixel

    height             设置表格高度,单位为pixel

    cellspacing   设置单元格之间的距离,就指表格表格边框的间距

    cellpadding  设置文字距离单元格边框的距离

    bgcolor          设置表格的背景颜色

    align              用于设置对齐方式,比如center,left,right

    <caption>     表头名</caption>用于表示表头

    (2)关于合并单元格

     1 <!DOCTYPE html>
     2 <html>
     3     <head>     
     4         <title>table中合并单元格</title>
     5     </head>
     6     <body>
     7         <table  border="1" width="300"  height="200" 
     8                 align="center" background="first.jpg" >  <!--background代表的是背景图片,bgcolor代表背景色完全不一样-->
     9 
    10                   <tr align="center" width="100" >
    11                      <td>1</td>
    12                      <td colspan="2">占两列</td>    <!--当colspan="2"表示在同一行中,两列并一列,那么在它下面少写一个<td></td>标签-->
    13                      <!-- 删除掉此<td></td> -->
    14                      <td>2</td>
    15                  </tr>
    16 
    17                  <tr   align="center" width="100">  
    18                      <td rowspan="2">占两行</td>   <!--当 rowspan="2"表示在同一列中 两行并一行,那么在同一列中删掉一个<td></td>标签-->
    19                      <td>3</td>
    20                      <td>4</td>
    21                      <td>5</td>
    22                  </tr>
    23 
    24                   <tr   align="center" width="100" >
    25                     <!-- 删除掉此<td></td> -->
    26                      <td>6</td>
    27                      <td>7</td>
    28                      <td>8</td>
    29                  </tr>          
    30             </table>
    31    </body>
    32 </html>
    运行结果如下:
     
    注意:当你在表格的每个单元格中输入不同内容是,你的的内容长度不同内容会变,要想每个单元格保持一样大有两种方法1;比如当你的表格总hight为400,你设置4行,那么在每个<tr>标签中添加属性:hight=100;就相当于平均分配,同样宽度用同样方法。2:会比第一种简便,就是设置css样式,把tr和td大小固定

    2:列表标签

     1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4     <title>列表标签</title>
     5     </head>
     6     <body  bgcolor="#FFFF00">
     7         <!-- 无序列表 -->
     8         2017年心愿
     9         <ul type="circle">     <!--无序序列<ul> ,无序有circle:圆点,square:小方块-->
    10             <li>父母身体健康</li>
    11             <li>宝宝健康成长</li>
    12             <li>媳妇健健康康</li>
    13         </ul>
    14 
    15         <!-- 有序列表 -->
    16         2017年大事件
    17         <ol type="1" start="2">   <!--有序的标签是<ol>,有序有五种:1,A,a ,i,I,start代表从什么时候开始等于2代表从2开始--> 
    18             <li>老婆要生小孩了</li>
    19             <li>自己换工作了</li>
    20             <li>要卖掉一套房</li>
    21         </ol>
    22         
    23         <!-- 自定义列表 -->
    24         <dl>                    <!--在自定义列表<dl> </dl>中使用<dt> </dt>表示小标题,使用<dd> </dd>表示列表项-->
    25             <dt>时刻告诉自己</dt>
    26             <dd>不抱怨</dd>
    27             <dd>零负能量</dd>
    28             <dd>该与不该</dd>
    29         </dl>
    30     </body>
    31 </html>
    运行结果如下:
    3:表单
    <form></form>        表单标签
     1 <!DOCTYPE html>
     2 <head>
     3 <title>form表单</title>
     4 </head>
     5 <body>
     6 <!--form 指的是表单标签   当前标签的内容在提交的时候都会被自动提交    action=""是指把当前表单提交的位置-->
     7     <form action="Myservlet" method="post" onSubmit="return submitFun();"> <!--onSubmit只有当返回为true是才能提交表单-->
     8         <fieldset>                       <!--主要会在相关表单元素周围绘制边框-->
     9             <legend>用户注册</legend>    <!--在上面绘制的边框绘制的位置写上“用户注册”-->
    10         <!--input 一个输入框里    type 的当前输入框的类型   text 是指当前的类型是文本框name是用来区分不同的文本框-->
    11                              <!--的也是在表单提交后用来获取表单的内容 -->   
    12          用户名:<input type="text" name="username" /><br/><br/>
    13          密码 :<input type="password" name="password"/><br/><br/>  <!--password代表输入的文字显示为黑点-->
    14          <!--value是指当前表单提交后 获取的值    checked设置默认选中的情况-->
    15          性别:男性<input type="radio" name="sex" value="male" checked="checked"> <!--radio代表单选按钮-->
    16                女性<input type="radio" name="sex" value="female">    <br/><br/>            
    17          学历: <select name="education">                               <!--select代表下来列表-->
    18                      <option value="gz">博士</option>                <!--option代表每一个值,取名gz为了后台获取-->
    19                     <option value="yjs">研究生</option>                          
    20                     <option value="bk" selected="selected">本科</option>  <!--select代表默认选中,本科会显示到界面-->
    21                     <option value="zk">专科</option>                              
    22                  </select>     <br/><br/>
    23         兴趣爱好:<input type="checkbox" name="likes" value="bike" />骑车   <!--checkbox复选框-->
    24                  <input type="checkbox" name="likes" value="sleep" checked="checked" />睡觉  <!--checked代表默认选中-->
    25                  <input type="checkbox" name="likes" value="eat" />吃饭
    26                  <input type="checkbox" name="likes" value="daima" />敲代码 <br/>
    27         备注:<textarea  cols="40"  rows="5" name="bz"></textarea> <br/><br/>  <!--textarea文本域设置行和列-->
    28                 个人头像:<input type="file"><br>           <!--代表可以在电脑上宣文件-->
    29       <!--disabled代表不可编辑,我在测试中发现不可编辑状态后台是无法取到这个value值的,想要获得就要在提交时改变为可编辑-->
    30                 个人网站:<input type="url" value="www.baidu.com" disabled="disabled"> <br>  
    31                
    32                 个人邮箱:<input type="email"><br>          <!--邮箱格式-->
    33               
    34                 身体体重:<input type="number"><br>         <!--代表只能输入数字-->
    35              
    36                 出生日期:<input type="date"><br>           <!--可选年月日-->
    37                
    38                 详细时间:<input type="time"><br>            <!--time--代表显示时分-->
    39                 
    40                 隐藏项:   <input  type="hidden" value="你们看不到我"><br>     <!--这个隐藏标签有很大的作用,可以不显示在界面,但后台可以获取值-->
    41         
    42                 <input type="button" value="填写完毕">     <!--普通的button按钮-->
    43                 <input type="reset" value="重置信息">      <!--reset代表一按重置所以信息清空-->
    44                 <input type="submit" value="完成注册">     <!--submi代表所以信息提交到后台,如果上面调用了onSubmit方法,那么返回为true才提交-->
    45                 <input type="image" src="first.jpg" height="20" width="40">        <!--image也可以进行表单的提交-->
    46
    47         </fieldset>         
    48     </form>
    49 </body>
    50 </html>

    效果图如下:

  • 相关阅读:
    Django-admin管理工具
    docker-ce安装与搭建私有仓库
    docker-建立私有registry
    UBUNTU 下设置全局 path变量
    REDIS学习(1)环境搭建
    mongodb学习(1) 第一次开启 mongdb
    linux 添加 $path
    php cgi 与 cli 区别
    mysql 分区信息查看
    php 编译安装选项
  • 原文地址:https://www.cnblogs.com/qdhxhz/p/6292664.html
Copyright © 2011-2022 走看看