DEV Community
·
MERN - HTML（第7天）
💡
原文英文，约3700词，阅读约需14分钟。
📝
内容提要
HTML语义标签增强网页内容的结构和可读性，包括结构性标签、文本级标签、分组和媒体标签、列表标签、表格标签和表单标签。这些标签有助于提高SEO和无障碍访问。
🎯
关键要点
- HTML语义标签增强网页内容的结构和可读性。
- 结构性标签定义网页的布局，包括<header>、<nav>、<main>、<article>、<section>、<aside>和<footer>。
- <header>标签用于网页的顶部部分，通常包含标志和导航菜单。
- <nav>标签用于网页的导航链接，应该只包含重要的导航链接。
- <main>标签表示网页的主要内容，每个网页应仅有一个<main>标签。
- <article>标签表示独立的内容块，可以包含标题、文本、图像和链接。
- <section>标签用于网页中的主题部分，应该始终有一个标题。
- <aside>标签表示侧边内容，如广告或相关链接。
- <footer>标签用于网页的底部部分，通常包含版权信息和联系详情。
- 文本级语义标签帮助格式化和结构化文本，包括<h1>到<h6>、<p>、<blockquote>、<cite>、<q>、<time>、<address>等。
- <h1>到<h6>标签用于文档中的标题，<p>标签用于段落，<blockquote>用于引用长文本。
- 分组和媒体语义标签用于处理多媒体内容，包括<figure>、<figcaption>、<audio>、<video>等。
- <ul>和<ol>标签用于创建无序和有序列表，<dl>标签用于描述列表。
- 表格语义标签用于组织数据，包括<table>、<thead>、<tbody>、<tfoot>等。
- 表单语义标签用于收集用户输入，包括<form>、<label>、<input>、<button>等。
- 其他语义标签如<details>、<summary>和<dialog>用于创建交互式内容。
- HTML实体和符号用于显示特殊字符，表情符号用于增强文本表现。
- HTML文件路径用于指定文件位置，包括相对路径、绝对路径和根相对路径。
- HTML图像处理使用<img>标签，字符集定义字符的编码和显示方式。
❓
延伸问答
HTML语义标签的主要作用是什么？
HTML语义标签增强网页内容的结构和可读性，有助于提高SEO和无障碍访问。
结构性标签包括哪些？
结构性标签包括<header>、<nav>、<main>、<article>、<section>、<aside>和<footer>。
<main>标签的用途是什么？
<main>标签表示网页的主要内容，每个网页应仅有一个<main>标签。
如何使用<figure>和<figcaption>标签？
<figure>用于组合图像或图表，<figcaption>提供描述或标题，通常放在<figure>内部。
表单语义标签有哪些？
表单语义标签包括<form>、<label>、<input>、<button>等，用于收集用户输入。
如何创建无序和有序列表？
使用<ul>标签创建无序列表，使用<ol>标签创建有序列表，列表项用<li>标签表示。
➡️
