那些容易遗忘的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事件处理。

 

 

   

  

  

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/369425.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

使用IntelliJ IDEA的原因

介绍 我经常遇到一个问题&#xff0c;为什么我使用Intellij来支持另一个IDE&#xff08;在本例中为Eclipse&#xff09;。 大多数时候&#xff0c;我会通过演示IntelliJ的某些功能并展示一切的集成程度来回答这个问题。 这让我开始思考使用它的真正原因是什么。 这篇文章将试图…

linux光标美化包,使用 [ powerlevel10k ] 美化你的WSL (Linux)

使用 [ powerlevel10k ] 美化你的WSL (Linux)使用 [ powerlevel10k ] 美化你的WSL (Linux)前言关于linux终端的美化&#xff0c;网上的教程有很多&#xff0c;但对于国内的用户来说&#xff0c;效果往往是这样的&#xff1a;教程中通过以下命令安装 oh-my-zshsh -c "$(cur…

HashMap实现原理分析

1 HashMap的数据结构 数据结构中有数组和链表来实现对数据的存储&#xff0c;但这两者基本上是两个极端。 数组 数组存储区间是连续的&#xff0c;占用内存严重&#xff0c;故空间复杂的很大。但数组的二分查找时间复杂度小&#xff0c;为O(1)&#xff1b;数组的特点是&#xf…

opencv3.2.0在vs2015下安装与配置

准备工作 VS2015OpenCV 3.2.0OpenCV配置环境变量&#xff0c;path下添加\opencv\build\x64\vc14\bin&#xff0c;新设置的环境变量需要重启才能使用测试工程 新建VC控制台空项目修改平台为x64&#xff0c;这一步先做源文件中加入main.cpp&#xff0c;测试代码&#xff1a;#incl…

CSS实现响应式布局(自动拆分几列)

1.css代码 <style type"text/css">.container{margin-top: 10px;}.outerDiv{float:left;width:100%;}/* 大于648像素一行两个div&#xff0c;innerDiv两个宽度为&#xff1a;(300 4 20)*2 */media screen and (min-width: 648px){.outerDiv {width: 50%}}.inne…

如何使用字节序列化双精度数组(二进制增量编码,用于低差单调浮点数据集)...

低延迟系统需要高性能的消息处理和传递。 由于在大多数情况下&#xff0c;数据必须通过有线传输或进行序列化才能保持持久性&#xff0c;因此编码和解码消息已成为处理管道的重要组成部分。 高性能数据编码的最佳结果通常涉及应用程序数据细节的知识。 本文介绍的技术是一个很好…

error

for(int i1;i<size;i) { if(ba[i]) { pos i1; break; } }输入&#xff1a; a{4,5,7,4,6,8},b4 输出&#xff1a; 位置是4&#xff08;错误&#xff0c;这儿应该是1&#xff0c;但程序未失败。&#xff09;改成&#xff1a;for(int i0;i<size;i) { if(ba[i]) { pos i1; …

c语言第一次作业,C语言培训班第一次作业 (1)

1、以下叙述中正确的是()(A)、用户所定义的标识符不允许使用关键字。(B)、分号是C语句之间的分隔符&#xff0c;不是语句的一部分。(C)、花括号“&#xff5b;&#xff5d;”只能作为函数体的定界符。(D)、构成C程序的基本单位是函数&#xff0c;所有函数都可以由用户命名。1、…

2.Python爬虫入门二之爬虫基础了解

1.什么是爬虫 爬虫&#xff0c;即网络爬虫&#xff0c;大家可以理解为在网络上爬行的一直蜘蛛&#xff0c;互联网就比作一张大网&#xff0c;而爬虫便是在这张网上爬来爬去的蜘蛛咯&#xff0c;如果它遇到资源&#xff0c;那么它就会抓取下来。想抓取什么&#xff1f;这个由你来…

对request.getSession(false)的理解(附程序员常疏忽的一个漏洞)

本文属于本人原创&#xff0c;转载请注明出处&#xff1a;http://blog.csdn.net/xxd851116/archive/2009/06/25/4296866.aspx 【前面的话】 在网上经常看到有人对request.getSession(false)提出疑问&#xff0c;我第一次也很迷惑&#xff0c;看了一下J2EE1.3 API&#xff0c;看…

