HTML 元素简介

wufei123 2025-01-26 阅读:7 评论:0
本课程深入探讨 html 标签及其在 web 应用中的有效运用。我们将讲解最常用的 html 标签和属性。 段落标签 标签是 HTML 中最常用的元素,用于创建段落。它是一个块级元素,每个段落都另起一行。 <p>这是第一个段...

本课程深入探讨 html 标签及其在 web 应用中的有效运用。我们将讲解最常用的 html 标签和属性。

段落标签

标签是 HTML 中最常用的元素,用于创建段落。它是一个块级元素,每个段落都另起一行。

<p>这是第一个段落。</p>
<p>这是第二个段落,另起一行。</p>

若无

元素,浏览器会忽略多余空格,将文本显示在一行。

这是第一个段落。这是第二个段落,另起一行。

代码演示 ↗

段落内换行需使用
元素 (无需闭合标签)。

<p>
  这是第一个段落。<br>
  这是第二个段落,另起一行。
</p>

代码演示 ↗

标题标签

文章标题能提升可读性,HTML 文档亦然。HTML 提供六级标题,从

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

代码演示 ↗

一般情况下,

到 足够使用,过多的标题级别 (, ) 会使网页结构过于复杂。

是主标题,每个 HTML 文档仅能有一个 元素,且应概括整个页面内容。

格式化元素

HTML 提供格式化元素来强调文本,例如加粗、斜体或下划线。

<b></b>
<strong></strong>
<i></i>
<em></em>
<mark></mark>
<small></small>
<del></del>
<ins></ins>
<sub></sub>
<sup></sup>

代码演示 ↗

和 效果相同,都使文本加粗,但 表示文本的重要性。

<p>
  lorem ipsum <b>dolor sit</b> amet consectetur
  <strong>adipisicing elit</strong>.
</p>

类似,都使文本斜体,但 表示强调。

<p>lorem ipsum <i>dolor sit</i> amet consectetur <em>adipisicing elit</em>.</p>

元素定义高亮文本。

<p>lorem ipsum <mark>dolor sit</mark> amet consectetur adipisicing elit.</p>

元素定义小号文本。

<p>lorem ipsum <small>dolor sit</small> amet consectetur adipisicing elit.</p>

元素表示删除文本(加删除线), 元素表示插入文本(加下划线)。

<p>
  lorem ipsum <del>dolor sit</del> amet <ins>consectetur adipisicing</ins> elit.
</p>

和 元素分别定义下标和上标。

<p>
  lorem ipsum <sub>dolor sit</sub> amet <sup>consectetur adipisicing</sup> elit.
</p>

为 HTML 元素添加样式

格式化元素的默认样式可能不足以表达其含义,例如 使用下划线表示插入,容易造成混淆。

可以使用 style 属性来改善元素外观:

<p>
  lorem ipsum <del style="color: red;">dolor sit</del> amet
  <ins style="color: green;">consectetur adipisicing</ins> elit.
</p>

这适用于几乎所有 HTML 元素。样式以键值对形式定义:

<p style="key: value;">...</p>

分号 ; 分隔样式声明。

<p style="color: red; text-decoration: underline;">
  lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>

代码演示 ↗

更多样式将在 CSS 部分讲解。

超链接标签

超链接使用 元素定义,连接到其他网页。鼠标悬停时,箭头变为手型。点击链接跳转到 href 属性指定的文档。

<a href="path/to/destination">链接文本</a>

链接默认带下划线并显示为蓝色,点击后变为红色,再次访问则变为紫色。

在工作目录中创建 destination.html 文件:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>destination</title>
</head>
<body>
  <p>这是目标页面。</p>
</body>
</html>

在 index.html 中添加指向 destination.html 的链接:

<p>
  lorem ipsum <a href="/destination.html">dolor sit</a> amet consectetur
  adipisicing elit.
</p>

HTML 元素简介

点击链接后跳转到 destination.html。

HTML 元素简介

在 destination.html 中添加返回链接:

<p>这是目标页面。 <a href="/index.html">返回</a></p>

HTML 元素简介

target="_blank" 属性可在新标签页打开链接:

<a href="/destination.html" target="_blank">链接</a>

代码演示 ↗

链接颜色变化与 CSS 伪类有关,将在 CSS 部分详细讲解。

列表

代码演示 ↗

HTML 有三种列表:有序列表、无序列表和描述列表。

