一些HTML+CSS小知识点（1）

1.CSS Sprites
1.简介
CSS Sprites在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许将一个页面涉及到的所有零星图片
都包含到一张大图中， 利用CSS的“background-image”，“background- repeat”，“background-position”的组合
进行背景定位， 访问页面时避免图片载入缓慢的现象。
2.优点
（1）CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这是CSS Sprites最大的优点，
也是其被广泛传播和应用的主要原因；
（2）CSS Sprites能减少图片的字节；
（3）CSS Sprites解决了网页设计师在图片命名上的困扰，只需对一张集合的图片命名，不需要对每一个小图
片进行命名，从而提高了网页制作效率。
（4）CSS Sprites只需要修改一张或少张图片的颜色或样式来改变整个网页的风格。
3.缺点
（1）图片合并麻烦：图片合并时，需要把多张图片有序的合理的合并成一张图片，并留好足够的空间防止版
块出现不必要的背景。
（2）图片适应性差：在高分辨的屏幕下自适应页面，若图片不够宽会出现背景断裂。
（3）图片定位繁琐：开发时需要通过工具测量计算每个背景单元的精确位置。
（4）可维护性差：页面背景需要少许改动，可能要修改部分或整张已合并的图片，进而要改动css。在避免
改动图片的前提下，又只能（最好）往下追加图片，但这样增加了图片字节。

2.Bootstrap 排版、链接样式设置了基本的全局样式。
font-size 设置为 14px，line-height 设置为 1.428。
<p> （段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。

3..text-muted:文字的颜色换成灰色
.text-primary:文字的颜色变成蓝色
.text-success:文字的颜色变成绿色
.text-info:文字的颜色变成暗蓝色
.text-warning:文字颜色变成暗黄色
.text-danger：文字的颜色变成红色

4.HTML5新增的表单元素：
datalist规定输入域的选项列表，通过option创建！
keygen提供一种验证用户的可靠方法，密钥对生成器，私钥存于客户端，公钥发到服务器，用于之后验证客户端证书！
output元素用于不同类型的输出！

5.栅格系统：
会有自动的padding样式
其字体默认为14px
其box-sizing默认为border-box

6.HTML中的标签分为闭合标签和自闭合标签。 自闭合标签有<input/><img/><br/><link/><hr/>等
注意<p></p>不是自闭和标签

7.Bootstrap中：
主要蓝（bg-primary），成功绿（bg-success）、信息蓝（bg-info）、
警告黄（bg-warning）、危险红（bg-danger）都可以给文字加上背景颜色。

8.onchange 事件：Event 对象
定义和用法：onchange 事件会在域的内容改变时发生。
语法
onchange="SomeJavaScriptCode"
参数 描述
SomeJavaScriptCode 必需。规定该事件发生时执行的 JavaScript。
支持该事件的 HTML 标签： <input type="text">, <select>, <textarea>
支持该事件的 JavaScript 对象：fileUpload, select, text, textarea

9.帧元素优先级最高，表单元素总是比非表单元素优先级高,
input属于窗体元素,层级显示比flash低。

10.display属性 :
block :　CSS1 块对象的默认值。将对象强制作为块对象呈递，为对象之后添加新行 可以定义高度和宽度
none :　CSS1 隐藏对象。与 visibility 属性的hidden值不同，其不为被隐藏的对象保留其物理空间
inline :　CSS1 内联对象的默认值。将对象强制作为内联对象呈递，从对象中删除行
inline-block :　IE5.5 将对象呈递为内联对象，但是对象的内容作为块对象呈递。
旁边的内联对象会被呈递在同一行内 inherit: 看display默认是不具备继承性的，
使用inherit可以让其继承父对象的display属性。

11.有两种写法：
document.getElementById("input").style.backgroundColor = "red";
inputElement.style.backgroundColor = "#FF0000";
这两种方法都可以让一个input的背景颜色变成红色

12.一个网页常用<h1>文章标题</h1> 来定义标题，这样方便SEO优化.

13.html语言中加粗的标签有<b>和<strong>,或者使用css设置｛font-weight:bold｝

14.CSS中link和@import的区别:
link属于XHTML标签，而@import完全是CSS提供的一种方式
当一个页面被加载的时候，link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载.
link在支持CSS的浏览器上都支持而@import只在5.0以上的版本有效.
1，@import url（）机制是不同于link的，link是在加载页面前把css加载完毕，而@import url（）则是读取完文件后在加载，所以会出现一开始没有css样式，闪烁一下出现样式后的页面(网速慢的情况下)。
2，@import 是css2里面的，所以古老的ie5不支持。
3，当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。
4，link除了能加载css外还能定义RSS，定义rel连接属性，@import只能加载css

