html标签大全（2）

http标签详解

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

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

1：表格标签

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

 <!DOCTYPE html>

     <html>

         <head>

             <!-- 原创作者：蜗牛 -->

             <title>table标签</title>

         </head>

         <body>

             <table  border="1" width="360"  height="240"

                     cellspacing="1" cellpadding="1"

                     align="center" bgcolor="red">   <!--这里的center表示该表格在页面的中间位置-->

                                                     <!--这里的背景色标签是bgcolor-->

                     <caption><h2>我的好朋友</caption>

                      <tr>

                          <th>姓名</th>

                  <th>性别</th>

                          <th>年龄</th>

                          <th>爱好</th>

                      </tr>

                      <tr align="center">          <!--这里的center表示的是表格里面的字体居中-->

                          <td>小红</td>

                          <td>女</td>

                          <td>20</td>

                          <td>跳舞</td>

                      </tr>

                      <tr align="center">

                          <td>小舵</td>

                          <td>女</td>

                          <td>24</td>

                          <td>唱歌</td>

                      </tr>

                 </table>

        </body>

     </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）关于合并单元格

 <!DOCTYPE html>

 <html>

     <head>

         <title>table中合并单元格</title>

     </head>

     <body>

         <table  border="1" width="300"  height="200"

                 align="center" background="first.jpg" >  <!--background代表的是背景图片，bgcolor代表背景色完全不一样-->

                   <tr align="center" width="100" >

                      <td>1</td>

                      <td colspan="2">占两列</td>    <!--当colspan="2"表示在同一行中，两列并一列，那么在它下面少写一个<td></td>标签-->

                      <!-- 删除掉此<td></td> -->

                      <td>2</td>

                  </tr>

                  <tr   align="center" width="100">

                      <td rowspan="2">占两行</td>   <!--当 rowspan="2"表示在同一列中 两行并一行，那么在同一列中删掉一个<td></td>标签-->

                      <td>3</td>

                      <td>4</td>

                      <td>5</td>

                  </tr>

                   <tr   align="center" width="100" >

                     <!-- 删除掉此<td></td> -->

                      <td>6</td>

                      <td>7</td>

                      <td>8</td>

                  </tr>

             </table>

    </body>

 </html>

运行结果如下：

注意：当你在表格的每个单元格中输入不同内容是，你的的内容长度不同内容会变，要想每个单元格保持一样大有两种方法1；比如当你的表格总hight为400，你设置4行，那么在每个<tr>标签中添加属性：hight=100；就相当于平均分配，同样宽度用同样方法。2：会比第一种简便，就是设置css样式，把tr和td大小固定

2：列表标签

 <!DOCTYPE html>

 <html>

     <head>

     <title>列表标签</title>

     </head>

     <body  bgcolor="#FFFF00">

         <!-- 无序列表 -->

         2017年心愿

         <ul type="circle">     <!--无序序列<ul> ，无序有circle：圆点，square：小方块-->

             <li>父母身体健康</li>

             <li>宝宝健康成长</li>

             <li>媳妇健健康康</li>

         </ul>

         <!-- 有序列表 -->

         2017年大事件

         <ol type="1" start="2">   <!--有序的标签是<ol>,有序有五种：1,A,a ,i,I，start代表从什么时候开始等于2代表从2开始-->

             <li>老婆要生小孩了</li>

             <li>自己换工作了</li>

             <li>要卖掉一套房</li>

         </ol>

         <!-- 自定义列表 -->

         <dl>                    <!--在自定义列表<dl> </dl>中使用<dt> </dt>表示小标题，使用<dd> </dd>表示列表项-->

             <dt>时刻告诉自己</dt>

             <dd>不抱怨</dd>

             <dd>零负能量</dd>

             <dd>该与不该</dd>

         </dl>

     </body>

 </html>

运行结果如下：

3：表单

<form></form> 表单标签

 <!DOCTYPE html>

 <head>

 <title>form表单</title>

 </head>

 <body>

 <!--form 指的是表单标签   当前标签的内容在提交的时候都会被自动提交    action=""是指把当前表单提交的位置-->

     <form action="Myservlet" method="post" onSubmit="return submitFun();"> <!--onSubmit只有当返回为true是才能提交表单-->

         <fieldset>                       <!--主要会在相关表单元素周围绘制边框-->

             <legend>用户注册</legend>    <!--在上面绘制的边框绘制的位置写上“用户注册”-->

         <!--input 一个输入框里    type 的当前输入框的类型   text 是指当前的类型是文本框name是用来区分不同的文本框-->

                              <!--的也是在表单提交后用来获取表单的内容 -->

          用户名:<input type="text" name="username" /><br/><br/>

          密码 :<input type="password" name="password"/><br/><br/>  <!--password代表输入的文字显示为黑点-->

          <!--value是指当前表单提交后 获取的值    checked设置默认选中的情况-->

          性别:男性<input type="radio" name="sex" value="male" checked="checked"> <!--radio代表单选按钮-->

                女性<input type="radio" name="sex" value="female">    <br/><br/>

          学历: <select name="education">                               <!--select代表下来列表-->

                      <option value="gz">博士</option>                <!--option代表每一个值，取名gz为了后台获取-->

                     <option value="yjs">研究生</option>

                     <option value="bk" selected="selected">本科</option>  <!--select代表默认选中，本科会显示到界面-->

                     <option value="zk">专科</option>

                  </select>     <br/><br/>

         兴趣爱好:<input type="checkbox" name="likes" value="bike" />骑车   <!--checkbox复选框-->

                  <input type="checkbox" name="likes" value="sleep" checked="checked" />睡觉  <!--checked代表默认选中-->

                  <input type="checkbox" name="likes" value="eat" />吃饭

                  <input type="checkbox" name="likes" value="daima" />敲代码 <br/>

         备注:<textarea  cols="40"  rows="5" name="bz"></textarea> <br/><br/>  <!--textarea文本域设置行和列-->

                 个人头像:<input type="file"><br>           <!--代表可以在电脑上宣文件-->

       <!--disabled代表不可编辑，我在测试中发现不可编辑状态后台是无法取到这个value值的，想要获得就要在提交时改变为可编辑-->

                 个人网站:<input type="url" value="www.baidu.com" disabled="disabled"> <br>  

                 个人邮箱:<input type="email"><br>          <!--邮箱格式-->

                 身体体重:<input type="number"><br>         <!--代表只能输入数字-->

                 出生日期:<input type="date"><br>           <!--可选年月日-->

                 详细时间:<input type="time"><br>            <!--time--代表显示时分-->

                 隐藏项：   <input  type="hidden" value="你们看不到我"><br>     <!--这个隐藏标签有很大的作用，可以不显示在界面，但后台可以获取值-->

                 <input type="button" value="填写完毕">     <!--普通的button按钮-->

                 <input type="reset" value="重置信息">      <!--reset代表一按重置所以信息清空-->

                 <input type="submit" value="完成注册">     <!--submi代表所以信息提交到后台,如果上面调用了onSubmit方法，那么返回为true才提交-->

                 <input type="image" src="first.jpg" height="20" width="40">        <!--image也可以进行表单的提交-->

         </fieldset>

     </form>

 </body>

 </html>

