html+css21总结Word格式.docx

1、li/li/ol无序列表/ul自定义列表dt/dtdd/dd/dl8） 超链接a href=”#”空超链接a href=”#” target=”_blank” title=”提示信息”在新窗口打开连接11） 表格tabletrtd/td/tr/table.border表格的边框.bordercolor边框颜色.cellspacing单元格与单元格之间的距离.cellspadding内容与边框之间的距离.align水平对齐方式（left、right、center、）.valign 垂直对齐方式（top、bottom、 middle）.colspan列合并.rowspan行合并12） 表单form

2、 name=”表单名称” method=”post/get” action=”/formPost和get的区别：get是从服务器上获得数据，post是向服务器上传数据，从安全性考虑，我们使用post13） 表单控件input type=”类型” name=”名称” value=”默认值” size=”宽度” maxlength=”最多输入的字符数”/文本框 text密码框password单选按钮 radio复选框 checkbox下拉菜单option/option/select多行文本/textarea提交按钮 submit按钮 button重置按钮reset默认选中checked禁用 dis

3、abled14） 二、 CSS的基础1） CSS是层叠样式表（Cascading Style Sheets）2） CSS的三种样式表A：内部样式表 Css的属性和属性值/styleB:内联样式表div style=”color:#f00”/divC:外部样式表link rel=”stylesheet” type=”text/css” href=”样式表的路径” import url（路径）;3） Link与import的区别差别1：老祖宗的差别：link属于XHTML标签，而import完全是CSS提供的一种方式。 link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义

4、rel连接属性等，import就只能加载CSS。差别2：加载顺序的差别：当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而import引用的CSS 会等到页面全部被下载完再被加载。所以有时候浏览import加载CSS的页面时开始会没有样式。差别3：兼容性的差别。：import是CSS2.1提出的，所以老的浏览器不支持，import只在IE5以上的才能识别，而link标签无此问题。差别4：使用dom控制样式时的差别：当使用javascript控制dom去改变样式的时候，只能使用link标签，因为import不是dom可以控制的。4） 样式表的优先级内联样式表最

5、大 内部样式表与外部样式表与顺序有关，谁在后边谁生效5） 选择器A:类型择器（元素选择器） 直接是html的标签id选择器 #id名属性：属性值;class选择器 .class名属性：D:通配符 *属性：E:群组选择器 选择器1,选择器2,选择器3属性：F:包含选择器 选择器1 选择器2属性：G:伪类选择器 a:link属性：visited属性：hover属性：active属性：H:伪对象选择器 选择符:after属性：6） 选择器的权重Id 100 class 10 类型1 内联样式1000 伪对象 10 伪类10 包含是权重之和7） 注释HTML注释-/*CSS注释*/8） 三、 CSS的

6、核心属性1） 字体的属性font字体类型font-family如果是中文需要加”如果是英文单词直接写如果有多个单词组成一个字体需要加”同时命名多个字体中间用逗号隔开，表示浏览器解析的时候先找第一，第一不存在找第二个，如果都不存在用系统默认字体文字的大小font-size大小的单位：px em pt1em=16px 0.75em=12px 绝对大小 xx-small=9 x-small=11 smal=13文字的颜色color可以用英文单词 red green用16进制数 #ff0000当两两相同时可以缩写：#f00用rgb（0,255，,255）用rgba（0,255,255,0.2）a代表透

7、明度取值范围是0到1加粗font-weightBold加粗 normal 正常倾斜font-styleItalic 倾斜 normal正常是否大小写font-variantNormal 正常 small-caps 将小写字母变成小型的大写字体的复合写法.font:style variant weight size familysize/line-height family2） 文本设置 text水平对齐方式：text-align （leftrightcenterjustify）垂直对齐方式：vertical-align（topbottommiddle）垂直对齐与图片连用才生效行高：line-h

8、eight 当行高与容器的高度一致时，内容可以垂直居中 当行高小于容器的高度时，内容在垂直方向的靠上位置反之靠下位置文本修饰text-decoration 下划线：underline 上划线：overline 中划线：line-through 没有线：none 闪烁：blink首行缩进：text-indent（可以设置负值）字符间距：letter-spacing词间距：word-spacing文本大小写：text-transform 首字母大写：capitalize 全都大写：uppercase 全都小写：lowercase3） 列表设置list列表符号设置：list-style-type列表

