其他表格标签和表单元素7.20

其他标签

表头标签：<thead></thead>

表体标签：<tbody></tbody>

表尾标签：<tfoot></tfoot>

标题标签：<caption>标题</caption>

表单标签：<form></form>

        A.from属性：

                action=”表单数据提交位置”

                method=”表单数据提交的方式”

        B.get:

                相对来说不安全（提交的数据直接显示浏览器的地址栏里）

                传递的数据信息长度有要求

                传递的数据信息有类型要求，只能是文本

                各大浏览器厂商统一使用get提交方式

                有缓存功能“幂等”

                支持cookie

        C.post:

•                 相对来说安全

                传递的数据信息几乎没有要求（数据信息打包成数据包的形式传递）

                传递的数据信息没有类型要求

                 没有缓存功能

                不支持cookie

img设置高和宽：

        <img src="../img/baidu.png" height="40px" width="100px" />

方式：

         A.html方式：属性名=属性值

         B.css方式：style=”属性：属性值”（推荐）

居中：<div style="text-align: center;"></div>

换行：<br />

介绍表单元素：

1.文本框<input/>

type="text"

name="wd" 重要

placeholder="显示提示信息"

value="表单元素的默认值"

maxlength="限制用户输入的信息长度"

使用<input>标签来创建一个输入框，使用type属性来指定input元素的类型，使用name属性来规定input元素的名称，它可以对提交到服务器后的表单数据进行标识。

2.密码框

<input type="password" name="pwd" />

3.单选按钮

<input type="radio" name="sex" value="1"/>男

<input type="radio" name="sex" value="2"/>女

注意：同一组单选框的name属性的值要一样

<label>标签的作用主要是提高用户体验性，点击文本也能选择表单元素。
需要注意的是：<label>标签的for属性的值要和相应表单元素的id的值相同。这样才能把<label>标签和表单元素绑定到一起。

4.复选框

你最喜欢的城市：

<input type="checkbox" name="citys" value="sy"  checked="checked"/>贵阳

<input type="checkbox" name="citys" value="ah"/>安徽

<input type="checkbox" name="citys" value="cc"/>长春

注：同一组多选框的name属性的值要一样

Checked:在需要添加默认选中的多选框里添加checked属性即可，其默认值为checked

属性值和属性相同时，可忽略属性值

例子：checked=”checked” 可换为checked=””

5.下拉列表

<select name="year">

<option value="-1">请选择</option>

<option value="2000">2000</option>

<option value="2001">2001</option>

<option value="2002" selected="">2002</option>

<option value="2003">2003</option>

<option value="2004">2004</option>

</select>

6.文件域

<input type="submit" name="fileName" />

使用场合：文件的上传和下载

7.文本域

<textarea name="areaName" readonly="readonly"  style="height: 100px; width: 200px; resize: none;">

欢迎使用本产品，请遵守平台规则！

</textarea>

<textarea>标签可以定义多行的文本输入框。用宽（width）和高（height）来定义输入框的大小，用maxlength来定义文本区域最大能输入的字符数。

8.隐藏域

<input type="hidden" name="tn" value="baiduhome_pg" />

9.重置按钮，提交按钮，普通按钮（常用），图片按钮

重置按钮：<input type="reset" value="重置按钮" />

提交按钮：<input type="submit" value="百度一下"/>

普通按钮：<input type="button" value="普通按钮" οnclick="JavaScript:alert('点我干嘛')" />

图片按钮：<input type="image" src="../img/01.png" title="我真的是图片" />

10.控件

颜色盘：<input type="color" name="colors" />

时间控件：<input type="date" name="dt" />

月份控件：<input type="month" name="mon" />

星期控件：<input type="week" name="wee" />

邮箱：<input type="email" name="email" />

CSS 层叠样式表

作用：

1.美化页面

2.页面布局css+div

使用 css代码三种方式：

1.行内样式：

css代码直接写在标签行内，就叫行内样式

<div style="height: 200px; background-color: red;">

</div>

缺点：

（1）代码不能重用。

（2）修改麻烦，扩展性弱。

（3）样式与表现没有分离

2.内部样式

借助选择器将提取出的css代码依旧作用在对应的标签上。

什么是选择器：一套规则，符合该规则的标签，就可以拥有该规则对应的样式代码。

<style type="text/css">

标签选择器{

height: 200px;

width: 200px;

background-color: red;}

</style>

行内样式的优先级大于内部样式

3.外部样式

将所有的样式代码全部都脱离页面，放到一个单独的css文件里面去，然后先将样式文件引入到当前页面，再通过选择器作用到指定标签上。

将外部文件引入的方式有两种 ：

方式一：使用style标签

<style type="text/css">

@import url("../css/css01.css");

</style>

方式二：使用link标签

<link rel="stylesheet" href="../css/css01.css" />

选择器

选择器就是一个约定俗成的挑选标签的规则

1.选择器 的格式：

选择器名字{

属性：属性值

属性：属性值

}

2.基本选择器：标签选择器，类选择器，id选择器