常见元素

njr大约 6 分钟约 1786 字

HTML 中包含大量元素，本文将介绍一些常用元素。

标题和段落

网页通常由标题和段落组成，在 HTML 中，通过 <h1> ~ <h6> 表示 6 个不同级别的标题，通过 <p> 元素表示基本段落。

提示

h 是 heading 的缩写，p 是 paragraph 的缩写。

标题

<h1>h1标题</h1>
<h2>h2标题</h2>
<h3>h3标题</h3>
<h4>h4标题</h4>
<h5>h5标题</h5>
<h6>h6标题</h6>

段落

<p>基本段落</p>

最佳实践

在编写 HTML 时，需要保证层次结构是合理的。因此需要记住一些最佳实践：

最好只对每个页面使用一次 <h1> —— 这是顶级标题，所有其他标题位于层次结构中的下方。
确保在层次结构中以正确的顺序使用标题。不要使用 <h3> 来表示副标题，后面再跟 <h2> 来表示二级副标题——这是没有意义的，会导致奇怪的结果。
在现有的六个标题层次中，除非觉得有必要，否则应该争取每页使用不超过三个。有很多层次的文件（例如，深层次的标题层次）会变得笨重，难以浏览。在这种情况下，如果可能的话，建议将内容分散到多个页面。

图片

使用 <img> 在页面中嵌入图片元素。如：

图片

<img width="50px" src="/blog/assets/image/frontend/basic/html/002/avatar.jpg" />

列表

列表分为三种：

无序列表（unordered list）
有序列表（ordered list）
描述列表（description list）

无序列表

无序列表用于标记列表项目顺序无关紧要的列表。

每份无序的清单从 <ul>(unordered list) 元素开始，需要包裹清单上所有被列出的项目，然后就是用 <li>(list item) 元素把每个列出的项目单独包裹起来。

注意

无序列表 <ul> 的直接子元素只能是 <li>。

无序列表

<ul>
  <li>豆浆</li>
  <li>油条</li>
  <li>豆汁</li>
  <li>焦圈</li>
</ul>

有序列表

有序列表需要按照项目的顺序列出来。

需要用 <ol>(ordered list) 元素将所有项目包裹，而不是 <ul>。

注意

有序列表 <ol> 的直接子元素也只能是 <li>。

有序列表

<ol>
  <li>豆浆</li>
  <li>油条</li>
  <li>豆汁</li>
  <li>焦圈</li>
</ol>

描述列表

描述列表的目的是标记一组项目及其相关描述，例如术语和定义，或者是问题和答案等。

描述列表使用与其他列表类型不同的闭合标签 —— <dl>(description list)；此外，每一项都用 <dt>(description term) 元素闭合。每个描述都用 <dd>（description definition）元素闭合。

描述列表

<dl>
  <dt>内心独白</dt>
  <dd>戏剧中，某个角色对自己的内心活动或感受进行念白表演。</dd>
  <dd>这些台词只面向观众，而其他角色不会听到。</dd>
  <dt>语言独白</dt>
  <dd>戏剧中，某个角色把自己的想法直接进行念白表演。</dd>
  <dd>观众和其他角色都可以听到。</dd>
  <dt>旁白</dt>
  <dd>
    戏剧中，为渲染幽默或戏剧性效果而进行的场景之外的补充注释念白，只面向观众。
  </dd>
  <dd>内容一般都是角色的感受、想法、以及一些背景信息等。</dd>
</dl>

超链接

使用 <a> 元素可以跳转到另一个链接。如下，可以跳转到本站首页：

提示

a 是 anchor（锚）的缩写。

超链接

<a href="/">首页</a>

<a> 元素有两个常见的属性：

href (Hypertext Reference)：指定要打开的 URL 地址。
target：指定在何处显示链接的资源。
- _self：默认值，在当前窗口打开 URL；
- _blank：在新窗口打开 URL；
- 其它常用于 <iframe> 元素中，不常用。

块级链接

任何内容都可以作为链接，如果想将一个标题作为链接，则可以将标题元素包裹在锚点元素中：

块级链接

<a href="/">
  <h1>本站首页</h1>
</a>

图片链接

如果有需要作为链接的图片，使用 <a> 元素来包裹要引用图片的 <img> 元素。

图片链接

<a href="/">
  <img
    width="50px"
    src="/blog/assets/image/frontend/basic/html/002/avatar.jpg"
  />
</a>

锚点链接

<a> 元素还可以用来做锚点链接，可以跳转到网页中的具体位置：

在要跳转的元素定义一个 id 属性；
定义 <a> 元素，设置它的 href 属性为对应 id。

<h1 id="one">标题</h1>

<a href="#one">首页</a>

电子邮件链接

其最基本和最常用的使用形式为一个指明收件人电子邮件地址的 mailto: 链接。例如：

电子邮件链接

<a href="mailto:wzw15292257101@163.com">向 我 发邮件</a>

实际上，电子邮件地址是可选的。如果 href 属性仅仅只是简单的 mailto:，发送新的电子邮件的窗口也会被用户的邮件客户端打开，只是没有收件人的地址信息，这通常在「分享」链接时起到作用，用户可以给他们选择的地址发送邮件。

最佳实践

使用清晰的链接措辞

好的示例

<a href="/">访问首页</a>

不好的示例

<a href="/">点击这里</a> 访问首页

链接到非 HTML 资源时留下清晰的指示

好的示例

<p>
  <a href="https://www.example.com/large-report.pdf">
    下载销售报告（PDF，大小为 10 MB）
  </a>
</p>

<p>
  <a href="https://www.example.com/video-stream/" target="_blank">
    观看视频（将在新标签页中播放，HD 画质）
  </a>
</p>

在下载链接时使用 `download` 属性

当你链接到要下载的资源而不是在浏览器中打开时，你可以使用 download 属性来提供一个默认的保存文件名。

好的示例

<a
  href="https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang=zh-CN"
  download="firefox-latest-64bit-installer.exe"
>
  下载最新的 Firefox 中文版 - Windows（64 位）
</a>

`<iframe>` 元素

利用 <iframe> 元素可以实现在 HTML 文档中嵌入其他 HTML 文档。

iframe

<iframe
  id="inlineFrameExample"
  title="Inline Frame Example"
  width="300"
  height="200"
  src="https://www.openstreetmap.org/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&layer=mapnik"
>
</iframe>

由于 <iframe> 元素可以嵌套，因此 <a> 元素 target 属性的其他值可以在 <iframe> 元素中生效：

_parent：在父窗口打开 URL；
_top：在顶层窗口打开 URL。

`<div>` 和 `<span>`

提示

div 为 division 的缩写，意为分开，span 以为范围、跨度。

在 Web 发展的早期，由于没有 CSS，因此需要通过语义化的元素告知浏览器一段文字如何显示。

后来出现 CSS，结构和样式开始分离，HTML 只需要负责结构即可。

此时，就出现了 <div> 和 <span> 来编写 HTML 中的所有结构。

<div> 会在不同的行显示，而多个 <span> 包裹的内容会在同一行显示。

iframe

<div>第一部分</div>
<div>第二部分</div>
<div>第三部分</div>

<span>范围一</span>
<span>范围二</span>
<span>范围三</span>