html&css复习题(参考答案)

1. 常用的块属性标签及特征有哪些？ 
常用块标签：Div  h1~ h6  ol ul li  dl td dd  table tr th td  p  br  form 块标签特征：独占一行，换行显示，可以设置宽高，块可以套块和行 
2. 常用的行内属性标签及特征有哪些？ 
行标签：span  a  img  var  em  strong  textarea select option  input 行标签特征：在行内显示，内容撑开宽高，不可以设置宽高（img ,input除外），    行只能套行标签 
3. SEO重视的标签有哪些? 
<title>、<strong>、h1~h3、<a>、<em>、<img>&alt等

4. HTML静态页面出现中文乱码如何解决？ 在head里加入<meta charset=’utf-8’/> 并且保存文件时编码格式也选择utf-8编码

5. 下列标签既是行内属性标签又可以设宽高的标签是？( C D )

A. var   B. table   C. input   D. img   E. form

6. css选择器有几种，及各自的书写方式？（举例说明） ID选择器，举例：#div1{}    类选择器，举例：.div1{} 标签选择器，举例：div{}   后代选择器，举例：.div1  p{} 群组选择器，举例：#div1,.div2,.div3 p,#div4 ul li{}

7. 简单说说你对“盒模型”这个概念的理解，以及它都涉及到哪些css属性？ 
在css布局中，每一个html元素在浏览器中的解析都可以被看 作一个盒子，拥有盒子一样的外形和平面空间 它由margin、border、padding、content四部分组成 涉及到的CSS属性有：margin、border、padding、display

8. div1里依次有div2和div3两个同级元素， div2高20px, margin-bottom：30px； 
div3高50px，margin-top：20px； 那么div1的高度是多少？ 20px + 50px + 30px = 100px 
本题考点：margin横向上是相加，但在竖向上却会产生叠加的现象,并会取上下间距的其大者生效 
9. A标签的伪类有哪些，都是什么意思，及书写顺序？ link：有链接属性时     visited：链接地址已被访问过 hover ：鼠标悬停在上面    active：被用户激活时 书写顺序：l  v  h  a   ( love  hate ) 
10. 有一个div宽是1000px，如何让它在浏览器里达到居中，并且左右自适应？ 
div{width:1000px; margin:0 auto;} 11. 常用的调试工具有哪些？ 
谷歌的审查元素、火狐的firebug、IE开发者工具F12等 12. 分别说出float对块属性及行内属性标签的影响是什么？ 对块属性标签的影响：可以使块属性元素并排排列，在没有设置宽高的情况下浮动后，内容撑开宽度高度 
对行属性标签的影响：float之后能设置width和height属性，并支持margin和padding属性 
13. 写出兼容IE及其他主流浏览器的CSS半透明设置？ div{opacity:0.5; fiter:alpha(opacity=50);}

14. 写出常见的CSS兼容性问题？（列举至少4个） 1.不同浏览器的标签默认的margin 和padding差异; 2.图片之间默认有间距; 3.不透明度; 
4.图片有链接时的边框问题； 5.双倍margin bug 6. ...  
15. CSS position属性的常用值有哪些？分别是什么意思？ Position:relative; 相对定位（通常用在父级） Position:absolute; 绝对定位（通常用在子级） Position:fixed; 固定定位(相对于浏览器窗口)  
16. 以下的CSS hack设置分别适用于哪个浏览器？ _background-color:green;  IE6适用 *+background-color:pink;  IE7适用 *background-color:black;  IE6、IE7适用 
针对不同的浏览器或不同版本浏览器而写特定的CSS样式，叫做CSS hack

17. html的书写规范有哪些？ 
标签换行写法；  标签需要关闭；  特殊字符用编码； 标签缩进；  标签用英文小写；  注释；  合理嵌套；

