坐忘道

Appearance

HTML 标签 ​

文档结构标签 ​

基础结构标签 ​

html
<!DOCTYPE html> <!-- 声明文档类型为 HTML5 -->
<html> <!-- HTML文档的根元素 -->
<head> <!-- 包含文档的元信息 -->
  <meta charset="UTF-8" /> <!-- 定义字符编码 -->
  <title>文档标题</title> <!-- 定义浏览器工具栏标题 -->
</head>
<body> <!-- 包含文档的可见内容 -->
</body>
</html>

内容分区标签 ​

html
<header> <!-- 定义文档或节的页眉 -->
<nav> <!-- 定义导航链接 -->
<main> <!-- 定义文档的主要内容 -->
<article> <!-- 定义独立的自包含内容 -->
<section> <!-- 定义文档中的节 -->
<aside> <!-- 定义页面内容之外的内容(如侧边栏) -->
<footer> <!-- 定义文档或节的页脚 -->

文本内容标签 ​

标题与段落 ​

html
<h1>到<h6> <!-- 定义HTML标题，h1最重要，h6最不重要 -->
<p>段落文本</p> <!-- 定义段落 -->
<br> <!-- 插入单个换行 -->
<hr> <!-- 定义水平线 -->

文本格式化 ​

html
<strong>加粗文本</strong> <!-- 表示重要文本 -->
<em>斜体文本</em> <!-- 表示强调文本 -->
<mark>标记文本</mark> <!-- 定义标记/高亮文本 -->
<small>小号文本</small> <!-- 定义小号文本 -->
<del>删除文本</del> <!-- 定义被删除文本 -->
<ins>插入文本</ins> <!-- 定义被插入文本 -->
<sub>下标文本</sub> <!-- 定义下标文本 -->
<sup>上标文本</sup> <!-- 定义上标文本 -->

引用与代码 ​

html
<blockquote>长引用</blockquote> <!-- 定义长引用 -->
<q>短引用</q> <!-- 定义短引用 -->
<cite>引用来源</cite> <!-- 定义作品标题 -->
<code>代码片段</code> <!-- 定义计算机代码 -->
<pre>预格式化文本</pre> <!-- 保留空格和换行 -->
<kbd>键盘输入</kbd> <!-- 定义键盘输入 -->
<samp>程序输出</samp> <!-- 定义计算机程序输出 -->
<var>变量</var> <!-- 定义变量 -->

多媒体标签 ​

图像与图形 ​

html
<img src="image.jpg" alt="描述" /> <!-- 嵌入图像 -->
<figure> <!-- 定义自包含内容（如图表） -->
  <img src="image.jpg" alt="描述" />
  <figcaption>图片标题</figcaption> <!-- 定义figure的标题 -->
</figure>
<svg> <!-- 定义SVG图形容器 -->
<canvas> <!-- 定义图形绘制画布 -->

音频与视频 ​

html
<audio controls> <!-- 定义音频内容 -->
  <source src="audio.mp3" type="audio/mpeg">
</audio>
<video controls width="250"> <!-- 定义视频内容 -->
  <source src="video.mp4" type="video/mp4">
</video>
<track> <!-- 定义媒体元素的文本轨道 -->

链接与导航标签 ​

html
<a href="url">链接文本</a> <!-- 定义超链接 -->
<link rel="stylesheet" href="styles.css"> <!-- 定义文档与外部资源关系 -->
<nav> <!-- 定义导航链接 -->
  <ul>
    <li><a href="/">首页</a></li>
    <li><a href="/about">关于</a></li>
  </ul>
</nav>

列表标签 ​

有序列表 ​

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

无序列表 ​

html
<ul> <!-- 定义无序列表 -->
  <li>项目一</li>
  <li>项目二</li>
</ul>

定义列表 ​

html
<dl> <!-- 定义描述列表 -->
  <dt>术语</dt> <!-- 定义术语/名称 -->
  <dd>描述</dd> <!-- 定义描述 -->
</dl>

表格标签 ​

html
<table> <!-- 定义表格 -->
  <caption>表格标题</caption> <!-- 定义表格标题 -->
  <thead> <!-- 定义表格头部 -->
    <tr> <!-- 定义表格行 -->
      <th>表头1</th> <!-- 定义表头单元格 -->
      <th>表头2</th>
    </tr>
  </thead>
  <tbody> <!-- 定义表格主体 -->
    <tr>
      <td>数据1</td> <!-- 定义标准单元格 -->
      <td>数据2</td>
    </tr>
  </tbody>
  <tfoot> <!-- 定义表格页脚 -->
    <tr>
      <td>汇总1</td>
      <td>汇总2</td>
    </tr>
  </tfoot>
