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{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软件“导出向导”功能,它提供了一个很好的方式来预览保存的图像,让图片大小与质量之间平衡,大多数其他图像编辑软件都有类似的功能。

上山不易,只有坚持才能看到好风光。
原文地址:https://www.cnblogs.com/xuyan1/p/6027218.html