那些容易遗忘的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标签元素，可以高亮显示文档中的文字以达到醒目的效果。

　　注：使用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事件处理。）

那些容易遗忘的web前端问题相关推荐

零基础不建议学前端_web前端培训心得：零基础怎样学好web前端
转行学web前端,这是不少人的选择,毕竟目前互联网行业受到了太多的关注,而很多人纷纷需要向互联网方面转型.而谈到转型,web前端无疑是很多人的选择,这是因为web前端属于可见即可得的编程语言,写出来就 ...
Web前端是什么？大牛推荐的高效学习路线，减少2倍时间
目前,在移动互联网行业中较为火热.势头猛烈的当属Web前端开发.且在2019年招聘旺季中,Web前端开发程序员处于供不应求的状态,对于0基础想要从事互联网行业的小伙伴们,Web前端将会是最合适的入门编 ...
Web前端之仿携程首页布局
Web前端之仿携程首页布局 1.前言出于之前早就学习过Web的相关技术,后面很少写仿网页或者做后端等案例了,导致一些基础知识点有所遗忘,而这部分知识又是Java学习中的重中之重,因此借目前学校课程正 ...
web前端做汽车之家官网，HTML5+CSS3+JS
大一写的代码,那时候没有接触到技术博客,没有及时记录下来,如今大三回顾前两年所学,发现好多知识已有所遗忘,现在重新复习web前端语言,当时写代码时所遇到的问题已经记不清楚了,但大体的解决办法还牢记于心 ...
web前端--Html4
web前端–html4练习标签总览: <!DOCTYPE html> <html><head><meta charset="utf-8" ...
web前端开源框架_9个用于前端Web开发的开源CSS框架
web前端开源框架当大多数人想到Web开发时,通常会想到HTML或JavaScript. 他们通常会忘记对访问网站的能力有更大影响的技术: 级联样式表(CSS) . 根据Wikipedia的说法,C ...
2021年选择 Web 前端开发框架的方式
Web 前端开发是时下最热门的领域之一,为了提升开发效率和用户体验从而创造更具竞争力的产品,选择适合自己项目或团队的开发框架成为技术决策者首先需要解决的问题. 但是近年来随着技术和开发理念的发展和进步 ...
Web前端开发必不可少的9个开源框架
大多数人想到Web开发时,通常会想到HTML或JavaScript,往往忽略了CSS,根据Wikipedia的说法,CSS既是网页中最重要也是最常被遗忘的部分之一,尽管它是万维网的三大基础技术之一. ...
2021年最新Web前端HTML,CSS,Vue,React,Jquery大概率面试题合集
CSS3 HTML5 前端面视题 1.Css3新增的特性边框: border-radios 添加圆角边框 border-shadow:给框添加阴影 (水平位移,垂直位移,模糊半径,阴影尺寸,阴影颜色 ...

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

那些容易遗忘的web前端问题相关推荐

最新文章

热门文章