网页开发 HTML-CSDN博客

本文链接：https://blog.csdn.net/ultramand/article/details/141949942

HTML 常用标签及其示例

标签	用途	例子
`<html>`	定义整个HTML文档的根元素。	`<html>`…`</html>`
`<head>`	包含文档的元数据，如标题、脚本和样式表。	`<head>`…`</head>`
`<title>`	定义文档的标题，显示在浏览器标签页上。	`<title>Page Title</title>`
`<body>`	包含文档的所有内容，如文本、图片、视频等。	`<body>`…`</body>`
`<h1>` to `<h6>`	定义HTML文档中的标题。`<h1>` 是最高级别，`<h6>` 是最低级别。	`<h1>This is a Heading</h1>` `<h2>This is a Subheading</h2>`
`<p>`	定义一个段落。	`<p>This is a paragraph.</p>`
`<a>`	定义超链接，用于链接到另一个页面或文件。	`<a href="https://www.example.com">Link text</a>`
`<img>`	定义图像。	`<img src="image.jpg" alt="Description">`
`<ul>`	定义无序列表。	`<ul>` `<li>Item 1</li>` `<li>Item 2</li>` `</ul>`
`<ol>`	定义有序列表。	`<ol>` `<li>First item</li>` `<li>Second item</li>` `</ol>`
`<li>`	定义列表项，用于`<ul>`、`<ol>`等列表标签中。	参见`<ul>`和`<ol>`的例子。
`<div>`	定义文档中的一个分隔区块或区域。	`<div>This is a division.</div>`
`<span>`	用于对文档中的行内元素进行分组。	`<span style="color:red;">Red text</span>`
`<header>`	定义文档或节的页眉。	`<header>`…`</header>`
`<footer>`	定义文档或节的页脚。	`<footer>`…`</footer>`
`<main>`	定义文档的主要内容。	`<main>`…`</main>`
`<article>`	定义页面独立的内容区域。	`<article>`…`</article>`
`<section>`	定义文档中的一个独立部分。	`<section>`…`</section>`
`<nav>`	定义导航链接的部分。	`<nav>`…`</nav>`
`<aside>`	定义页面内容之外的内容（比如侧边栏）。	`<aside>`…`</aside>`
`<audio>`	定义音频内容。	`<audio controls>` `<source src="audio.mp3" type="audio/mpeg">`

标签	用途	例子
`<figure>`	定义一个独立的流内容，比如图片、图表、代码等。	`<figure>`…`</figure>`
`<figcaption>`	定义 `<figure>` 元素的标题或说明。	`<figcaption>This is a caption.</figcaption>`
`<canvas>`	定义图形，比如图表和其他图像。	`<canvas id="myCanvas" width="200" height="100"></canvas>`
`<map>`	定义图像映射，即带有可点击区域的图像。	`<map name="mymap">` `<area shape="rect" coords="0,0,100,100" href="https://www.example.com">` `</map>`
`<meter>`	定义度量衡。	`<meter value="2.5" min="0" max="10">2.5 out of 10</meter>`
`<progress>`	定义任何类型的任务的进度。	`<progress value="30" max="100"></progress>`
`<time>`	定义日期或时间。	`<time datetime="2023-01-01T12:00:00">January 1, 2023</time>`
`<data>`	定义机器可读的数据。	`<data value="42">The answer to life, the universe, and everything</data>`
`<output>`	定义不同类型的输出，比如脚本的输出。	`<output>Result: 42</output>`
`<video>`	定义视频或影片内容。	`<video width="320" height="240" controls>` `<source src="movie.mp4" type="video/mp4">` `Your browser does not support the video tag.` `</video>`
`<source>`	定义媒体资源的来源。	`<source src="movie.ogg" type="video/ogg">`
`<embed>`	定义嵌入的内容，比如插件。	`<embed src="plugin.swf" width="320" height="240">`
`<object>`	定义嵌入的对象，比如插件。	`<object data="plugin.swf" width="320" height="240">`
`<param>`	定义 `<object>` 或 `<embed>` 标签的参数。	`<param name="movie" value="plugin.swf">`
`<script>`	定义客户端脚本。	`<script>`…`</script>`
`<noscript>`	定义当脚本不运行时显示的替代内容。	`<noscript>Please enable JavaScript to view this content.</noscript>`

简单示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>HTML 标签示例</title>
<style>
  body {
    font-family: Arial, sans-serif;
  }
  figure {
    float: left;
    margin: 0 1em 1em 0;
  }
  figure img {
    width: 100%;
    height: auto;
  }
  figcaption {
    font-style: italic;
    font-size: 0.8em;
  }
</style>
</head>
<body>

<h1>HTML 标签示例</h1>

<figure>
  <img src="image.jpg" alt="描述图像内容">
  <figcaption>这是一个图片和它的描述。</figcaption>
</figure>

<canvas id="myCanvas" width="200" height="100"></canvas>

<map name="mymap">
  <area shape="rect" coords="0,0,100,100" href="https://www.example.com">
</map>

<meter value="2.5" min="0" max="10">2.5 out of 10</meter>

<progress value="30" max="100"></progress>

<time datetime="2024-12-17T12:00:00">Guo 12, 1998</time>

<data value="42">Hello HTML World！！！</data>

<output>Result: 66</output>

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

<source src="movie.ogg" type="video/ogg">

<script>
  // JavaScript代码
</script>

<noscript>Please enable JavaScript to view this content.</noscript>

</body>
</html>