html+css基础知识

  1    
     这是自己学习html时候做的一些记录，供大家参考
     <!--
  2             块和内联
  3             块元素:独占一行的元素
  4             div p h ul
  5             div没有任何语义，就是一个纯粹的快元素
  6                 就是为了方便布局
  7                 
  8             span是内联元素（行内元素）：只会占用自身大小的元素，不会占用一行
  9                     常见的内联元素：a img iframe span
 10                 span没有任何意义，可以设置样式
 11             块元素主要用来实现页面布局，内联元素主要选中文本设置样式
 12                  一般情况下只是用块元素去包含内联元素，内联元素不去包含块元素
 13                 a元素可以包含任何元素，除去本身
 14                 p元素中不能放任何块元素
 15         -->
 16         <!--
 17             类选择器，id，class，id不能重复，class可以重复
 18                    class能赋多个值，使用空格隔开
 19                    class用.
 20                    id用#
 21                    
 22             选择器分组
 23                 - 通过选择器可以同时选中多个元素
 24                 - 语法：选择器1，选择器2，。。。
 25             通配选择器：*{}
 26                 选中页面中所有元素
 27              
 28             复合选择器：
 29                 - 作用: 
 30                     同时满足多个条件
 31                     选择器1选择器2.。 选择器中间没有间隔
 32                     
 33             伪类选择器必须顺序使用如下，但他们的优先级是一样的
 34             伪类选择器：:link,:visited, :hover，:active, :focus, ::selection, 
 35             伪元素(用来设置元素中的一些特殊位置)：:first-letter， :first-line
 36             :before, :after  
 37                        before和after一般结合content使用，通过content添加内容
 38                                  例如：
 39                             p{
 40                                 content:"sdfsfdd";
 41                             }     
 42     
 43     
 44                   
 45                     
 46         -->
 47         <!--  ==========  -->
 48         <!--  = 属性选择器 =  -->
 49         <!--  ==========  -->
 50         <!--
 51             
 52             title属性，这个属性可以用于任何标签，指定提示文字
 53             例如<p title=" 这是一个title提示">十分士大夫的</p>
 54             
 55             属性选择器，选取拥有特定属性的标签。
 56             语法： [属性名]， [属性名=属性值]，
 57             [属性名^=属性值](选取以属性值开头的属性元素)，
 58             [属性名$=属性值](选取以指定内容结尾的属性标签)，
 59             [属性名=属性值](选取包含指定内容的属性标签)，
 60             例如p[title]{}，p[title=属性值]
 61             
 62             
 63             子元素选择器： ：first-child(选中第一个元素，并且自身是子元素)，:last-child
 64                          :nth-child(子元素的位置)，选定子元素任意位置。even表示偶数位的子元素，odd表示奇数位的子元素[IE8以下的浏览器是不支持的]
 65                          :first-of-type,:last-of-type[同一类中的第一个]
 66                                  父 > 子类型 IE6不支持　　
 67                          
 68             兄弟选择器：
 69                       p +后一个兄弟元素{}
 70                       p ~后面所有类型的兄弟元素
 71                       
 72         
 73                 否定伪类：可以从已经选中的元素中剔除某些元素
 74                 p:not(选择器){}
 75                 样式的继承，后代会继承祖先的样式,但是并不是所有的样式都会被子继承，例如，背景是不会被继承的
 76                 
 77                 
 78            
 79            
 80                 使用不同的选择器，选中同一个元素，设置相同的样式时、
 81                 这时候样式之间产生了冲突 
 82                 优先级：内联样式>id>class>元素选择器>通配
 83                如果优先级相同，会选择靠后的一个
 84                可以在样式的最后，添加一个！important，将会获得最高优先级。但在开发中尽量避免使用
 85         -->
 86 
 87         <!--
 88                       这两个都表示强调的内容
 89             em 强调着重点，表示语气上的强调，em在浏览器中默认使用斜体显示
 90             strong 表示强调，比em更强列，默认使用粗体显示
 91         -->
 92 
 93         <!--
 94             i标签没有任何语义，没有着重的意义
 95             b只是丹村的加粗
 96         -->
 97 
 98         <!--
 99             small标签的内容文字较小
