Learn-HTML-CSS

Appearance

Return to top
On this page

HTML 常见元素和理解

<head> 元素

  • <meta>
  • <title>
  • <style>
  • <link>
  • <script>
  • <base>

以上元素出现在 <head> 中，<head> 元素提供了关于文档的信息，这些信息不会在网页中显示。这些信息包括网页的标题，它会显示在浏览器的标题栏或标签上，也可以包括关键字和描述等搜索引擎用的元信息。<head> 元素还可以包含到网页所需的样式表和其他资源的链接。

<meta> 元素

在 HTML 中，meta 元素是用于提供有关 HTML 文档的元数据（metadata）的标签。元数据通常不会直接显示在网页上，而是被浏览器或搜索引擎使用，以提供更丰富的用户体验。

meta 元素通常位于 HTML 文档的 head 部分，并且可以包含以下属性：

  • charset：指定文档使用的字符编码
  • name：指定元数据的名称，如 keywords、description、author 等
  • content：指定元数据的值，如关键字列表、网站描述、作者姓名等
  • http-equiv：模拟 HTTP 响应头部，如指定 refresh 值，控制网页自动跳转等

例如，下面的代码展示了一个包含 charset 和 description 属性的 meta 元素：

示例
html
<head>
  <meta charset="UTF-8" />
  <meta name="description" content="这是一个关于HTML中meta元素的示例" />
</head>

<head>
  <meta charset="UTF-8" />
  <meta name="description" content="这是一个关于HTML中meta元素的示例" />
</head>

在上述示例中，第一个 meta 元素指定了文档使用的字符编码为 UTF-8，而第二个 meta 元素指定了文档的描述信息为"这是一个关于 HTML 中 meta 元素的示例"。这些元数据可以帮助搜索引擎了解网页内容，并提供更好的搜索结果。

<meta charset="UTF-8">

<meta charset="UTF-8"> :用于指定 HTML 文档的字符编码方式为 UTF-8。

UTF-8

UTF-8 是一种字符编码标准，可以用来表示世界上大部分语言所使用的字符，包括拉丁字母、汉字、希腊字母、俄语字母等。当浏览器读取 HTML 文档时，它会根据 <meta charset="UTF-8"> 的指示来解析文档中的字符，确保在显示网页时正确地呈现所有的字符。

如果没有指定字符编码方式，浏览器会尝试猜测文档的字符编码方式，但这种方法可能不准确，导致显示出现乱码或者其他问题。因此，在编写 HTML 文档时，建议总是使用 <meta charset="UTF-8"> 指定字符编码方式，以确保网页的正确显示。

<meta name="viewport">

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 标签定义了优化页面视口（viewport）设置，它提供一个可用于调整网页内容视图的区域。这样可以使网站能够自动适应手机屏幕尺寸。

  • width=device-width 属性让宽度（width）与设备的宽度保持一致，即不会放大或缩小内容。
  • initial-scale=1.0 属性定义初始的缩放比例，即在页面已下载完成后，其缩放级别。
  • maximum-scale=1.0 属性定义用户可以缩放的最大程度，即用户无法将内容放大超过 1.0 的比例。
  • user-scalable=no 属性定义用户不能缩放内容。

<base href="/">

<base href="/"> 用来设置站点上所有相对链接的默认基准 URL。它可以减少 HTML 页面上的路径问题（例如在更改顶级文件夹名称后），更改部署 URL 时，需要更改链接代码量和避免 CSS、JavaScript 和图像文件混乱等。它可以在 标签中使用，如下所示：

html
<head>
  <base href="https://www.example.com/" />
  ...
</head>

<head>
  <base href="https://www.example.com/" />
  ...
</head>

任何没有完整路径的相对链接都将从此 base URL 解析。

视口

视口是一个用于描述网页在移动设备上显示大小的区域。浏览器会按照视口的大小来确定网页显示效果，例如缩放等级。

所以，为了确保多种设备上的网页显示效果最佳，开发者需要使用视口 meta 元素来告诉浏览器自己想要的视口大小。这样，浏览器就可以改变缩放等级以适应视口的大小。

html
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<body> 元素

  • <div> / <section>/ <article>/ <aside>/ <header>/ <footer>
  • <p>
  • <span>/ <em>/ <strong>
  • <table>/ <thead>/ <tbody>/ <tr>/ <td>
  • <ul>/ <ol>/ <li>/ <dl>/ <dt>/ <dd>
  • <a>
  • <form>/ <input>/ <select>/ <textarea>/ <button>

以上元素出现在 <body> 中，<body> 元素则包含了网页的实际内容 (将显示给用户的内容)，例如文本、图像和其他元素。<body> 元素的内容会显示在浏览器的主窗口中。

