跳到主要内容

常用 HTML 元素

本章将介绍 HTML 中最常用的元素，包括标题、段落、列表、链接、图片等。

标题元素​

HTML 提供六个级别的标题，从 <h1> 到 <h6>：

<h1>一级标题 - 主标题</h1>
<h2>二级标题 - 章节标题</h2>
<h3>三级标题 - 小节标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

使用规范​

  • 每个页面应该只有一个 <h1> 作为主标题
  • 标题级别应该逐级递减，不要跳级
  • 使用标题表示文档结构，而不是为了加粗或改变大小

段落和文本元素​

段落 <p>​

<p>这是一个段落。段落用于组织相关的内容。</p>
<p>这是另一个段落。浏览器会自动在段落之间添加空白间距。</p>

换行 <br>​

<p>第一行<br>第二行<br>第三行</p>

水平线 <hr>​

<p>上面的内容</p>
<hr>
<p>下面的内容</p>

文本格式化元素​

<p><strong>加粗文字</strong> - 表示重要性</p>
<p><b>粗体文字</b> - 仅视觉样式</p>
<p><em>斜体文字</em> - 表示强调</p>
<p><i>斜体文字</i> - 仅视觉样式</p>
<p><u>下划线文字</u></p>
<p><s>删除线文字</s></p>
<p><mark>高亮文字</mark></p>
<p><small>小字文字</small></p>
<p>上标：X<sup>2</sup></p>
<p>下标：H<sub>2</sub>O</p>

<strong> vs <b> 的区别​

  • <strong>：表示内容的重要性，语义化标签
  • <b>：纯视觉样式，没有语义含义

推荐优先使用语义化标签 <strong> 和 <em>。

列表​

无序列表 <ul>​

<ul>
    <li>列表项 1</li>
    <li>列表项 2</li>
    <li>列表项 3</li>
</ul>

有序列表 <ol>​

<ol>
    <li>第一步</li>
    <li>第二步</li>
    <li>第三步</li>
</ol>

列表嵌套​

<ul>
    <li>水果
        <ul>
            <li>苹果</li>
            <li>香蕉</li>
        </ul>
    </li>
    <li>蔬菜
        <ul>
            <li>白菜</li>
            <li>萝卜</li>
        </ul>
    </li>
</ul>

定义列表 <dl>​

用于展示术语定义：

<dl>
    <dt>HTML</dt>
    <dd>超文本标记语言，用于创建网页</dd>
    <dt>CSS</dt>
    <dd>层叠样式表，用于美化网页</dd>
</dl>

链接 <a>​

基本语法​

<a href="https://www.example.com">访问示例网站</a>

属性说明​

属性说明
href链接目标地址
target链接打开方式
title链接提示文字
rel链接与当前页面的关系

链接类型​

外部链接​

<a href="https://www.google.com" target="_blank" rel="noopener noreferrer">
    在新标签页打开 Google
</a>
安全提示

使用 target="_blank" 时，建议添加 rel="noopener noreferrer"，防止新页面访问原页面的 window 对象，同时防止打开钓鱼网站。

内部链接​

<a href="/about.html">关于我们</a>
<a href="./contact.html">联系我们</a>

锚点链接​

<a href="#section2">跳转到第二部分</a>

<h2 id="section2">第二部分</h2>

下载链接​

<a href="/files/document.pdf" download>下载 PDF</a>

邮件链接​

<a href="mailto:[email protected]">发送邮件</a>

图片 <img>​

基本语法​

<img src="image.jpg" alt="图片描述">

属性说明​

属性说明
src图片路径（相对或绝对）
alt图片无法显示时的替代文字
width图片宽度
height图片高度
loading加载方式（lazy/eager）

图片格式​

格式特点适用场景
JPEG有损压缩，体积小照片
PNG支持透明，无损压缩图标、Logo
GIF支持动画简单动画
SVG矢量图，可缩放图标、图形
WebP压缩率高现代浏览器

示例​

<!-- 基础用法 -->
<img src="photo.jpg" alt="风景照片">

<!-- 指定尺寸 -->
<img src="photo.jpg" alt="风景照片" width="800" height="600">

<!-- 懒加载 -->
<img src="photo.jpg" alt="风景照片" loading="lazy">

<!-- 带标题 -->
<figure>
    <img src="photo.jpg" alt="风景照片">
    <figcaption>珠穆朗玛峰日出</figcaption>
</figure>

容器元素​

<div> 和 <span>​

<!-- div 是块级元素，独占一行 -->
<div>
    <h2>标题</h2>
    <p>段落内容</p>
</div>

<!-- span 是行内元素，不独占一行 -->
<p>这是<span style="color: red;">红色</span>的文字</p>

<div> vs <span>​

特性<div><span>
类型块级元素行内元素
换行是否
宽度占满整行由内容决定
常用于布局、结构文本样式

代码相关元素​

行内代码 <code>​

<p>使用 <code>console.log()</code> 输出信息</p>

代码块 <pre>​

<pre>
function hello() {
    console.log("Hello, World!");
}
</pre>

键盘输入 <kbd>​

<p>按 <kbd>Ctrl</kbd> + <kbd>C</kbd> 复制</p>

引用元素​

短引用 <q>​

<p>孔子曰：<q>学而时习之，不亦说乎</q></p>

块引用 <blockquote>​

<blockquote>
    <p>这是引用的内容，可以包含多行文字。</p>
    <cite>—— 引用的来源</cite>
</blockquote>

地址 <address>​

<address>
    作者：张三<br>
    邮箱：<a href="mailto:[email protected]">[email protected]</a>
</address>

时间和日期 <time>​

<p>会议时间：<time datetime="2024-01-15 14:00">2024年1月15日下午2点</time></p>

datetime 属性提供机器可读的日期时间格式。

缩写 <abbr>​

<p><abbr title="超文本标记语言">HTML</abbr> 是网页的基础。</p>

小结​

本章我们学习了：

  1. 标题元素 <h1> 到 <h6> 的使用
  2. 段落和文本格式化元素
  3. 列表元素（有序、无序、定义列表）
  4. 链接 <a> 的各种用法
  5. 图片 <img> 的属性和使用
  6. 容器元素 <div> 和 <span>
  7. 代码和引用相关元素

练习​

  1. 创建一个包含标题、段落和列表的页面
  2. 添加一个带有链接的导航栏
  3. 插入一张图片并添加 alt 属性
  4. 创建一个嵌套列表
  5. 使用 <blockquote> 添加一段引用