XMLday04

表单标签 form

用于显示与手机用户的信息，并将信息发送给服务器的标签

常见用途：1.用户的登录和注册 2.网站站内的搜索 3.搜索引擎…

常用属性：1.action:提交服务器地址 2.method：数据提交的方式（常见方式：GET：将表单的所有数据，以键值对的方式，存储在网址的？后。POST：表单中所有的数据，以单独数据包的方式发送给服务器。）

表单常用子标签 input

输入组件，用于接收用户输入

属性：1.name:输入组件的名称，当用户选择提交数据是，name作为输入组件值得键发送给服务器。2.value：输入组件的内容，当形态是输入框时，会跟随用户的内容改变 ，当用户提交数据是，value作为发送的值存在。3.placeholder：输入框形态时有效，作用是提示用户输入。4.type：输入框的心态。5.checked：用于单选复选框形态下，设置默认选中。

常见的type属性

1.text:默认值，文本输入框

2.password：密码输入框，输入的内容显示时会被*替代

3.number：数字输入框，仅能输入数字、+、-

4.color：调色板，用于选择颜色值

5.radio：单选框。value值不显示，相同name的单选框，会被认为是一组单选框，一组单选框只能选中一个

6.checkbox：复选框，value值不显示

7.file：文本选择框

日期类型的输入框形态

1.date:年月日选择框

2.month：年月选择框

3.week：年周选择框

4.time:时间选择

5.datetime：年月日时间选择框

6.datetime-local:基于本地时区的选择

按钮类型输入形态

按钮形态，value属性的值，是按钮上显示的文字

1.button：普通按钮

2.reset：重置按钮

3.submit：提交按钮，也可以使用标签完成提交

4.image：与submit效果一直，只是可以通过src指定一个图片作为按钮显示的效果

不可用的输入框

1.type=hidden：隐藏的输入框

2.给input标签添加属性，disabled，属于HTML5的boolean属性。作用是输入框不可用

3.给input标签添加属性，readonly，属于HTML5 的boolean属性，作用是输入框只读

form表单常用子标签select标签+option标签

select：下拉选择框，name属性值，是提交时的键

option：下拉选项，value属性值，是提交时的值，标签内容是选项展示的内容，如果仅制定了内容，为指定value的值，则内容就是value的值

多行输入框textarea

案例：

lable 标签

使用步骤：1.在接收时间的元素上添加ID属性值。2.给产生事件的内容，外层嵌套一个lable标签，并给lable指定for属性，属性值为接收事件的元素ID

div与span标签

div 块元素

span 行内元素

css

简介：

cascading style sheets层叠样式表

用于调整HTML元素的样式，css通常编写在.css文件中

优点：让网页内容与网页的表现完全分离，提高了代码的复用性

常用的样式

样式的编码格式

1.样式表由多个样式组成

2.每一个样式，是一个键值对

3.键与值之间使用英文冒号连接，多个键值对之间使用英文分号分割

常用样式

1.字体大小 font-size：长度+单位

2.字体颜色 color：颜色值

3.内容位置 text-align：left/right/center

4.元素的宽度 width

5.元素的高度 height

6.背景颜色：background-color：颜色值

7.背景图片：background：URL（“图片路径”）

css三种使用方式

1.内联样式表

定义在每个元素的style属性中

格式：<开始标签 style=“样式键：样式值；样式键：样式值“>

2.内部样式表

定义在style标签中

格式：

选择器1{

样式列表；

}

选择器2{

样式列表

}

3.外部样式表

定义在外部的.css文件中，通过link标签引入

css文件的编码格式：

@charset “UTF-8”

选择器1{

样式列表

}

选择器1{

样式列表

}

选择器1{

样式列表

}

HTML中引入.css文件的格式

选择器 作用：用于选定一组元素，将样式列表给定到选择的元素

基本选择器

元素名称选择器 作用根据元素名称选定一个或一组元素

格式：元素名称{

样式列表；

}

ID选择器 根据元素的名称，选定一个或一组元素

格式：#元素ID属性值{

样式列表

}

类选择器 根据元素class属性值，选定一个或一组元素

格式： .元素的class属性值{

样式列表

}

ID和class的区别

ID在程序中，通常表示唯一的标识

class在程序中，表示类，相同class的元素，我们认为是同一分类，一个元素可以拥有多个class值。

给元素添加多个class值得格式：

一个class属性名等于多个值，值与值之间使用空格隔开

例如：

css样式的三大特性

-继承性 部分父元素的样式，会被子元素所继承

-层叠性 对于同一个元素，通过多种方式添加的多组样式，不冲突的部分叠加，冲突的部分参考优先级

-优先级特性

样式来源优先级

1.内联样式 优先级最高

2.相同选择器的情况下，定义距离body较近的内部样式表中的选择器

3.默认样式‘

4.继承得到的样式

选择器优先级：

1.ID选择器：权重：100

2.类选择器：权重：10

3.元素名称：权重：1

绝对优先样式（慎用）

在样式值的后边加入绝对优先关键字(!important)

案例：

div{

text-align:left !important;

}

选择器

鼠标悬停选择器

当鼠标出于元素上方时，样式生效，当鼠标离开元素时，样式还原

格式：选择器：hover{

}

获取焦点选择器

当输入组件处于输入状态时，样式生效，当输入组件输入完毕时，样式还原

格式：

选择器：focus{

}