<div> 元素

  • <div> 元素是 HTML 中最常见的布局元素。它代表一个段落或者分块，可以用来容纳其他元素，并对它们进行布局。
  • <div> 元素的语义是非语义化的，也就是说，它本身不具有任何特定的意义。它只是一个容器，用来组织文档中的其他元素。这意味着，如果你只是想将一些元素组织在一起，而不关心这些元素代表什么，那么 <div> 元素就很适合。
  • 更确切地说，当你需要在文档中创建一个区块，并且这个区块不具有特定的语义时，<div> 元素是非常有用的。比如，当你想要将页面分为不同的部分，并对它们进行布局时，可以使用 <div> 元素。
  • 然而，当你需要给文档添加语义时，应该使用有语义的元素，比如 <section>，<srticle>，<sside>，<header>，<footer> 等。这些元素可以更清晰地表示文档的结构，并且对搜索引擎和屏幕阅读器更加友好。

总的来说，<div> 元素是 HTML 中最常用的布局元素，它没有特定的语义，但是非常有用。

新区块元素

<section> <nav> <main> <article> <aside> <header> <footer> 是 HTML5 新增的标签。

  • <header> 元素：表示页面或者页面某一部分的标题区域，通常包含网站的标识、主导航等内容。
  • <nav> 元素：表示导航部分，通常包含站点内的链接，用于指向其他页面或其他部分。
  • <main> 元素：表示页面的主体内容区域，通常包含除页眉、页脚和侧边栏之外的大部分内容。
  • <article> 元素：表示页面或者页面某一部分的独立内容，通常是指具有完整意义的、独立于页面其他部分的文章、博客、评论等。
  • <section> 元素：表示文档的一个区域或者一个章节，通常包含一个标题。
  • <aside> 元素：表示与页面主体内容相关但不是主要内容的部分，通常包含边栏、广告、相关文章、标签云等内容。
  • <footer> 元素：表示页面或者页面某一部分的页脚区域，通常包含版权信息、联系方式、站点地图等内容。

段落元素

HTML 里的 <p> 元素表示一段段落文本。它们定义为块级元素，会以 block 级别在 HTML 页面中展示。

<p> 元素会自动地添加上顶部和底部的外边距（margin），还有和其他块级元素间的距离（padding）。通常情况下，你可以使用 CSS 来控制这些距离的大小，以及文本的样式。

文本格式元素

HTML 中的<span>，<em>，<strong>, <i> 元素都是用来格式化文本的。

  • <span> 元素是一个内联元素，它可以用来为文本的一部分指定样式。它没有默认的样式，但可以通过 CSS 设置样式属性来改变它的外观。
  • <em> 元素：用于强调文本。通常情况下，浏览器会使用斜体来显示 <em> 元素中的文本。
  • <strong> 元素：用于表示更强烈的重点或重要性。通常情况下，使用加粗来显示 <strong> 元素中的文本。
  • <i>元素：用于表示与周围文本不同的一些文字，通常表现为斜体。常用于表示某些术语、技术术语、外国语单词或其他文本片段，这些文本片段不需要引起强调，但需要与周围的文本区别开来。

需要注意的是，这些元素本身并不会自动地给文本设置特定的样式，而是可以通过 CSS 样式表进行自定义，以适应网站设计的需要。

表格元素

表格元素：<table> <thead> <tbody> <tr> <td>

在 HTML 中，<table>元素用于创建表格，表格可以用来展示数据以及其他信息。表格元素有以下几个重要的子元素：

  • <thead>：用于指定表格的头部，通常包含表格的标题和表头行（<tr> 和 <th>）。
  • <tbody>：用于指定表格的主体，通常包含表格的数据行（<tr>）。
  • <tr>：用于指定表格中的行，通常包含一个或多个单元格（<td>）。
  • <td>：用于指定表格中的单元格，通常包含数据和其他内容。
表格元素
css
<table>
  <thead>
    <tr>
      <th>标题1</th>
      <th>标题2</th>
      <th>标题3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>数据1</td>
      <td>数据2</td>
      <td>数据3</td>
    </tr>
    <tr>
      <td>数据4</td>
      <td>数据5</td>
      <td>数据6</td>
    </tr>
  </tbody>
</table>

<table>
  <thead>
    <tr>
      <th>标题1</th>
      <th>标题2</th>
      <th>标题3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>数据1</td>
      <td>数据2</td>
      <td>数据3</td>
    </tr>
    <tr>
      <td>数据4</td>
      <td>数据5</td>
      <td>数据6</td>
    </tr>
  </tbody>
