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