web第二天

HTML 标签  表单标签   用于菜鸡用户输入的数据 用于和服务器进行交互
使用标签  form
css:    

form 用于定义表单的 可以定义一个范围 范围代表采集用户的范围：属性 action：指定提交数据的URL
method：指定提交方式：get :  1.请求参数会在地址栏中显示  2.url（请求参数）的长度是有限制的  不太安全
post：请求参数不会在地址栏中显示 会封装在请求体中  2.请求参数的大小没有限制  3.较为安全

用户名 <input name=“username”><br>

密码<input name=“password”><br>
<input type="submit"value=“登录”>
表单中的内容想要被提交，必须指定起name属性
如果不在form范围 则不会被提交。

表单项标签：
input：可以通过type的属性值改变元素的展示样式

※type取值  
*text:文本输入框默认值
*paseword    密码输入框
       redio单选框：要想让多个单选框 那么他们的属性值必须相同
*checked可以指定的默认值 添加在value后面
性别：<input type="redio"（属性值--》value = “man”） name = "gender">
一般会给每一个单选框提供value属性指定备齐选中后提交的值
※复选框   checkbox 同样可以个添加value，这样 网址栏就拥有了添加的value内容
checked可以指定的默认值 添加在value后面

*placeholder：指定输入框的提示语 点击后消失  
*<label for="(formid)">:指定输入项的文字描述信息
注意：label 的for属性回合input的id属性值对应 如果对应了 则点击label区域会让input输入框获取焦点
*文件选择框：file
隐藏域：hidden，用于提交信息的
按钮  submit  可以提交表单
button：不弹页面 就跟计算 数值一样的 作用
image：可以指定 src=“图片路径”也可以提交表单

取色器：<input type="color" name = "color">
日期<input tyoe = "date" name="birthday">年月日
<input tyoe = "datetime-local" name="birthday">年月日小时+分钟
邮箱<input type=“emil”>
数字：<input type = number>

下拉列表
<select name=“provice”>
    <option>--请选择--</option>
    <option>--北京--</option>
    <option>--上海--</option>
    <option>--青岛--</option>
</select>
如果想让他不在页面上面显示 就在上面option添加value  这样就不会显示内容了 
在value后面加入selected 那就添加了 默认选择

textarea 文本域
<textarea cols="每一行能输入多少个字符" rows=“设置行数”></textarea>

CSS：页面和布局控制：
好处：功能比较 强大    将内容战士和样式的控制分离（j降低耦合度-解耦 让分工协作更容易 提高开发的效率）
CSS的使用 css与html的结合
①.内联样式
在标签内使用style属性指定css代码
<div style = "color:red;">hello css </div>不常用
 
②.内部样式
在head标签内 定义style标签 style标签的标签体内容就是css代码
文件只写<div>内容</div>
<style>
div{
color:blue;
}
</style>
③.外部样式
定义css资源文件
在 head标签内 定义link标签，引入外部资源文件 
<link rel = "stylesheet" herf="文件位置">
a.css文件：
div{
color：green；
}
注意：123中方式css作用范围越来越大
2.1方式不常用 23常用
也可以用<style>
@impot"a.css"
</style>
也可以引入外部文件

css的基本语法
格式： 选择器{
属性名：属性值；
属性名：属性值；
}

选择器：筛选具有 相似特征的 元素
注意 每一对属性需要使用分号割开 最后一对可以不加

选择器：
一.分类：基本选择器
1.id选择器
选择具体的id属性值的元素，建议在一个html页面中id值唯一
*语法：#id属性值{
}
#div1{
color：red；
}

2.元素选择器：选择具有相同标签名称的元素
语法：标签名称{
}
注意 id选择器的优先级高于元素选择器
3.类选择器：选择具有相同class属性值的元素。
语法：        .class{
}
注意：
类选择器的优先级高于元素选择器

3.类选择器

二.扩展选择器

1.选择所有的元素：语法： *{}
并集选择器：选择器1，选择器2{}
子选择器（筛选选择器1下的选择器2）：选择器1 选择器2{}（s）
父选择器（筛选选择器2的父元素选择器1）：选择器1>选择器2
属性选择器：选择元素名称，属性名=属性值的元素：
元素名称[属性名=“属性值”]{}
伪类选择器：选择一些元素具有的状态
语法：元素：状态{}
如：link：初始化的状态
visited：被访问的状态
active：正在访问
hover：鼠标悬浮状态
css里面的属性（了解）
1.文本 字体
font-size：字体大小
color 颜色 
text-align对其方式
text、-height
2.背景
background：url（“”）  no-repeat不重复背景
3.边框
border：设置边框
4.尺寸
wdith：宽度
height：高度
5.盒子模型：控制不惧
margin：外边距
padding：内边距
默认情况下内边距会影响盒子的大小
box-sizing：border-box；设置盒子的 属性 让width和height就是最终盒子的大小
float：浮动  left right