前言
了解HTML所有标签的用法，并列出基础示例。
一、HTML 所有标签的作用和示例
1. 文档结构标签
<!DOCTYPE>: 声明文档类型<html>: 根元素<head>: 文档头部<body>: 文档主体
<!DOCTYPE html>: 声明文档类型和HTML版本（不是HTML标签，但非常重要）。<html>: 文档的根元素，所有其他HTML元素（除了<!DOCTYPE html>声明）都位于这个元素内部。<head>: 包含了文档的元（meta）数据，如标题、字符集定义、链接到样式表和脚本等。<body>: 包含了可见的页面内容，如文本、图片、视频、音频、表格、列表和链接等。
2. 元数据标签
<meta>: 元数据定义<link>: 外部资源链接<style>: 内部样式定义<base>: 基础URL<title>: 定义了文档的标题，显示在浏览器的标题栏或页面标签上
<meta>: 提供有关HTML文档的元数据，如页面描述、关键词、字符集等。<link>: 定义文档与外部资源的关系，最常见的是链接到CSS样式表。
3. 内容分区（语义化）标签
<header>: 页眉<footer>: 页脚<nav>: 导航链接<section>: 区段<article>: 定义独立的、可复用的内容块（文章）<aside>: 侧边栏<main>: 主内容
4. 文本内容（格式）标签
<h1>to<h6>: 标题<p>: 段落<br>: 换行<hr>: 水平线<pre>: 预格式化文本<blockquote>: 块引用
5. 内联文本语义标签
<a>: 超链接，用于从一个页面链接到另一个页面<strong>: 重要文本（粗体显示）<em>: 强调文本（斜体显示）<mark>: 标记文本<small>: 小号文本<ins>: 插入文本<del>: 删除文本<sup>: 上标文本<sub>: 下标文本
6. 多媒体标签
<img>: 图像<audio>: 音频<video>: 视频<source>: 媒体源<track>: 文本轨道
7. 嵌入内容标签
<iframe>: 内联框架<embed>: 嵌入内容<object>: 嵌入对象（如图像、视频、Java applets、ActiveX、PDF等）
8. 表格标签
<table>: 表格<caption>: 表格标题<thead>: 表头<tbody>: 表体<tfoot>: 表尾<tr>: 表格行<th>: 表头单元格<td>: 表格单元格<li>: 列表项<ul>: 无序列表<ol>: 有序列表
9. 表单标签
<form>: 表单<input>: 输入字段<textarea>: 多行文本输入<button>: 点击按钮<select>: 下拉选择菜单<option>: 选项<label>: 标签<fieldset>: 表单分组<legend>: 分组标题
10. 脚本标签
<script>: 脚本<noscript>: 无脚本
11. 其他标签
<div>: 区块<span>: 内联区块<details>: 细节<summary>: 细节摘要
<div>: 用作块级容器，以通过CSS进行布局和样式化。<span>: 用作内联容器，以通过CSS对文档中的小块内容进行样式化。
二、HTML 所有标签的具体使用示例
1. 文档结构标签
<!DOCTYPE>: 声明文档类型<!DOCTYPE html><html>: 根元素<html lang="en"> </html><head>: 文档头部<head> </head><body>: 文档主体<body> </body>
2. 元数据标签
<meta>: 元数据定义<meta charset="UTF-8"><link>: 外部资源链接<link rel="stylesheet" href="styles.css"><style>: 内部样式定义<style> body { font-family: Arial, sans-serif; } </style><base>: 基础URL<base href="https://www.example.com/"><title>: 文档标题<title>页面标题</title>
3. 内容分区（语义化）标签
<header>: 页眉<header> <h1>欢迎来到我的网站</h1> </header><footer>: 页脚<footer> <p>这是页脚。</p> </footer><nav>: 导航链接<nav> <ul> <li><a href="#section1">部分1</a></li> <li><a href="#section2">部分2</a></li> </ul> </nav><section>: 区段<section id="section1"> <h2>部分1</h2> <p>这是一个段落。</p> </section><article>: 文章<article> <h2>文章标题</h2> <p>文章内容。</p> </article><aside>: 侧边栏<aside> <p>这是一个侧边栏。</p> </aside><main>: 主内容<main> <h2>主内容</h2> <p>这是主内容区域。</p> </main>
4. 文本内容（格式）标签
<h1>to<h6>: 标题<h1>一级标题</h1> <h2>二级标题</h2><p>: 段落<p>这是一个段落。</p><br>: 换行<br><hr>: 水平线<hr><pre>: 预格式化文本<pre>这是预格式化文本。</pre><blockquote>: 块引用<blockquote>这是一个块引用。</blockquote>
5. 内联文本语义标签
<a>: 超链接，用于从一个页面链接到另一个页面<a href="https://www.example.com">这是一个链接</a><strong>: 重要文本（粗体显示）<strong>这是强调文本</strong><em>: 强调文本（斜体显示）<em>这是斜体文本</em><mark>: 标记文本<mark>这是标记文本</mark><small>: 小号文本<small>这是小号文本</small><ins>: 插入文本<ins>这是插入文本</ins><del>: 删除文本<del>这是删除文本</del><sup>: 上标文本<sup>这是上标文本</sup><sub>: 下标文本<sub>这是下标文本</sub>
6. 多媒体标签
<img>: 图像<img src="image.jpg" alt="示例图像"><audio>: 音频<audio controls> <source src="audio.mp3" type="audio/mpeg"> 您的浏览器不支持音频元素。 </audio><video>: 视频<video controls> <source src="video.mp4" type="video/mp4"> 您的浏览器不支持视频元素。 </video><source>: 媒体源<source src="media.mp4" type="video/mp4"><track>: 文本轨道<track kind="subtitles" src="subtitles.vtt" srclang="en" label="English">
7. 嵌入内容标签
<iframe>: 内联框架<iframe src="https://www.example.com"></iframe><embed>: 嵌入内容<embed src="file.pdf" type="application/pdf"><object>: 嵌入对象<object data="file.pdf" type="application/pdf"></object>
8. 表格标签
<table>: 表格<table> <tr> <th>标题1</th> <th>标题2</th> </tr> <tr> <td>数据1</td> <td>数据2</td> </tr> </table><caption>: 表格标题<caption>示例表格</caption><thead>: 表头<thead> <tr> <th>标题1</th> <th>标题2</th> </tr> </thead><tbody>: 表体<tbody> <tr> <td>数据1</td> <td>数据2</td> </tr> </tbody><tfoot>: 表尾<tfoot> <tr> <td>页脚1</td> <td>页脚2</td> </tr> </tfoot><tr>: 表格行<tr> <td>数据1</td> <td>数据2</td> </tr><th>: 表头单元格<th>标题1</th><td>: 表格单元格<td>数据1</td>
9. 表单标签
<form>: 表单<form action="/submit" method="post"> <label for="name">姓名:</label> <input type="text" id="name" name="name"> <textarea id="message" name="message">请输入您的信息...</textarea> <button type="submit">提交</button> </form><input>: 输入控件<input type="text" id="name" name="name"><textarea>: 多行文本输入<textarea id="message" name="message">请输入您的信息...</textarea><button>: 按钮<button type="submit">提交</button><select>: 下拉列表<select id="options" name="options"> <option value="1">选项1</option> <option value="2">选项2</option> </select><option>: 选项<option value="1">选项1</option><label>: 标签<label for="name">姓名:</label><fieldset>: 表单分组<fieldset> <legend>分组标题</legend> <label for="name">姓名:</label> <input type="text" id="name" name="name"> </fieldset><legend>: 分组标题<legend>分组标题</legend>
10. 脚本标签
<script>: 脚本<script src="script.js"></script><noscript>: 无脚本<noscript>您的浏览器不支持JavaScript。</noscript>
11. 其他标签
<div>: 区块<div> <p>这是一个区块。</p> </div><span>: 内联区块<span>这是一个内联区块。</span><details>: 细节<details> <summary>细节摘要</summary> <p>这是细节内容。</p> </details><summary>: 细节摘要<summary>细节摘要</summary>
三、常用基础示例
示例 1: 简单的HTML文档结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>简单的HTML页面</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>这是一个段落。</p >
</body>
</html>
示例 2: 包含无序列表的HTML页面
<!DOCTYPE html>
<html>
<head>
<title>无序列表示例</title>
</head>
<body>
<h2>我的爱好</h2>
<ul>
<li>阅读</li>
<li>编程</li>
<li>旅行</li>
<li>摄影</li>
</ul>
</body>
</html>
示例 3: 表格示例
<!DOCTYPE html>
<html>
<head>
<title>表格示例</title>
</head>
<body>
<h2>学生信息表</h2>
<table border="1">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>专业</th>
</tr>
<tr>
<td>张三</td>
<td>20</td>
<td>计算机科学</td>
</tr>
<tr>
<td>李四</td>
<td>22</td>
<td>软件工程</td>
</tr>
</table>
</body>
</html>
示例 4: 表单示例
<!DOCTYPE html>
<html>
<head>
<title>表单示例</title>
</head>
<body>
<h2>注册表单</h2>
<form action="/submit_form" method="post">
<label for="name">姓名:</label><br>
<input type="text" id="name" name="name"><br>
<label for="email">邮箱:</label><br>
<input type="email" id="email" name="email"><br>
<input type="submit" value="提交">
</form>
</body>
</html>
示例 5: 语义化标签示例
<!DOCTYPE html>
<html>
<head>
<title>语义化标签示例</title>
</head>
<body>
<header>
<h1>我的网站</h1>
<nav>
<ul>
<li>首页</li>
<li>关于我们</li>
<li>服务</li>
</ul>
</nav>
</header>
<section>
<h2>最新文章</h2>
<article>
<h3>文章标题</h3>
<p>这里是文章的内容...</p >
</article>
<aside>
<h4>相关文章</h4>
<ul>
<li>文章1</li>
<li>文章2</li>
</ul>
</aside>
</section>
<footer>
<p>版权所有 © 2023</p >
</footer>
</body>
</html>
这些示例展示了HTML的一些基本用法，包括文档结构、文本格式化、列表、表格、表单以及语义化标签。
附
一、表格标签：<li>（列表项）、<ul>（无序列表）和<ol>（有序列表）的使用示例
HTML中表格标签：<li>（列表项）、<ul>（无序列表）和<ol>（有序列表）标签的使用示例，这些示例将展示如何创建基本的列表结构。
无序列表 (
<ul>)无序列表用于表示一组无需排序的项目。每个项目前都会有一个默认的圆点作为标记，但你可以通过CSS来自定义这个标记。
<ul> <li>苹果</li> <li>香蕉</li> <li>橙子</li> <li>葡萄</li> </ul>有序列表 (
<ol>)有序列表用于表示一组需要按特定顺序排列的项目。每个项目前都会有一个默认的编号（通常是数字），但你可以通过CSS来自定义编号的样式（如罗马数字、字母等）。
<ol> <li>打开冰箱门</li> <li>把大象放进去</li> <li>关上冰箱门</li> <li>（注意：这只是一个笑话，实际上你不能把大象放进冰箱）</li> </ol>嵌套列表
你可以在列表内部嵌套另一个列表，以表示层级关系。这既可以在无序列表中嵌套有序列表，也可以在有序列表中嵌套无序列表，或者嵌套相同类型的列表。
无序列表内嵌套有序列表：
<ul> <li>购物清单 <ol> <li>牛奶</li> <li>鸡蛋</li> <li>面包</li> </ol> </li> <li>烹饪步骤 <ol> <li>加热锅</li> <li>加入油</li> <li>翻炒食材</li> </ol> </li> </ul>有序列表内嵌套无序列表：
<ol> <li>准备阶段 <ul> <li>收集材料</li> <li>清洁工作区域</li> <li>预热烤箱</li> </ul> </li> <li>烹饪阶段 <ul> <li>按照食谱混合材料</li> <li>将混合物倒入烤盘</li> <li>放入烤箱</li> </ul> </li> <li>完成阶段 <ul> <li>从烤箱取出</li> <li>冷却</li> <li>享用美食</li> </ul> </li> </ol>
这些示例展示了如何在HTML文档中创建和使用基本的列表结构。你可以通过CSS进一步自定义列表的样式，包括项目符号、编号样式、列表缩进等。
二、使用HTML标签<li>、<ul>、<ol>的注意事项
使用HTML标签<li>、<ul>、<ol>时，需要注意以下几个关键事项，以确保网页的语义正确性和用户体验：
1. 标签的正确嵌套
<li>标签不能单独使用：<li>（列表项）标签必须嵌套在<ul>（无序列表）或<ol>（有序列表）标签内部。单独使用<li>标签是不符合HTML规范的，并且可能导致浏览器解析错误或显示不一致。- 嵌套规则：
<ul>和<ol>标签内部只能包含<li>标签作为直接子元素，而<li>标签内部则可以包含其他任何HTML元素，如文本、图片、链接、甚至另一个<ul>或<ol>列表（实现列表的嵌套）。
2. 列表的语义性
- 无序列表（
<ul>）：适用于表示一组无需特定顺序的列表项，如导航菜单、文章中的要点列表等。 - 有序列表（
<ol>）：适用于表示一组需要按特定顺序排列的列表项，如步骤说明、排名列表等。 - 定义列表（
<dl>、<dt>、<dd>）：虽然不直接涉及<li>标签，但定义列表（<dl>）用于表示术语及其定义或描述的列表，其中<dt>表示术语，<dd>表示定义或描述。注意，这里提到定义列表是为了强调HTML中还有其他类型的列表结构，但在直接使用<li>、<ul>、<ol>时，应关注它们的语义区别。
3. 样式与可访问性
- 默认样式：浏览器会为
<ul>和<ol>列表项提供默认的样式（如圆点或数字标记），但建议通过CSS来自定义这些样式，以满足网页的整体设计需求。 - 可访问性：确保列表的语义清晰，有助于屏幕阅读器等辅助技术正确解析和呈现网页内容。
4. 内容规范
- 避免重复内容：确保每个列表项的内容都是独一无二的，避免在列表中重复相同的信息。
- 内容准确性：确保列表项中的信息准确无误，避免误导用户。
- 清晰表达：列表项的内容应表达清晰、语句通顺，使用丰富的词汇来准确描述相关信息。
5. 兼容性
- HTML版本：注意HTML版本之间的差异，某些属性（如
<ol>的start、type和compact属性）在HTML5中可能不再支持或已被废弃，应使用CSS来实现类似的效果。 - 浏览器兼容性：虽然现代浏览器对HTML和CSS的支持已经非常完善，但在使用某些较新的CSS属性或特性时，仍需注意不同浏览器之间的兼容性差异。
综上所述，使用HTML标签<li>、<ul>、<ol>时，需要关注标签的正确嵌套、列表的语义性、样式与可访问性、内容规范以及兼容性等方面的问题。
