html &css

表单项标签:

　　input: 可以通过type属性值,改变元素展示的样式

　　　　type属性 :

　　　　　　*text : 文本输入框, 默认值

　　　　　　　　* palceholder : 指定输入框的提示信息, 当输入框的内容发生变化, 会自动清空

　　　　　　*password: 密码输入框

　　　　　　*radio: 单选框

　　　　　　　　* 注意:

　　　　　　　　　　1 . 要想让多个单选框实现单选的效果, 则多个单选框的name属性值必须一样

　　　　　　　　　　2 . 一般会给一个单选框提供value属性 , 指定其被选中后提交的值

　　　　　　　　　　3 . checked属性, 可以指定默认值

　　　　　　*checkbox : 复选框

　　　　　　　　* 注意:

　　　　　　　　　　1 . 一般会给一个单选框提供value属性 , 指定其被选中后提交的值

　　　　　　　　　　2 . checked属性, 可以指定默认值

 

　　　　　　* file : 文件选择框

　　　　　　* hidden : 隐藏域 , 用于提交一些信息

　　　　　　* 按钮 :

　　　　　　　　* submit : 提交按钮 , 可以提交表单

　　　　　　　　* button : 普通按钮

　　　　　　　　* image : 图片提交按钮

　　　　　　　　　　* src属性指定图片的路径

　　　　* label : 指定输入项的文字描述信息

　　　　　　* 注意 :

　　　　　　　　* label 的 for 属性一般会和 input 的 id 属性值 对应 , 如果对应了, 则点击label区域 , 会让input输入框获取焦点

 

　　select: 下拉列表

　　　　* 子元素 : option , 指定列表项

 

　　textarea: 文本域

　　　　* cols : 指定列数 , 每一行有多少个字符

　　　　* rows : 默认多少行 .

------------------------------------------------------------------------------ 

 

CSS : 页面美化和布局控制

　　1 . 概念 : Cascading Style Sheets 层叠样式表

　　　　* 层叠: 多个央视可与i作用在同一个html 的元素上, 同时生效

　　2 . 好处 :

　　　　1. 功能强大

　　　　2 . 将内容展示和样式控制分离

　　　　　　* 降低耦合度. 解耦

　　　　　　*让分工协作更容易,提升开发效率

 

　　3 . CSS的使用 : CSS与 html 的结合方式

　　　　1.内联样式 不推荐

　　　　2.内部样式

　　　　　　* 在head标签内, 定义 style标签, style标签的标签内容就是css代码

　　　　3.外部样式

　　　　　　1. 定义css资源文件.

　　　　　　2.在head标签内定义link标签, 引入外部资源文件

　　*注意 这三种方式 CSS作用范围越来越大

 

　　4. CSS 语法 :

　　　　* 格式 :

　　　　　　选择器{

　　　　　　　　属性名1 : 属性值1 ;

　　　　　　　　属性名1 : 属性值1 ;

　　　　　　　　.....

　　　　　　 }　　　　　　　　　　

　　　　　　

　　　　　　* 选择器 : 筛选具有相似特征的元素

　　　　　　*注意 :

　　　　　　　　*每一对属性需要使用 ; 隔开 , 最后一对属性可以不加 ;

 

　　5 . 选择器

　　　　* 分类 :

　　　　　　1 . 基本选择器

　　　　　　　　1. id 选择器 : 选择具体的id 属性值的元素, 建议在一个html页面中id 值唯一

　　　　　　　　　　* 语法 : #id属性值{ }

　　　　　　　　2. 元素选择器 : 选择具有相同标签名称的元素

　　　　　　　　　　* 语法 : 标签名称{ }

　　　　　　　　　　* 注意 : id选择器优先级高于元素选择器

　　　　　　　　3. 类选择器 : 选择具有相同的class属性值的元素.

　　　　　　　　　　* 语法 : .class属性值{ }

　　　　　　　　　　* 注意 : 类选择器优先级高于元素选择器

　　　　　　2 . 扩展选择器

　　　　　　　　1 . 选择所有元素 :

　　　　　　　　　　* 语法 :  *{ }

　　　　　　　　2 . 并集选择器

　　　　　　　　　　* 选择器1,选择器2{ }

　　　　　　　　3 . 子选择器 : 筛选选择器1元素下的选择器2元素

　　　　　　　　　　* 语法 : 选择器1 选择器2{ }

　　　　　　　　4. 父选择器 : 筛选选择器2的父元素选择器1

　　　　　　　　　　* 语法 : 选择器1 > 选择器2{ }

　　　　　　　　5. 属性选择器 : 选择元素名称 , 属性名=属性值的元素

　　　　　　　　　　* 语法 :  元素名称[属性名="属性值"]{ }

　　　　　　　　6. 伪类选择器 : 选择一些元素具有的状态

　　　　　　　　　　* 语法 :  元素:状态{ }

　　　　　　　　　　* 如 : <a>

　　　　　　　　　　　　* 状态 :

　　　　　　　　　　　　　　*link : 初始化状态

　　　　　　　　　　　　　　*visited : 被访问过的状态

　　　　　　　　　　　　　　*active : 正在访问状态

　　　　　　　　　　　　　　*hover : 鼠标悬浮状态

 

　　6 . 属性

　　　　1 . 文本 字体 

　　　　　　* font - size : 字体大小

　　　　　　* color : 文本颜色

　　　　　　* text - align : 对其方式

　　　　　　* line - height : 行高

　　　　2 . 背景

　　　　　　* background :  

　　　　3 . 边框

　　　　　　* border : 设置边框 , 符合属性

　　　　4 . 尺寸

　　　　　　* width : 宽度

　　　　　　* height : 高度

　　　　5 . 盒子模型 : 控制布局

　　　　　　* margin : 外边距

　　　　　　* padding : 内边距

　　　　　　　　* 默认情况下内边距会影响整个盒子的大小

　　　　　　　　* box - sizing : border - box  设置盒子的属性, 让width 和 height 就是最终盒子的大小

　　　　　　* float : 浮动

　　　　　　　　* left

　　　　　　　　* right