Web基础 – 文本标签与图片标签

发布于 2025-05-21  75 次阅读


h1~h6 标题(Heading)

标题是通过 <h1> - <h6> 标签进行定义的

VSCode 中生成 h1 ~ h6 的快捷键:h$*6

<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>

正确的使用标签 & 标题标签位置属性

确保将标题标签只用于标题有利于网页的 SEO 优化,应将 <h1> 用作主标题(最重要的),其次是 <h2> (次要的),再其次是 <h3> ,以此类推。

标题标签位置默认左居中,标签中添加属性:align="left | center | right" 可以改变对齐位置;

<h1 align="left">左对齐</h1>
<h2 align="center">居中对齐</h2>
<h3 align="right">右对齐</h3>

段落标签(Paragraph)

<p> 标签用于定义一个段落,它是最基本的文本容器

<p>这是一个段落</p>
<p>这是另一个段落</p>

换行标签(Line Break)

<br> 标签用于在不产生新段落的情况下进行换行,<br>是一个空的 HTML 元素

<p>这是一个段落</p>
<p>这是另一个段落</p>
<p>这是第三个段落,<br>它在不产生新段落的情况进行了换行。</p>

水平线标签(Horizontal Line)

<hr> 标签用于定义一条水平线,包括四种基本属性:color、width、size(高度)、align

<p>下面是一条红色,宽度300px,高度5px,居中对齐的水平线</p>
<hr color="red" width="300px" size="5px" align="center">

图片标签(Images)

<img> 标签定义 HTML 页面中的图像,包括五种基本属性:src、alt、title、width、height

<img src="01.jpg" alt="替换文本" title="小鲨猫" width="100px">
<img src="01.jpg" alt="替换文本" title="小鲨猫" width="200px">

超文本链接/锚(Anchor)

<a> 标签用于定义超文本链接,可以通过该标签来跳转到新的文档或当前文档中的某个部分。target="_blank" 属性会打开一个新标签页然后再访问链接。

<a href="https://google.com">点击跳转到百度</a>
<a href="https://google.com" target="_blank">打开一个新标签页</a>
<a href="https://google.com"><img src="01.jpg"></a>

文本样式标签(Text Style)

标签描述
<em>定义着重文字
<b>定义粗体文字
<u>定义下划线文字
<i>定义斜体文字
<strong>定义加重语气
<del>定义删除字
<span>无特定变化
<p>白菜</p>

<em>em着重文字</em>
<i>i斜体文字</i>
<del>del删除线文字</del>
<s>s删除线文字</s>
<u>u下划线文字</u>
<b>b加粗文字</b>
<strong>strong加重语气</strong>
<span>span文字</span>