</table>

表单标签 ​

表单结构 ​

html
<form action="/submit" method="post"> <!-- 定义表单 -->
  <fieldset> <!-- 分组相关表单元素 -->
    <legend>表单组标题</legend> <!-- 定义fieldset标题 -->
  </fieldset>
  <label for="name">姓名:</label> <!-- 定义input元素的标签 -->
</form>

输入控件 ​

html
<input type="text" id="name" name="name"> <!-- 定义输入字段 -->
<input type="password" name="pwd"> <!-- 密码字段 -->
<input type="email" name="email"> <!-- 电子邮件字段 -->
<input type="number" name="quantity"> <!-- 数字输入 -->
<input type="date" name="birthday"> <!-- 日期选择 -->
<input type="checkbox" name="subscribe"> <!-- 复选框 -->
<input type="radio" name="gender" value="male"> <!-- 单选按钮 -->
<input type="file" name="file"> <!-- 文件上传 -->
<input type="submit" value="提交"> <!-- 提交按钮 -->
<input type="reset" value="重置"> <!-- 重置按钮 -->
<input type="button" value="普通按钮"> <!-- 普通按钮 -->
<input type="hidden" name="token" value="abc123"> <!-- 隐藏字段 -->

<textarea name="message" rows="5" cols="30"></textarea> <!-- 多行文本输入 -->
<select name="cars"> <!-- 下拉列表 -->
  <option value="volvo">Volvo</option> <!-- 定义选项 -->
  <option value="saab">Saab</option>
</select>
<datalist id="browsers"> <!-- 定义输入选项列表 -->
  <option value="Chrome">
  <option value="Firefox">
</datalist>
<output name="result"></output> <!-- 定义计算结果 -->
<meter value="2" min="0" max="10">2 out of 10</meter> <!-- 定义度量衡 -->
<progress value="70" max="100">70%</progress> <!-- 定义进度条 -->

交互标签 ​

html
<details> <!-- 定义用户可查看/隐藏的额外细节 -->
  <summary>详细信息</summary> <!-- 定义details的可见标题 -->
  这里是隐藏的内容。
</details>
<dialog open>对话框内容</dialog> <!-- 定义对话框或窗口 -->
<menu> <!-- 定义命令菜单 -->
  <li><button>命令1</button></li>
  <li><button>命令2</button></li>
</menu>

元信息标签 ​

html
<head>
  <meta charset="UTF-8"> <!-- 定义字符编码 -->
  <meta name="description" content="免费在线教程"> <!-- 定义页面描述 -->
  <meta name="keywords" content="HTML,CSS,JavaScript"> <!-- 定义关键词 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 视口设置 -->
  <meta http-equiv="refresh" content="30"> <!-- 每30秒刷新页面 -->
  <base href="https://example.com/" target="_blank"> <!-- 定义所有链接的默认URL和目标 -->
  <style> /* 内部CSS样式 */ </style> <!-- 定义文档样式信息 -->
  <script> /* JavaScript代码 */ </script> <!-- 定义客户端脚本 -->
</head>

其他标签 ​

html
<div>通用容器</div> <!-- 定义文档中的分区或节 -->
<span>内联容器</span> <!-- 定义文档中的内联节 -->
<iframe src="demo.html"></iframe> <!-- 定义内联框架 -->
<embed src="flash.swf" type="application/x-shockwave-flash"> <!-- 定义嵌入内容 -->
<object data="movie.swf" type="application/x-shockwave-flash"></object> <!-- 定义嵌入对象 -->
<param name="autoplay" value="true"> <!-- 定义对象的参数 -->
<template> <!-- 定义隐藏的HTML内容（不立即渲染） -->
  <h2>Flower</h2>
  <img src="flower.jpg">
</template>

HTML5 新增语义标签 ​

html
<time datetime="2023-10-05">10月5日</time> <!-- 定义日期/时间 -->
<mark>高亮文本</mark> <!-- 定义高亮文本 -->
<ruby> <!-- 定义ruby注释（中文注音或字符） -->
  漢 <rt>han</rt>
</ruby>
<bdi>隔离文本方向</bdi> <!-- 隔离可能以不同方向格式化的文本 -->
<wbr> <!-- 定义可能的换行点 -->