web 开发第二天2019-12-5

Html表单、css样式

主要讲了以下四点：
1.HTML表单。
2.HTML布局。
3.div、css 简介及css选择器。
4.css样式。

1.HTML表单。

首先是以表单的形式来表现，它的主要作用是收集前端数据，提交到服务器。
具体的结构是method = “get 或者post”
其中get 的安全性差，一般用于文件下载，post会进行加密提交，安全性高
enctype 表示pplication/x-www-form-urlencoded==>表示普通提交
(没有文件进行提交)enctype=“multipart/form-data” 表示文件上传，
文件上传必须使用这个，action表示提交地址。
在具体的进行数据提交的时候的格式如下：
input标签输入

name的值用于提交到服务器，服务器通过name来获取其值
value = “admin” 默认填充值
type= “text” 表示文本类型
type=“password” 表示密码
type=“hidden” 隐藏当前输入框
type=“url” 表示提交提交的地址
type=“search” 搜索按钮
type=“tel” 表示电话
type=“image” 表示图片
type=“color” 表示颜色的值
type = “range” （滑块）min = 10，max=100，step = “10” value= “50”
type=“number” 数字 min=“10” max=“100” step=“10” value=“50”
type=“file” 表示文件
type=“email” 邮箱
提交按钮：
type = “submit” 提交按钮
type = “button” 普通按钮
type = ”reset“重置按钮
时间类型：
type = “date” 表示年月日
type = “datetime“表示 年-月-日- 分-秒
type = “ month ”表示月份
type = “time”表示小时与分
type= “week”年的第几周
单选按钮: type=“radio” 注意点1.name值必须是一样 2.value值在页面并不能显示,主要是给服务器提交数据
复选按钮: type=“checkbox” 注意点1.name值必须是一样 2.value值在页面并不能显示,主要是给服务器提交数据下拉框:select ==》 具体的条目是 value=“亲情乐园” 这个values 值是提交的时候服务器获取的
selected 表示默认选中那个条目 表示分组 label="小学 是要分的组
文本域:
rows=“30px” 设置其高 cols=“200px” 设置其宽
1.一般用于提交大量的数据
2. 设置其value没有其效果，必须写在标签的中间
对输入框的约束的两个属性: readonly 只能读，不能修改 disabled 禁用button按钮

2.HTML布局。

使用存html 来对form表单进行布局
1.给一个背景颜色
2.分号对齐 ==>可以使用表格来进行布局
3.表单居中

3.div、css 简介及css选择器。

css 样式: 层叠选择器==>美化网页(了解)
css 引入方式:
1.行内样式 : 也就是直接在标签里嵌套样式:(直接写style) style=“color: red; font-size: 18px”
1.style 里的具体的样式要使用双引号
2.style 都是兼职对来进行匹配 是以冒号来进行分割
3.style多个样式使用分号来进行分割
优点：直接写，写起来比较方便 缺点: 标签与样式混合，看起来非常乱

2.内部样式: 一般是head头部
必须放在style里
优点:标签与样式混合，看起来比较清晰 缺点: 只能在本页面使用，其它页面不能够使用, 公共性比较差

3.外部样式: 使用的步骤；1.新建一个css文件来存css演示
2.在css中编写样式
3.需要在页面进行引入(一般在头部引入)
4. @import “css/index.css”; 导入 , 必须写在style里
5. @import 区别 link 是先加载样式，再加载html ==>用户体验度更好 推荐使用这种

总结: 样式的优先级 行内样式> 内部样式>外部样式==> 就近原则，优先加载离的近的
css 选择器 3个重要的
1.标签选择器:
语法： 标签的名称 {
属性的名称1:属性值1;
属性的名称2：属性值2
}

特点:在本页面内所有的这种标签都能使用这个样式
2.类选择器：
语法: .类选择器的名称{
属性的名称1:属性值1;
属性的名称2：属性值2
}
特点: 类选择器声明后，需要指定标签来引入类选择器==> 类似于java 中的方法需要调用
id选择器：
语法 : #选择器的名称{ 属性的名称1:属性值1;
属性的名称2：属性值2
}
特点:1.id选择器申明之后,也需要标签引入 2.id一般是唯一的建议只使用一次
总结:1.如果不知道使用申明选择器，类选择器是最爱 三种选择器的优先原则:id选择器>类选择器> 标签选择器
2.外部引入的css文件中也可以写这三种选择器

4.css样式。

1.常规的一些css样式

1)li > list-style-type 设置

• 标签的前缀
  2) a:link{} 默认的颜色 a:hover{}移入到标签获取设置其颜色 a:active{} 按下的颜色 a:visited 已经被点击后的颜色
  text-decoration 设置 a标签的下划线 , 一般在开发中用于除去下划线
  3)font color 设置字体的颜色 font-size 设置字体的大小 font-family 设置字体的格式 font-weight 设置字体的粗细
  4)cursor 设置鼠标箭头的样式
  5) div> width 宽度 height 高度 background-color 背景颜色 border-color 边框的颜色 border-style 线的格式 border-width 边框的宽度 border-radius: 圆角
  border: 2px red solid; background-image: url 设置背景图片 background-repeat 是否平铺
  text-align: center; 水平居中 line-height: 400px; 设置其行高(一般等于div 的高度)
  2 .css 之浮动 : 浮动针对于是块状元素
  float left|right
  clear 一般清除是跟跟浮动的方向对应上 ，不知道怎么清除就是both
  overflow: hidden; 表示还原其状态,还原其本身的高度
  3. css 之 盒子模型 其实就是内边距于外边距
  margin 外边距
  padding 内边距
  4.css之块状与行状元素相互转换 >
  display inline-block （块状与行状相互转换(注意:行>块)）
  block ==>块 inline ==>行