1、doctype是一种标准通用标记语言的文档声明类型，它的目的就是告诉标准通用标记语言解析器，应该使用什么样的文档类型定义。
2、标准模式与怪异模式区别：
主要在于盒模型。标准模式中，浏览器根据规范呈现页面，混杂模式中页面则以一种比较宽松的向后兼容的方式显示。
3、link与@import区别：
区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务； @import属于CSS范畴，只能加载CSS。
区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全 载入以后加载。
区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本 的浏览器不支持。
区别4：ink支持使用Javascript控制DOM去改变样式；而@import不支持。
4、盒模型：盒模型指在css布局中，html中的每个元素在浏览器中的解析都可以被看作一个盒子，拥有盒子一样的外形和平面空间。盒模型属性。。。
5、css中哪些属性可以继承：
所有元素可继承：visibility和cursor。
内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform、direction。
块状元素可继承：text-indent和text-align。
列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。
表格元素可继承：border-collapse。
6、如何居中一个浮动元素？百分比外边距，相对定位一半自身的宽度负值。
7、css3新特性：1、增加了许多新的选择器，比如兄弟选择器，子元素选择器，属性选择器等，方便布局。2，还有一些特殊效果，例如圆角边框，多彩边框，图像边框，文本阴影和阴影等。3、还有渐变，蒙版，倒影。4，还有一些特殊效果，比如动画，过渡，旋转，缩放等5、还可以进行响应式布局，弹性布局等，以及媒体查询。
8、媒体查询：使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。
@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置响应式设计的页面，@media 是非常有用的。
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。媒体类型：mediatype
all 用于所有设备
screen 用于电脑屏幕，平板电脑，智能手机等
。关键字：and|not|only
and 用来连接条件，然后括号里就是一个媒体特征查询语句
not 用来排除某种媒体类型，即用于排除符合表达式的设备
only 用来限定某种媒体类型，可用来排除不支持媒体查询的浏览器。
9、h5本地存储：大小最小5MB，可以申请更大的空间
不会随HTTP请求发送给服务器
非常容易操作
移动端普及高
localStorage与sessionStorage两种localStorage为永久性保存数据，不会随着浏览器的关闭而消失，可以在同域名跨页访问
sessionStorage为临时性保存数据，当页面关闭就会消失。其他一切与localStorage一样

sessionStorage不能跨页面访问，也不会触发跨标签页的storage事件。它只局限在当前的标签页
10、javascript在ie与w3c中的兼容：冒泡，监听，滚轮，阻止默认事件。
11、跨域访问：两个域名之间不能跨过域名来发送请求或者请求数据，否则就是不安全的
12、js如何定义class：构造函数，setAttribute;
13.js如何扩展prototype：创建对象，利用原型拓展对象。
14、css：CSS（cascading Style Sheet 的缩写），可译为层叠样式表或级联样式表，是一组格式设置规则，用于控制 web 页面的外观。
页面内容与表现形式分离
可很好的控制页面的布局
提高网页加载速度降低服务器的成本呈现一致的效果
75、JavaScript是一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，在HTML网页上使用，用来给HTML网页增加动态功能
16、 ajax跨域
1. 可以让服务器去别的网站获取内容然后返回页面
2. 给页面的ajax一个url，ajax把这个url传给服务器，由服务器去访问跨域地址17、GET：
更常用，更方便
性能好
明文发送数据，没有POST安全
传输数据大小有限制：数据通过URL传递，但是URL有一定长度限制。18、POST：
使用相对较少
性能只有GET的1/3左右
比GET稍微安全一点
没有传输数据大小限制

word-6
1: 缩小Javascript和CSS文件
如果你的网站大约有50-60%的用户是第一次访客，那么这些人会下载Javascript和CSS，如果这些文件很大浏览器会下载很长时间。
2：减少HTTP请求
浏览器会花费80%的时间获取外部元件，包括脚本、样式表、图像等，只有20%的时间用来加载内容，每个网站都会有许多HTTP请求，由于只有2个HTTP请求可以在同一时间传送，所以请求一旦过多就会造成延迟。
3：缓存图片、CSS和Javascript
每当一个新用户访问你的网站，图片、CSS和Javascript应该在其浏览器缓存，这样他们下一次访问就特别快。
4：合并CSS引用图片
很多网站的图片都是切成小块的，这样下来就会有大量CSS引用图片,如果我们把CSS图片合并成一个，14个HTTP请求变成1个，想想会是什么效果？它的原理就是通过CSS坐标的方式取得图片径路，每个CSS标签引用不同坐标就会得到不同图片。我们看到很多网站的CSS图片只有一张，用的就是这个原理。
5：只加载<head>部分的基本脚本
这个最简单，不花时间，点击自己网站右键“查看源文件”找到<head>与</head>之间的区域，看看那些不重要好的JS文件，把它仍到页面底部，也就是让它最后加载。或者直接删除。
6：对图像进行压缩
除非你加载视频，那么影响网站速度罪魁祸首应该就是图片了，如果是jpeg、png图片，保证不失品质的前提下，让他们尽量压缩，Fireworks软件“导出向导”功能，它提供了一个很好的方式来预览保存的图像，让图片大小与质量之间平衡，大多数其他图像编辑软件都有类似的功能。