HTML学习笔记(下)
表格标签
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>表格标签</title>
</head>
<body>
<!--
##表格标签
```html
<table>
<caption>表格名称</caption>
<tr>
<th>一个单元格</th>
<th>一个单元格</th>
</tr>
<tr>
<td>一个单元格</td>
<td>一个单元格</td>
</tr>
</table>
```
**table常见属性**
- border:边框宽度
- width:宽度
- height:高度
**tr的属性**
- align: 对齐方式
**td的属性**
- width:宽度
- height:高度
- 合并单元格:(值的写法,合并几个单元格,值就写几)
- 行合并:rowspan="" 将几行合并在一起,看上去是一列的几个单元格合并成了一个
- 列合并:colspan="" 将几列合并在一起,看上去是一行的几个单元格合并成了一个
**td和th**
- 区别:
- th中间的内容默认粗体居中显示
- th一般用于做表头
-->
<!-- 一个简单的表格 -->
<table border="1" width="50%" height="50%" bgcolor="gray">
<caption>用户列表</caption>
<tr align="center">
<th>序号</th>
<th>姓名</th>
<th>性别</th>
</tr>
<tr align="center">
<td>1</td>
<td>张三</td>
<td>男</td>
</tr>
<tr align="center">
<td>2</td>
<td>李四</td>
<td>女</td>
</tr>
</table>
<!-- 合并单元格 -->
<table border="1" width="50%" height="50%" bgcolor="gray">
<caption>用户列表</caption>
<tr align="center">
<th>默认单元格</th>
<th>默认单元格</th>
<th>默认单元格</th>
</tr>
<tr align="center">
<td colspan="3">这是一个列合并单元格(colspan="3")</td>
</tr>
<tr align="center">
<td rowspan="2">这是一个行合并单元格(rowspan="2")</td>
<td>默认单元格</td>
<td>默认单元格</td>
</tr>
<tr align="center">
<td>默认单元格</td>
<td>默认单元格</td>
</tr>
</table>
<!-- 表格嵌套 -->
<table border="1">
<caption>表格的嵌套</caption>
<tr>
<td rowspan="3">
<table>
<tr>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</table>
</body>
</html>表单
这段我必须承认我非常无耻的抄了别人的笔记…
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>表单标签</title>
</head>
<body>
<!--
* 表单标签（**********）
* 收集用户输入的数据
* 表单的标签
<form >
* form的属性
* action="表单的提交路径"
* http://www.baidu.com
* html页面
* method="提交方式（默认是get方式）"（面试题）
* form表单的提交方式有哪些？（get和post的区别）
* 答：form表单提交方式有很多，常用的有两种post和get
* post和get提交方式的区别：
* get方式会把参数列表显示在地址栏上，post方式不会（请求体）。
* get方式说明网站安全级别较低，post安全级别较高。
* get方式不支持大数据，post支持大数据。
* 推荐大家使用post方式。
* 用户输入的内容
<input type="类型" name="名称(必须要指定)" value="是否指定value属性" />
* name属性必须要指定，value可以看情况指定
* type="text" 普通的文本框
* name必须指定
* type="password" 密码框
* * name必须指定
* type="radio" 单选按钮
* name必须指定 value必须指定
* name的属性，值要相同
* 默认值：checked=checked或者true
* type="checkbox" 多选按钮
* name必须指定 value必须指定
* 默认值：checked=checked或者true
* type="reset" 重置：恢复到最初的状态
* type="submit" 提交表单
* 点击提交后，地址栏发生了变化（?sex=on）
* 在普通的文本框上添加name属性 name="username"之后，点击提交，地址栏发生了变化（?username=haha&sex=on）
String str = "?username=haha&sex=on";
* ?username=zhangsan&password=123&sex=nan&love=zq
* type="file" 选择文件
* name属性指定
* type="hidden" 隐藏组件
* name指定 value指定
* type="button" 按钮
* value="显示的文字"
* 和js（javascript） 绑定事件
* type="image" 图片
* 提交 引入外部的一个文件（图片）
* 声明选择框
<select name="city">
<option value="bj"></option>
<option value="sh"></option>
</select>
* <textarea>文本域
* rows="行"
* clos="列"
* name属性指定
* selected="selected" 代表默认值
</form>
-->
<form>
输入姓名:<input type="text" name="username"/><br/>
输入密码:<input type="password"/><br/>
选择性别:<input type="radio" name="sex" value="male"/>男
<input type="radio" name="sex" checked="checked" value="femal"/>女<br/>
选择爱好:<input type="checkbox" name="love" value="basketball"/>篮球
<input type="checkbox"/>足球
<input type="checkbox"/>冰球
<input type="checkbox"/>排球<br/>
选择附件:<input type="file"><br/>
隐藏组件:<input type="hidden" name="userID" value="001"><br/>
选择城市:<select name="city">
<option>请选择</option>
<option value="wh">武汉</option>
<option value="hh">黑河</option>
</select>
<input type="reset"/>
<input type="submit"/><br/>
<input type="button" value="test"/>
<input type="image" src="../imgs/tj.png" >
个人简介:<textarea cols=10 rows="20"></textarea>
</form>
</body>
</html>其他
其他的忽略了…实在不感兴趣…
HTML学习笔记(下)的更多相关文章
- Zookeeper学习笔记(下)
这是ZK学习笔记的下篇, 主要希望可以分享一些 ZK 的应用以及其应用原理 我本人的学习告一段落, 不过还遗留了一些ZK相关的任务开发和性能测试的任务, 留待以后完成之后再通过其他文章来进行分享了 Z ...
- 菜鸟教程之学习Shell script笔记(下)
菜鸟教程Shell script学习笔记(下) 以下内容是学习菜鸟教程之shell教程,所整理的笔记 菜鸟教程之shell教程:http://www.runoob.com/linux/linux-sh ...
- Android学习笔记（十七）——数据库操作（下）
//此系列博文是<第一行Android代码>的学习笔记,如有错漏,欢迎指正! 这一次我们来试一试升级数据库,并进行数据库的CRUD操作,其中, C 代表添加(Create) ,R 代表查询 ...
- Maven学习笔记-03-Eclipse下maven项目在Tomcat7和Jetty6中部署调试
现在最新的Eclipse Luna Release 已经内置了Maven插件,这让我们的工作简洁了不少,只要把项目直接导入就可以,不用考虑插件什么的问题,但是导入之后的项目既可以部署在Tomcat也可 ...
- Ext JS4 学习笔记之发送表单（Form）时也将表单下的表格（Grid）数据一同发送的方法
Ext JS4 学习笔记之发送表单(Form)时也将表单下的表格(Grid)数据一同发送的方法 昨天在开发的时候遇到个小问题,就是如何将Grid的内容与Form一起发送到服务器端.默认情况下,表单(F ...
- PHP学习笔记----IIS7下安装配置php环境
原文:PHP学习笔记----IIS7下安装配置php环境 Php如何安装 Php版本的选择 Php在windows下的(php5.4.7)有两种版本: VC9 x86 Non Thread Safe ...
- 一起学ASP.NET Core 2.0学习笔记(一): CentOS下 .net core2 sdk nginx、supervisor、mysql环境搭建
作为.neter,看到.net core 2.0的正式发布,心里是有点小激动的,迫不及待的体验了一把,发现速度确实是快了很多,其中也遇到一些小问题,所以整理了一些学习笔记: 阅读目录 环境说明 安装C ...
- docker学习笔记（一）—— ubuntu16.04下安装docker
docker学习笔记(一)—— ubuntu16.04下安装docker 原创 2018年03月01日 14:53:00 标签: docker / ubuntu 1682 本文开发环境为Ubuntu ...
- input子系统学习笔记六 按键驱动实例分析下【转】
转自:http://blog.chinaunix.net/uid-20776117-id-3212095.html 本文接着input子系统学习笔记五 按键驱动实例分析上接续分析这个按键驱动实例! i ...
随机推荐
- Eclipse 菜单
Eclipse 菜单 Eclipse 查看的菜单栏通常包含以下几个菜单: File 菜单 Edit 菜单 Navigate 菜单 Search 菜单 Project 菜单 Run 菜单 Window ...
- python 自动化之路 day 18 前端内容回顾、补充/Django安装、创建
前端回顾: 整体: - HTML - CSS - JavaScript - 基本数据类型 - for,while.. - DOM - obj = document.getElementById('.. ...
- LINQ TO SQL 实现无限递归查询
from:http://blog.csdn.net/q107770540/article/list 见论坛内有网友提问类似的问题已经不止一次了, 现总结一下,希望能给以后再碰到此类问题的朋友一些帮助 ...
- 基于ormlite创建数据库存储数据案例
一直不知道安卓创建数据库存储数据,以前遇到过,但是没有深入研究,今天仔细的看了一下,学习到了一点知识 直接看代码了 public class DatabaseHelper extends OrmLit ...
- Python 使用MySQL
在导入MySQLdb之前,需要安装MySQLdb模块.使用pip安装,命令如下: pip install MySQL-python 安装成功后,导入MySQLdb模块 import MySQLdb 连 ...
- POJ3090
Visible Lattice Points Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 7094 Accepted: ...
- EasyNVR摄像机网页无插件直播使用过程中问题的自我排查-设备不在线问题的自我排查
系列背景 由于EasyNVR的受众越来越多,时长会遇到很对类似的问题咨询,之前虽然有写过很多的博文进行技术的或者使用问题的解答,随着客户询问的增多,我发现,要想然客户了解问题和解决问题,往往引导和给一 ...
- block 块 partition 划分
w 龚升
- hctf2016 fheap学习(FreeBuf发表的官方解法)
目录 如何在二次释放前修改函数指针 修改函数指针流程 如何获得进程的加载基址 puts函数的调用 如何获取system函数地址 说一下用DlyELF函数 如何调用system函数 ROP需要的栈布局 ...
- 接口测试工具 — postman（get请求）
一.Postman说明 Postman是一种网页调试与发送网页http请求的chrome插件.我们可以用来很方便的模拟get或者post或者其他方式的请求来调试接口. 二.postman安装(略) 三 ...