【html学习整理】meta,img,表格,表单

meta标签:

　　　　作用: 给搜索引擎用。告诉浏览器是什么编码

　　　　<meta name="keywords", content="烧饼武大郎烧饼"> 关键字搜索

　　　　<meta name="description", content="******"> 。描述

图片img

　　　　图片格式:jpg gif png

　　　　语法：

　　　　alt属性的作用：1.当图片无法显示的时候，将图片的说明性文字显示到图片的位置上

　　　　　　　　　　　2.给搜索引擎来搜索，目前搜索引擎确定图片还是通过alt属性

　　　　title : 移上去显示全部

object标签,插入flash
pre标签,预格式化标签,主要做调试用
实体标签

　　　　&lt <

　　　　&gt >

　　　　&nbsp 空格

　　　　&quot "

表格

　　　　默认情况下,网页的布局是流布局(排队),不能随意摆放位置,因此可以通过表格来布局,表格的作用就是来做页面布局的。

　　　　table 表

　　　　tr　　行

　　　　td　　单元格

　　　　th　　列

　　　　单元格中的数据对齐方式:

　　　　　　1. 水平对齐 align left right center

　　　　　　2. 垂直对其 valign top bottom

　　　　单元格间距和单元填充:

　　　　　　1. 间距：单元格和单元格之间的距离 cellspacing 。默认2像素

　　　　　　2. 填充：内容距离单元格的距离 cellpadding 默认1像素

　　　　合并单元格:

　　　　　　1. 合并行,和并列

　　　　　　2.column 列 span跨度

　　　　　　3.calspan 跨了几列(和并列)

　　　　　　4.rowspan 跨了几行(合并行)

<!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 size
  
  text 文字框。 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=button
  
  input：
  
  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 ...

随机推荐

【SharePoint】SharePoint 2013 使用PreSaveAction自定义客户端验证
使用PreSaveAction函数实现客户端自定义验证. 例:[项目编号]为空时,必须填写[责任者]项.(其中[项目编号]为单行文本框,[责任者]为用户/组选择框.) function PreSave ...
通用礼品卡接口文档（KFC、必胜客、GAP等）
通用礼品卡接口文档,集于各商家(KFC.必胜客.GAP等)实体卡和会员卡的API虚拟卡,可用于线上/下消费.移动支付. 1.API 1.1商品列表接口地址:http://v.juhe.cn/gift ...
OpenCV生成点集的Delaunay剖分和Voronoi图
实现内容: 设置一副图像大小为600*600.图像像素值全为0,为黑色. 在图像中Rect(100,100,400,400)的区域随机产生20个点.并画出. 产生这些点集的Delaunay剖分和Vor ...
数字精确运算BigDecimal经常用法
import java.math.BigDecimal; public class Arith { /** * 因为Java的简单类型不可以精确的对浮点数进行运算,这个工具类提供精 * 确的浮 ...
Laravel 5.4的本地化
简介 Laravel 的本地化功能提供方便的方法来获取多语言的字符串,让你的网站可以简单的支持多语言. 语言包存放在 resources/lang 目录下的文件里.在此目录中应该有应用对应支持的语言并 ...
Spark源码分析之九：内存管理模型
Spark是现在很流行的一个基于内存的分布式计算框架,既然是基于内存,那么自然而然的,内存的管理就是Spark存储管理的重中之重了.那么,Spark究竟采用什么样的内存管理模型呢?本文就为大家揭开Sp ...
JS加水印遮罩
<%@ page language="java" pageEncoding="utf-8"%> <!DOCTYPE HTML PUBLIC & ...
visual studio 2010 c++ 打印 Hello world
由于好奇心驱使温习下c高级简化语言语言(个人解释可能不太准确).下面用visual studio 2010 实现 HelloWord 打印第一步:visual studio 2010 打开.文件-- ...
CAS实现单点登录理解
CAS 是 Yale 大学发起的一个企业级的.开源的项目,旨在为 Web 应用系统提供一种可靠的单点登录解决方法(属于 Web SSO ),CAS 开始于 2001 年, 并在 2004 年 12 月 ...
python 基础 8.4 re的 spilt() findall() finditer() 方法
#/usr/bin/python #coding=utf-8 #@Time :2017/11/18 18:24 #@Auther :liuzhenchuan #@File :re的spli ...

【html学习整理】meta,img,表格,表单

【html学习整理】meta,img,表格,表单的更多相关文章

随机推荐

热门专题