02注册表单、HTML 、CSS

1、表单

表单用来收集数据。

标签名称：form
属性：
action：将数据提交到哪里。#表示提交到本页
method：提交数据的方式。取值可以是以下两个。
get：
举例：http://www.baidu.com?key=value&key=value
1. 数据会显示在地址栏中
2. 使用?分割了地址和提交的数据.
3. 每一个数据都是一个key=value
4. 多个键值对之间使用&分隔
5. 地址栏的长度有限
post（web常用）：
1. 数据不会显示在地址栏中
2. 长度不限。
表单的组件。
表单中会有一些文本框或者按钮之类的东西，这些东西都是表单的组件。
input标签表示表单的组件
type属性可以控制该组件是什么组件，取值可以是下面的内容
（1）text（记住）：文本框（默认值）
（2）password（记住）：密码框
（3）radio（记住）：单选框
（4）checkbox（记住）：复选框
（5）date：日期栏。Html5的特性，有些浏览器不支持
（6）file（记住）：文件框
（7）image：图形提交按钮。点击之后提交表单
（8）submit：（记住）提交
（9）reset：重置
（10）hidden（记住）：隐藏域。不想给用户显示的内容可以放在隐藏域中。
（11）button（记住）：按钮，需要集合js使用。
其他属性：需要将要提交的数据放在表单内。
name属性：作为提交数据的key（需要将提交的数据加上name属性）。
特殊用途：radio中除了作为数据时的key之外，可以表示一组数据。
特殊用途：checkbox中作为提交数据是的key之外，可以表示一组数据。
value属性：作为提交数据的值。
在文本框等组件中给出的value属性，name文本框中会出现默认的内容。
如果不想使用value属性给出的默认值，那么也可以自己在文本框中重新输入，输入的内容是什么，提交的值就是什么。
特殊用法，在radio，可以表示要提交的值。
特殊用法，在checkbox，可以表示要提交的值
checked属性：可以将单选框或者复选框变为默认选中的的状态。
标准写法：checked = “checked”
畸形写法：checked = “”或者checked
了解属性：size：尺寸，默认是20
maxLength：最大输入长度
Readonly：只读。写法readonly = “readonly”。支持畸形写法。数据会提交。
disable：不可用。写法disable = “disable”。支持畸形写法。数据不会提交。
html5中的组件（了解）
button 定义可点击的按钮（大多与 JavaScript 使用来启动脚本）
color 定义拾色器。
date 定义日期字段（带有 calendar 控件）
datetime 定义日期字段（带有 calendar 和 time 控件）
datetime-local 定义日期字段（带有 calendar 和 time 控件）
month 定义日期字段的月（带有 calendar 控件）
week 定义日期字段的周（带有 calendar 控件）
time 定义日期字段的时、分、秒（带有 time 控件）
email 定义用于 e-mail 地址的文本字段
number 定义带有 spinner 控件的数字字段
range 定义带有 slider 控件的数字字段。
search 定义用于搜索的文本字段。
tel 定义用于电话号码的文本字段。
url 定义用于 URL 的文本字段。
表单中的下拉框组件：select标签表示下拉框----name属性提交数据的key
子标签option：下拉框中的选项，在option标签的内容中给出的显示的东西
value属性：提交数据的值。
selected属性;默认的选中状态selected = “selected”
select下拉框的了解属性：multiple：多选属性multiple = “multiple”
size:下拉框的显示的个数
表单中的文本域：
textarea：文本域（超大的文本框）
rows：行高。cols：列宽
文本域中的默认值直接在标签的主体内容中给出。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
</head>
<body>
<h3>用户注册</h3>
<form action="server" method="get">
<input type="hidden" name="id" value="123456789">
    <table>
        <tr>
            <td>用户名：</td>
            <td><input name="user" type="text" value="孙悟空"></td>
        </tr>
        <tr>
            <td>密码：</td>
            <td><input name="pwd" type="password"></td>
        </tr>
        <tr>
            <td>性别：</td>
            <td>
                <input type="radio" name="gender" value="男" checked="checked">男
                <input type="radio"name="gender" value="女">女
            </td>
        </tr>
        <tr>
            <td>爱好：</td>
            <td>
                <input type="checkbox" name="hobby" value="游泳" checked ="checked">游泳
                <input type="checkbox" name="hobby" value="上网" >上网
                <input type="checkbox" name="hobby" value="上吊" >上吊
                <input type="checkbox" name="hobby" value="上学" checked = "checked">上学
            </td>
        </tr>
        <tr>
            <td>学历：</td>
            <td>
                <select name="edu" multiple="multiple" size="4">
                    <option value="1">高中</option>
                    <option value="2">大专</option>
                    <option value="3" selected="selected">本科</option>
                    <option value="4">硕士</option>
                    <option value="5">烈士</option>
                    <option value="6">圣斗士</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>照片</td>
            <td>
                <input type="file" name="photo" accept="image/*">
            </td>
        </tr>
        <tr>
            <td>个人简介</td>
            <td><textarea name="intor" rows="5"> </textarea></td>
        </tr>
        <tr>
            <td colspan="2"align="center"></td>
            <td>
                <input type="submit" value="注册">
                <input type="reset" value="重置">
                <input type="button" value="普通按钮">
                <button>我也是按钮</button>
                <input type="image" src="img/">
            </td>
        </tr>
    </table>
</form>
</body>
</html>

2、CSS

介绍css用于页面的美化（主要是美工用的）
1. 功能强大
2. 分工明确，html主要用于页面构建，css用于美化。

