HTML元素及属性

background属性

rgb：设置背景颜色

rgba：(r：红色+g：绿色+b：蓝色+a：透明度) 设置背景颜色的透明度

color：设置背景颜色

image：设置背景图片地址

repeat：设置背景图片如何重复平铺

position：设置背景图片的位置

attachment：设置背景图片是固定还是随着页面滚动条滚动

position属性--定位

static：默认值（加不加都可以）

relative：相对定位（元素可以在当前位置左右，上下移动而周围的元素位置保持不变）

​ left（表示偏移后左边离原来位置左边的距离，正值表示向右移，负值表示向左移）

​ right（右）

​ top（上）

​ bottom（下）

​ 属性可以为百分数，该百分数对应的基数就是该元素父元素的宽和高值

absolute：绝对定位 relative>static

​ left（表示移动元素左边框距离父元素左边框的距离

​ right

​ top

​ bottom

fixed：相对于浏览器窗口定位

​ 相对于当前浏览器可视窗口固定，就相当于与很多网页左右两边的广告一样，不管你如何滚动鼠标的滑轮，它都在那个位置

margin属性--外边距

外边距：一个参数 ：设置4个外边距

​ 二个参数：上外边距和下外边距、左外边距和右外边距

​ 三个参数：上外边距、左右外边距、下外边距

​ 四个参数：上、右、下、左外边距

margin：auto （加auto表示居中；如果是20，auto表示上下间距为20，水平居中）

padding属性--内边距

内边距：一个参数 ：设置4个外边距

​ 二个参数：上外边距和下外边距、左外边距和右外边距

​ 三个参数：上外边距、左右外边距、下外边距

​ 四个参数：上、右、下、左外边距

box-shadow属性--阴影

​ 给出2、3、4个数字值的情况下：

​ 给出2个值，这2个值将被浏览器解释为X轴上的偏移量<offset-x>和Y轴上的偏移量<offset=y>

​ 如果给出第3个值，这第三个值将被解释为模糊<blur-radius>值越大模糊程度越大

​ 如果给出第4个值，这第4个值将被解释为扩展半径的大小<spread-radius>去正值时，阴影扩大，取负值时，阴影缩小

​ color：阴影的颜色

​ inster：默认为外边框。使用之后阴影在边框内

box-sizing属性

content-box:

padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即 ( Element width = width + border + padding )

border-box:

padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的 width值，即使定义有border和padding也不会改变对象的实际宽度，即 ( Element width = width )

border-bottom属性

border-bottom：设置对象底部边框的特性

float属性--浮动

none：默认属性，元素不浮动，并会显示在其文本中出现的位置

left：元素向左浮动，表示向父元素的左侧靠紧

right：元素向右浮动，表示向父元素的右侧靠紧

!important

提升优先级

border属性--设置边框

border:solid 1px 实线边框

border:dotted 1px 点划线边框

border:dashed 1px 虚线边框

border:double 1px 双线边框

border:none/border:hidden 都是定义无边框，但是对于表来说，hidden用于解决边框冲突（意思就是隐藏）

border:0 将border属性设成0，虽然边框不见了，但是游览器依然会对border-width和border-color进行渲染，会占用浏览器的资源；但是border:none浏览器就不会做出渲染动作

letter-spacing

给元素添加间距

:hover

表示当鼠标移动到XXX元素上的时候，样式会发生变化

cursor

使用自定义图像作为光标类型

例如：pointer(小手)

​ auto(I)

​ default(箭头)

​ crosshair(十字交叉)

move(移动)

​ wait(转圈)

display属性

none 隐藏该元素

block 显示为块级元素

inline 显示为行内元素

inline-block 显示为行内块级元素

text-decoration属性

none:默认值，利用该属性值可以去掉下划线、删除线、顶划线的样式

underline：下划线，在文字下方添加下划线

line-through：删除线

overline：顶划线，在文字上方添加顶划线

outline属性

位于边框的外围，起到突出元素的作用

none：默认，定义无轮廓

dotted：定义点状的轮廓

dashed：定义虚线轮廓

solid：定义实现轮廓

double：定义双线轮廓；双线的宽度等同于outline-width的值

groove：定义3D凹槽轮廓；此效果取决于outline-color值