页面中使用CSS的方式主要有3种：
行内添加定义style属性值，
页面头部内嵌调用和外面链接调用，
其中外面引用有两种：link和@import。外部引用CSS两种方式link和@import的方式分别是：
XML/HTML代码
<link rel="stylesheet" rev="stylesheet" href="CSS文件" type="text/css" media="all" />
XML/HTML代码
<style type="text/css" media="screen">
@import url("CSS文件");
</style>
两者都是外部引用CSS的方式，但是存在一定的区别：
区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
区别4：ink支持使用Javascript控制DOM去改变样式；而@import不支持。
补充：@import最优写法
@import的写法一般有下列几种：
@import 'style.css' //Windows IE4/ NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别
@import "style.css" //Windows IE4/ NS4, Macintosh IE4/NS4不识别
@import url(style.css) //Windows NS4, Macintosh NS4不识别
@import url('style.css') //Windows NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别
@import url("style.css") //Windows NS4, Macintosh NS4不识别
由上分析知道，@import url(style.css) 和@import url("style.css")是最优的选择，兼容的浏览器最多。
从字节优化的角度来看@import url(style.css)最值得推荐。

15.background-attachment :定义背景图片随滚动轴的移动方式
取值: scroll | fixed | inherit
scroll: 随着页面的滚动轴背景图片将移动
fixed: 随着页面的滚动轴背景图片不会移动
inherit: 继承初始值: scroll
继承性: 否
适用于: 所有元素
background-origin 属性规定 background-position 属性相对于什么位置来定位。
background-clip 属性规定背景的绘制区域。

16.有一个元素，需要在pc端显示而在手机端隐藏，需要使用的方法是visible-md-8 hidden-xs
栅格选项
bootstrap3.x使用了四种栅格选项来形成栅格系统，这里跟大家详解一下四种栅格选项之间的区别， 其实区别只有一条就是适合不同尺寸的屏幕设备 。我们看class前缀这一项，我们姑且以前缀命名这四种栅格选项，他们分别是col-xs、col-sm、col-md、col-lg，我们懂英文的就知道，lg是large的缩写，md是mid的缩写，sm是small的缩写，xs是extremely small的缩写。
mobile – xs ( <768px )
tablet – sm ( 768~991px )
desktop – md ( 992~1170px )
large desktop – lg ( >1170px )

17.img标签中的alt属性的作用是提供替代图片的信息，使屏幕阅读器能获取到关于图片的信息。
alt=“ ”里面放图片的描述信息，有时候网络问题图片显示不出来，可以显示该文字信息替代图片

18.Internet Explorer 9+ 支持 border-radius 和 box-shadow 属性。
Firefox 、 Chrome 以及 Safari 支持所有新的边框属性。
注释：对于 border-image ， Safari 5 以及更老的版本需要前缀 -webkit- 。
Opera 支持 border-radius 和 box-shadow 属性，但是对于 border-image 需要前缀 -o-

19.关于IE、FF，CSS的解释区别描述：
火狐浏览器中，非float的div前面有同一父级的float的div，此div若有背景图，要使用clear：both，才能显示背景图，而IE6.0中不用使用clear：both。
在[text-decoration:underline]的属性下，IE6.0显示的下划线会比FireFox低一点。在FireFox中，部分笔画会在下划线的下面1个象素左右。

20.为<table>标签添加.table类可以给表格添加水平分割线；
为表格添加table-bordered类可为表格中每个元素增加边框；
为表格添加table-hover类可为表格中增加鼠标悬停样式； <br/>
bootstrap
.table 为任意 <table> 添加基本样式 (只有横向分隔线)
.table-striped 在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持)
.table-bordered 为所有表格的单元格添加边框
.table-hover 在 <tbody> 内的任一行启用鼠标悬停状态
.table-condensed 让表格更加紧凑

21.常用的页面的图片格式有三种，GIF、JPG、PNG。 GIF 意为Graphics Interchange format（图形交换格式）； JPEG 代表Joint Photograhic Experts Group（联合图像专家组），这种格式经常写成JPG，JPG图片的扩展名为jpg；流式网络图形格式(Portable Network Graphic Format，PNG)名称来源于非官方的“PNG's Not GIF”，是一种位图文件(bitmap file)存储格式，读成“ping”。PNG用来存储灰度图像时，灰度图像的深度可多到16位，存储彩色图像时，彩色图像的深度可多到48位，并且还可存储多到16位的α通道数据。
标签图像文件格式 （ Tagged Image File Format ，简写为 TIFF ）是一种灵活的 位图 格式，主要用来存储包括照片和艺术图在内的图像。 TIFF文件格式适用于在应用程序之间和计算机平台之间的交换文件，它的出现使得图像数据交换变得简单。 TIFF文件以 .tif 为扩展名。其数据格式是一种3级体系结构，从高到低依次为：文件头、一个或多个称为IFD的包含标记指针的目录和数据。
嵌入在HTML文档中的图像格式可以是:.gif , .bmp , *.jpg.