CSS的引入（使用）的三种方法：

行内引入
让css的样式对某个标签生效。
在标签内提供style的属性，该属性的值就是css的样式。
样式格式：key:value;key:value;
内部引入
可以让一个页面中的多个元素使用一个css样式。
在head标签中添加标签（规范）
style中的内容的语法：
选择器 {
样式
}
外部引入
可以让多个页面中的元素使用一个css的样式。
步骤：

新建css文件，编写css样式
将css的文件进行引入
引入方式：
在head中使用link标签引入
使用style标签引入
@import url("…/css/demo.css");
真正的优先级：后面的样式会覆盖掉前面的样式。优先级最高的是行内引入，不会被覆盖。

CSS的选择器

选择器可以帮助我们从页面上获取标签。
选择器可以用于内部引入或外部引入。
三种基本的选择器：

id选择器：可以修改唯一的一个标签。在标签中我们可以提供id属性，id属性的值时唯一的。id选择器可以根据元素的id属性值获取标签。
#id名称 {
样式;
}
class选择器：可以根据标签class属性的值获取。每一个标签都可以有class属性，class属性的值允许重复的。
.class名称 {
样式;
}
标签选择器：根据标签名称获取元素。
标签名称 {
样式;
}
优先级：
id选择器 > class选择器 > 标签选择器----------越精准的选择器，优先级越高。

CSS的扩展选择器------扩展选择器是对基本选择器的组合使用，用法丰富多样。

（1）层级选择器：获取父元素(标签)下面的子元素(标签)。
格式：
父选择器子选择器 {
样式
}
（2）属性选择器
作用：根据属性选择元素。只要包含某个属性，或者属性的值为指定的就可以选中。
格式：
只要包含该属性就是选中了
标签名称[属性名] {
样式
}
必须属性名=属性值才是选中
标签名称[属性名=属性值] {
样式
}
（3）并集选择器
作用：多个选择器的集合。可以选择多个选择器中的内容。
格式：
选择器1, 选择器2 {
样式
}

    /*并集选择器，选择id是myFont的元素，以及div，以及p元素，修改颜色*/
    #myFont, div, p {
        color: red;
    }
</style>

（4）伪类选择器
可以根据元素的状态来选择元素。
链接：
a:link 正常状态
a:visited 访问过的
a:hover 鼠标悬停
a:active 正在激活
文本框：
:focus 得到焦点

    /*a:link 正常状态*/
    a:link {
        color: red;
    }
    /*a:visited 访问过的*/
    a:visited {
        color: orange;
    }
    a:hover {
        color: yellow;
    }
    a:active {
        color: green;
    }

    #myText:focus {
        color: red;
    }

CSS的背景属性：

如果要查找属性以及对应的使用方式，可以参考w3cschool.chm文档。
背景色：background-color
1. 颜色常量，如：red
2. 使用十六进制，如：#ABC
3. 红绿蓝使用 rgb(红,绿,蓝)
背景图片：background-image url(图片文件)
平铺方式：background-repeat
repeat 默认。背景图像将在垂直方向和水平方向重复。
repeat-x 背景图像将在水平方向重复。
repeat-y 背景图像将在垂直方向重复。
no-repeat 背景图像将仅显示一次。
背景位置：background-position
left
Top
CSS的文本属性：颜色：color
颜色常量，如：red
使用十六进制，如：#123 (常用方式)
使用rgb(红，绿，蓝)函数
设置行高：line-height 单位是像素
文字修饰：text-decoration
none 默认,标准的文本
underline 下划线
overline 上划线
文本对齐：text-align
left 把文本排列到左边。默认值：由浏览器决定。
right 把文本排列到右边。
center 把文本排列到中间。
字体名：font-family 设置字体，本机必须要有这种字体
设置大小：font-size 单位：像素
设置样式：font-style
italic 浏览器会显示一个斜体的字体样式。
normal 默认值。浏览器显示一个标准的字体样式。
设置粗细：font-weight
bolder加粗
```
  div {
      color: red;/*文字颜色*/
      line-height: 40px;/*设置行高*/
      text-decoration: underline; /*下划线*/
      text-align: center;/*对齐方式*/
      font-family: 楷体;/*字体样式*/
      font-size: 40px;/*字体大小*/
      font-style: italic; /*倾斜*/
      font-weight: bolder;/*加粗*/
  }
```
CSS的浮动和浮动取消： float属性表示浮动
left：向左浮动
right：向右浮动
clear属性表示取消浮动
left：取消左浮
right取消右浮
both：直接取消浮动（

3
）
CSS的display：内联标签（行内标签）：不会自动换行
块标签：会自动换行
span是行内标签
div是块标签
display可以让块元素和行内元素进行转换。
display的属性
inline：行内标签。（

3
）
block：块标签（1）
none：不显示（
4
）
display的作用：
1. 将块元素和行内元素进行转换。
2. 隐藏和显示
CSS的盒子模型：页面中的任何元素都是盒子。
盒子的组成
1. 内容
2. 边框 border
3. 内间距（盒子与内容之间的距离） padding
4. 外间距（盒子与盒子之间的距离） margin
注意，如果修改内间距，那么盒子会被撑大。
如果不希望盒子被撑大，那么可以使用怪异盒子模型。
标准盒子模型：
内容（不变） + 内间距 + 边框 = 盒子的大小
怪异盒子模型：
设置的盒子的宽和高是多少，盒子的大小就是多少，内容所占的大小会自动压缩。
如果在ccs中给出属性box-sizing:border-box，盒子就会变成怪异盒子

02 HTML&CSS