ridge：定义3D凸槽轮廓；此效果取决于outline-color值

inset：定义3D凹边轮廓；此效果取决于outline-color值

outset：定义3D凸边轮廓；此效果取决于outline-color值

inherit：规定应该从父元素继承轮廓样式的设置。

list-style属性

list-style-type属性，用来定义列表所使用的项目符号类型

list-style-position属性，设置列表项目符号的位置及列表的对齐方式

list-style-image 浏览器提供的列表项目符号，不能满足所有人的需要，并且可选择的范围有限

font-weight

设置字体的粗细值

默认为normal

lighter为细体

normal为正常粗体

bold为粗体

bolder为特粗体

from

<form> 元素用于生成输入表单，该元素不会生成可视化部分，它除了通用属性id、style、class外，还可以指定onclick事件，除此之外，还有以下几个属性：

​ Action ： 指定当单击表单内的确认按钮时，该表单被提交到那个地址。该属性既可以指定一个绝对地址，也可以指定一个相对地址，该属性必填，非常重要！

​ method：指定提交表单时发送何种请求，该属性有get和post两种值，通常建议发送post请求，该属性必填。表单默认以get方式提交请求。Get请求和post请求的区别如下：​

GET请求方式：直接在浏览器地址栏中输入访问地址所发送的请求，或提交表单发送请求时，该表单对应的form元素没有设置method属性，或设置了method属性为get，这几种都是get方式的请求。Get方式的请求会将请求参数的名和值转换为字符串，并附加在原url之后，因此可以在地址栏中看到请求参数的名和值。且get请求传送的数据量较小。

​ Post方式的请求：这种方式通常使用提交表单的方式来发送，并且不要设置form的method属性为post。Post方式传送的数据量较大，通常认为post请求参数的大小不受限制，但往往取决于服务器的限制，post请求传输的数据量总比get传输的数据量大，而且post方式发送的请求参数以及对应的值放在HTML HEADER中传输，用户不能在地址栏中看到请求的参数值，安全性相对较高。

name:指定表单的唯一名称，建议该属性值与id属性值保持一致。

Target：该属性有4个属性值，指定使用哪种方式打开目标url。self,black,parent，_top分别指定使用自身，一个新的页面，顶级框架，父框架来加载form请求。

Input元素

type属性--默认为text

password：密码状态输入

submit:提交按钮，点击将数据发送至服务器

reset:重置按钮button:普通按钮

imge：图片式提交按钮

hidden；隐藏字段，该内容不会显示页面上，一般为网页设计者设置的变量数据，提交时，隐藏内容会提交到服务器

email:表示要输入一个电子邮箱url:表示要输入一个网址

tel:表示输入的内容是一个电话号码

number:可以配合input的max/min/step/value规定允许输入的最大值/最小值/步长/默认值

range(活动条)：与number类型类似，也是表示一定范围的数值输入，但是以一个活动条的状态显示可以配合input的max/min/step/value规定的最大值/最小值/步长/默认值

时间类：包括datetime/datetime-local/date/month/week/time

color：

file：用来创建一个文件选取的输入框，可通过accept属性规定选取文件的类型，比如图片/视频

multipe属性:可以设定一次允许选择多个文件

checkbox/复选框:用来创建一个复选框（可以多项选择）,通过checked属性可讲某个选项设为默认的选取状态，再次单击取消选取

radio/单选框:用来创建一个单选框（可以多项选择）,通过checked属性可讲某个选项设为默认的选取状态，再次单击取消选取,必须将同一组单选项设置一个相同的name属性值

 

name属性:输入内容的识别名称，传递参数时候的参数名称

value属性:默认值

maxlength:输入的最大字数

readonly属性：只读属性，设置内容不可变更，提交时会以前发送至服务器

disabled属性：设置为不可用（不可操作）

required属性：设置该内容为必须填写项，否则无法提交

placeholder属性：设置默认值，当文本框获得焦点时被清空，对text/url/tel/email//password/search有效

autofocus属性：自动获得焦点

accesskey属性：指定快捷键windows中，指定快捷键后，按Alt+“快捷键”,便会获得焦点

tabindex属性：指定按Tab键时，项目间的移动顺序

autocomplet属性： HTML5新增属性属性值为on/off,定义是否开启浏览器自动记忆功能