HTML5学习地址链接： 我要自学网.
4-1 超链接
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>超链接</title>
</head>
<body>
<!--超链接是指从一个网页链接到另一个网页-->
<!--语法：<a href="要链接的地址">我要自学网</a>-->
最常用的属性：
href:要链接的地址
target:指定在哪里打开目标页面
_blank:在新窗口中打开目标页面
_self: 在当前窗口中打开目标页面，当前窗口被关闭（默认）
_parent:把文档载入父窗口或包含了超链接引用的框架的框架集
_top:把文档载入包含该超链接的窗口，取代任何当前正在窗口中显示的框架
<a href="https://www.51zxw.net" target="_blank">我要自学网</a>
<a href="https://www.baidu.com" target="_blank">hello world！</a>
<a href="https://www.baidu.com" target="_blank">哈哈哈哈</a>
<a href="https://www.baidu.com" target="_blank">lululu</a>
<a href="https://www.baidu.com" target="_blank">咦，你在</a>
</body>
</html>
4-2 超链接的四种状态
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>超链接的四种状态</title>
</head>
<a href="https://www.51zxw.net" target="_blank">我要自学网</a>
<a href="https://www.baidu.com" target="_blank">百度</a>
超链接的四种状态：
1.（在一个浏览器中）未被访问的链接，link状态：默认名字为蓝色，并且有下划线
2.（在一个浏览器中）已被访问的链接，visited状态：文字为紫色，并且有下划线
3.鼠标移动到链接上的状态，hover状态：有下划线，鼠标变为手型
4.正在点击的状态，activer状态：文字红色，有下划线
默认的四种状态啥用都没有。
通常我们要通过css对这4种状态进行重置。
<body>
</body>
</html>
4-3 绝对路径
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>绝对路径</title>
</head>
<body>
<a href="https://www.51zxw.net" target="_blank">我要自学网</a>
绝对路径：
湖南省长沙市开福区98号，这就是用绝对的方式来描述一个地址
带有域名的完整路径，比如：https://www.51zxw.net
主要用来链接外部资源
</body>
</html>
4-4 相对路径
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>相对路径1</title>
</head>
<body>
<a href="a.html" target="_blank">链接到a</a>
<a href="fj1/b.html" target="_blank">链接到a</a>
<a href="fj1/fj2/c.html" target="_blank">链接到a</a>
<!--相对路径：
1.以当前文档所在的目录作为参考
2.在本目录中-->
<!--<a href="a.html" target="_blank">链接到a</a>-->
<!--3.当前文档和目标文档不在同一个目录-->
<!--一个"../"表示退出一层目录
"../../"表示退出两层目录-->
</body>
</html>
4-5 ID属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ID属性</title>
<style>
#zxw3{
color:red;
}
</style>
</head>
<body>
<!--<a href="http://www.51zxw.net">我要自学网</a>-->
<a id="zxw1">我要自学网1</a>
<br />
<a id="zxw2">我要自学网2</a>
<p id="zxw3">我要自学网3</p>
<p id="zxw4">我要自学网4</p>
标准属性：几乎所有元素都可以拥有的属性
特殊属性：元素特有的属性
ID属性：
1.是元素唯一标识
2.同一个页面中不能有相同的id
3.同一页面中，不同元素有相同id也不行
</body>
</html>
4-6 class属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>class属性</title>
<style type="text/css">
.d1z{
font-size: 50px;
color: red;
}
.ntx{
font-weight: 600;
}
</style>
</head>
<body>
<a class="d1z">我要自学网1</a>
<br />
<a class="d1z">张三</a>
<p class="d1z">李四</p>
<p class="d1z ntx">王小花</p>
<p class="d1z ntx">赵晓梅</p>
标准属性：几乎所有元素都可以拥有的属性
特殊属性：元素特有的属性
class属性(类)：
1.相同的元素，不同的元素可以有相同的类名（）class值
2.同一个元素可以有多个类名，用空格隔开
3.主要用来选择一堆元素，用来定义样式
4.规定类名时，不能以数字开头
</body>
</html>
4-7 title和style属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title和style属性</title>
</head>
<body>
<!--<a href="https://www.51zxw.net" title="51zxw">我要自学网</a>-->
<a href="https://www.51zxw.net" style="color: blueviolet;font-weight: 600;">我要自学网</a>
标准属性：几乎所有元素都可以拥有的属性
特殊属性：元素特有的属性
title属性：
1.规定元素的额外信息
2.鼠标移动到元素上时显示提示文字
style属性：
1.规定元素的行内样式，只会作用于自己本身
2.自身style设置的样式会覆盖其他方式设置的样式
3.可以设置多个属性值，用";"隔开
</body>
</html>
4-8 自定义属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>自定义属性</title>
</head>
<body>
<a href="https://www.51zxw.net" zxw="51zxw">我要自学网</a>
<a href="https://www.51zxw.net" data-zxw="51zxw">我要自学网</a>
自定义属性：几乎所有元素都可以拥有的属性
自定义属性：如zxw="51zxw"
1.自己定义属性名，属性值
2.自定义属性用的不多，只了解一下
自定义数据属性：如data-zxw="51zxw"
1.用于存储页面或应用程序的私有自定义数据
2.data-*属性包括两部分：
（1）"*"表示自定义的属性名，在data-之后必须包含至少一个字符
（2）属性值可以是任何字符串
3.在微信小程序中用得多
</body>
</html>
4-9 文件下载
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文件下载</title>
</head>
<body>
<a href="xz/51zxw.rar">文件下载</a>
<a href="xz/51zxw.png" download="51zxw图片">图片下载</a>
<!--文件下载：
<a href="文件路径"download="设置下载文件名称">文件下载</a>
fref属性：指定文件下载路径
download属性：指定下载文件名称-->
不添加download属性时：
浏览器不能识别文件，可以直接下载
如果浏览器能识别到文件，会直接打开显示。
添加download属性时：不管浏览器是否可以识别文件，都会直接下载。
</body>
</html>
4-10 锚链接
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>锚链接</title>
</head>
<body>
1.当网页内容太长，需要跳转到具体位置时，可以使用锚链接
<a href="#one">第一章</a>
<a href="#two">第二章</a>
<a href="#three">第三章</a>
<p id="one">
1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字1.很长的一段文字
</p>
<p id="two">
2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字2.很长的一段文字
</p>
<p id="three">
3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字3.很长的一段文字
</p>
<a href="#">返回顶部（空链接）</a>
</body>
</html>
4-11 锚链接和空连接
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>锚链接和空链接</title>
</head>
<body>
跳转到其他页面具体位置锚链接
1.目标页面具体位置要设置锚点
2.用a标签中的href属性指定目标页面的路径+指定位置的id
<a href="4-11.html/#one">第一章</a>
<a href="4-11.html/#two">第二章</a>
<a href="4-11.html/#three">第三章</a>
</body>
</html>
475
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