100                  可以用于版权声明，合同
101         -->
102 
103         <!--
104             cite用于加书名号的内容，表示参考的内容    
105         -->
106 
107         <!--
108             
109             q标签表示一个引用，会自动加上引号
110             
111             blockquote 表示长引用，表示一个块元素
112             
113             sub,sup，下标和上标
114             
115             pre标签是一个预格式标签，保留格式空格，不会删除空格显示
116             
117         -->
118 
119         <!--
120             
121             列表有三种：
122                 1.有序列表 ol li
123                 2.无序列表 ul li
124                 3.定义列表 dl 包含dt(被定义的内容) dd（对定义内容的描述）
125             
126         -->
127 
128         <!--  ==========  -->
129         <!--  = 长度单位 =  -->
130         <!--  ==========  -->
131         <!--
132             长度单位
133             px 像素
134             百分比%  占父元素的比例
135             em 和百分比相似
136                根据当前的字体大小来计算的
137               1em = 1font-size 当字体大小发生变化时，em也会变化
138               设置字体相关的样式时，会使用
139             
140         -->
141 
142         <!--  ==========  -->
143         <!--  = 字体样式 =  -->
144         <!--  ==========  -->
145         <!--
146             
147             line-height 表示行高 可以继承
148             px时
149             、行间距 = 行高 - 字体大小
150                       定义一个百分数，相对于字体大小来说
151                       直接指定行高，传入数值，行高会设置字体大小的倍数
152                       
153              使用font定义字体时，如果不在font中指定，都会采用默认值，所以要么在font后定义单独样式，要么不指定
154              font-family
155              font-variant
156              font-size
157              font-weight
158              font-style
159              color
160              line-height
161         -->
162 
163         <!--
164             
165             关于文本的一些常用的样式
166             
167             text-transform(文字变形): 可以继承
168                  值：none（默认）, capitalize(首字母大写)，uppercase(全部大写)，lowercase(小写)，inherent
169             text-decoration(定义文本的修饰)：不可继承
170                可选值：none（不加任何修饰）
171                      underline（加下划线
172                      、      overline 加上划线
173                      line-through 为文本添加删除线
174                      
175                      超链接会默认添加下划线，可以设置text-decoration 为none去除下划线
176             letter-spacing（字符之间的间距）【中英文都有效】
177             word-spacing 单词之间的距离【中文改变空格的大小，英文是词与词之间】
178             text-align：文本的对齐 left right center justify（两端对齐）
179             
180             text-indent：首行缩进  em单位表示一个单词 如果是负值，字体就会隐藏
181         -->
182 
183         <!--
184             盒子
185             width和height来设置盒子内容区的宽度和高度
186             设置边框必须设置三个样式，缺一不可 但是他们都有默认值 ：border-weight（上 右 下 左， 上  左右  下， 上下  左右），border-color（上 右 下 左， 上  左右  下， 上下  左右），border-style
187             可以设定border设置三个样式，没有顺序要求例如 border:10px red solid  border-right:none
188             
189             margin（外边距） padding(内边距)
190             margin可以设置为auto（能设置多大，就设置多大） 一般只是设定水平方向的，left和right同时设置为auto，会一边一半，经常会使用这样来使盒子居中
191             垂直方向设置auto，外边距默认为0，不起作用
192             垂直外边距的折叠
193                 在网页中垂直方向的相邻外边距会重叠
194                   外边距重叠指的是兄弟元素相邻外边距会取最大值
195                   如果父子元素的垂直外边距相邻了，则子元素的外边距会设置给父元素
196                   解决方案：把父子元素的外边距给隔离，可以设置顶部border或者设置padding内边距
197             
198             
199             浏览器设置了默认样式（为很多元素设置了padding和margin），为了在没有样式时，也有一个好的显示效果
200             所以我们需要将浏览器默认设置的样式去掉，由于通配选择器是最低优先级，所以在通配选择器中设置margin和padding为0 
201             *{
202               margin：0；
203               padding：0；
204               }
205         -->
206         
207         <!--  ==========  -->
208         <!--  = 内联元素和块元素 =  -->
209         <!--  ==========  -->
210         <!--
211             
212             内联元素和块元素的区别
213             内联元素
214                  内容块
215                     不能设置width和height，没有用
216                 内边距    
217                     可以设置padding，水平垂直都可以，但是垂直方向不会影响布局。
218                 边框
219                 可以设置边框，但是垂直方向不会影响布局
220                 外边距
221                 水平方向的外边距不会重叠，而是求和
222                不支持垂直方向的外边距
223             
224             
225             display:会改变元素的类型  inline-block block none（不显示且不占空间）
226             visibility：是否显示，visible hidden（隐藏但是占用空间）
227             overflow：对溢出的部分进行处理【注：在父元素中进行设置】
228                      visible 默认值，在父元素以外的位置显示
229                      hidden 溢出的内容会被修剪，不会显示
230                      scroll 产生滚动条，使用滚动条查看溢出的内容
231                             - 无论内容是否溢出，都会显示滚动条
232                      auto：根据需要，来决定是否需要添加滚动条
233         -->
234 
235        <!--  ==========  -->
236        <!--  = 文档流和浮动 =  -->
237        <!--  ==========  -->
238         <!--
239             一旦脱离文档流，元素不在区分块元素和内联元素，只是互补。如果是块元素，则会在快元素的基础上拥有内联元素的特性，反之，亦然
240             
241             一旦脱离文档流，可以去往任何位置。拥有所有特性，可以这么说 就是高层次的inline-block（内联和块元素的结合）
242             
243             文档流
244             
245             
246                  文档流处在网页的底部，他表示的是一个页面中的位置
247                  我们所创建的元素默认都在文档流里面
248                  
249             元素在文档流中的特点
250                 块元素：
251                     1.在文档流中独占一行
252                内联元素：
253                      1。只占用自身的大小，从左到右排列
254                      
255                      
256             把块元素水平排列，把块元素从文档流中剔除出来，可以用float实行
257 
258             元素与元素之间一般情况下都是换行显示，所以中间会有个空格，可使用float消除空格。
259             float：只要元素浮动，下面的元素会顶上去被浮动的元素覆盖。只有下面的元素也设置浮动，才会浮动到同一水平位置上
260                   none
261                   left 从文档流中脱离出来，向页面左侧浮动
262                   right从文档流中脱离出来，向页面右侧侧浮动
263                   
264             一旦浮动，都会脱离文档流，可以设置宽高，和块元素一样
265                          一旦脱离文档流，会相当于从当前布局脱离出去，就当不存在一样，剩余的布局从新界定      
266                    1.高度塌陷问题，父元素不设定高度，子元素浮动之后，父元素会塌陷，没有高度。可以将父元素的高度写死，避免这种问题出现，但是一旦写死，父元素将不能自适应布局（不推荐使用）
267         -->
268 
269         <!--  ==========  -->
270         <!--  = 解决浮动问题产生的高度塌陷 =  -->
271         <!--  ==========  -->
272 
273         <!--
274             、
275             根据w3c标准，在页面中元素都包含一个隐含的属性，BFC（blcok formatting context）
276              默认是关闭的
277              开启BFC主要解决浮动的问题
278              当开启BFC时候，元素将会由如下特性
279              　　　　１.父元素的垂直外边距不会和子元素重叠
280              　　　　２.开启BFC的元素不会被浮动元素所覆盖
281              　　　　３.开启BFC的元素可以包含浮动的子元素
282              如何开启BFC
283              　　　　１.设置元素浮动（不建议使用　，会导致布局混乱，父元素宽度丢失）
284              　　　　２.设置inline－block（父元素宽度丢失，不推荐使用）
285              　　　　３.设置绝对定位（一样的效果和第一个）
286              　　　　４.将元素的overflow设置为非visible的值，一般使用auto和hidden
287              　　　　推荐使用第四种方式
288             但在IE６及以下版本不支持BFC，所以使用这种方式不能兼容IE6
289             但是有另一个属性叫 Has Layout
290             该属性的作用，和BFC类似，在IE6中可以开启这个属性来设置塌陷问题
291             开启方式很多，我们直接使用一种副作用最小的
292                直接将元素的zoom设置为1就行（zoom表示放大的意思，后边跟着一个数值，就是将我么的元素放大几倍。 zoom只在IE中支持）
293                
294             如果希望清除其他浮动元素对当前元素的影响，对当前元素应用clear属性
295                 可选值：
296                     none
297                     left 清除左边浮动元素对当前元素的影响
298                     right
299                     both 清除对当前元素影响最大的
300                     
301                     
302                     
303             解决塌陷方案一：
304                  1.1在父子中使用 overflow ，zoom消除外边距重叠影响
305                  1.2在兄弟中使用clear清除浮动影响
306             解决塌陷方案二、：、
307                 2.1在父子中，在浮动元素下方添加一个div 在这个div中使用clear
308                  2.2在兄弟中直接使用clear
309             w3c推荐使用
310             解决塌陷问题方案三：
311                3.1通过after伪类选中父元素的后面，添加一个空元素
312                div:after{
313                    content:"";
314                    display:block;
315                    clear:both;
316                }
317                在IE6中不兼容，需要使用
318                div{
319                    zoom:1;
320                }
321                3.2在兄弟中直接使用clear
322                最推荐的一种方式
323                    同时解决父元素外边距和子元素相邻 ，高度塌陷问题
324                           使用空的table标签可以做到这一点
325                              div:after,div:before{
326                                  content:"";
327                                  display:table;
328                                  clear:both;
329                              }
330               
331         　　在IE６里面，块元素和内联元素都是看作块元素，这个要注意
332         --> 
333         <!--  ==========  -->
334         <!--  = 关于定位 =  -->
335         <!--  ==========  -->
336         <!--
337             定位
338                定位指的是将指定的元素放到任意的位置
339                position
340                   可选值：
341                   static
342                   relative
343                   absolute
344                   fixed
345                   
346                   
347                  relative:
348                          1. 相对自身位置（在文档流中的原来位置）进行定位，通过left ，right，top , bottom来设置、
349                          2. 相对定位不会脱离文档流，原来的位置仍然占用
350                          3. 相对定位会使元素提升一个层级，如果发生重叠，会覆盖别的元素
351                          4. 相对定位不会改变元素的性质，块元素还是块元素，内联元素还是内联元素
352                  
353                 absolute设置绝对定位
354                         1. 会使元素脱离文档流
355                         2. 开启绝对定位，不设置偏移量，位置不发生变化
356                         3.绝对定位是相当于离他最近的开启定位的祖先元素定位的（一般情况下，开启了子元素的绝对定位，父元素会开启相对定位）
357                                           如果所有祖先元素没有开启定位，就会相对于浏览器进行定位
358                         4.绝对定位会提升一个层级
359                         5. 绝对定位会改变元素的性质
360                                                内联元素变成块元素
361                                               块元素的高度和宽度默认都被内容撑开
362                 fixed定位（绝对定位的一种）
363                         1. 元素会脱离文档流
364                         不同的是：
365                                      固定定位永远都是根据浏览器窗口进行定位的
366                                      固定定位不会随滚动条滚动
367                     IE6不支持这个固定定位
368                     
369                 关于层级：
370                 如果元素都提升了等级，在布局上谁在下面，就会盖住上面的元素
371                 通过z-index属性可以用来设置元素的层级：为z-index指定一个值，数值越高，越优先显示
372                 对于没有开启定位的元素，z-index没有用
373                父元素的层级再高，也不会遮挡子元素
374         -->             
375    
376         <!--  ==========  -->
377         <!--  = 透明 =  -->
378         <!--  ==========  -->
379         <!--
380             
381             opacity用于设置透明度
382             
383             在IE8及以下
384             需要使用filter：alpha（opacity=）； 在IE tester中不行是个bug
385             
386         -->
387         
388         <!--  ==========  -->
389         <!--  = 背景图片 =  -->
390         <!--  ==========  -->
391         <!--
392             所有的背景可以用background一个属性来设置，属性之间没有顺序
393             background-img来设置背景图片
394                语法：background-img:url()
395                - 背景元素大于当前大小，会显示左上角
396                - 背景元素小于当前大小，则会默认平铺（用图片不断填充）
397                - 背景颜色一定实在背景图片的后边
398             
399             
400             background-repeat 设置背景图片的重复方式
401               可选值：
402                   repeat 双向重复
403                   no-repeat 不重复,有多大就显示多大
404                   repeat-x  横着重复，竖着不重复
405                   repeat-y  竖着不重复，横着重复
406             
407             
408             background-position 设定图片的显示位置
409                 可选值： top left center bottmo right
410                 也可以使用偏移量 一个水平 一个垂直 。 可以指定正值和负值
411             
412             
413             background-attachment用来设置背景图片是否随页面一起滚动
414                scroll 默认值 滚动
415                fixed 固定在某一位置 不随页面滚动 背景图片永远相对于浏览器窗口进行布置，这个属性值一般只会设置个body元素，其他的基本不用
416         -->
417         
418         
419         <!--  ==========  -->
420         <!--  = 表格 =  -->
421         <!--  ==========  -->
422         <!--
423             
424             table表格  colspan 横向合并单元格
425                       rowspan 列合并
426                       border-spacing 表格和单元格之间的距离
427                       border-collapse 设置表格边框合并 如果设置了这个边框合并，border-spacing不起作用
428                       th 表头
429             提供了三个子标签来设置长标签 thead tbody tfoot 表示不同的主题，这三个是固定位置显示，可以不顺序写
430             如果没有写tbody，会自动把tr放到tbody中
431         -->
432        
433         
434         
435         <!--  ==========  -->
436         <!--  = 表单 =  -->
437         <!--  ==========  -->
438         <!--
439             使用fieldset来为表单项进行分组，使用legend来指定组名
440             <fieldset>
441                 <legend>
442                     
443                 </legend>
444             </fieldset>
445             
446             input类型   【输入框是通过name来提价数据到服务器端的，name是必不可少的】
447             注意：
448                 1.像不需要用户去填的但是用户去选择的，必须写上value值，提交到服务器
449                 2.如果在单选或者多选希望选中默认值，可以使用checked=“checked”来设置选中
450                 3.在select中的option中添加selected=”selected“
451                 4.input 的placeholder提示文字，IE8及以下不支持，需要用js代码设置
452                 5.在IE6中，input的背景图片会滚动，在IE6中单独使用attachment=fixed，其他浏览器不用这么设置
453                 
454                      text
455                      password
456                      radio 单选按钮 ，name必须相同实现单选
457                      checkbox 多选框  name必须相同 value必须指定
458                      select 
459                                     下拉列表  使用option来设置列表项，在select中添加一个multiple可以设置多选。  name属性需要指定给select， value指定给option
460                                      在select中可以使用optgroup对选项进行分组，label设置组名
461                     textarea 多行文本框
462                     button
463                     submit
464                     reset
465             button类型
466                 submit
467                 reset
468                 button
469             label标签 选中提示名 需要一个for属性，指定一个表单项的id
470                 例如 <label for="myId">username</label> 
471                   <input id="myId" type="text" name="username" />
472             
473         -->
474         
475         <!--  ==========  -->
476         <!--  = 框架集 =  -->
477         <!--  ==========  -->
478         <!--
479             
480             框架集和内联框架的作用相似，都是作用于一个页面中引入其他的外部的页面
481             框架集可以引入多个页面，而内联框架只能引入一个
482             
483             使用一个frameset来创建一个框架集 frameset和body不能同时使用
484             属性：
485                 rows 指定框架集中的所有的框架，一行一行的排列 
486                 cols 列排列
487                 这连个属性必须选择一个，指定框架占的比例
488                 框架集中也可以嵌套框架集
489                  他里卖的内容是不会被搜索引擎检索的，整个页面只能引用别的页面
490                  引入一个页面，就会发送一个请求，用户体验较差
491                  如果非要使用建议使用frameset 不建议使用iframe 
492             <frameset>
493                 <frame src="url"/>
494             </frameset>
495             
496         -->
497         
498         <!--  ==========  -->
499         <!--  = 实现有选择性的执行css和js代码 =  -->
500         <!--  ==========  -->
501         <!--
502             使用这个代码，可以选择性的在IE中执行，IE10及以上版本不支持这个代码
503             条件hack
504             <!--[if IE]>
505             
506              <![endif]-->
507             <!--可以这样设置
508                if lt IE 8  表示小于IE8版本的都会执行
509                if ！ IE 8 不是IE8的都会执行
510                if IE 8 等于
511                if ht IE 8大于
512                
513                [if IE 6]>
514                 
515                    在body最后写js代码
516                  解决IE6不支持png24，修复图片-->
517                
518         <script type="text/javascript" src="js/DD_belatedPNG_0.0.8a-min.js"></script>
519         <script type="text/javascript">
520             DD_belatedPNG.fix("要修复的元素选择器，另一个选择器");
521         </script>
522             -->
523           
524              
525              
526              
527              
528              
529              
530              
531              
532         <!--属性hack
533             在属性前面添加符号，可以在IE版本中有选择性的执行
534                _ 下划线 只有在IE6及版本以下才执行
535                * 星号 只在IE7及以下执行
536         在选择器前加 *html 只有IE６才能识别
537         -->
538                
539          <!--  ==========  -->
540         <!--  = 实战经验 =  -->
541         <!--  ==========  -->
542         <!--
543             一
544             设置按钮效果，使用背景图片设置按钮，设置背景的位置时，表示按钮的状态
545                图片整合技术（css-sprite），把多张图片整合成一张图片，然后设置图片的位置，显示其中的不同图片
546               优点：
547                  1. 浏览器只需要发送一次请求，加载多个图片。
548                        提高用户体验
549                  2. 图片整合为一张图片，提高了请求的速度， 减小了图片大小
550                  
551             IE6中队png24支持度不高
552               如果使用的图片格式是png24，会导致透明效果消失
553               解决方案，
554               1.可以把png24改为png8
555               2.使用js代码来解决该问题
556                   <script type="text/javascript" src="js/DD_belatedPNG_0.0.8a-min.js"></script>
557                   <script type="text/javascript">
558                   DD_belatedPNG.fix("要修复的元素选择器，另一个选择器");
559                   </script>
560             二，
561             每个浏览器设置空格的效果不大一样，这个需要注意
562             三，
563             设置pointer-events：none，可以让本元素丧失掉焦点。下级元素不会被遮挡事件处理
564         -->
565