那些容易遗忘的web前端问题

背景：

年底将至，本人这只才出门的前端菜鸟，终于有空闲的时间来整理一下最近投简历时出现的问题。有的是经常使用但是没有仔细留意造成的；有的是个人认为根本没人使用而忽略的。为了下次不出现这种错误，进行一下总结。问题的答案有的是本人自己总结的，有的是查找资料获取到的。对于查找到的答案会特别标注。如果本文有什么问题的话，希望大家积极留言，本人会对文章进行修改。

HTML：

　1.div图片img与div容器下有距离的解决办法

　　这个问题经常出现在网站的布局，也是前端面试官作为浏览器兼容性经常提起的“老标兵”。

　　出现状况：IE6,IE7下的img与div（块元素）会出现一些间隔，IE7才会有这个问题，IE8下是没有的。

　　出现原因：图片和文字等行内元素默认是和父级元素的baseline（baseline是基线，这里我们认为它是水平贯穿div、竖直位置确定的一条横线就行。）对齐的，而baseline又和父级底边有必定间隔（与font-size,font-family有关），所以设置vertical-align:top  /  bottom / text-top / text-bottom 都能够防止这种状况呈现。而且不光li，其他的block元素中包括img也会有这个景象。

　　解决方案：

　　方法一：定义图片img标签vertical-align:bottom，vertical-align:middle，vertical-align:top。

　　　　　　img{vertical-align:bottom;}

　　方法二：定义容器里的字体大小为0。
　　　　　　div {
　　　　　　　　width:110px;
　　　　　　　　border:1px solid #000000;
　　　　　　　　font-size:0
　　　　　　　　}

　2.高亮显示内容（一个面试当中的问题，对于搜索结果的关键词进行高亮显示。因为平常在使用中很少见，所以就没进行关注，由此可见自己的基础储备需要提高）。

　　标签：<mark></mark>

　　 作用：使用mark标签元素，可以高亮显示文档中的文字以达到醒目的效果。

　　 解决方案：

　　　　<p>使用mark标签元素，可以<mark>高亮</mark>显示文档中的文字以达到醒目的效果。</p>

　　注：使用strong、em元素同样能达到这样的效果，不推荐使用strong、em元素，因为strong、em元素的作用是强调文本，并非仅仅是高亮显示文本。

　3.HTML标签的padding与margin问题（初开始对于使用padding与margin都是比较粗糙的。对于标签布局设置都是以试为主。这个问题是需要立即解决）

　　问题分析：对于HTML标签进行划分，一般可以分为：块级元素，行内元素，空元素（可能划分的名称不同，但是大约可以分为这三类）。一般我们接触到的都是块级元素与行内元素。首先我们先分析这两种类型标签的不同。

　　　　块级元素：块级元素会独占一行，其宽度自动填满其父元素宽度。

　　　　行内元素： 行内元素不会独占一行，相邻的行内元素会排列在同一行里，直到一行排不下，才会换行，其宽度随元素的内容而变化。

　　注：一般情况下，块级元素可以设置 width, height属性，行内元素设置width,  height无效(注意：块级元素即使设置了宽度，仍然是独占一行的)

　　结果：

　　　　  块级元素可以设置margin 属性和 padding属性.并能正确显示。

　　　　  行内元素的水平方向的padding-left / padding-right / margin-left / margin-right 都产生边距效果，但是竖直方向的padding-top / padding-bottom / margin-top / margin-bottom都不会产生边距效果。（水平方向有效，竖直方向无效）

　　答案参考于：Jackie_Xie的Html中行内元素有哪些？块级元素有哪些？

　　4.src,url与href的区别？

　　　URL(Uniform Resource Locator,统一资源定位符):统一资源定位符是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示，是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。（我们可以简单的理解为是把资源文件存放到无数文件夹中的一个里面，而我们可以通过文件路径查找到该文件，而该文件路径是唯一的）

　　　分类：

　　　　1、绝对URL（absolute URL）

　　　　绝对URL（absolute URL）显示文件的完整路径，这意味着绝对URL本身所在的位置与被引用的实际文件的位置无关。

　　　　2、相对URL（relative URL）

　　　　以包含URL本身的文件夹的位置为参考点，描述目标文件夹的位置。如果目标文件与当前页面（也就是包含URL的页面）在同一个目录（也就是同一个文件夹下），那么这个文件的相对URL仅仅是文件名和扩展名，如果目标文件在当前目录的子目录中，那么它的相对URL是子目录名，后面是斜杠，然后是目标文件的文件名和扩展名（比如在a文件夹下有b文件夹与c.txt,而在b文件夹下有d.txt,而我们要以c.txt为参考点，获取d.txt，那么url="./d.txt"）。如果目标文件与当前页面不在同一个目录下，则需要使用"../"（../的作用是返回该目标文件的上一层路径），一直到目标文件所在的文件夹与当前页面所在的文件夹有共同的父文件夹，然后在此查找目标文件的路径。

　　　重点：href和src 的定义与区别

　　　href和src是有区别的，而且是不能相互替换的。我们在可替换的元素上使用src，然而把href用于在涉及的文档和外部资源之间建立一个关系。

　　　href（Hypertext Reference）

　　　指定网络资源的位置，从而在当前元素或者当前文档和由当前属性定义的需要的锚点或资源之间定义一个链接或者关系。（或者可以理解为超文本引用，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，它与页面直接的关系为链接的关系，在加载它的时候页面本身也不会停止其他内容的加载。）

　　　例：<link href="style.css" rel="stylesheet" />

　　　浏览器明白当前资源是一个样式表，页面解析不会暂停（由于浏览器需要样式规则去画或者渲染页面，渲染过程可能会被暂停）。这与把css文件内容卸载<style>标签里不相同，因此建议使用link标签而不是@import来把样式表导入到html文档里

　　　src（Source）

　　　仅仅嵌入当前资源到当前文档元素定义的位置。（表示的是引入文件，目的是要把文件加载到html页面中去，当浏览器解析的时候会暂停其他的内容而会先加载src内容，必须要等到src的内容加载完成之后才会执行后面。这就是为什么js文件往往放在了html文件的最下面的原因。如果是在页面head上放了js文件，目前我知道的一种方法来实现js最后加载的方法就是在js脚本里使用:window.onload事件处理。）