整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
喽大家好，我是胖达。本期视频来看看路径相关的内容。我们知道在网页中存在很多的图片，如果把这些图片和html文档放在一起，这样不光不美观，管理起来也非常不方便。通常会新建一个专门用来管理图像资源的文件夹，当需要查找图像的时候就会选择使用路径的方式来指定图像文件的位置。
路径的类型又分为两种，第一种是相对路径，第二种是绝对路径。今天先来了解一下相对路径。相对路径是相对于当前文件的位置来表示资源，也就是图片位置的路径表达方式。简单来说就是图片相对于当前html文档的位置。这里把相对路径的分类给大家列出来了，一个一个往下看。
·首先是同级路径。同级路径不需要在html里面写任何符号，只需要将文件名写到html属性里就可以了。在代码里看一下，这里有一个image，点jpg的图片和html文档处于同一级，所以在html的属性里直接写image，点jpg保存一下看看效果。
可以看到现在图片是正常展示的，同级路径下只需要在html属性里完整填写图像文件的名称就可以了。
·再来看第二个下级路径。当图像文件位于html文件下一集时，需要在html属性里完整填写同级文件夹的名称，然后斜杠写出对应图片文件的名称。
→首先打开资源文件夹，在这里新增一个images的文件夹。将image图片文件复制一份放到images文件夹里。
→打开vscode，新建一个gtml文档，这里新增一个image标签。
→在左侧资源管理器中刚刚新增的images文件夹已经显示出来了，打开以后会发现里面有一个image，点jpg的图片。把这个路径写一下，在src属性里面写入位于当前html文件同级的images文件夹的名称，使用符号斜杠找到image，点gpg，看一下效果。此时图片也完整显示出来了。
→如果在amager四文件夹里还有一个amager四文件夹，下级路径又该怎么写？在amager文件夹里再新建一个文件夹，打开vscod，在左侧的资源管理器中a major s文件夹下面又新增了一个a major s文件夹，在这里面又放了一张图片。
这张图片应该怎样让它展示出来？一起来看一下。
→首先找到同级的images文件夹，使用符号斜杠，此时vscode会提供给两个选项，一个是imagers文件夹，另一个是imager.gpg。选择imagers，imagers文件夹里面的imager.gpg的文件了，保存一下看看效果。
在浏览器中这两张图片都完美的展现出来了。
最后来看一下相对路径里面的。上级路径使用的符号是点点杠。上级路径又应该怎么理解？也就是图像文件是位于当前这个 hd ml文件的上一集。
在练习文件夹里新增一个名为 hd ml的文件夹，打开vs code，选择刚刚新增的文件夹，选择新建文件，这里需要新增一个 hd ml文档。在当前 hd ml文档中，如果想要调用上一级的 image 点 j p g 的图片应该怎么做？在 sr c 属性里面使用点点杠。
这里 vs code提供了上一集路径中存在的文件，选择 image 点 j p g，在浏览器中看下效果，此时图片也是正常显示的。如果hd ml文件藏得更深一些，把当前的文件复制一份，新增一个hd ml文件夹，将复制的文档粘贴一下，打开刚刚复制的文档，修改sr c属性里面的值，使用点点杠。
此时是没有找到 amage 点 j p g 的文件，这个时候就需要重复刚刚的操作，点点杠就能找到需要到的 amage 点 jbg 的文件了，保存一下看看效果。这里可以看到图片还是正常显示出来了。
本期视频主要了解了相对路径的三种分类，一个是同级路径，一个是下级路径，还有一个是上级路径。希望小伙伴们下来可以好好练习一下，这对于后期的内容非常重要。下期再来聊聊绝对路径。本期的内容到此结束，感谢观看，下期再见。
有时候，我们想阅读页面中某段精彩的内容，但由于页面太长，用户需要自己滚动页面，查找起来非常麻烦 ，很容易让人失去继续往下阅读的兴趣。这样体验非常不好，所以我们可以想办法 实现点击某段文字或者图片跳转到页面指定位置，方便用户的阅读。
这里作为锚点的标签可以是任意元素。
<a href="#aa">跳转到 id 为 aa 标记的锚点</a>
<p>-------------分隔线-------------</p>
<div id="aa">a</div>
这里作为锚点的标签只能是 a 标签。
<a href="#bb" >跳转到 name 为 bb 的 a 标签锚点</a>
<p>-------------分隔线-------------</p>
<a name="bb">name 为 bb 的 a 标签的锚点</a>
<div id="abb">bbb</div>
注意：当以 ' a 标签 name 属性作为锚点 ' 和 ' 利用 id 为标记的锚点 ' 同时出现（即以 name 为锚点和以 id 为锚点名字相同时），会将后者作为锚点。
window.scrollTo 滚动到文档中的某个坐标。可提供滑动效果，想具体了解 scrollTo() 可以看看 MDN 中的介绍。
话不多说，看下面代码
「html 部分」:
<a id="linkc">平滑滚动到 c</a>
<p>-------------分隔线-------------</p>
<div id="cc">c</div>
「js 部分」:
var linkc = document.querySelector('#linkc')
var cc = document.querySelector('#cc')
function to(toEl) {
// toEl 为指定跳转到该位置的DOM节点
let bridge = toEl;
let body = document.body;
let height = 0;
// 计算该 DOM 节点到 body 顶部距离
do {
height += bridge.offsetTop;
bridge = bridge.offsetParent;
} while (bridge !== body)
// 滚动到指定位置
window.scrollTo({
top: height,
behavior: 'smooth'
})
}
linkc.addEventListener('click', function () {
to(cc)
});
Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内。想具体了解 scrollIntoView() 可以看看 MDN 中的介绍。
下面也直接上代码
「html 部分」:
<a onclick="goTo()">利用 scrollIntoView 跳转到 d</a>
<p>-------------分隔线-------------</p>
<div id="dd">ddd</div>
「js 部分」:
var dd = document.querySelector('#dd')
function goTo(){
dd.scrollIntoView()
}
注意：此功能某些浏览器尚在开发中，请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订，所以在未来版本的浏览器中该功能的语法和行为可能随之改变。
下面为了方便看效果，把上面的代码整理在一起。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 600px;
height: 300px;
background-color: pink;
}
</style>
</head>
<body>
<a href="#aa">跳转到以 id 为 aa 标记的锚点 a</a>
<p>-------------分隔线-------------</p>
<a name="aa">hhh</a>
<div id="aa">aa</div>
<a href="#bb" >跳转到 name 为 bb 的 a 标签锚点</a>
<p>-------------分隔线-------------</p>
<a name="bb">name 为 bb 的 a 标签的锚点</a>
<p>-------------分隔线-------------</p>
<div>bb</div>
<a id="linkc">平滑滚动到 c</a>
<p>-------------分隔线-------------</p>
<div id="cc">cc</div>
<a onclick="goTo()">利用 scrollIntoView 跳转到 d</a>
<p>-------------分隔线-------------</p>
<div id="dd">dd</div>
<p>-------------分隔线-------------</p>
<div></div>
</body>
<script>
var cc = document.querySelector('#cc')
var linkc = document.querySelector('#linkc')
function to(toEl) {
//ele为指定跳转到该位置的DOM节点
let bridge = toEl;
let body = document.body;
let height = 0;
do {
height += bridge.offsetTop;
bridge = bridge.offsetParent;
} while (bridge !== body)
console.log(height)
window.scrollTo({
top: height,
behavior: 'smooth'
})
}
linkc.addEventListener('click', function () {
to(cc)
});
</script>
<script>
var dd = document.querySelector('#dd')
function goTo(){
dd.scrollIntoView()
}
</script>
</html>
效果图：
html5 地理定位
html5 Geolocation API用于获得用户的地理位置
鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的
注意:Geolocation(地理定位)对于拥有GPS的设备,地理定位更加精确
Geolocation API的主要方法是gerCurrentPositon,它用来获得用户的位置
下面是一个简答的地理定位实例,可返回用户位置的经度和纬度:
var x=document.getElementById("demo");
function getLocation(){
if(navigator.geolocation){
navigator.geolocation.getCurrentLocation(showPositon);}
else{
x.innerHTML="该浏览器不支持获取地理位置."}
}
function showPosition(position){
x.innerHTML="纬度:"+position.coords.latitude+
"<br>经度:"+position.coords.longitude;}
实例解析:
●检测是否支持地理定位
●如果支持,则运行gerCurrentPosition()方法.如果不支持,则向用户显示一段信息
●如果getCurrentPostion()运行成功,则向参数showPosition中规定的函数返回一个coordinates对象
●showPosition()函数获得并显示经度和纬度
上面的例子是一个非常基础的地理定位脚本,不含错误处理
你需要先熟悉JavaScript才能理解和使用API
如果gerCurrentPosition()运行成功,则getCurrentPosition()方法返回对象.始终返回latitude,longtitude以及accuracy属性.如果可用,则会返回其他下面的属性:
●coords.latitude:十进制数的纬度
●coords.longtitude:十进制的经度
●coords.accuracy:位置精度
●coords.altitude:海拔,海平面以上以米计
●coords.altitudeAccuracy:位置的海拔精度
●coords.heading:方向,从正北开始以度计
●coords.speed:速度,以米/每秒计
●timestamp:响应的日期/时间
二 html5 拖放
拖放(Drag和drop)是html5标准的组成部分
拖放是一种常见的特性,即抓取对象以后拖到另一个位置
在html5中,拖放是标准的一部分,任何元素都能够拖放
★设置元素为可拖放
首先,为了使元素可拖动,需要把draggable属性设置为true:
<img draggable="true">
★拖动什么-ondragstart和setData()
然后,规定当元素拖动时,会发生什么
dataTransfer.setData()方法,设置被拖数据的数据类型和值:
function drag(ev){
ev.dataTransfer.setData("Text",ev.target.id);}
在这个例子中,数据类型是"Text",值是可拖动元素的id("drag1")
★放到何处-ondragover
ondragover时间规定在何处放置被拖动的数据
默认地,无法将数据/元素放置到其他元素中,如果需要设置允许放置,我们必须阻止元素的默认处理方式.
这要通过调用ondragover时间的event.preventDefault()方法:
event.preventDefault()
★进行放置-ondrop
当放置被拖数据时,会发生drop事件
function drop(ev){
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));}
三 html5 SVG
什么是SVG?
●SVG指可伸缩矢量图形(Scalable Vector Graphics)
●SVG用于定义用于网络的基于矢量的图形
●SVG使用XML格式定义图形
●SVG图像在放大或改变尺寸的情况下其图形质量不会损失
●SVG是万维联盟的标准
在html5中,你能够直接将SVG元素嵌入html页面中
要使用SVG绘制图形,你首先需要创建一个<svg>标签
<svg width="1000" height="1000"></svg>
要创建一个圆形,需要添加一个<circle>标签
下面是SVG代码:
<svg width="1000" height="1000">
<circle cx="100" cy="50" r="40" fill="red" />
</svg>
●cx和cy属性定义圆点的x和y坐标.如果省略cx和cy,圆的中心会被设置为(0,0)
●r属性定义圆的半径
运行效果如下:
*请认真填写需求信息，我们会在24小时内与您取得联系。