效果图如下：

html标签大全（2）的更多相关文章

meta标签大全
meta标签大全 <!-- x-ua-compatible(浏览器兼容模式) 仅对IE8+以效告诉浏览器以什么版本的IE的兼容模式来显示网页 <meta ...
【转】Html标签大全
Html标签大全 2013-07-05 18:22:33 分类: Python/Ruby Html标签大全 <a></a> 超文本链接 <a href="UR ...
常用的html标签大全
html标签大全一.文字 1.标题文字 <h#>..........</h#> #=1~6:h1为最大字,h6为最小字 2.字体变化 <font>........ ...
【HTML_标签大全】
HTML标签大全标签描述标签类型备注  定义注释 / 单标签 <!DOCTYPE> 定义文档类型 / 单标签 <head></he ...
dedecms标签大全
今天用了1个小时的时间整理了dedecms标签大全,非常经典,非常经典的织梦dedecms标签,希望对大家制作dedecms网站有帮助 channel_____栏目 dede_arcty ...
meta标签大全（荐）
html的meta总结(常用) 1.Meta标签大全  <meta charset='utf-8'> <!-- 优先使用 IE 最 ...
HTML基础标签大全
HTML 标签大全及属性常用的块级元素有 :div , from , table, p ,pre,h1-h5,dl,ol,ul 常用的内联元素:span ,a ,strong,em ,label , ...
【jsp】JSTL标签大全详解
一.JSTL标签介绍 1.什么是JSTL? JSTL是apache对EL表达式的扩展(也就是说JSTL依赖EL),JSTL是标签语言!JSTL标签使用以来非常方便,它与JSP动作标签一样,只不过它不是 ...
织梦dedecms标签大全总结
织梦dedecms标签大全总结,同时还建议多参考dede默认模板,织梦默认模板上的标签还是很有参考价值的. dedecms系统参数全局标签,在后台系统设置里可以看到这个参数网站名称:{dede:gl ...
POM标签大全详解
父(Super) POM <project xmlns = "http://maven.apache.org/POM/4.0.0" xmlns:xsi = "htt ...

随机推荐

深入理解viewport（转）
在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用,才能更好地让我们的网页适配或 ...
USACO 1.3.3 Prime Cryptarithm
题目链接:1.3.3 我用的枚举法,即每产生一组数据就判断是否是所给数字里的. AC还沾沾自喜,但一看题解,发现自己的代码真low... 在平时练习时,应该追求高效,精炼的代码,这样比赛时才能省出大量 ...
svn branching and merging
the svn switch command is an alternative way to creating a working copy of a branch :) You can merge ...
javascript 中的闭包
在 javascript 中,函数可以当做参数传递,也可以当做返回值返回. 当一个函数内部返回值为一个函数时, 就形成了闭包.(闭包里面的 this 问题) 如下面代码 Function.protot ...
【HighCharts系列教程】五、版权属性——Credits
一.Credits属性说明严格来讲,Credits并不算版权信息,官方的说法是:Highchart by default putsa credits label in the lower right ...
Java中的构造方法
什么是构造方法:每一个类中至少有一个构造方法,它用于创建该类对象,这个和OC中的init有异曲同工之妙. 构造方法的格式:A:方法名与类名相同 B:没有返回值类型,没有void C:没有具体的返回值 ...
arrayList LinkedList HashMap HashTable的区别
ArrayList 采用的是数组形式来保存对象的,这种方式将对象放在连续的位置中,所以最大的缺点就是插入删除时非常麻烦 LinkedList 采用的将对象存放在独立的空间中,而且在每个空间中还保存下一 ...
现在都是python 单独开发框架执行脚本,处理结果,发报告之类的
现在都是python 单独开发框架执行脚本,处理结果,发报告之类的
(简单) POJ 1562 Oil Deposits，BFS。
Description The GeoSurvComp geologic survey company is responsible for detecting underground oil dep ...
C#基础之操作字符串的方法
C#基础之操作字符串的方法 C#中封装的对字符串操作的方法很多,下面将常见的几种方法进行总结: 首先定义一个字符串str 1.str.ToCharArray(),将字符串转换成字符数组 2.str.S ...

html标签大全（2）

html标签大全（2）的更多相关文章

随机推荐

热门专题