行内元素特点:
- 与其他行内元素共享一行空间
- 宽高由自身决定
- 由于不用来搭建网页结构,所以也无需通过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回车会自动生成模板,引号内输入本地链接
按照之前教程,创建的文件夹内,这是我已有的html文件,上述代码是链接该文件夹下的
05-img.html ,自己写的时候可以按照自己已有文件修改,在引号内部只需输入./即可显示可选文件
如果没有弹出请看之前第一篇文章安装插件
链接页面是否打开新的窗口显示
<a href="./05-img.html" target="_self">img标签页面</a>
<!-- target="_self默认就是这个样子可以不写 -->
<!-- 如果想要在新的选项卡中打开 -->
<a href="./05-img.html" target="_blank">img标签页面</a>
如果说想要全局都为链接在新选项卡中打开
在顶部head内加入上述,此优先级低于body里面自己设置的
如果有哪个链接无需在新选项卡打开
<a href="./05-img.html" target="_self">img标签页面</a>
设置值为_self即可
当页面足够多,出现滚动条的时候,我们看到的成品网页会有“回到顶部”这样的按钮,当然我们自己设计的时候,为了满足客户的需求,回到顶部的效果也是必不可少的
<a href="#">回到顶部</a>
上述简单一行方可解决
锚点:
返回顶部是可以了,那能不能返回到指定的位置呢,答案是当然可以的
所谓锚点,就是给我们要返回的那个元素设置一个id属性,id属性在之前文章也有介绍了
<div id="center">50</div>
在我们一长串的div中,找一个我们想要定位的一个div 设置id
<a href="#center">回到中部</a>
在我们需要的位置写上这么一行代码即可
这时候我们就会发现,选择id属性是用“#”的,具体会在后面css文章中写到
此时会有刚刚接触html的同学提问,100个div难道要一个个写嘛,这么非人类的事情,当然不会有了,即使有,也会有人想方设法去解决,这也是为什么我要写文章的原因,做笔记的同时,分享交流共同进步
100个div 只需要 div
在右侧预览也是可以看到效果的
此外还可以加入自己需要的内容
a标签除了可以跳转当前页面的位置,也可以跳转其他页面
我在另一个页面随便输入50个标签,然后仍然给他一个id,返回我们按钮的位置
这样即可跳转成功
注意:
一开始我是在35写的id
跳转的是22
这个是几其实无所谓的,因为我们下面只到50,页面铺不满,这时候就会按照刚好铺满的显示,其实我们的代码实现没有问题的
mailto链接
mailto链接是一种html链接,能够设置你电脑中邮件的默认发送信息。但是需要你电脑中安装默认的E-mail软件,类似Microsoft Outlook等等。加入您已经安装了Microsoft Outlook,那么直接点击mailto链接就可以获得默认设置的邮件信息。
有时候我们看到的页面中,比如申诉,举报等需求时,我们通常是给对方发邮件来提交问题
这时候就需要mailto链接
<!-- mailto链接 -->
<a href="mailto:name@email.com">Email</a>
在 name@email.com 处替换我们要发送的目标地址即可
<!-- 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的内容 |
? | 和浏览器地址操作一样,第一个参数符合是? |
& | 其他参数符号是& |
如果有问题欢迎留言交流,共同学习