前端面试题 - (1)HTML5 CSS3

1. 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);//
   旋转,缩放,定位,倾斜
3. 增加了更多的 CSS 选择器 多背景 rgba
4. 在 CSS3 中唯一引入的伪元素是 ::selection.
5. 媒体查询，多栏布局
6. border-image

2. html5 有哪些新特性、移除了那些元素？如何处理 HTML5 新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？

新特性：

1. 拖拽释放(Drag and drop) API
2. 语义化更好的内容标签（header,nav,footer,aside,article,section）
3. 音频、视频 API(audio,video)
4. 画布(Canvas) API
5. 地理(Geolocation) API
6. 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
7. sessionStorage 的数据在浏览器关闭后自动删除
8. 表单控件，calendar、date、time、email、url、search
9. 新的技术 webworker, websocket, Geolocation

移除的元素：

1. 纯表现的元素：basefont，big，center，font, s，strike，tt，u；
2. 对可用性产生负面影响的元素：frame，frameset，noframes；
   支持 HTML5 新标签：
3. IE8/IE7/IE6 支持通过 document.createElement 方法产生的标签，可以利用这一特性
   让这些浏览器支持 HTML5 新标签，浏览器支持新标签后，还需要添加标签默认的样式
   （当然最好的方式是直接使用成熟的框架、使用最多的是 html5shim 框架）：

如何区分：

DOCTYPE 声明新增的结构元素、功能元素

3. 本地存储（Local Storage ）和 cookies（储存在用户本地终端上的数据）之间的区别是什么？

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

4. 如何实现浏览器内多个标签页之间的通信?

调用 localstorge、cookies 等本地存储方式

5. 你如何对网站的文件和资源进行优化？

文件合并
文件最小化/文件压缩
使用 CDN 托管
缓存的使用

6. 什么是响应式设计？

它是关于网页制作的过程中让不同的设备有不同的尺寸和不同的功能。响应式设计是让所
有的人能在这些设备上让网站运行正常

7. 新的 HTML5 文档类型和字符集是？

答：HTML5 文档类型：
HTML5 使用的编码

8. HTML5 Canvas 元素有什么用？

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

9. HTML5 存储类型有什么区别？

答：Media API、Text Track API、Application Cache API、User Interaction、Data
Transfer API、Command API、Constraint Validation API、History API

10. 用 H5+CSS3 解决下导航栏最后一项掉下来的问题

可以使用 nth-last-child(1) 或者 nth-last-of-type(1) 找到最后一项子元素 去掉他的margin右边距 这要就不会被挤下去

11. CSS3 新增伪类有那些？

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

元素的每个

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

元素的每个

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

元素的每个

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

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

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

12. 请用 CSS 实现：一个矩形内容，有投影，有圆角，hover 状态慢慢变透明。

宽高 300px 200px 背景颜色 ： #000 给边框 border:1px solid #000 给圆角 border-radius: 10px hover状态时 透明度变为 opacity:0 设置动画时间

