HTML总结

HTML分类：

1. 块级元素：

div、h1~h6、address、blockquote、center、dir、dl、dt、dd、fieldset、form、hr、isindex、menu、noframes、noscript、ol、p、pre、table、ul

特点：总是在新行上开始，高度、行高以及上下边距都可控制，宽度默认是容器的100%，除非设定宽度。

功能：主要是用来搭建网站架构、网页布局、承载内容。

2、行内元素：

span、a、abbr、acronym、b、bdo、big、br、cite、code、dfn、em、font、i、img、input、kbd、label、q、s、samp、select、small、strike、strong、sub、textarea、tt、u、var

特点：和其他元素都在一行上，高、行高、以及上下边距不可变，宽度就是它的文字和图片的宽度，不可改变。

嵌套规则：1、块级元素与块级元素平级、内嵌元素与内嵌元素平级

  2、块级元素可以包含内联元素或某些块元素，但是内联元素不能包含块元素，它只能包含其他的内联元素。

  3、有几个特殊的块级元素只能包含内嵌元素，不能再包含块级元素

h1~h6、p、dt

  4、块级元素不能放在标签p里面

5、li标签可以包含标签，因为li和div标签都是装载内容的容器。

 

 

a标签想要用hover必须把它的路径写全

 

 

所有属性的简写形式总结：

框：border：width(边框粗细) style(边框样式) color(边框颜色)；（border-top/border-left/border-right/border-bottom）

溢出overflow：visible/(溢出可见)hidden(隐藏)/scroll(显示滚动条，溢出时可用)/auto(自动，溢出显示滚动条，并可用);（overflow-x、overflow-y）

外边距：margin:value(数值)   先上下后左右（可以设负值）

默认拥有外边距的元素：body,p,h1,h2,h3,h4,h5,h6,pre,ol,ul,dl,dd

外边距特殊效果：1.外边距合并2.上下外边距溢出（子元素是一个没有外边距的父元素的第一个或最后一个）

内边距：padding：value   先上下后左右

在设置button type=“submit/reset/button”的宽高时包含边框和内边距

box-sizing：content-box/border-box；按照盒子模型计算（将内边距和边框包含进去）

background：color(颜色) url(“”)(背景照片的路径) repeat(是否重复背景图片) attachment(背景图片固定) position(背景图片定位);

attachment(背景图片固定)：scorll（背景随文本移动）、fixed（固定）

repeat(是否重复背景图片)：repeat、no-repeat、repeat-x、repeat-y

background-size：背景图片的大小：cover扩充足够大覆盖元素区域（有可能背景图显示不完整）

position(背景图片定位);抠图专用；

线性渐变：background-image：linear-gradient（angle（角度或方向），color-point，color-point…）

径向渐变：background-image：radial-gradient（[size（圆半径） at position（圆心位置）],color-point…）

浏览器兼容性：fire-fox：-moz-

  chrome&safari：-webkit-

  opera：-o-

字体属性：font: style(样式normal/italic) variant（小型大写字母normal/small-caps） weight（字体加粗 normal/bold/400-900） size（字体大小px pt em） family（字体*必须写）;

文本属性：color：颜色、文本排列：text-align：left/center/right；文字修饰：text-decoration：none/underline/line-though/overline；行高：line-weight：value；首行文本缩进text-indent:value；文本阴影：text-shadow:h-shadow（横向阴影） v-shadow（纵向阴影） blur（阴影模糊） color（阴影颜色）；

表格：垂直方向对齐：vertical-align：top/middle/bottom；

边框合并：border-collapse：separate（分离）/collapse（合并）

边框边距：border-spacing：value  一个值垂直和水平都有、两个值代表水平和垂直

标题位置：caption-side：top/bottom

显示规则：table-layout：auto（列宽由内容决定[加载慢]）/fixed（列宽由设定值决定[速度快]）

浮动定位：float：none/left/right；

清除浮动：none/left/right/both；

如果想消除浮动对父元素的影响：设置父元素高度、父元素浮动、父元素设置：overflow：hidden/auto、父元素设置clear：both。

显示方式：display：none（隐藏：脱离文档流）/block（块级：允许修改尺寸）/inline（行级）/inline-block（行内块：允许修改尺寸）/table（尺寸自占一行）；

显示效果：visibility：visible（元素可见）/hidden（元素不可见：未脱离文档流）/collapse（删除一行或一列不影响布局）

透明度：opacity：0~1；

文本垂直对齐方式：vertical-align：baseline（默认基线对齐）/top/middle/bottom；

光标：cursor：default/pointer（小手）/crosshair（+）/text（I）/wait（等待）/help（帮助）；

列表项标志：lis-style-type：none（无标记）/disc（实心圆）/circle（空心圆）/square（方块）；

列表项图像：list-style-image：url(“url”)；

列表项位置：；list-style-position:outside（标志位于文本域之外）/inside（文本域之内）；

列表属性：list-style：type url() position；

定位：position：static（静态）/relative（相对定位）/absolute（绝对定位：元素会变成块级元素[弹出菜单]）/fixed（固定定位：脱离文档流不占据页面空间）；

偏移属性：top/bottom/left/right：value

堆叠顺序：z-index：value；

自带属性去除body,p,h1,h2,h3,h4,h5,h6,pre,ol,ul,dl,dd{

margin:0px;

padding:0px;

}

