html元素按内容用途分为文档结构、文本内容、媒体、表单、表格、列表和语义化结构七类：分别定义页面骨架、组织文本、嵌入多媒体、收集用户输入、展示结构化数据、列举信息及明确内容角色。
HTML 元素按内容用途怎么分
HTML 本身不提供“内容分类”这个官方术语，但开发者常根据元素的语义和实际用途，把标签归为几类——不是语法分类，而是人脑理解页面时的自然分组。这种分组直接影响你写什么标签、怎么嵌套、是否利于 SEO 和屏幕阅读器识别。
<header></header>、<main></main>、<footer></footer> 这些算哪一类
它们属于「文档结构元素」，核心作用是划分页面逻辑区域，而不是控制样式或行为。浏览器不强制渲染差异，但辅助技术（比如读屏软件）会据此跳转导航，搜索引擎也依赖它们判断主次内容。
-
<header></header>不一定在页面顶部：它可以出现在<article></article>内部，表示该文章自己的标题区 -
<main></main>每个页面只能有一个，且不能嵌套在<article></article>、<aside></aside>或<nav></nav>里 -
<footer></footer>也不是必须放在最底下：它属于其最近的“节”级祖先（如或<article></article>），可重复出现
<p></p>、<h1></h1>、<strong></strong> 属于文本内容元素，但用法差别很大
它们都处理文字，但语义层级完全不同：<h1></h1> 是内容大纲的起点，<p></p> 是段落容器，<strong></strong> 是强调强度——不是“加粗”，而是表达重要性。滥用会导致语义混乱。
- 一个页面可以有多个
<h1></h1>，但仅限于不同<article></article>或<section></section>内部；全局主标题仍建议只用一个 -
<strong></strong>不能替代 CSS 的font-weight：它传达的是“这段话很重要”，不是“我想让它看起来粗一点” -
<p></p>不能直接包<div>：块级元素嵌套进行内上下文会触发浏览器自动纠错，可能破坏 DOM 结构 <h3>为什么 <code><img>和<video></video>被单独列为媒体元素因为它们本质是“外部资源引用”，而非纯文本内容。它们自带
src、alt、controls等专属属性，且默认为替换元素（replaced element）——浏览器用内部机制渲染，不完全受 CSS 盒模型控制。-
<img>必须有alt属性：空字符串alt=""表示“装饰性图片”，非空则需准确描述图像内容 -
<video></video>若无controls属性，就完全不可操作；加了也不代表自动播放，还得配合muted才可能静音自动播 - 不要用
<div> + background-image 模拟 <code><img>：前者无法被爬虫索引，也无法被读屏器识别为图像内容 真正容易被忽略的，是元素嵌套的隐含约束：比如<ul></ul>只能直接包<li>，<table> 必须有 <code><tbody> 或 <code><thead> 才算合法结构——这些不是浏览器报错才要管，而是从第一行 HTML 就该建立的语义直觉。</thead>
-
