常用的html和css总结

1、
h1 标题标记h1 共6级 h1最大(align="center"居中)
hr 水平线(单标记)
p 段落标记(双标记)
br 换行(单标记)
  表示一个空格
address 地址(双标记)
width 宽度
size 大小
del 删除符号(双标记)
pre 预格式(双标记 怎样排版怎样显示)
marquee 从右向左滚动 (双标记)
<marquee direction="right">从左向右
onmouseover="stop()" 鼠标点上 不动 onmouseout="start()" 鼠标拿走 动
=================================================
无序列表:unorderes list
<ul></ul>无序列表
<li></li>列表项
=================================================
type属性:用于改变项目符号显示的样式。
disc(实现圆-默认值)
circle(空心圆)
square(实心方形)
=================================================
有序列表:orderes lsit
标记:<ol></ol>
列表项:<li></li>
start 开始项
value 指定项
=================================================
列表的嵌套:是指将有序列表或无序列表嵌套在列表项里(<li>)

定义列表:<dl></dl>
dt标记 用于表示一个标题<dt></dt>
dd标记 用于呈现标题对用的内容<dd></dd>(有缩进)
=================================================

<a></a>超链接 指区域<a href="***/***.html">
href属性，用于指定链接访问文件所在的路径及完整的文件称
=================================================
路径:
相对路径:是指从当前文件出发到目标文件所经历的路径
绝对路径:是指完整的文件路径。(一般不使用，网络路径必须使用它)
=================================================
/表示当前路径
../表示返回上一级目录
=================================================
css样式表 主要作用实现控制和显现分离。
选择符(ul){属性:属性值;}
1、所有的html标记都可以作为选择符。
2、id选择符。id="one" 引用：#one 只能设置一个属性值
需要在html开始标记中添加id属性，在css样式表以#id的形式来使用。id选择符除了在css中使用，还可以在javaScript中使用。
3、类选择器(h1 class="two")
外部引用:.two{color:red};
需要在html开始中添加class属性，在css样式表中以(.+类名)的形式来使用。类选择符不是唯一的，多个元素可以具有相同的类名称。可以为一个类属性指定多个属性值，用空格人分离。
4、包含选择符，祖先选择符。多个元素之间使用空格分隔。
5、父子选择符 父元素>子元素
6、组选择符h1,h2,h3,ul{font-size:50px;}
多隔选择符用逗号隔开。
===================================================
1、内部样式表 是在head标记之间添加<style></style>标记 它是针对于当前HTML文件有效。可以实现部分显示和控制分离。
<style type="text/css">
ul{list-style-type:none;}(除去无序符号)
a{color:#abc;font-size:12px;(大小)
text-decoration:none;(除去下划线)
background-image:url(***/***.**);(插图)width:107px;height:39px;(图片的长和宽)
font-weight:bold;(文字加粗)}
</style>
2、行内样式表 是指在html开始标记(body中) 中添加<style="color=red"></style>属性，并指定属性值的方式。使用行内样式是HTML代码和CSS代码写在一起，比较混乱。没有实现CSS样式表本身的作用。但是在一些JS效果中必须使用行内样式。优先级最高，但是只针对当前标记。

3、链接外部样式表
首先需要创建一个独立的CSS文件，扩展名为:.css
在head标记之间添加link标记格式:<link href=".css文件位置" rel="stylesheet"/>
4、导入样式表:是指在一个CSS文件中导入另一个CSS文件。格式:@import url(css文件的相对路径);
====================================================
html标记的分类
p h块级元素 独立占一定的区域后面的区域必须换行显示
b i行内元素 不独占一行，后面的空间可以被占用，元素不换行显示，行内元素不能设置宽和高。
====================================================
display:可以实现行内元素和块级元素的转换
display:block;转换成块级元素
display:inline;转换成行内元素
display:inline弹性盒子
text-align:center;水平居中
line-height:39px;(将行高和元素的高度设置成相同的值，可以实现垂直居中。)水平居中就是横的中间，垂直居中就是竖的中间
====================================================
超链接伪类:(四种状态)
a:link 设置超链接未被访问时的css样式,一般直接a标记做为选择器直接使用。
a:visited 设置超链接被访问后的css样式。
a:hover 用于设置当鼠标经过或悬浮到超链接上时的显示样式。
a:cation 设置鼠标按下未松开时的样式。

同时出现，按以上顺序写

p:first-letter 设置段落中第一隔字符的css样式
P:first-line 设置段落中第一行字符的css样式
=====================================================
一、css选择器:
*号选择器 它是通配符 代表可以选择所有的html元素 一般在做小型网站可以使用 大型网站不建议使用。
二、css属性和属性值

1、文本属性和属性值

color属性:设置文本颜色

font-size属性:设置字号大小，可以使用px,em,rem为单位。

font-weight:bold(bolder) /font-weight:100属性-设置字体加粗效果，weight后是整百值。

font-style属性:设置字体清协效果。（属性值:italic）//font-style:italic

font-family属性:设置字体效果(黑体、宋体等)可以设置多种字体，字体之间用,隔开。设置多个字体时，如果第一种字体无法显示，将显示第二种字体，以此类推。

line-height:设置行高，可以使用像素值，百分比，倍数值等。如:line-htight:1.5;
line-height:属性有一个非常重要的应用:如果将行高的值和元素的高度设置成相同的值，可以实现垂直水平居中对齐。

font属性:它是一个综合属性，可以同时设置多个属性值，多个属性值之间使用空格隔开。

2、布局属性

display属性:设置行内元素和块级元素相互转换的。
( display后加的属性值，
inline属性值，它是将元素转换为行捏元素。
block属性值，将元素转换为块级元素，还有一个作用就是显示元素。

inline-block属性值，行内块级元素，即具有行内元素的特点，又具有块级元素的特点，可以设置宽和高。

none属性值，无，没有的意识，这里标记隐藏元素，切隐藏不占位。
)
visibility属性:用于显示和隐藏元素。
visble，显示元素
hidden，隐藏元素，隐藏占位。

opacity属性：设置透明度。取值为0-1之间的值，如果设置为0，表示完全透明，设置1表示不透明。

float属性:浮动属性 用于制作水平导航
left，向左浮动 相当于向左看齐
right，向右浮动 相当于向右看齐
元素浮动后，会脱离文档流的控制，切回影响到后面的元素。

clear属性:清除浮动
left，清除左浮动
right，清除右浮动
both,同时清除左右浮动

overflow属性:溢出属性
hidden，溢出时隐藏
scroll，显示滚动条(上下拉动)
auto，如果内容溢出时，显示滚动条，不溢出时，不显示。

二、背景属性 background

1、background-color：设置背景颜色，单词red 十六进制rgb() rgba() hsl() hsla()

2、background-image：url(图像相对路径)，url(图像相对路径) 1/2张背景图片；

3、background-repeat：设置背景图像平铺效果
background-repeat:no-repeat;不平铺 repeat-x;X轴平铺 repeat-y;Y轴平铺

4、background-position：属性，设置背景图像位置，它的值可以是left center right top(上) bottom(下)
这些关键词，一般情况下可以设置两个值，一个表示水平位置，一个表示垂直位置。两个值之间使用空格分隔，也可以是指成一个值，另一个值默认为center。还可以设置成像素值如:20px 20px.
css精灵或css雪碧

5、background-attachment：设置背景图像固定不动。
fixed 背景不动
scroll 背景动

6、background 综合属性，设置一个属性指定多个属性值，之间使用空隔分隔。如:background:背景颜色 背景图像 背景位置 是否平铺

三、排版属性

1、text-align属性:设置水平对齐方式
属性值:left center right start end
start和end用于指文字从左还是从右开始显示

2、vertical-align属性:设置元素垂直对齐方式。
属性值:top middle bottom,

3、letter-spacing属性:设置字符间距，属性值一般在1px-2px之间

4、text-indent属性：设置段落缩进
属性值em 常用2em 一般参照父元素的font-size属性值来设置，1em相当于一个汉字的位置，实质上1em=16px 还可以设置负值

四、列表样式

1、lsit-style-type:设置列表项目符号的样式的。
属性值:disc circle square decimal(数字)还可以是大小写罗马数字和英文字母。
list-stype-type:最重要的属性值是none 去掉显目符号

2、list-style-image:url(图片位置)，使用图片当项目符号。

3、lsit-style-position：设置项目符号是否凸出显示
属性值:inside 凸出显示 outside不凸出显示

4、list-style综合属性，指定一个属性，给予多个属性值。通常书写为:list-style-none;

五、图像标记img

格式:<img stc="图片位置" alt="" title=""/>
alt属性：是用于指定当图片无法显示，替代显示的文字
title属性：是用于指定鼠标移动到图片上时显示的文字，它是一个全局属性，所有的标记都可以加这个属性。
除了以上属性，img标记还有width、height等属性一般都在css样式表中实现。不直接在标记添加属性实现。

六、边框属性border

1、border综合属性:border:粗细 线性 颜色；
粗细:以像素为单位px
线性:solid(实线)double(双实线)dotted(点划线)dashed(长划线)
颜色:单词或十六进制

css塌陷:当一个元素的子元素产生浮动后，该元素将不在自适赢高度。解决方案:使用overflow属性，并将属性值设置为auto或hidden

ul>li*12>a[href="#"]>img[src="img/2.jpg"]

zoom:1;放大属性 解决塌陷IE6

七、盒子模型

我们可以把网页上的每个html元素都看成是一个盒子，那么元素之间就是盒子包含盒子的关系。

八、外边距margin
外边距是指一个盒子的边缘到另一个盒子边缘的距离
外边距分别margin-top(上外边距)tight右外边距
bottom 下外边距 left左外边距
注意:行内元素不能设置宽和高，对行内元素不要设置上下外边距。产生垂直外边距合并。

margin综合属性：设置值时按照上右下左的顺序设置。
margin：10px 20px 30px 40px;
设置三个值时，按照上中下。没有值时取对称。
设置一个值表示四个方向。

九、内边距padding也时指一个盒子的边缘到另一个盒子边缘的距离。也有4个方向的内边距，同外边距。

注意:设置内边距会改变盒子的大小。对于块级元素一般都会有默认的内外边距。在使用时，一般我们都会对他们进行样式的重置。

css3的变形基础性transform
transform:fotate(角度值);
fotate()是变形基础属性的值，是一个函数，可以实现旋转的功能。
角度值是指旋转的角度，以deg为单位。（45deg）

浏览器的私有前缀
-webkit- 内核google chrom safari 以及手机浏览器
-moz- 内核Firefox浏览器
-o- 内核Opera浏览器
-ms- 内核IE浏览器
whatWG由浏览器开发商组成的。开发HTML5+css3
HTML5+css3现在还没有完全为w3c的标准。

css3的过渡属性，transition,查看执行的过程
transition:发生改变的属性 过渡的时间 过渡的数度；
发生改变的属性：是指当前鼠标经过元素时，那个属性发生了改变就写那个属性。如果不确定那个属性发生改变就用all。
过渡时间：是指从一个效果变化到另一个效果所使用的时间以秒为单位。
过渡速度：是指先快后慢

css3的动画属性animation
animation：动画名称 动画执行的时间 动画执行的速度 是否无限执行；
动画名称:自定义的名字
动画执行的时间:以秒为单位
动画执行的速度:linear表示匀速
是否无序执行：加infinite时无限执行，不加只执行一次。

关键帧@keyframes
@keyframes 动画名称{from{从哪开始}to{到哪结束}}
css3的动画属性不能单独使用，必须结合关键帧使用

css边框属性：border
除了分四个方向打的边框之外还涉及到边框的粗细border-width 边框的线性border-style和边框的颜色。
border-width:是综合设置四个边框的粗细 同样按照上右下左的顺序显示如 border-width:5px 10px;表示上下和左右粗细也可以单独设置如：
border-top-width:
border-right-width:
border-bottom-width:
border-left-width:
border-style是综合设置四个边框的样式 同样按照上右下左的顺序显示如border-style:solid double;表示是上下和左右线性也可以单独设置如:
border-top-style:
border-right-style:
border-bottom-style:
border-left-style:
border-color:是综合设置四个边框的颜色 同样按照上右下左的顺序显示如border-color:red blue;表示上下和左右颜色也可以单独设置：
border-top-color:
border-right-color:
border-bottom-color:
border-left-color:
1、表单的感念
表单是一个容器，它用于存储表单控件，如文本框、
按钮等。它的主要作用是实现人与计算机之间前端
交互，后台交互使用jsp,php,asp.net。表单可以实
现与服务器的交互。
2、表单标记form格式如下：
<form action="" method=""id="">
表单控件
</form>
action属性，用于指定表单提交时，提交到服务器上
的哪个路径及文件。可以理解为超链接标记的href属性.
method属性，用于指定表单的提交方式，有两种:
get提交，是默认值，是显示提交。
post提交，隐式提交
3、表单控件如 文本框，下接列表框，按钮等。
input格式
<input type="表单控件的类型"/>
(1)当type="text"时显示的是一个文本框。
它还有如下属性:
size属性:用于设置文本框长度
maxlength属性:允许输入的最长字符个数
value属性:设置文本框默认显示的文本内容。
(2)当type="password"时，显示的是一个密码框。
表单控件还有一个name属性，用于向服务器提交时
传递参数的。
(3)当type="submit"时，显示的是一个提交按钮。
value属性用于指定按钮上显示的文字。
在表单标记种，只有submit按钮能够实现表单的提交
注意，这个提交是指提交到服务器上。
(4)当type="reset"时，显示的是一个重置按钮，作用是
清空文本框。
placeholder属性:用于设置文本框提示文字。不再使用
value指定提示文字。
required属性:为文本框添加requred属性，用于判断
文本框是否为空。它的属性值和属性是一样的，所以可以不
用指定属性值。
(5)当type="radio"的时候，显示的是一个单选按钮。
在使用单选按钮时，必须为每个单选按钮指定name属性
而且属性值相同。这样会构成一个按钮组，才能实现
单选的效果。
可以为单选按钮指定checked属性，指定默认选中项。
还有value属性，用于向服务器提交时使用的。
(6)当type="checkbox"的时候，显示的是一个复选框。
同样checkbox也有checked属性，用于指定默认选中项。
(7)当type="date"时，显示的是一个日历控件。（这个是html5的新功能，IE浏览器显示不除来）
(8)当type="month"时，显示一个月份的控件。主要显示年
和月。
(9)当type="week"时，显示选择日期是当年的第几周。
(10)当type="time"时，显示时间，包含上下午 时和分钟。
(11)当type="email"时，显示邮件文本框，还可以实现
验证的功能。
(12)当type="url"时，显示网址文框，可以实现验证功能
http://www.baidu.com
(13)当type="number",显示一个数值文本框。
它有max最大值，min最小值，value当前值，
step步长。当指定步长时，输入或选择数值必须是
步长或步长的倍数值。
(14)当type="range",显示一个滑动条。
它也有max,min,value及step
(15)当type="color"，显示一个颜色面板。
(16)当type="search",显示一个搜索框。
(17)当type="tel",显示一个电话框。只起语义作用。
(18)当type="file",显示一个文件上传，但是上传的功能
必须结合后台代码实现。
(19)当type="hidden"，显示一个隐藏域，在页面看不到。
通常用于传递隐藏数据。
(20)当type="button",显示一个普通按钮。不具备提交
及重置的功能，但可以通过javascript给它添加事件处理。
通过value属性改变按钮上显示的文字。
(21)当type="image",显示一个图像按钮，而且这个按钮
也可以实现提交的功能。

表格:table标记 主要用于网页布局和数据的显示
网页布局不再属于表格了，表格在布局需要层层嵌套
会导致网页的加载数度变慢 而使用div+css
<table>
<tr>
<td></td>......
</tr>
</table>
说明:
table标记用于标识当前区域为表格区域
tr表示表格中的一行。
td表示 表格中的一个单元格
即使是一行一列的单元格也必须有table tr和td
th用于表示标题列
表格的标题使用caption标记表示。
table的边框属性：border,一般不建议这样加边框
而使用css样式表。
border-collapse:collapse;合并表格双边框效果
css3的结构伪类选择器
E:nth-child(n){css样式表}
表示选择E元素父元素的第n个叫E的孩子，不能是其它
元素
n取值从0开始，而且可以使用5n 8n 11n等这样的值
也可以使用2n表示偶数个孩子，2n+1表示奇数个孩子
还可以使用odd表示奇数，even表示偶数。
E:first-child{css样式表}
表示选泽E元素父元素的第一个叫E的孩子。
td的colspan属性:表示跨列合并，合并几列值就是
几。
td的rowspan属性:表示跨行合并，合并几行就是几。

======================================================