分享4

表单标签 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  :   提交按钮 , 也可以使用<button></button>标签完成提交
    4.  image   :   与submit效果一致, 只是可以通过src指定一个图片作为按钮显示的效果.

不可用的输入框
    1.  type=hidden :   隐藏的输入框
    2.  给input标签添加属性 , disabled. 属于HTML5的boolean属性. 作用是输入框不可用.
    3.  给input标签添加属性 , readonly. 属于html5的boolean属性. 作用是输入框只读.

from 表单常用子标签 select标签+option标签 熟悉

select: 下拉选择框,name属性值, 是提交时的键.
option: 下拉选项. value属性值, 是提交时的值. 标签内容是选项展示的内容.
        如果仅指定了内容, 未指定value值.则内容就是value的值.

多行输入框 textarea 了解

案例:
    <textarea rows="10" cols="30"></textarea>

label 标签 了解

用于事件的传递 . 

使用步骤:
1. 在接收事件的元素上, 添加id属性值.
2. 给产生事件的内容, 外层嵌套一个label标签. 并给label指定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/center/right;
4. 元素的宽度
width:长度+单位;
5. 元素的高度
height:长度+单位;
6. 背景颜色:
background-color:颜色值;
7. 背景图片
background:url("图片路径");

css的三种使用方式

1.  内联样式表
        定义在每一个元素的style属性中.
        格式: <开始标签 style="样式键:样式值;样式键:样式值...">
        案例: 
            <div style="text-align:center;color:#3a3;font-size:30px">
                从前有座山 ,山上有座尼姑庵.
            </div>
2.  内部样式表
        定义在style标签中.
        格式:
            <style type="text/css">
                选择器1{
                    样式列表;
                }
                选择器2{
                    样式列表;
                }
                ...
                选择器n{
                    样式列表;
                }
            </style>
3.  外部样式表
        定义在外部的.css文件中,通过link标签引入
    css文件的编写格式:
    @charset &quot;UTF-8&quot;;
    选择器1{
        样式列表;
    }
    选择器2{
        样式列表;
    }
    ...
    选择器n{
        样式列表;
    }

    HTML中引入.css文件的格式
    &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;css的文件路径&quot;&gt;

选择器

作用: 用于选定一组元素 , 将样式列表给定到选择的元素.

基本选择器 *****

元素名称选择器

作用: 根据元素的名称, 选定一个或一组元素.
格式:
        元素名称{
            样式列表;
        }

id选择器

作用： 根据元素的id属性值, 选定一个或一组元素.
格式:
        #元素id属性值{
            样式列表;
        }

类选择器

作用: 根据元素的class属性值 , 选定一个或一组元素
格式:
        .元素的class属性值{
            样式列表;
        }

id和class的区别 了解

id在程序中, 通常表示唯一的标识. 
class在程序中, 表示类. 相同class的元素, 我们认为是同一分类.  一个元素可以拥有多个class值.

给元素添加多个class值的格式:
一个class属性名等于多个值, 值与值之间使用空格隔开.
例如: 设定如下div元素的class值为a和b
<div class="a b"></div>

CSS 样式的三大特性 *****

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

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

• 优先级特性
  样式来源优先级:
  1. 内联样式 优先级最高
  2. 相同选择器的情况下 , 定义距离body较近的内部样式表或外部样式表中的选择器.
  3. 默认样式
  4. 继承得到的样式.

  选择器优先级:
      1.  id选择器:  权重100
      2.  类选择器:   权重10
      3.  元素名称选择器: 权重1
  

绝对优先样式 慎用

在样式值的后面,加入绝对优先关键字: !important;

案例:
div{
text-align: left !important;
}

选择器

鼠标悬停选择器 ***

当鼠标处于元素上方时, 样式生效.
当鼠标离开元素后, 样式还原.

格式:
选择器:hover{

}

获取焦点选择器 ***

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

格式:
选择器:focus{

}