【html学习整理】meta,img,表格,表单
meta标签:
作用: 给搜索引擎用 。 告诉浏览器是什么编码
<meta charset="UTF-8">
<meta name="keywords", content="烧饼 武大郎烧饼"> 关键字搜索
- 图片img
图片格式:jpg gif png
语法:
<img src="图片路径", width="宽度",height="高度", alt="说明">
- object标签,插入flash
- pre标签,预格式化标签,主要做调试用
- 实体标签
< <
> >
  空格
" "
- 表格
默认情况下,网页的布局是流布局(排队),不能随意摆放位置,因此可以通过表格来布局,表格的作用就是来做页面布局的。
table 表
tr 行
td 单元格
th 列
单元格中的数据对齐方式:
1. 水平对齐 align left right center
2. 垂直对其 valign top bottom
单元格间距和单元填充:
1. 间距:单元格和单元格之间的距离 cellspacing 。 默认2像素
2. 填充:内容距离单元格的距离 cellpadding 默认1像素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<table border="1" width="500px" height="300px" bordercolor="#FF000" cellspacing="20px" cellpadding="20px">
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td valign="top">令狐冲</td>
<td align="center">男</td>
<td align="right" valign="bottom">22</td>
</tr>
<tr>
<td>任盈盈</td>
<td>女</td>
<td>20</td>
</tr>
<tr>
<td>任我行</td>
<td>男</td>
<td>55</td>
</tr>
</table> <hr>
<br>
<table border="5", cellspacing="10", width="300">
<tr>
<th colspan="3">学生证</th>
</tr>
<tr>
<td width="30%">姓名</td>
<td width="30%"> </td>
<th rowspan="3" >照<br>片</th>
</tr>
<tr>
<td>性别</td>
<td> </td>
</tr>
<tr>
<td>年龄</td>
<td> </td>
</tr>
<tr> </tr>
</table>
</body>
</html>
- 表单 form
- 表单是用来收集用户提交的数据
- 表单域:表单的区域,用来控制表单提交的时候的数据范围
表单元素:单行文本框:<input> type name maxlength sizetext 文字框 。 size宽度是多少字符的宽度 。 maxlength 最长字符数 name 给文本框取值password密文 密码框。<radio> 单选框 checked默认选项 。 value 单选项的值 。 同一组的名称要一致checkbox:复选框 必须给无法输入的属性赋值<select> 下拉菜单,<option>下拉选项 selected表示默认选中<select>下拉列表 设置size显示数量 。 多选multiple="multiple"多行文本也叫文本域 textarea <textarea name="text" id="" cols="30" rows="10"></textarea>rows 容纳行数 。 cols容纳列数提交按钮 <input type="submit", value="提交">重置按钮 <input type="reset" value="重置"> 清空填写的数据普通按钮:提交按钮和重置按钮都是带有功能的,在很多情况下点击按钮的时候不是需要提交和重置,而是执行自己的功能,这时候需要不带功能的按钮 type=buttoninput:text 。 password 。 checkbox radio submit reset button使用表单Action ="" 数据提交的位置, 为空表示提交到本页面Method=“”数据提交的方法 。 post get
例题:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单提交</title>
</head>
<body>
<form action="" method="get">
<table width="500", bordercolor="#666666" border="1" align="center">
<tr>
<td>用户名:</td>
<td>
<input type="text" size="50" maxlength="20" name="username" cellpadding="5" />
</td>
</tr>
<tr>
<td>密码:</td>
<td>
<input type="password" name="pwd" size="50"/>
</td>
</tr>
<tr>
<td>性别:</td>
<td>
<input type="radio" name="sex" value="男" checked="checked"/> 男
<input type="radio" name="sex" value="女"/> 女
</td>
</tr>
<tr>
<td>爱好:</td>
<td>
<input type="checkbox", name="hobby" value="爬山"/> 爬山
<input type="checkbox", name="hobbby", value="游泳"/> 游泳
</td>
</tr>
<tr>
<td>学历:</td>
<td>
<select name="xueli">
<option value="高中">高中</option>
<option value="大专" selected="selected">大专</option>
<option value="本科">本科</option>
</select>
</td>
</tr>
<tr>
<td>所在部门</td>
<td>
<select name="bumen" id="" size="3" multiple="multiple">
<option value="人事部">人事部</option>
<option value="财务部">财务部</option>
<option value="项目部">项目部</option>
<option value="后勤部">后勤部</option>
<option value="保卫部">保卫部</option>
<option value="市场部">市场部</option>
</select>
</td>
</tr>
<tr>
<td>留言</td>
<td>
<textarea name="text" id="" cols="30" rows="5"></textarea>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit", value="提交">
<input type="reset" value="重置">
<input type="button" value="返回">
</td>
</tr>
</table>
</form>
</body>
</html>
【html学习整理】meta,img,表格,表单的更多相关文章
- HTML表格表单综合——用户注册表
今天学习了表格和表单知识,我综合了他们添加了一些拓展知识做了一个用户注册表,以下面代码来整理表格和表单知识: <!DOCTYPE html PUBLIC "-//W3C//DTD XH ...
- Bootstrap框架(基础篇)之列表,表格,表单
继续上篇的基础部分延伸,主要说一下列表,表格,表单相关Bootstrap框架变化以及基础知识. 1.列表篇 除了HTML提供的三种基本列表样式: 无序列表 <ul> <li>… ...
- Django学习笔记(五)—— 表单
疯狂的暑假学习之 Django学习笔记(五)-- 表单 參考:<The Django Book> 第7章 1. HttpRequest对象的信息 request.path ...
- HTML--绝对路径, 表格,表单, 框架
URL, URI, URN URL: 统一资源定位符: Uniform Resource Locator URN: 持久可用的资源标准名称 Uniform Resource Name , 比如邮箱 U ...
- css表格表单和统筹
css:表格表单和统筹 学习目标 1.表单标签及属性高级 2.表格标签及属性高级 3.CSS统筹 4.BFC概念和应用场景 一.表单标签及属性高级 回顾: 表单的作用:用来收集用户的信息的; 表单的组 ...
- ng2 学习笔记(二)表单及表单验证
在上一篇文章中提到了表单,只说了表单的数据绑定,这一篇文章主要讲一下表单验证,为什么把表单单独拿出来学习,主要是因为,表单是商业应用的支柱,我们用它来执行登录.求助.下单.预订机票.安排会议,以及不计 ...
- 22----2013.06.29---HTML--html介绍.超链接和图片,表格,表单,表单标签,meta,复习当天内容
01 HTML HTML :Hypertext Markup Language 超文本标记语言(类似于 裸奔的人.) 作用:向用户展示信息. CSS: Cascading 层叠样式表(类似于 人的 ...
- Bootstrap学习笔记(3)--表格\表单\图片
Bootstrap表格 表格类: .table只会在表行之间增加横线; .table-striped会在表格行之间增减斑马线; .table-hover会给表设置鼠标悬停状态; ...
- JSP复习整理(一)表单
好久没更了,一周完成了SRDP,一周完成了课程设计,这一周就要好好回顾回顾Java Web的学习轨迹了. 用的eclipse Mars 一.表单 start.jsp <%@ page langu ...
随机推荐
- GIS可视化——属性图
一.简介 SuperMap iClient for JavaScript 提供了UTFGrid图层(属性图),用于客户端属性信息的快速交互. UTFGrid图层从UTFGrid切片数据源读取数据,其本 ...
- 2016.11.10 Could not get JDBC Connection; nested exception is java.sql.SQLException: No suitable driver
运行项目rds_web时,出现错误提示:Could not get JDBC Connection; nested exception is java.sql.SQLException: No sui ...
- 2016.8.19 将div设置为隐藏使用style=“display:none”
style="display:none"表示隐藏. style="display:block"表示显示. 在代码中则使用$("#id").s ...
- maven springmvc-hibernate搭建以及源码下载
见:https://blog.csdn.net/fengshizty/article/details/43635305 下载源码参见:http://www.cnblogs.com/ljy2013/p/ ...
- iOS开发 - "Cast from pointer to smaller type 'int' loses information” 解决的方法
今天要写一个联系人搜索算法. 百度了下, 在code4App中找到相关代码. 可是自己跑了下, 发现报错. 错误内容例如以下: "Cast from pointer to smaller t ...
- c/c++:回调函数
1:函数名为指针 首先,在C语言中函数是一种function-to-pointer的方式,即对于一个函数,会将其自己主动转换成指针的类型.如: 1 #include<stdio.h> 2 ...
- window.close关闭当前页面
浏览器处于安全策略考虑,只允许Javascript关闭由javascript打开的页面,为了用js关闭当前窗口,我们可以这么考虑,这也是最常用的做法. <a href="javascr ...
- 怎样推断 ios设备的类型(iphone,ipod,ipad)
-(bool)checkDevice:(NSString*)name { NSString* deviceType = [UIDevice currentDevice].model; NSLog(@& ...
- Android Camera API2中采用CameraMetadata用于从APP到HAL的参数交互
前沿: 在全新的Camera API2架构下,常常会有人疑问再也看不到熟悉的SetParameter/Paramters等相关的身影,取而代之的是一种全新的CameraMetadata结构的出现,他不 ...
- erlang的RSA签名与验签
1.RSA介绍 RSA是目前最有影响力的公钥加密算法,该算法基于一个十分简单的数论事实:将两个大素数相乘十分容易,但那时想要对 其乘积进行因式分解却极其困难,因此可以将乘积公开作为加密密钥,即公钥,而 ...