HTML相关
1、HTML与XHTML的区别
XHTML 元素必须被正确地嵌套
XHTML 元素必须被关闭，空标签也必须被关闭，如 <br> 必须写成 <br />
XHTML 标签名必须用小写字母
XHTML 文档必须拥有根元素
XHTML 文档要求给所有属性赋一个值
XHTML 要求所有的属性必须用引号""括起来
XHTML 文档需要把所有 < 、>、& 等特殊符号用编码表示
XHTML 文档不要在注释内容中使“--”
XHTML 图片必须有说明文字
XHTML 文档中用id属性代替name属性
2、简述一下你对HTML语义化的理解？
- 用正确的标签做正确的事情。
- html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;
- 即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的;
- 搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于seo;
- 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。
3、<img>标签上title属性与alt属性的区别是什么？
alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明的。且长度必须少于100个英文字符或者用户必须保证替换文字尽可能的短。
这包括那些使用本来就不支持图像显示或者图像显示被关闭的浏览器的用户，视觉障碍的用户和使用屏幕阅读器的用户等。
title属性为设置该属性的元素提供建议性的信息。使用title属性提供非本质的额外信息。
4、引用图片的两种方式：background-image和img
区别：
（1）是否占位
background-image是背景图片，是css的一个样式，不占位。<img/>是一个dom元素，是一个标签，占位。
（2）是否可操作
background-image是只能看的，只能设置background-position、background-repeat这些属性。
<img/>是一个dom对象，是可以操作的，比如更改图片路径，设置位置等。
（3）加载顺序不同
background-image相当于css内容，会等到dom结构加载完成之后才开始加载，而html中的<img/>会在DOM结构加载的过程中加载。所以<img/>的加载会先于background-image的加载。
5、HTML5 为什么只需要写 <!DOCTYPE HTML>？
<!DOCTYPE>告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。
HTML5不基于 SGML（标准通用标记语言），因此不需要对DTD（document type definition,文档类型定义）进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）。
而HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。
6、Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?
<!DOCTYPE> 声明位于文档中的最前面，处于 <html> 标签之前。用于告知浏览器HTML是用哪个版本编写的。因为HTML有很多不同的版本，只有完全明白页面中使用的是哪个HTML版本，浏览器才能完全正确的显示HTML页面。
如果DOCTYPE不存在或格式不正确：会导致文档以兼容模式呈现。
在严格（标准）模式中，浏览器使用W3C的标准解析渲染页面，以该浏览器支持的最高标准运行。
在兼容（怪异）模式中，浏览器使用自己的怪异模式解析渲染页面，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
使用兼容模式，浏览器会按照自己的方式解析渲染页面，那么，在不同的浏览器就会显示不同的样式。
7、请阐述table的缺点
a. 太深的嵌套，比如table>tr>td>h3，会导致搜索引擎读取困难，而且，最直接的损失就是大大增加了冗余代码量。
b. 灵活性差，比如要将tr设置border等属性，是不行的，得通过td
c. 代码臃肿，当在table中套用table的时候，阅读代码会显得异常混乱
d. 混乱的colspan与rowspan，用来布局时，频繁使用他们会造成整个文档顺序混乱。
e. table需要多次计算才能确定好其在渲染树中节点的属性，通常要花3倍于同等元素的时间。
8、<img>标签的图片格式
首先解释有损压缩和无损压缩：
有损压缩对图像数据进行处理，去掉那些图像上会被人眼忽略的细节，然后使用附近颜色通过渐变或者其他形式进行填充，这样能大大降低图像信息的数据量，又不会影响图像的还原效果。jpeg是最常见的有损压缩的格式。
无损压缩的压缩原理是先判断图像上哪些区域的颜色是相同的，哪些是不同的，然后把这些相同的数据信息进行压缩记录，二八不同的数据另外保存。
（1）JPEG格式：有损压缩格式，将像素信息用jpeg保存成文件再读取出来，其中某些像素值会有少许变化；
jpeg没有透明信息；
（2）PNG格式：是一种无损压缩格式，可以有透明效果，png比较适合几何图。png的出现就是为了替代gif，png除了不支持动画外，有gif的所有特点，而且比gif更具有优势的是它支持alpha透明度和更优的压缩。
jpeg比较适合存储彩色”杂乱“的图片，png比较适合存储几何特征强的图形类图片。
（3）GIF格式：动图，可以保存多帧图像。
（4）webp格式：是google开发的一种有损、透明图片格式，相当于jpeg和png的合体，谷歌声称其可以把图片大小减少40%。主要优势在于高效率，但是编码时间要比jpeg长8倍。
9、阻止a标签跳转的方式
（1）href="#" <a href='#'>禁止跳转</a>
但是这种会在页面较长时回到页面顶部
（2）onclick事件返回false
<a href='#' onclick="return false">禁止跳转</a>
（3）使用伪协议
<a href='javascript:void(0)'>禁止跳转</a>
href='javascript:void(0)'的含义是：让超链接去执行一个js函数，而不是跳转到一个地址。而void(0)表示一个空的个方法，也就是不执行js函数。
javascript: 是伪协议，表示url的内容通过javascript执行。void(0)表示不做任何操作，这样会防止链接跳转到其他页面。这么做往往是为了保留链接的样式，但是不让链接执行实际的操作。
