标签
a链接4大功能
a标签有四大功能:
1.超链接功能
能够点击跳转到指定页面
2.回到顶部功能
<a href="#">文本</a>
href在填写#时 就实现回到顶部功能
在实际开发中 如果暂时不知道跳转到什么地址 可以先写一个#占位
3.锚点功能
能够跳转到其他页面或者当前页面的指定位置
如果跳转到自己的网页 那么路径也是遵循 img的路径原理 一样
相对路径 绝对路径 网络路径
网页跳转如果不加入锚点功能 那么默认就是跳转到页面的顶部
加入锚点功能:
（1）在目标页面 自己定一个锚点位置 给那个位置的标签
加一个id属性 id必须是字母开头
（2）在超链接的href里面 写上 href="目标页面路径.html#锚点的id"
还可以跳转到当前页面的指定位置
href="#锚点" 表示跳到当前页面指定锚点位置
4.文件下载功能
一旦href的路径关联一个文件资源地址
那么就可以实现下载
但是要注意: 如果关联的文件是 图片 音频 视频 txt等
这些浏览器能够直接预览的文件类型
那么浏览器不会提示下载 而是直接打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>笔记</title>
</head>
<body>
<!-- a标签四大功能
1.超链接功能
能够跳转指定页面 -->
<a href="http://www.baidu.com">百度</a>
<!-- 2.回到页面顶部
填写#回到页面顶部 实际开发中不知道跳转什么地址 可以先填写# 站位-->
<a href="#">回到页面顶部</a>
<!-- 3.锚点功能
能够跳转其他页面 或者当前页面指定位置
如果跳转自己的页面 name路径遵循img
相对路径 绝对路径 网络路径-->
<a href="笔记11.23.html">11.23笔记</a>
<!-- 加入锚点功能
1.在目标页面内 给一个锚点位子 用id属性 id必须是字母开头
2.在超链接的href里面 写上 href="目标页面路径.html#锚点的id"
还可以跳转到当前页面的指定位置
href="#锚点" 表示跳到当前页面指定锚点位置
-->
<!-- 4.文件下载功能
一旦href的路径关联一个文件资源地址
那么就可以实现下载
但是要注意: 如果关联的文件是 图片 音频 视频 txt等
这些浏览器能够直接预览的文件类型
那么浏览器不会提示下载 而是直接打开
不推荐使用超链接实现文件下载功能:
1.不能限流
2.不能防盗链
防止盗取连接 一旦用a标签实现文件下载
那么其他不轨之徒 就可以直接复制下载地址
放到他的网站上进行 赚钱下载 我们就吃亏了 -->
<h1>锚点页面目标</h1>
<a href="">跳转锚点页面</a>
<!-- 相对路径 -->
<a href="笔记11.23.html">跳转到锚点页面</a>
<!-- 跳转到指定锚点位置 -->
<a href="笔记11.23.html#A">11.23笔记页面A点</a>
<a href="笔记11.23.html#B">11.23笔记页面B点</a>
<a href="笔记11.23.html#C">11.23笔记页面C点</a>
<hr>
<a href="#life">去生活区</a>
<a href="#el">去电子区</a>
<a href="#cl">去服装区</a>
<hr>
<a href="q.jpg">点我是一个图片</a>
<a href="aa.zip">点我下载压缩包</a>
<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>
<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>
<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>
<h2 id="life">生活区</h2>
<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>
<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>
<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>
<a href="#">点我回到顶部</a>
<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>
<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>
<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>
<h2 id="el">电子区</h2>
<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>
<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>
<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>
<h2 id="cl">服装区</h2>
<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>
<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>
<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>
<!-- a链接下载功能 -->
<a href="q.jpg">点我是一个图片</a>
<a href="aa.zip">点我下载压缩包</a>
</body>
</html> 不推荐使用超链接实现文件下载功能:
（1）不能限流
（2）不能防盗链
防止盗取连接 一旦用a标签实现文件下载
那么其他不轨之徒 就可以直接复制下载地址
放到他的网站上进行 赚钱下载 我们就吃亏了
特殊符号
在某些会混淆的情况下 我们要用 特殊符号来区分
在html中 我们用<br>标签表示换行
在html中有一个空格折叠效应
在代码编写期间 所有的回车换行在浏览器中不识别
浏览器的换行只识别 br标签 那空格本身是不识别的
但是的确代码里面是有空格和回车 还有缩进
浏览器的处理就是:空格折叠 把所有的空格 回车 缩进折叠成一个空格的位置
换行的解决方式就是用 <br>标签来换行
空格用: 来代替
&: &
我是一句话 我是好远以后的另一句话
在html的特殊符号用我们用&nbsp;来表示空格
<!-- © ¥▇█▉▊…☾☀ -->
<!-- ♔♔♔ஐ☣ღ☬☨¥ -->列表标记
无序列表
ul li
ul的属性:
type:
disc(默认值) 实心小圆圈
circle 空心小圆圈
square 实心小方块
<ul type="square">
<li>今天狂风呼啸</li>
<li>大地在震颤</li>
<li>是人性的扭曲</li>
<li>还是道德的沦丧</li>
</ul><!--
在是用列表的时候一边去掉前面的序列标识
-->
<style>
ul,ol{
list-style-type: none;
}
有序列表
ol li
ol的属性:
type: 1(默认值) a A i I 序号的样子
start: 序号从多少开始 只能写数字
<ol type="1" start="8">
<li>今天狂风呼啸</li>
<li>大地在震颤</li>
<li>是人性的扭曲</li>
<li>还是道德的沦丧</li>
</ol> 自定义列表
dl dt dd
dt是列表的小标题描述
dd每一个列表
<dl>
<dt>四大名著</dt>
<dd>水浒</dd>
<dd>西游</dd>
<dd>红楼</dd>
<dd>海贼王</dd>
<dt>四大美女</dt>
<dd>网红1</dd>
<dd>网红2</dd>
<dd>貂蝉</dd>
<dd>李白</dd>meta标签的作用
1.声明编码表
编码与解码:
编码: 从看得懂的=====>看不懂的
解码: 从看不懂的=====>看得懂的
<meta charset="UTF-8">2.SEO: 搜索引擎优化
搜索引擎的关键字优化
<meta name="keywords" content="科技,AI,Web前端,善知,善知教育">描述内容优化:
<meta name="description" content="善知教育为全球所有IT同学提供最好最优最新最时尚的技术培训">3. 自动跳转
<meta http-equiv="refresh" content="3,url=http://www.baidu.com">4.网页的收藏夹小图标
link是头部标签 写在head标签里
<link rel="icon" href="qqvip.png">
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
