HTML标签嵌套规则以及常规应用

HTML分类:

1. 块级元素:

divh1~h6addressblockquotecenterdirdldtddfieldsetformhrisindexmenunoframesnoscriptolppretableul

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

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

2、行内元素:

spanaabbracronymbbdobigbrcitecodedfnemfontiimginputkbdlabelqssampselectsmallstrikestrongsubtextareattuvar

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

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

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

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

h1~h6pdt

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

5、li标签可以包含标签,因为lidiv标签都是装载内容的容器

 

 

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

 

 

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

borderwidth(边框粗细) style(边框样式) color(边框颜色);(border-top/border-left/border-right/border-bottom

溢出overflowvisible/(溢出可见)hidden(隐藏)/scroll(显示滚动条溢出时可用)/auto(自动溢出显示滚动条,并可用);overflow-xoverflow-y

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

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

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

内边距paddingvalue   先上下后左右

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

box-sizingcontent-box/border-box;按照盒子模型计算(内边距和边框包含进去

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

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

repeat(是否重复背景图片)repeatno-repeatrepeat-xrepeat-y

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

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

线性渐变background-image:linear-gradientangle(角度或方向),color-pointcolor-point…

径向渐变background-imageradial-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-alignleft/center/right;文字修饰:text-decorationnone/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-spacingvalue  一个值垂直和水平都有两个值代表水平和垂直

标题位置caption-sidetop/bottom

显示规则:table-layoutauto(列宽由内容决定[加载]/fixed(列宽由设定值决定[速度快]

浮动定位floatnone/left/right

清除浮动none/left/right/both

如果想消除浮动对父元素的影响:设置父元素高度、父元素浮动、父元素设置:overflowhidden/auto 、父元素设置clearboth

显示方式:displaynone(隐藏:脱离文档流)/block(块级:允许修改尺寸)/inline(行级)/inline-block(行内块:允许修改尺寸)/table(尺寸自占一行);

显示效果visibilityvisible(元素可见)/hidden(元素不可见:未脱离文档流)/collapse(删除一行或一列不影响布局

透明度opacity0~1;

文本垂直对齐方式:vertical-alignbaseline(默认基线对齐)/top/middle/bottom

光标cursordefault/pointer(小手)/crosshair+/textI/wait(等待)/help(帮助);

列表项标志:lis-style-typenone(无标记)/disc(实心圆)/circle(空心圆)/square(方块)

列表项图像:list-style-imageurl(“url”);

列表项位置:;list-style-position:outside(标志位于文本域之外)/inside(文本域之内)

列表属性list-styletype url() position

定位positionstatic(静态)/relative(相对定位)/absolute(绝对定位:元素会变成块级元素[弹出菜单]/fixed(固定定位:脱离文档流不占据页面空间)

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

堆叠顺序z-indexvalue

自带属性去除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;

}

 

 

你可能感兴趣的:(HTML)