行内元素特点:

  • 与其他行内元素共享一行空间
  • 宽高由自身决定
  • 由于不用来搭建网页结构,所以也无需通过css指定其宽度
  • 行内元素中不可以嵌套块元素

行内元素:span、a、img、strong、b、i、em、sub、sup...

目前常用的行内元素也就是前三个:span标签 a标签 img标签

span标签可以相比于块级元素div一样,属于无属性的行内元素,

但是不建议在行内元素span里面嵌套div,不会报错,但是显示时候会有一些显示问题

a标签:

a标签为超级链接标签

<!-- 加载本地html文件或页面 -->
    <a href="./05-img.html">img标签页面</a>

这里是在body标签里的内容

在之前文章介绍安装的插件之后,输入a回车会自动生成模板,引号内输入本地链接

html5里的怎么让a标签变成图片 html5中的a标签_html5

按照之前教程,创建的文件夹内,这是我已有的html文件,上述代码是链接该文件夹下的

05-img.html ,自己写的时候可以按照自己已有文件修改,在引号内部只需输入./即可显示可选文件

html5里的怎么让a标签变成图片 html5中的a标签_a标签_02

如果没有弹出请看之前第一篇文章安装插件

链接页面是否打开新的窗口显示

<a href="./05-img.html" target="_self">img标签页面</a>
    <!-- target="_self默认就是这个样子可以不写 -->
    <!-- 如果想要在新的选项卡中打开 -->
    <a href="./05-img.html" target="_blank">img标签页面</a>

 如果说想要全局都为链接在新选项卡中打开

html5里的怎么让a标签变成图片 html5中的a标签_行内元素_03

在顶部head内加入上述,此优先级低于body里面自己设置的

如果有哪个链接无需在新选项卡打开

<a href="./05-img.html" target="_self">img标签页面</a>

设置值为_self即可

html5里的怎么让a标签变成图片 html5中的a标签_行内元素_04

当页面足够多,出现滚动条的时候,我们看到的成品网页会有“回到顶部”这样的按钮,当然我们自己设计的时候,为了满足客户的需求,回到顶部的效果也是必不可少的

<a href="#">回到顶部</a>

 上述简单一行方可解决

锚点:

返回顶部是可以了,那能不能返回到指定的位置呢,答案是当然可以的

所谓锚点,就是给我们要返回的那个元素设置一个id属性,id属性在之前文章也有介绍了

<div id="center">50</div>

html5里的怎么让a标签变成图片 html5中的a标签_行内元素_05

 在我们一长串的div中,找一个我们想要定位的一个div 设置id

<a href="#center">回到中部</a>

在我们需要的位置写上这么一行代码即可

这时候我们就会发现,选择id属性是用“#”的,具体会在后面css文章中写到

此时会有刚刚接触html的同学提问,100个div难道要一个个写嘛,这么非人类的事情,当然不会有了,即使有,也会有人想方设法去解决,这也是为什么我要写文章的原因,做笔记的同时,分享交流共同进步

100个div 只需要 div

html5里的怎么让a标签变成图片 html5中的a标签_html_06

 在右侧预览也是可以看到效果的

html5里的怎么让a标签变成图片 html5中的a标签_a标签_07

 此外还可以加入自己需要的内容

a标签除了可以跳转当前页面的位置,也可以跳转其他页面

html5里的怎么让a标签变成图片 html5中的a标签_a标签_08

 我在另一个页面随便输入50个标签,然后仍然给他一个id,返回我们按钮的位置

html5里的怎么让a标签变成图片 html5中的a标签_行内元素_09

 这样即可跳转成功

注意:

一开始我是在35写的id

html5里的怎么让a标签变成图片 html5中的a标签_行内元素_10

跳转的是22

html5里的怎么让a标签变成图片 html5中的a标签_a标签_11

 这个是几其实无所谓的,因为我们下面只到50,页面铺不满,这时候就会按照刚好铺满的显示,其实我们的代码实现没有问题的

mailto链接

mailto链接是一种html链接,能够设置你电脑中邮件的默认发送信息。但是需要你电脑中安装默认的E-mail软件,类似Microsoft Outlook等等。加入您已经安装了Microsoft Outlook,那么直接点击mailto链接就可以获得默认设置的邮件信息。

有时候我们看到的页面中,比如申诉,举报等需求时,我们通常是给对方发邮件来提交问题

这时候就需要mailto链接

<!-- mailto链接 -->
    <a href="mailto:name@email.com">Email</a>

在 name@email.com 处替换我们要发送的目标地址即可

html5里的怎么让a标签变成图片 html5中的a标签_html_12

 

<!-- mailto链接 -->
    <a href="mailto:name@email.com">Email</a>

 在引号内部按照需求可替换参数,如果同时需求不同参数,用 ?连接

参数

描述

mailto:name@email.com

电子邮件收件人地址

cc=name@email.com

抄送地址

bcc=name@email.com

密件抄送地址

subject=subject text

e-mail的题目

body=body text

e-mail的内容

?

和浏览器地址操作一样,第一个参数符合是?

&

其他参数符号是&

 如果有问题欢迎留言交流,共同学习