.div{
width:200px;
height:300px;
background:'#000'; //设置黑的块
border:1px solid '#000'; //设置边框
border-radius:10px; //设置圆角
}
@keyframes toradius{
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
div:hover {
  animation-name: toradius;
}

13. 描述下 CSS3 里实现元素动画的方法

参考上题
动画相关属性的熟悉程度

14. html5\CSS3 有哪些新特性、移除了那些元素？如何处理 HTML5 新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？

HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，地理定位等功能的
增加。

• 绘画 canvas 元素
  用于媒介回放的 video 和 audio 元素
  本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
  sessionStorage 的数据在浏览器关闭后自动删除
  语意化更好的内容元素，比如 article、footer、header、nav、section
  表单控件，calendar、date、time、email、url、search
  CSS3 实现圆角，阴影，对文字加特效，增加了更多的 CSS 选择器 多背景 rgba
  新的技术 webworker, websockt, Geolocation
  移除的元素
  纯表现的元素：basefont，big，center，font, s，strike，tt，u；
  对可用性产生负面影响的元素：frame，frameset，noframes；
• 是 IE8/IE7/IE6 支持通过 document.createElement 方法产生的标签，
  可以利用这一特性让这些浏览器支持 HTML5 新标签，
  浏览器支持新标签后，还需要添加标签默认的样式：
• 当然最好的方式是直接使用成熟的框架、使用最多的是 html5shim 框架

15. 你怎么来实现页面设计图，你认为前端应该如何高质量完成工作? 一个满屏 品 字布局 如何设计?

• 首先划分成头部、body、脚部；。。。。。
• 实现效果图是最基本的工作，精确到 2px；与设计师，产品经理的沟通和项目的参与，做好的页面结构，页面重构和用户体验，处理 hack，兼容、写出优美的代码格式， 针对服务器的优化、拥抱 HTML5。

16. 你能描述一下渐进增强和优雅降级之间的不同吗?

• 渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基
  本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户
  体验。
• 优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览
  器进行兼容。
• 区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是
  从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级
  （功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。
• “优雅降级”观点：
  “优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，并把测试对象限定为主流浏览器（如 IE、Mozilla 等）的前一个版本。
  在这种设计范例下，旧版的浏览器被认为仅能提供“简陋却无妨 (poor, but passable)” 的浏览体验。你可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较大的错误之外，其它的差异将被直接忽略。
• “渐进增强”观点：
  “渐进增强”观点则认为应关注于内容本身。
  内容是我们建立网站的诱因。有的网站展示它，有的则收集它，有的寻求，有的操
  作，还有的网站甚至会包含以上的种种，但相同点是它们全都涉及到内容。这使得“渐进
  增强”成为一种更为合理的设计范例。这也是它立即被 Yahoo! 所采纳并用以构建其“分
  级式浏览器支持 (Graded Browser Support)”策略的原因所在。
  那么问题了。现在产品经理看到 IE6,7,8 网页效果相对高版本现代浏览器少了很多圆
  角，阴影（CSS3），要求兼容（使用图片背景，放弃 CSS3），你会如何说服他？

17. 为什么利用多个域名来存储网站资源会更有效？

CDN 缓存更方便
突破浏览器并发限制
节约 cookie 带宽
节约主域名的连接数，优化页面响应速度
防止不必要的安全问题
出现突发事件不至于全盘崩溃

18. 请谈一下你对网页标准和标准制定机构重要性的理解。

（无标准答案）网页标准和标准制定机构都是为了能让 web 发展的更‘健康’，开发
者遵循统一的标准，降低开发难度，开发成本，SEO 也会更好做，也不会因为滥用代码导
致各种 BUG、安全问题，最终提高网站易用性。

19. 请描述一下 cookies，sessionStorage 和 localStorage 的区别？

• sessionStorage 用于本地存储一个会话（session）中的数据，这些数据只有在同一
  个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此 sessionStorage 不是
  一种持久化的本地存储，仅仅是会话级别的存储。而 localStorage 用于持久化的本地存
  储，除非主动删除数据，否则数据是永远不会过期的。
• web storage 和 cookie 的区别
  Web Storage 的概念和 cookie 相似，区别是它是为了更大容量存储设计的。Cookie
  的大小是受限的，并且每次你请求一个新的页面的时候 Cookie 都会被发送过去，这
  样无形中浪费了带宽，另外 cookie 还需要指定作用域，不可以跨域调用。
  除此之外，Web Storage 拥有 setItem,getItem,removeItem,clear 等方法，不像
  cookie 需要前端开发者自己封装 setCookie，getCookie。但是 Cookie 也是不可以
  或缺的：Cookie 的作用是与服务器进行交互，作为 HTTP 规范的一部分而存在 ，而
  Web Storage 仅仅是为了在本地“存储”数据而生。

20. 知道 css 有个 content 属性吗？有什么作用？有什么应用？

知道。css 的 content 属性专门应用在 before/after 伪元素上，用来插入生成内容。
最常见的应用是利用伪类清除浮动。

//一种常见利用伪类清除浮动的代码
.clearfix:after {
 content:"."; //这里利用到了 content 属性
 display:block;
 height:0;
 visibility:hidden;
 clear:both; 
}
.clearfix {
 *zoom:1;
}

after 伪元素通过 content 在元素的后面生成了内容为一个点的块级素，再利用
clear:both 清除浮动。
那么问题继续还有，知道 css 计数器（序列数字字符自动递增）吗？如何通过
css content 属性实现 css 计数器？
答案：css 计数器是通过设置 counter-reset 、counter-increment 两个属性 、
及 counter()/counters()一个方法配合 after / before 伪类实现。

21. 如何在 HTML5 页面中嵌入音频?

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

22. 如何在 HTML5 页面中嵌入视频？

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

23. HTML5 引入什么新的表单属性？

Datalist datetime output keygen date month week time number range
emailurl

24.(写)描述一段语义的 html 代码吧。

（HTML5 中新增加的很多标签（如：

、

、

和

等）
就是基于语义化设计原则）
< div id="header">
< h1>标题< /h1>
< h2>专注 Web 前端技术< /h2>
< /div>
语义 HTML 具有以下特性：
文字包裹在元素中，用以反映内容。例如：
段落包含在

元素中。
顺序表包含在

元素中。
从其他来源引用的大型文字块包含在

元素中。
HTML 元素不能用作语义用途以外的其他目的。例如：


包含标题，但并非用于放大文本。


包含大段引述，但并非用于文本缩进。
空白段落元素 (

) 并非用于跳行。
文本并不直接包含任何样式信息。例如：
不使用 或 等格式标记。
类或 ID 中不引用颜色或位置。

25. cookie 在 浏 览 器 和 服 务 器 间 来 回 传 递 。 sessionStorage 和localStorage 区别

sessionStorage 和 localStorage 的存储空间更大；
sessionStorage 和 localStorage 有更多丰富易用的接口；
sessionStorage 和 localStorage 各自独立的存储空间；

26. 如何区分： DOCTYPE 声明\新增的结构元素\功能元素,语义化的理解？

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

27. HTML5 的离线储存？

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

28. HTML5 和 CSS3 的新标签

HTML5： nav, footer, header, section, hgroup, video, time, canvas, audio...
CSS3: RGBA, opacity, text-shadow, box-shadow, border-radius, border-image,
border-color, transform...;

29. 自己对标签语义化的理解

在我看来，语义化就是比如说一个段落， 那么我们就应该用

标签来修饰，标题就应该用 标签等。符合文档语义的标签。