当前位置： 首页 > article >正文

网页开发 HTML

article 2024/9/20 7:08:23

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>

这个例子中，我使用了多个HTML标签来构建一个包含图像、图表、视频和其他元素的综合页面。


http://www.kler.cn/news/294767.html

相关文章：

  • [代码已更新]2024数学建模国赛高教社杯C题:农作物的种植策略 思路代码文章助攻手把手保姆级
  • uniapp网站和微信小程序 添加 百度统计
  • 一起学习LeetCode热题100道（71/100）
  • 大数据时代的技术hive：hive的数据类型和数据模型
  • How can I provide a RGBA png file to OpenAI PHP library
  • 前缀和 — 利用前缀信息解决子数组问题
  • 【Azure Redis】Redis-CLI连接Redis 6380端口始终遇见 I/O Error
  • 实践reflex：项目架构解析
  • 去中心化网络：Web3如何颠覆传统互联网
  • 标准IO与系统IO
  • Java架构师未来篇大模型
  • 新加坡服务器：亚洲地区的优选之选
  • 【软件工程】软件开发模型
  • k8s中的层级结构，及节点组件的作用
  • Termius for Mac/Win：高效、安全的跨平台多协议远程管理软件
  • 黑马点评2——商户查询缓存（P37店铺类型查询业务添加缓存练习题答案）redis缓存、更新、穿透、雪崩、击穿、工具封装
  • 2-85 基于matlab的FrFT下时变幅度LFM信号参数估计
  • ROADM（可重构光分插复用器）-介绍
  • LTE PSS主同步信号搜索 MATLAB实现
  • 开发台球助教小程序前景分析
  • 高效传输秘籍，揭秘Rsync和SCP的优劣，助你做出明智选择！
  • RedisStack十部曲之二：Redis的核心概念
  • （五）vForm 动态表单文件上传、下载
  • 代码随想录算法训练营Day37|完全背包问题、518.零钱兑换II、377. 组合总和 Ⅳ、70. 爬楼梯（进阶版）
  • 连续信号的matlab表示
  • nginx 新建一个 PC web 站点
  • 前端HTML基础笔记
  • Docker数据卷和Dockerfile
  • 集成电路学习：什么是PWM脉冲宽度调制
  • vue通过url下载文件并重命名