HTML中的行级元素(常用整理)

上一篇说了HTML的块级元素,这一篇说几个常用的行级元素。
首先说一下行级元素是什么意思。
和相邻的行级元素在同一行,宽度、高度、内边距和外边距的都不可改变。
就是不能设置宽高,并且大小由内容撑开。

一、链接

HTML 超链接(链接)
超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

当您把鼠标指针移动到网页中的某个链接上时,箭头会变为一只小手。

我们通过使用a标签在 HTML 中创建链接。

有两种使用a标签的方式:

通过使用 href 属性 - 创建指向另一个文档的链接
通过使用 name 属性 - 创建文档内的书签

HTML 链接语法:
这个很简单的,我们来写一下例子:

<a href="https://mp.csdn.net/console/article">一个不知名帅哥的博客</a>

运行后在页面显示:
在这里插入图片描述
点击后当前页面就会进入到一个不知名的帅哥的博客界面(嘿嘿)

HTML 链接 - target 属性
使用 Target 属性,你可以定义被链接的文档在何处显示。

下面的这行会在新窗口打开文档:

    <a href="https://mp.csdn.net/console/article" target="_blank">一个不知名帅哥的博客</a>

这样你点击后,就会再打开一个新网页来进入这个帅哥的博客界面。

OK,这就是a标签的使用方法。

二、图像

图像标签(img)和源属性(Src)
在 HTML 中,图像由 img标签定义。

img是空标签,意思是说,它只包含属性,并且没有闭合标签。

要在页面上显示图像,你需要使用源属性(src)。src 指 “source”。源属性的值是图像的 URL 地址。

我们来看一下怎么用:

<br>
    <img src="D:\MyselfCode\dom例子\small.jpg" alt="">

因为是行级元素,所以在前面加了个br,src里面写的是图片的地址。
在这里插入图片描述
替换文本属性(Alt)
alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。

在浏览器无法载入图像时,替换文本属性告诉读者她们失去的信息。此时,浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯,这样有助于更好的显示信息,并且对于那些使用纯文本浏览器的人来说是非常有用的。

例如我把上个例子改一下。

<img src="D:\MyselfCode\dom例子\smal.jpg" alt="图片没有找到呀">

我把路径故意写错,然后在alt中写上文字。
在这里插入图片描述
就会变成这样的。

三、span标签

HTML span元素
HTML span 元素是内联元素,可用作文本的容器。

span 元素也没有特定的含义。

当与 CSS 一同使用时,span 元素可用于为部分文本设置样式属性。

关于span的话,就可以理解为行级元素里面的div。

    <br>
    <span>这是第一个span标签</span>
    <span>这是第二个span标签</span>

然后来看一下吧。
在这里插入图片描述
可以看出没有另起一行。

emmm,关于这篇就说这三个常用的行级元素吧,还有的话,可以放在后面补充。
OK,结束。

©️2020 CSDN 皮肤主题: 精致技术 设计师:CSDN官方博客 返回首页