HTML文本标签、图片、路径、超链接与锚点怎么定义
今天小编给大家分享一下HTML文本标签、图片、路径、超链接与锚点怎么定义的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。
1 文本标签
文本标签常嵌套在格式排版标签中，其本身不再包裹别的标签，而是用于包裹某个词，而非大段文字。
| 标签名 | 语义和功能 | 属性 | 单标签or双标签 |
|---|---|---|---|
| em | 强调，默认体现为斜体 | 双标签 | |
| strong | 强调，默认体现为粗体 | 双标签 | |
| del | 表示已删除，默认文字上有删除线 | 双标签 | |
| ins | 表示已插入，默认文字有下划线 | 双标签 | |
| sup | 上标字 | 双标签 | |
| sub | 下标字 | 双标签 |
注：
在HTML规范中
<strong>的强调语气比<em>更强，在实际开发中并未区分，两个都可以用；强调是为了让搜索引擎知道该关键词。<del>和<ins>标签常用于表示原先和现价。<sup>和<sub>可用于表示少量公式的上下脚标，如H2O、1003
2 图片
2.1 img 标签
| 标签名 | 语义和功能 | 属性 | 单标签or双标签 |
|---|---|---|---|
| img | 页面中显示图片 | src：指定图片的路径 alt：图片的替代文字 width：设置图片宽度 height：设置图片高度 |
单标签 |
注：
alt属性的作用：1、搜索引擎可以通过alt属性来判断图片中的内容，便于浏览器搜索；2、图片无法正常显示时显示替代文字，可以知道这是一张什么图片，因而建议为
<img>设置alt属性。width和height假如只设置一个，另一个会根据原图比例自动计算。因而通常只设置一个，假如两个同时设置，需保证比例正确，否侧图片会变形。
2.2 常见的图片格式
jpg / jpeg 压缩
png 无损
gif 动图，损失程度最高
3 绝对路径和相对路径
假如目标文件与当前文件不在同一台计算机中，必需使用绝对路径访问目标文件；
假如目标文件与当前文件在同一台计算机中，使用相对路径会更加方便。
3.1 绝对路径
前台中，指一个文件在网络中的绝对的地址。如：
https://upload.jianshu.io/users/upload_avatars/xxxxx.jpg
3.2 相对路径
./ 表示当前文件所在目录。目标文件在当前文件的同级或者下级时，路径以./开始。./可以省略。
../ 表示当前文件的上一级目录。目标文件在当前文件的上级或者更上级时，路径以../开始。../不可以省略。../表示上一级，../../表示上两级，../../../表示上三级，以此类推。
4 超链接和锚点
4.1 a 标签
| 标签名 | 语义和功能 | 属性 | 单标签or双标签 |
|---|---|---|---|
| a | 设置超链接 | href：设置目标文件地址 target：设置目标文件在当前窗口（值： _self）还是在新窗口（值：_blank）打开name：设置锚点名 |
双标签 |
注：
只有具有了href属性的
<a>标签才是超链接。-
假如href的值为空，则目标文件即为当前文件自己，点击超链接将跳转至该网页本身，因而可以达到刷新页面的效果。
<a href="">刷新当前页面</a>
a 标签中除了包裹文本，也可以包裹图片，即图片也可以作为一个超链接。
4.2 超链接
① 跳转到新的页面
<!-- 地址为.com、.cn结尾的类型，通过该超链接访问的是服务器，服务器会默认返回其首页 --><a href="https://www.jianshu.com/" target="_blank">简书首页</a><!-- 地址为.html结尾的类型，通过该超链接访问的是某个具体的网页，即一个html文件 --><a href="https://www.jianshu.com/xxxxx.html" >某个HTML文件</a>
② 跳转到其余类型的文件
一般浏览器打开的都是html类型的文件。浏览器也可以打开其余类型的文件，基本上文本类型的文件都能打开，如：图片、pdf、视频；但少量不是文本类型的文件，如：.docx、.7z等压缩文件，浏览器不能直接打开，只能下载。
<!-- 打开图片文件 --><a href="images/dog.jpg">dog</a><!-- 打开PDF文件 --><a href="documents/dog.pdf">dog</a><!-- 打开视频文件 --><a href="documents/dog.mp4">dog</a><!-- 下载Word文件 --><a href="documents/dog.docx">dog</a><!-- 下载压缩文件 --><a href="documents/dog.7z">dog</a><!-- 打开markdown文件，但显示为源代码格式 --><a href="documents/dog.md">dog</a>
③ 超链接其余功能
不仅可以在网页上使用，也可以在手机上使用超链接，如：拨打电话、发送短信。
超链接也可以用于打开APP，比方：点击微信分享的淘宝链接，有的手机可以自动跳转至淘宝应用。
<a href="mailto:邮箱地址">发送电子邮件</a><a href="tel：电话号码">拨打电话</a><a href="sms:电话号码">发送短信</a>
4.3 锚点
作用：标记本页面或者其余页面中的某一个位置，用超链接可以跳转至该位置。
点击能跳转至锚点的超链接时，锚点名会显示在网页地址的末尾。
① 如何设置锚点
方法一：通过<a>标签的name属性设置锚点
<a name="锚点名"></a>
方法二：通过给标签设置id属性来设置锚点（任何一个标签都可以）
<div id="锚点名"></div><p id="锚点名"></p>
② 如何跳转至锚点
使用超链接跳转至指定的锚点
<!-- 跳转至本页面的锚点 --><a href="#锚点名"></a><!-- 跳转至其余页面的锚点 --><a href="其余页面的地址#锚点名"></a><!-- 跳转至页面顶部 --><a href="#"></a>
以上就是“HTML文本标签、图片、路径、超链接与锚点怎么定义”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注蜗牛博客行业资讯频道。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：niceseo99@gmail.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
评论