有序列表使用

    元素定义,列表项用
  1. 元素定义。
    <ol>
      <li>苹果</li>
      <li>香蕉</li>
      <li>橙子</li>
    </ol>

    无序列表使用

      元素定义。
      <ul>
        <li>苹果</li>
        <li>香蕉</li>
        <li>橙子</li>
      </ul>

      描述列表由

      元素定义,列表项用
      定义,描述用
      定义。
      <dl>
        <dt>苹果</dt>
        <dd>美味又营养的水果,口感清脆。</dd>
        <dt>香蕉</dt>
        <dd>香甜软糯的水果,富含营养。</dd>
        <dt>橙子</dt>
        <dd>多汁清爽的柑橘类水果,富含维生素 C。</dd>
      </dl>

      布局元素

      HTML 还有一些布局元素用于组织内容,与 CSS 结合使用,创建网页布局。

      • : 定义文档标题部分。
      • : 定义文档的一个部分。
      • : 定义独立的部分。
      • : 定义主要内容之外的内容,例如侧边栏。
      • : 定义页脚部分。
      • ails>: 创建可展开和折叠的选项卡。
      • : 为
        元素创建标题。
      <details>
        <summary>lorem ipsum dolor sit amet consectetur adipisicing elit</summary>
        lorem ipsum dolor sit amet consectetur...
      </details>

      代码演示 ↗

      是通用布局元素,创建块级区域,常用于页面布局。
      <div style="border: 2px black solid;">这是一个 div</div>

      代码演示 ↗

      无 CSS 样式时,布局元素(除

      )外观相同,但与 CSS 结合使用后,它们才能发挥作用。

      块元素与行内元素

      元素总是另起一行,占用全部水平空间(块元素)。 元素则只占用必要空间(行内元素)。

      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit.
        <a href="/">Fuga blanditiis...</a>
        Labore ipsum...
      </p>

      HTML 元素简介

      大多数已讨论元素都是块元素,例如

      、 到 等。 是行内元素的示例,width 和 height 属性对其无效。

      还有许多其他 HTML 元素,本课程无法全部涵盖,更多信息请参考 W3Schools。

      进一步阅读

      • 如何使用 CSS 选择器
      • 什么是语义化 HTML 代码?
      • 如何在 CSS 中居中 div

以上就是HTML 元素简介的详细内容,更多请关注知识资源分享宝库其它相关文章!

版权声明

本站内容来源于互联网搬运,
仅限用于小范围内传播学习,请在下载后24小时内删除,
如果有侵权内容、不妥之处,请第一时间联系我们删除。敬请谅解!
E-mail:dpw1001@163.com

分享:

扫一扫在手机阅读、分享本文

发表评论
热门文章
  • 华为 Mate 70 性能重回第一梯队 iPhone 16 最后一块遮羞布被掀

    华为 Mate 70 性能重回第一梯队 iPhone 16 最后一块遮羞布被掀
    华为 mate 70 或将首发麒麟新款处理器,并将此前有博主爆料其性能跑分将突破110万,这意味着 mate 70 性能将重新夺回第一梯队。也因此,苹果 iphone 16 唯一能有一战之力的性能,也要被 mate 70 拉近不少了。 据悉,华为 Mate 70 性能会大幅提升,并且销量相比 Mate 60 预计增长40% - 50%,且备货充足。如果 iPhone 16 发售日期与 Mate 70 重合,销量很可能被瞬间抢购。 不过,iPhone 16 还有一个阵地暂时难...
  • 酷凛 ID-COOLING 推出霜界 240/360 一体水冷散热器,239/279 元

    酷凛 ID-COOLING 推出霜界 240/360 一体水冷散热器,239/279 元
    本站 5 月 16 日消息,酷凛 id-cooling 近日推出霜界 240/360 一体式水冷散热器,采用黑色无光低调设计,分别定价 239/279 元。 本站整理霜界 240/360 散热器规格如下: 酷凛宣称这两款水冷散热器搭载“自研新 V7 水泵”,采用三相六极马达和改进的铜底方案,缩短了水流路径,相较上代水泵进一步提升解热能力。 霜界 240/360 散热器的水泵为定速 2800 RPM 设计,噪声 28db (A)。 两款一体式水冷散热器采用 27mm 厚冷排,...
  • 惠普新款战 99 笔记本 5 月 20 日开售:酷睿 Ultra / 锐龙 8040,4999 元起

    惠普新款战 99 笔记本 5 月 20 日开售:酷睿 Ultra / 锐龙 8040,4999 元起
    本站 5 月 14 日消息,继上线官网后,新款惠普战 99 商用笔记本现已上架,搭载酷睿 ultra / 锐龙 8040处理器,最高可选英伟达rtx 3000 ada 独立显卡,售价 4999 元起。 战 99 锐龙版 R7-8845HS / 16GB / 1TB:4999 元 R7-8845HS / 32GB / 1TB:5299 元 R7-8845HS / RTX 4050 / 32GB / 1TB:7299 元 R7 Pro-8845HS / RTX 2000 Ada...
  • python中def什么意思

    python中def什么意思
    python 中,def 关键字用于定义函数,这些函数是代码块,执行特定任务。函数语法为 def (参数列表)。函数可以通过其名字和圆括号调用。函数可以接受参数作为输入,并在函数体中使用参数名访问。函数可以使用 return 语句返回一个值,它将成为函数调用的结果。 Python 中 def 关键字 在 Python 中,def 关键字用于定义函数。函数是代码块,旨在执行特定任务。 语法 def 函数定义的语法如下: def (参数列表): # 函数体 示例 定义...
  • python中int函数的用法

    python中int函数的用法
    int() 函数将值转换为整数,支持多种类型(字符串、字节、浮点数),默认进制为 10。可以指定进制数范围在 2-36。int() 返回 int 类型的转换结果,丢弃小数点。例如,将字符串 "42" 转换为整数为 42,将浮点数 3.14 转换为整数为 3。 Python 中的 int() 函数 int() 函数用于将各种类型的值转换为整数。它接受任何可以解释为整数的值作为输入,包括字符串、字节、浮点数和十六进制表示。 用法 int(object, base=10) 其中...