HTML常见面试题（包含HTML5）

主流浏览器内核私有属性css前缀

1. webkit内核（safari，chrome） -webkit
2. opera内核（欧朋浏览器） -o
3. Mozilla内核（firefox） -moz
4. trident内核（ie） -ms

默认情况下，使用h1标签会形成什么效果

加粗大号字体

关于HTML语义化，你知道的都有哪些标签

大部分都是语义化标签，header表示头部，footer表示足部，article表示文章区域，h表示标题，p表示段落，address表示地址

常用的块级元素

div，p，h1-h6，ol，ul，dl，table，address，form

常用的行内元素

span，i，br，em，strong，label，q，a

解释一下utf-8和GBK和ISISO8859-2 字符集

• charset用来指定字符编码
• ASCII：只使用1bytes，只保存英文和英文字符
• GBK：使用2bytes，保留中文和繁体字
• IOS8859-2，收集了东欧字符
• Unicode：2bytes，万国码，收集了所有国家的文字字符
• UTF-8：1-3bytes，可变长度的编码

添加样式的四种方式

• 内联样式
• 内部样式<style>
• 外部样式<link rel>
• 导入样式：在.css文件中使用@import url(“其他样式文件”)

onchange、onblur和onfocus

• onchange在元素值改变的时候会被触发。此值适用于input，textarea，select
• onblur在会在对象失去焦点的时候触发，支持的对象有button，checkbox，text，textarea，frame
• onfocus会在获取焦点的时候触发事件

img标签中的alt属性的作用是

提供代替图片的信息

关于置换元素和不可替换元素

• 置换元素：浏览器根据元素的标签和属性来决定要显示的内容，有img，input，textarea，这也是他们能够设置宽高的原因
• 不可替换元素：大多数元素都是这样

HTML元素的显示优先级

帧元素（frameset） > 表单元素 >非表单元素

XHTML

早期html编码不统一，不规范，于是w3c就推出了xhtml，就是xml+html，用xml的要求来规范html，xhtml是更严谨更纯净的html版本

form表单中input元素的readonly与disabled属性描述

• 设置readonly = true，页面上无法修改内容，但是可以通过JavaScript修改,内容会被提交
• 设置disabled = true,无法修改内容，也不会被提交

放在HTML里的哪一部分JavaScripts会在页面加载的时候被执行？

• 在body部分中的JavaScript会在页面加载时执行
• 在head部分中的JavaScript会在页面加载之前被执行，但如果是放在window.onload中的会页面加载完成之后才执行

Web Storage分类 ：Web Storage实际上由两部分组成：

• sessionStorage：用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。
• localStorage：用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

关于比较Ajax与Flash的优缺点

• ajax：易搜索，开放性，费用低，易用性 缺点：可能会破环浏览器的后退功能
• flash：多媒体处理，兼容性，矢量图形 缺点：flash文件会很大

关于HTML<form>标签的enctype属性：

enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码

• application/x-www-form-urlencoded 在发送前编码所有字符（默认）
• multipart/form-data 不对字符编码。 在使用包含文件上传控件的表单时，必须使用该值。
• text/plain 空格转换为 “+” 加号，但不对特殊字符编码。

常见的浏览器端存储的方式

• Cookie:cookie会每次随着http请求头一起发送，无形中增加了网络流量，而且存储的信息容量有限，一般用来存放识别用户的信息
• Flash Share Object：解决了上面两个缺点，而且能够跨浏览器，缺点是要安装Flash插件
• sessionStorage：数据仅在同一个会话中有效，打开新窗口或者页面时就会失效，不支持ie，不能实现数据的永久储存
• localStorage：可持久储存数据，低版本浏览器不支持
• globalStorage：用于firefox2+的浏览器，不支持ie，html5中已经被localstorage代替
• Google Gear：谷歌开发的一种本地存储技术，需要安装Gear组件
• userData：ie浏览器用来存储数据的，容量达640k，方案可靠，不需要安装插件，仅在ie有效

结论：优先使用Flash shareoject，如果不想使用FLash，可以结合userData、globalStorage和localStorage

HTML5新特性

新增的语义化标签有哪些？

header，footer，nav，aside，article，section，main，time

新增input属性有哪些？

number，tel，email，time，week，month，url，range

新增的表单元素有哪些？

datalist（与list配合使用），progress（表示进度条），meter（固定值的标量测量），keygen（用于规定密钥对生成器），output（展示计算结果）

新增的表单属性有哪些？

autofocus，autocomplete，required，placeholder，max/min，list

音视频标签

audio和video

属性：controls，autoplay，可通过source标签指定多个源

canvas和svg的区别

1. canvas是通过JavaScript绘制的2D图像，svg是通过xml描述的2D图形
2. canvas位置发生变化时需要整个推倒重绘，svg属性改变时浏览器能够重现图形
3. canvas依赖分辨率，svg不依赖分辨率，放大或改变尺寸时图形质量不会有损失
4. canvas适合图像密集型游戏，svg不适合游戏

以上大都是个人理解总结，有些可能会用到第一人称进行叙述。大家切记不要死记硬背，可以参考答案，但是要经过自己的理解，遇到不懂的还是要自己去查查资料，最好能将自己理解的内容重新编辑成自己的话写下来，这样等面试官追问的时候也能说出自己的见解。