HTML文本标签、图片、路径、超链接与锚点怎么定义

蜗牛 互联网技术资讯 2022-04-29 59 0

今天小编给大家分享一下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 锚点

作用:标记本页面或者其余页面中的某一个位置,用超链接可以跳转至该位置。

点击能跳转至锚点的超链接时,锚点名会显示在网页地址的末尾。

HTML文本标签、图片、路径、超链接与锚点怎么定义  html 第1张

① 如何设置锚点

方法一:通过<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进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

评论