前端面试题集锦——HTML5/CSS3

HTML5/CSS3目录

      • CSS3 有哪些新特性
      • 本地存储(Local Storage )和 cookies(储存在用户本地终端上的数据)之间的区别是什么
      • 什么是响应式设计
      • HTML5 Canvas 元素有什么用
      • CSS3 新增伪类有那些?
      • 如何在 HTML5 页面中嵌入音频
      • 如何在 HTML5 页面中嵌入视频
      • HTML5 引入什么新的表单属性
      • HTML5 的离线储存
      • HTML5 和 CSS3 的新标签
      • 自己对标签语义化的理解

CSS3 有哪些新特性

  1. CSS3 实现圆角(border-radius),阴影(box-shadow),
  2. 对文字加特效(text-shadow、),线性渐变(gradient),旋转(transform)
  3. transform:rotate(9deg),scale(0.85,0.90),translate(0px,-30px),skew(-9deg,0deg);旋转,缩放,定位,倾斜
  4. 增加了更多的 CSS 选择器 多背景 rgba
  5. 在 CSS3 中唯一引入的伪元素是 ::selection.
  6. 媒体查询,多栏布局
  7. border-image

本地存储(Local Storage )和 cookies(储存在用户本地终端上的数据)之间的区别是什么

Cookies:服务器和客户端都可以访问;大小只有 4KB 左右;有有效期,过期后将会删除;
本地存储:只有本地浏览器端可访问数据,服务器不能访问本地存储直到故意通过 POST 或者 GET 的通道发送到服务器;每个域 5MB;没有过期数据,它将保留直到用户从浏览器清除或者使用 Javascript 代码移除

什么是响应式设计

低成本实现一套代码一个网页在多终端多设备下访问达到一定用户体验的开发方式。其布局会根据终端情况自适应调整达到一定水平的用户体验

HTML5 Canvas 元素有什么用

Canvas 元素用于在网页上绘制图形,该元素标签强大之处在于可以直接在 HTML 上进行图形操作

CSS3 新增伪类有那些?

p:first-of-type 选择属于其父元素的首个

元素的每个

元素

p:last-of-type 选择属于其父元素的最后

元素的每个

元素

p:last-of-type 选择属于其父元素的最后

元素的每个

元素

p:only-of-type 选择属于其父元素唯一的

元素的每个

元素

p:only-child 选择属于其父元素的唯一子元素的每个

元素

p:nth-child(2) 选择属于其父元素的第二个子元素的每个

元素

:enabled、:disabled 控制表单控件的禁用状态
:checked 单选框或复选框被选中

如何在 HTML5 页面中嵌入音频

HTML 5 包含嵌入音频文件的标准方式,支持的格式包括 MP3、Wav 和 Ogg:


如何在 HTML5 页面中嵌入视频

和音频一样,HTML5 定义了嵌入视频的标准方法,支持的格式包括:MP4、WebM 和 Ogg:


HTML5 引入什么新的表单属性

Datalist datetime output keygen date month week time number range emailu

HTML5 的离线储存

localStorage 长期存储数据,浏览器关闭后数据不丢失
sessionStorage 数据在浏览器关闭后自动删除

HTML5 和 CSS3 的新标签

HTML5:

  1. nav
  2. footer
  3. header
  4. section
  5. hgroup
  6. video
  7. time
  8. canvas
  9. audio

CSS3:

  1. RGBA
  2. opacity
  3. text-shadow
  4. box-shadow
  5. border-radius
  6. border-image
  7. border-color
  8. transform

自己对标签语义化的理解

网页使用什么 HTML 标签要看这个元素是什么元素,而不是看这个元素像什么元素。
例如我们用 h2 标签,是因为这个元素是二级标题 ,而不是因为它看起来比较字体比较粗比较大。

你可能感兴趣的:(面试集锦)