HTML

94 阅读5分钟

HTML(HyperText Markup Language,超文本标记语言)是一种用于创建网页的标准标记语言。您可以使用 HTML 来建立自己的 WEB 站点,WEB 应用。HTML 运行在浏览器上,由浏览器来解析。 HTML 文档是由一系列的元素构成,这些元素可以用来包围不同部分的内容,使其以某种方式呈现或者工作。一个典型的 HTML 文档结构如下:

<!DOCTYPE html>
<html>
<head>
  <title>页面标题</title>
</head>
<body>
  <h1>这是一个标题</h1>
  <p>这是一个段落。</p>
  <img src="image.jpg" alt="图像描述">
</body>
</html>
  • <!DOCTYPE html> 声明了文档类型和 HTML 版本(HTML5)。
  • <html> 元素是整个 HTML 文档的根元素。
  • <head> 元素包含了文档的元数据,比如 <title>
  • <body> 元素包含了可见的页面内容,如标题 <h1>、段落 <p> 和图像 <img>。 HTML 元素通常由开始标签(比如 <p>),内容(比如文本),和结束标签(比如 </p>)组成。某些元素,如图像 <img> 标签,是空元素,没有结束标签。 HTML 的版本随着时间的推移而发展。当前广泛使用的版本是 HTML5,它包括了更多的 API 和元素,使得创建富交互性的网页更加容易。

以下是一些标签:

  • <!DOCTYPE html>: 定义文档类型和 HTML 版本。
  • <html>: 根元素,包裹整个页面的内容。
  • <head>: 包含文档的元数据,如标题、字符集声明、样式表链接等。
  • <title>: 定义文档的标题,显示在浏览器标签页上。
  • <body>: 包含可见的页面内容。

基本文本标签

  • <h1> to <h6>: 定义标题,<h1> 是最大的标题,<h6> 是最小的标题。
  • <p>: 定义段落。
  • <br>: 换行。
  • <hr>: 水平线。
  • <pre>: 预格式化文本,保留空格和换行。

格式化文本

  • <strong> 或 <b>: 粗体文本。
  • <em> 或 <i>: 斜体文本。
  • <mark>: 标记文本。
  • <small>: 小号文本。
  • <del>: 删除文本。
  • <ins>: 插入文本。
  • <sub>: 下标文本。
  • <sup>: 上标文本。

链接和图像

  • <a>: 定义超链接。
  • <img>: 定义图像。

列表

  • <ul>: 无序列表。
  • <ol>: 有序列表。
  • <li>: 列表项。
  • <dl>: 定义列表。
  • <dt>: 定义列表中的项目。
  • <dd>: 定义列表中项目的描述。

表格

  • <table>: 定义表格。
  • <tr>: 定义表格中的行。
  • <th>: 定义表格中的表头单元格。
  • <td>: 定义表格中的标准单元格。
  • <caption>: 定义表格标题。

表单

  • <form>: 定义表单。
  • <input>: 定义输入字段,如文本、密码、复选框、单选按钮、提交按钮等。
  • <textarea>: 定义多行文本输入控件。
  • <select>: 定义下拉列表。
  • <option>: 定义下拉列表中的选项。
  • <button>: 定义按钮。

元数据

  • <meta>: 提供关于 HTML 文档的元信息,如字符集、页面描述、关键词等。
  • <link>: 定义文档与外部资源之间的关系,通常用于链接样式表。

分组和分区

  • <div>: 定义文档中的分区或节。
  • <span>: 定义文档中的行内元素或跨度。
  • <header>: 定义文档或节的头部。
  • <footer>: 定义文档或节的页脚。
  • <nav>: 定义导航链接的部分。
  • <main>: 定义文档的主要内容。
  • <section>: 定义文档中的一个节。
  • <article>: 定义独立的、自包含的内容。
  • <aside>: 定义与页面内容略微分离的内容。

媒体

  • <audio>: 定义音频内容。
  • <video>: 定义视频或电影内容。
  • <source>: 为 <audio> 或 <video> 定义媒介源。
  • <embed>: 定义嵌入的内容,如插件。

API

  • <canvas>: 通过脚本(通常是 JavaScript)绘制图形和图形。
  • <script>: 定义客户端脚本。
  • <noscript>: 为不支持脚本的浏览器提供替代内容。

其他

  • <iframe>: 定义内联框架。

  • <object>: 定义嵌入的对象。

  • <svg>: 定义 SVG 图形的容器。

  • 文档元数据

  • <base>: 指定文档中所有相对 URL 的基本 URL。

  • <link>: 用于链接外部资源,如样式表或网站图标。

  • <style>: 用于在文档中嵌入 CSS 样式。

文本内容和引用

  • <blockquote>: 定义长引用。
  • <q>: 定义短的行内引用。
  • <abbr>: 定义缩写或首字母缩略词。
  • <cite>: 定义作品的标题。
  • <dfn>: 定义项目或概念的名词。
  • <address>: 定义联系信息。

图形和媒体

  • <map>: 与 <area> 元素一起使用,定义图像映射。
  • <area>: 定义图像映射内部的区域。
  • <picture>: 提供多个 <source> 元素来为不同的显示/设备场景提供图像版本。

列表

  • <figcaption>: 定义 <figure> 元素的标题或说明。
  • <figure>: 定义自包含的内容,比如图像或图表。

表单和输入

  • <fieldset>: 定义表单中的控件组。
  • <legend>: 定义 <fieldset> 元素的标题。
  • <optgroup>: 定义 <select> 元素中的选项组。
  • <datalist>: 定义 <input> 元素可能的选项列表。
  • <keygen>: 定义生成密钥的表单字段(HTML5 中已废弃)。
  • <output>: 定义表单的输出结果。

编程和交互

  • <canvas>: 通过 JavaScript 绘制图形和动画。
  • <noscript>: 定义当浏览器不支持脚本或脚本被禁用时显示的内容。
  • <script>: 定义客户端脚本。
  • <template>: 定义用于存储客户端内容的 HTML 片段,这些内容在页面加载时不被渲染。

Web 组件

  • <slot>: 作为 Web 组件的一部分,用于定义内容分布的地方。
  • <template>: 用于定义客户端内容的 HTML 片段,这些内容在页面加载时不被渲染。

旧标签和已废弃的标签

  • <center>: 使文本居中(已废弃,应使用 CSS 替代)。
  • <font>: 定义文本的字体、大小和颜色(已废弃,应使用 CSS 替代)。
  • <strike>: 定义加删除线的文本(已废弃,应使用 <del> 或 CSS 替代)。

这些标签中的一些是 HTML5 新增的,而一些则是早期 HTML 版本中使用的,后来被废弃或在 HTML5 中不再推荐使用。在编写现代 HTML 代码时,建议使用语义化的标签和 CSS 来控制样式,而不是使用已废弃的标签。