</table>

在这个示例中，<thead>元素包含一个表头行，该行包含三个表头单元格（<th>）。<tbody>元素包含两个数据行，每行都包含三个数据单元格（<td>）。

需要注意的是，<thead>、<tbody>和<tr>元素都是可选的，但是使用它们可以提高表格的可读性和可访问性。<th>元素用于指定表头单元格，而<td>元素用于指定数据单元格，它们有不同的默认样式，但可以通过 CSS 来修改它们的外观。

列表元素

列表元素：<ul> <ol> <li> <dl> <dt> <dd> 元素

在 HTML 中，有几个与列表相关的元素，包括 <ul>、<ol>、<li>、<dl>、<dt> 和 <dd>：

  • <ul> 元素用于创建一个无序列表，列表中的每一项由 <li> 元素表示。列表项默认为带有圆点的标记。
  • <ol> 元素用于创建一个有序列表，列表中的每一项由 <li> 元素表示。列表项默认为带有数字的标记。
  • <li> 元素用于指定列表中的一个项目。<li> 元素必须是嵌套在 <ul> 或 <ol> 元素中才能正常工作。
  • <dl> 元素用于创建一个定义列表，其中每个条目由 <dt> 元素表示，每个条目的定义由一个或多个 <dd> 元素表示。
  • <dt> 元素用于指定定义列表中的一个项目。
  • <dd> 元素用于指定定义列表中项目的定义，可以有一个或多个。

下面是一个示例：

列表元素
css
<ul>
  <li>列表项 1</li>
  <li>列表项 2</li>
  <li>列表项 3</li>
</ul>

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

<dl>
  <dt>项目 1</dt>
  <dd>项目 1 的定义</dd>
  <dt>项目 2</dt>
  <dd>项目 2 的定义</dd>
  <dt>项目 3</dt>
  <dd>项目 3 的定义</dd>
</dl>

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

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

<dl>
  <dt>项目 1</dt>
  <dd>项目 1 的定义</dd>
  <dt>项目 2</dt>
  <dd>项目 2 的定义</dd>
  <dt>项目 3</dt>
  <dd>项目 3 的定义</dd>
</dl>

在这个示例中

  • <ul> 元素创建了一个无序列表
  • <ol> 元素创建了一个有序列表
  • <dl> 元素创建了一个定义列表
    • 每个项目由 <dt> 元素表示
    • 每个项目的定义由一个或多个 <dd> 元素表示。

超链接元素

在 HTML 中，<a> 元素用于创建超链接，它可以将用户导向其他页面、文档、文件、电子邮件地址、电话号码等。

<a> 元素有以下常用属性：

  • href：指定链接目标的 URL。
  • target：指定在哪个窗口中打开链接。
  • rel：指定链接与目标资源之间的关系，如 nofollow 表示搜索引擎不应该跟踪该链接。
  • title：指定链接的标题，该标题会在鼠标悬停时显示出来。
示例
html
<a href="https://www.example.com" target="_blank" rel="nofollow" title="Example">访问示例网站</a>

<a href="https://www.example.com" target="_blank" rel="nofollow" title="Example">访问示例网站</a>

在这个示例中，<a>元素将用户导向 https://www.example.com，并在新窗口中打开该链接。该链接还使用 nofollow 属性告诉搜索引擎不应该跟踪该链接，并使用 title 属性提供了链接的标题。

需要注意的是，<a> 元素是创建超链接的最常用方法之一，但它也可以与 JavaScript 等其他技术结合使用，使其更加灵活和功能强大。

表单元素

表单元素：<form> <input> <select> <textarea> <button> 元素

HTML 中的表单（<form>）元素是用于收集用户输入数据的容器，可以包含各种输入控件，如文本框、下拉列表框等。

  • <input> 元素是最常用的表单控件之一，用于接受用户输入数据。它有多种类型，如文本、密码、单选按钮、多选框、隐藏域等。
  • <select> 元素用于创建下拉列表框，它允许用户从一组预定义的选项中选择一个。可以使用 <option> 元素来定义下拉列表框中的选项。
  • <textarea> 元素用于接受多行文本输入，通常用于让用户输入长文本。
  • <button> 元素用于创建按钮，可以用于提交表单或执行其他操作。 它有三种类型：
    • <button type="submit"> 提交表单
    • <button type="reset"> 重置表单
    • <button type="button"> 普通按钮 (执行自定义操作)

除了上述元素外，HTML 表单还可以包含其他控件，如复选框（<input type="checkbox">）、文件上传（<input type="file">）等，可以根据具体需求来选择合适的控件。