Html面试题

w3c 规范

1. 结构化标准语言
2. 样式标准语言
3. 行为标准语言

如何理解HTML语义化的?

1. 使用正确的标签做正确的事情。
2. html 语义化让页面的内容结构化，结构清晰，便于对浏览器、搜索引擎解析，有利于开发者阅读。
3. 有利于搜索引擎的爬取，有利于seo

iframe 框架有那些优缺点？

优点：

iframe 能够原封不动的把嵌入的网页展现出来。
如果有多个网页引用 iframe，那么你只需要修改 iframe 的内容，就可以实现调用的每一个页面内容的更改，方便快捷。
网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用 iframe 来嵌套，可以增加代码的可重用。
如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由 iframe 来解决。

缺点：

框架结构中出现各种滚动条
iframe 会阻塞主页面的 Onload 事件
搜索引擎的检索程序无法解读这种页面，不利于 SEO
iframe 和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。

img 上 title 与 alt

答案：title 鼠标放到图片上展示的信息、alt 图片不显示时显示的文字

Viewport 属性值

1. width 设置 layout viewport 的宽度，为一个正整数，或字符串"width-device"
2. initial-scale 设置页面的初始缩放值，为一个数字，可以带小数
3. minimum-scale 允许用户的最小缩放值，为一个数字，可以带小数
4. maximum-scale 允许用户的最大缩放值，为一个数字，可以带小数
5. height 设置 layout viewport 的高度，这个属性对我们并不重要，很少使用
6. user-scalable 是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes 代表允许这些属性可以同时使用，也可以单独使用或混合使用，多个属性同时使用时用逗号隔开就行了。

html 常见兼容性问题

双边距 BUG float 引起的，

解决办法: 使用 display：inline解决

3像素问题 使用 float 引起的

解决办法: 使用 dislpay:inline -3px

超链接 hover 点击后失效

 解决办法: 使用正确的书写顺序 link visited hover active

Ie z-index 问题

解决办法: 给父级添加 position:relative

Png 透明

解决办法: 使用 js 代码

Min-height 最小高度

解决办法: ！Important 解决

select 在 ie6 下遮盖

解决办法: 使用 iframe 嵌套

为什么没有办法定义 1px 左右的宽度容器

解决办法: （IE6 默认的行高造成的，使用 over:hidden,zoom:0.08 line-height:1px）

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

渐进增强：

针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

（一开始保证最基本的功能，再改进和追加功能）

优雅降级：

一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

（一开始就构建完整的功能，再针对低版本浏览器进行兼容。）

区别：

优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。

Canvas 和 SVG 有什么区别？

Canvas 和 SVG 都允许在浏览器中创建图形，但是它们在根本上是不同的。

Canvas

• 依赖分辨率
• 不支持事件处理器
• 弱的文本渲染能力
• 能够以 .png 或 .jpg 格式保存结果图像

• 最适合图像密集型的游戏，其中的许多对象会被频繁重绘

  SVG

• 不依赖分辨率
• 支持事件处理器
• 最适合带有大型渲染区域的应用程序（比如谷歌地图）
• 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
• 不适合游戏应用