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标签详解(HTML JAVASCRIPT)
Meta标签详解,在网上转的,希望对大家有用您的个人网站即使做得再精彩,在“浩瀚如海”的网络空间中,也如一叶扁舟不易为人发现,如何推广个人网站,人们首先想到的方法无外乎以下几种: ● 在搜索引擎中 ...
网页设计：Meta标签详解
很多人忽视了HTML标签META的强大功效,一个好的META标签设计可以大大提高你的个人网站被搜索到的可能性,有兴趣吗,谁我来重新认识一下META标签吧! META标签是HTML语言HEAD区的一个辅 ...
meta标签详解(meta标签的作用)///////////////////////////转
meta标签详解(meta标签的作用) 很多人却忽视了HTML标签META的强大功效,一个好的META标签设计可以大大提高你的个人网站被搜索到的可能性,有兴趣吗,谁我来重新认识一下META标签吧 ...
引用 struts2标签详解 - wo的的日志 - 网易博客
引用元元的 struts2标签详解引用 COLD 的 struts2标签详解要在jsp中使用Struts2的标志,先要指明标志的引入.通过jsp的代码的顶部加入以下的代码: <%@t ...
html标签详解
html标签详解 <!DOCTYPE> 标签 <!DOCTYPE> 声明必须是 HTML 文档的第一行,位于 <html> 标签之前. <!DOCTYPE ...
html标签详解（1）
http标签详解及讲解 1.基础标签 <!DOCTYPE html>  <html> <!--<html> ...
转：springmvc常用注解标签详解
Spring5:@Autowired注解.@Resource注解和@Service注解 - IT·达人 - 博客园--这篇顺序渐进,讲得超级好--此人博客很不错http://www.cnblogs.c ...
embed标签详解
HTML-embed标签详解 Embed(一).基本语法:embed src=url说明:embed可以用来插入各种多媒体,格式可以是 Midi.Wav.AIFF.AU.MP3等等, Net ...
Meta标签详解
[转载]Meta标签详解 Posted on 2005-05-17 20:00 二十四画生阅读(54195) 评论(102) 编辑收藏 Meta标签详解,在网上转的,希望对大家有用引言您的个 ...

随机推荐

【NIFI】 Apache NiFI 集群搭建
NiFI 集群介绍 NiFi集群架构 NiFi采用Zero-Master Clustering范例.集群中的每个节点对数据执行相同的任务,但每个节点都在不同的数据集上运行.其中一个节点自动选择(通过A ...
Python——教你画朵太阳花
用python中的turtle函数画个太阳花,有以下几个步骤 1.首先,我们在开始中找到Python语言的IDLE软件脚本 2.然后出现该软件界面,如图,点击上面的Eile 3.然后在 ...
mpdf-html转PDF，中文字符乱码、加粗问题
$defaultConfig = (new ConfigVariables())->getDefaults(); $fontDirs = $defaultConfig['fontDir']; $ ...
python PyInstaller 库
https://www.cnblogs.com/gopythoner/p/6337543.html https://www.cnblogs.com/duan-qs/p/6548875.html htt ...
【慕课网实战】三、以慕课网日志分析为例进入大数据 Spark SQL 的世界
前置要求: 1)Building Spark using Maven requires Maven 3.3.9 or newer and Java 7+ 2)export MAVEN_OPTS=&qu ...
09-JS的事件流的概念(重点)
在学习jQuery的事件之前,大家必须要对JS的事件有所了解.看下文事件的概念 HTML中与javascript交互是通过事件驱动来实现的,例如鼠标点击事件.页面的滚动事件onscroll等等,可以 ...
spring扩展点总结
NamespaceHandler 通过自定义的NamespaceHandler,配合BeanDefinitionParser,可以完成自定义Bean的组装操作,对于BeanDefinition的数据结 ...
高斯混合模型的EM算法
高斯混合模型的EM算法混合高斯模型高斯混合模型的概率分布可以写成多个高斯分布的线形叠加,即 \[ p(\mathbf x) = \sum_{k=1}^{K}\pi_k\mathcal N(\mat ...
python之路(十七)-javascript
JavaScript JavaScript是一门编程语言,浏览器内置了JavaScript语言的解释器,所以在浏览器上按照JavaScript语言的规则编写相应代码之,浏览器可以解释并做出相应的处理. ...
kvm-qcow2派生镜像的远程备份的方法！
在虚拟化环境中,关于虚拟机的远程备份是一个比较重要的环节,这个是有关于整个机房挂掉之后,仍然可以恢复的最后一招. 在kvm中这种情况可以通过直接备份虚拟机的镜像文件(qcow2)到远端存储解决. 但有 ...

html标签详解（2）

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

随机推荐

热门专题