一些关于html和css的常见面试题

1.XHTML和HTML有什么区别

• HTML是一种基本的WEB网页设计语言，XHTML是一个基于XMl的置标语言
• 最主要的不同
• XHTML元素必须被正确地嵌套。
• XHTML元素必须被关闭
• 标签名必须用小写字母
• XHTMl文档必须拥有根元素

2.什么是语义化的HTML？

• 直观的认识标签对于搜索引擎的抓取有好处，用正确的标签做正确的事情！
• HTML语义化就是让页面的内容结构化，便于对浏览器，搜索引擎解析；
• 在没有样式css情况下也以一种文档格式显示，并且是容易阅读。搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于SEO。
• 在阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

3.常见的浏览器内核有哪些？

• Trident内核：IE,MaxThon,TT,The Word,360,搜狗浏览器等。[又称为MSHTML]
• Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等；
• Presto内核：Opera7及以上。[Opera内核原为：Presto，现为：Blink]
• Webkit内核：Safari,Chrome等。[Chrome的:Blink(Webkit的分支)]

• 3(1).常见哪几种浏览器测试？有哪些内核（Layout Engine）？

  • 浏览器：IE、Chrome、FireFox、Safari、Opera
  • 内核：Trident、Gecko、Presto、Webkit

  4.请描述一下cookies,sessionStorage（会话存储）和localStrorage（本地存储）的区别？

  • cookie在浏览器和服务器间来回传递。sessionStorage和localStorage不会；
  • sessionStorage和localStorage的存储空间更大；
  • sessionStorage和localStorage有更多丰富易用的接口；
  • sessionStorage和localStorage各自独立的存储空间；

    4、（1）请描述一下cookies、sessionStorage和localStorage区别？

  • cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）。
  • cookie数据始终在同源的http请求中携带（即使不需要），即会在浏览器和服务器间来回传递。
  • sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存
    存储大小：
  • cookie数据大小不能超过4K。
  • sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
    有期时间：
  • localStorage：存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
  • sessionStorage：数据在当前浏览器窗口关闭后自动删除
  • cookie：设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

5、px、em、rem的区别？

• 1、px像素。绝对单位，像素px是相对于显示器屏幕分辨率而言的，是一个虚拟单位。是计算机系统的数字化图像长度单位，如果px要换算成物理长度，需要指定精度DPI。
• 2、em是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对浏览器的默认字体尺寸。它会继承父级元素的字体大小，因此并不是一个固定的值。
• rem是CSS3新增的一个相对单位(root em,根em),使用rem为元素设定字体大小事，仍然是相对大小但相对的只是HTML根元素。
• 4、区别：IE无法调用那些使用px作为单位的字体大小，而em和rem可以缩放，rem相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器已支持rem。

6、CSS3新特性有哪些？

• 1、颜色：新增RGBA、HSLA模式
• 2、文字阴影(text-shadow)
• 3、边框：圆角（border-radius）边框阴影：box-shadow
• 4、盒子模型：box-sizing
• 5、背景：background-size设置背景图片的尺寸，background-origin设置背景图片的原点，background-clip设置背景图片的裁剪区域，以“，”分隔可以设置多背景，用于自适应布局
• 6、渐变：linear-gradient、radial-gradient
• 7、过渡：transition可实现动画
• 8、自定义动画
• 9、在CSS3中唯一引入的伪元素是::selection
• 10、多媒体查询、多栏布局
• 11、border-image
• 12、2D转换：transform:translate(x,y)rotate(x,y)skew(x,y)scale(x,y)
• 13、3D转换