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>
<!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 ...
随机推荐
- FMDB 查询是否存在某个表,或某个数据
//监测数据库中我要需要的表是否已经存在 NSString *existsSql = [NSString stringWithFormat:@"select count(name) as c ...
- ruby, gem install 出现网络错误
gem sources #查看目前的源 gem sources --remove https://rubygems.org/ gem sources -a https://ruby.taobao.or ...
- gtk
GTK官网:www.gtk.org sudo apt-get install build-essential 安装GTK开发套件: sudo apt-get install libgtk2.0-dev ...
- 自动安装脚本-------------基于LVMP搭建Nagios 监控
Mysql初始化参数(mysql-5.6.31) /usr/local/mysql/scripts/mysql_install_db --user=mysql --basedir=/usr/local ...
- JAVA基础--事务处理
事务处理: 1. 取消掉自动提交 set autocommmit=0 2. 开始事务 bigin 3. 进行一系列操作 update 4. 如果操作全部合格, 提交事务 commit 5. 如果发 ...
- CodeForces 625B War of the Corporations
暴力匹配+一点判断 #include <stdio.h> #include <algorithm> #include <string.h> #include < ...
- Built-in functions
转自::http://blog.csdn.net/luyuncheng/article/details/11674123 — Built-in Function: int __builtin_ff ...
- ndk-stack 调试 android c++ 代码崩溃位置
在android下面使用jni来调用c++,在开发游戏是非常正常的.但是要调试c++部分却是非常麻烦的问题.如果快速定位崩溃位置呢.NDK提供了一个小工具ndk-stack. 首先,我们先配置环境,把 ...
- R语言实战(五)方差分析与功效分析
本文对应<R语言实战>第9章:方差分析:第10章:功效分析 ================================================================ ...
- GB和GBDT 算法流程及分析
1.优化模型的两种策略: 1)基于残差的方法 残差其实就是真实值和预测值之间的差值,在学习的过程中,首先学习一颗回归树,然后将“真实值-预测值”得到残差,再把残差作为一个学习目标,学习下一棵回归树,依 ...