9、符号设置为图片：list-style-image:url（图片的路径）列表符号的位置：list-style-position去掉列表符号：list-style：4） 边框设置border:1px solid #f00（三个值没有顺序要求）实线：solid 虚线：dashed 点状线： dotted 双实线： double可以分方向去设置 Border-top border-left border-right border-bottom可以单独设置边框的颜色 border-top-color可以单独设置边框的粗细 border-top-width可以单独设置边框的线型 border-top-st

10、yle5） 背景的设置background背景图片：background-image:url（图片路径）背景颜色：background-color：背景是否重复：background-repeat:（repeatno-repeatrepeat-xrepeat-y） 默认情况是重复 repeat背景的固定：background-attachment：（fixed固定scroll不固定默认值）背景的位置：background-position: 左右 上下 还可以是具体的数值背景的复合写法.background:color image repeat position6） 浮动float（leftr

11、ightnone）浮动的元素会脱离正常的文档流浮动的元素会紧随着上一个浮动元素浮动元素会占据空间7） 清除浮动 clear（leftrightboth）四、 盒子模型盒子的组成：外边距（margin） 边框（border） 内填充（padding） 内容（width/height）盒子的实际大小宽=左边距（margin-left）+左边框（border-left）+左填充（padding-left）+内容（width）+右填充（padding-right）+右边框（border-right）+右边距（margin-right）高=上边距（margin-top）+上边框（border-top）+

12、上填充（padding-top）+内容（height）+下填充（padding-bottom）+下边框（border-bottom）+下边距（margin-bottom）内填充padding（不可以设置负值）外边距margin（可以设置负值）的四种写法：四个值：上 右 下 左三个值：上 左右 下两个值：上下 左右一个值：上下左右设置水平居中：margin:0 auto;1） 如果两个div处于上下结构且不浮动他们之间的距离取最大值2） 如果两个div都浮动且是上下排列他们之间的距离是两个之和3） 如果两个div都浮动且在一排显示他们左右直接的距离是两个之和4） 两个div是父子关系如果设置子元

13、素的margin-top不生效的解决办法一种：给父元素添加边框二种：给自身设置浮动5） 如果两个div上一个浮动下一个清除浮动处于上下排列他们之间的距离是上边的margin-bottom6） 五、 文本溢出容器溢出：overflow（visible、hidden、scroll、auto、inherit）.visible:默认值，超出之后显示在容器的外边.hidden:超出之后隐藏，且超出的内容看不见.scroll:超出文本框以滚动条形式显示，内容可以看见.auto:自适应 超出显示滚动条，不超出无滚动条.inherit:继承父元素的overflow的属性空白空间white-space（pre、

14、pre-wrap、pre-line、nowrap、 normal、 inherit（ie不支持次属性）.pre:保留空格，不换行.pre-wrap:保留空格，换行.pre-line:不保留空格，换行.normal:默认值.nowrap:强制文本在一行显示，知道遇到br才换行继承父元素的white-space的属性文本溢出：text-overflow（clip、ellipsis）.clip:直接裁切.ellipsis:溢出后显示单行文本超出之后显示省略号的条件例如：超出300px宽的文字显示省略号该如何实现： 设置容器的宽度：width：300px； 强制在一行显示：white-space：no

15、wrap； 溢出容器隐藏：overflow：hidden； 溢出文本显示省略号：text-overflow：ellipsis；六、 元素类型块状元素 内联元素 可变元素 块元素与内联元素的区别（div与span的区别）1、 div是块状元素，span是内联元素2、 块状元素可以设置宽高，内联元素不可以3、 块状元素自上而下排列，内联元素在一行显示直到放不下才换行4、 他们都遵循盒子模型，但是内联元素的部分属性是不能正常显示的元素类型之间的转化 display（18个属性值）1、 block将元素变为块状元素2、 inline将元素变为内联元素3、 inline-block将元素变为行内块元素可

16、以设置vertical-align（img和input）4、 list-item将元素转化为列表元素 （li）5、 none隐藏元素大多数块元素的默认元素类型是block li的默认类型为list-item大多数内联元素默认元素类型是inline img input的默认类型为inline-block常见的块元素：div dl dd dt ul ol h1-h6 p常见的内联元素：a span b strong I em七、 浏览器的兼容最早的浏览器是网景领航者简称NN五大浏览器内核以及他们的代表常见的浏览器兼容问题1、 图片的间隙A、div插入图片时的间隙 将与img写在同一行 将img转化

