3-html基本标签

文章目录

• • 1. 标题
  • 2. 段落
  • 3. 空格
  • 4. HTML 链接
  • 5. 图像
  • 6. 强调
  • 7. 空元素

1. 标题

HTML 标题（Heading）是通过h1到h6标签来定义的。h是英文header标题的缩写;

<h1>一级标题</h1>
<h2>二级标题</h2>
... 
<h6>六级标题</h6>

效果如下：

一级标题

二级标题

…

六级标题

2. 段落

HTML 段落是通过标签p来定义的，P是英文paragraph段落的缩写，经常被用来创建一个段落。

例：

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

效果如下：

这是一个段落。

这是另外一个段落。

---

下面这个实例讲述了标题和段落的结构层次：

<h1>三国演义</h1>
<p>罗贯中</p>
<h2>第一回 宴桃园豪杰三结义 斩黄巾英雄首立功</h2>
<p>话说天下大势，分久必合，合久必分。</p>

<h2>第二回 张翼德怒鞭督邮 何国舅谋诛宦竖</h2>
<p>且说董卓字仲颖</p>

<h3>却说张飞</h3>
<p>却说张飞饮了数杯闷酒</p>

注意：

• 每个页面应该只使用一次h1，作为主标题，其他标题位于层次结构中的下方。
• 其次，请确保在层次结构中以正确的顺序使用标题。不要使用h3来表示副标题，却用h2来表示副副标题，这是没有意义的，会导致奇怪的结果。
• 最后，尽量在每个页面中标题级别的使用不超过三个，除非是特殊情况，在这种情况下，如果可能，建议将内容分散在多个页面上。

3. 空格

下面的两个代码片段是等价的：

<p>这 是 一 个 程 序</p>
<p>这 是        一        个
    程 序</p>

效果：

这 是 一 个 程 序

这 是 一 个 程 序

可以看出，HTML解释器会将连续出现的多个空格字符减少为一个单独的空格符。

4. HTML 链接

HTML 链接是通过标签a来定义的。a标签既可以用来链接到外部地址实现页面跳转功能，也可以链接到当前页面的某部分实现内部导航功能。

例：

<a href="https://www.baidu.com">这是一个百度链接</a>

效果如下：

这是一个百度链接

​

5. 图像

HTML 图像是通过标签img来定义的。使用img元素来为你的网站添加图片，使用src 属性指向一个图片的具体地址。

举例如下：(这是上一篇文章其中一张图片地址)

<img src="https://img-blog.csdnimg.cn/20200727090944536.png" >

效果如下：

请注意：img元素是自关闭元素，不需要结束标记。

img 还有属性 width 和 height，用于控制图片的宽高

例如：

<img src="https://img-blog.csdnimg.cn/20200727090944536.png" width="206" height="136">

效果如下：

6. 强调

• 斜体，使用em或 i 标签，例如：

  <p>I am <em>glad</em> you weren't <em>late</em>.</p>
  <p>I am <i>glad</i> you weren't <i>late</i>.</p>
  

  效果：

  I am glad you weren't late.

  I am glad you weren't late.

• 粗体，使用 strong或 b标签：

  <p>I am <strong>glad</strong> you weren't <strong>late</strong>.</p>
  <p>I am <b>glad</b> you weren't <b>late</b>.</p>
  

  效果：

  I am glad you weren't late.

  I am glad you weren't late.

7. 空元素

HTML 空元素即为没有内容的 HTML 元素。

HTML 空元素应该在开始标签中关闭。

HTML 的一个空元素为 <br>（用于定义换行），<br> 元素没有关闭标签。

HTML 空元素的关闭方法是在开始标签中添加斜杠，比如 <br/>

<br> 标签的使用：

<p> 我爱html<br> 我爱python<br> 我爱java<br>我爱c++</p>

效果：

我爱html
我爱python
我爱java
我爱c++