一.< img/>图片标签
格式：
<img width="60%" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="xxx.jpg" alt="图片替代文案"/>
作用：
<img/>用于告诉浏览器向网页中嵌入一幅图像。常用属性：
| 属性 | 作用 |
|---|---|
src属性 | 用于规定显示图像的 URL |
alt属性 | 用于规定图像的替代文本，即用于告诉浏览器当需要显示的图片找不到时显示什么内容 |
title属性 | 用于告诉浏览器鼠标悬停在图片上时在弹出的描述框中显示什么内容 |
width/height属性 | 定义图片的宽高 |
注意点：
1.<img/>图片标签必须包含src属性和alt属性。
2.src的url地址既可以是一个网络地址也可以是一个本地路径地址。
3.当我们没有设置<img/>图片标签的width/height属性时系统使用图片默认大小。若设置了width/height属性则可以改变图片的宽高大小，但有可能会让图片变形，所以此时我们只需要选择设置width/height属性其中一个的值，则可以让图片等比放大或缩小且不会变形。
4.width/height属性取值既可以是像素值也可以是相对于父容器的百分比。title 和 alt的区别
1.title属性用于鼠标悬停在元素上时显示的提示信息，alt用于图像无法显示时，显示在浏览器上的替代文本。
2.title既可以用于<a>标签也可用于<img><p>等。而alt只能用于<img>标签。
二.< a>超链接标签
格式：
<a target="_blank" >百度</a>
作用：
<a>标签定义超链接，用于从一张页面链接到另一张页面。常用属性：
| 属性 | 作用 |
|---|---|
href属性 | 规定链接指向的页面的 URL |
target属性 | 规定在何处打开链接文档 |
title属性 | 用于告诉浏览器鼠标悬停在链接上时在弹出的描述框中显示什么内容 |
target属性取值
| target取值： | 作用 |
|---|---|
| _self | 默认，目标地址在当前选项卡打开，替换当前页面。 |
| _blank | 目标地址在新的选项卡打开。 |
| _parent | 目标地址在在父框架中打开。 |
| _top | 目标地址在在最顶层打开。 |
| framename | 目标地址在在新窗口打开。 |
注意点：
1.开始标签与结束标签之间是超链接显示给用户的信息，既可以是文字也可以是图片，所以用户既可以通过点击文字链接也可以通过点击图片跳转界面。
2.一个< a>标签必须要有一个href属性。否则链接不知道跳转到什么地方。href属性的取值既可以是一个网络地址，也可以是一个本地地址。
3.< a>标签中的title属性与<img/>图片标签中的title属性一样，也是用来当鼠标悬停在连接上时显示提示文件信息。
三.与< a>标签相关的< base>标签
格式：
<head> <base target="_blank" /> <base ></head>
作用：
专门用来统一为页面上的所有链接规定默认地址或默认目标。注意点：
1.< base>标签必须写在< head>标签中。
2.< base>标签可以指定包括< a>、< img>、< link>、< form>标签中的 URL。
3.若超链接需要跳转的要求不同，则可在该链接< a>标签中单独设置属性。浏览器会优先按照< a>标签指定执行。
四.假链接
定义
点击之后不会跳转的链接我们称其为假链接。格式：
点击后跳转到页面顶部：
<a href="#">点击回到顶部</a>
点击后不会跳转：
<a href="javascript:">点击无反应</a>
作用：
1.一个页面过长时底部设置空标签可直接回到页面顶部。
2.在企业开发前期，我们编写HTML代码时可能其它页面还没有写出来，这时网页中的超链接我们就不会知道它要跳转到哪个地方，所以只能用假链接暂时代替。等其它页面完成时，再把假链接换成真链接。
五.锚点
定义：
锚点是网页制作中超级链接的一种，又叫锚记。锚记像一个迅速定位器一样是一种页面内的超级链接，运用相当普遍。格式：
跳转到当前页面指定位置：
<h2 id="center">本页面的h2标题</h2><a href="#center">跳转到本页面的h2标题处</a>
跳转到其它页面指定位置：
<h2 id="end">123.html页面的h2标题</h2><a href="123.html#end" target="_blank">跳转到123.html页面的h2标题处</a>
作用：
当一个页面太长，文本信息量非常大时，我们有时需要在页面前面把页面中所有段落的目录单独列出来做成链接方便用户查看。此时用户就可以点击目录链接直接跳转到链接相对应的文本处。注意点：
1.由于我们需要跳转的目标位置标签属性都一样，比如都是用<h2>标签包裹的标题。这时我们需要给跳转目标标签设置一个id名，然后才能在链接中的href属性取值中加入对应的id名，这样才能准确的跳转。
2.< a>标签既可以跳转到当前页面的指定位置，也可以跳转到其它页面的制定位置。通过设置target属性可以选择在本选项卡跳转，也可以选择在新的选项卡跳转。
3.锚点的跳转都是直接跳转，中间无渐变属性（页面的滚动过程）。
六.src与href有什么区别
src属性：
1.src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在的位置。在请求src资源时会将其指向的资源下载并应用到文档中。如js脚本、img图片和frame等元素。
2.例如：<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original=".js"></script>当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到该元素加载、编译和执行结束。因此js脚本应放在底部而非头部。href属性：
1.href是hypertext reference的缩写。指向网络资源所在的位置。用于在当前文档与引用资源之间确立联系。
2.例如:<link href=".css" rel="stylesheet"/>浏览器会识别该文件是css文件，就会并行下载资源并且不会停止对当前文档的处理。
注：本段内容出处链接
七.< iframe>标签
格式
插入另一个html文件 <iframe class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="page.html"></iframe>当前页面插入百度 <iframe class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://www.baidu.com" name="myPage"></iframe>点击链接会在当前页面显示W3C网站 <p><a >W3C</a></p>
作用
iframe元素会创建包含另外一个文档的内联框架（即行内框架）。就是在一个页面中嵌入另一个网页。
八.引入文件的路径问题
路径问题的产生
当我们使用src属性和href属性给当前的HTML文件引入文件时，有时使用的是被引入目标文件的网络地址URL，此时只需要给src属性和href属性添加该文件的网络地址即可，但有时我们也需要引入本地文件，那么怎么给src属性和href属性赋值，这就出现了路径问题。一般情况下引入本地目标文件的地址有以下两种方式：相对路径与绝对路径
相对路径赋值：
1.同级
目标文件与HTML文件处于同一个文件夹，二者是同级关系。用./目标文件名表示当前目录，或者直接省略./也可。
格式：
<a href="./目标文件名">文本</a> 或 <a href="目标文件名">文本</a> <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./目标文件名" /> 或 <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="目标文件名" />
2.下级
目标文件所在的文件夹与HTML文件处于同一个文件夹，目标文件就是HTML文件的下级关系。用目标文件夹名/目标文件名表示。若目标文件藏的比较深在下下级，则文件夹的名字可以一直往下延伸到找到目标文件为止。
格式：
<a href="目标文件夹名/目标文件名">文本</a> <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="目标文件夹名/目标文件名" />
3.上级
目标文件与HTML文件所在的文件夹处于同一个文件夹，目标文件就是HTML文件的上级关系。用../目标文件名表示。以此类推若是上上级就是../../目标文件名
格式：
<a href="../../目标文件名">文本</a> <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../../目标文件名" />
4.上下级搭配使用
例如目标文件所在的文件夹在HTML文件的上上级，则我们可以先通过../../找到目标文件所在的文件夹，然后再通过下级目标文件夹名/目标文件名找到目标文件。
格式：
<a href="../../目标文件夹名/目标文件名">文本</a> <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../../目标文件夹名/目标文件名" />
绝对对路径赋值：
直接从指定的盘符开始查找一直找到目标文件。用/表示当前磁盘根目录
格式：
<a href="/目标文件名">文本</a> <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="/目标文件名" />
注意点：
1.路径中尽量不要出现中文。即文件夹的名字尽量不要使用中文，因为可能会照成不可预知的问题。
2.用斜杠符号/时尽量统一标准用/，不要使用\.反斜杠。因为开发中代码可能会放到服务器上，而服务器统一标准都用的/。
3.一般在开发中路径使用最多的是相对路径中的同级或下级。绝对路径几乎不会用到。因为绝对路径的可移植性不好，如代码需要换个地方储存时，利用当前磁盘来赋值的绝对路径就会失效。
4.不能夸盘符查找目标文件。
作者：饥人谷_刘冲
链接：https://www.jianshu.com/p/f8a4748872e7
共同學習，寫下你的評論
評論加載中...
作者其他優質文章
