HTML-超链接锚点笔记
超链接-锚点
一 文本标签
| 标签名 | 语义和功能 | 属性 | 单or双 |
|---|---|---|---|
| em | 表示强调，斜体字 | 双 | |
| stong | 表示强调，语气更强烈，粗体字 | 双 | |
| ins | 表示新添加的内容，添加下划线 | 双 | |
| del | 表示删除的内容，添加删除线 | 双 | |
| sub | 下标字 | 双 | |
| sup | 上标字 | 双 |
二 图片
1 img标签
| 标签名 | 语义和功能 | 属性 | 单or双 |
|---|---|---|---|
| img | 在页面中显示图片 |
src属性：指定图片的地址。 alt属性：指定图片的代替文字。 width属性：设置图片的宽度。 height属性：设置图片的高度。 border属性：设置图片边框的宽度 |
单 |
注意：
1.alt除了可以指定图片的代替文字（图片加载失败），还可有利于搜索引擎准确抓取到图片，该属性要加。
2.width和height属性如果只指定一个，另一个会根据图片比例自动计算，所以如果同时设置宽高一定注意图片比例。
2 常见的图片格式
jpg
png
gif
三 相对路径和绝对路径
1 绝对路径
前端中使用的绝对路径，就是文件在网络中的绝对地址。
http://image.baidu.com/images/pc_34124123123/im123123123.jpg
2 相对路径
./ 表示当前文件夹（写代码的文件所在的文件夹）， 可以省略。 用于目标文件在同级或者下级../ 表示上一级文件夹（写代码的文件的上一级文件夹）。 用于目标文件在上级或者更上级../../ 表示上两级../../../ 表示上三级
3 HTML中使用路径的场景
使用 img 标签加载图片文件
使用 audio 标签加载音频文件
使用 vidoe 标签加载视频文件
使用 iframe 标签加载其他 html 文件
a 标签设置超链接地址
使用 link 标签引入 css 文件
使用 script 标签引入 js 文件
四 超链接和锚点
1 a标签
| 标签名 | 语义和功能 | 属性 | 单or 双 |
|---|---|---|---|
| a | 超链接 |
herf属性： 设置目标文件的地址。 **target属性：**设置目标文件在本窗口还是新窗口打开。值：_blank(新窗口)、_self(默认，本窗口)。 name属性：用于指定锚点名。 |
双 |
注意：
只有设置了herf属性的a标签才能被称为超链接。
2 超链接
① 跳转新的页面
页面就是 html 类型的文件。
<!--使用绝对路径指定目标文件地址-->
<a href="https://news.163.com/21/0227/12/G3RFGNPG000189FH.html">一篇新闻</a><!--使用相对路径指定目标文件-->
<a href="../02-图片标签/01-图片标签.html">图片</a>
② 跳转到其他类型的文件
<a href="images/芳芳.jpg" target="_blank">芳芳的自拍照</a>
<br>
<a href="../../Day02_HTML课堂笔记.md">markdown文件</a>
<br>
<a href="resouces/如何30岁之前走上人生巅峰.pdf">如何30岁之前走上人生巅峰</a>
<br>
<a href="resouces/如何拥有百亿资产.docx">如何拥有百亿资产</a>
<br>
<a href="resouces/小乐老师的私房照片.7z">小乐老师的私房照片</a>
<br>
<a href="resouces/小乐老师的性福生活.mp4">小乐老师的性福生活</a>
超链接的目标文件可以是任何类型的文件。
如果目标文件的类型浏览器可以打开，一点击超链接，浏览器就打开该文件（如：html、图片、markdown格式、视频、音频、文本文档等）
如果目标文件的类型，浏览器无法打开，一点击超链接，直接下载文件。（如：exe 文件、压缩文件、word 文件等）
③ 超链接其他功能
<a href="mailto:fmuncle@163.com">发邮件给我</a>
<br>
<a href="tel:18618176338">打电话给我</a>
<br>
<a href="sms:18618176338">发短信给我</a>
④ href 的值是空的
<a href=""></a>
如果 href 属性的值是空的，超链接的目标文件是自己（当前的文件）。点击超链接会把本页面再打开一遍。
五 锚点
① 如何设置锚点
第一种方式：使用a标签设置锚点：
<a name=“锚点名”></a>
第二种方式： 标签通过 id 属性设置锚点名：
任何标签通过设置 id 都可以作为锚点！
<div id="page01">内容...
</div><h2 id="section"></h2>
② 如何跳转到锚点
超链接可以跳转到指定的锚点。
<!--跳转到本页面指定的锚点-->
<a href="#锚点名">超链接</a><!--跳转到其他页面指定的锚点-->
<a herf="页面地址#锚点名">超链接</a><!--跳转到空锚点，导致返回页面顶部-->
<a href="#">超链接</a>
HTML-超链接锚点笔记相关推荐
- HTML-12：超链接锚点定位
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" ...
- web前端基础——超链接（dw笔记版）
语法结构 <a href="目标网址">链接的文字 </a> 实例: <ol> <li><a href="https ...
- php a标签设置颜色,css超链接锚文本A标签下划线颜色改变
css a超链接下划线设置装备摆设必要色采,鼠标悬停超链接翰墨字体上时下划线颜色窜改,字体色调波动 下划线样式: text-decoration:underline 下划线text-decoratio ...
- 用html语句超链接锚点使用,HTML 锚点超链接
先介绍下场景: 我做了一个博客管理 首页界面如下: 标题是超链接,点击标题,进入博客详情页面: 博客标题下面有一个"返回"超链接,点击回到博客列表,超链接代码: 返回 说明:com ...
- 超链接 —— 锚点链接
锚点链接: 点我们点击链接, 可以快速定位到页面中的某个位置 在链接文本的 href 属性中, 设置属性值为 #名字 的形式, 如 <a href="two"> 第2集 ...
- UE4 超链接使用学习笔记
首先打开这个插件 用这个控件在右边位置输入URL即可有效果 效果如下:
- html超链接点击状态改变背景颜色,div css鼠标悬停锚文本超链接文字背景颜色或图片变化...
css鼠标悬停超链接文字上时背景改变,鼠标经过文字链接时(悬停),文字的背景图片发生改变(出现背景图片或背景颜色). 鼠标经过悬停在超链接文字上时背景颜色或背景图片出现或改变教程篇. 此DIV CSS ...
- 《Web前端开发之HTML+CSS精英课堂【渡一教育】》文档版笔记（完结）
这个笔记本来是想先上文档版的,但由于里面有些标签会导致显示不出来,所以之前只上了个思维导图版的. 时隔好久,想发篇markdown版的博文时,一进来就看见这篇文档版的草稿,顺便学下markdown的写 ...
- [HTML]HTML学习笔记
文章目录 前言 0. 编辑器 vs code 1. HTML语法规范 1.1. 基本语法概述 1.2. 标签关系 2. HTML基本结构标签 2.1. 第一个HTML 3. vs code 3.1. ...
最新文章
- 在SunOS5.8/solaris7上使用Xerces-C解析器
- MongoDB存储文件之GridFS
- C++之‘nullptr’ was not declared in this scope
- php myadmin怎么用,关于apachemysqlphpmyadmin的安装与配置
- TensorFlow 实例一：线性回归模型
- c语言程序设计课程设计心得体会,C语言程序课程设计心得体会
- hadoop hive集群_Hive的优化和压缩
- C#读取数据库返回泛型集合（DataSetToList）
- snprintf/strncpy/strlcpy速度测试
- 惠普HP LaserJet 1160 驱动
- 没想到！2018微信年度数据报告显示使用最多的表情竟是...
- 外卖联盟高级API - 怎么让小程序跳转到美团小程序领红包并下单
- 01[自制油猴插件]去掉烦人的外链提醒
- 软件需求收集、挖掘和分析方法
- 全球及中国有机莴笋种子行业供给需求与十四五产能规模预测报告2022版
- 旧电脑更新win10日记
- 借助AI人工智能，这家公司能让孩子快乐学琴吗？
- vs 开发 win32 程序，调出控制台那个黑乎乎的窗口，方便调试
- python--斗地主
- 你不曾见过的酷炫地图可视化作品（二）