2023蓝桥杯备赛 行内标签

Qi_Xtreme
177 阅读4分钟

HTML行内标签

注：部分图片来源于:www.lanqiao.cn/courses

认识a标签

在网页中，经常可以看见一些标签点击后可以跳转到别的页面，在HTML中，使用a标签就可以实现。a标签被称为超链接标签，用于网页之间的跳转，设置书签，链接和电话邮箱等等。

其使用的基本格式：（URL表示链接地址）

<a href="URL"></a>

a标签不仅仅可以跳转到其他页面，也可以用来创建email、电话等等。

其使用格式如下

<a href="mailto:邮箱地址"></a> <a href="tel:电话号码"></a>

在我们平时浏览的百度百科，也可以看见页面对相关内容的分类，点击可以跳跃到对应的内容板块。这个就是文档书签，如下图所示：

image.png

当一个页面内容特别多时，可以通过给页面建立书签的方式，对同一页面里的内容进行链接。这样用户在浏览网页时，可以通过书签进行页面内的内容跳转。

既然要通过超链接的方式访问同一页面的某一位置内容，那么首先要给该位置建立一个书签。

使用以下语法定义书签：

<a name="书签名称">文字</a>

（使用在内容快）

定义了书签后，链接到该书签的超链接，其基本语法为：

<a href="#书签名称">链接点</a>

（使用在标签块）

在 a 标签中还有个 target 属性可以用来规定打开链接文档的位置，它有如下表所示的几种属性值。

属性值描述
_blank在新窗口中打开被链接文档。
_self在相同的框架中打开被链接文档。
_top在整个窗口中打开被链接文档。
_parent在父框架集中打开被链接文档。

其使用格式为：

<a target="_blank|_self|_top|_parent"></a>

认识span标签

span 标签是用来组合文档中行内元素的，比如你在文档中写入一些文字，页面会以默认样式输出这些文字，若我们想给这段话中的某些词语添加不一样的字体颜色，这时我们可以用 span 标签去包裹这些词语，然后通过 span 标签去设置字体颜色。

其使用格式如下：

<span></span>

span 标签就像一个透明的盒子，我们可以把多个盒子放在架子的同一行。

图片描述

span 标签本身没有特殊之处，若不结合 CSS 来使用的话，我们使用其标签就没有意义了。比如：我们的 body 标签中只有一对 span 标签和一些文字内容，可以看到这与不添加标签直接写入文字内容是一样的效果。

<span>1</span> 
<span>2</span> 
<span>3</span>

但当我们使用 CSS 给 span 元素加上背景颜色，同一行的元素就拥有了自己的独特气质。

图片描述

<span style="background-color:cornflowerblue">1</span> 
<span style="background-color: chartreuse;">2</span> 
<span style="background-color: goldenrod;">3</span>
  • style 是设置 CSS 样式的属性。
  • background-color 是设置元素背景颜色的属性，属性冒号后面的内容是背景颜色的属性值。

strong 标签的介绍

平时我们浏览网站，会发现网页上字的粗细是不同的，有时候为了让某些词句成为我们关注的焦点，我们会把文字加粗。例如下面这个页面。 在页面中使用加粗强调了大赛的主题。

在 HTML 中，可以使用 strong 标签来给文字加粗。

使用格式如下：

<strong></strong>

例如：

<strong>塔克拉玛干大沙漠</strong>是中国最大的沙漠。

image.png

img 标签的介绍

在 HTML 中，我们用 img 标签来插入图片，它负责向页面中嵌入一幅图像。

准确来讲，img 标签并不会在页面中真正插入图像，而只是提供一个链接地址，通过链接来显示出图像。所以，img 标签创建的是被引用图像的占位空间。

其使用格式为：

<img src="图像 URL" alt="图像描述" />

属性说明如下：

  • src 属性定义了图像的链接地址。

  • alt 属性则当图像无法显示时，替代显示的文本。

另外，在 img 标签里可以用 width 属性来设置图片的宽度，用 height 属性来设置图片的高度。

我们设置了固定的宽和高后，在不同大小的窗口所看到的图片大小就相同了。

例如： 例如：

<body>
  <img
    src="https://labfile.oss.aliyuncs.com/courses/4421/wijdan-mq-H5yiRXDUkto-unsplash.jpeg"
    alt="礼物"
    width="400px"
    height="270px"
  />
</body>

预览窗口，显示效果：

图片描述

打开 Web 服务，显示效果：

图片描述

可以看到图片是一样大的。

align 属性 align 属性能用来规定如何根据周围的文本来排列图像的位置，其属性值如下所示：

属性值说明
top顶部对齐
bottom底部对齐
middle居中对齐
left居左对齐
right居右对齐

在 img 标签中，还可以使用 title 属性给元素增加额外的提示信息。

当你把鼠标移到元素上会显示出现一段提示文本。

其基本使用格式如下所示：

<img title="提示文本内容" />
avatar
文章
阅读
粉丝