17、成块状 display：blockB、dl li里的图片间隙 将img转化成块状元素 display：2、 Ie6的双边距问题给浮动元素添加display：inline3、 Ie6的默认高度问题A、 给font-size：B、 Overflow：hidden4、 表单行高不一致给元素添加float：left5、 按钮大小不一致A、 用a标签替代按钮B、 在元素的外边加一个标签，将按钮的样式清空C、 直接用图片替换按钮（给按钮添加背景图片 value值清空 value=“ ；”）6、 百分百当各占50%出现解决方式清除浮动clear7、 鼠标指针异常 cursor：pointer8、 透

18、明Filter：alpha（opacity=透明度取值0-100）；opacity：透明度取值0-1；9、 在属性前边加上下划线 ie6识别10、 在属性前边加上*ie6 ie7识别11、 在属性前边添加加号 ie6 ie7识别12、 关键字 ！important（ie6不识别）八、 网页制作网页制作的思路1、 分类（images图片文件夹 css文件夹 js文件夹 ）2、 创建页面 引用样式表（用link的方式）3、 将通用样式完成4、 写结构（按照网页是设计风格给页面分块）5、 添加内容网页制作技巧：先保证一个浏览器正常显示写代码要添加注释代码结构要清晰取名要结构化语义化写导航时如果a标签

19、变成块状后要给他加浮动如果两个元素在一行显示一左一右为了兼容ie6要将两个都设置浮动是一条条的新闻就用列表相似的模块能用同一个就用同一个如果仅仅是图片上的区别时可用直接在网页中插入图片；如果利用背景插入图片，那么需要从新命名，里边的样式不变，只需改变背景图片即可。当接到一个页面时你先分析一下，同样的地方可用一起写，或者直接设置一个，其他粘贴复制。九、 定位定位position（static、absolute、relative 、fixed）固定宽度高度的div水平垂直居中的做法#divposition:absolute; width:300px; height:200px; top:50%;

20、left: margin-top:-100px; margin-left:-150px;固定宽度高度的div永远水平垂直居中的做法fixed;如果想子元素根据父元素去定位：给父元素设置绝对定位（margin:0 auto 不生效）给父元素设置相对定位（margin:0 auto可以生效）设置定位后层叠属性z-indexz-index可以取负值 值越大越在上面锚点a标签里的href=“#id名称”滚动条overflow-x、overflow-y圆角 border-radius设置一个值：指四个角都一样设置两个值：指的是对角一样单独设置某个角 border-top-left-radius bord

21、er-top-right-radius border-bottom-left-radius border-bottom-right-radiusflash动画滚动字幕marquee一十、 图片整合 background-position图片整合的优势（好处）：减少对服务器的请求次数，挺高访问速度减小图片体积，避免空间浪费一十一、 宽高自适应1、 最小高度的自适应 min-height：valueA、 min-height：value；_height:value;B、 min-height:auto !important;2、 元素高度自适应窗口的高度Html,botyheight:100%元素

22、本身设置height：100%3、 浮动元素高度自适应（高度塌陷）A、 个父元素添加overflow：B、 在浮动元素的下边添加一个空div 做如下设置 Clear：both；height：0；font-size：C、 万能清除法父元素：aftercontent:”.”; display:block;0; visibility:hidden; clear:both;4、 伪对象选择符after 在内容的后边添加content里的内容before在内容的前边添加content里的内容fisrt-letter 改变内容的第一字fisrt-line 改变内容的第一行（ie6以下版本不支持伪对象）5、

23、 一十二、 表单表格的高级表单的组成：表单域（form）、表单控件（input）、提示信息（label）表单字段集 fieldset 表单字段集的标题legend提示信息label（提高用户体验度）表格：合并单元格间距border-spacing合并相邻边框 border-collapse单元格为空时隐藏 empty-cells：hide显示单元格行、列的算法 table-layout表格按数据行分类：表头thead 表体tbody 表尾tfoot表格列标题th 默认加粗居中一十三、 Css的统筹文档的统筹将相同是css样式单独独立出来文档可以按类型、功能、设备类型、页面的代码规模去分类网页的优化（seo）标题优化Meta语句 描述 关键字 其他超链接的优化（不用、少用flash 加上title属性 alt 属性 不用图片热区）图片优化（title属性 alt 属性）为网站制作一个地图交换友情链接尽量用静态页面结构清晰 易于维护CSS的命名用小写英文字母、以英文字母开头，可以使用数字、下划线、特殊符号等，词必达意，语义化结构化重置样式：子选择符与后代选择符的区别：写法不同 子选择符中间是大于号，后代选择符是空格作用范围不同 子选择符只管子元素，后代只有是我包含都管兼容性的不同 子选择符在ie6、ie7、ie8不支持 后代所有浏览器都好使一十四、