425 lines
18 KiB
HTML
425 lines
18 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>html格式大全</title>
|
||
</head>
|
||
<body>
|
||
<header>
|
||
<h1>现代浏览器支持的HTML元素大全</h1>
|
||
<h2>by-树萌芽(=・ω・=)</h2>
|
||
<h2>（零）页头区域 (header)</h2>
|
||
<p>本页面展示所有现代浏览器支持的HTML元素，不使用CSS和JavaScript</p>
|
||
<nav>
|
||
<h2>一.页面导航</h2>
|
||
<ul>
|
||
<li><a href="#text">文本内容</a></li>
|
||
<li><a href="#sections">内容分区</a></li>
|
||
<li><a href="#media">媒体内容</a></li>
|
||
<li><a href="#tables">表格元素</a></li>
|
||
<li><a href="#forms">表单元素</a></li>
|
||
<li><a href="#interactive">交互元素</a></li>
|
||
<li><a href="#semantic">语义元素</a></li>
|
||
<li><a href="#other">其他元素</a></li>
|
||
</ul>
|
||
</nav>
|
||
</header>
|
||
|
||
<main>
|
||
<section id="text">
|
||
<h2>二.文本内容元素</h2>
|
||
|
||
<h3>标题元素</h3>
|
||
<h1>标题级别 1 (h1)</h1>
|
||
<h2>标题级别 2 (h2)</h2>
|
||
<h3>标题级别 3 (h3)</h3>
|
||
<h4>标题级别 4 (h4)</h4>
|
||
<h5>标题级别 5 (h5)</h5>
|
||
<h6>标题级别 6 (h6)</h6>
|
||
|
||
<h3>段落与文本</h3>
|
||
<p>这是一个段落 (p)</p>
|
||
<hr>
|
||
<p>上面是一条水平线 (hr)</p>
|
||
<br>
|
||
<p>上面是一个换行 (br)</p>
|
||
<pre>
|
||
预格式化文本 (pre)
|
||
保留空格和换行
|
||
like this
|
||
</pre>
|
||
<blockquote>
|
||
这是一个块引用 (blockquote)，用于引用较长内容
|
||
<cite>引用来源 (cite)</cite>
|
||
</blockquote>
|
||
<p>行内引用: <q>这是一个短引用 (q)</q></p>
|
||
|
||
<h3>文本修饰元素</h3>
|
||
<!--<p>-->
|
||
<p><b>粗体文本 (b)</b</p>
|
||
<p><strong>重要文本 (strong)</strong></p>
|
||
<p><i>斜体文本 (i)</i></p>
|
||
<p><em>强调文本 (em)</em></p>
|
||
<p><u>下划线文本 (u)</u></p>
|
||
<p><mark>标记文本 (mark)</mark></p>
|
||
<p><small>较小文本 (small)</small></p>
|
||
<p><del>删除文本 (del)</del></p>
|
||
<p><ins>插入文本 (ins)</ins></p>
|
||
<p><sub>下标文本 (sub)</sub></p>
|
||
<p><sup>上标文本 (sup)</sup></p>
|
||
<p><abbr title="Abbreviation">缩写 (abbr)</abbr></p>
|
||
<p><dfn>定义术语 (dfn)</dfn></p>
|
||
<p><kbd>键盘输入 (kbd)</kbd></p>
|
||
<p><samp>示例输出 (samp)</samp></p>
|
||
<p><var>变量 (var)</var></p>
|
||
<p><code>代码片段 (code)</code></p>
|
||
<p><time datetime="2023-10-01">时间元素 (time)</time></p>
|
||
<p><data value="123">数据元素 (data)</data></p>
|
||
<p><ruby>注音<rt>zhù yīn</rt> (ruby)</ruby></p>
|
||
<!--</p>-->
|
||
|
||
<h3>列表元素</h3>
|
||
<h4>无序列表 (ul)</h4>
|
||
<ul>
|
||
<li>列表项 (li) 1</li>
|
||
<li>列表项 (li) 2</li>
|
||
<li>列表项 (li) 3</li>
|
||
</ul>
|
||
|
||
<h4>有序列表 (ol)</h4>
|
||
<ol>
|
||
<li>第一项</li>
|
||
<li>第二项</li>
|
||
<li>第三项</li>
|
||
</ol>
|
||
|
||
<h4>描述列表 (dl)</h4>
|
||
<dl>
|
||
<dt>术语 (dt)</dt>
|
||
<dd>描述 (dd)</dd>
|
||
<dt>HTML</dt>
|
||
<dd>超文本标记语言</dd>
|
||
<dt>CSS</dt>
|
||
<dd>层叠样式表</dd>
|
||
</dl>
|
||
</section>
|
||
|
||
<section id="sections">
|
||
<h2>（三）内容分区元素</h2>
|
||
<article>
|
||
<header>
|
||
<h3>文章元素 (article)</h3>
|
||
</header>
|
||
<p>文章内容，独立的自包含内容</p>
|
||
<footer>文章页脚</footer>
|
||
</article>
|
||
|
||
<section>
|
||
<h3>章节元素 (section)</h3>
|
||
<p>文档中的一个章节</p>
|
||
</section>
|
||
|
||
<aside>
|
||
<h3>侧边栏元素 (aside)</h3>
|
||
<p>与周围内容相关但不是主要内容的部分</p>
|
||
</aside>
|
||
|
||
<div>
|
||
<h3>通用容器 (div)</h3>
|
||
<p>没有语义含义的通用容器元素</p>
|
||
</div>
|
||
|
||
<address>
|
||
<h3>联系信息 (address)</h3>
|
||
<p>作者/所有者联系信息</p>
|
||
</address>
|
||
|
||
<main>
|
||
<h3>主要内容 (main)</h3>
|
||
<p>文档的主要内容区域</p>
|
||
</main>
|
||
</section>
|
||
|
||
<section id="media">
|
||
<h2>（四）媒体元素</h2>
|
||
|
||
<h3>图片元素 (img)</h3>
|
||
<img src="https://via.placeholder.com/150" alt="占位图片" width="150" height="150">
|
||
|
||
<h3>图形元素 (figure 和 figcaption)</h3>
|
||
<figure>
|
||
<img src="https://via.placeholder.com/300x100" alt="示例图形" width="300" height="100">
|
||
<figcaption>图形的标题 (figcaption)</figcaption>
|
||
</figure>
|
||
|
||
<h3>音频元素 (audio)</h3>
|
||
<audio controls>
|
||
<source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" type="audio/mpeg">
|
||
您的浏览器不支持 audio 元素。
|
||
</audio>
|
||
|
||
<h3>视频元素 (video)</h3>
|
||
<video width="320" height="240" controls>
|
||
<source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
|
||
您的浏览器不支持 video 元素。
|
||
</video>
|
||
|
||
<h3>画布元素 (canvas)</h3>
|
||
<canvas id="myCanvas" width="200" height="100">
|
||
您的浏览器不支持 canvas 元素。
|
||
</canvas>
|
||
|
||
<h3>矢量图形 (svg)</h3>
|
||
<svg width="100" height="100">
|
||
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
|
||
您的浏览器不支持 SVG
|
||
</svg>
|
||
|
||
<h3>嵌入内容 (embed, iframe, object)</h3>
|
||
<h4>嵌入元素 (embed)</h4>
|
||
<embed src="https://via.placeholder.com/200x100" width="200" height="100">
|
||
|
||
<h4>内联框架 (iframe)</h4>
|
||
<iframe src="https://example.com" title="示例页面" width="300" height="150">
|
||
您的浏览器不支持 iframe
|
||
</iframe>
|
||
|
||
<h4>对象元素 (object)</h4>
|
||
<object data="https://via.placeholder.com/250x100" width="250" height="100">
|
||
替代文本
|
||
</object>
|
||
|
||
<h4>图片映射 (map 和 area)</h4>
|
||
<img src="https://via.placeholder.com/300x200" alt="示例图片" usemap="#examplemap" width="300" height="200">
|
||
<map name="examplemap">
|
||
<area shape="rect" coords="0,0,150,100" alt="矩形区域" href="#">
|
||
<area shape="circle" coords="225,150,50" alt="圆形区域" href="#">
|
||
</map>
|
||
|
||
<h4>轨道路径 (track)</h4>
|
||
<p>track 元素通常与 video 或 audio 元素一起使用，用于字幕等</p>
|
||
|
||
<h4>图片源 (picture 和 source)</h4>
|
||
<picture>
|
||
<source media="(min-width: 800px)" srcset="https://via.placeholder.com/800x200">
|
||
<source media="(min-width: 400px)" srcset="https://via.placeholder.com/400x200">
|
||
<img src="https://via.placeholder.com/200x200" alt="响应式图片">
|
||
</picture>
|
||
</section>
|
||
|
||
<section id="tables">
|
||
<h2>（五）表格元素</h2>
|
||
<table border="1">
|
||
<caption>表格标题 (caption)</caption>
|
||
<colgroup>
|
||
<col span="2" style="background-color: #f0f0f0">
|
||
</colgroup>
|
||
<thead>
|
||
<tr>
|
||
<th>表头单元格 (th)</th>
|
||
<th>表头单元格 (th)</th>
|
||
<th>表头单元格 (th)</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>表格数据 (td)</td>
|
||
<td>表格数据 (td)</td>
|
||
<td>表格数据 (td)</td>
|
||
</tr>
|
||
<tr>
|
||
<td>表格数据 (td)</td>
|
||
<td>表格数据 (td)</td>
|
||
<td>表格数据 (td)</td>
|
||
</tr>
|
||
</tbody>
|
||
<tfoot>
|
||
<tr>
|
||
<td colspan="3">表格页脚 (tfoot)</td>
|
||
</tr>
|
||
</tfoot>
|
||
</table>
|
||
</section>
|
||
|
||
<section id="forms">
|
||
<h2>（六）表单元素</h2>
|
||
<form action="#" method="post">
|
||
<fieldset>
|
||
<legend>表单标题 (legend)</legend>
|
||
|
||
<label for="text">文本输入 (input type="text"):</label>
|
||
<input type="text" id="text" name="text" placeholder="请输入文本"><br><br>
|
||
|
||
<label for="password">密码输入 (input type="password"):</label>
|
||
<input type="password" id="password" name="password"><br><br>
|
||
|
||
<label for="email">邮箱输入 (input type="email"):</label>
|
||
<input type="email" id="email" name="email"><br><br>
|
||
|
||
<label for="url">URL输入 (input type="url"):</label>
|
||
<input type="url" id="url" name="url"><br><br>
|
||
|
||
<label for="number">数字输入 (input type="number"):</label>
|
||
<input type="number" id="number" name="number" min="1" max="10"><br><br>
|
||
|
||
<label for="range">范围输入 (input type="range"):</label>
|
||
<input type="range" id="range" name="range" min="0" max="100"><br><br>
|
||
|
||
<label for="date">日期输入 (input type="date"):</label>
|
||
<input type="date" id="date" name="date"><br><br>
|
||
|
||
<label for="time">时间输入 (input type="time"):</label>
|
||
<input type="time" id="time" name="time"><br><br>
|
||
|
||
<label for="color">颜色选择 (input type="color"):</label>
|
||
<input type="color" id="color" name="color"><br><br>
|
||
|
||
<label for="file">文件上传 (input type="file"):</label>
|
||
<input type="file" id="file" name="file"><br><br>
|
||
|
||
<label>单选按钮 (input type="radio"):</label><br>
|
||
<input type="radio" id="option1" name="option" value="1">
|
||
<label for="option1">选项 1</label><br>
|
||
<input type="radio" id="option2" name="option" value="2">
|
||
<label for="option2">选项 2</label><br><br>
|
||
|
||
<label>复选框 (input type="checkbox"):</label><br>
|
||
<input type="checkbox" id="check1" name="check1" value="1">
|
||
<label for="check1">复选框 1</label><br>
|
||
<input type="checkbox" id="check2" name="check2" value="2">
|
||
<label for="check2">复选框 2</label><br><br>
|
||
|
||
<label for="select">下拉选择 (select 和 option):</label>
|
||
<select id="select" name="select">
|
||
<option value="">请选择</option>
|
||
<option value="1">选项 1</option>
|
||
<option value="2">选项 2</option>
|
||
<option value="3">选项 3</option>
|
||
</select><br><br>
|
||
|
||
<label for="datalist">数据列表 (datalist):</label>
|
||
<input list="browsers" id="datalist" name="datalist">
|
||
<datalist id="browsers">
|
||
<option value="Chrome">
|
||
<option value="Firefox">
|
||
<option value="Safari">
|
||
<option value="Edge">
|
||
</datalist><br><br>
|
||
|
||
<label for="textarea">文本区域 (textarea):</label><br>
|
||
<textarea id="textarea" name="textarea" rows="4" cols="40">默认文本</textarea><br><br>
|
||
|
||
<label for="output">输出元素 (output):</label>
|
||
<output id="output" name="output">计算结果</output><br><br>
|
||
|
||
<label for="progress">进度条 (progress):</label>
|
||
<progress id="progress" value="70" max="100">70%</progress><br><br>
|
||
|
||
<label for="meter">度量衡 (meter):</label>
|
||
<meter id="meter" value="0.6" min="0" max="1">60%</meter><br><br>
|
||
|
||
<input type="submit" value="提交按钮 (input type='submit')">
|
||
<input type="reset" value="重置按钮 (input type='reset')">
|
||
<input type="button" value="普通按钮 (input type='button')">
|
||
<button type="submit">按钮元素 (button)</button>
|
||
</fieldset>
|
||
</form>
|
||
</section>
|
||
|
||
<section id="interactive">
|
||
<h2>（七）交互元素</h2>
|
||
|
||
<h3>详情和摘要 (details 和 summary)</h3>
|
||
<details>
|
||
<summary>点击查看详情 (summary)</summary>
|
||
<p>这是隐藏的详情内容 (details)</p>
|
||
</details>
|
||
|
||
<h3>对话框 (dialog)</h3>
|
||
<dialog open>
|
||
<p>这是一个对话框 (dialog)</p>
|
||
<form method="dialog">
|
||
<button>关闭</button>
|
||
</form>
|
||
</dialog>
|
||
|
||
<h3>菜单 (menu)</h3>
|
||
<menu>
|
||
<li><button>菜单项 1</button></li>
|
||
<li><button>菜单项 2</button></li>
|
||
</menu>
|
||
</section>
|
||
|
||
<section id="semantic">
|
||
<h2>（八）语义元素</h2>
|
||
|
||
<p>我们已经展示了大部分语义元素，这里补充一些：</p>
|
||
|
||
<h3>导航区域 (nav)</h3>
|
||
<p>已经在页面顶部使用了 nav 元素</p>
|
||
|
||
<h3>页眉页脚 (header, footer)</h3>
|
||
<p>已经在页面中使用了 header 和 footer 元素</p>
|
||
|
||
<h3>时间元素 (time)</h3>
|
||
<p>会议时间：<time datetime="2023-10-01T09:00">2023年10月1日 09:00</time></p>
|
||
|
||
<h3>标记元素 (mark)</h3>
|
||
<p>搜索关键词：<mark>HTML5</mark> 是网页标准</p>
|
||
|
||
<h3>旁注元素 (aside)</h3>
|
||
<p>已经在内容分区中展示</p>
|
||
</section>
|
||
|
||
<section id="other">
|
||
<h2>（九）其他元素</h2>
|
||
|
||
<h3>模板元素 (template)</h3>
|
||
<template id="myTemplate">
|
||
<p>这是一个模板内容，不会在页面加载时显示</p>
|
||
</template>
|
||
|
||
<h3>脚本相关 (noscript)</h3>
|
||
<noscript>
|
||
<p>您的浏览器不支持 JavaScript 或已禁用</p>
|
||
</noscript>
|
||
|
||
<h3>标题组 (hgroup)</h3>
|
||
<hgroup>
|
||
<h3>主标题</h3>
|
||
<h4>副标题</h4>
|
||
</hgroup>
|
||
|
||
<h3>方向性文本 (bdi 和 bdo)</h3>
|
||
<p><bdi>隔离文本方向 (bdi)</bdi></p>
|
||
<p><bdo dir="rtl">从右到左的文本 (bdo)</bdo></p>
|
||
|
||
<h3>换行机会 (wbr)</h3>
|
||
<p>这是一个非常长的单词：super<wbr>cali<wbr>fragi<wbr>listic<wbr>expiali<wbr>docious</p>
|
||
|
||
<h3>嵌入对象参数 (param)</h3>
|
||
<p>param 元素与 object 元素一起使用</p>
|
||
|
||
<h3>脚本元素 (script)</h3>
|
||
<p>虽然本页面不使用 JavaScript，但 script 元素是 HTML 的一部分</p>
|
||
|
||
<h3>样式元素 (style)</h3>
|
||
<p>虽然本页面不使用 CSS，但 style 元素是 HTML 的一部分</p>
|
||
|
||
<h3>标题元素 (title)</h3>
|
||
<p>在 head 部分使用，定义页面标题</p>
|
||
|
||
<h3>元数据元素 (meta, link, base)</h3>
|
||
<p>在 head 部分使用，提供文档元数据</p>
|
||
</section>
|
||
</main>
|
||
|
||
<footer>
|
||
<h2>（十）页脚区域 (footer)</h2>
|
||
<p>本页面展示了超过 100 个 HTML 元素，涵盖了现代浏览器支持的大部分元素。</p>
|
||
<p>注意：某些元素（如 dialog）需要特定属性才能正确显示。</p>
|
||
<p><a href="#">返回顶部</a></p>
|
||
</footer>
|
||
</body>
|
||
</html> |