NO.54 表单、CSS基础

1.表单元素：用来声明表单的范围，只有此范围内填写的数据才能提交给服务器。

action：用来声明表单提交的目标。

例：<form action="http://www.baidu.com">

2.表单控件：用来让用户输入数据。

2.1 input元素

文本框

value：设置默认值

maxlength：设置最大长度

例：账号:<input type="text" value="smallnumber" maxlength="10" readonly/>

密码框

value：设置默认值

maxlength：设置最大长度

例：密码:<input type="password"/>

单选框

name：组名，同一组单选才能彼此互斥。

checked：设置默认选中。

例：性别:<input type="radio" name="sex" checked/>男<input type="radio" name="sex">女

多选框

checked：设置默认选中。

例：<input type="checkbox" checked>美食<input type="checkbox">旅游

隐藏框

例：<input type="hidden" value="message"/>

文件框

例：<input type="file"/>

提交、重置、普通按钮

例：<input type="submit" value="注册"/>

<input type="reset" value="重置"/>

<input type="button" value="试试"/>

2.2 其他元素

label：用来管理表单中的文字，它可以将文字与控件绑定，从而增加控件的点击范围，提高易用性。

id是元素的唯一标识，任何元素都可以有id。

例：<input type="checkbox" id="c1"><label for="c1">我已阅读并自愿遵守此协议<!/label>

下拉选

selected：设置默认选中。

例：城市:<select>

<option>请选择</option>

<option selected>成都</option>

<option>深圳</option>

</select>

文本域

cols：设置宽度。

rows：设置高度。

例：简介:<textarea cols="30" rows="6"></textarea>

---

CSS的三种用法

1.内联样式：在元素的style属性内书写样式。

2.内部样式：在style标签内书写样式。

3.外部样式：在单独的css文件内书写样式。

CSS的规则特性

1）继承性：子元素可以继承父元素的样式（字体，颜色）。

2）层叠性：给一个元素增加不同的声明，效果会叠加。

3）优先级：给一个元素增加相同的声明，效果以后者为准。也叫就近原则（哪个样式离元素近就哪个生效）。

选择器

1）元素选择器：选择body、p、h1等等。

2）类选择器：选择class=某值的所有元素。

3）ID选择器：选择id=某值的唯一元素。

4）选择器组：可以选中一组选择器所对应目标的并集。

5）派生选择器：选择某元素的子孙----#p1 b    选择某元素的儿子-----#p2>b

6）伪类选择器：选择某状态之下的元素。

选择未访问过的超链接----a:link

选择已访问过的超链接----a:visited

选择激活态(正在点)的按钮----#b1:active

选择有焦点的文本框----#t1:focus

选择悬停态的图片----img:hover

---

边框问题

效果：

box模型

效果：