前端面试知识点汇总 - HTML

一、HTML5新特性

　　1、语义化标签 - 为页面提供更好的界面结构

　　　　header - 头部

　　　　footer - 尾部

　　　　nav - 导航

　　　　section - 段落

　　　　article - 独立内容

　　　　aside - 侧边栏

　　　　command - 命令按钮

　　　　details - 标题

　　　　dialog - 对话框

　　2、增强型表单

　　　　1、新的表单类型 type = 

　　　　　　color - 颜色

　　　　　　date - 日期

　　　　　　datetime - 日期

　　　　　　datetime-local - 日期和时间

　　　　　　email - 邮箱

　　　　　　month - 月份

　　　　　　number - 数值

　　　　　　range - 数值范围

　　　　　　search - 搜索

　　　　　　tel - 电话

　　　　　　time - 时间

　　　　　　url - 链接

　　　　　　week - 周

　　　　2、新的表单属性

　　　　　　placehoder - string - 默认提示值

　　　　　　required - boolean - 输入值不能为空

　　　　　　pattern - 正则表达式 - 验证input的值

　　　　　　min和max -  number - 设置元素最大值和最小值

　　　　　   step - number - 数值间隔

　　　　　　autofocus - boolean - 自动获取焦点

　　　　　　multiple - boolean - input可选择多个值

　　3、音频和视频

　　　　音频 audio

　　　　　　<audio controls>

　　　　　　　　<source src="xxx.ogg" type="audio/ogg">

　　　　　　　　<source src="xxx.mp3" type="audio/mpeg">

　　　　　　　　您的浏览器不支持audio元素

　　　　　　</audio>

 

　　　　视频 video

　　　　　　<video controls>

　　　　　　　　<source src="xxx.mp4" type="video/mp4">

　　　　　　　　<source src="xxx.ogg" type="video/ogg">

　　　　　　　　您的浏览器不支持video元素

　　　　　　</video>

　　4、canvas绘图

　　　　标签只是图形容器，绘图必须使用js。

　　5、SVG

　　　　基于XML描述的可伸缩的矢量图形

　　6、地理定位 Geolocation

　　7、拖放API

　　8、Web Storage

　　　　localStorage、sessionStorage

　　9、WebSocket

二、浏览器的标准模式和怪异模式 - 解析css

　　标准模式 - 浏览器按照W3C标准解析执行代码，拥有DOCTYPE声明

　　怪异模式 - 使用浏览器自身的方式解析代码，不太浏览器解析方式不一样

　　常见区别：

　　　　盒模型的处理差异：标准CSS盒模型的宽和高等于内容区的高度和宽度，不包含内边距和边框

　　　　行内元素的垂直对齐：标准模式下，图片是基线对齐的。而怪异模式对齐至盒子的下边框

三、xhtml、html、html5

　　html：超文本标记语言

　　xhtml：可拓展超文本标记语言，语法更加严格

　　html5：h5 ≈ html + css3 + js + API

四、meta

　　meta标签是HTML标记HEAD区的一个关键标签，提供文档字符集、使用语言、作者等基本信息，以及对关键词和网页等级的设定等，最大的作用是能够做搜索引擎优化（SEO）。

　　PS：便于搜索引擎机器人查找、分类，互联网应用应该要注意。