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

    上山不易,只有坚持才能看到好风光。
  • 相关阅读:
    网络与通信面试
    拥塞控制
    POSIX
    操作系统面试
    为什么大家都用变量"i"?
    shape与sprite和movieclip的区别
    AS3之麦克风接口【flash.media.Microphone 类】
    Flex 入门之垃圾回收机理
    Flash Player重绘
    时间效率,Timer和EnterFrame在FP 10.1之后测试和建议
  • 原文地址:https://www.cnblogs.com/xuyan1/p/6027218.html
Copyright © 2011-2022 走看看