前端HTML 面试题

HTML面试题

1、HTML 语义化

语义化：用合理、正确的标签来展示内容‘ ，如 form，table 清晰地定义其内容。

优点：

1. 易于用户阅读，样式丢失的时候能让页面呈现清晰的结构
2. 有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重
3. 易于用户阅读，样式丢失的时候能让页面呈现清晰的结构。
4. 有利于开发和维护，语义化更具可读性，代码更好维护，与CSS3关系更和谐。

2、svg和canvas的区别

1. SVG
   特点：html 中绘制；svg绘制出来的每一个图形的元素都是独立的DOM节点，能够方便的绑定事件或用来修改
   适用场景：SVG功能更完善，适合静态图片展示，高保真文档查看和打印的应用场景
2. Canvas
   特点：js绘制；canvas基于像素，输出标量画布，就像一张图片一样，放大会失真或者锯齿，但是支持颜色比svg 多
   适用场景：适合像素处理，动态渲染和大数据量绘制
   参考地址.

3、html5有哪些新特性？

1. 语义化标签
   header,footer,nav，section、article、aside、detailes、summary、dialog
2. canvas 画布
3. 新的媒介元素：audio, video、
4. drag 拖拽、
5. 本地存储 localStorage, sessionStorage、
6. webSocket 长连接、
7. 定位、
8. 新的表单元素：datalist, keygen, output, progress
   新的输入类型：color、date、datetime、datetime-local、email、month、number、range、search、tel、time、url、week
   新的输入属性：autocomplete、autofocus、form、formaction、formenctype、formmethod、formnovalidate、formtarget、height 和 width、list、min 和 max、multiple、pattern (regexp)placeholder、required、step
9. svg 矢量绘图、
10. webWorker 实现js多进程

4、 如何处理HTML5新标签的浏览器兼容问题？

1. 实现标签被识别
   通过document.createElement（tagName）方法即可让浏览器识别新标签，浏览器支持新标签后，还可以为新标签添加CSS样式。
2. JavaScript解决方案

// a) 使用html5shim： 在 head 中调用以下代码：(此文件必须在head标签中调用)
<!--[if lt IE 9]>
  <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->

//b)使用kill IE6  :在body之前调用以下代码：
<!--if lte IE 6]>
  <script src="http://letskillie6.googlecode.com/svn/trunk/letskillie6.zh_CN.pack.js"></script> 
<![endif]-->

5、title 和 alt 属性

1. Alt 属性
   对图片起注释作，图片因为某种原因不能加载时在页面显示的提示信息，它会直接输出在原本加载图片的地方。这样对用户体验也起到了一定的作用
2. title：
   为链接添加描述性文字 ; 内容或者标题显示有限时对内容进行说明或者作为提示信息；鼠标移动上去才显示。

6、HTML全局属性(global attribute)有哪些？

全局属性就是所有元素大家都有的属性了，，，，，最常用到的就是 id ,class ,style ,title ,还有一些html5 新增的全局属性，可参考下文了

参考地址.