实现自定义的未来

上一次我们学习了java.util.concurrent.Future<T>背后的原理 。 我们还发现&#xff0c; Future<T>通常由库或框架返回。 但是没有什么可以阻止我们在有意义的情况下自行实现所有功能。 它不是特别复杂&#xff0c;可以显着改善您的设计。 我尽力为我们的示例选择有…

c语言中的两个百分号什么意思,百分号的用法,特别是在两个量词之间的用法,例如50%—70%和50—70%...-百分号-语文-彭都宰同学...

概述&#xff1a;本道作业题是彭都宰同学的课后练习&#xff0c;分享的知识点是百分号&#xff0c;指导老师为屠老师&#xff0c;涉及到的知识点涵盖&#xff1a;百分号的用法&#xff0c;特别是在两个量词之间的用法&#xff0c;例如50%—70%和50—70%...-百分号-语文&#xf…

Markdown 语法和 MWeb 写作使用说明

# Markdown 语法和 MWeb 写作使用说明 ## Markdown 的设计哲学 > Markdown 的目標是實現「易讀易寫」。> 不過最需要強調的便是它的可讀性。一份使用 Markdown 格式撰寫的文件應該可以直接以純文字發佈&#xff0c;並且看起來不會像是由許多標籤或是格式指令所構成。>…

微信小程序 引入公共页面的几种情况

1、不带参数 首先在pages文件夹中新建一个template文件夹&#xff0c;文件夹中新建一个template.wxml文件&#xff0c;代码如下 <!--template.wxml--> <template name"msgItem"><view><text>This is template.wxml文件&#xff0c;我是一个…

Python学习笔记----基础篇10----模块2

8&#xff09;json& pickle 用于序列化的两个模块 json&#xff0c;用于处理字符串和python数据类型间进行转换 pickle&#xff0c;用于python特有的类型和python的数据类型间进行站换 Json模块提供了四个功能&#xff1a;dumps、dump、loads、load pickle模块提供了四个功…

易语言自定义数据类型转c,一步一步跟我学易语言之自定义数据类型

自定义数据类型什么是“自定义数据类型”&#xff1f;顾名思义&#xff0c;就是用户可以随时在程序中自行定义新的数据类型。自定义数据类型时需要设置数据类型的名称及其成员。数据类型成员各属性的设置方法等同于变量设置时相应属性的设置方法。双击“程序”中的“自定义数据…

(第2部分,共3部分):有关性能调优,Java中的JVM,GC,Mechanical Sympathy等的文章和视频的摘要...

这是以前的文章&#xff08;第3部分&#xff0c;共1部分&#xff09;的继续&#xff1a;有关性能调优&#xff0c;Java中的JVM&#xff0c;GC&#xff0c;Mechanical Sympathy等的文章和视频的提要 。 事不宜迟&#xff0c;让我们开始使用我们的下一组博客和视频&#xff0c;印…

Redis初步整理

1&#xff0c;Redis 简介 Redis 是完全开源免费的&#xff0c;遵守BSD协议&#xff0c;是一个高性能的key-value数据库。 Redis 与其他 key - value 缓存产品有以下三个特点&#xff1a; Redis支持数据的持久化&#xff0c;可以将内存中的数据保持在磁盘中&#xff0c;重启的时…

阶段十-物业项目

可能遇到的错误&#xff1a; 解决jdk17javax.xml.bind.DatatypeConverter错误 <!--解决jdk17javax.xml.bind.DatatypeConverter错误--><dependency><groupId>javax.xml.bind</groupId><artifactId>jaxb-api</artifactId><version>…

echarts中triggeron与trigger不能同时出现吗_好物|痛风、血糖高、虚不受补能吃它吗?你想知道的阿胶十问十答一锅出!...

最近百草君在整理粉丝留言的时候&#xff0c;发现关于阿胶四物膏的留言不少&#xff0c;并且有重复问题。百草君特意整理出来几个粉丝们特别关注的问题&#xff0c;给大家统一解答&#xff0c;顺序不分前后&#xff1a;Q1阿胶四物膏什么口感&#xff0c;甜不甜&#xff1f;阿胶…