泓熠 (HY)
Copyright © 2026, 泓熠 (HY).
Permission is granted to copy, distribute and/or modify this document under the terms of the GNU Free Documentation License, Version 1.3 or any later version published by the Free Software Foundation; with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts.
源码文件扩展名.html
<!-- 独行、行尾、行内、多行注释, 不可写于标签名中 -->↲
<!DOCTYPE html> <!-- HTML5声明 -->
<
html <!-- HTML主开始标签 -->
lang="zh-CN"˽ <!-- 中文中国 -->
<!-- lang="en" --> <!-- 英文 -->
<!-- lang="en-US" --> <!-- 英文美国-->
<!-- lang="zh-Hans" --> <!-- 简体中文 -->
<!-- lang="zh-Hant" --> <!-- 繁体中文 -->
/
>
<head> <!-- 文档头开始标签 -->
<
meta
charset="UTF-8"˽ <!-- 声明文件编码格式 -->
charset="ASCII"
charset="GBK"
charset="UTF-16"
charset="BIG5"
/
> <!-- 元信息标签 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <!-- 兼容IE8设置 -->
<meta name="rander" content="webkit" /> <!-- 针对双核浏览器启用webkit内核 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <!-- 优化移动端设备网页显示 -->
<meta name="keywords" content="这是关键词A, 这是关键词B" />
<meta name="description" content="这是网站描述" />
<meta name="author" content="这是作者姓名" />
<meta name="generator" content="这是网页生成工具" />
<meta name="copyright" content="这是版权信息" />
<
meta
name="robots"
content="index" <!-- 索引 -->
content="noindex" <!-- 不索引 -->
content="follow" <!-- 跟踪 -->
content="nofollow" <!-- 不跟踪 -->
content="all" <!-- 所有页面 -->
content="none" <!-- 无 -->
content="archive" <!-- 归档 -->
content="noarchive" <!-- 不归档 -->
/
> <!-- 对爬虫机器人的设置 -->
<
meta
httpequiv="refresh"
content="10"
content="10;url=https:/www.baidu.com"
/
> <!-- 刷新设置 -->
<title>这里是标题</title> <!-- 浏览器页签栏的标题 -->
<link rel="icon" href="./favicon.ico"> <!-- 设置网页图标 -->
</head>
<body> <!-- 文档体开始标签 -->
<!-- 文档体内容 -->
</body>
</html>
一个或多个回车或空格都渲染成一个空格
<!-- 样式与逻辑标签 -->
<style></style> <!-- CSS标签, 规范放在head标签里 -->
<script></script> <!-- JavaScript标签 -->
<!-- 标题与段落 -->
<h1></h1> <!-- 一级标题块标签, 规范只写一个 -->
<h2></h2> <!-- 二级标题块标签, h2-h6可写多个, h1-h6不能互相嵌套 -->
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
<p></p> <!-- 段落块标签, p标签内不能嵌套块标签 -->
<!-- 块标签 -->
<div></div> <!-- 无语义容器块标签 -->
<header></header> <!-- 头部块标签 -->
<footer></footer> <!-- 底部块标签 -->
<nav></nav> <!-- 导航块标签 -->
<article></article> <!-- 独立文章块标签 -->
<section></section> <!-- 文节块标签 -->
<aside></aside> <!-- 侧边栏块标签 -->
<blockquote></blockquote> <!-- 长引用块标签 -->
<address></address> <!-- 地址信息块标签 -->
<br /> <!-- 换行块单标签, 单标签规范后面有斜杠表示自结束 -->
<hr /> <!-- 分割线块单标签 -->
<pre></pre> <!-- 原格式块标签 -->
<!-- 行内标签 行内标签内不能嵌套块标签 -->
<span></span> <!-- 无语义容器行内标签 -->
<em></em> <!-- 重点内容行内标签 -->
<strong></strong> <!-- 特殊重点内容行内标签 -->
<mark></mark> <!-- 标记行内标签 -->
<cite></cite> <!-- 书名行内标签 -->
<dfn></dfn> <!-- 术语行内标签 -->
<del></del> <!-- 行内元素, 删除的文本 -->
<ins></ins> <!-- 行内元素, 插入的文本 -->
<code></code> <!-- 代码行内标签 -->
<samp></samp> <!-- 提取行内标签 -->
<kbd></kbd> <!-- 键入行内标签 -->
<sub></sub> <!-- 下标行内标签 -->
<sup></sup> <!-- 上标行内标签 -->
<abbr title="全称内容"></abbr> <!-- 简称行内标签 -->
<
bdo˽
dir="ltr"
<!-- dir="rtl" -->
></bdo> <!-- 调序行内标签 l: left, t: to, r: right-->
<var></var> <!-- 变量行内标签 -->
<small></small> <!-- 附则行内标签 -->
<b></b> <!-- 关键字行内标签 -->
<i></i> <!-- 话语/图标行内标签 -->
<u></u> <!-- 反差行内标签 -->
<q></q> <!-- 短引用行内标签 -->
<
a˽
href=""˽
herf="https://example.com" <!-- 点击跳转链接 相对路径或绝对路径 -->
herf="javascript:alert(666);" <!-- javascript链接 -->
herf="mailto:10000@qq.com" <!-- mailto链接 -->
herf="tel:10010" <!-- tel链接 -->
herf="sms:10010" <!-- sms链接 -->
target="_self" <!-- 在当前标签页中打开链接 -->
target="_blank" <!-- 在新标签页中打开链接 -->
download <!-- 是否点击下载 省略即否 -->
download="file.mp4" <!-- 以file.mp4文件名下载文件 -->
></a> <!-- 行内标签, a标签可包裹任何标签包括块标签, 除了不能包裹自身 -->
<div name="name_1">第一个锚点</div>↲ <!-- name和id不能重复, 若重复的后写的失效, 先入为主 -->
<div id="name_2">第二个锚点</div>
<
iframe˽
src="https://example.com"˽ <!-- 援引链接 相对路径或绝对路径 -->
width="900"˽ <!-- 宽度 -->
height="400"˽ <!-- 高度 -->
frameborder="0" <!-- 无边框 省略即无 -->
<!-- frameborder="1" --> <!-- 有边框 -->
></iframe> <!-- 框架行内块标签 -->
<!-- 通过a标签控制iframe标签中的内容 -->
<a href="https://www.baidu.com" target="container">Display Baidu</a>
<a href="https://www.qq.com" target="container">Display Tencent</a>
<iframe name="container"></iframe>
<!-- 通过form标签控制iframe标签中的内容 -->
<form action="https://so.toutiao.com/search" target="container">
<input type="text" name="keyword">
<button>Search</button>
</form>
<iframe name="container"></iframe>
<
img
width="100"˽ <!-- 宽度 -->
heigh="100"˽ <!-- 高度 宽高省略其一则按比例缩放 都省略则为原始尺寸 -->
alt="图片描述"˽
src="./figure/01.png"˽ <!-- 图片路径 相对路径或绝对路径或base64编码 -->
/
> <!-- 图片行内块单标签 -->
<
video
src="./media/example.mp4" <!-- 视频文件路径 相对路径或绝对路径 -->
controls <!-- 控制进度条 省略即无 -->
muted <!-- 静音 省略即否 -->
autoplay <!-- 自动播放 省略即否 视频媒体参与度高时才能视频有声自动播放 Chrome浏览器在chrome://media-engagement中设置 -->
loop
poster=".figure/image.png" <!-- 封面图片路径 -->
preload="auto" <!-- 预加载自动 省略即自动 -->
preload="none" <!-- 不预加载 -->
preload="metadata" <!-- 预加载元数据 -->
></video> <!-- 视频标签 -->
<
audio˽
src="./media/example.mp3"˽ <!-- 音频文件路径 相对路径或绝对路径-->
controls˽ <!-- 控制进度条 省略即无 --></audio>
autoplay <!-- 自动播放 省略即无 -->
loop
preload="auto"˽ <!-- 预加载 省略即自动-->
preload="none" <!-- 不预加载-->
preload="metadata" <!-- 仅预加载元数据 -->
></audio> <!-- 音频标签 -->
<
meter˽
max="100"
min="0"
value="10"
low="10"
high="30"
optimum="90"
></meter>
<
progress˽
max="100"
value="20"
></progress>
<ruby>
<span>魑魅魍魉</span> <!-- 汉字 -->
<rt>chi mei wang liang</rt> <!-- 注音 -->
</ruby>
<ol> <!-- ol和ul的子元素最好只有li -->
<li>有序列表第一条</li>
<li>有序列表第二条</li>
</ol>
<ul>
<li>无序列表第一项</li>
<li>无序列表第二项</li>
</ul>
<dl>
<dt>术语词汇表第一项标题</dt>
<dd>术语词汇表第一项描述</dd>
<dd>术语词汇表第一项描述补充</dd>
<dt>术语词汇表第二项标题</dt>
<dd>术语词汇表第二项描述</dd>
</dl>
<
table
border="1" <!-- 边框宽度 -->
border="9" <!-- 当边框宽度大于1时则只作用于最外层边框 -->
width="500"˽ <!-- 表格宽度 -->
height="300"˽ <!-- 表格高度 至少300像素 会拉伸表格主体 -->
cellspacing="1" <!-- 单元格与边框之间的缝隙宽度 -->
cellspacing="0"
>
<caption>表格标题</caption>
<
thead˽
height="300"˽ <!-- 本行单元格高度 -->
align="center"˽ <!-- 水平居中对齐 -->
align="left" <!-- 水平左对齐 -->
align="right" <!-- 水平右对齐 -->
valign="middle" <!-- 竖直居中对齐 -->
valign="top" <!-- 竖直顶端对齐 -->
valign="bottom" <!-- 竖直底端对齐 -->
>
<
tr
height="300"˽ <!-- 单元格高度 -->
align="center"; <!-- 水平居中对齐 -->
align="left" <!-- 水平左对齐 -->
align="right" <!-- 水平右对齐 -->
valign="middle" <!-- 竖直居中对齐 -->
valign="top" <!-- 竖直顶端对齐 -->
valign="bottom" <!-- 竖直底端对齐 -->
>
<
th
width="100" <!-- 宽度 -->
height="300" <!-- 高度 -->
align="center" <!-- 水平居中 -->
align="left" <!-- 水平居左 -->
align="right" <!-- 水平居右 -->
valign="middle" <!-- 竖直居中 -->
valign="top" <!-- 竖直居上 -->
valign="bottos" <!-- 竖直居下 -->
colspan="2" <!-- 跨两列 -->
>1-1</th>
<!-- 1-1跨列, 故删掉1-2 -->
<th>1-3</th>
</tr>
</thead>
<
tbody
height="300"
align="left"
align="center" -->
align="right" -->
valign="middle"
valign="top" -->
valign="bottom" -->
>↲
<
tr
height="300"
align="left"
align="center"
align="right"
valign="middle"
valign="top"
valign="bottom"
>
<
td
width="100"
height="300"
align="left"
align="center"
align="right"
valign="middle"
valign="top"
valign="bottom"
rowspan="2" <!-- 跨两行 -->
>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<!-- 2-1跨行, 故删掉3-1 --> <!-- 跨行跨列后都会往右边挤 -->
<td>3-2</td>
<td>3-3</td>
</tr>
</tbody>
<
tfoot
height="300"
align="left"
align="center" -->
align="right" -->
valign="middle"
valign="top"-->
valign="bottom" -->
>
<tr>
<
td
width="100"
height="300"
align="left"
align="center"
align="right"
valign="middle"
valign="top"
valign="bottom"
>4-1</td>
<td>4-2</td>
<td>4-3</td>
</tr>
</tfoot>
</table>
<
form
action="https://www.baidu.com/s"
target="_self "
target="_blank"
method="get"
method="post"
novalidate
>
<fieldset> <!-- 可对表单控件分组 内嵌表单控件 第一组表单空间 -->
<legend> <!-- 第一组控件标题 --> </legend>
<!-- 第一组表单内容 -->
</fieldset>
<fieldset>↲ <!-- 第二组表单控件 -->
<legend> <!-- 第二组控件标题 --> </legend>
<!-- 第二组表单内容 -->↲
</fieldset>↲
<
label
for="ac"
>Account</label>
<
input
type="text"
name="accout"
id="ac"
value="请输入账号"
placeholder="请输入账号"
disabled
required
autocomplete=on
autofocus
pattern="\w{6}"
/
>
<label>
Password:
<
input
type="password"
name="pwd"
maxlength="10"
value="Please input password"
placeholder="Please input password"
disabled
required
autofocus
pattern="\w{6}"
/
>
</label>
<
input
type="radio"
name="gender"
value="male"
checked
disabled˽ <!-- 禁用项 省略即否 -->
required˽ <!-- 必填项 省略即否-->
autofocus˽ <!-- 自动获取焦点 省略即否 -->
/
>
<
input
type="checkbox"
name="hobby"
value="guitar"
checked
disabled
required
autofocus
/
>
<
input
type="email"˽
type="url" <!-- 链接 -->
type="search" <!-- 搜索 -->
type="tel" <!-- 电话号码 -->
type="color" <!-- 颜色 -->
type="date" <!-- 日期 -->
type="month" <!-- 月份 -->
type="week" <!-- 周 -->
type="time" <!-- 时间 -->
type="datetime-local" <!-- 日期和时间 -->
name="email"
>
<
input
type="number" <!-- 数值 -->
name="number"
step="2" <!-- 步长 -->
max="80" <!-- 上限 -->
min="20" <!-- 下限 -->
>
<
input
type="range" <!-- 范围 -->
name="range"
max="80"
min="20"
value="20"
>
<
input
type="hidden" <!-- 隐藏 -->
name="from"
value="tag"
>
<
textarea
name="other"˽
cols="10"˽ <!-- 宽度 -->
rows="3"˽ <!-- 高度 -->
value="Please input"
placeholder="Please input"
disabled˽ <!-- 不可填 -->
required˽ <!-- 必填 -->
autocomplete=on˽ <!-- 自动完成 -->
autofocus <!-- 自动获取焦点 -->
> <!-- 这里是文本框中的默认内容 --> </textarea>↲
<
select˽
name="place"˽
disabled
>↲
<
option˽
value="bj"˽ <!-- 有value属性则提交value属性的值 没有则提交显示的内容 -->
selected
>北京</option>
<option>上海</option>
</select>
<
input
type="submit"
type="reset"
value="submit botton"
value="reset botton"
disabled
/>
<
button
type="submit"
type="reset" -->
type="button" -->
disabled
>提交按钮</button>
<datalist>
<
option
value="abc"
></option>
<
option˽
value="def"˽
></option>
</datalist>
<details>
<summary>标题</summary>
<!-- 解释内容 -->
</details>
</form>
<!-- 空格 -->
  <!-- 空格 -->
< <!-- < -->
> <!-- > -->
& <!-- & -->
¥ <!-- ￥ -->
© <!-- © -->
× <!-- × -->
÷ <!-- ÷ -->
  <!-- 半角字符宽度 -->
  <!-- 全角字符宽度 -->
基本上所有标签都能用的属性
id <!-- 表示编号, 规范不能重复 -->
class <!-- 表示分类 -->
style <!-- 控制样式 -->
dir <!-- 表示顺序方向 -->
title <!-- 鼠标悬浮显示内容 -->
lang <!-- 给浏览器渲染建议的语言 -->
contenteditable="true" <!-- 可编辑的文字 -->
contenteditable="false" <!-- 不可编辑文字 -->
diaggable="true" <!-- 可拖动的元素 -->
diaggable="false" <!-- 不可拖动的元素 -->
hidden <!-- 隐藏元素不占位 -->
spellcheck="true" <!-- 拼写检查 -->
spellcheck="false" <!-- 不拼写检查 -->
contextmenu <!-- 设置右键菜单 -->
data-* <!-- 存储页面私有定制数据 -->
XHTML规范