背景图片的处理：

#top_box>ul>.shoujijingdong a {

padding-left: 18px;

display: inline-block;

height: 23px;

padding-bottom: 9px;

background: url("../Images/iconlist_2.png") no-repeat;

background-position: -127px -356px;

}

 

 

文本样式：
<b></b>加粗
<i></i>斜体
<u></u>下划线


特殊字符：
&nbsp;空格
&lt;<
&gt;>
&copy;@
&yen;￥


标记：
<img src="图像所在url" width="图像宽度" height="图像宽度" 
border="图像边框" alt="图像出错时的文字" title="鼠标放入图片时显示的文字">
<a href="链接的url路径" target="打开新的标签页的方式(取值：_blank/_self)" 
title="鼠标放入链接时显示的文字" name="锚点名称"></a>
href="xxx.rar"/href="xxx.zip"  : 下载资源
href="mailto:xxx";  :  发送邮件
href="#";   :返回顶部
href="javascript:";  : 连接到JS


常用结构布局：
header：头部
nav：导航内容
aside：侧边栏
section：主题内容
article：论坛帖子
footer：页面底部信息


列表：
ol：有序列表
属性：type：取值：1、a、A、i、I 
  start：取值：阿拉伯数字
ul：无序列表
属性：type 取值：disc、circle、square、none


CSS：
调整优先级：
! important;


伪类选择器：
链接伪类：  : link 匹配尚未访问过的超链接
     : visited 匹配访问过的超链接
动态伪类：
     : hover 匹配鼠标悬停在元素的状态
     : active 匹配元素被激活时的状态
     : focus 匹配元素获取焦点时的状态
CSS单位：
%：相对单位
in：英寸 （2.54cm）
cm：厘米
mm：毫米
pt：磅    1/72in
px：像素
em：倍数   1em相当于不变  2em相当于乘以2


块级元素: 
宽度：占据父元素的100%  可以更改尺寸
高度：自适应    可以更改更改尺寸
行级元素：
宽度：自适应  
高度：自适应


边框属性：
border：
属性：width（线的宽度）style（solid{实线}、dotted{点状虚线}、dashed{线条状虚线}）
border-top、border-bottom、border-left、border-right
border:里面包含padding和主体  可以通过控制padding的大小来给主体加（下）划线
border：数值px  solid color;
border-方向-color：单边框颜色
border-方向-style：单边框的样式
边框倒角：
border-radius：数值px、百分比
border-方向-方向-radius：单角倒角
边框阴影：
box-shadow：h-shadow(阴影水平偏移！) v-shadow(阴影垂直偏移！) blur(模糊距离) spread(阴影尺寸) color(阴影颜色) inset(外阴影改为内阴影)；


外边距属性：
margin：数值px/百分比/auto/值为负向相反的方向移动
margin:value   ：上下左右的外边距
margin:v1 v2    v1:上下外边距  v2 :左右外边距
margin: v1  v2 v3   v1:上外边距  v2: 左右外边距  v3:下外边距
margin:v1 v2 v3 v4  上右下左  顺时针方向
单边外边距：margin-方向
margin:opx auto;
只对左右外边距有效，上下外边距无效
用于控制块级元素水平居中对齐
必须设置该元素的宽度属性，否则无效

padding:
padding:数值px/百分比%
padding: value   四个方向的内边距
padding:v1 v2    v1:上下内边距  v2:左右内边距
padding:v1 v2 v3  v1:上内边距 v2:左右内边距  v3:下外边距
padding:v1 v2 v3 v4   上右下左  顺时针
padding-方向：单边设置


定位：
浮动定位：float:none/left/right
属性：position
static 静态  默认定位方式  文档流定位
relative 相对定位
absolute  绝对定位
fixed  固定定位
偏移属性：
left、top、right、bottom
left:数值px ：数值为正，向右移动  数值为负，向左移动


背景样式：
background-color:背景颜色
背景颜色淡化：opacity:0-1;
background-image:url("url路径"); -----> 背景图片
background-repeat:no-repeat;  ------>背景图片是否需要平铺
background-size:v1 v2/v1% v2%/cover/contain; ------> 背景图片大小
background-position:x y /x% y% ; ----->背景图像位置
x:背景图片在水平方向偏移距离：正：向右移动   负：向左移动
y:背景图片在垂直放向偏移距离：正： 向下移动   负：向上移动
x、y还可以取关键字
x：left、center、right
y：top、center、bottom


字体样式：
font-family：字体选择
font-size：字体大小
font-weight：字体加粗
font-style：字体样式（normal正常/italic斜体）
color:字体颜色
text-align:文本水平对齐方式
text-decoration:(none{无线条样式}/underline{下划线}/overline{上划线}/line-through{删除线})文本修饰
line-height:数值px   ----->行高


显示方式：
display:none{隐藏}/block{块级元素}/inline{行级元素}/inline-block{行内块元素}


列表样式：
list-style-type：列表项标记
取值：none/dics/circle/square（ul）
list-style-image:url("url路径"); 列表项图像
list-style-position:：列表项位置
取值：outside/inside
list-style:列表属性
取值：none


在body体中：
width规定了页面的整体宽度 
text:定义文本颜色
bgcolor：定义页面的背景颜色
margin:0px auto;属性  整体居中外边距为0px