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 ...
随机推荐
- spring cloud使用zuul实现反向代理和负载均衡
首先,这篇文章参考的是http://blog.didispace.com/springcloud5/这位大牛的博客.本人是通过这篇博客来学习zuul的,现在写的博客只是个人在学习时个人的一些感受和理解 ...
- 嵌入式开发之赛灵思 xilinx Zynq芯片简介---Zynq-7000 EPP (XC7Z010 and XC7Z020）
(1)企业简介 作为DSP 和视频应用领域的头号 FPGA 供应商,赛灵思致力于通过其目标设计平台提供业内领先的 DSP 开发工具.方法.IP 和技术支持.赛灵思面向 DSP 的目标设计平台将这些元素 ...
- android Material design是什么
Material design概述: Material design是一套UI样式标准,应该会提供一些新的API这写API包含了以下五大模块内容,分别是: Material Theme New Wid ...
- 椭圆参数方程中的θ（离心角Theta）
椭圆参数方程中的离心角θ是交以其x轴对应外接圆上点的角度(或是交以其y轴对应内接圆上点的角度) 椭圆的参数程为:x=acosθy=bsinθ.M(x,y)椭圆上一点.过M作直线⊥X轴,交以O为圆心,以 ...
- 关闭QQ看点
手机qq联系人 然后右上角公众号 然后看到看点 取消关注!!!
- Android自动化测试工具之—UiAutomator环境配置
1.相关软件下载: 1)JDK: 1.6及其以上版本 2)Eclipse 3)Android SDK 其中Eclipse和Android SDK已经被Google打包成ADT(Android Deve ...
- Uva12663
题目链接:http://acm.hust.edu.cn/vjudge/contest/view.action?cid=110383#problem/C 题目大意:有一些不同高度的桥,会涨几次水,水流初 ...
- 【BZOJ2150】部落战争 最小流
[BZOJ2150]部落战争 Description lanzerb的部落在A国的上部,他们不满天寒地冻的环境,于是准备向A国的下部征战来获得更大的领土. A国是一个M*N的矩阵,其中某些地方是城镇, ...
- SharePoint服务器端对象模型 之 对象模型概述（Part 1）
在一个传统的ASP.NET开发过程中,我们往往会把开发分为界面展现层.逻辑业务层和数据访问层这三个层面.作为一个应用开发平台,SharePoint是微软在直观的开发能力和自由的扩展能力之间,取到的一个 ...
- 好的commit应该长啥样 https://github.com/torvalds/linux/pull/17#issuecomment-5654674
Git commits历史是如何做到如此清爽的? - 知乎 https://www.zhihu.com/question/61283395/answer/186122300 尤雨溪 前端开发.Java ...