python测试开发---HTML标签

最新推荐文章于 2024-09-26 11:55:47 发布

面包会有的，牛奶也会有的。

最新推荐文章于 2024-09-26 11:55:47 发布

阅读量994

点赞数 26

文章标签： python html 开发语言

本文链接：https://blog.csdn.net/weixin_54641346/article/details/142331836

版权

HTML（超文本标记语言）是用于创建网页的一种标记语言。HTML使用标签（tags）来定义页面的结构和内容。这些标签通常成对出现，有一个开始标签和一个结束标签。以下是一些常见的HTML标签及其用途：

1. 基本结构标签

<!DOCTYPE html>  <!-- 声明文档类型，定义HTML版本 -->
<html>           <!-- 根元素，所有内容都包含在其中 -->
  <head>        <!-- 包含元数据，比如标题、样式、脚本等 -->
    <title>网页标题</title>   <!-- 网页标题，显示在浏览器标签页上 -->
  </head>
  <body>        <!-- 页面主体内容 -->
    <h1>这是标题</h1>        <!-- 标题标签，h1是最大的标题 -->
    <p>这是一个段落。</p>    <!-- 段落标签，用于文本内容 -->
  </body>
</html>

2. 常见的文本标签

<h1>主标题</h1>              <!-- 一级标题 -->
<h2>副标题</h2>              <!-- 二级标题 -->
<p>这是一个段落。</p>        <!-- 段落 -->
<strong>加粗文本</strong>   <!-- 粗体文字，强调 -->
<em>斜体文本</em>            <!-- 斜体文字，语义上的强调 -->

3. 链接与图像标签

<a href="https://www.example.com">这是一个链接</a>  <!-- 超链接 -->
<img src="image.jpg" alt="图片描述">                 <!-- 图像 -->

4. 列表标签

<ul>                           <!-- 无序列表 -->
  <li>项目1</li>
  <li>项目2</li>
</ul>

<ol>                           <!-- 有序列表 -->
  <li>第一项</li>
  <li>第二项</li>
</ol>

5. 表格标签

<table>                        <!-- 表格 -->
  <tr>                         <!-- 表格行 -->
    <th>标题1</th>             <!-- 表格表头 -->
    <th>标题2</th>
  </tr>
  <tr>
    <td>内容1</td>             <!-- 表格单元格 -->
    <td>内容2</td>
  </tr>
</table>

6. 表单标签

<form action="/submit" method="post">    <!-- 表单 -->
  <label for="name">姓名:</label>
  <input type="text" id="name" name="name">  <!-- 输入框 -->
  <input type="submit" value="提交">        <!-- 提交按钮 -->
</form>

7. 其他常用标签

<div>这是一个块级元素</div>    <!-- 用于分块的容器 -->
<span>这是一个内联元素</span>  <!-- 内联容器 -->

8. 多媒体标签

HTML 支持嵌入多媒体元素，如视频和音频。

视频标签

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  您的浏览器不支持视频标签。
</video>

controls: 显示播放控件（播放、暂停等）。
source: 指定视频的文件路径及格式。

音频标签

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  您的浏览器不支持音频标签。
</audio>

9. iframe 标签

<iframe> 用于嵌入另一个 HTML 页面到当前页面中。

<iframe src="https://www.example.com" width="600" height="400">
  您的浏览器不支持 iframe 标签。
</iframe>

10. 元数据标签

这些标签位于 <head> 标签内，通常不显示在页面上，但对 SEO、页面描述和其他用途很重要。

<meta charset="UTF-8">                       <!-- 定义文档字符集 -->
<meta name="description" content="页面描述"> <!-- 描述页面 -->
<meta name="keywords" content="HTML, CSS">   <!-- SEO关键字 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 响应式设计 -->

11. 语义化标签

HTML5 引入了许多语义化的标签，这些标签不仅有助于开发者理解网页结构，还提升了搜索引擎的可读性。

<header>网站头部内容</header>               <!-- 页眉 -->
<nav>导航栏内容</nav>                       <!-- 导航栏 -->
<section>这是一个内容区块</section>         <!-- 区块内容 -->
<article>这是文章内容</article>             <!-- 文章主体 -->
<aside>这是侧栏内容</aside>                 <!-- 侧栏信息 -->
<footer>网站底部内容</footer>               <!-- 页脚 -->

12. 表单高级标签

HTML5 添加了一些新的表单输入类型和属性，用于提升用户体验。

<form action="/submit" method="post">
  <label for="email">电子邮件:</label>
  <input type="email" id="email" name="email" required> <!-- 电子邮件输入框 -->
  
  <label for="birthday">生日:</label>
  <input type="date" id="birthday" name="birthday"> <!-- 日期选择器 -->
  
  <label for="quantity">数量:</label>
  <input type="number" id="quantity" name="quantity" min="1" max="5"> <!-- 数字输入框 -->
  
  <input type="submit" value="提交">
</form>

type="email": 指定输入框为电子邮件地址格式。
type="date": 提供日期选择器。
type="number": 限制输入为数字，并可以设置 min 和 max 限制。

13. Canvas 标签

<canvas> 标签用于绘制图形，通过 JavaScript 来操作。

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
  您的浏览器不支持 canvas 标签。
</canvas>

<script>
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  ctx.moveTo(0, 0);
  ctx.lineTo(200, 100);
  ctx.stroke();
</script>

<canvas> 标签通过 JavaScript 可以绘制形状、图像等，是创建动态图形的强大工具。

14. DataList 标签

<datalist> 标签与 <input> 结合使用，提供用户输入时的建议选项。

<label for="browsers">选择浏览器:</label>
<input list="browsers" id="browser" name="browser">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
  <option value="Edge">
</datalist>

当用户开始在输入框中输入时，会出现 <datalist> 中定义的建议列表。

15. `<details>` 和 `<summary>` 标签

这两个标签用于创建可展开和折叠的内容。

<details>
  <summary>更多信息</summary>
  这是隐藏的内容，点击上面的“更多信息”查看。
</details>

16. 脚本与样式标签

内联脚本

<script>
  alert("欢迎访问我的网站！");
</script>

外部脚本

<script src="script.js"></script> <!-- 引用外部JavaScript文件 -->

内联样式

<style>
  body {
    background-color: lightblue;
  }
</style>

外部样式

<link rel="stylesheet" href="styles.css"> <!-- 引用外部CSS文件 -->

17. 注释

HTML 中的注释不会显示在页面上，但对开发者有用。

<!-- 这是一个注释 -->

18. 引用和代码相关标签

<blockquote>这是一个引用的段落。</blockquote> <!-- 引用块 -->
<q>这是行内引用。</q>                           <!-- 行内引用 -->
<pre>预格式化的文本</pre>                        <!-- 保持格式的文本 -->
<code>代码片段</code>                            <!-- 行内代码 -->
<kbd>用户输入</kbd>                              <!-- 表示键盘输入 -->

19. `<mark>` 和 `<time>` 标签

HTML5 引入了更多用于文本内容语义化的标签。

<mark>这是标记的文本</mark>    <!-- 高亮显示的文本 -->
<time datetime="2023-09-18">昨天</time> <!-- 标识时间或日期 -->

20. `<progress>` 和 `<meter>` 标签

这些标签用于展示进度和测量。

<progress value="70" max="100">70%</progress> <!-- 进度条 -->

<meter min="0" max="100" value="70">70%</meter> <!-- 衡量 -->