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>

效果图如下：

html标签详解（2）的更多相关文章

  1. Meta标签详解(HTML JAVASCRIPT)

    Meta标签详解,在网上转的,希望对大家有用 您的个人网站即使做得再精彩,在“浩瀚如海”的网络空间中,也如一叶扁舟不易为人发现,如何推广 个人网站,人们首先想到的方法无外乎以下几种: ● 在搜索引擎中 ...

  2. 网页设计：Meta标签详解

    很多人忽视了HTML标签META的强大功效,一个好的META标签设计可以大大提高你的个人网站被搜索到的可能性,有兴趣吗,谁我来重新认识一下META标签吧! META标签是HTML语言HEAD区的一个辅 ...

  3. meta标签详解(meta标签的作用)///////////////////////////转

    meta标签详解(meta标签的作用) 很多人却忽视了HTML标签META的强大功效,一个好的META标签设计可以大大提高你的个人网站被搜索到的可能性,有兴趣吗,谁我来重新认识一下META标签吧   ...

  4. 引用 struts2标签详解 - wo的的日志 - 网易博客

    引用 元元 的 struts2标签详解   引用 COLD 的 struts2标签详解 要在jsp中使用Struts2的标志,先要指明标志的引入.通过jsp的代码的顶部加入以下的代码: <%@t ...

  5. html标签详解

    html标签详解   <!DOCTYPE> 标签 <!DOCTYPE> 声明必须是 HTML 文档的第一行,位于 <html> 标签之前. <!DOCTYPE ...

  6. html标签详解（1）

     http标签详解及讲解        1.基础标签 <!DOCTYPE html> <!--表示文本类型--> <html> <!--<html> ...

  7. 转：springmvc常用注解标签详解

    Spring5:@Autowired注解.@Resource注解和@Service注解 - IT·达人 - 博客园--这篇顺序渐进,讲得超级好--此人博客很不错http://www.cnblogs.c ...

  8. embed标签详解

    HTML-embed标签详解 Embed(一).基本语法:embed src=url说明:embed可以用来插入各种多媒体,格式可以是 Midi.Wav.AIFF.AU.MP3等等,      Net ...

  9. Meta标签详解

    [转载]Meta标签详解 Posted on 2005-05-17 20:00 二十四画生 阅读(54195) 评论(102)  编辑 收藏 Meta标签详解,在网上转的,希望对大家有用 引言 您的个 ...

随机推荐

  1. matplotlib 中文显示问题

    matplotlib 默认显示不了中文,如果想显示中文,通过下面代码设置: import matplotlib #指定默认字体 matplotlib.rcParams['font.sans-serif ...

  2. css2d 3d

    2D转换 1.rotate()   旋转 <!DOCTYPE html><html> <head> <meta charset="UTF-8&quo ...

  3. VS2015配置OpenCV，使用mfc摄像头程序测试

    转自:https://blog.csdn.net/Lee_Dk/article/details/80466523 这只是介绍了如何加入OpenCV,怎么查找OpenCV请看出处. 新建一个项目.找到属 ...

  4. opencv2.4.13+python2.7学习笔记--使用 knn对手写数字OCR

    阅读对象:熟悉knn.了解opencv和python. 1.knn理论介绍:算法学习笔记:knn理论介绍 2. opencv中knn函数 路径:opencv\sources\modules\ml\in ...

  5. aji unorder_map

  6. docker 配置 http 访问

    编辑docker宿主机文件/lib/systemd/system/docker.service sudo vi /lib/systemd/system/docker.service 修改以ExecSt ...

  7. 补发————DOM与BOM

    什么是Dom? DOM是w3c(万维网联盟)的标准. DOM定义了HTML与ML文档的标准: w3c文档对象模型(DOM)是中立于平台与语言的接口,他允许程序和脚本动态访问和更新文档的内容.结构和样式 ...

  8. IntelliJ IDEA小问题通过操作软件解决

    Diamond types are not supported at this language level http://blog.csdn.net/qq_34884729/article/deta ...

  9. iOS 数组问题

    在iOS开发过程中,使用json抓取网络数据进行解析时,用tableview承载,发现数据已经抓取到,但是在cell里面使用却会导致程序崩溃 原因可能是初始化方法问题,将 _infoArray=[[N ...

  10. 图片处理类 类库--C#

    调用如下: Bitmap bitmap = new Bitmap("C:\\Users\\Thinkpad\\Desktop\\aa.jpg"); Bitmap[] bit = n ...